From d421046d1550afd449f31d19d7f135939c85bbc7 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 1 Aug 2026 21:14:33 +0200
Subject: [PATCH 01/75] feat: modernize dashboard widgets

---
 PRODUCT.md                                    |  36 ++
 .../advanced/keyboard-shortcuts/index.mdx     |  17 +-
 .../after-the-installation.mdx                |  49 +-
 apps/docs/docs/management/boards/index.mdx    | 111 +++--
 apps/docs/docs/widgets/anchor-note/index.mdx  |  36 +-
 apps/docs/docs/widgets/app/index.mdx          |  29 +-
 .../widgets/archive-team-warrior/index.mdx    |  38 ++
 .../widgets/archive-team-warrior/index.ts     |  19 +
 apps/docs/docs/widgets/audio-stats/index.mdx  |   4 +
 apps/docs/docs/widgets/bazarr/index.mdx       |  40 +-
 .../docs/docs/widgets/beszel-alerts/index.mdx |  40 +-
 .../docs/widgets/beszel-system-grid/index.mdx |  40 +-
 .../widgets/beszel-system-stats/index.mdx     |   4 +
 .../widgets/beszel-system-table/index.mdx     |  37 +-
 apps/docs/docs/widgets/bookmarks/index.mdx    |  29 +-
 apps/docs/docs/widgets/calendar/index.mdx     | 101 ++--
 apps/docs/docs/widgets/clock/index.mdx        |  34 +-
 apps/docs/docs/widgets/coolify/index.mdx      |  43 +-
 apps/docs/docs/widgets/custom-api/index.mdx   |  18 +-
 .../docs/widgets/dns-hole-controls/index.mdx  |  67 +--
 .../docs/widgets/dns-hole-summary/index.mdx   |  65 +--
 .../docs/widgets/docker-containers/index.mdx  |  43 +-
 apps/docs/docs/widgets/downloads/index.mdx    |  99 ++--
 apps/docs/docs/widgets/firewall/index.mdx     |  36 +-
 .../docs/widgets/health-monitoring/index.mdx  |   4 +
 apps/docs/docs/widgets/iframe/index.mdx       |  35 +-
 .../widgets/immich-album-carousel/index.mdx   |  39 +-
 .../widgets/immich-server-stats/index.mdx     |  40 +-
 .../docs/widgets/indexer-manager/index.mdx    |  43 +-
 .../docs/docs/widgets/media-missing/index.mdx |  54 +-
 .../docs/widgets/media-releases/index.mdx     |  53 +-
 .../docs/widgets/media-request-list/index.mdx |   4 +
 .../widgets/media-request-stats/index.mdx     |  49 +-
 apps/docs/docs/widgets/media-server/index.mdx |  72 +--
 .../docs/widgets/media-transcoding/index.mdx  |  51 +-
 .../widgets/minecraft-server-status/index.mdx |  37 +-
 .../network-controller-status/index.mdx       |  45 +-
 .../network-controller-summary/index.mdx      |  42 +-
 apps/docs/docs/widgets/notebook/index.mdx     |   4 +
 .../docs/docs/widgets/notifications/index.mdx |  43 +-
 .../docs/docs/widgets/paperless-ngx/index.mdx |  37 +-
 apps/docs/docs/widgets/patchmon/index.mdx     |  63 +--
 apps/docs/docs/widgets/releases/index.mdx     |   4 +
 apps/docs/docs/widgets/rss-feed/index.mdx     |  27 +-
 .../widgets/smart-home-entity-state/index.mdx |  54 +-
 .../smart-home-execute-automation/index.mdx   |  52 +-
 .../docs/widgets/speedtest-tracker/index.mdx  |  38 +-
 apps/docs/docs/widgets/stock-price/index.mdx  |  34 +-
 apps/docs/docs/widgets/system-disks/index.mdx |   4 +
 apps/docs/docs/widgets/system-disks/index.ts  |   6 +-
 .../docs/widgets/system-resources/index.mdx   |   4 +
 apps/docs/docs/widgets/timetable/index.mdx    |  16 +-
 apps/docs/docs/widgets/tracearr/index.mdx     |  51 +-
 apps/docs/docs/widgets/traefik/index.mdx      |   4 +
 apps/docs/docs/widgets/umami/index.mdx        |  47 +-
 apps/docs/docs/widgets/ups/index.mdx          |  52 +-
 apps/docs/docs/widgets/uptime-kuma/index.mdx  |  37 +-
 apps/docs/docs/widgets/video/index.mdx        |  22 +-
 apps/docs/docs/widgets/video/index.tsx        |   2 +-
 apps/docs/docs/widgets/vpn/index.mdx          |  35 +-
 apps/docs/docs/widgets/weather/index.mdx      |  27 +-
 .../src/components/widgets/interactions.tsx   |  47 ++
 .../app/[locale]/_client-providers/trpc.tsx   |   8 +-
 .../app/[locale]/boards/(content)/_client.tsx |  27 +-
 .../boards/(content)/_header-actions.tsx      |   5 +-
 .../custom-widgets/_custom-widget-preview.tsx |   4 +-
 .../advanced-focus/advanced-focus.module.css  | 132 +++++
 .../board/advanced-focus/context.tsx          | 213 ++++++++
 .../board/advanced-focus/escape.spec.ts       |  54 ++
 .../components/board/advanced-focus/escape.ts |  13 +
 .../board/advanced-focus/geometry.spec.ts     |  30 ++
 .../board/advanced-focus/geometry.ts          |  26 +
 .../board/items/actions/create-item.ts        |  46 +-
 .../board/items/actions/empty-position.ts     |  57 ++-
 .../items/actions/test/create-item.spec.ts    |  60 ++-
 .../items/actions/test/empty-position.spec.ts |  33 +-
 .../components/board/items/item-actions.tsx   |   8 +-
 .../components/board/items/item-content.tsx   | 183 ++++++-
 .../board/items/item-select-modal.module.css  |  25 +
 .../board/items/item-select-modal.tsx         |  95 +++-
 .../board/items/widget-context-menu.tsx       | 169 +++++--
 .../items/widget-hover-overlay.module.css     |   6 +-
 .../board-empty-space-context-menu.tsx        | 177 +++++++
 .../board/sections/gridstack/gridstack.tsx    |   9 +-
 .../board/sections/gridstack/use-gridstack.ts |   2 +
 .../nextjs/src/components/layout/constants.ts |   1 +
 apps/nextjs/src/components/layout/shell.tsx   |   3 +-
 e2e/board-advanced-interactions.spec.ts       | 364 ++++++++++++++
 .../src/router/test/widgets/patchmon.spec.ts  |   4 +-
 .../src/router/test/widgets/timetable.spec.ts | 114 +++++
 .../widgets/__tests__/beszel-failures.spec.ts |  17 +
 .../__tests__/custom-api-security.spec.ts     |  18 +
 .../api/src/router/widgets/beszel-failures.ts |   5 +
 packages/api/src/router/widgets/beszel.ts     |  17 +
 packages/api/src/router/widgets/calendar.ts   |  49 +-
 .../src/router/widgets/custom-api-security.ts |  21 +
 packages/api/src/router/widgets/custom-api.ts |   9 +-
 packages/api/src/router/widgets/firewall.ts   |  35 +-
 .../api/src/router/widgets/indexer-manager.ts |  30 +-
 .../api/src/router/widgets/media-organizer.ts |  23 +-
 .../api/src/router/widgets/media-requests.ts  |   2 +
 .../api/src/router/widgets/media-server.ts    |   7 +-
 .../api/src/router/widgets/notifications.ts   |  43 +-
 packages/api/src/router/widgets/rssFeed.ts    |   5 +
 packages/api/src/router/widgets/smart-home.ts |  35 +-
 packages/api/src/router/widgets/timetable.ts  |  76 ++-
 packages/api/src/router/widgets/vpn.ts        |  41 +-
 packages/api/src/settle-integrations.ts       |  10 +-
 .../api/src/test/settle-integrations.spec.ts  |  17 +
 packages/boards/src/updater.spec.ts           |  18 +
 packages/boards/src/updater.ts                |  52 +-
 packages/common/src/bounded-response.ts       |  45 ++
 packages/common/src/server.ts                 |   1 +
 .../audiobookshelf-integration.ts             |   9 +
 .../audiobookshelf/audiobookshelf-types.ts    |   8 +
 .../src/immich/immich-integration.ts          |   2 -
 packages/integrations/src/index.ts            |   1 +
 .../interfaces/smart-home/smart-home-types.ts |   2 +-
 .../overseerr/overseerr-integration.spec.ts   |  30 ++
 .../src/overseerr/overseerr-integration.ts    |  36 +-
 .../src/patchmon/patchmon-types.ts            |  10 +-
 .../src/plex/test/plex-integration.spec.ts    |   2 +-
 .../src/traefik/traefik-bounds.spec.ts        |  12 +
 .../src/traefik/traefik-bounds.ts             |  12 +
 .../src/traefik/traefik-integration.spec.ts   |  43 ++
 .../src/traefik/traefik-integration.ts        |  80 ++-
 .../integrations/src/traefik/traefik-types.ts |  10 +
 .../src/smart-home-entity-state.spec.ts       |  24 +
 .../src/smart-home-entity-state.ts            |  23 +-
 packages/request-handler/src/timetable-url.ts |  26 +
 .../request-handler/src/timetable.spec.ts     |  79 +++
 packages/request-handler/src/timetable.ts     |  19 +-
 packages/request-handler/src/vpn.ts           |  18 +-
 packages/translation/src/lang/en.json         | 167 ++++++-
 packages/widgets/src/_inputs/common.tsx       |   1 +
 .../_inputs/widget-dynamic-select-input.tsx   |  10 +-
 .../widgets/src/anchor-note/component.tsx     | 136 +++++-
 packages/widgets/src/anchor-note/index.ts     |   2 +
 packages/widgets/src/app/component.tsx        |  24 +-
 packages/widgets/src/app/index.ts             |   1 +
 .../src/archive-team-warrior/component.tsx    | 111 ++++-
 .../widgets/src/archive-team-warrior/index.ts |   2 +
 .../widgets/src/audio-stats/component.tsx     |  78 ++-
 packages/widgets/src/audio-stats/index.ts     |   1 +
 packages/widgets/src/bazarr/component.tsx     |  27 +-
 packages/widgets/src/bazarr/index.ts          |   2 +
 packages/widgets/src/bazarr/layout.spec.ts    |  18 +
 .../widgets/src/beszel-alerts/component.tsx   |  10 +-
 packages/widgets/src/beszel-alerts/index.ts   |   1 +
 .../src/beszel-system-grid/component.tsx      |  24 +-
 .../src/beszel-system-stats/component.tsx     |  64 ++-
 .../widgets/src/beszel-system-stats/index.ts  |   3 +-
 .../src/beszel-system-stats/selection.spec.ts |  19 +
 .../src/beszel-system-stats/selection.ts      |  32 ++
 .../src/beszel-system-table/component.tsx     | 103 +++-
 packages/widgets/src/bookmarks/component.tsx  |  96 +++-
 packages/widgets/src/bookmarks/index.tsx      |   1 +
 packages/widgets/src/bookmarks/layout.spec.ts |  17 +
 .../src/calendar/calendar-event-list.tsx      | 277 ++++++-----
 .../widgets/src/calendar/calendar-events.ts   |  77 +++
 .../widgets/src/calendar/calendar.spec.ts     |  41 +-
 packages/widgets/src/calendar/component.tsx   | 245 +++++-----
 packages/widgets/src/calendar/index.ts        |   1 +
 packages/widgets/src/clock/component.tsx      |  27 +-
 packages/widgets/src/clock/index.ts           |   1 +
 packages/widgets/src/coolify/component.tsx    |  38 +-
 packages/widgets/src/coolify/index.ts         |   1 +
 .../widgets/src/coolify/instance-card.tsx     |  18 +-
 .../src/coolify/single-instance-layout.tsx    |  18 +-
 packages/widgets/src/custom-api/component.tsx | 171 ++++++-
 packages/widgets/src/custom-api/index.ts      |  18 +-
 packages/widgets/src/definition.spec.ts       |  19 +
 packages/widgets/src/definition.ts            |  12 +
 .../src/dns-hole/controls/component.tsx       |  82 +++-
 .../src/dns-hole/summary/component.tsx        |  74 ++-
 packages/widgets/src/docker/component.tsx     |  53 +-
 packages/widgets/src/docker/layout.spec.ts    |  37 ++
 packages/widgets/src/docker/layout.ts         |  19 +
 packages/widgets/src/downloads/component.tsx  | 185 ++++---
 .../widgets/src/downloads/helpers.spec.ts     |  28 ++
 packages/widgets/src/downloads/helpers.ts     |  27 +
 packages/widgets/src/downloads/index.ts       |   1 +
 .../src/filter-storage-volumes.spec.ts        |   6 +-
 .../widgets/src/filter-storage-volumes.ts     |   6 +-
 .../widgets/src/firewall/bandwidth.spec.ts    |  40 ++
 packages/widgets/src/firewall/bandwidth.ts    |  39 ++
 packages/widgets/src/firewall/component.tsx   | 462 +++++++++++-------
 .../widgets/src/firewall/firewall-version.tsx |  37 +-
 packages/widgets/src/firewall/index.ts        |   1 +
 .../cluster/accordion-state.spec.ts           |  17 +
 .../cluster/accordion-state.ts                |   4 +
 .../cluster/cluster-health.tsx                |  23 +-
 .../src/health-monitoring/component.tsx       |  48 +-
 .../widgets/src/health-monitoring/index.ts    |   2 +
 .../integration-selection.spec.ts             |  25 +
 .../integration-selection.ts                  |  12 +
 .../src/health-monitoring/system-health.tsx   | 377 +++++++-------
 packages/widgets/src/iframe/component.spec.ts |  26 +
 packages/widgets/src/iframe/component.tsx     |  72 ++-
 .../src/immich/album-carousel/component.tsx   | 187 ++++++-
 .../src/immich/album-carousel/index.ts        |  33 +-
 .../src/immich/server-stats/component.tsx     |  45 +-
 .../widgets/src/immich/server-stats/index.ts  |   1 +
 packages/widgets/src/index.tsx                |   1 +
 .../widgets/src/indexer-manager/component.tsx |  59 ++-
 packages/widgets/src/indexer-manager/index.ts |  18 +-
 .../widgets/src/media-missing/component.tsx   | 144 +++++-
 packages/widgets/src/media-missing/index.ts   |   1 +
 .../widgets/src/media-missing/tabs.spec.ts    |  18 +
 packages/widgets/src/media-missing/tabs.ts    |  13 +
 .../widgets/src/media-releases/component.tsx  |  82 +++-
 .../src/media-requests/list/component.tsx     |  43 +-
 .../widgets/src/media-requests/list/index.ts  |   1 +
 .../src/media-requests/stats/component.tsx    | 102 ++--
 .../widgets/src/media-requests/stats/index.ts |   1 +
 .../widgets/src/media-server/component.tsx    | 224 +++++----
 packages/widgets/src/media-server/index.ts    |   1 +
 .../src/media-transcoding/component.tsx       | 123 ++++-
 .../widgets/src/media-transcoding/index.ts    |   2 +
 .../src/media-transcoding/layout.spec.ts      |  35 ++
 .../panels/statistics.panel.tsx               |   3 +-
 .../src/minecraft/server-status/component.tsx |  60 ++-
 .../widgets/src/modals/widget-edit-modal.tsx  |   4 +
 .../network-status/component.tsx              |  33 +-
 .../network-status/variants/stat-row.tsx      |  14 +-
 .../network-status/variants/wifi-variant.tsx  |  18 +-
 .../network-status/variants/wired-variant.tsx |  18 +-
 .../network-controller/summary/component.tsx  |  82 ++--
 packages/widgets/src/notebook/notebook.tsx    | 229 ++++++---
 .../widgets/src/notifications/component.tsx   | 126 +++--
 packages/widgets/src/notifications/index.ts   |   1 +
 packages/widgets/src/options.ts               |   2 +
 .../widgets/src/paperless-ngx/component.tsx   |  24 +-
 packages/widgets/src/paperless-ngx/index.ts   |   2 +
 packages/widgets/src/patchmon/component.tsx   |  28 +-
 packages/widgets/src/patchmon/index.ts        |  50 +-
 .../src/patchmon/os-distribution-section.tsx  |  26 +-
 packages/widgets/src/patchmon/stat-colors.ts  |   6 +-
 .../src/patchmon/test/stat-colors.spec.ts     |  15 +-
 .../test/threshold-validation.spec.ts         |  40 +-
 packages/widgets/src/releases/component.tsx   | 259 +++++-----
 packages/widgets/src/releases/index.ts        |   1 +
 packages/widgets/src/rssFeed/component.tsx    |  95 +++-
 .../widgets/src/rssFeed/feed-display.spec.ts  |  23 +
 packages/widgets/src/rssFeed/index.ts         |   1 +
 .../src/smart-home/entity-state/component.tsx |  74 ++-
 .../src/smart-home/entity-state/index.ts      |   2 +
 .../execute-automation/component.tsx          |  71 ++-
 .../smart-home/execute-automation/index.ts    |   1 +
 .../src/speedtest-tracker/averages.tsx        |   4 +-
 .../src/speedtest-tracker/component.tsx       |  78 ++-
 .../src/speedtest-tracker/helpers.spec.ts     |  28 ++
 .../widgets/src/speedtest-tracker/helpers.ts  |  36 +-
 .../widgets/src/speedtest-tracker/index.ts    |   1 +
 .../src/speedtest-tracker/latest-result.tsx   |   5 +-
 packages/widgets/src/stocks/component.spec.ts |  18 +
 packages/widgets/src/stocks/component.tsx     |  67 +--
 packages/widgets/src/stocks/index.ts          |   1 +
 .../widgets/src/system-disks/component.tsx    | 108 ++--
 .../widgets/src/system-disks/display.spec.ts  |  14 +
 .../src/system-resources/component.tsx        | 270 +++++++---
 .../src/system-resources/history.spec.ts      |  29 ++
 packages/widgets/src/timetable/component.tsx  | 123 +++--
 packages/widgets/src/timetable/index.ts       |   4 +-
 packages/widgets/src/tracearr/bitrate.spec.ts |  18 +
 packages/widgets/src/tracearr/bitrate.ts      |  20 +
 packages/widgets/src/tracearr/component.tsx   |  69 ++-
 packages/widgets/src/tracearr/index.ts        |   1 +
 packages/widgets/src/traefik/component.tsx    | 161 ++++--
 packages/widgets/src/traefik/index.ts         |   1 +
 packages/widgets/src/umami/component.tsx      |   9 +-
 packages/widgets/src/umami/index.ts           |   3 +
 packages/widgets/src/umami/umami-content.tsx  | 157 +++---
 packages/widgets/src/ups/component.tsx        |  99 +++-
 packages/widgets/src/ups/index.ts             |   1 +
 .../widgets/src/uptime-kuma/aggregate.spec.ts |  31 ++
 packages/widgets/src/uptime-kuma/aggregate.ts |  30 ++
 .../widgets/src/uptime-kuma/component.tsx     | 110 +++--
 packages/widgets/src/uptime-kuma/index.ts     |   1 +
 packages/widgets/src/video/component.tsx      |  42 +-
 packages/widgets/src/vpn/component.tsx        |  44 +-
 packages/widgets/src/vpn/index.ts             |   1 +
 .../widgets/src/weather/animated-icon.tsx     |   2 -
 .../widgets/src/weather/component.spec.ts     |  16 +
 packages/widgets/src/weather/component.tsx    |  81 ++-
 packages/widgets/src/weather/index.ts         |   1 +
 286 files changed, 9664 insertions(+), 3282 deletions(-)
 create mode 100644 PRODUCT.md
 create mode 100644 apps/docs/docs/widgets/archive-team-warrior/index.mdx
 create mode 100644 apps/docs/docs/widgets/archive-team-warrior/index.ts
 create mode 100644 apps/docs/src/components/widgets/interactions.tsx
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/context.tsx
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/escape.ts
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/geometry.ts
 create mode 100644 apps/nextjs/src/components/board/items/item-select-modal.module.css
 create mode 100644 apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
 create mode 100644 apps/nextjs/src/components/layout/constants.ts
 create mode 100644 e2e/board-advanced-interactions.spec.ts
 create mode 100644 packages/api/src/router/test/widgets/timetable.spec.ts
 create mode 100644 packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts
 create mode 100644 packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
 create mode 100644 packages/api/src/router/widgets/beszel-failures.ts
 create mode 100644 packages/api/src/router/widgets/custom-api-security.ts
 create mode 100644 packages/boards/src/updater.spec.ts
 create mode 100644 packages/common/src/bounded-response.ts
 create mode 100644 packages/integrations/src/overseerr/overseerr-integration.spec.ts
 create mode 100644 packages/integrations/src/traefik/traefik-bounds.spec.ts
 create mode 100644 packages/integrations/src/traefik/traefik-bounds.ts
 create mode 100644 packages/integrations/src/traefik/traefik-integration.spec.ts
 create mode 100644 packages/request-handler/src/smart-home-entity-state.spec.ts
 create mode 100644 packages/request-handler/src/timetable-url.ts
 create mode 100644 packages/request-handler/src/timetable.spec.ts
 create mode 100644 packages/widgets/src/bazarr/layout.spec.ts
 create mode 100644 packages/widgets/src/beszel-system-stats/selection.spec.ts
 create mode 100644 packages/widgets/src/beszel-system-stats/selection.ts
 create mode 100644 packages/widgets/src/bookmarks/layout.spec.ts
 create mode 100644 packages/widgets/src/calendar/calendar-events.ts
 create mode 100644 packages/widgets/src/definition.spec.ts
 create mode 100644 packages/widgets/src/docker/layout.spec.ts
 create mode 100644 packages/widgets/src/docker/layout.ts
 create mode 100644 packages/widgets/src/downloads/helpers.spec.ts
 create mode 100644 packages/widgets/src/downloads/helpers.ts
 create mode 100644 packages/widgets/src/firewall/bandwidth.spec.ts
 create mode 100644 packages/widgets/src/firewall/bandwidth.ts
 create mode 100644 packages/widgets/src/health-monitoring/cluster/accordion-state.spec.ts
 create mode 100644 packages/widgets/src/health-monitoring/cluster/accordion-state.ts
 create mode 100644 packages/widgets/src/health-monitoring/integration-selection.spec.ts
 create mode 100644 packages/widgets/src/health-monitoring/integration-selection.ts
 create mode 100644 packages/widgets/src/iframe/component.spec.ts
 create mode 100644 packages/widgets/src/media-missing/tabs.spec.ts
 create mode 100644 packages/widgets/src/media-missing/tabs.ts
 create mode 100644 packages/widgets/src/media-transcoding/layout.spec.ts
 create mode 100644 packages/widgets/src/rssFeed/feed-display.spec.ts
 create mode 100644 packages/widgets/src/speedtest-tracker/helpers.spec.ts
 create mode 100644 packages/widgets/src/stocks/component.spec.ts
 create mode 100644 packages/widgets/src/system-disks/display.spec.ts
 create mode 100644 packages/widgets/src/system-resources/history.spec.ts
 create mode 100644 packages/widgets/src/tracearr/bitrate.spec.ts
 create mode 100644 packages/widgets/src/tracearr/bitrate.ts
 create mode 100644 packages/widgets/src/uptime-kuma/aggregate.spec.ts
 create mode 100644 packages/widgets/src/uptime-kuma/aggregate.ts
 create mode 100644 packages/widgets/src/weather/component.spec.ts

diff --git a/PRODUCT.md b/PRODUCT.md
new file mode 100644
index 000000000..5bf336fa7
--- /dev/null
+++ b/PRODUCT.md
@@ -0,0 +1,36 @@
+# Product
+
+## Register
+
+product
+
+## Users
+
+Homarr is for experienced self-hosters, homelab operators, and administrators who run several services and want one dashboard for monitoring and operating them. They understand technical data, value density, and spend time tuning dashboards to match their own workflows.
+
+## Product Purpose
+
+Homarr brings status, data, and safe day-to-day controls from self-hosted services into one customizable dashboard. Success means users can inspect problems, act on services, and reshape their workspace without repeatedly leaving the board.
+
+## Brand Personality
+
+Capable, precise, configurable. Homarr should feel calm under load, direct about system state, and rewarding to experts who refine details.
+
+## Anti-references
+
+- Consumer dashboards that hide useful detail behind simplified scores.
+- Decorative glass, oversized metric cards, and motion without state meaning.
+- Rigid layouts that force one workflow or require leaving the dashboard for routine actions.
+- Clever custom controls where familiar platform or Mantine interactions already work.
+
+## Design Principles
+
+- Preserve expert depth while prioritizing the most urgent information at small sizes.
+- Make routine inspection, filtering, configuration, and safe actions available from the board.
+- Reveal dense workspaces progressively through a consistent advanced focus mode.
+- Treat personalization as a core workflow, not a settings afterthought.
+- Show loading, stale, partial, empty, and failed states truthfully without discarding valid data.
+
+## Accessibility & Inclusion
+
+Target WCAG AA. Every pointer interaction needs a keyboard and coarse-pointer path. Focus must be visible and restored after overlays close. Motion must respect reduced-motion preferences, and status must never rely on color alone.
diff --git a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
index 8dfe0f285..5d7f01cde 100644
--- a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
+++ b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
@@ -6,16 +6,23 @@ tags:
 
 Homarr has the following keyboard shortcuts:
 
-| Shortcut | Description |
-| -------- | ----------- |
-| `MOD` + `K` | Opens the search bar |
-| `MOD` + `J` | Toggles Dark Mode |
-| `MOD` + `E` | Toggles Edit Mode |
+| Shortcut                                   | Description                                                |
+| ------------------------------------------ | ---------------------------------------------------------- |
+| `MOD` + `K`                                | Opens the search bar                                       |
+| `MOD` + `J`                                | Toggles Dark Mode                                          |
+| `MOD` + `E`                                | Toggles Edit Mode                                          |
+| Hold `Shift` while hovering a widget       | Opens its temporary advanced view                          |
+| `Shift` + `Enter` on a focused widget      | Opens and pins its advanced view                           |
+| `Esc`                                      | Closes an open advanced view or board menu                 |
+| `Shift` + `F10` on a focused board section | Opens the precise add-item menu at the next available cell |
 
 :::tip
 
 Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.
 
+Advanced view and precise placement are available outside edit mode. Precise placement still requires permission to
+change the board and the right-click interaction preference to be enabled.
+
 :::
 
 :::note
diff --git a/apps/docs/docs/getting-started/after-the-installation.mdx b/apps/docs/docs/getting-started/after-the-installation.mdx
index 7ac904bf4..f8fe31ed2 100644
--- a/apps/docs/docs/getting-started/after-the-installation.mdx
+++ b/apps/docs/docs/getting-started/after-the-installation.mdx
@@ -54,11 +54,7 @@ You must choose a username and password (both can later be changed).
 We enforce strict password requirements when you enter your password to protect your instance if you accidentally
 expose it to the internet.
 
-<img
-  src={imageStartFromScratchStepAdminUser}
-  alt={"Screenshot form to create admin user"}
-  width={300}
-/>
+<img src={imageStartFromScratchStepAdminUser} alt={"Screenshot form to create admin user"} width={300} />
 
 If you selected external providers (such as LDAP or OIDC), you'll be prompted to create an admin group.
 This group will be used to synchronize users from your provider to Homarr.
@@ -116,22 +112,14 @@ The onboarding can no longer be started again.
 From here you can click on one of the provided links to continue your journey.
 We recommend you to continue with the section [creating your first board on this page](#creating-your-first-board).
 
-<img
-  src={imageStartFromScratchStepFinish}
-  alt={"Screenshot of the finish onboarding process with links"}
-  width={300}
-/>
+<img src={imageStartFromScratchStepFinish} alt={"Screenshot of the finish onboarding process with links"} width={300} />
 
 ### Importing a ZIP from version before 1.0.0
 
 This is recommended when you used Homarr before and want to re-import your data.
 It is important that you first migrate correctly using [the list of breaking changes for 1.0](/blog/2024/09/23/version-1.0).
 
-<img
-  src={manageExportOldHomarr}
-  alt="Export from old Homarr"
-  style={{ maxWidth: 500 }}
-/>
+<img src={manageExportOldHomarr} alt="Export from old Homarr" style={{ maxWidth: 500 }} />
 
 **How to export and import data**
 
@@ -197,38 +185,29 @@ Here you have the following options in the header:
 
 When entering the edit mode, you'll get some additional buttons to work with:
 
-<img
-  src={manageBoardHeaderEditMode}
-  alt={"Screenshot of buttons in the edit mode"}
-  width={200}
-/>
+<img src={manageBoardHeaderEditMode} alt={"Screenshot of buttons in the edit mode"} width={200} />
 
 - **Add item**: Click this button to add new elements to your page.
-- **Exit edit mode**: Click this btuton to save your changes and exit edit mode.
+- **Exit edit mode**: Click this button to save your changes and exit edit mode.
+
+Outside edit mode, right-click a widget for its live status, refresh, settings, quick options, and supported actions.
+Hold `Shift` while hovering a widget for a temporary advanced view; use its pin control to keep it open. You can also
+focus the widget and press `Shift` + `Enter` to open it pinned. If you can change the board, right-click empty grid
+space to add an item at that position.
+On a touch device, touch and hold empty grid space for the same precise-placement menu.
 
 To continue, click the option "New Item":
 
-<img
-  src={manageBoardHeaderAddItem}
-  alt={"Screenshot of the add item menu"}
-  width={200}
-/>
+<img src={manageBoardHeaderAddItem} alt={"Screenshot of the add item menu"} width={200} />
 
 Next, you can choose what item you'd like to add.
 We will discuss the other options in the following sections - for now choose "App" to continue.
 
-<img
-  src={manageBoardHeaderChooseItem}
-  alt={"Screenshot of choosing the app item in the modal"}
-  width={300}
-/>
+<img src={manageBoardHeaderChooseItem} alt={"Screenshot of choosing the app item in the modal"} width={300} />
 
 As soon as you chose the app, the modal will close and you'll get the following item on your board:
 
-<img
-  src={manageBoardNoApp}
-  alt="Screenshot of the No app element on the board"
-/>
+<img src={manageBoardNoApp} alt="Screenshot of the No app element on the board" />
 
 This is expected, because you haven't told Homarr what app it should show in this item.
 To configure this, click on the small 3 dots at the top of the item in the edit mode and choose "Edit item" in the menu.
diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index f1eb3c572..75c8c6e6f 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -9,11 +9,11 @@ tags:
   - Layout
 ---
 
-import iconColorImage from './img/icon-color.png'
-import itemRadiusImage from './img/item-radius.png'
-import layoutLargeImage from './img/layout-large.png'
-import layoutMediumImage from './img/layout-medium.png'
-import layoutSmallImage from './img/layout-small.png'
+import iconColorImage from "./img/icon-color.png";
+import itemRadiusImage from "./img/item-radius.png";
+import layoutLargeImage from "./img/layout-large.png";
+import layoutMediumImage from "./img/layout-medium.png";
+import layoutSmallImage from "./img/layout-small.png";
 
 Each dashboard is called a "board".
 You can create as many boards as you want.
@@ -24,24 +24,29 @@ Other boards can be viewed by direct links (e.g. my-homarr.com/board/smart-home)
 Names of boards must be unique because this will be used in the URL to load the desired board.
 
 ## Create a new board
+
 When creating a board, the availability of the board name will be checked for you.
 
 ![](./img/create-board-modal.png)
 
 ### Name
+
 The name must not include any special characters and must be at least one character long.
 Underscores and hyphen-minus are allowed.
 
 ### Column count
+
 Homarr has a complex drag and drop system that can be used from the browser.
 The column count defines how many horizontal columns are available to drag and drop elements to.
 
 ### Public
+
 This will enable public access for everyone - regardless of whether they are logged in or not.
 This can be really useful if you want to have public boards in your company or for family and fiends.
 Modifications for public boards must be allowed explicitly using user groups and their permissions.
 
 ## Board settings
+
 You navigate to the board settings by clicking on these three dots:
 
 ![](./img/navigate-to-settings.png)
@@ -51,7 +56,9 @@ Alternatively, you can also navigate from the board page itself using the cog ic
 ![](./img/navigate-to-settings-2.png)
 
 ### General
+
 #### Page title
+
 This is the title that will be visible at the top left in the navigation bar:
 
 ![](./img/page-title.png)
@@ -59,6 +66,7 @@ This is the title that will be visible at the top left in the navigation bar:
 This field is optional and Homarr will fall back to "Homarr" if nothing is set.
 
 #### Meta title
+
 This is the secondary title of the page that is not directly visible in the page itself.
 Browser will use it to set the title of tabs:
 
@@ -67,10 +75,12 @@ Browser will use it to set the title of tabs:
 Homarr will fall back to the board name and a suffix if nothing is set.
 
 #### Logo image URL
+
 This is the URL that is used for the image at the top left.
 Homarr will fall back to the Homarr logo if nothing is set.
 
 #### Favicon image URL
+
 This is the URL that is used for the favicon in the tab title.
 Homarr will fall back to the Homarr logo if nothing is set.
 
@@ -80,9 +90,10 @@ In this section you can configure the different responsive layouts. Depending on
 
 ![](./img/layout-settings.png)
 
-On each element the position and size of items can be changed seperately.
+On each element the position and size of items can be changed separately.
 When adding a new layout the position and sizes will automatically be generated depending on the column count.
-When adding a new item / dynamic section that will always be 1x1 on each layout and placed on the first available position.
+New widgets use their default size and the first available position on each layout. Adding from an empty grid cell anchors
+the widget near that cell on the active layout; Homarr still chooses safe free positions for the other responsive layouts.
 
 #### Name
 
@@ -94,51 +105,65 @@ Amount of columns for this layout. Defines how many items can be placed in a row
 
 #### Breakpoint
 
-Minimum width of the screen where the layout will be used. 
+Minimum width of the screen where the layout will be used.
 Once the minmum of the next layout is reached the layout will change.
 
 #### Preview
 
-<img src={layoutSmallImage}  height={256} />
-<img src={layoutMediumImage}  height={256} />
-<img src={layoutLargeImage}  height={256} />
+<img src={layoutSmallImage} height={256} />
+<img src={layoutMediumImage} height={256} />
+<img src={layoutLargeImage} height={256} />
 
 ### Background
+
 #### Background image URL
+
 Homarr can display a background image behind apps and widgets.
 This URL can be used to define what image should be shown.
 
 #### Background image attachment
+
 This defines whether the background should move when the user scrolls.
 
 #### Background image size
+
 This defines whether the background should cover the entire page (and possibly be cropped) or never be cropped but may not cover the entire page.
 
 #### Background image repeat
+
 This defines whether the background should be repeated if it cannot cover the entire page.
 This option can be useful if you have patterns that can be repeated easily (e.g. patterns):
 
 ![](./img/background-repeat.png)
 
 ### Appearance
+
 #### Primary color
+
 Color that can be chosen freely to give accents to active elements.
+
 #### Secondary color
+
 Color that can be chosen freely to give accents.
+
 #### Opacity
+
 Opacity of the colors.
+
 #### Icon color
+
 Change the color of your bookmark / app icons.
 
-<img src={iconColorImage}  height={100} />
+<img src={iconColorImage} height={100} />
 
 #### Item radius
+
 Change the radius of your items / categories.
 
-<img src={itemRadiusImage}  height={100} />
-
+<img src={itemRadiusImage} height={100} />
 
 ### Custom CSS
+
 This is the field where you can enter custom CSS.
 The styling will only be applied on the respective board page.
 
@@ -147,14 +172,29 @@ The styling will only be applied on the respective board page.
 ### Behaviour
 
 #### Disable app status
+
 This will disable the status check for apps.
 
+#### Work directly from the board
+
+Widgets expose their routine controls without requiring edit mode:
+
+- Hold `Shift` while hovering a widget for a temporary advanced view, then use its pin control to keep it open. Focus
+  the widget and press `Shift` + `Enter` to open it pinned, or use the maximize control on touch devices.
+- Right-click a widget to inspect its live query status, refresh its data, change quick options, open settings, or run
+  supported actions. Available controls follow your board and integration permissions.
+- If you can modify the board, right-click or touch and hold an empty grid cell to add an item there. Focus a board
+  section and press `Shift` + `F10` for the keyboard equivalent.
+
+Widget and empty-space context menus follow the **Enable right click on widgets** preference in your user settings.
+
 ### Access control
+
 With the access control, you can permit a single user or a group to your board.
 The users and groups can have one of these three levels of access:
 
 | **Permission Level** | View board | Edit mode | Settings | Danger zone (eg. delete) |
-|----------------------|------------|-----------|----------|--------------------------|
+| -------------------- | ---------- | --------- | -------- | ------------------------ |
 | View board           | X          |           |          |                          |
 | Modify board         | X          | X         | X        |                          |
 | Full access          | X          | X         | X        | X                        |
@@ -173,18 +213,23 @@ After editing permissions, the save button below the table must be pressed.
 Otherwise, all changes will be discarded.
 
 ### Danger zone
+
 #### Rename
+
 Renaming a board will break all existing links to it permanently with no redirect.
 
 #### Board visibility
+
 By default, boards will be private. This means only authenticated users that are authorized have access.
 Making a board public will expose it to everyone - including unauthenticated users.
 
 #### Delete
+
 This will permanently delete the board.
 This action is irreversible and cannot be undone.
 
 ## Delete boards
+
 The deletion of boards is permanent and cannot be undone.
 There are two ways to delete a board:
 
@@ -196,7 +241,7 @@ Both actions will execute the same deletion process.
 ## Duplicate boards
 
 :::note
-Duplicating a board will not copy the users and groups that have access to the board 
+Duplicating a board will not copy the users and groups that have access to the board
 nor the integrations the user does not have access to.
 :::
 
@@ -206,47 +251,51 @@ You can duplicate a board by clicking on the three dots in the list of boards an
 ![](./img/duplicate-board-modal.png)
 
 ## Setting boards as your home board
+
 The home board is the dashboard, that will be shown at the root path of Homarr or if no board name was passed in the URL.
 All the following paths will lead to the home board:
-- ``my-homarr.com``
-- ``my-homarr.com/boards``
+
+- `my-homarr.com`
+- `my-homarr.com/boards`
 
 Your home board will have a special small badge at the top right in the list of boards:
 
 ![](./img/home-board-flag.png)
 
 ### For yourself
+
 To set the home board yourself, the easiest option is to set it directly in the list of boards:
 
 ![](./img/set-as-home-board-menu.png)
 
 Alternatively, you can also define it via your user profile:
+
 1. Click on your user profile at the top right
-2. Click on ``Your preferences``
-3. Change the home board in the ``home board`` dropdown and click on ``Save``.
+2. Click on `Your preferences`
+3. Change the home board in the `home board` dropdown and click on `Save`.
 
 ### For other users
 
-1. Navigate to the users: ``Management`` > ``Users`` > ``Manage``
+1. Navigate to the users: `Management` > `Users` > `Manage`
 2. Click on the username of the user that you want to adjust
-3. Select the desired home board via the dropdown and click on ``Save`` \
-![](./img/set-home-board-other-user.png)
+3. Select the desired home board via the dropdown and click on `Save` \
+   ![](./img/set-home-board-other-user.png)
 
 ### For user groups
 
-1. Navigate to the user groups: ``Management`` > ``Users`` > ``Groups`` > ``Manage``
-2. Go to tab ``Settings``
-3. Select the desired home board via the dropdown and click on ``Save`` \
-![](./img/set-home-board-user-group.png)
+1. Navigate to the user groups: `Management` > `Users` > `Groups` > `Manage`
+2. Go to tab `Settings`
+3. Select the desired home board via the dropdown and click on `Save` \
+   ![](./img/set-home-board-user-group.png)
 
 ### For whole server
 
 You can also set a global home board that will be used for all users that have not set a home board themselves.
 It will also be used for anonymous users.
 
-1. Navigate to the settings: ``Management`` > ``Settings`` > ``Boards``
-2. Select the desired home board via the dropdown and click on ``Save`` \
-![](./img/set-home-board-global.png)
+1. Navigate to the settings: `Management` > `Settings` > `Boards`
+2. Select the desired home board via the dropdown and click on `Save` \
+   ![](./img/set-home-board-global.png)
 
 :::note
 For the global home board you can only select boards that are public.
@@ -255,4 +304,4 @@ For the global home board you can only select boards that are public.
 ### Mobile home board
 
 Same as the home board, you can also set a mobile home board.
-It will be used for devices that are detected as mobile devices. (Using User-Agent header)
\ No newline at end of file
+It will be used for devices that are detected as mobile devices. (Using User-Agent header)
diff --git a/apps/docs/docs/widgets/anchor-note/index.mdx b/apps/docs/docs/widgets/anchor-note/index.mdx
index 453a5b51c..bfc520c6a 100644
--- a/apps/docs/docs/widgets/anchor-note/index.mdx
+++ b/apps/docs/docs/widgets/anchor-note/index.mdx
@@ -1,35 +1,37 @@
 ---
-title: 'Anchor Note'
-description: 'Display and edit a selected note from Anchor'
+title: "Anchor Note"
+description: "Display and edit a selected note from Anchor"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { anchorNoteWidget } from '.';
-import { anchorIntegration } from '@site/docs/integrations/anchor';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { anchorNoteWidget } from ".";
+import { anchorIntegration } from "@site/docs/integrations/anchor";
 
-<WidgetHeader
-  widget={anchorNoteWidget}
-  categories={['Notes']}
-/>
+<WidgetHeader widget={anchorNoteWidget} categories={["Notes"]} />
 
 The Anchor Note widget shows a selected note from your Anchor integration. If your note permissions allow it, you can also edit the note title and content directly in Homarr.
 
 ### Screenshots
 
-import anchorNoteWidgetScreenshot from './img/widget.png';
+import anchorNoteWidgetScreenshot from "./img/widget.png";
 
 <img src={anchorNoteWidgetScreenshot} alt="anchor-note-widget" width={256} height={256} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: anchorIntegration
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: anchorIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
@@ -37,6 +39,8 @@ import anchorNoteWidgetScreenshot from './img/widget.png';
 - Click **Save** to persist changes to Anchor.
 - Click **Cancel** to discard unsaved changes.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/app/index.mdx b/apps/docs/docs/widgets/app/index.mdx
index ec62d862e..4fdc3ff5f 100644
--- a/apps/docs/docs/widgets/app/index.mdx
+++ b/apps/docs/docs/widgets/app/index.mdx
@@ -1,37 +1,38 @@
 ---
-title: 'App'
-description: 'Embeds an app into the board.'
+title: "App"
+description: "Embeds an app into the board."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { appWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { appWidget } from ".";
 
-<WidgetHeader
-  widget={appWidget}
-  categories={['Links', 'Apps']}
-/>
+<WidgetHeader widget={appWidget} categories={["Links", "Apps"]} />
 
 The app widget allows you to add a link to an application or a website that you want to access quickly from your Homarr board.
 It also supports a status check to indicate whether Homarr can reach the application or website.
 
 ### Screenshots
 
-import githubApp from './img/github.png';
-import jellyseerrApp from './img/jellyseerr-description-tooltip.png';
-import piHoleApp from './img/pi-hole-ping-icon.png';
+import githubApp from "./img/github.png";
+import jellyseerrApp from "./img/jellyseerr-description-tooltip.png";
+import piHoleApp from "./img/pi-hole-ping-icon.png";
 
-<div className='flex gap-1'>
+<div className="flex gap-1">
   <img src={githubApp} alt="app github with-status-check" width={128 * 1.5} height={128 * 1.5} />
   <img src={piHoleApp} alt="app pi-hole with-status-check status-check-icon" width={128 * 1.5} height={128 * 1.5} />
   <img src={jellyseerrApp} alt="app jellyseerr with-description-tooltip" height={128 * 1.5} />
 </div>
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={appWidget.configuration} />
diff --git a/apps/docs/docs/widgets/archive-team-warrior/index.mdx b/apps/docs/docs/widgets/archive-team-warrior/index.mdx
new file mode 100644
index 000000000..5eceed2c2
--- /dev/null
+++ b/apps/docs/docs/widgets/archive-team-warrior/index.mdx
@@ -0,0 +1,38 @@
+---
+title: "ArchiveTeam Warrior"
+description: "Monitor ArchiveTeam Warrior status, projects, bandwidth, and active archival jobs."
+hide_title: true
+---
+
+import { archiveTeamWarriorIntegration } from "@site/docs/integrations/archiveteam-warrior";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+import { archiveTeamWarriorWidget } from ".";
+
+<WidgetHeader widget={archiveTeamWarriorWidget} categories={["Archiving", "Monitoring"]} />
+
+Use this widget to see what your ArchiveTeam Warrior is preserving without leaving Homarr. The compact view keeps the current project, runner state, job counts, bandwidth, and broadcast message visible. Advanced view adds the complete active-job list and exact update time.
+
+### Supported integration
+
+<WidgetIntegrations
+  items={[
+    {
+      integration: archiveTeamWarriorIntegration,
+      note: "Shows status and active archival work from one Warrior instance",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
+
+### Adding the widget
+
+<AddingWidget />
+
+### Configuration
+
+<WidgetConfig configuration={archiveTeamWarriorWidget.configuration} />
diff --git a/apps/docs/docs/widgets/archive-team-warrior/index.ts b/apps/docs/docs/widgets/archive-team-warrior/index.ts
new file mode 100644
index 000000000..5a66b9fbb
--- /dev/null
+++ b/apps/docs/docs/widgets/archive-team-warrior/index.ts
@@ -0,0 +1,19 @@
+import type { WidgetDefinition } from "@site/src/types";
+import { IconArchive } from "@tabler/icons-react";
+
+export const archiveTeamWarriorWidget: WidgetDefinition = {
+  icon: IconArchive,
+  name: "ArchiveTeam Warrior",
+  description: "Monitor ArchiveTeam Warrior status, projects, bandwidth, and active archival jobs.",
+  path: "../../widgets/archive-team-warrior",
+  configuration: {
+    items: [
+      {
+        name: "Show broadcast message",
+        description: "Show the message broadcast by the selected Warrior project when space allows.",
+        values: { type: "boolean" },
+        defaultValue: "yes",
+      },
+    ],
+  },
+};
diff --git a/apps/docs/docs/widgets/audio-stats/index.mdx b/apps/docs/docs/widgets/audio-stats/index.mdx
index 88fa87f79..f79a588c3 100644
--- a/apps/docs/docs/widgets/audio-stats/index.mdx
+++ b/apps/docs/docs/widgets/audio-stats/index.mdx
@@ -4,6 +4,8 @@ description: "Displays media and listening statistics from Navidrome or Audioboo
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -36,6 +38,8 @@ Only options relevant to your linked integration are shown in the configuration
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/bazarr/index.mdx b/apps/docs/docs/widgets/bazarr/index.mdx
index e262cfa75..5cd0c1532 100644
--- a/apps/docs/docs/widgets/bazarr/index.mdx
+++ b/apps/docs/docs/widgets/bazarr/index.mdx
@@ -1,26 +1,25 @@
 ---
-title: 'Bazarr'
-description: 'Displays missing subtitle counts and health indicators from your Bazarr instance.'
+title: "Bazarr"
+description: "Displays missing subtitle counts and health indicators from your Bazarr instance."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { bazarrWidget } from '.';
-import { bazarrIntegration } from '@site/docs/integrations/bazarr';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={bazarrWidget}
-  categories={['Subtitles', 'Media']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { bazarrWidget } from ".";
+import { bazarrIntegration } from "@site/docs/integrations/bazarr";
+
+<WidgetHeader widget={bazarrWidget} categories={["Subtitles", "Media"]} />
 
 This widget shows subtitle status from your Bazarr instance, including missing episode and movie subtitles, provider issues, and health warnings.
 
 ### Screenshots
 
-import widgetOverview from './img/widget-overview.png';
+import widgetOverview from "./img/widget-overview.png";
 
 <div className="flex flex-col gap-2">
   <img src={widgetOverview} alt="bazarr-widget-overview" width={128 * 4} />
@@ -28,14 +27,21 @@ import widgetOverview from './img/widget-overview.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: bazarrIntegration,
-  note: "Displays missing subtitle counts and health indicators"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: bazarrIntegration,
+      note: "Displays missing subtitle counts and health indicators",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={bazarrWidget.configuration} />
diff --git a/apps/docs/docs/widgets/beszel-alerts/index.mdx b/apps/docs/docs/widgets/beszel-alerts/index.mdx
index 3a4899d17..d1abe2d2e 100644
--- a/apps/docs/docs/widgets/beszel-alerts/index.mdx
+++ b/apps/docs/docs/widgets/beszel-alerts/index.mdx
@@ -1,22 +1,21 @@
 ---
-title: 'Beszel Alerts'
-description: 'View Beszel alert configurations and history with triggered/ok status indicators.'
+title: "Beszel Alerts"
+description: "View Beszel alert configurations and history with triggered/ok status indicators."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { beszelAlertsWidget } from '.';
-import { beszelIntegration } from '@site/docs/integrations/beszel';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-import beszelAlerts from './img/beszel-alerts.png';
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { beszelAlertsWidget } from ".";
+import { beszelIntegration } from "@site/docs/integrations/beszel";
 
-<WidgetHeader
-  widget={beszelAlertsWidget}
-  categories={['System Monitoring', 'Alerts']}
-/>
+import beszelAlerts from "./img/beszel-alerts.png";
+
+<WidgetHeader widget={beszelAlertsWidget} categories={["System Monitoring", "Alerts"]} />
 
 This widget displays your Beszel alert configurations separated by status (triggered and ok). It also shows alert history with timestamps. Alerts are updated in real time via WebSocket subscriptions.
 
@@ -26,14 +25,21 @@ This widget displays your Beszel alert configurations separated by status (trigg
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: beszelIntegration,
-  note: "Displays alert configurations and trigger history"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: beszelIntegration,
+      note: "Displays alert configurations and trigger history",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={beszelAlertsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/beszel-system-grid/index.mdx b/apps/docs/docs/widgets/beszel-system-grid/index.mdx
index e3b17623b..fd4232524 100644
--- a/apps/docs/docs/widgets/beszel-system-grid/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-grid/index.mdx
@@ -1,22 +1,21 @@
 ---
-title: 'Beszel Systems (Grid)'
-description: 'Card grid view of all Beszel-monitored systems with real-time metrics.'
+title: "Beszel Systems (Grid)"
+description: "Card grid view of all Beszel-monitored systems with real-time metrics."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { beszelSystemGridWidget } from '.';
-import { beszelIntegration } from '@site/docs/integrations/beszel';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-import beszelSystemGrid from './img/beszel-system-grid.png';
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { beszelSystemGridWidget } from ".";
+import { beszelIntegration } from "@site/docs/integrations/beszel";
 
-<WidgetHeader
-  widget={beszelSystemGridWidget}
-  categories={['System Monitoring']}
-/>
+import beszelSystemGrid from "./img/beszel-system-grid.png";
+
+<WidgetHeader widget={beszelSystemGridWidget} categories={["System Monitoring"]} />
 
 This widget displays all your Beszel-monitored systems as a responsive card grid. Each card shows real-time metrics like CPU, memory, disk, network, temperature, and more. Cards adapt their layout based on available space. If Beszel reports multiple filesystems, the disk bar exposes a hover breakdown for the root disk and each extra mount.
 
@@ -28,14 +27,21 @@ Select a system card to open the complete statistics view, including system, fil
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: beszelIntegration,
-  note: "Displays all monitored systems as a card grid"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: beszelIntegration,
+      note: "Displays all monitored systems as a card grid",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={beszelSystemGridWidget.configuration} />
diff --git a/apps/docs/docs/widgets/beszel-system-stats/index.mdx b/apps/docs/docs/widgets/beszel-system-stats/index.mdx
index e29d083ba..4bc00990e 100644
--- a/apps/docs/docs/widgets/beszel-system-stats/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-stats/index.mdx
@@ -4,6 +4,8 @@ description: "Time-series charts for CPU, memory, disk, network, and Docker cont
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -32,6 +34,8 @@ This widget displays time-series charts for a selected Beszel system, including
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/beszel-system-table/index.mdx b/apps/docs/docs/widgets/beszel-system-table/index.mdx
index df68fcc1b..781a6abad 100644
--- a/apps/docs/docs/widgets/beszel-system-table/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-table/index.mdx
@@ -1,21 +1,19 @@
 ---
-title: 'Beszel Systems (Table)'
-description: 'Table view of all Beszel-monitored systems with sortable columns and status indicators.'
+title: "Beszel Systems (Table)"
+description: "Table view of all Beszel-monitored systems with sortable columns and status indicators."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { beszelSystemTableWidget } from '.';
-import { beszelIntegration } from '@site/docs/integrations/beszel';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { beszelSystemTableWidget } from ".";
+import { beszelIntegration } from "@site/docs/integrations/beszel";
 
-<WidgetHeader
-  widget={beszelSystemTableWidget}
-  categories={['System Monitoring']}
-/>
+<WidgetHeader widget={beszelSystemTableWidget} categories={["System Monitoring"]} />
 
 This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. Columns can be toggled on or off, and the table supports sorting by any column. When Beszel reports extra filesystems, the disk column adds a hover breakdown for each mount alongside the root disk.
 
@@ -23,14 +21,21 @@ Select a system row to open the complete statistics view, including system, file
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: beszelIntegration,
-  note: "Displays all monitored systems in a sortable table"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: beszelIntegration,
+      note: "Displays all monitored systems in a sortable table",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={beszelSystemTableWidget.configuration} />
diff --git a/apps/docs/docs/widgets/bookmarks/index.mdx b/apps/docs/docs/widgets/bookmarks/index.mdx
index c3104ad5b..5ef772034 100644
--- a/apps/docs/docs/widgets/bookmarks/index.mdx
+++ b/apps/docs/docs/widgets/bookmarks/index.mdx
@@ -1,29 +1,27 @@
 ---
-title: 'Bookmarks'
-description: 'Displays multiple app links'
+title: "Bookmarks"
+description: "Displays multiple app links"
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { bookmarksWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { bookmarksWidget } from ".";
 
-<WidgetHeader
-  widget={bookmarksWidget}
-  categories={['Links', 'Apps']}
-/>
+<WidgetHeader widget={bookmarksWidget} categories={["Links", "Apps"]} />
 
 The bookmarks widget allows you to display multiple app links in a single widget.
 You can add links to your favorite applications, websites, or any other resources you want quick access to.
 
 ### Screenshots
 
-import gridIconsOnly from './img/grid-icons-only.png';
-import gridWithTitle from './img/grid-with-title.png';
-import verticalListAll from './img/vertical-list-all.png';
-import vericalListSimple from './img/vertical-list-simple.png';
+import gridIconsOnly from "./img/grid-icons-only.png";
+import gridWithTitle from "./img/grid-with-title.png";
+import verticalListAll from "./img/vertical-list-all.png";
+import vericalListSimple from "./img/vertical-list-simple.png";
 
 <div className='flex gap-1'>
     <div className='flex flex-col gap-1'>
@@ -33,12 +31,15 @@ import vericalListSimple from './img/vertical-list-simple.png';
 
     <img src={gridWithTitle} alt="bookmarks grid with-title" width={256 + 4} height={256 + 4} />
     <img src={verticalListAll} alt="bookmarks vertical-list all-elements" width={128} height={256 + 4} />
+
 </div>
 
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={bookmarksWidget.configuration} />
diff --git a/apps/docs/docs/widgets/calendar/index.mdx b/apps/docs/docs/widgets/calendar/index.mdx
index 5db4e9b30..3e1e3f180 100644
--- a/apps/docs/docs/widgets/calendar/index.mdx
+++ b/apps/docs/docs/widgets/calendar/index.mdx
@@ -1,65 +1,73 @@
 ---
-title: 'Calendar'
-description: 'Display events from your integrations in a calendar view within a certain relative time period'
+title: "Calendar"
+description: "Display events from your integrations in a calendar view within a certain relative time period"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { calendarWidget } from '.';
-import { lidarrIntegration } from '@site/docs/integrations/lidarr';
-import { nextcloudIntegration } from '@site/docs/integrations/nextcloud';
-import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
-import { radarrIntegration } from '@site/docs/integrations/radarr';
-import { readarrIntegration } from '@site/docs/integrations/readarr';
-import { sonarrIntegration } from '@site/docs/integrations/sonarr';
-import { icalIntegration } from '@site/docs/integrations/ical';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { calendarWidget } from ".";
+import { lidarrIntegration } from "@site/docs/integrations/lidarr";
+import { nextcloudIntegration } from "@site/docs/integrations/nextcloud";
+import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant";
+import { radarrIntegration } from "@site/docs/integrations/radarr";
+import { readarrIntegration } from "@site/docs/integrations/readarr";
+import { sonarrIntegration } from "@site/docs/integrations/sonarr";
+import { icalIntegration } from "@site/docs/integrations/ical";
 
-
-<WidgetHeader
-  widget={calendarWidget}
-  categories={['Media manager', "Servarr"]}
-/>
+<WidgetHeader widget={calendarWidget} categories={["Media manager", "Servarr"]} />
 
 The calendar widget shows a month view of events from different integrations.
 It allows you to view calendar events or upcoming releases from your media managers.
 
 ### Screenshots
 
-import popover from './img/popover.png';
-import withIntegrations from './img/with-integrations.png';
-import withoutIntegrations from './img/without-integrations.png';
+import popover from "./img/popover.png";
+import withIntegrations from "./img/with-integrations.png";
+import withoutIntegrations from "./img/without-integrations.png";
 
-<div className='flex gap-1'>
-    <img src={withIntegrations} alt="calendar with-integrations big-size" width={256 + 4} height={256 + 4} />
-    <div className='flex flex-col gap-1'>
-        <img src={popover} alt="calendar popover-details the-mandalorian" width={128 * 3} height={128} />
-        <img src={withoutIntegrations} alt="calendar without-integrations small-size" width={256} height={128} />
-    </div>
+<div className="flex gap-1">
+  <img src={withIntegrations} alt="calendar with-integrations big-size" width={256 + 4} height={256 + 4} />
+  <div className="flex flex-col gap-1">
+    <img src={popover} alt="calendar popover-details the-mandalorian" width={128 * 3} height={128} />
+    <img src={withoutIntegrations} alt="calendar without-integrations small-size" width={256} height={128} />
+  </div>
 </div>
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: nextcloudIntegration,
-}, {
-  integration: lidarrIntegration,
-}, {
-  integration: radarrIntegration,
-}, {
-  integration: readarrIntegration,
-}, {
-  integration: sonarrIntegration,
-}, {
-  integration: icalIntegration
-}, {
-  integration: homeAssistantIntegration
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: nextcloudIntegration,
+    },
+    {
+      integration: lidarrIntegration,
+    },
+    {
+      integration: radarrIntegration,
+    },
+    {
+      integration: readarrIntegration,
+    },
+    {
+      integration: sonarrIntegration,
+    },
+    {
+      integration: icalIntegration,
+    },
+    {
+      integration: homeAssistantIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
@@ -67,9 +75,12 @@ import withoutIntegrations from './img/without-integrations.png';
 - Click on a marked date to pin the popover open (it will stay visible even after moving the mouse away).
 - Click the date again or click outside to close the pinned popover.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={calendarWidget.configuration} />
diff --git a/apps/docs/docs/widgets/clock/index.mdx b/apps/docs/docs/widgets/clock/index.mdx
index efdab31d4..157e79d0b 100644
--- a/apps/docs/docs/widgets/clock/index.mdx
+++ b/apps/docs/docs/widgets/clock/index.mdx
@@ -1,38 +1,38 @@
 ---
-title: 'Date and time'
-description: 'Displays the current date and time.'
+title: "Date and time"
+description: "Displays the current date and time."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { clockWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { clockWidget } from ".";
 
-<WidgetHeader
-  widget={clockWidget}
-  categories={['Time']}
-/>
+<WidgetHeader widget={clockWidget} categories={["Time"]} />
 
 The clock widget displays the current date and time in a customizable format.
 
 ### Screenshots
 
-import localClock from './img/local.png';
-import londonClock from './img/london-with-seconds.png';
-import tokyoClock from './img/tokyo-12-hour.png';
+import localClock from "./img/local.png";
+import londonClock from "./img/london-with-seconds.png";
+import tokyoClock from "./img/tokyo-12-hour.png";
 
-<div className='flex gap-1'>
-    <img src={localClock} alt="clock format-24-hours timezone-local" width={128} height={128} />
-    <img src={londonClock} alt="clock format-24-hours with-seconds timezone-london" width={256} height={128} />
-    <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
+<div className="flex gap-1">
+  <img src={localClock} alt="clock format-24-hours timezone-local" width={128} height={128} />
+  <img src={londonClock} alt="clock format-24-hours with-seconds timezone-london" width={256} height={128} />
+  <img src={tokyoClock} alt="clock format-12-hours timezone-tokyo" width={256} height={128} />
 </div>
 
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={clockWidget.configuration} />
diff --git a/apps/docs/docs/widgets/coolify/index.mdx b/apps/docs/docs/widgets/coolify/index.mdx
index 23eb6ba03..ff26c0a8d 100644
--- a/apps/docs/docs/widgets/coolify/index.mdx
+++ b/apps/docs/docs/widgets/coolify/index.mdx
@@ -1,28 +1,33 @@
 ---
-title: 'Coolify'
-description: 'Overview of your Coolify instance with servers, applications, and services.'
+title: "Coolify"
+description: "Overview of your Coolify instance with servers, applications, and services."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { coolifyWidget } from '.';
-import { coolifyIntegration } from '@site/docs/integrations/coolify';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={coolifyWidget}
-  categories={['System monitoring', 'Deployment']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { coolifyWidget } from ".";
+import { coolifyIntegration } from "@site/docs/integrations/coolify";
+
+<WidgetHeader widget={coolifyWidget} categories={["System monitoring", "Deployment"]} />
 
 The Coolify widget displays a compact overview of your Coolify instance. It can show servers, applications, and services with status indicators, project and environment context, direct links to Coolify, and the installed Coolify version.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: coolifyIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: coolifyIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
@@ -34,11 +39,11 @@ The Coolify widget displays a compact overview of your Coolify instance. It can
 
 ### Sections
 
-| Section | Description |
-|---|---|
-| **Servers** | Lists Coolify servers, reachability status, and application/service counts per server. |
+| Section          | Description                                                                                                                        |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| **Servers**      | Lists Coolify servers, reachability status, and application/service counts per server.                                             |
 | **Applications** | Lists applications with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links. |
-| **Services** | Lists services with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links. |
+| **Services**     | Lists services with runtime status, project and environment context, public URL links, Coolify dashboard links, and log links.     |
 
 ### Notes
 
diff --git a/apps/docs/docs/widgets/custom-api/index.mdx b/apps/docs/docs/widgets/custom-api/index.mdx
index 78d0bcbba..94eb62116 100644
--- a/apps/docs/docs/widgets/custom-api/index.mdx
+++ b/apps/docs/docs/widgets/custom-api/index.mdx
@@ -1,18 +1,16 @@
 ---
-title: 'Custom API'
-description: 'Displays data from a custom API endpoint using configurable display types and optional JSX templates.'
+title: "Custom API"
+description: "Displays data from a custom API endpoint using configurable display types and optional JSX templates."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { customApiWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { customApiWidget } from ".";
 
-<WidgetHeader
-  widget={customApiWidget}
-  categories={['Custom', 'API']}
-/>
+<WidgetHeader widget={customApiWidget} categories={["Custom", "API"]} />
 
 This widget fetches data from a custom API endpoint defined in [Custom Widgets management](/docs/management/custom-widgets) and renders it using configurable display types.
 
@@ -20,6 +18,8 @@ Custom API widgets are created and configured through the admin management page.
 
 See the [Custom Widgets documentation](/docs/management/custom-widgets) for full details on creating and configuring custom widgets.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/dns-hole-controls/index.mdx b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
index cea517545..e6fd43e15 100644
--- a/apps/docs/docs/widgets/dns-hole-controls/index.mdx
+++ b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
@@ -1,57 +1,64 @@
 ---
-title: 'DNS Hole Controls'
+title: "DNS Hole Controls"
 description: "Control PiHole or AdGuard from your dashboard."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { dnsHoleControlsWidget } from '.';
-import { adguardHomeIntegration } from '@site/docs/integrations/adguard-home';
-import { piHoleIntegration } from '@site/docs/integrations/pi-hole';
-import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { dnsHoleControlsWidget } from ".";
+import { adguardHomeIntegration } from "@site/docs/integrations/adguard-home";
+import { piHoleIntegration } from "@site/docs/integrations/pi-hole";
+import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns";
 
+<WidgetHeader widget={dnsHoleControlsWidget} categories={["DNS Hole"]} />
 
-<WidgetHeader
-  widget={dnsHoleControlsWidget}
-  categories={['DNS Hole']}
-/>
-
-This widget allows you to enable or disable your DNS Hole.
+This widget lets permitted users enable, disable, or temporarily pause one or more DNS services. It shares the summary query and cache with DNS Hole Summary. Advanced view exposes every selected source, while compact layouts reduce controls according to both widget width and height.
 
 ### Screenshots
 
-import bigSize from './img/big.png';
-import smallSize from './img/small.png';
-
+import bigSize from "./img/big.png";
+import smallSize from "./img/small.png";
 
 <img src={bigSize} alt="dns-hole-controls big-size with-toggle-all-buttons" width={256} height={128} />
 <img src={smallSize} alt="dns-hole-controls small-size no-toggle-all-buttons" width={128} height={128} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: adguardHomeIntegration,
-}, {
-  integration: piHoleIntegration,
-}, {
-  integration: technitiumDnsIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: adguardHomeIntegration,
+    },
+    {
+      integration: piHoleIntegration,
+    },
+    {
+      integration: technitiumDnsIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
-- Enable / Disable one dns-hole by clicking on the badge.
-- Disable one dns-hole in x seconds by clicking on the clock icon.
-- Do all of the above for all dns-holes by using the top button row.
+- Enable or disable one DNS service by clicking its status badge.
+- Temporarily disable one service with the clock action.
+- Apply an action to all available services from the top action row. Homarr keeps successful results visible and reports how many sources failed.
+- Interaction controls only appear when the current user has permission for that integration.
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={dnsHoleControlsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/dns-hole-summary/index.mdx b/apps/docs/docs/widgets/dns-hole-summary/index.mdx
index 1dcb123da..f4d7ca418 100644
--- a/apps/docs/docs/widgets/dns-hole-summary/index.mdx
+++ b/apps/docs/docs/widgets/dns-hole-summary/index.mdx
@@ -1,38 +1,36 @@
 ---
-title: 'DNS Hole Summary'
+title: "DNS Hole Summary"
 description: "Displays the summary of your DNS Hole."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { dnsHoleSummaryWidget } from '.';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { dnsHoleSummaryWidget } from ".";
 
+<WidgetHeader widget={dnsHoleSummaryWidget} categories={["DNS Hole"]} />
 
-<WidgetHeader
-  widget={dnsHoleSummaryWidget}
-  categories={['DNS Hole']}
-/>
-
-This widget allows you to display statistics about your DNS Hole like total queries, blocked queries, and more.
+This widget combines statistics from every selected DNS service, including total queries, blocked queries, and blocklist size. Its data is cached under the same DNS query family as DNS Hole Controls, so placing both widgets on a board does not create a second integration request. Advanced view keeps the aggregate metrics visible and adds a named status chip for each source.
 
 ### Screenshots
 
-import gridLayout from './img/grid.png';
-import verticalLayout from './img/vertical.png';
-import horizontalLayout from './img/horizontal.png';
-import { adguardHomeIntegration } from '@site/docs/integrations/adguard-home';
-import { piHoleIntegration } from '@site/docs/integrations/pi-hole';
-import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns';
+import gridLayout from "./img/grid.png";
+import verticalLayout from "./img/vertical.png";
+import horizontalLayout from "./img/horizontal.png";
+import { adguardHomeIntegration } from "@site/docs/integrations/adguard-home";
+import { piHoleIntegration } from "@site/docs/integrations/pi-hole";
+import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns";
 
-<div className='flex gap-2'>
+<div className="flex gap-2">
   <img src={gridLayout} alt="grid-layout pi-hole-colors" width={256 + 8} height={256 + 8} />
-  <div className='flex flex-col gap-2'>
+  <div className="flex flex-col gap-2">
     <img src={verticalLayout} alt="vertical-layout no-colors" width={128} height={128} />
     <img src={horizontalLayout} alt="horizontal-layout pi-hole-colors" width={128 * 3} height={128} />
   </div>
@@ -40,17 +38,26 @@ import { technitiumDnsIntegration } from '@site/docs/integrations/technitium-dns
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: adguardHomeIntegration,
-}, {
-  integration: piHoleIntegration,
-}, {
-  integration: technitiumDnsIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: adguardHomeIntegration,
+    },
+    {
+      integration: piHoleIntegration,
+    },
+    {
+      integration: technitiumDnsIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={dnsHoleSummaryWidget.configuration} />
diff --git a/apps/docs/docs/widgets/docker-containers/index.mdx b/apps/docs/docs/widgets/docker-containers/index.mdx
index fe509f86a..bbd2e104f 100644
--- a/apps/docs/docs/widgets/docker-containers/index.mdx
+++ b/apps/docs/docs/widgets/docker-containers/index.mdx
@@ -1,24 +1,22 @@
 ---
-title: 'Docker stats'
-description: 'Stats of your containers'
+title: "Docker stats"
+description: "Stats of your containers"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { dockerContainersWidget } from '.';
-import { dockerIntegration } from '@site/docs/integrations/docker';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { dockerContainersWidget } from ".";
+import { dockerIntegration } from "@site/docs/integrations/docker";
 
-
-<WidgetHeader
-  widget={dockerContainersWidget}
-  categories={['Containers']}
-/>
+<WidgetHeader widget={dockerContainersWidget} categories={["Containers"]} />
 
 This widget displays the resource usage of your Docker containers and allows you to manage them.
 
@@ -28,24 +26,31 @@ This widget can only be used with administrator privileges.
 
 ### Screenshots
 
-import dockerTable from './img/table.png';
+import dockerTable from "./img/table.png";
 
 <img src={dockerTable} alt="docker-stats table docker-containers" width={128 * 3} height={128 * 2} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: dockerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: dockerIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 Each container row has an action menu (accessible via the three-dot icon) with the following options:
+
 - **View logs** - opens a dedicated terminal page streaming the container's logs
 - **Start** / **Stop** / **Restart** - manage the container's state
 - **Remove** - remove the container
 - **Add to Homarr** - create a bookmark app from the container
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/downloads/index.mdx b/apps/docs/docs/widgets/downloads/index.mdx
index 000fd066b..1db269895 100644
--- a/apps/docs/docs/widgets/downloads/index.mdx
+++ b/apps/docs/docs/widgets/downloads/index.mdx
@@ -1,43 +1,41 @@
 ---
-title: 'Download Client'
-description: 'Allows you to view and manage your Downloads from both Torrent and Usenet clients.'
+title: "Download Client"
+description: "Allows you to view and manage your Downloads from both Torrent and Usenet clients."
 hide_title: true
 ---
 
-import { aria2Integration } from '@site/docs/integrations/aria2';
-import { delugeIntegration } from '@site/docs/integrations/deluge';
-import { nzbgetIntegration } from '@site/docs/integrations/nzbget';
-import { qBittorentIntegration } from '@site/docs/integrations/q-bittorent';
-import { sabnzbdIntegration } from '@site/docs/integrations/sabnzbd';
-import { transmissionIntegration } from '@site/docs/integrations/transmission';
-import { slskdIntegration } from '@site/docs/integrations/slskd';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { downloadsWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { aria2Integration } from "@site/docs/integrations/aria2";
+import { delugeIntegration } from "@site/docs/integrations/deluge";
+import { nzbgetIntegration } from "@site/docs/integrations/nzbget";
+import { qBittorentIntegration } from "@site/docs/integrations/q-bittorent";
+import { sabnzbdIntegration } from "@site/docs/integrations/sabnzbd";
+import { transmissionIntegration } from "@site/docs/integrations/transmission";
+import { slskdIntegration } from "@site/docs/integrations/slskd";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { downloadsWidget } from ".";
 
-<WidgetHeader
-  widget={downloadsWidget}
-  categories={['Torrent client', 'Usenet client', 'Downloads']}
-/>
+<WidgetHeader widget={downloadsWidget} categories={["Torrent client", "Usenet client", "Downloads"]} />
 
 This widget displays a list of torrents or usenet-articles that are currently being downloaded, along with their progress and other relevant information. It supports 7 download client integrations and provides a rich, responsive table interface.
 
 ### Screenshots
 
-import downloadsCard from './img/screenshot.png';
-import contextMenuImg from './img/context-menu.png';
+import downloadsCard from "./img/screenshot.png";
+import contextMenuImg from "./img/context-menu.png";
 
 <div>
-    <img src={downloadsCard} alt="Downloads widget showing torrent and usenet items" width={128 * 4} />
+  <img src={downloadsCard} alt="Downloads widget showing torrent and usenet items" width={128 * 4} />
 </div>
 
 #### Right-click context menu
 
 <div>
-    <img src={contextMenuImg} alt="Downloads widget context menu with pause, delete, and copy actions" width={128 * 4} />
+  <img src={contextMenuImg} alt="Downloads widget context menu with pause, delete, and copy actions" width={128 * 4} />
 </div>
 
 ### Features
@@ -56,28 +54,38 @@ import contextMenuImg from './img/context-menu.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: sabnzbdIntegration,
-  note: "Usenet client"
-}, {
-  integration: nzbgetIntegration,
-  note: "Usenet client"
-}, {
-  integration: delugeIntegration,
-  note: "Torrent client"
-}, {
-  integration: transmissionIntegration,
-  note: "Torrent client"
-}, {
-  integration: qBittorentIntegration,
-  note: "Torrent client"
-}, {
-  integration: aria2Integration,
-  note: "Multi-protocol download client"
-}, {
-  integration: slskdIntegration,
-  note: "Soulseek client (read-only)"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: sabnzbdIntegration,
+      note: "Usenet client",
+    },
+    {
+      integration: nzbgetIntegration,
+      note: "Usenet client",
+    },
+    {
+      integration: delugeIntegration,
+      note: "Torrent client",
+    },
+    {
+      integration: transmissionIntegration,
+      note: "Torrent client",
+    },
+    {
+      integration: qBittorentIntegration,
+      note: "Torrent client",
+    },
+    {
+      integration: aria2Integration,
+      note: "Multi-protocol download client",
+    },
+    {
+      integration: slskdIntegration,
+      note: "Soulseek client (read-only)",
+    },
+  ]}
+/>
 
 ### Interactions
 
@@ -89,9 +97,12 @@ import contextMenuImg from './img/context-menu.png';
 - **Filter** by integration or status using the filter button in the footer
 - **Sort** by clicking column headers (with persistent sort direction)
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={downloadsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/firewall/index.mdx b/apps/docs/docs/widgets/firewall/index.mdx
index 95aaa56d6..aec2d89d9 100644
--- a/apps/docs/docs/widgets/firewall/index.mdx
+++ b/apps/docs/docs/widgets/firewall/index.mdx
@@ -1,22 +1,20 @@
 ---
-title: 'Firewall Monitoring'
-description: 'Displays a summary of firewalls.'
+title: "Firewall Monitoring"
+description: "Displays a summary of firewalls."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { firewallWidget } from '.';
-import { opnsenseIntegration } from '../../integrations/opnsense';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { firewallWidget } from ".";
+import { opnsenseIntegration } from "../../integrations/opnsense";
 
-<WidgetHeader
-  widget={firewallWidget}
-  categories={['Firewall']}
-/>
+<WidgetHeader widget={firewallWidget} categories={["Firewall"]} />
 
 ### Screenshots
 
@@ -24,9 +22,15 @@ import { opnsenseIntegration } from '../../integrations/opnsense';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: opnsenseIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: opnsenseIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/health-monitoring/index.mdx b/apps/docs/docs/widgets/health-monitoring/index.mdx
index 603207451..bc50cf2c7 100644
--- a/apps/docs/docs/widgets/health-monitoring/index.mdx
+++ b/apps/docs/docs/widgets/health-monitoring/index.mdx
@@ -4,6 +4,8 @@ description: "Displays information showing the health and status of your system(
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -62,6 +64,8 @@ import { synologyIntegration } from "@site/docs/integrations/synology";
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/iframe/index.mdx b/apps/docs/docs/widgets/iframe/index.mdx
index 5be26f3b2..7d983342a 100644
--- a/apps/docs/docs/widgets/iframe/index.mdx
+++ b/apps/docs/docs/widgets/iframe/index.mdx
@@ -1,19 +1,17 @@
 ---
-title: 'iFrame'
-description: 'Embed any content from the internet. Some websites may restrict access.'
+title: "iFrame"
+description: "Embed any content from the internet. Some websites may restrict access."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { iframeWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { iframeWidget } from ".";
 
-<WidgetHeader
-  widget={iframeWidget}
-  categories={['Embed']}
-/>
+<WidgetHeader widget={iframeWidget} categories={["Embed"]} />
 
 If your application is not supported natively by Homarr, you can integrate it using the iframe widget.
 It uses the [iframe element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe),
@@ -22,14 +20,16 @@ This means, no traffic is routed through Homarr (and the URL must be reachable f
 
 ### Screenshots
 
-import wikipediaHomepage from './img/wikipedia.png';
-import youtubeStream from './img/nasa-iss-stream.png';
+import wikipediaHomepage from "./img/wikipedia.png";
+import youtubeStream from "./img/nasa-iss-stream.png";
 
 <div>
   <img src={wikipediaHomepage} alt="iframe wikipedia-homepage" width={128 * 3} />
   <img src={youtubeStream} alt="iframe youtube-iss-stream" width={128 * 3} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
@@ -50,12 +50,14 @@ the appropriate headers (such as `X-Frame-Options` or `Content-Security-Policy`)
 For example, to allow your site to be embedded in iframes from specific domains:
 
 **Apache (.htaccess or httpd.conf):**
+
 ```apache
 Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
 Header set X-Frame-Options "ALLOW-FROM https://trusted-domain.com"
 ```
 
 **Nginx:**
+
 ```nginx
 add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
 add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
@@ -67,6 +69,7 @@ add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
 - **Any YouTube video or stream:** https://www.youtube.com/embed/dQw4w9WgXcQ?si=MWUbbG66UNTla_Ni
 
 ### Configuration
+
 <WidgetConfig configuration={iframeWidget.configuration} />
 
 ### Transparent iframes
@@ -75,15 +78,16 @@ To create a transparent iframe like below you can use the following html code an
 
 ```html
 <html style="color-scheme: dark;">
-<body style="background: none; display: flex; justify-content: center; align-items: center;">
+  <body style="background: none; display: flex; justify-content: center; align-items: center;">
     <img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/homarr.svg" width="90" height="90" />
-</body>
+  </body>
 </html>
 ```
 
 ![transparent iframe](./img/transparent-iframe.png)
 
 ### Third party content
+
 :::warning
 
 The content below is an overview of third party projects. All support requests/problems must be redirected to the appropriate repository.
@@ -92,11 +96,12 @@ We cannot guarantee the functionality nor security of these tools.
 :::
 
 ### homarr-iframes from Diogo Valentim
+
 The project [homarr-iframes](https://github.com/diogovalentte/homarr-iframes) has iframes designed to be used with Homarr, these iframes offer a minimalist view of other systems:
 
 - [Vikunja](https://github.com/go-vikunja/vikunja): overview of your tasks with links to them.
 - [Linkwarden](https://github.com/linkwarden/linkwarden): overview of your bookmarks with links to them.
-- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (*only in Brazil*).
+- [Cinemark Brazil](https://www.cinemark.com.br): overview of the movies in Cinemark theaters in your city (_only in Brazil_).
 
 ![Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard](./img/homarr-iframes-example.webp "Image of the Vikunja (left), Linkwarden (middle), and Cinemark Brazil (right) iframes on a Homarr dashboard")
 
diff --git a/apps/docs/docs/widgets/immich-album-carousel/index.mdx b/apps/docs/docs/widgets/immich-album-carousel/index.mdx
index 703bd5a57..2975d53fe 100644
--- a/apps/docs/docs/widgets/immich-album-carousel/index.mdx
+++ b/apps/docs/docs/widgets/immich-album-carousel/index.mdx
@@ -1,39 +1,42 @@
 ---
-title: 'Immich Album Carousel'
-description: 'Shows a slideshow of pictures from an Immich album or your full library'
+title: "Immich Album Carousel"
+description: "Shows a slideshow of pictures from an Immich album or your full library"
 hide_title: true
 ---
 
-import { immichIntegration } from '../../integrations/immich';import {
-  AddingWidget
-} from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { immichAlbumCarouselWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { immichIntegration } from "../../integrations/immich";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { immichAlbumCarouselWidget } from ".";
 
-<WidgetHeader
-  widget={immichAlbumCarouselWidget}
-  categories={['Photos Service']}
-/>
+<WidgetHeader widget={immichAlbumCarouselWidget} categories={["Photos Service"]} />
 
 ### Screenshots
 
-import screen from './img/screen.png';
+import screen from "./img/screen.png";
 
 <img src={screen} height={256} alt="immich album size-big" />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: immichIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: immichIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
-
 ### Configuration
+
 <WidgetConfig configuration={immichAlbumCarouselWidget.configuration} />
diff --git a/apps/docs/docs/widgets/immich-server-stats/index.mdx b/apps/docs/docs/widgets/immich-server-stats/index.mdx
index 73d278a91..64f4d8d02 100644
--- a/apps/docs/docs/widgets/immich-server-stats/index.mdx
+++ b/apps/docs/docs/widgets/immich-server-stats/index.mdx
@@ -1,40 +1,42 @@
 ---
-title: 'Immich Server Stats'
-description: 'Information about your Immich instance'
+title: "Immich Server Stats"
+description: "Information about your Immich instance"
 hide_title: true
 ---
 
-import { immichIntegration } from '../../integrations/immich';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { immichServerStatsWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { immichIntegration } from "../../integrations/immich";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { immichServerStatsWidget } from ".";
 
-<WidgetHeader
-  widget={immichServerStatsWidget}
-  categories={['Photos server']}
-/>
+<WidgetHeader widget={immichServerStatsWidget} categories={["Photos server"]} />
 
 ### Screenshots
 
-import screen from './img/screen.png';
-
+import screen from "./img/screen.png";
 
 <img src={screen} height={256} alt="immich server stats size-big" />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: immichIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: immichIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
-
 ### Configuration
-<WidgetConfig configuration={immichServerStatsWidget.configuration} />
 
+<WidgetConfig configuration={immichServerStatsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/indexer-manager/index.mdx b/apps/docs/docs/widgets/indexer-manager/index.mdx
index fad8c341b..3b81c0023 100644
--- a/apps/docs/docs/widgets/indexer-manager/index.mdx
+++ b/apps/docs/docs/widgets/indexer-manager/index.mdx
@@ -1,47 +1,50 @@
 ---
-title: 'Indexer manager status'
-description: 'View the status of your indexers.'
+title: "Indexer manager status"
+description: "View the status of your indexers."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { indexerManagerWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { indexerManagerWidget } from ".";
 
-<WidgetHeader
-  widget={indexerManagerWidget}
-  categories={['Indexer']}
-/>
+<WidgetHeader widget={indexerManagerWidget} categories={["Indexer"]} />
 
 ### Screenshots
 
-import bigItem from './img/big.png';
-import smallItem from './img/small.png';
-import { prowlarrIntegration } from '@site/docs/integrations/prowlarr';
+import bigItem from "./img/big.png";
+import smallItem from "./img/small.png";
+import { prowlarrIntegration } from "@site/docs/integrations/prowlarr";
 
-<div className='flex gap-1'>
+<div className="flex gap-1">
   <img src={bigItem} height={256} alt="indexer-manager size-big" />
   <img src={smallItem} height={128} alt="indexer-manager size-small" />
 </div>
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: prowlarrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: prowlarrIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 - Test all indexers by clicking on the test button.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
-
 ### Configuration
-<WidgetConfig configuration={indexerManagerWidget.configuration} />
 
+<WidgetConfig configuration={indexerManagerWidget.configuration} />
diff --git a/apps/docs/docs/widgets/media-missing/index.mdx b/apps/docs/docs/widgets/media-missing/index.mdx
index 648bd4190..643da6a3c 100644
--- a/apps/docs/docs/widgets/media-missing/index.mdx
+++ b/apps/docs/docs/widgets/media-missing/index.mdx
@@ -1,29 +1,28 @@
 ---
-title: 'Media Missing & Queue'
-description: 'Track missing media and active downloads from Radarr and Sonarr'
+title: "Media Missing & Queue"
+description: "Track missing media and active downloads from Radarr and Sonarr"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { mediaMissingWidget } from '.';
-import { radarrIntegration } from '@site/docs/integrations/radarr';
-import { sonarrIntegration } from '@site/docs/integrations/sonarr';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={mediaMissingWidget}
-  categories={['Media', 'Downloads']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { mediaMissingWidget } from ".";
+import { radarrIntegration } from "@site/docs/integrations/radarr";
+import { sonarrIntegration } from "@site/docs/integrations/sonarr";
+
+<WidgetHeader widget={mediaMissingWidget} categories={["Media", "Downloads"]} />
 
 Monitor which movies and episodes are missing from your library, and track what is currently being downloaded. The widget pulls data from Radarr and Sonarr and groups results by type in two tabs.
 
 ### Screenshots
 
-import widgetMissing from './img/missing.png';
-import widgetQueued from './img/queued.png';
-import widgetCompact from './img/compact.png';
+import widgetMissing from "./img/missing.png";
+import widgetQueued from "./img/queued.png";
+import widgetCompact from "./img/compact.png";
 
 <div className="flex gap-2 flex-wrap">
   <img src={widgetMissing} alt="media-missing widget showing missing movies and episodes in a grid" width={360} />
@@ -33,18 +32,23 @@ import widgetCompact from './img/compact.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: radarrIntegration,
-}, {
-  integration: sonarrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: radarrIntegration,
+    },
+    {
+      integration: sonarrIntegration,
+    },
+  ]}
+/>
 
 ### Tabs
 
-| Tab | Description |
-|---|---|
+| Tab         | Description                                                                                           |
+| ----------- | ----------------------------------------------------------------------------------------------------- |
 | **Missing** | Lists movies (Radarr) and episodes (Sonarr) that are monitored but not yet available in your library. |
-| **Queued** | Shows items currently being downloaded with a progress bar and estimated time remaining. |
+| **Queued**  | Shows items currently being downloaded with a progress bar and estimated time remaining.              |
 
 ### Sizing
 
@@ -56,6 +60,8 @@ The widget adapts to its container size, so it looks good at any grid size:
 
 Each item shows its poster art (with the artwork bleeding softly behind the card), a type badge, and — on the queue — an animated progress bar with the estimated time remaining.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/media-releases/index.mdx b/apps/docs/docs/widgets/media-releases/index.mdx
index fece199eb..7142ccfc5 100644
--- a/apps/docs/docs/widgets/media-releases/index.mdx
+++ b/apps/docs/docs/widgets/media-releases/index.mdx
@@ -1,30 +1,28 @@
 ---
-title: 'Media releases'
-description: 'Display newly added medias or upcoming releases from different integrations'
+title: "Media releases"
+description: "Display newly added medias or upcoming releases from different integrations"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { mediaReleasesWidget } from '.';
-import { embyIntegration } from '@site/docs/integrations/emby';
-import { jellyfinIntegration } from '@site/docs/integrations/jellyfin';
-import { plexIntegration } from '@site/docs/integrations/plex';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { mediaReleasesWidget } from ".";
+import { embyIntegration } from "@site/docs/integrations/emby";
+import { jellyfinIntegration } from "@site/docs/integrations/jellyfin";
+import { plexIntegration } from "@site/docs/integrations/plex";
 
-<WidgetHeader
-  widget={mediaReleasesWidget}
-  categories={['Releases', 'Media']}
-/>
+<WidgetHeader widget={mediaReleasesWidget} categories={["Releases", "Media"]} />
 
 Provides a list of newly added media or upcoming releases from your media server.
 
 ### Screenshots
 
-import backdrop from './img/backdrop.png';
-import poster from './img/poster.png';
+import backdrop from "./img/backdrop.png";
+import poster from "./img/poster.png";
 
 <div className="flex gap-1">
   <img src={backdrop} alt="media-releases layout-backdrop" width={256} />
@@ -33,17 +31,26 @@ import poster from './img/poster.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: embyIntegration,
-}, {
-  integration: jellyfinIntegration,
-}, {
-  integration: plexIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: embyIntegration,
+    },
+    {
+      integration: jellyfinIntegration,
+    },
+    {
+      integration: plexIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={mediaReleasesWidget.configuration} />
diff --git a/apps/docs/docs/widgets/media-request-list/index.mdx b/apps/docs/docs/widgets/media-request-list/index.mdx
index 1c491a051..68f3a27ab 100644
--- a/apps/docs/docs/widgets/media-request-list/index.mdx
+++ b/apps/docs/docs/widgets/media-request-list/index.mdx
@@ -4,6 +4,8 @@ description: "See a list of all media requests from your integration"
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -45,6 +47,8 @@ import mediaRequestList from "./img/list.png";
 - Approve / decline a request by clicking on the thumbs up or down icon.
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/media-request-stats/index.mdx b/apps/docs/docs/widgets/media-request-stats/index.mdx
index a7b40f624..b381f177b 100644
--- a/apps/docs/docs/widgets/media-request-stats/index.mdx
+++ b/apps/docs/docs/widgets/media-request-stats/index.mdx
@@ -1,39 +1,42 @@
 ---
-title: 'Media Requests Stats'
-description: 'Statistics about your media requests'
+title: "Media Requests Stats"
+description: "Statistics about your media requests"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { mediaRequestStatsWidget } from '.';
-import { jellyseerrIntegration } from '@site/docs/integrations/jellyseerr';
-import { overseerrIntegration } from '@site/docs/integrations/overseerr';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { mediaRequestStatsWidget } from ".";
+import { jellyseerrIntegration } from "@site/docs/integrations/jellyseerr";
+import { overseerrIntegration } from "@site/docs/integrations/overseerr";
 
-
-<WidgetHeader
-  widget={mediaRequestStatsWidget}
-  categories={['Media requests']}
-/>
+<WidgetHeader widget={mediaRequestStatsWidget} categories={["Media requests"]} />
 
 Provide a statistics overview of your media requests, such as mount of requests, open requests, approvement and rejections.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: jellyseerrIntegration,
-}, {
-  integration: overseerrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: jellyseerrIntegration,
+    },
+    {
+      integration: overseerrIntegration,
+    },
+  ]}
+/>
 
 ### Screenshots
 
-import mediaRequestStats from './img/stats.png';
+import mediaRequestStats from "./img/stats.png";
 
 <img src={mediaRequestStats} alt="media-request-stats" width={256} height={256} />
 
@@ -41,6 +44,8 @@ import mediaRequestStats from './img/stats.png';
 
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/media-server/index.mdx b/apps/docs/docs/widgets/media-server/index.mdx
index 8fb0c857c..f76ce050b 100644
--- a/apps/docs/docs/widgets/media-server/index.mdx
+++ b/apps/docs/docs/widgets/media-server/index.mdx
@@ -1,56 +1,62 @@
 ---
-title: 'Media server streams'
-description: 'Show the current streams on your media servers'
+title: "Media server streams"
+description: "Show the current streams on your media servers"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { mediaServerWidget } from '.';
-import { embyIntegration } from '@site/docs/integrations/emby';
-import { jellyfinIntegration } from '@site/docs/integrations/jellyfin';
-import { navidromeIntegration } from '@site/docs/integrations/navidrome';
-import { plexIntegration } from '@site/docs/integrations/plex';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { mediaServerWidget } from ".";
+import { embyIntegration } from "@site/docs/integrations/emby";
+import { jellyfinIntegration } from "@site/docs/integrations/jellyfin";
+import { navidromeIntegration } from "@site/docs/integrations/navidrome";
+import { plexIntegration } from "@site/docs/integrations/plex";
 
+<WidgetHeader widget={mediaServerWidget} categories={["Media server"]} />
 
-<WidgetHeader
-  widget={mediaServerWidget}
-  categories={['Media server']}
-/>
-
-The media server widget enables you to watch and view current active sessions over all your media servers. 
+The media server widget enables you to watch and view current active sessions over all your media servers.
 It also displays useful information, that you can use when providing support to users or debugging a problem.
 
-
-
 ### Screenshots
 
-import mediaTable from './img/table.png';
+import mediaTable from "./img/table.png";
 
 <img src={mediaTable} alt="media-server-streams" width={128 * 3 * 1.5} height={128 * 1.5} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: embyIntegration,
-}, {
-  integration: jellyfinIntegration,
-}, {
-  integration: navidromeIntegration,
-  note: "Will always show only currently playing audio streams, not all active sessions."
-}, {
-  integration: plexIntegration,
-  note: "Will always show only currently playing streams, not all active sessions."
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: embyIntegration,
+    },
+    {
+      integration: jellyfinIntegration,
+    },
+    {
+      integration: navidromeIntegration,
+      note: "Will always show only currently playing audio streams, not all active sessions.",
+    },
+    {
+      integration: plexIntegration,
+      note: "Will always show only currently playing streams, not all active sessions.",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={mediaServerWidget.configuration} />
diff --git a/apps/docs/docs/widgets/media-transcoding/index.mdx b/apps/docs/docs/widgets/media-transcoding/index.mdx
index 0fc280021..256b8edd6 100644
--- a/apps/docs/docs/widgets/media-transcoding/index.mdx
+++ b/apps/docs/docs/widgets/media-transcoding/index.mdx
@@ -1,35 +1,31 @@
 ---
-title: 'Media transcoding'
-description: 'Statistics, current queue and worker status of your media transcoding'
+title: "Media transcoding"
+description: "Statistics, current queue and worker status of your media transcoding"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { mediaTranscodingWidget } from '.';
-import { tdarrIntegration } from '@site/docs/integrations/tdarr';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { mediaTranscodingWidget } from ".";
+import { tdarrIntegration } from "@site/docs/integrations/tdarr";
 
+<WidgetHeader widget={mediaTranscodingWidget} categories={["Media transcoding"]} />
 
-<WidgetHeader
-  widget={mediaTranscodingWidget}
-  categories={['Media transcoding']}
-/>
-
-The media transcoding widget provides you with an overview of your media transcoding status. 
+The media transcoding widget provides you with an overview of your media transcoding status.
 It shows you the current queue, worker status, and statistics about your transcoding jobs.
 
-
-
 ### Screenshots
 
-import queueCard from './img/queue.png';
-import workersCard from './img/workers.png';
-import statisticsCard from './img/statistics.png';
+import queueCard from "./img/queue.png";
+import workersCard from "./img/workers.png";
+import statisticsCard from "./img/statistics.png";
 
 <div className="flex gap-1 flex-wrap">
   <img src={workersCard} alt="media-transcoding workers-tab" width={128 * 3} />
@@ -39,13 +35,20 @@ import statisticsCard from './img/statistics.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: tdarrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: tdarrIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={mediaTranscodingWidget.configuration} />
diff --git a/apps/docs/docs/widgets/minecraft-server-status/index.mdx b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
index 51101246b..8a99cf8cf 100644
--- a/apps/docs/docs/widgets/minecraft-server-status/index.mdx
+++ b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
@@ -1,44 +1,45 @@
 ---
-title: 'Minecraft Server Status'
-description: 'Displays the status of a Minecraft server.'
+title: "Minecraft Server Status"
+description: "Displays the status of a Minecraft server."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
-import { minecraftServerStatusWidget } from '.';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import { minecraftServerStatusWidget } from ".";
 
-
-<WidgetHeader
-  widget={minecraftServerStatusWidget}
-  categories={['Gaming', 'Minecraft']}
-/>
+<WidgetHeader widget={minecraftServerStatusWidget} categories={["Gaming", "Minecraft"]} />
 
 Shows the status and amount of players on a Minecraft server. It supports both Java and Bedrock editions, however only public servers are supported which can be reached through the used api of [api.mcsrvstat.us](https://api.mcsrvstat.us).
 
 ### Screenshots
 
-import javaItem from './img/java.png';
-import bedrockItem from './img/bedrock.png';
+import javaItem from "./img/java.png";
+import bedrockItem from "./img/bedrock.png";
 
-<div className='flex gap-1'>
+<div className="flex gap-1">
   <img src={javaItem} alt="minecraft-server-status java-edition" width={128 * 1.5} height={128 * 1.5} />
   <img src={bedrockItem} alt="minecraft-server-status bedrock-editon" width={128 * 1.5} height={128 * 1.5} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={minecraftServerStatusWidget.configuration} />
 
 ### Data source
 
 We use the Minecraft Server Status API to fetch the server status.
-If you need to whitelist the api, please use the following URL: `hhttps://api.mcsrvstat.us`
\ No newline at end of file
+If you need to whitelist the api, please use the following URL: `hhttps://api.mcsrvstat.us`
diff --git a/apps/docs/docs/widgets/network-controller-status/index.mdx b/apps/docs/docs/widgets/network-controller-status/index.mdx
index a01496234..ad0feaf9d 100644
--- a/apps/docs/docs/widgets/network-controller-status/index.mdx
+++ b/apps/docs/docs/widgets/network-controller-status/index.mdx
@@ -1,44 +1,49 @@
 ---
-title: 'Network Status'
-description: 'Display connected devices on a network'
+title: "Network Status"
+description: "Display connected devices on a network"
 hide_title: true
 ---
 
-import { unifiControllerIntegration } from '@site/docs/integrations/unifi-controller';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { unifiControllerIntegration } from "@site/docs/integrations/unifi-controller";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
-import { networkControllerStatusWidget } from '.';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import { networkControllerStatusWidget } from ".";
 
-
-<WidgetHeader
-  widget={networkControllerStatusWidget}
-  categories={['Network controller']}
-/>
+<WidgetHeader widget={networkControllerStatusWidget} categories={["Network controller"]} />
 
 Shows connected users and connected guest devices on wired or wireless networks.
 
 ### Screenshots
 
-import wifiCard from './img/wifi.png';
-import wiredCard from './img/wired.png';
+import wifiCard from "./img/wifi.png";
+import wiredCard from "./img/wired.png";
 
 <img src={wifiCard} alt="network-controller-status wifi" width={128 * 1.5} height={128 * 1.5} />
 <img src={wiredCard} alt="network-controller-status wired" width={128 * 1.5} height={128 * 1.5} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: unifiControllerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: unifiControllerIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={networkControllerStatusWidget.configuration} />
diff --git a/apps/docs/docs/widgets/network-controller-summary/index.mdx b/apps/docs/docs/widgets/network-controller-summary/index.mdx
index fe4cd3357..1386fc069 100644
--- a/apps/docs/docs/widgets/network-controller-summary/index.mdx
+++ b/apps/docs/docs/widgets/network-controller-summary/index.mdx
@@ -1,38 +1,42 @@
 ---
-title: 'Network Controller Summary'
-description: 'Displays the summary of a Network Controller'
+title: "Network Controller Summary"
+description: "Displays the summary of a Network Controller"
 hide_title: true
 ---
 
-import { unifiControllerIntegration } from '@site/docs/integrations/unifi-controller';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { unifiControllerIntegration } from "@site/docs/integrations/unifi-controller";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import TabItem from '@theme/TabItem';
-import Tabs from '@theme/Tabs';
-import { networkControllerSummaryWidget } from '.';
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+import { networkControllerSummaryWidget } from ".";
 
-
-<WidgetHeader
-  widget={networkControllerSummaryWidget}
-  categories={['Network controller']}
-/>
+<WidgetHeader widget={networkControllerSummaryWidget} categories={["Network controller"]} />
 
 Shows information whether your WAN is connected, Wi-Fi is active and several other information.
 
 ### Screenshots
 
-import summaryCard from './img/summary.png';
+import summaryCard from "./img/summary.png";
 
 <img src={summaryCard} alt="network-controller-summary" width={128 * 1.5} height={128 * 1.5} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: unifiControllerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: unifiControllerIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/notebook/index.mdx b/apps/docs/docs/widgets/notebook/index.mdx
index 393137ed2..a245600aa 100644
--- a/apps/docs/docs/widgets/notebook/index.mdx
+++ b/apps/docs/docs/widgets/notebook/index.mdx
@@ -4,6 +4,8 @@ description: "A simple notebook widget that supports markdown."
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -24,6 +26,8 @@ import editOn from "./img/edit.png";
   <img src={editOn} alt="notebook edit-on" width={128 * 3} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/notifications/index.mdx b/apps/docs/docs/widgets/notifications/index.mdx
index 0a715ab3c..41638ac33 100644
--- a/apps/docs/docs/widgets/notifications/index.mdx
+++ b/apps/docs/docs/widgets/notifications/index.mdx
@@ -1,44 +1,41 @@
 ---
-title: 'Notifications'
-description: 'Display notification history from an integration'
+title: "Notifications"
+description: "Display notification history from an integration"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { notificationsWidget } from '.';
-import { ntfyIntegration } from '@site/docs/integrations/ntfy';
-import { nextcloudIntegration } from '@site/docs/integrations/nextcloud';
-import { gotifyIntegration } from '@site/docs/integrations/gotify';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={notificationsWidget}
-  categories={['Notifications', "Messaging"]}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { IconAd } from "@tabler/icons-react";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { notificationsWidget } from ".";
+import { ntfyIntegration } from "@site/docs/integrations/ntfy";
+import { nextcloudIntegration } from "@site/docs/integrations/nextcloud";
+import { gotifyIntegration } from "@site/docs/integrations/gotify";
+
+<WidgetHeader widget={notificationsWidget} categories={["Notifications", "Messaging"]} />
 
 The notifications widget allows you to display notifications from various integrations in a unified view.
 
 ### Screenshots
 
-import notificationsScreenshot from './img/notifications.png';
+import notificationsScreenshot from "./img/notifications.png";
 
 <img src={notificationsScreenshot} alt="notifications" width={256} height={256} />
 
 ### Supported Integrations
 
 <WidgetIntegrations
-  items={[
-    { integration: ntfyIntegration },
-    { integration: nextcloudIntegration },
-    { integration: gotifyIntegration }
-  ]}
+  items={[{ integration: ntfyIntegration }, { integration: nextcloudIntegration }, { integration: gotifyIntegration }]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/paperless-ngx/index.mdx b/apps/docs/docs/widgets/paperless-ngx/index.mdx
index 3dd684efd..4479165e2 100644
--- a/apps/docs/docs/widgets/paperless-ngx/index.mdx
+++ b/apps/docs/docs/widgets/paperless-ngx/index.mdx
@@ -1,34 +1,39 @@
 ---
-title: 'Paperless-ngx'
-description: 'Displays document management statistics including inbox ratio, document counts, and metadata.'
+title: "Paperless-ngx"
+description: "Displays document management statistics including inbox ratio, document counts, and metadata."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { paperlessNgxWidget } from '.';
-import { paperlessNgxIntegration } from '@site/docs/integrations/paperless-ngx';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { paperlessNgxWidget } from ".";
+import { paperlessNgxIntegration } from "@site/docs/integrations/paperless-ngx";
 
-<WidgetHeader
-  widget={paperlessNgxWidget}
-  categories={['Documents']}
-/>
+<WidgetHeader widget={paperlessNgxWidget} categories={["Documents"]} />
 
 This widget displays statistics from your Paperless-ngx instance, including an inbox ratio ring showing how many documents are in your inbox versus total, along with counts for correspondents, tags, and document types.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: paperlessNgxIntegration,
-  note: "Displays document statistics and inbox ratio"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: paperlessNgxIntegration,
+      note: "Displays document statistics and inbox ratio",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={paperlessNgxWidget.configuration} />
diff --git a/apps/docs/docs/widgets/patchmon/index.mdx b/apps/docs/docs/widgets/patchmon/index.mdx
index d16ab8d68..ccbcd7dab 100644
--- a/apps/docs/docs/widgets/patchmon/index.mdx
+++ b/apps/docs/docs/widgets/patchmon/index.mdx
@@ -1,21 +1,19 @@
 ---
-title: 'PatchMon'
-description: 'Displays host patch statistics from PatchMon including update and security counts.'
+title: "PatchMon"
+description: "Displays host patch statistics from PatchMon including update and security counts."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { patchmonWidget } from '.';
-import { patchmonIntegration } from '@site/docs/integrations/patchmon';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { patchmonWidget } from ".";
+import { patchmonIntegration } from "@site/docs/integrations/patchmon";
 
-<WidgetHeader
-  widget={patchmonWidget}
-  categories={['Health Monitoring']}
-/>
+<WidgetHeader widget={patchmonWidget} categories={["Health Monitoring"]} />
 
 This widget displays patch statistics from your PatchMon instance, including total hosts, hosts needing updates, and security update counts. Each stat is shown with a dedicated icon and severity-tinted card background for quick visual scanning.
 
@@ -39,13 +37,13 @@ In **1-column-wide** layouts (such as 1×1), the compliance hero switches to a r
 
 When **Enable threshold colors** is on (default), stat values and card backgrounds are colored for at-a-glance severity:
 
-| Stat | Green | Yellow | Red |
-|------|-------|--------|-----|
-| Needs Updates | 0 | 1–4 | 5+ |
-| Security Updates | 0 | 1–9 | 10+ |
-| Hosts with Security Updates | 0 | — | 1+ |
-| Up-to-Date Hosts | 100% of total | 90–99% | below 90% |
-| Outdated Packages | 0 | 1–49 | 50+ |
+| Stat                        | Green         | Yellow | Red       |
+| --------------------------- | ------------- | ------ | --------- |
+| Needs Updates               | 0             | 1–4    | 5+        |
+| Security Updates            | 0             | 1–9    | 10+       |
+| Hosts with Security Updates | 0             | —      | 1+        |
+| Up-to-Date Hosts            | 100% of total | 90–99% | below 90% |
+| Outdated Packages           | 0             | 1–49   | 50+       |
 
 Enable **Advanced thresholds** to override warning and critical values per stat, using either absolute counts or percentages of total hosts.
 
@@ -62,13 +60,13 @@ The OS distribution limit defaults to **All**. A widget size of **2×3** or larg
 
 The widget adapts its layout based on the available space:
 
-| Widget size | Layout |
-|-------------|--------|
-| **1×1** | Primary selected content: compliance ring (no label), compact OS distribution, or up to two enabled stats |
+| Widget size       | Layout                                                                                                              |
+| ----------------- | ------------------------------------------------------------------------------------------------------------------- |
+| **1×1**           | Primary selected content: compliance ring (no label), compact OS distribution, or up to two enabled stats           |
 | **2×1** / **1×2** | Compact primary content; **2×1** shows compliance label and host ratio beside the ring; **1×2** uses ring-only hero |
-| **2×2** (default) | Compliance hero, stat grid with icons, and tinted cards |
-| **2×3** / **3×2** | Hero, stats, OS distribution, and "last updated" footer |
-| **3×3** or larger | Full layout with up to 4-column stat grid, donut chart, and optional OS legend |
+| **2×2** (default) | Compliance hero, stat grid with icons, and tinted cards                                                             |
+| **2×3** / **3×2** | Hero, stats, OS distribution, and "last updated" footer                                                             |
+| **3×3** or larger | Full layout with up to 4-column stat grid, donut chart, and optional OS legend                                      |
 
 ### Last updated
 
@@ -76,14 +74,21 @@ When the widget has enough space, a "last updated" timestamp appears at the bott
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: patchmonIntegration,
-  note: "Displays host patch and security update statistics"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: patchmonIntegration,
+      note: "Displays host patch and security update statistics",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={patchmonWidget.configuration} />
diff --git a/apps/docs/docs/widgets/releases/index.mdx b/apps/docs/docs/widgets/releases/index.mdx
index faf386a13..017ea97ca 100644
--- a/apps/docs/docs/widgets/releases/index.mdx
+++ b/apps/docs/docs/widgets/releases/index.mdx
@@ -4,6 +4,8 @@ description: "Displays a list of the current version of the given repositories w
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -33,6 +35,8 @@ GitHub, Docker Hub, GitLab, NPM, Codeberg, GitHub Container Registry, Quay, and
 For GitHub Container Registry, use `owner/package` identifiers such as `homarr-labs/homarr`.
 Full image references such as `ghcr.io/homarr-labs/homarr:latest` are also accepted.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/rss-feed/index.mdx b/apps/docs/docs/widgets/rss-feed/index.mdx
index 68bbb1071..d663554d6 100644
--- a/apps/docs/docs/widgets/rss-feed/index.mdx
+++ b/apps/docs/docs/widgets/rss-feed/index.mdx
@@ -1,37 +1,40 @@
 ---
-title: 'RSS Feed'
-description: 'Monitor and display one or more generic RSS, ATOM or JSON feeds.'
+title: "RSS Feed"
+description: "Monitor and display one or more generic RSS, ATOM or JSON feeds."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { rssFeedWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { rssFeedWidget } from ".";
 
-<WidgetHeader
-  widget={rssFeedWidget}
-  categories={['Feeds']}
-/>
+<WidgetHeader widget={rssFeedWidget} categories={["Feeds"]} />
 
 Using the RSS standard, you can integrate most News websites, applications and more on your dashboard.
 
 ### Screenshots
 
-import screenshot from './img/screenshot.png';
+import screenshot from "./img/screenshot.png";
 
 <img src={screenshot} alt="rss-feed noted-lol" width={128 * 4} />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={rssFeedWidget.configuration} />
 
 ### Examples
+
 Here's a small collection of examples, that you can use for testing or actual use (in no particular order):
+
 - https://noted.lol/rss/
 - https://blog.google/products/chrome/rss/
 - https://www.w3.org/blog/feed/
@@ -45,4 +48,4 @@ Here's a small collection of examples, that you can use for testing or actual us
 - http://feeds.foxnews.com/foxnews/latest
 
 There is a good list of feeds here:
-https://github.com/greysonp/rss-feeds/blob/master/feeds.json
\ No newline at end of file
+https://github.com/greysonp/rss-feeds/blob/master/feeds.json
diff --git a/apps/docs/docs/widgets/smart-home-entity-state/index.mdx b/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
index d101d6376..28c83d3aa 100644
--- a/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
+++ b/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
@@ -1,34 +1,32 @@
 ---
-title: 'Entity State'
-description: 'Display the state of an entity and toggle it optionally'
+title: "Entity State"
+description: "Display the state of an entity and toggle it optionally"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { smartHomeEntityStateWidget } from '.';
-import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { smartHomeEntityStateWidget } from ".";
+import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant";
 
-
-<WidgetHeader
-  widget={smartHomeEntityStateWidget}
-  categories={['Smart home']}
-/>
+<WidgetHeader widget={smartHomeEntityStateWidget} categories={["Smart home"]} />
 
 The entity state enables you to display the current state of an entity.
-This works with most entities and enables you display almost any data. 
+This works with most entities and enables you display almost any data.
 It is recommended that you transform data on the integration as much as possible since Homarr's capabilities in transformation are very limited.
 
 ### Screenshots
 
-import sun from './img/sun.png';
-import lightSwitch from './img/light-switch.png';
-import temperature from './img/temperature.png';
+import sun from "./img/sun.png";
+import lightSwitch from "./img/light-switch.png";
+import temperature from "./img/temperature.png";
 
 <img src={sun} alt="smart-home-entity-state sun" width={128 * 1.5} height={128 * 1.5} />
 <img src={lightSwitch} alt="smart-home-entity-state light-switch" width={128 * 1.5} height={128 * 1.5} />
@@ -36,32 +34,40 @@ import temperature from './img/temperature.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: homeAssistantIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: homeAssistantIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 - Toggle entity state by clicking on the entity (only when clickable enabled).
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={smartHomeEntityStateWidget.configuration} />
 
 ### How to find the entity ID
 
 To find the entity ID in Home Assistant, follow these steps:
+
 1. Open Home Assistant and go to the **Developer Tools** section (usually found in the sidebar).
 2. Click on the **States** tab.
 3. In the list of entities, find the entity you want to use.
 4. The entity ID will be displayed in the format `domain.object_id` (e.g., `light.living_room_light`).
 5. Copy the entity ID and paste it into the widget configuration in Homarr. It will then show the State that is visible in Home Assistant.
 
-import retrieveEntityId from './img/retrieve-entity-id.png';
+import retrieveEntityId from "./img/retrieve-entity-id.png";
 
 <div>
   <img src={retrieveEntityId} alt="homeassistant retrieve-entity-id" width={256 * 2} />
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx b/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx
index 522c113ca..f0118799a 100644
--- a/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx
+++ b/apps/docs/docs/widgets/smart-home-execute-automation/index.mdx
@@ -1,50 +1,60 @@
 ---
-title: 'Execute Automation'
-description: 'Trigger an automation with one click'
+title: "Execute Automation"
+description: "Trigger an automation with one click"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
 import { IconAd } from "@tabler/icons-react";
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import { smartHomeExecuteAutomationWidget } from '.';
-import { homeAssistantIntegration } from '@site/docs/integrations/home-assistant';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import { smartHomeExecuteAutomationWidget } from ".";
+import { homeAssistantIntegration } from "@site/docs/integrations/home-assistant";
 
-
-<WidgetHeader
-  widget={smartHomeExecuteAutomationWidget}
-  categories={['Automation']}
-/>
+<WidgetHeader widget={smartHomeExecuteAutomationWidget} categories={["Automation"]} />
 
 The execute automation widget allows you to trigger an automation with one click.
 
 ### Screenshots
 
-import empty from './img/empty.png';
-import withDisplayname from './img/with-displayname.png';
+import empty from "./img/empty.png";
+import withDisplayname from "./img/with-displayname.png";
 
 <div className="flex gap-1">
   <img src={empty} alt="smart-home-execute-automation empty" width={128 * 1.5} height={128 * 1.5} />
-  <img src={withDisplayname} alt="smart-home-execute-automation with-displayname" width={128 * 1.5} height={128 * 1.5} />
+  <img
+    src={withDisplayname}
+    alt="smart-home-execute-automation with-displayname"
+    width={128 * 1.5}
+    height={128 * 1.5}
+  />
 </div>
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: homeAssistantIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: homeAssistantIntegration,
+    },
+  ]}
+/>
 
 ### Interactions
 
 - Trigger the automation by clicking on the widget.
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={smartHomeExecuteAutomationWidget.configuration} />
diff --git a/apps/docs/docs/widgets/speedtest-tracker/index.mdx b/apps/docs/docs/widgets/speedtest-tracker/index.mdx
index 94be18dd7..c6c0bd992 100644
--- a/apps/docs/docs/widgets/speedtest-tracker/index.mdx
+++ b/apps/docs/docs/widgets/speedtest-tracker/index.mdx
@@ -1,39 +1,45 @@
 ---
-title: 'Speedtest Tracker'
-description: 'Displays speed test results from your Speedtest Tracker instance.'
+title: "Speedtest Tracker"
+description: "Displays speed test results from your Speedtest Tracker instance."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { speedtestTrackerWidget } from '.';
-import { speedtestTrackerIntegration } from '@site/docs/integrations/speedtest-tracker';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={speedtestTrackerWidget}
-  categories={['Speedtest']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { speedtestTrackerWidget } from ".";
+import { speedtestTrackerIntegration } from "@site/docs/integrations/speedtest-tracker";
+
+<WidgetHeader widget={speedtestTrackerWidget} categories={["Speedtest"]} />
 
 This widget displays internet speed test results from your [Speedtest Tracker](https://docs.speedtest-tracker.dev/) instance,
 including the latest result, historical averages, and a live chart of the last 12 hours.
 
 ### Screenshots
 
-import screenshot from './img/screenshot.png';
+import screenshot from "./img/screenshot.png";
 
 <img src={screenshot} alt="speedtest-tracker image" width={500} height={355} />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: speedtestTrackerIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: speedtestTrackerIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={speedtestTrackerWidget.configuration} />
diff --git a/apps/docs/docs/widgets/stock-price/index.mdx b/apps/docs/docs/widgets/stock-price/index.mdx
index 5d9a24c64..2a6119240 100644
--- a/apps/docs/docs/widgets/stock-price/index.mdx
+++ b/apps/docs/docs/widgets/stock-price/index.mdx
@@ -1,28 +1,26 @@
 ---
-title: 'Stock Price'
-description: 'Displays the current stock price of a company.'
+title: "Stock Price"
+description: "Displays the current stock price of a company."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { stockPriceWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { stockPriceWidget } from ".";
 
-<WidgetHeader
-  widget={stockPriceWidget}
-  categories={['Finance', "Market"]}
-/>
+<WidgetHeader widget={stockPriceWidget} categories={["Finance", "Market"]} />
 
 Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
 
 ### Screenshots
 
-import apple from './img/apple.png';
-import google from './img/google.png';
-import ethereum from './img/ethereum.png';
-import nvidia from './img/nvidia.png';
+import apple from "./img/apple.png";
+import google from "./img/google.png";
+import ethereum from "./img/ethereum.png";
+import nvidia from "./img/nvidia.png";
 
 <div className="flex gap-1">
   <div className="flex flex-col gap-1">
@@ -34,17 +32,21 @@ import nvidia from './img/nvidia.png';
   </div>
   <img src={nvidia} alt="stock-price nvidia" width={128 * 2 + 2} height={128 * 2 + 4} />
 </div>
-  
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={stockPriceWidget.configuration} />
 
 ### Examples
+
 Here's a small collection of examples, that you can use for testing or actual use (in no particular order):
+
 - AAPL
 - GOOGL
 - AMZN
@@ -59,4 +61,4 @@ Here's a small collection of examples, that you can use for testing or actual us
 ### Data source
 
 We use the Yahoo Finance API to fetch the stock prices.
-If you need to whitelist the api, please use the following URL: `https://query1.finance.yahoo.com`
\ No newline at end of file
+If you need to whitelist the api, please use the following URL: `https://query1.finance.yahoo.com`
diff --git a/apps/docs/docs/widgets/system-disks/index.mdx b/apps/docs/docs/widgets/system-disks/index.mdx
index b3be87e1d..5015ac725 100644
--- a/apps/docs/docs/widgets/system-disks/index.mdx
+++ b/apps/docs/docs/widgets/system-disks/index.mdx
@@ -4,6 +4,8 @@ description: "Disk usage of your system"
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -42,6 +44,8 @@ This widget displays filesystem and SMART disk usage for supported server and NA
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/system-disks/index.ts b/apps/docs/docs/widgets/system-disks/index.ts
index 8dd68f057..ade53efc0 100644
--- a/apps/docs/docs/widgets/system-disks/index.ts
+++ b/apps/docs/docs/widgets/system-disks/index.ts
@@ -19,7 +19,11 @@ export const systemDisksWidget: WidgetDefinition = {
         description: "How disk usage values are shown",
         values: {
           type: "select",
-          options: ["Percentage (e.g., 76%)", "Absolute values (e.g., 800GB / 1TB)", "Free space percentage (e.g., 24% free)"],
+          options: [
+            "Percentage (e.g., 76%)",
+            "Absolute values (e.g., 800GB / 1TB)",
+            "Free space percentage (e.g., 24% free)",
+          ],
         },
         defaultValue: "Percentage (e.g., 76%)",
       },
diff --git a/apps/docs/docs/widgets/system-resources/index.mdx b/apps/docs/docs/widgets/system-resources/index.mdx
index 16ad19750..cdc258f4c 100644
--- a/apps/docs/docs/widgets/system-resources/index.mdx
+++ b/apps/docs/docs/widgets/system-resources/index.mdx
@@ -4,6 +4,8 @@ description: "Displays CPU, RAM and network of your host in real time"
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -65,6 +67,8 @@ import { synologyIntegration } from "@site/docs/integrations/synology";
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/timetable/index.mdx b/apps/docs/docs/widgets/timetable/index.mdx
index e9bdfd326..8fb3b7ccd 100644
--- a/apps/docs/docs/widgets/timetable/index.mdx
+++ b/apps/docs/docs/widgets/timetable/index.mdx
@@ -4,6 +4,8 @@ description: "Displays departure times for a station."
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -19,18 +21,12 @@ import trainDepartures from "./img/train-departures.png";
 import streetDepartures from "./img/street-departures.png";
 
 <div className="flex gap-2">
-  <img
-    src={trainDepartures}
-    alt="timetable-widget-train-departures"
-    width={128 * 2}
-  />
-  <img
-    src={streetDepartures}
-    alt="timetable-widget-bus-and-tram-departures"
-    width={128 * 2}
-  />
+  <img src={trainDepartures} alt="timetable-widget-train-departures" width={128 * 2} />
+  <img src={streetDepartures} alt="timetable-widget-bus-and-tram-departures" width={128 * 2} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/tracearr/index.mdx b/apps/docs/docs/widgets/tracearr/index.mdx
index a579d8af3..ff02699ca 100644
--- a/apps/docs/docs/widgets/tracearr/index.mdx
+++ b/apps/docs/docs/widgets/tracearr/index.mdx
@@ -1,52 +1,57 @@
 ---
-title: 'Tracearr'
-description: 'Monitor media server streams, user activity, and policy violations.'
+title: "Tracearr"
+description: "Monitor media server streams, user activity, and policy violations."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { tracearrWidget } from '.';
-import { tracearrIntegration } from '@site/docs/integrations/tracearr';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { tracearrWidget } from ".";
+import { tracearrIntegration } from "@site/docs/integrations/tracearr";
 
-<WidgetHeader
-  widget={tracearrWidget}
-  categories={['Media Monitoring']}
-/>
+<WidgetHeader widget={tracearrWidget} categories={["Media Monitoring"]} />
 
 The Tracearr widget provides a real-time monitoring dashboard for your media server activity. It displays active streams, user statistics, recent watching history, and policy violations.
 
 ### Sections
 
-| Section | Description |
-|---|---|
-| **Stats Bar** | Displays Active Streams, Total Users, Transcode Count, and Total Bandwidth at a glance. |
-| **Active Streams** | Shows currently playing media with poster art, user info, progress bar, resolution, and transcoding status (Direct Play or Transcode). |
-| **Recent Activity** | A paginated list of watching history with user avatars and watched status. |
-| **Violations** | Alerts for policy violations (e.g., concurrent stream limits) with severity levels. |
+| Section             | Description                                                                                                                            |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| **Stats Bar**       | Displays Active Streams, Total Users, Transcode Count, and Total Bandwidth at a glance.                                                |
+| **Active Streams**  | Shows currently playing media with poster art, user info, progress bar, resolution, and transcoding status (Direct Play or Transcode). |
+| **Recent Activity** | A paginated list of watching history with user avatars and watched status.                                                             |
+| **Violations**      | Alerts for policy violations (e.g., concurrent stream limits) with severity levels.                                                    |
 
 ### Screenshots
 
-import widgetOverview from './img/widget-overview.png';
-import streamsAndStats from './img/streams-and-stats.png';
+import widgetOverview from "./img/widget-overview.png";
+import streamsAndStats from "./img/streams-and-stats.png";
 
 <div className="flex flex-col gap-2">
   <img src={widgetOverview} alt="tracearr-widget-overview" width={128 * 4} />
   <img src={streamsAndStats} alt="tracearr-streams-and-stats" width={128 * 4} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: tracearrIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: tracearrIntegration,
+    },
+  ]}
+/>
 
 ### Configuration
+
 <WidgetConfig configuration={tracearrWidget.configuration} />
diff --git a/apps/docs/docs/widgets/traefik/index.mdx b/apps/docs/docs/widgets/traefik/index.mdx
index dc9f6a6c4..dfc2f9247 100644
--- a/apps/docs/docs/widgets/traefik/index.mdx
+++ b/apps/docs/docs/widgets/traefik/index.mdx
@@ -4,6 +4,8 @@ description: "Displays Traefik router, service, middleware, and entry point coun
 hide_title: true
 ---
 
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
+
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -26,6 +28,8 @@ This widget displays a compact overview of your Traefik instance, including tota
   ]}
 />
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/umami/index.mdx b/apps/docs/docs/widgets/umami/index.mdx
index 0d0006054..6f2c2bb7f 100644
--- a/apps/docs/docs/widgets/umami/index.mdx
+++ b/apps/docs/docs/widgets/umami/index.mdx
@@ -1,28 +1,33 @@
 ---
-title: 'Umami Analytics'
-description: 'Display visitor stats from your Umami analytics instance'
+title: "Umami Analytics"
+description: "Display visitor stats from your Umami analytics instance"
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { umamiWidget } from '.';
-import { umamiIntegration } from '@site/docs/integrations/umami';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={umamiWidget}
-  categories={['Analytics']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { umamiWidget } from ".";
+import { umamiIntegration } from "@site/docs/integrations/umami";
+
+<WidgetHeader widget={umamiWidget} categories={["Analytics"]} />
 
 The Umami Analytics widget displays key visitor metrics from a website tracked by your [Umami](https://umami.is) instance - pageviews, unique visitors, visits, bounce rate, avg. visit duration, and real-time active visitor count. The widget body can be switched between a visitor/event chart, a multi-event chart, and ranked top pages or referrers lists.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: umamiIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: umamiIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
@@ -34,12 +39,12 @@ The Umami Analytics widget displays key visitor metrics from a website tracked b
 
 ### View modes
 
-| View | Description |
-|---|---|
-| **Chart** | Bar chart or sparkline of unique visitors over the selected time frame. Optionally overlay a single named event as a second series. |
-| **Events chart** | Multi-select one or more named events and chart each as its own colored series - no visitor baseline. Supports bar and sparkline. |
-| **Top pages** | Ranked list of URLs by pageview count for the selected time frame. |
-| **Top referrers** | Ranked list of referrer sources by session count. Direct traffic (no referrer) is labeled "Direct". |
+| View              | Description                                                                                                                         |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| **Chart**         | Bar chart or sparkline of unique visitors over the selected time frame. Optionally overlay a single named event as a second series. |
+| **Events chart**  | Multi-select one or more named events and chart each as its own colored series - no visitor baseline. Supports bar and sparkline.   |
+| **Top pages**     | Ranked list of URLs by pageview count for the selected time frame.                                                                  |
+| **Top referrers** | Ranked list of referrer sources by session count. Direct traffic (no referrer) is labeled "Direct".                                 |
 
 ### Notes
 
diff --git a/apps/docs/docs/widgets/ups/index.mdx b/apps/docs/docs/widgets/ups/index.mdx
index bf512990d..8a3d7037e 100644
--- a/apps/docs/docs/widgets/ups/index.mdx
+++ b/apps/docs/docs/widgets/ups/index.mdx
@@ -1,20 +1,19 @@
 ---
-title: 'UPS'
-description: 'Monitor the status of your UPS devices through a NUT server.'
+title: "UPS"
+description: "Monitor the status of your UPS devices through a NUT server."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { upsWidget } from '.';
-import { peaNutIntegration } from '@site/docs/integrations/peanut';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={upsWidget}
-  categories={['UPS']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { upsWidget } from ".";
+import { peaNutIntegration } from "@site/docs/integrations/peanut";
+
+<WidgetHeader widget={upsWidget} categories={["UPS"]} />
 
 This widget displays the status of the UPS devices reported by a Network UPS Tools (NUT) server. Each device shows its
 status (online, on battery, charging or low battery), battery charge and estimated runtime, output load, and input and
@@ -22,27 +21,34 @@ output voltage.
 
 ### Layouts
 
-import screenshotFull from './img/screenshot.png';
-import screenshotCompact from './img/screenshot-compact.png';
-import screenshotMini from './img/screenshot-mini.png';
+import screenshotFull from "./img/screenshot.png";
+import screenshotCompact from "./img/screenshot-compact.png";
+import screenshotMini from "./img/screenshot-mini.png";
 
 The widget adapts to the size of the tile, so it stays readable from a full dashboard panel down to a single cell. Multiple UPS devices scroll within the widget at any height.
 
-| Layout | Size | Preview |
-| --- | --- | --- |
-| Full | 3+ columns wide | <img src={screenshotFull} alt="UPS widget full layout" width={239} /> |
-| Compact | ~2 columns | <img src={screenshotCompact} alt="UPS widget compact layout" width={171} /> |
-| Mini | 1 column | <img src={screenshotMini} alt="UPS widget mini layout" width={90} /> |
+| Layout  | Size            | Preview                                                                     |
+| ------- | --------------- | --------------------------------------------------------------------------- |
+| Full    | 3+ columns wide | <img src={screenshotFull} alt="UPS widget full layout" width={239} />       |
+| Compact | ~2 columns      | <img src={screenshotCompact} alt="UPS widget compact layout" width={171} /> |
+| Mini    | 1 column        | <img src={screenshotMini} alt="UPS widget mini layout" width={90} />        |
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: peaNutIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: peaNutIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={upsWidget.configuration} />
diff --git a/apps/docs/docs/widgets/uptime-kuma/index.mdx b/apps/docs/docs/widgets/uptime-kuma/index.mdx
index 3a6592b2e..6c5eefa16 100644
--- a/apps/docs/docs/widgets/uptime-kuma/index.mdx
+++ b/apps/docs/docs/widgets/uptime-kuma/index.mdx
@@ -1,34 +1,39 @@
 ---
-title: 'Uptime Kuma'
-description: 'Displays monitor uptime statistics, average uptime percentage, and service status counts.'
+title: "Uptime Kuma"
+description: "Displays monitor uptime statistics, average uptime percentage, and service status counts."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { uptimeKumaWidget } from '.';
-import { uptimeKumaIntegration } from '@site/docs/integrations/uptime-kuma';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { uptimeKumaWidget } from ".";
+import { uptimeKumaIntegration } from "@site/docs/integrations/uptime-kuma";
 
-<WidgetHeader
-  widget={uptimeKumaWidget}
-  categories={['Monitoring']}
-/>
+<WidgetHeader widget={uptimeKumaWidget} categories={["Monitoring"]} />
 
 This widget displays uptime statistics from your Uptime Kuma status page, including a visual uptime ring, average uptime percentage, and per-status monitor counts.
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: uptimeKumaIntegration,
-  note: "Displays monitors from the configured status page"
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: uptimeKumaIntegration,
+      note: "Displays monitors from the configured status page",
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={uptimeKumaWidget.configuration} />
diff --git a/apps/docs/docs/widgets/video/index.mdx b/apps/docs/docs/widgets/video/index.mdx
index 3ccf3760a..27fef9fb9 100644
--- a/apps/docs/docs/widgets/video/index.mdx
+++ b/apps/docs/docs/widgets/video/index.mdx
@@ -1,19 +1,17 @@
 ---
-title: 'Video Stream'
-description: 'Embed a video stream or video from a camera or a website.'
+title: "Video Stream"
+description: "Embed a video stream or video from a camera or a website."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { videoWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { videoWidget } from ".";
 
-<WidgetHeader
-  widget={videoWidget}
-  categories={["Video", "Surveillance"]}
-/>
+<WidgetHeader widget={videoWidget} categories={["Video", "Surveillance"]} />
 
 Do you run surveilance cameras? Or maybe you have a favourite video?
 The video widget enables you to integrate both seamlessly into your dashboard.
@@ -22,7 +20,6 @@ This widget uses [video.js](https://videojs.com/) to play HLS or DASH video nati
 DRM content is not yet supported. More info here:
 https://videojs.com/guides/faqs/#q-what-is-videojs
 
-
 You can use the following URL to test:
 http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
 
@@ -30,9 +27,12 @@ http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp
 
 ![video big-buck-bunny](./img/bunny.png)
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={videoWidget.configuration} />
diff --git a/apps/docs/docs/widgets/video/index.tsx b/apps/docs/docs/widgets/video/index.tsx
index e0df87ce0..7d57a27ad 100644
--- a/apps/docs/docs/widgets/video/index.tsx
+++ b/apps/docs/docs/widgets/video/index.tsx
@@ -5,7 +5,7 @@ export const videoWidget: WidgetDefinition = {
   icon: IconDeviceCctv,
   name: "Video Stream",
   description: "Embed a video stream or video from a camera or a website.",
-  path: "../../widgets/stock-price",
+  path: "../../widgets/video",
   configuration: {
     items: [
       {
diff --git a/apps/docs/docs/widgets/vpn/index.mdx b/apps/docs/docs/widgets/vpn/index.mdx
index 0aa6a1a16..fb6223cbe 100644
--- a/apps/docs/docs/widgets/vpn/index.mdx
+++ b/apps/docs/docs/widgets/vpn/index.mdx
@@ -1,19 +1,18 @@
 ---
-title: 'VPN'
-description: 'Monitor the status of your VPN integrations.'
+title: "VPN"
+description: "Monitor the status of your VPN integrations."
 hide_title: true
 ---
 
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetIntegrations } from '@site/src/components/widgets/integrations';
-import { vpnWidget } from '.';
-import { gluetunIntegration } from '@site/docs/integrations/gluetun';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
-<WidgetHeader
-  widget={vpnWidget}
-  categories={['Network', 'Security']}
-/>
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetIntegrations } from "@site/src/components/widgets/integrations";
+import { vpnWidget } from ".";
+import { gluetunIntegration } from "@site/docs/integrations/gluetun";
+
+<WidgetHeader widget={vpnWidget} categories={["Network", "Security"]} />
 
 The VPN widget provides a compact overview of each configured VPN integration. It shows whether the tunnel and DNS
 services are up, the currently exposed public IP address, and the VPN provider and protocol being used.
@@ -23,7 +22,7 @@ current status at a glance.
 
 ### Screenshots
 
-import singleIntegrationImage from './img/single.png';
+import singleIntegrationImage from "./img/single.png";
 
 <div>
   <img src={singleIntegrationImage} alt="VPN widget showing a single integration" width={128 * 3} />
@@ -31,9 +30,15 @@ import singleIntegrationImage from './img/single.png';
 
 ### Supported Integrations
 
-<WidgetIntegrations items={[{
-  integration: gluetunIntegration,
-}]} />
+<WidgetIntegrations
+  items={[
+    {
+      integration: gluetunIntegration,
+    },
+  ]}
+/>
+
+<WidgetInteractionGuide />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/weather/index.mdx b/apps/docs/docs/widgets/weather/index.mdx
index 0ff4081d7..3ca81acaa 100644
--- a/apps/docs/docs/widgets/weather/index.mdx
+++ b/apps/docs/docs/widgets/weather/index.mdx
@@ -1,40 +1,41 @@
 ---
-title: 'Weather'
-description: 'Displays the current weather information of a set location.'
+title: "Weather"
+description: "Displays the current weather information of a set location."
 hide_title: true
 ---
 
-import { AddingWidget } from '@site/src/components/widgets/adding';
-import { WidgetConfig } from '@site/src/components/widgets/configuration';
-import { WidgetHeader } from '@site/src/components/widgets/header';
-import { weatherWidget } from '.';
+import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
 
+import { AddingWidget } from "@site/src/components/widgets/adding";
+import { WidgetConfig } from "@site/src/components/widgets/configuration";
+import { WidgetHeader } from "@site/src/components/widgets/header";
+import { weatherWidget } from ".";
 
-<WidgetHeader
-  widget={weatherWidget}
-  categories={["Weather"]}
-/>
+<WidgetHeader widget={weatherWidget} categories={["Weather"]} />
 
 The Weather Widget uses your location to display the current, highest and lowest temperature.
 
 ### Screenshots
 
-import forecastWeather from './img/forecast.png';
-import currentWeather from './img/current.png';
+import forecastWeather from "./img/forecast.png";
+import currentWeather from "./img/current.png";
 
 <div className="flex flex-col gap-1">
   <img src={forecastWeather} alt="weather forecast-5-days" width={128 * 4.5} />
   <img src={currentWeather} alt="weather current" width={128 * 3} />
 </div>
 
+<WidgetInteractionGuide />
+
 ### Adding the widget
 
 <AddingWidget />
 
 ### Configuration
+
 <WidgetConfig configuration={weatherWidget.configuration} />
 
 ### Data source
 
 We use the Open Meteo API to fetch the weather and locations.
-If you need to whitelist the api, please use the following URL: `https://open-meteo.com`
\ No newline at end of file
+If you need to whitelist the api, please use the following URL: `https://open-meteo.com`
diff --git a/apps/docs/src/components/widgets/interactions.tsx b/apps/docs/src/components/widgets/interactions.tsx
new file mode 100644
index 000000000..80ba47b46
--- /dev/null
+++ b/apps/docs/src/components/widgets/interactions.tsx
@@ -0,0 +1,47 @@
+import { IconArrowsMaximize, IconMouse2, IconPlus } from "@tabler/icons-react";
+
+const interactions = [
+  {
+    icon: IconArrowsMaximize,
+    title: "Advanced view",
+    description:
+      "Hold Shift while hovering (then pin it), press Shift + Enter, or choose Open advanced view from the widget menu.",
+  },
+  {
+    icon: IconMouse2,
+    title: "Widget actions",
+    description:
+      "Right-click for live query status, refresh, settings, quick options, and actions supported by the widget.",
+  },
+  {
+    icon: IconPlus,
+    title: "Place it precisely",
+    description:
+      "With board changes allowed, right-click or touch and hold empty grid space to add there. Keyboard users can press Shift + F10.",
+  },
+] as const;
+
+export const WidgetInteractionGuide = () => (
+  <details className="group my-6 overflow-hidden rounded-xl border border-solid border-[#e5e7eb] bg-slate-50/70 dark:border-[#333] dark:bg-gray-900/40">
+    <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 font-semibold marker:hidden">
+      <span>Power-user controls</span>
+      <span className="text-xs font-normal text-[#696969] group-open:hidden dark:text-[#999]">Show shortcuts</span>
+      <span className="hidden text-xs font-normal text-[#696969] group-open:inline dark:text-[#999]">
+        Hide shortcuts
+      </span>
+    </summary>
+    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-3 dark:border-[#333]">
+      {interactions.map(({ icon: Icon, title, description }) => (
+        <div key={title} className="rounded-lg bg-white p-3 shadow-sm dark:bg-gray-950">
+          <Icon aria-hidden size={20} stroke={1.5} className="mb-2 stroke-red-500" />
+          <div className="font-semibold">{title}</div>
+          <p className="mb-0 mt-1 text-sm text-[#696969] dark:text-[#999]">{description}</p>
+        </div>
+      ))}
+    </div>
+    <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
+      Advanced view reuses the widget&apos;s live data and cache. Touch devices expose a maximize control; board actions
+      respect your permissions and right-click preference.
+    </p>
+  </details>
+);
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
index 3e167dd8c..9f2c2b3d8 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
@@ -2,7 +2,6 @@
 
 import type { PropsWithChildren } from "react";
 import { useState } from "react";
-import type { QueryKey } from "@tanstack/react-query";
 import { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
@@ -34,6 +33,7 @@ import {
 import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 import { env } from "@homarr/common/env";
 import { showWarningNotification } from "@homarr/notifications";
+import type { WidgetDefinition } from "@homarr/widgets";
 import { widgetImports } from "@homarr/widgets";
 
 import { createWidgetQueryPersister } from "./query-cache-persister";
@@ -93,11 +93,11 @@ export function TRPCReactProvider(props: PropsWithChildren) {
     });
     client.setQueryDefaults([["widget"]], { refetchInterval: queryCacheDefaultRefetchIntervalMs });
     for (const { definition } of Object.values(widgetImports)) {
-      const def = definition as { refetchInterval?: number | null; queryKey?: QueryKey; kind: string };
+      const def = definition as WidgetDefinition & { kind: string };
       if (def.refetchInterval === undefined) continue;
-      const key = def.queryKey ?? [["widget", def.kind]];
       const interval = def.refetchInterval === null ? false : def.refetchInterval * 1000;
-      client.setQueryDefaults(key, { refetchInterval: interval });
+      const primaryQueryKey = def.queryKey ?? [["widget", def.kind]];
+      client.setQueryDefaults(primaryQueryKey, { refetchInterval: interval });
     }
     return client;
   });
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
index 0ba502a9a..292a2ed05 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
@@ -4,6 +4,7 @@ import { Box, Stack } from "@mantine/core";
 
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
 
+import { BoardAdvancedFocusProvider } from "~/components/board/advanced-focus/context";
 import { BoardCategorySection } from "~/components/board/sections/category-section";
 import { BoardEmptySection } from "~/components/board/sections/empty-section";
 import { BoardBackgroundVideo } from "~/components/layout/background";
@@ -17,17 +18,19 @@ export const ClientBoard = () => {
     .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
 
   return (
-    <Box h="100%" pos="relative">
-      <BoardBackgroundVideo />
-      <Stack h="100%">
-        {fullWidthSortedSections.map((section) =>
-          section.kind === "empty" ? (
-            <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
-          ) : (
-            <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
-          ),
-        )}
-      </Stack>
-    </Box>
+    <BoardAdvancedFocusProvider>
+      <Box h="100%" pos="relative">
+        <BoardBackgroundVideo />
+        <Stack h="100%">
+          {fullWidthSortedSections.map((section) =>
+            section.kind === "empty" ? (
+              <BoardEmptySection key={`${currentLayoutId}-${section.id}`} section={section} />
+            ) : (
+              <BoardCategorySection key={`${currentLayoutId}-${section.id}`} section={section} />
+            ),
+          )}
+        </Stack>
+      </Box>
+    </BoardAdvancedFocusProvider>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
index 30c91de40..5e12a259b 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
@@ -70,6 +70,7 @@ export const BoardContentHeaderActions = ({ demoReadOnly }: { demoReadOnly: bool
 };
 
 const AddMenu = () => {
+  const board = useRequiredBoard();
   const { data: session } = useSession();
   const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
@@ -101,8 +102,8 @@ const AddMenu = () => {
   );
 
   const handleSelectItem = useCallback(() => {
-    openItemSelectModal();
-  }, [openItemSelectModal]);
+    openItemSelectModal({ board, persistImmediately: false });
+  }, [board, openItemSelectModal]);
 
   const handleSelectApp = useCallback(() => {
     openAppSelectModal({
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
index 25a53ffd2..383d74795 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
@@ -123,7 +123,7 @@ export function CustomWidgetPreview({
                     type: "application/json",
                   });
                   const blobUrl = URL.createObjectURL(blob);
-                  window.open(blobUrl);
+                  window.open(blobUrl, "_blank", "noopener,noreferrer");
                   setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
                 }}
               >
@@ -167,7 +167,7 @@ function PreviewDisplay({ data }: { data: unknown }) {
 
   const Component = dataType ? displayComponents[dataType] : undefined;
   if (Component) {
-    return <Component data={typed} />;
+    return <Component data={typed} displayMode="advanced" width={320} height={240} />;
   }
 
   return (
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
new file mode 100644
index 000000000..d1b045802
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -0,0 +1,132 @@
+.focusScope {
+  height: 100%;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 198;
+  background: rgba(0, 0, 0, 0.64);
+  backdrop-filter: blur(6px) saturate(0.75);
+  touch-action: none;
+  animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.surface {
+  position: fixed;
+  z-index: 199;
+  pointer-events: auto;
+  overflow: hidden;
+  background: var(--mantine-color-body);
+  box-shadow: var(--mantine-shadow-lg);
+  overscroll-behavior: contain;
+  animation: focus-surface-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top left;
+}
+
+.backdropClosing {
+  animation: focus-backdrop-out 180ms ease-in forwards;
+}
+
+.surfaceClosing {
+  animation: focus-surface-out 180ms ease-in forwards;
+}
+
+.sourcePlaceholder {
+  pointer-events: none;
+}
+
+.surfaceHost {
+  width: 100%;
+  height: 100%;
+}
+
+.surfaceHostAdvanced {
+  position: fixed;
+  inset: 0;
+  z-index: 199;
+  width: auto;
+  height: auto;
+  pointer-events: none;
+}
+
+.surfaceControls {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.closeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.pinButton {
+  position: absolute;
+  top: 8px;
+  right: 52px;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.touchButton {
+  position: absolute;
+  right: 8px;
+  bottom: 8px;
+  z-index: 2;
+  display: none;
+  pointer-events: auto;
+}
+
+@media (pointer: coarse) {
+  .touchButton {
+    display: inline-flex;
+  }
+}
+
+@keyframes focus-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes focus-surface-in {
+  from {
+    transform: translate(var(--focus-translate-x), var(--focus-translate-y))
+      scale(var(--focus-scale-x), var(--focus-scale-y));
+    opacity: 0.72;
+  }
+}
+
+@keyframes focus-backdrop-out {
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes focus-surface-out {
+  to {
+    transform: translate(var(--focus-translate-x), var(--focus-translate-y))
+      scale(var(--focus-scale-x), var(--focus-scale-y));
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .backdrop,
+  .surface {
+    animation-duration: 1ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .backdrop {
+    backdrop-filter: none;
+    background: Canvas;
+    opacity: 0.8;
+  }
+}
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
new file mode 100644
index 000000000..79e4ff50d
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import type { PropsWithChildren } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Portal, RemoveScroll } from "@mantine/core";
+
+import { useEditMode } from "@homarr/boards/edit-mode";
+
+import classes from "./advanced-focus.module.css";
+import { isEscapeOwnedByNestedOverlay } from "./escape";
+import type { FocusRect } from "./geometry";
+
+interface ActiveFocus {
+  itemId: string;
+  source: HTMLElement;
+  sourceRect: FocusRect;
+  pinned: boolean;
+  autofocusClose: boolean;
+  phase: "visible" | "closing";
+}
+
+interface AdvancedFocusContextValue {
+  active: ActiveFocus | null;
+  open: (itemId: string, source: HTMLElement, pinned?: boolean) => void;
+  close: (restoreFocus?: boolean) => void;
+  dismiss: (itemId: string) => void;
+  pin: (autofocusClose?: boolean) => void;
+  hover: (itemId: string, source: HTMLElement) => void;
+  leave: (itemId: string) => void;
+}
+
+const AdvancedFocusContext = createContext<AdvancedFocusContextValue | null>(null);
+const HOVER_DELAY_MS = 150;
+const CLOSE_DURATION_MS = 180;
+
+const isEditableTarget = (target: EventTarget | null) =>
+  target instanceof HTMLElement &&
+  (target.matches("input, textarea, select, [contenteditable='true']") || target.isContentEditable);
+
+export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
+  const [isEditMode] = useEditMode();
+  const [active, setActive] = useState<ActiveFocus | null>(null);
+  const activeRef = useRef<ActiveFocus | null>(null);
+  const hoveredRef = useRef<{ itemId: string; source: HTMLElement } | null>(null);
+  const shiftHeldRef = useRef(false);
+  const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelHoverTimer = useCallback(() => {
+    if (hoverTimerRef.current === null) return;
+    clearTimeout(hoverTimerRef.current);
+    hoverTimerRef.current = null;
+  }, []);
+
+  const updateActive = useCallback((next: ActiveFocus | null) => {
+    activeRef.current = next;
+    setActive(next);
+  }, []);
+
+  const cancelCloseTimer = useCallback(() => {
+    if (closeTimerRef.current === null) return;
+    clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+
+  const open = useCallback(
+    (itemId: string, source: HTMLElement, pinned = false) => {
+      if (isEditMode) return;
+      cancelHoverTimer();
+      cancelCloseTimer();
+      const rect = source.getBoundingClientRect();
+      updateActive({
+        itemId,
+        source,
+        sourceRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
+        pinned,
+        autofocusClose: pinned,
+        phase: "visible",
+      });
+    },
+    [cancelCloseTimer, cancelHoverTimer, isEditMode, updateActive],
+  );
+
+  const close = useCallback(
+    (restoreFocus = true) => {
+      cancelHoverTimer();
+      const current = activeRef.current;
+      if (!current || current.phase === "closing") return;
+      updateActive({ ...current, phase: "closing" });
+      const closeDuration = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : CLOSE_DURATION_MS;
+      closeTimerRef.current = setTimeout(() => {
+        closeTimerRef.current = null;
+        updateActive(null);
+        if (restoreFocus && current.source.isConnected) requestAnimationFrame(() => current.source.focus());
+      }, closeDuration);
+    },
+    [cancelHoverTimer, updateActive],
+  );
+
+  const startHoverTimer = useCallback(() => {
+    cancelHoverTimer();
+    const hovered = hoveredRef.current;
+    if (!hovered || !shiftHeldRef.current || activeRef.current) return;
+    hoverTimerRef.current = setTimeout(() => open(hovered.itemId, hovered.source), HOVER_DELAY_MS);
+  }, [cancelHoverTimer, open]);
+
+  const hover = useCallback(
+    (itemId: string, source: HTMLElement) => {
+      hoveredRef.current = { itemId, source };
+      startHoverTimer();
+    },
+    [startHoverTimer],
+  );
+
+  const leave = useCallback(
+    (itemId: string) => {
+      if (hoveredRef.current?.itemId === itemId) hoveredRef.current = null;
+      cancelHoverTimer();
+    },
+    [cancelHoverTimer],
+  );
+
+  const dismiss = useCallback(
+    (itemId: string) => {
+      if (activeRef.current?.itemId !== itemId) return;
+      cancelHoverTimer();
+      cancelCloseTimer();
+      updateActive(null);
+    },
+    [cancelCloseTimer, cancelHoverTimer, updateActive],
+  );
+
+  const pin = useCallback(
+    (autofocusClose = false) => {
+      const current = activeRef.current;
+      if (!current || current.pinned || current.phase === "closing") return;
+      updateActive({ ...current, pinned: true, autofocusClose });
+    },
+    [updateActive],
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && activeRef.current) {
+        const advancedSurface = document.querySelector(`.${classes.surface}`);
+        if (event.defaultPrevented || event.isComposing || isEscapeOwnedByNestedOverlay(event.target, advancedSurface))
+          return;
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isEditMode) return;
+      if (event.key !== "Shift" || event.repeat || isEditableTarget(event.target)) return;
+      if (activeRef.current?.pinned) return;
+      shiftHeldRef.current = true;
+      startHoverTimer();
+    };
+    const handleKeyUp = (event: KeyboardEvent) => {
+      if (event.key !== "Shift") return;
+      shiftHeldRef.current = false;
+      cancelHoverTimer();
+      if (activeRef.current && !activeRef.current.pinned) close(false);
+    };
+    const handleBlur = () => {
+      shiftHeldRef.current = false;
+      cancelHoverTimer();
+      if (activeRef.current && !activeRef.current.pinned) close(false);
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+      window.removeEventListener("blur", handleBlur);
+      cancelHoverTimer();
+      cancelCloseTimer();
+    };
+  }, [cancelCloseTimer, cancelHoverTimer, close, isEditMode, startHoverTimer]);
+
+  useEffect(() => {
+    if (isEditMode && activeRef.current) close(false);
+  }, [close, isEditMode]);
+
+  const value = useMemo(
+    () => ({ active, open, close, dismiss, pin, hover, leave }),
+    [active, close, dismiss, hover, leave, open, pin],
+  );
+
+  return (
+    <AdvancedFocusContext.Provider value={value}>
+      <RemoveScroll enabled={active !== null} className={classes.focusScope}>
+        {children}
+      </RemoveScroll>
+      {active && (
+        <Portal>
+          <Box
+            className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
+            onPointerDown={() => close()}
+            aria-hidden
+          />
+        </Portal>
+      )}
+    </AdvancedFocusContext.Provider>
+  );
+};
+
+export const useAdvancedFocus = () => {
+  const context = useContext(AdvancedFocusContext);
+  if (!context) throw new Error("useAdvancedFocus must be used within BoardAdvancedFocusProvider");
+  return context;
+};
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
new file mode 100644
index 000000000..dc123eeff
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
@@ -0,0 +1,54 @@
+import { describe, expect, test } from "vitest";
+
+import { isEscapeOwnedByNestedOverlay } from "./escape";
+
+describe("isEscapeOwnedByNestedOverlay", () => {
+  test("allows Escape from the advanced surface itself", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const button = document.createElement("button");
+    surface.append(button);
+
+    expect(isEscapeOwnedByNestedOverlay(button, surface)).toBe(false);
+  });
+
+  test("leaves Escape to a nested Mantine modal", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const modal = document.createElement("section");
+    modal.setAttribute("role", "dialog");
+    const input = document.createElement("input");
+    modal.append(input);
+
+    expect(isEscapeOwnedByNestedOverlay(input, surface)).toBe(true);
+  });
+
+  test.each(["menu", "listbox"])("leaves Escape to a nested %s overlay", (role) => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const overlay = document.createElement("div");
+    overlay.setAttribute("role", role);
+    const target = document.createElement("button");
+    overlay.append(target);
+
+    expect(isEscapeOwnedByNestedOverlay(target, surface)).toBe(true);
+  });
+
+  test("honors Mantine's stop-propagation marker for menus and comboboxes", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const target = document.createElement("button");
+    target.setAttribute("data-mantine-stop-propagation", "true");
+    surface.append(target);
+
+    expect(isEscapeOwnedByNestedOverlay(target, surface)).toBe(true);
+  });
+
+  test("does not mistake the compact widget source for a nested overlay", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const source = document.createElement("button");
+
+    expect(isEscapeOwnedByNestedOverlay(source, surface)).toBe(false);
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.ts b/apps/nextjs/src/components/board/advanced-focus/escape.ts
new file mode 100644
index 000000000..47bd86dd1
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.ts
@@ -0,0 +1,13 @@
+const escapeOwnerSelector = [
+  '[data-mantine-stop-propagation="true"]',
+  '[role="dialog"]',
+  '[role="menu"]',
+  '[role="listbox"]',
+].join(", ");
+
+export const isEscapeOwnedByNestedOverlay = (target: EventTarget | null, advancedSurface: Element | null) => {
+  if (!(target instanceof Element)) return false;
+
+  const escapeOwner = target.closest(escapeOwnerSelector);
+  return escapeOwner !== null && escapeOwner !== advancedSurface;
+};
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
new file mode 100644
index 000000000..4b5ee0b89
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+
+import { getAdvancedFocusRect } from "./geometry";
+
+describe("getAdvancedFocusRect", () => {
+  it("expands a widget and keeps it inside the viewport", () => {
+    expect(getAdvancedFocusRect({ left: 10, top: 10, width: 300, height: 200 }, { width: 1200, height: 800 })).toEqual({
+      left: 240,
+      top: 190,
+      width: 720,
+      height: 480,
+    });
+  });
+
+  it("uses the available viewport on small screens", () => {
+    expect(getAdvancedFocusRect({ left: 0, top: 0, width: 400, height: 500 }, { width: 390, height: 700 })).toEqual({
+      left: 8,
+      top: 68,
+      width: 374,
+      height: 624,
+    });
+  });
+
+  it("keeps controls below the fixed board header on short screens", () => {
+    const rect = getAdvancedFocusRect({ left: 0, top: 0, width: 500, height: 500 }, { width: 1366, height: 768 });
+
+    expect(rect.top).toBeGreaterThanOrEqual(84);
+    expect(rect.top + rect.height).toBeLessThanOrEqual(744);
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
new file mode 100644
index 000000000..78bdda016
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
@@ -0,0 +1,26 @@
+import { appShellHeaderHeight } from "../../layout/constants";
+
+export interface FocusRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+export const getAdvancedFocusRect = (source: FocusRect, viewport: { width: number; height: number }): FocusRect => {
+  const margin = viewport.width < 640 ? 8 : 24;
+  const availableWidth = Math.max(0, viewport.width - margin * 2);
+  const availableHeight = Math.max(0, viewport.height - appShellHeaderHeight - margin * 2);
+  const width = Math.min(availableWidth, Math.max(source.width, Math.min(960, source.width * 2.4)));
+  const height = Math.min(availableHeight, Math.max(source.height, Math.min(720, source.height * 2.4)));
+
+  return {
+    left: Math.max(margin, (viewport.width - width) / 2),
+    top: Math.max(
+      appShellHeaderHeight + margin,
+      appShellHeaderHeight + (viewport.height - appShellHeaderHeight - height) / 2,
+    ),
+    width,
+    height,
+  };
+};
diff --git a/apps/nextjs/src/components/board/items/actions/create-item.ts b/apps/nextjs/src/components/board/items/actions/create-item.ts
index d4b2cb24d..0778bf864 100644
--- a/apps/nextjs/src/components/board/items/actions/create-item.ts
+++ b/apps/nextjs/src/components/board/items/actions/create-item.ts
@@ -3,35 +3,48 @@ import { createId } from "@homarr/common";
 import type { Modify } from "@homarr/common/types";
 import type { WidgetKind } from "@homarr/definitions";
 import { widgetDefaultSizes } from "@homarr/definitions";
+import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
 
 import type { Board, EmptySection, Item, ItemLayout } from "~/app/[locale]/boards/_types";
-import { getFirstEmptyPosition } from "./empty-position";
+import { getFirstEmptyPosition, getNearestEmptyPosition } from "./empty-position";
 import { getSectionElements } from "./section-elements";
 
+export interface BoardPlacementHint {
+  sectionId: string;
+  layoutId: string;
+  xOffset: number;
+  yOffset: number;
+}
+
 export interface CreateItemInput {
   id?: string;
   kind: WidgetKind;
   options?: Record<string, unknown>;
   integrationIds?: string[];
+  advancedOptions?: BoardItemAdvancedOptions;
+  placement?: BoardPlacementHint;
 }
 
 export const createItemCallback =
-  ({ id, kind, options = {}, integrationIds = [] }: CreateItemInput) =>
+  ({ id, kind, options = {}, integrationIds = [], advancedOptions, placement }: CreateItemInput) =>
   (previous: Board): Board => {
     const firstSection = previous.sections
       .filter((section): section is EmptySection => section.kind === "empty")
       .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset)
       .at(0);
 
-    if (!firstSection) return previous;
+    if (!firstSection && !placement) return previous;
+
+    const defaultSectionId = firstSection?.id ?? placement?.sectionId;
+    if (!defaultSectionId) return previous;
 
     const widget = {
       id: id ?? createId(),
       kind,
       options,
-      layouts: createItemLayouts(previous, firstSection, kind),
+      layouts: createItemLayouts(previous, defaultSectionId, kind, placement),
       integrationIds,
-      advancedOptions: {
+      advancedOptions: advancedOptions ?? {
         title: null,
         customCssClasses: [],
         borderColor: "",
@@ -53,16 +66,31 @@ const defaultItemSize = { width: 1, height: 1 };
 
 const getWidgetItemSize = (kind: WidgetKind) => widgetDefaultSizes[kind] ?? defaultItemSize;
 
-const createItemLayouts = (board: Board, currentSection: EmptySection, kind: WidgetKind): ItemLayout[] => {
+const createItemLayouts = (
+  board: Board,
+  defaultSectionId: string,
+  kind: WidgetKind,
+  placement?: BoardPlacementHint,
+): ItemLayout[] => {
   const layouts = getBoardLayouts(board);
   const itemSize = getWidgetItemSize(kind);
 
   return layouts.map((layoutId) => {
     const boardLayout = board.layouts.find((layout) => layout.id === layoutId);
-    const elements = getSectionElements(board, { sectionId: currentSection.id, layoutId });
+    const targetSectionId = placement?.layoutId === layoutId ? placement.sectionId : defaultSectionId;
+    const elements = getSectionElements(board, { sectionId: targetSectionId, layoutId });
 
+    const targetSection = board.sections.find((section) => section.id === targetSectionId);
+    const dynamicLayout =
+      targetSection?.kind === "dynamic"
+        ? targetSection.layouts.find((layout) => layout.layoutId === layoutId)
+        : undefined;
+    const columnCount = dynamicLayout?.width ?? boardLayout?.columnCount ?? 1;
+    const rowCount = dynamicLayout?.height ?? 9999;
     const emptyPosition = boardLayout
-      ? getFirstEmptyPosition(elements, boardLayout.columnCount, 9999, itemSize)
+      ? placement?.layoutId === layoutId
+        ? getNearestEmptyPosition(elements, columnCount, rowCount, placement, itemSize)
+        : getFirstEmptyPosition(elements, columnCount, rowCount, itemSize)
       : { xOffset: 0, yOffset: 0 };
 
     if (!emptyPosition) {
@@ -73,7 +101,7 @@ const createItemLayouts = (board: Board, currentSection: EmptySection, kind: Wid
       width: itemSize.width,
       height: itemSize.height,
       ...emptyPosition,
-      sectionId: currentSection.id,
+      sectionId: targetSectionId,
       layoutId,
     };
   });
diff --git a/apps/nextjs/src/components/board/items/actions/empty-position.ts b/apps/nextjs/src/components/board/items/actions/empty-position.ts
index fd91c98d2..ec1803545 100644
--- a/apps/nextjs/src/components/board/items/actions/empty-position.ts
+++ b/apps/nextjs/src/components/board/items/actions/empty-position.ts
@@ -7,19 +7,56 @@ export const getFirstEmptyPosition = (
   size: { width: number; height: number } = { width: 1, height: 1 },
 ) => {
   for (let yOffset = 0; yOffset < rowCount + 1 - size.height; yOffset++) {
-    for (let xOffset = 0; xOffset < columnCount; xOffset++) {
-      const isOccupied = elements.some(
-        (element) =>
-          element.yOffset < yOffset + size.height &&
-          element.yOffset + element.height > yOffset &&
-          element.xOffset < xOffset + size.width &&
-          element.xOffset + element.width > xOffset,
-      );
-
-      if (!isOccupied) {
+    for (let xOffset = 0; xOffset < columnCount + 1 - size.width; xOffset++) {
+      if (isPositionEmpty(elements, { xOffset, yOffset }, size)) {
         return { xOffset, yOffset };
       }
     }
   }
   return undefined;
 };
+
+export const getNearestEmptyPosition = (
+  elements: Pick<SectionItem, "yOffset" | "xOffset" | "width" | "height">[],
+  columnCount: number,
+  rowCount: number,
+  preferred: { xOffset: number; yOffset: number },
+  size: { width: number; height: number },
+) => {
+  const maxX = columnCount - size.width;
+  const maxY = rowCount - size.height;
+  if (maxX < 0 || maxY < 0) return undefined;
+
+  const clamped = {
+    xOffset: Math.min(Math.max(0, preferred.xOffset), maxX),
+    yOffset: Math.min(Math.max(0, preferred.yOffset), maxY),
+  };
+  if (isPositionEmpty(elements, clamped, size)) return clamped;
+
+  const lastOccupiedRow = elements.reduce((maximum, element) => Math.max(maximum, element.yOffset + element.height), 0);
+  const searchMaxY = Math.min(maxY, Math.max(clamped.yOffset + 20, lastOccupiedRow + size.height));
+  let best: { xOffset: number; yOffset: number; distance: number } | undefined;
+
+  for (let yOffset = 0; yOffset <= searchMaxY; yOffset++) {
+    for (let xOffset = 0; xOffset <= maxX; xOffset++) {
+      if (!isPositionEmpty(elements, { xOffset, yOffset }, size)) continue;
+      const distance = Math.abs(xOffset - clamped.xOffset) + Math.abs(yOffset - clamped.yOffset);
+      if (!best || distance < best.distance) best = { xOffset, yOffset, distance };
+    }
+  }
+
+  return best && { xOffset: best.xOffset, yOffset: best.yOffset };
+};
+
+const isPositionEmpty = (
+  elements: Pick<SectionItem, "yOffset" | "xOffset" | "width" | "height">[],
+  position: { xOffset: number; yOffset: number },
+  size: { width: number; height: number },
+) =>
+  !elements.some(
+    (element) =>
+      element.yOffset < position.yOffset + size.height &&
+      element.yOffset + element.height > position.yOffset &&
+      element.xOffset < position.xOffset + size.width &&
+      element.xOffset + element.width > position.xOffset,
+  );
diff --git a/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts b/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts
index e2a0ff93c..f09383171 100644
--- a/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/create-item.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 
 import * as boardContext from "@homarr/boards/context";
 
@@ -10,6 +10,10 @@ import { ItemMockBuilder } from "./mocks/item-mock";
 import { LayoutMockBuilder } from "./mocks/layout-mock";
 
 describe("item actions create-item", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
   test("should add it to first section", () => {
     // Arrange
     const itemKind = "clock";
@@ -108,4 +112,58 @@ describe("item actions create-item", () => {
       { height: 1, width: 1 },
     );
   });
+
+  test("uses the clicked section and nearest cell for the active layout", () => {
+    const activeLayoutId = "desktop";
+    const secondaryLayoutId = "mobile";
+    const rootSectionId = "root";
+    const targetSectionId = "target";
+    const activeLayout = new LayoutMockBuilder({ id: activeLayoutId, columnCount: 12 }).build();
+    const secondaryLayout = new LayoutMockBuilder({ id: secondaryLayoutId, columnCount: 4 }).build();
+    const targetSection = new DynamicSectionMockBuilder({ id: targetSectionId })
+      .addLayout({
+        layoutId: activeLayoutId,
+        parentSectionId: rootSectionId,
+        width: 4,
+        height: 3,
+      })
+      .build();
+    const board = new BoardMockBuilder()
+      .addLayout(activeLayout)
+      .addLayout(secondaryLayout)
+      .addEmptySection({ id: rootSectionId, yOffset: 0 })
+      .addSection(targetSection)
+      .build();
+
+    vi.spyOn(boardContext, "getBoardLayouts").mockReturnValue([activeLayoutId, secondaryLayoutId]);
+
+    const result = createItemCallback({
+      kind: "clock",
+      placement: {
+        sectionId: targetSectionId,
+        layoutId: activeLayoutId,
+        xOffset: 2,
+        yOffset: 1,
+      },
+    })(board);
+
+    expect(result.items.at(0)?.layouts).toEqual([
+      {
+        layoutId: activeLayoutId,
+        sectionId: targetSectionId,
+        xOffset: 2,
+        yOffset: 1,
+        width: 1,
+        height: 1,
+      },
+      {
+        layoutId: secondaryLayoutId,
+        sectionId: rootSectionId,
+        xOffset: 0,
+        yOffset: 0,
+        width: 1,
+        height: 1,
+      },
+    ]);
+  });
 });
diff --git a/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts b/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts
index fcc194618..cc505157b 100644
--- a/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts
+++ b/apps/nextjs/src/components/board/items/actions/test/empty-position.spec.ts
@@ -1,7 +1,7 @@
 import { describe, expect, test } from "vitest";
 
 import type { Item } from "~/app/[locale]/boards/_types";
-import { getFirstEmptyPosition } from "../empty-position";
+import { getFirstEmptyPosition, getNearestEmptyPosition } from "../empty-position";
 
 describe("get first empty position", () => {
   test.each([
@@ -106,6 +106,37 @@ describe("get first empty position", () => {
 
     expect(result).toEqual(expectedX !== undefined ? { xOffset: expectedX, yOffset: expectedY } : undefined);
   });
+
+  test("does not place a wide item beyond the right edge", () => {
+    const elements = createElementsFromLayout([["a", "a", "a", " "]]);
+
+    expect(getFirstEmptyPosition(elements, 4, undefined, { width: 2, height: 1 })).toEqual({
+      xOffset: 0,
+      yOffset: 1,
+    });
+  });
+});
+
+describe("get nearest empty position", () => {
+  test("keeps the preferred cell when it fits", () => {
+    expect(getNearestEmptyPosition([], 4, 4, { xOffset: 2, yOffset: 1 }, { width: 1, height: 1 })).toEqual({
+      xOffset: 2,
+      yOffset: 1,
+    });
+  });
+
+  test("chooses the nearest available cell when the preferred cell is occupied", () => {
+    const elements = [{ xOffset: 2, yOffset: 1, width: 1, height: 1 }];
+
+    expect(getNearestEmptyPosition(elements, 4, 4, { xOffset: 2, yOffset: 1 }, { width: 1, height: 1 })).toEqual({
+      xOffset: 2,
+      yOffset: 0,
+    });
+  });
+
+  test("returns undefined when the item cannot fit within a bounded section", () => {
+    expect(getNearestEmptyPosition([], 1, 1, { xOffset: 0, yOffset: 0 }, { width: 2, height: 1 })).toBeUndefined();
+  });
 });
 
 const createElementsFromLayout = (layout: string[][]) => {
diff --git a/apps/nextjs/src/components/board/items/item-actions.tsx b/apps/nextjs/src/components/board/items/item-actions.tsx
index 29b5615e2..5344a2289 100644
--- a/apps/nextjs/src/components/board/items/item-actions.tsx
+++ b/apps/nextjs/src/components/board/items/item-actions.tsx
@@ -3,6 +3,7 @@ import { useCallback } from "react";
 import { useUpdateBoard } from "@homarr/boards/updater";
 import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
 
+import type { Board } from "~/app/[locale]/boards/_types";
 import type { CreateItemInput } from "./actions/create-item";
 import { createItemCallback } from "./actions/create-item";
 import type { DuplicateItemInput } from "./actions/duplicate-item";
@@ -34,7 +35,12 @@ export const useItemActions = () => {
 
   const createItem = useCallback(
     (input: CreateItemInput) => {
-      updateBoard(createItemCallback(input));
+      let nextBoard: Board | undefined;
+      updateBoard((previous) => {
+        nextBoard = createItemCallback(input)(previous);
+        return nextBoard;
+      });
+      return nextBoard;
     },
     [updateBoard],
   );
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index ad0f3a305..5ddd9b613 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,7 +1,8 @@
-import type { MutableRefObject } from "react";
-import { useRef } from "react";
-import { Badge, Card } from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
+import type { CSSProperties, KeyboardEvent, MutableRefObject, PointerEvent } from "react";
+import { useEffect, useRef } from "react";
+import { ActionIcon, Badge, Box, Card, FocusTrap } from "@mantine/core";
+import { useElementSize, useMergedRef, useViewportSize } from "@mantine/hooks";
+import { IconMaximize, IconPin, IconX } from "@tabler/icons-react";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
@@ -10,10 +11,14 @@ import { ErrorBoundary } from "react-error-boundary";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useSettings } from "@homarr/settings";
+import { useI18n } from "@homarr/translation/client";
 import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
+import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
+import { useAdvancedFocus } from "../advanced-focus/context";
+import { getAdvancedFocusRect } from "../advanced-focus/geometry";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
@@ -33,35 +38,160 @@ const getOverflowFromKind = (kind: SectionItem["kind"]) => {
 
 export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   const { ref, width, height } = useElementSize<HTMLDivElement>();
+  const sourceRef = useRef<HTMLDivElement>(null);
+  const mergedRef = useMergedRef(ref, sourceRef);
+  const { width: viewportWidth, height: viewportHeight } = useViewportSize();
   const board = useRequiredBoard();
+  const t = useI18n();
+  const [isEditMode] = useEditMode();
   const widgetStateRef = useRef<Record<string, unknown> | null>(null);
+  const { active, open, close, dismiss, pin, hover, leave } = useAdvancedFocus();
+  const activeFocus = active?.itemId === item.id ? active : null;
+  const isAdvanced = activeFocus !== null;
+  const advancedRect = activeFocus
+    ? getAdvancedFocusRect(activeFocus.sourceRect, { width: viewportWidth, height: viewportHeight })
+    : null;
+
+  // Responsive layout changes remount grid items. Never leave their focus backdrop orphaned.
+  useEffect(() => () => dismiss(item.id), [dismiss, item.id]);
+
+  const openPinned = () => {
+    if (sourceRef.current) open(item.id, sourceRef.current, true);
+  };
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.currentTarget !== event.target || event.key !== "Enter" || !event.shiftKey || isEditMode) return;
+    event.preventDefault();
+    openPinned();
+  };
+  const handleSurfacePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (!activeFocus || activeFocus.pinned) return;
+
+    const target =
+      event.target instanceof Element
+        ? event.target.closest<HTMLElement>(
+            "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), iframe, [tabindex]:not([tabindex='-1']), [contenteditable='true']",
+          )
+        : null;
+    const alreadyAutofocused = target?.hasAttribute("data-autofocus") ?? false;
+    if (target && !alreadyAutofocused) target.setAttribute("data-autofocus", "true");
+    pin(false);
+    if (target && !alreadyAutofocused) {
+      window.setTimeout(() => target.removeAttribute("data-autofocus"), 250);
+    }
+  };
 
   return (
     <>
-      <WidgetContextMenu item={item} widgetStateRef={widgetStateRef}>
-        <Card
-          ref={ref}
-          className={combineClasses(
-            classes.itemCard,
-            `${item.kind}-wrapper`,
-            "grid-stack-item-content",
-            item.advancedOptions.customCssClasses.join(" "),
-          )}
-          radius={board.itemRadius}
-          styles={{
-            root: {
-              "--opacity": board.opacity / 100,
-              containerType: "size",
-              overflow: getOverflowFromKind(item.kind),
-              "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
-            },
-          }}
-          p={0}
+      <WidgetContextMenu item={item} widgetStateRef={widgetStateRef} sourceRef={sourceRef}>
+        <Box
+          ref={mergedRef}
+          tabIndex={isEditMode ? undefined : 0}
+          aria-haspopup="dialog"
+          aria-expanded={isAdvanced}
+          aria-keyshortcuts="Shift+Enter"
+          onKeyDown={handleKeyDown}
+          onPointerEnter={() => sourceRef.current && hover(item.id, sourceRef.current)}
+          onPointerLeave={() => leave(item.id)}
+          className={combineClasses("grid-stack-item-content", isAdvanced && advancedFocusClasses.sourcePlaceholder)}
         >
-          <InnerContent item={item} width={width} height={height} widgetStateRef={widgetStateRef} />
-        </Card>
+          <div
+            className={combineClasses(
+              advancedFocusClasses.surfaceHost,
+              isAdvanced && advancedFocusClasses.surfaceHostAdvanced,
+            )}
+          >
+            <FocusTrap active={Boolean(activeFocus?.pinned)}>
+              <Card
+                role={isAdvanced ? "dialog" : undefined}
+                aria-modal={activeFocus?.pinned || undefined}
+                aria-label={
+                  isAdvanced ? t("item.advancedFocus.dialog", { widget: t(`widget.${item.kind}.name`) }) : undefined
+                }
+                radius={board.itemRadius}
+                p={0}
+                h={isAdvanced ? undefined : "100%"}
+                w={isAdvanced ? undefined : "100%"}
+                className={combineClasses(
+                  classes.itemCard,
+                  `${item.kind}-wrapper`,
+                  isAdvanced && advancedFocusClasses.surface,
+                  activeFocus?.phase === "closing" && advancedFocusClasses.surfaceClosing,
+                  item.advancedOptions.customCssClasses.join(" "),
+                )}
+                onPointerDownCapture={isAdvanced ? handleSurfacePointerDown : undefined}
+                styles={{
+                  root: {
+                    "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
+                    containerType: "size",
+                    overflow: getOverflowFromKind(item.kind),
+                    "--border-color":
+                      item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+                  },
+                }}
+                style={
+                  activeFocus && advancedRect
+                    ? ({
+                        left: advancedRect.left,
+                        top: advancedRect.top,
+                        width: advancedRect.width,
+                        height: advancedRect.height,
+                        "--focus-translate-x": `${activeFocus.sourceRect.left - advancedRect.left}px`,
+                        "--focus-translate-y": `${activeFocus.sourceRect.top - advancedRect.top}px`,
+                        "--focus-scale-x": activeFocus.sourceRect.width / advancedRect.width,
+                        "--focus-scale-y": activeFocus.sourceRect.height / advancedRect.height,
+                      } as CSSProperties)
+                    : undefined
+                }
+              >
+                <div className={advancedFocusClasses.surfaceControls}>
+                  {isAdvanced && (
+                    <ActionIcon
+                      data-autofocus={activeFocus.pinned && activeFocus.autofocusClose ? true : undefined}
+                      className={advancedFocusClasses.closeButton}
+                      variant="default"
+                      size="lg"
+                      aria-label={t("item.advancedFocus.close")}
+                      onClick={() => close()}
+                    >
+                      <IconX size={18} />
+                    </ActionIcon>
+                  )}
+                  {isAdvanced && (
+                    <ActionIcon
+                      className={advancedFocusClasses.pinButton}
+                      variant={activeFocus.pinned ? "filled" : "default"}
+                      aria-label={activeFocus.pinned ? t("item.advancedFocus.pinned") : t("item.advancedFocus.pin")}
+                      aria-pressed={activeFocus.pinned}
+                      onClick={(event) => pin(event.detail === 0)}
+                    >
+                      <IconPin size={18} />
+                    </ActionIcon>
+                  )}
+                  {!isEditMode && !isAdvanced && (
+                    <ActionIcon
+                      className={advancedFocusClasses.touchButton}
+                      variant="default"
+                      size="lg"
+                      aria-label={t("item.advancedFocus.open")}
+                      onClick={openPinned}
+                    >
+                      <IconMaximize size={18} />
+                    </ActionIcon>
+                  )}
+                </div>
+                <InnerContent
+                  item={item}
+                  width={advancedRect?.width ?? width}
+                  height={advancedRect?.height ?? height}
+                  widgetStateRef={widgetStateRef}
+                  displayMode={isAdvanced ? "advanced" : "compact"}
+                />
+              </Card>
+            </FocusTrap>
+          </div>
+        </Box>
       </WidgetContextMenu>
-      {item.advancedOptions.title?.trim() && (
+      {!isAdvanced && item.advancedOptions.title?.trim() && (
         <Badge
           pos="absolute"
           // It's 4 because of the mantine-react-table that has z-index 3
@@ -91,6 +221,7 @@ interface InnerContentProps {
   width: number;
   height: number;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
+  displayMode: "compact" | "advanced";
 }
 
 const InnerContent = ({ item, ...dimensions }: InnerContentProps) => {
diff --git a/apps/nextjs/src/components/board/items/item-select-modal.module.css b/apps/nextjs/src/components/board/items/item-select-modal.module.css
new file mode 100644
index 000000000..79675c882
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/item-select-modal.module.css
@@ -0,0 +1,25 @@
+.selectionCard {
+  overflow: hidden;
+}
+
+.selectionActions {
+  opacity: 1;
+  transition: opacity 150ms ease;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .selectionActions {
+    opacity: 0;
+  }
+
+  .selectionCard:hover .selectionActions,
+  .selectionCard:focus-within .selectionActions {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .selectionActions {
+    transition: none;
+  }
+}
diff --git a/apps/nextjs/src/components/board/items/item-select-modal.tsx b/apps/nextjs/src/components/board/items/item-select-modal.tsx
index 2ac349c6d..d7994d77b 100644
--- a/apps/nextjs/src/components/board/items/item-select-modal.tsx
+++ b/apps/nextjs/src/components/board/items/item-select-modal.tsx
@@ -3,10 +3,12 @@ import { Avatar, Box, Button, Card, Center, Divider, Group, Image, Stack, Text,
 import { IconApi } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { usePersistBoard } from "@homarr/boards/updater";
 import { createId, objectEntries } from "@homarr/common";
 import { getIconUrl, getIntegrationName } from "@homarr/definitions";
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { createModal, modalSizeSelect, useModalAction } from "@homarr/modals";
+import { showErrorNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
 import { SelectGridLayout, selectGridCardHeight } from "@homarr/ui";
@@ -15,15 +17,47 @@ import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/wid
 import { WidgetEditModal } from "@homarr/widgets/modals";
 
 import { useItemActions } from "./item-actions";
+import type { BoardPlacementHint, CreateItemInput } from "./actions/create-item";
+import { createItemCallback } from "./actions/create-item";
+import classes from "./item-select-modal.module.css";
 
-export const ItemSelectModal = createModal<void>(({ actions }) => {
+interface ItemSelectModalProps {
+  placement?: BoardPlacementHint;
+  board: { id: string; name: string };
+  persistImmediately: boolean;
+}
+
+export const ItemSelectModal = createModal<ItemSelectModalProps>(({ actions, innerProps }) => {
   const [search, setSearch] = useState("");
   const t = useI18n();
-  const { createItem, updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations } = useItemActions();
+  const { createItem } = useItemActions();
   const { openModal: openEditModal } = useModalAction(WidgetEditModal);
   const { data: integrationData } = clientApi.integration.all.useQuery();
   const { data: customWidgetDefs } = clientApi.customWidget.all.useQuery();
   const settings = useSettings();
+  const { updateAndPersistBoard } = usePersistBoard(innerProps.board);
+
+  const createAndPersist = (input: CreateItemInput) => {
+    try {
+      if (!innerProps.persistImmediately) {
+        createItem(input);
+        return;
+      }
+      updateAndPersistBoard(createItemCallback(input), {
+        onError: () => {
+          showErrorNotification({
+            title: t("item.create.notification.error.title"),
+            message: t("item.create.notification.error.message"),
+          });
+        },
+      });
+    } catch {
+      showErrorNotification({
+        title: t("item.create.notification.error.title"),
+        message: t("item.create.notification.error.message"),
+      });
+    }
+  };
 
   const availableKinds = useMemo(() => new Set((integrationData ?? []).map((i) => i.kind)), [integrationData]);
 
@@ -69,8 +103,13 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   const handleAddCustomWidget = (definitionId: string) => {
     const itemId = createId();
     const defaultOptions = reduceWidgetOptionsWithDefaultValues("customApi", settings);
-    createItem({ id: itemId, kind: "customApi", integrationIds: [] });
-    updateItemOptions({ itemId, newOptions: { ...defaultOptions, definitionId } });
+    createAndPersist({
+      id: itemId,
+      kind: "customApi",
+      integrationIds: [],
+      options: { ...defaultOptions, definitionId },
+      placement: innerProps.placement,
+    });
     actions.closeModal();
   };
 
@@ -88,7 +127,6 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
     const itemId = createId();
     const defaultOptions = reduceWidgetOptionsWithDefaultValues(kind, settings);
 
-    createItem({ id: itemId, kind, integrationIds });
     actions.closeModal();
 
     openEditModal(
@@ -100,13 +138,19 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
           integrationIds,
         },
         onSuccessfulEdit: ({ options, integrationIds: newIntegrationIds, advancedOptions }) => {
-          updateItemOptions({ itemId, newOptions: options });
-          updateItemAdvancedOptions({ itemId, newAdvancedOptions: advancedOptions });
-          updateItemIntegrations({ itemId, newIntegrations: newIntegrationIds });
+          createAndPersist({
+            id: itemId,
+            kind,
+            options,
+            integrationIds: newIntegrationIds,
+            advancedOptions,
+            placement: innerProps.placement,
+          });
         },
         integrationData: matchingIntegrations,
         integrationSupport: hasIntegrationSupport,
         settings,
+        boardId: innerProps.board.id,
       },
       {
         title: (titleT) => `${titleT("item.edit.title")} - ${titleT(`widget.${kind}.name`)}`,
@@ -144,19 +188,18 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
             style={{ gridColumn: "1 / -1" }}
           />
           {filteredCustomWidgets.map((def) => (
-            <Card
-              key={def.id}
-              h={selectGridCardHeight}
-              withBorder
-              pos="relative"
-              style={{ overflow: "hidden", "--_hover-opacity": "0" }}
-              onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")}
-              onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")}
-            >
+            <Card key={def.id} h={selectGridCardHeight} withBorder pos="relative" className={classes.selectionCard}>
               <Stack h="100%" gap="xs">
                 <Group gap="sm" wrap="nowrap" align="flex-start">
                   {def.iconUrl ? (
-                    <Image src={def.iconUrl} w={22} h={22} fit="contain" style={{ flexShrink: 0, marginTop: 2 }} />
+                    <Image
+                      src={def.iconUrl}
+                      alt=""
+                      w={22}
+                      h={22}
+                      fit="contain"
+                      style={{ flexShrink: 0, marginTop: 2 }}
+                    />
                   ) : (
                     <IconApi size={22} style={{ flexShrink: 0, marginTop: 2 }} />
                   )}
@@ -174,9 +217,8 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
                 left={0}
                 right={0}
                 p="xs"
+                className={classes.selectionActions}
                 style={{
-                  opacity: "var(--_hover-opacity)",
-                  transition: "opacity 150ms ease",
                   background: "linear-gradient(transparent, var(--mantine-color-body) 30%)",
                 }}
               >
@@ -223,14 +265,11 @@ const WidgetItem = ({
       h={selectGridCardHeight}
       withBorder
       pos="relative"
+      className={classes.selectionCard}
       style={{
-        overflow: "hidden",
-        "--_hover-opacity": "0",
         borderColor: hasMatchingIntegration ? "var(--mantine-color-blue-6)" : undefined,
         borderWidth: hasMatchingIntegration ? 2 : undefined,
       }}
-      onMouseEnter={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "1")}
-      onMouseLeave={(e) => e.currentTarget.style.setProperty("--_hover-opacity", "0")}
     >
       <Stack h="100%" gap="xs">
         <Group gap="sm" wrap="nowrap" align="flex-start">
@@ -244,6 +283,11 @@ const WidgetItem = ({
             {item.description}
           </Text>
         </Tooltip>
+        {hasMatchingIntegration && (
+          <Text size="10px" c="blue.6" fw={600}>
+            {t("item.create.integrationAvailable")}
+          </Text>
+        )}
         <SupportedIntegrations integrations={item.supportedIntegrations} />
       </Stack>
       <Box
@@ -252,9 +296,8 @@ const WidgetItem = ({
         left={0}
         right={0}
         p="xs"
+        className={classes.selectionActions}
         style={{
-          opacity: "var(--_hover-opacity)",
-          transition: "opacity 150ms ease",
           background: "linear-gradient(transparent, var(--mantine-color-body) 30%)",
         }}
       >
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index 8520d6b89..d57161787 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -1,35 +1,40 @@
 "use client";
 
-import type { MutableRefObject, ReactNode } from "react";
-import { useCallback, useMemo } from "react";
+import type { MutableRefObject, ReactNode, RefObject } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Group, Loader, Menu, Switch, Text, Tooltip } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCircleCheck,
   IconCopy,
   IconLayoutKanban,
+  IconMaximize,
   IconRefresh,
   IconSettings,
   IconTrash,
 } from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
-import { useIsFetching, useQueryClient } from "@tanstack/react-query";
+import { partialMatchKey, useIsFetching, useQueryClient } from "@tanstack/react-query";
 
 import { clientApi } from "@homarr/api/client";
-import { useSession } from "@homarr/auth/client";
+import { useIntegrationsWithInteractAccess, useSession } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
+import { usePersistBoard } from "@homarr/boards/updater";
 import { useTimeAgo } from "@homarr/common";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
+import { showErrorNotification } from "@homarr/notifications";
 import { useSettings } from "@homarr/settings";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TranslationFunction } from "@homarr/translation";
 import type { WidgetContextMenuAction } from "@homarr/widgets";
-import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
+import { getWidgetQueryKeys, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
+import { useAdvancedFocus } from "../advanced-focus/context";
+import { useBoardPermissions } from "../permissions/client";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { ItemMoveModal } from "./item-move-modal";
@@ -37,13 +42,16 @@ import { ItemMoveModal } from "./item-move-modal";
 interface WidgetContextMenuProps {
   item: SectionItem;
   widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
+  sourceRef: RefObject<HTMLElement | null>;
   children: ReactNode;
 }
 
-export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetContextMenuProps) => {
+export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }: WidgetContextMenuProps) => {
   const { data: session } = useSession();
   const [isEditMode] = useEditMode();
   const board = useRequiredBoard();
+  const { hasChangeAccess } = useBoardPermissions(board);
+  const { updateAndPersistBoard } = usePersistBoard(board);
   const tItem = useScopedI18n("item");
   const tMenu = useScopedI18n("item.menu.label");
   const t = useI18n();
@@ -55,19 +63,34 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
   const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
     useItemActions();
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
-  const { mutate: saveBoard } = clientApi.board.saveBoard.useMutation();
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
   const { gridstack } = useSectionContext().refs;
   const queryClient = useQueryClient();
+  const { open: openAdvancedFocus } = useAdvancedFocus();
+  const integrationsWithInteractAccess = useIntegrationsWithInteractAccess();
+  const [menuOpened, setMenuOpened] = useState(false);
 
-  const widgetQueryKey = useMemo(
-    () => ("queryKey" in currentDefinition ? (currentDefinition.queryKey as QueryKey) : [["widget", item.kind]]),
-    [currentDefinition, item.kind],
+  const widgetQueryKeys = useMemo(
+    () => getWidgetQueryKeys(currentDefinition as Parameters<typeof getWidgetQueryKeys>[0]),
+    [currentDefinition],
   );
-  const isWidgetFetching = useIsFetching({ queryKey: widgetQueryKey }) > 0;
+  const matchesWidgetQuery = useCallback(
+    (queryKey: QueryKey) => widgetQueryKeys.some((candidate) => partialMatchKey(queryKey, candidate)),
+    [widgetQueryKeys],
+  );
+  const isWidgetFetching =
+    useIsFetching({
+      type: "active",
+      predicate: (query) => matchesWidgetQuery(query.queryKey),
+    }) > 0;
   const handleRefetch = useCallback(() => {
-    void queryClient.refetchQueries({ queryKey: widgetQueryKey, type: "all" });
-  }, [queryClient, widgetQueryKey]);
+    void Promise.all(widgetQueryKeys.map((queryKey) => queryClient.refetchQueries({ queryKey, type: "active" })));
+  }, [queryClient, widgetQueryKeys]);
+
+  const canInteractWithSelectedIntegrations = useMemo(() => {
+    const allowedIds = new Set(integrationsWithInteractAccess.map(({ id }) => id));
+    return item.integrationIds.length > 0 && item.integrationIds.every((id) => allowedIds.has(id));
+  }, [integrationsWithInteractAccess, item.integrationIds]);
 
   const options = useMemo(
     () => reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options) as Record<string, unknown>,
@@ -76,11 +99,12 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
 
   type OptionDef = { type: string; skipContextMenu?: boolean };
   const toggleOptions = useMemo(() => {
+    if (!hasChangeAccess) return [];
     const rawOptions = currentDefinition.createOptions(settings) as unknown as Record<string, OptionDef>;
     return Object.entries(rawOptions).filter(([, def]) => def.type === "switch" && !def.skipContextMenu);
-  }, [currentDefinition, settings]);
+  }, [currentDefinition, hasChangeAccess, settings]);
 
-  const widgetContextActions = useMemo(() => {
+  const widgetContextActions = (() => {
     const def = currentDefinition as Record<string, unknown>;
     if (typeof def.contextActions !== "function") return [];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -90,17 +114,29 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
         updateItemOptions({ itemId: item.id, newOptions: { ...options, ...partial } });
       },
       integrationIds: item.integrationIds,
-      context: { isEditMode, boardId: board.id, itemId: item.id },
+      context: {
+        isEditMode,
+        boardId: board.id,
+        itemId: item.id,
+        canInteractWithSelectedIntegrations,
+      },
       widgetStateRef,
     });
     return (Array.isArray(actions) ? actions : []) as WidgetContextMenuAction[];
-  }, [currentDefinition, options, item, updateItemOptions, isEditMode, board.id, widgetStateRef]);
+  })();
 
   const persistBoard = useCallback(
-    (updatedItems: typeof board.items) => {
-      saveBoard({ ...board, items: updatedItems });
+    (updater: (previous: typeof board) => typeof board) => {
+      updateAndPersistBoard(updater, {
+        onError: () => {
+          showErrorNotification({
+            title: t("item.menu.notification.saveError.title"),
+            message: t("item.menu.notification.saveError.message"),
+          });
+        },
+      });
     },
-    [board, saveBoard],
+    [t, updateAndPersistBoard],
   );
 
   const openEditModal = useCallback(() => {
@@ -113,12 +149,14 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
           integrationIds: item.integrationIds,
         },
         onSuccessfulEdit: (editResult) => {
-          updateItemOptions({ itemId: item.id, newOptions: editResult.options });
-          updateItemAdvancedOptions({ itemId: item.id, newAdvancedOptions: editResult.advancedOptions });
-          updateItemIntegrations({ itemId: item.id, newIntegrations: editResult.integrationIds });
-          if (!isEditMode) {
-            persistBoard(
-              board.items.map((boardItem) =>
+          if (isEditMode) {
+            updateItemOptions({ itemId: item.id, newOptions: editResult.options });
+            updateItemAdvancedOptions({ itemId: item.id, newAdvancedOptions: editResult.advancedOptions });
+            updateItemIntegrations({ itemId: item.id, newIntegrations: editResult.integrationIds });
+          } else {
+            persistBoard((previous) => ({
+              ...previous,
+              items: previous.items.map((boardItem) =>
                 boardItem.id !== item.id
                   ? boardItem
                   : {
@@ -128,7 +166,7 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
                       integrationIds: editResult.integrationIds,
                     },
               ),
-            );
+            }));
           }
         },
         integrationData: (integrationData ?? []).filter(
@@ -154,18 +192,22 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
     settings,
     isEditMode,
     persistBoard,
-    board,
   ]);
 
   const handleToggle = useCallback(
     (key: string) => (checked: boolean) => {
-      const newOptions = { ...options, [key]: checked };
-      updateItemOptions({ itemId: item.id, newOptions });
-      persistBoard(
-        board.items.map((boardItem) => (boardItem.id !== item.id ? boardItem : { ...boardItem, options: newOptions })),
-      );
+      if (isEditMode) {
+        updateItemOptions({ itemId: item.id, newOptions: { ...options, [key]: checked } });
+      } else {
+        persistBoard((previous) => ({
+          ...previous,
+          items: previous.items.map((boardItem) =>
+            boardItem.id !== item.id ? boardItem : { ...boardItem, options: { ...boardItem.options, [key]: checked } },
+          ),
+        }));
+      }
     },
-    [options, item.id, updateItemOptions, persistBoard, board],
+    [options, item.id, updateItemOptions, isEditMode, persistBoard],
   );
 
   if (!session) return <>{children}</>;
@@ -174,9 +216,28 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
   const visibleWidgetActions = widgetContextActions.filter((a) => !a.hidden);
 
   return (
-    <Menu shadow="md" width={300} closeOnItemClick={false} position="right-start" offset={4}>
+    <Menu
+      shadow="md"
+      width={300}
+      closeOnItemClick={false}
+      position="right-start"
+      offset={4}
+      opened={menuOpened}
+      onChange={setMenuOpened}
+    >
       <Menu.ContextMenu>{children}</Menu.ContextMenu>
       <Menu.Dropdown>
+        <Menu.Item
+          closeMenuOnClick
+          leftSection={<IconMaximize size={16} />}
+          onClick={() => {
+            if (sourceRef.current) openAdvancedFocus(item.id, sourceRef.current, true);
+          }}
+          disabled={isEditMode}
+        >
+          {t("item.advancedFocus.open")}
+        </Menu.Item>
+        <Menu.Divider />
         {toggleOptions.length > 0 && (
           <>
             <Menu.Label>{tMenu("options")}</Menu.Label>
@@ -248,20 +309,22 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
               {tMenu("refresh")}
               <WidgetQueryStatus
                 queryClient={queryClient}
-                queryKey={widgetQueryKey}
+                queryKeys={widgetQueryKeys}
                 isFetching={isWidgetFetching}
                 t={t}
               />
             </Group>
           </Menu.Item>
-          <Menu.Item
-            closeMenuOnClick
-            leftSection={<IconSettings size={16} />}
-            onClick={openEditModal}
-            disabled={isPending}
-          >
-            {tMenu("settings")}
-          </Menu.Item>
+          {hasChangeAccess && (
+            <Menu.Item
+              closeMenuOnClick
+              leftSection={<IconSettings size={16} />}
+              onClick={openEditModal}
+              disabled={isPending}
+            >
+              {tMenu("settings")}
+            </Menu.Item>
+          )}
         </>
 
         {isEditMode && (
@@ -290,16 +353,20 @@ export const WidgetContextMenu = ({ item, widgetStateRef, children }: WidgetCont
 
 interface WidgetQueryStatusProps {
   queryClient: QueryClient;
-  queryKey: QueryKey;
+  queryKeys: readonly QueryKey[];
   isFetching: boolean;
   t: TranslationFunction;
 }
 
-const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQueryStatusProps) => {
-  const queries = queryClient.getQueryCache().findAll({ queryKey });
+const WidgetQueryStatus = ({ queryClient, queryKeys, isFetching, t }: WidgetQueryStatusProps) => {
+  const queries = queryClient.getQueryCache().findAll({
+    type: "active",
+    predicate: (query) => queryKeys.some((queryKey) => partialMatchKey(query.queryKey, queryKey)),
+  });
   const timestamps = queries.map((query) => query.state.dataUpdatedAt).filter(Boolean);
   const latest = timestamps.length > 0 ? Math.max(...timestamps) : 0;
-  const ageLabel = useTimeAgo(new Date(latest));
+  const ageLabel = useTimeAgo(new Date(latest || Date.now()));
+  const ageSuffix = latest > 0 ? ` · ${ageLabel}` : "";
 
   if (isFetching) {
     return (
@@ -334,7 +401,8 @@ const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQuery
         <Group gap={4} wrap="nowrap">
           <IconAlertTriangle size={12} color="var(--mantine-color-red-6)" />
           <Text size="xs" c="red.6">
-            {t("item.menu.status.error")} · {ageLabel}
+            {t("item.menu.status.error")}
+            {ageSuffix}
           </Text>
         </Group>
       </Tooltip>
@@ -345,7 +413,8 @@ const WidgetQueryStatus = ({ queryClient, queryKey, isFetching, t }: WidgetQuery
     <Group gap={4} wrap="nowrap">
       <IconCircleCheck size={12} color="var(--mantine-color-green-6)" />
       <Text size="xs" c="dimmed">
-        {t("item.menu.status.success")} · {ageLabel}
+        {t("item.menu.status.success")}
+        {ageSuffix}
       </Text>
     </Group>
   );
diff --git a/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css b/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
index 89b3ba93e..f6ec2600f 100644
--- a/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
+++ b/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
@@ -13,10 +13,8 @@
     transform 150ms ease;
 }
 
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):hover)
-  .wrapper,
-:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):focus-within)
-  .wrapper {
+:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):hover) .wrapper,
+:global(.grid-stack-item[data-type="item"]:not([data-kind="app"]):focus-within) .wrapper {
   opacity: 1;
   transform: translateY(0);
 }
diff --git a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
new file mode 100644
index 000000000..606bc5ece
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import type { KeyboardEvent, MouseEvent, PointerEvent, PropsWithChildren } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { BoxProps } from "@mantine/core";
+import { Box, Menu } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+
+import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
+import { useModalAction } from "@homarr/modals";
+import { useSettings } from "@homarr/settings";
+import { useI18n } from "@homarr/translation/client";
+
+import type { DynamicSectionItem, Section } from "~/app/[locale]/boards/_types";
+import { ItemSelectModal } from "../../items/item-select-modal";
+import { useBoardPermissions } from "../../permissions/client";
+import type { BoardPlacementHint } from "../../items/actions/create-item";
+import type { UseGridstackRefs } from "./use-gridstack";
+
+interface MenuState {
+  x: number;
+  y: number;
+  placement: BoardPlacementHint;
+}
+
+interface Props extends BoxProps {
+  section: Exclude<Section, { kind: "dynamic" }> | DynamicSectionItem;
+  refs: UseGridstackRefs;
+}
+
+export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProps }: PropsWithChildren<Props>) => {
+  const board = useRequiredBoard();
+  const currentLayoutId = useCurrentLayout();
+  const settings = useSettings();
+  const t = useI18n();
+  const { hasChangeAccess } = useBoardPermissions(board);
+  const { openModal } = useModalAction(ItemSelectModal);
+  const [isEditMode] = useEditMode();
+  const [menu, setMenu] = useState<MenuState | null>(null);
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const returnFocusRef = useRef<HTMLElement | null>(null);
+
+  const enabled = hasChangeAccess && settings.enableRightClickOnWidgets;
+  const clearLongPress = () => {
+    if (longPressTimer.current === null) return;
+    clearTimeout(longPressTimer.current);
+    longPressTimer.current = null;
+  };
+
+  useEffect(
+    () => () => {
+      if (longPressTimer.current !== null) clearTimeout(longPressTimer.current);
+    },
+    [],
+  );
+  const resolvePlacement = (target: EventTarget | null, pageX: number, pageY: number) => {
+    const wrapper = refs.wrapperElement.current;
+    const gridstack = refs.gridstack.current;
+    if (!(target instanceof Element) || !wrapper || !gridstack) return null;
+    if (target.closest(".grid-stack") !== wrapper || target.closest(".grid-stack-item")) return null;
+
+    const cell = gridstack.getCellFromPixel({ left: pageX, top: pageY }, true);
+    const rowLimit = section.kind === "dynamic" ? section.height : undefined;
+    if (
+      cell.x < 0 ||
+      cell.y < 0 ||
+      cell.x >= gridstack.getColumn() ||
+      (rowLimit !== undefined && cell.y >= rowLimit) ||
+      !gridstack.isAreaEmpty(cell.x, cell.y, 1, 1)
+    ) {
+      return null;
+    }
+
+    return { sectionId: section.id, layoutId: currentLayoutId, xOffset: cell.x, yOffset: cell.y };
+  };
+
+  const handleContextMenu = (event: MouseEvent<HTMLDivElement>) => {
+    if (!enabled) return;
+    const placement = resolvePlacement(event.target, event.pageX, event.pageY);
+    if (!placement) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setMenu({ x: event.clientX, y: event.clientY, placement });
+  };
+
+  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (!enabled || event.pointerType !== "touch") return;
+    const placement = resolvePlacement(event.target, event.pageX, event.pageY);
+    if (!placement) return;
+    clearLongPress();
+    longPressTimer.current = setTimeout(() => {
+      setMenu({ x: event.clientX, y: event.clientY, placement });
+      navigator.vibrate?.(20);
+    }, 500);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (
+      !enabled ||
+      event.currentTarget !== event.target ||
+      (event.key !== "ContextMenu" && !(event.shiftKey && event.key === "F10"))
+    ) {
+      return;
+    }
+    const wrapper = event.currentTarget;
+    const gridstack = refs.gridstack.current;
+    if (!gridstack) return;
+
+    const rowCount = Math.max(1, section.kind === "dynamic" ? section.height : gridstack.getRow() + 1);
+    for (let yOffset = 0; yOffset < rowCount; yOffset++) {
+      for (let xOffset = 0; xOffset < gridstack.getColumn(); xOffset++) {
+        if (!gridstack.isAreaEmpty(xOffset, yOffset, 1, 1)) continue;
+        const rect = wrapper.getBoundingClientRect();
+        event.preventDefault();
+        returnFocusRef.current = wrapper;
+        setMenu({
+          x: rect.left + 24,
+          y: rect.top + 24,
+          placement: { sectionId: section.id, layoutId: currentLayoutId, xOffset, yOffset },
+        });
+        return;
+      }
+    }
+  };
+
+  return (
+    <>
+      <Box
+        {...boxProps}
+        ref={refs.wrapper}
+        tabIndex={enabled ? 0 : undefined}
+        aria-label={enabled ? t("item.create.addAtPosition") : undefined}
+        onContextMenu={handleContextMenu}
+        onKeyDown={handleKeyDown}
+        onPointerDown={handlePointerDown}
+        onPointerMove={clearLongPress}
+        onPointerUp={clearLongPress}
+        onPointerCancel={clearLongPress}
+        onPointerLeave={clearLongPress}
+      >
+        {children}
+      </Box>
+      <Menu
+        opened={menu !== null}
+        onChange={(opened) => {
+          if (!opened) {
+            setMenu(null);
+            const returnFocus = returnFocusRef.current;
+            returnFocusRef.current = null;
+            requestAnimationFrame(() => returnFocus?.focus());
+          }
+        }}
+        withinPortal
+        position="bottom-start"
+      >
+        <Menu.Target>
+          <Box pos="fixed" left={menu?.x ?? 0} top={menu?.y ?? 0} w={1} h={1} style={{ pointerEvents: "none" }} />
+        </Menu.Target>
+        <Menu.Dropdown>
+          <Menu.Item
+            leftSection={<IconPlus size={18} />}
+            onClick={() => {
+              returnFocusRef.current = null;
+              if (menu) {
+                openModal({ placement: menu.placement, board, persistImmediately: !isEditMode });
+              }
+              setMenu(null);
+            }}
+          >
+            {t("item.create.addAtPosition")}
+          </Menu.Item>
+        </Menu.Dropdown>
+      </Menu>
+    </>
+  );
+};
diff --git a/apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx b/apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx
index e851e5c2a..6934008f5 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx
+++ b/apps/nextjs/src/components/board/sections/gridstack/gridstack.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import type { BoxProps } from "@mantine/core";
-import { Box } from "@mantine/core";
 import combineClasses from "clsx";
 
 import type { DynamicSectionItem, Section } from "~/app/[locale]/boards/_types";
 import { SectionContent } from "../content";
 import { SectionProvider } from "../section-context";
 import { useSectionItems } from "../use-section-items";
+import { BoardEmptySpaceContextMenu } from "./board-empty-space-context-menu";
 import { useGridstack } from "./use-gridstack";
 
 interface Props extends BoxProps {
@@ -22,15 +22,16 @@ export const GridStack = ({ section, ...props }: Props) => {
 
   return (
     <SectionProvider value={{ section, items, innerSections, refs }}>
-      <Box
+      <BoardEmptySpaceContextMenu
         {...props}
+        section={section}
+        refs={refs}
         data-kind={section.kind}
         data-section-id={section.id}
         className={combineClasses(`grid-stack grid-stack-${section.kind}`, props.className)}
-        ref={refs.wrapper}
       >
         <SectionContent />
-      </Box>
+      </BoardEmptySpaceContextMenu>
     </SectionProvider>
   );
 };
diff --git a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
index b5e468de6..0c593b0a1 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
+++ b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
@@ -14,6 +14,7 @@ import { initializeGridstack } from "./init-gridstack";
 
 export interface UseGridstackRefs {
   wrapper: Ref<HTMLDivElement | null>;
+  wrapperElement: RefObject<HTMLDivElement | null>;
   items: RefObject<Record<string, RefObject<GridItemHTMLElement | null>>>;
   gridstack: RefObject<GridStack | null>;
 }
@@ -287,6 +288,7 @@ export const useGridstack = (section: Omit<Section, "items">, itemIds: string[])
     refs: {
       items: itemRefs,
       wrapper: wrapperRef,
+      wrapperElement: wrapperElementRef,
       gridstack: gridRef,
     },
   };
diff --git a/apps/nextjs/src/components/layout/constants.ts b/apps/nextjs/src/components/layout/constants.ts
new file mode 100644
index 000000000..2799f8304
--- /dev/null
+++ b/apps/nextjs/src/components/layout/constants.ts
@@ -0,0 +1 @@
+export const appShellHeaderHeight = 60;
diff --git a/apps/nextjs/src/components/layout/shell.tsx b/apps/nextjs/src/components/layout/shell.tsx
index b51cf3220..56001cafb 100644
--- a/apps/nextjs/src/components/layout/shell.tsx
+++ b/apps/nextjs/src/components/layout/shell.tsx
@@ -5,6 +5,7 @@ import { AppShell } from "@mantine/core";
 import { useAtomValue } from "jotai";
 
 import { useOptionalBackgroundProps } from "./background";
+import { appShellHeaderHeight } from "./constants";
 import { navigationCollapsedAtom } from "./header/burger";
 
 interface ClientShellProps {
@@ -23,7 +24,7 @@ export const ClientShell = ({
   return (
     <AppShell
       {...backgroundProps}
-      header={hasHeader ? { height: 60 } : undefined}
+      header={hasHeader ? { height: appShellHeaderHeight } : undefined}
       navbar={
         hasNavigation
           ? {
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
new file mode 100644
index 000000000..898c43d00
--- /dev/null
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -0,0 +1,364 @@
+import type { Browser, BrowserContext, Locator, Page } from "@playwright/test";
+import { chromium, expect } from "@playwright/test";
+import { createId } from "@paralleldrive/cuid2";
+import { eq } from "drizzle-orm";
+import { stringify } from "superjson";
+import { afterAll, beforeAll, describe, test } from "vitest";
+
+import { hashPasswordAsync } from "../packages/auth/security";
+import {
+  boardUserPermissions,
+  boards,
+  itemLayouts,
+  items,
+  layouts,
+  sections,
+  users,
+} from "../packages/db/schema/sqlite";
+import type { SqliteDatabase } from "./shared/e2e-db";
+import { createSqliteDbFileAsync } from "./shared/e2e-db";
+import { createHomarrContainer } from "./shared/create-homarr-container";
+import { seedAdminUserAsync } from "./shared/seed-admin-user";
+
+const ownerCredentials = { username: "owner", password: "Comp(exP4sswOrd" };
+const disabledModifierCredentials = { username: "modifier", password: "Comp(exP4sswOrd" };
+const viewerCredentials = { username: "viewer", password: "Comp(exP4sswOrd" };
+const boardName = "advanced-interactions-e2e";
+
+describe("Board advanced interactions", () => {
+  let browser: Browser;
+  let baseUrl: string;
+  let stopContainerAsync: (() => Promise<void>) | undefined;
+
+  beforeAll(async () => {
+    const { db, localMountPath } = await createSqliteDbFileAsync();
+    const { userId: ownerId } = await seedAdminUserAsync(db, ownerCredentials);
+    await seedInteractionBoardAsync(db, ownerId);
+    await seedCredentialsUserAsync(db, {
+      ...disabledModifierCredentials,
+      enableRightClickOnWidgets: false,
+      boardPermission: "modify",
+    });
+    await seedCredentialsUserAsync(db, {
+      ...viewerCredentials,
+      enableRightClickOnWidgets: true,
+      boardPermission: "view",
+    });
+
+    const homarrContainer = await createHomarrContainer({
+      environment: { AUTH_PROVIDERS: "credentials" },
+      mounts: { "/appdata": localMountPath },
+    }).start();
+    stopContainerAsync = async () => {
+      await homarrContainer.stop();
+    };
+    baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
+    browser = await chromium.launch();
+  }, 120_000);
+
+  afterAll(async () => {
+    await browser?.close();
+    await stopContainerAsync?.();
+  });
+
+  test("opens advanced view from Shift-hover, keyboard, and the widget context menu", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials);
+
+    try {
+      const widget = page.locator(".grid-stack-item[data-kind='clock'] > .grid-stack-item-content").first();
+      const compactSurface = widget.locator(".clock-wrapper");
+      const advancedDialog = page.getByRole("dialog", { name: "Date and time advanced view" });
+
+      await compactSurface.evaluate((element) => {
+        element.setAttribute("data-lifecycle-probe", "same-instance");
+      });
+      await widget.focus();
+      await page.keyboard.down("Shift");
+      await widget.hover();
+      await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
+      await expect(advancedDialog).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(widget).toBeFocused();
+      await page.keyboard.up("Shift");
+      await expect(advancedDialog).toBeHidden();
+      await expect(compactSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(widget).toBeFocused();
+
+      await page.keyboard.down("Shift");
+      await widget.hover();
+      await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
+      await page.getByRole("button", { name: "Keep advanced view open" }).click();
+      const pinnedButton = page.getByRole("button", { name: "Advanced view is pinned" });
+      await expect(pinnedButton).toBeFocused();
+      await page.keyboard.up("Shift");
+      await expect(advancedDialog).toBeVisible();
+      await page.keyboard.press("Shift+Tab");
+      await expect(advancedDialog).toBeVisible();
+      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+      await page.keyboard.press("Escape");
+      await expect(advancedDialog).toBeHidden();
+      await expect(widget).toBeFocused();
+
+      await page.keyboard.press("Shift+Enter");
+      await expect(advancedDialog).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(advancedDialog).toBeHidden();
+      await expect(widget).toBeFocused();
+
+      await widget.click({ button: "right" });
+      await page.getByRole("menuitem", { name: "Open advanced view" }).click();
+      await expect(advancedDialog).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(advancedDialog).toBeHidden();
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("preserves iframe browsing state and dismisses focus when a responsive layout remounts", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials);
+
+    try {
+      const iframeSlot = page.locator(".grid-stack-item[data-kind='iframe'] > .grid-stack-item-content").first();
+      const iframe = iframeSlot.locator("iframe");
+      await iframe.evaluate((element) => {
+        element.srcdoc = '<label>State <input id="state" value="initial"></label>';
+      });
+      const frame = page.frameLocator(".grid-stack-item[data-kind='iframe'] iframe");
+      await frame.locator("#state").fill("changed");
+
+      await iframeSlot.focus();
+      await page.keyboard.press("Shift+Enter");
+      await expect(page.getByRole("dialog", { name: "iFrame advanced view" })).toBeVisible();
+      await expect(frame.locator("#state")).toHaveValue("changed");
+      await page.keyboard.press("Escape");
+      await expect(frame.locator("#state")).toHaveValue("changed");
+
+      await iframeSlot.focus();
+      await page.keyboard.press("Shift+Enter");
+      await page.setViewportSize({ width: 800, height: 900 });
+      await expect(page.getByRole("dialog", { name: "iFrame advanced view" })).toBeHidden();
+      await expect(page.locator(".grid-stack-item[data-kind='iframe'] iframe")).toBeVisible();
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("keeps advanced controls below the fixed header on short screens", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials, { width: 1366, height: 768 });
+
+    try {
+      const widget = page.locator(".grid-stack-item[data-kind='clock'] > .grid-stack-item-content").first();
+      await widget.focus();
+      await page.keyboard.press("Shift+Enter");
+      const closeButton = page.getByRole("button", { name: "Close advanced view" });
+      const bounds = await closeButton.boundingBox();
+      expect(bounds).not.toBeNull();
+      if (!bounds) return;
+      expect(bounds.x).toBeGreaterThanOrEqual(0);
+      expect(bounds.y).toBeGreaterThanOrEqual(60);
+      expect(bounds.x + bounds.width).toBeLessThanOrEqual(1366);
+      expect(bounds.y + bounds.height).toBeLessThanOrEqual(768);
+      await closeButton.click();
+      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeHidden();
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("opens the add-at-position chooser only when right click and change access are enabled", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials);
+
+    try {
+      const grid = page.locator(".grid-stack[data-kind='empty']");
+      const addHereMenuItem = page.getByRole("menuitem", { name: "Add item here" });
+      await expect(grid).toHaveAttribute("aria-label", "Add item here");
+
+      await grid.focus();
+      await page.keyboard.press("Shift+F10");
+      await expect(addHereMenuItem).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(addHereMenuItem).toBeHidden();
+      await expect(grid).toBeFocused();
+
+      await touchAndHoldEmptyGridSpaceAsync(grid);
+      await expect(addHereMenuItem).toBeVisible({ timeout: 1_000 });
+      await page.keyboard.press("Escape");
+
+      await rightClickEmptyGridSpaceAsync(grid);
+      await addHereMenuItem.click();
+      await expect(page.getByRole("dialog").filter({ hasText: "Choose item to add" })).toBeVisible();
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("honors the user setting gate even when the user can modify the board", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, disabledModifierCredentials);
+
+    try {
+      const widget = page.locator(".grid-stack-item[data-kind='clock'] > .grid-stack-item-content").first();
+      const grid = page.locator(".grid-stack[data-kind='empty']");
+
+      await widget.click({ button: "right" });
+      await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
+      await expect(grid).not.toHaveAttribute("aria-label", "Add item here");
+      await rightClickEmptyGridSpaceAsync(grid);
+      await expect(page.getByRole("menuitem", { name: "Add item here" })).toHaveCount(0);
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+
+  test("keeps read-only advanced viewing but blocks add-at-position without change access", async () => {
+    const { context, page } = await openBoardAsync(browser, baseUrl, viewerCredentials);
+
+    try {
+      const widget = page.locator(".grid-stack-item[data-kind='clock'] > .grid-stack-item-content").first();
+      const grid = page.locator(".grid-stack[data-kind='empty']");
+
+      await widget.click({ button: "right" });
+      await page.getByRole("menuitem", { name: "Open advanced view" }).click();
+      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeVisible();
+      await page.keyboard.press("Escape");
+
+      await expect(grid).not.toHaveAttribute("aria-label", "Add item here");
+      await rightClickEmptyGridSpaceAsync(grid);
+      await expect(page.getByRole("menuitem", { name: "Add item here" })).toHaveCount(0);
+    } finally {
+      await context.close();
+    }
+  }, 60_000);
+});
+
+const openBoardAsync = async (
+  browser: Browser,
+  baseUrl: string,
+  credentials: { username: string; password: string },
+  viewport = { width: 1280, height: 900 },
+): Promise<{ context: BrowserContext; page: Page }> => {
+  const context = await browser.newContext({ reducedMotion: "reduce", viewport });
+  const page = await context.newPage();
+
+  await page.goto(`${baseUrl}/auth/login`);
+  await page.getByLabel("Username").fill(credentials.username);
+  await page.locator("#password").fill(credentials.password);
+  await page.locator("css=button[type='submit']").click();
+  await page.waitForURL(baseUrl, { timeout: 15_000 });
+  await page.goto(`${baseUrl}/boards/${boardName}`);
+  await expect(page.locator(".grid-stack-item[data-kind='clock'] .clock-wrapper").first()).toBeVisible({
+    timeout: 15_000,
+  });
+
+  return { context, page };
+};
+
+const rightClickEmptyGridSpaceAsync = async (grid: Locator) => {
+  const bounds = await grid.boundingBox();
+  expect(bounds).not.toBeNull();
+  if (!bounds) return;
+
+  await grid.click({
+    button: "right",
+    position: { x: bounds.width - 16, y: Math.min(24, bounds.height / 2) },
+  });
+};
+
+const touchAndHoldEmptyGridSpaceAsync = async (grid: Locator) => {
+  const bounds = await grid.boundingBox();
+  expect(bounds).not.toBeNull();
+  if (!bounds) return;
+
+  const clientX = bounds.x + bounds.width - 16;
+  const clientY = bounds.y + Math.min(24, bounds.height / 2);
+  await grid.dispatchEvent("pointerdown", { pointerType: "touch", clientX, clientY });
+  await new Promise((resolve) => setTimeout(resolve, 550));
+  await grid.dispatchEvent("pointerup", { pointerType: "touch", clientX, clientY });
+};
+
+const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) => {
+  const boardId = createId();
+  const baseLayoutId = createId();
+  const desktopLayoutId = createId();
+  const sectionId = createId();
+  const clockItemId = createId();
+  const iframeItemId = createId();
+
+  await db.insert(boards).values({ id: boardId, name: boardName, creatorId: ownerId, isPublic: false });
+  await db.insert(layouts).values([
+    { id: baseLayoutId, name: "Base", columnCount: 12, breakpoint: 0, boardId },
+    { id: desktopLayoutId, name: "Desktop", columnCount: 12, breakpoint: 1000, boardId },
+  ]);
+  await db.insert(sections).values({ id: sectionId, kind: "empty", xOffset: 0, yOffset: 0, boardId });
+  await db.insert(items).values([
+    {
+      id: clockItemId,
+      kind: "clock",
+      boardId,
+      options: stringify({ is24HourFormat: true, showSeconds: false, showDate: true }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
+    {
+      id: iframeItemId,
+      kind: "iframe",
+      boardId,
+      options: stringify({ embedUrl: "https://example.com", allowScrolling: true }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
+  ]);
+  await db.insert(itemLayouts).values(
+    [baseLayoutId, desktopLayoutId].flatMap((layoutId) => [
+      {
+        itemId: clockItemId,
+        sectionId,
+        layoutId,
+        xOffset: 0,
+        yOffset: 0,
+        width: 4,
+        height: 3,
+      },
+      {
+        itemId: iframeItemId,
+        sectionId,
+        layoutId,
+        xOffset: 4,
+        yOffset: 0,
+        width: 4,
+        height: 3,
+      },
+    ]),
+  );
+  await db
+    .update(users)
+    .set({ homeBoardId: boardId, completedBoardTour: true, completedManageTour: true })
+    .where(eq(users.id, ownerId));
+};
+
+const seedCredentialsUserAsync = async (
+  db: SqliteDatabase,
+  input: {
+    username: string;
+    password: string;
+    enableRightClickOnWidgets: boolean;
+    boardPermission: "view" | "modify";
+  },
+) => {
+  const userId = createId();
+  const board = await db.query.boards.findFirst({ where: eq(boards.name, boardName) });
+  if (!board) throw new Error("Interaction board was not seeded");
+
+  await db.insert(users).values({
+    id: userId,
+    name: input.username,
+    provider: "credentials",
+    password: await hashPasswordAsync(input.password),
+    enableRightClickOnWidgets: input.enableRightClickOnWidgets,
+    homeBoardId: board.id,
+    completedBoardTour: true,
+    completedManageTour: true,
+  });
+  await db.insert(boardUserPermissions).values({
+    boardId: board.id,
+    userId,
+    permission: input.boardPermission,
+  });
+};
diff --git a/packages/api/src/router/test/widgets/patchmon.spec.ts b/packages/api/src/router/test/widgets/patchmon.spec.ts
index df37b5647..27f5cfe40 100644
--- a/packages/api/src/router/test/widgets/patchmon.spec.ts
+++ b/packages/api/src/router/test/widgets/patchmon.spec.ts
@@ -101,9 +101,7 @@ describe("patchmonRouter.getStats access control", () => {
     });
     const caller = createCaller(db, null);
 
-    await expect(caller.getStats({ integrationId })).rejects.toThrow(
-      new TRPCError({ code: "UNAUTHORIZED" }),
-    );
+    await expect(caller.getStats({ integrationId })).rejects.toThrow(new TRPCError({ code: "UNAUTHORIZED" }));
   });
 
   test("should throw FORBIDDEN for authenticated users without board or integration access", async () => {
diff --git a/packages/api/src/router/test/widgets/timetable.spec.ts b/packages/api/src/router/test/widgets/timetable.spec.ts
new file mode 100644
index 000000000..7933b0d16
--- /dev/null
+++ b/packages/api/src/router/test/widgets/timetable.spec.ts
@@ -0,0 +1,114 @@
+import { stringify } from "superjson";
+import { describe, expect, it, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { boards, items, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+
+import { timetableRouter } from "../../widgets/timetable";
+
+const mocks = vi.hoisted(() => ({ getTimetable: vi.fn(), searchStations: vi.fn() }));
+
+vi.mock("@homarr/request-handler/timetable", () => ({
+  timetableGetTimetableRequestHandler: {
+    handler: (input: unknown) => ({
+      getDataAsync: async () => {
+        mocks.getTimetable(input);
+        return { data: { stationId: "station", timestamp: new Date(0), entries: [] } };
+      },
+    }),
+  },
+  timetableSearchStationsRequestHandler: {
+    handler: (input: unknown) => ({
+      getDataAsync: async () => {
+        mocks.searchStations(input);
+        return { data: [] };
+      },
+    }),
+  },
+}));
+
+const createSession = (userId: string): Session => ({
+  user: { id: userId, permissions: [], colorScheme: "light" },
+  expires: new Date().toISOString(),
+});
+
+const createCaller = (db: Database, session: Session | null) =>
+  timetableRouter.createCaller({ db, deviceType: undefined, session });
+
+const createTimetableItemAsync = async (
+  db: Database,
+  { baseUrl, isPublic = true }: { baseUrl: string; isPublic?: boolean },
+) => {
+  const ownerId = createId();
+  const boardId = createId();
+  const itemId = createId();
+  await db.insert(users).values({ id: ownerId });
+  await db.insert(boards).values({ id: boardId, name: `board-${boardId}`, creatorId: ownerId, isPublic });
+  await db.insert(items).values({
+    id: itemId,
+    boardId,
+    kind: "timetable",
+    options: stringify({ baseUrl }),
+  });
+  return { boardId, itemId, ownerId };
+};
+
+describe("timetableRouter source authorization", () => {
+  it("allows itemless setup only for the fixed default provider", async () => {
+    const caller = createCaller(createDb(), null);
+
+    await expect(caller.searchStations({ baseUrl: "https://search.ch", query: "Bern" })).resolves.toEqual([]);
+    await expect(caller.searchStations({ baseUrl: "http://127.0.0.1:8080", query: "Bern" })).rejects.toMatchObject({
+      code: "FORBIDDEN",
+    });
+  });
+
+  it("loads a persisted private endpoint only through a viewable timetable item", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { itemId } = await createTimetableItemAsync(db, { baseUrl });
+    const caller = createCaller(db, null);
+
+    await caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 });
+    expect(mocks.getTimetable).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl }));
+    await expect(
+      caller.getTimetable({ baseUrl: "http://127.0.0.1:8080", itemId, stationId: "station", limit: 10 }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+  });
+
+  it("rejects a persisted endpoint when its board is not viewable", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { itemId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+
+    await expect(
+      createCaller(db, null).getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+  });
+
+  it("allows board modifiers to search an unsaved self-hosted endpoint", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { boardId, ownerId } = await createTimetableItemAsync(db, { baseUrl: "https://search.ch", isPublic: false });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await caller.searchStations({ baseUrl, boardId, query: "Bern" });
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl }));
+  });
+
+  it("does not treat public board view access as configuration access", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { boardId, itemId } = await createTimetableItemAsync(db, { baseUrl });
+
+    await expect(createCaller(db, null).searchStations({ baseUrl, boardId, query: "Bern" })).rejects.toMatchObject({
+      code: "NOT_FOUND",
+    });
+    await expect(createCaller(db, null).searchStations({ baseUrl, itemId, query: "Bern" })).rejects.toMatchObject({
+      code: "FORBIDDEN",
+    });
+  });
+});
diff --git a/packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts b/packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts
new file mode 100644
index 000000000..905ac00a4
--- /dev/null
+++ b/packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts
@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vitest";
+
+import { everyBeszelIntegrationFailed } from "../beszel-failures";
+
+describe("everyBeszelIntegrationFailed", () => {
+  it("keeps partial successes", () => {
+    expect(everyBeszelIntegrationFailed([{ error: "offline" }, {}])).toBe(false);
+  });
+
+  it("detects when every integration failed", () => {
+    expect(everyBeszelIntegrationFailed([{ error: "offline" }, { error: "timeout" }])).toBe(true);
+  });
+
+  it("allows an empty integration selection", () => {
+    expect(everyBeszelIntegrationFailed([])).toBe(false);
+  });
+});
diff --git a/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts b/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
new file mode 100644
index 000000000..12fbe5778
--- /dev/null
+++ b/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+
+import { readBoundedJsonResponseAsync, validateCustomApiUrl } from "../custom-api-security";
+
+describe("custom API request hardening", () => {
+  it("accepts HTTP endpoints without embedded credentials", () => {
+    expect(validateCustomApiUrl("https://api.example.com/v1/data").hostname).toBe("api.example.com");
+  });
+
+  it.each(["file:///etc/passwd", "https://user:secret@example.com/data"])("rejects unsafe URL %s", (url) => {
+    expect(() => validateCustomApiUrl(url)).toThrow();
+  });
+
+  it("rejects a response once its byte budget is exceeded", async () => {
+    const response = new Response(JSON.stringify({ value: "x".repeat(100) }));
+    await expect(readBoundedJsonResponseAsync(response, 32)).rejects.toThrow("exceeds 32 bytes");
+  });
+});
diff --git a/packages/api/src/router/widgets/beszel-failures.ts b/packages/api/src/router/widgets/beszel-failures.ts
new file mode 100644
index 000000000..e7d75f87d
--- /dev/null
+++ b/packages/api/src/router/widgets/beszel-failures.ts
@@ -0,0 +1,5 @@
+export const everyBeszelIntegrationFailed = (results: readonly unknown[]) =>
+  results.length > 0 &&
+  results.every(
+    (result) => typeof result === "object" && result !== null && "error" in result && result.error !== undefined,
+  );
diff --git a/packages/api/src/router/widgets/beszel.ts b/packages/api/src/router/widgets/beszel.ts
index 738adecf7..1380bc405 100644
--- a/packages/api/src/router/widgets/beszel.ts
+++ b/packages/api/src/router/widgets/beszel.ts
@@ -13,6 +13,7 @@ import {
 import { settleIntegrationQueries } from "../../settle-integrations";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
+import { everyBeszelIntegrationFailed } from "./beszel-failures";
 import { BoundedAsyncQueue } from "./bounded-async-queue";
 
 const logger = createLogger({ module: "beszelRouter" });
@@ -20,6 +21,20 @@ const MAX_PENDING_LIVE_EVENTS = 4;
 
 const errorMessage = (error: unknown) => (error instanceof Error ? error.message : String(error));
 
+function throwIfEveryBeszelIntegrationFailed(results: readonly unknown[], operation: string) {
+  if (everyBeszelIntegrationFailed(results)) {
+    const firstError = results[0];
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message: `Every Beszel integration failed while loading ${operation}: ${
+        typeof firstError === "object" && firstError !== null && "error" in firstError
+          ? String(firstError.error)
+          : "unknown error"
+      }`,
+    });
+  }
+}
+
 export const beszelRouter = createTRPCRouter({
   getSystems: publicProcedure
     .meta({
@@ -63,6 +78,7 @@ export const beszelRouter = createTRPCRouter({
         resultCount: results.length,
         errorCount: results.filter((r) => "error" in r).length,
       });
+      throwIfEveryBeszelIntegrationFailed(results, "systems");
       return results;
     }),
 
@@ -136,6 +152,7 @@ export const beszelRouter = createTRPCRouter({
         resultCount: results.length,
         errorCount: results.filter((r) => "error" in r).length,
       });
+      throwIfEveryBeszelIntegrationFailed(results, "alerts");
       return results;
     }),
 
diff --git a/packages/api/src/router/widgets/calendar.ts b/packages/api/src/router/widgets/calendar.ts
index 729e82634..68d968412 100644
--- a/packages/api/src/router/widgets/calendar.ts
+++ b/packages/api/src/router/widgets/calendar.ts
@@ -1,16 +1,13 @@
 import { z } from "zod/v4";
 
-import { createLogger } from "@homarr/core/infrastructure/logs";
-import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { radarrReleaseTypes } from "@homarr/integrations/types";
 import { calendarMonthRequestHandler } from "@homarr/request-handler/calendar";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
+import { settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
-const logger = createLogger({ module: "calendarRouter" });
-
 export const calendarRouter = createTRPCRouter({
   findAllEvents: publicProcedure
     .meta({
@@ -30,39 +27,19 @@ export const calendarRouter = createTRPCRouter({
     )
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("calendar")))
     .query(async ({ ctx, input }) => {
-      const settled = await Promise.allSettled(
-        ctx.integrations.map(async (integration) => {
-          const { integrationIds: _integrationIds, ...handlerInput } = input;
-          const innerHandler = calendarMonthRequestHandler.handler(integration, handlerInput);
-          const { data } = await innerHandler.getDataAsync();
+      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
+        const { integrationIds: _integrationIds, ...handlerInput } = input;
+        const innerHandler = calendarMonthRequestHandler.handler(integration, handlerInput);
+        const { data } = await innerHandler.getDataAsync();
 
-          return {
-            events: data,
-            integration: {
-              id: integration.id,
-              name: integration.name,
-              kind: integration.kind,
-            },
-          };
-        }),
-      );
-
-      return settled.flatMap((result, index) => {
-        if (result.status === "fulfilled") {
-          return [result.value];
-        }
-        const integration = ctx.integrations[index];
-        logger.warn(
-          new ErrorWithMetadata(
-            "Calendar integration request failed; skipping events for this integration",
-            {
-              integrationId: integration?.id,
-              integrationKind: integration?.kind,
-            },
-            { cause: result.reason },
-          ),
-        );
-        return [];
+        return {
+          events: data,
+          integration: {
+            id: integration.id,
+            name: integration.name,
+            kind: integration.kind,
+          },
+        };
       });
     }),
 });
diff --git a/packages/api/src/router/widgets/custom-api-security.ts b/packages/api/src/router/widgets/custom-api-security.ts
new file mode 100644
index 000000000..ec2d5c81f
--- /dev/null
+++ b/packages/api/src/router/widgets/custom-api-security.ts
@@ -0,0 +1,21 @@
+import { readBoundedJsonResponseAsync as readBoundedJsonResponse } from "@homarr/common/server";
+
+export const MAX_CUSTOM_API_RESPONSE_BYTES = 2 * 1024 * 1024;
+
+export function validateCustomApiUrl(urlString: string): URL {
+  if (urlString.length > 2_048) throw new Error("Custom API URL is too long");
+
+  const url = new URL(urlString);
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new Error("Custom API URL must use HTTP or HTTPS");
+  }
+  if (url.username || url.password) throw new Error("Custom API URL must not contain credentials");
+  return url;
+}
+
+export async function readBoundedJsonResponseAsync(
+  response: Response,
+  maxBytes = MAX_CUSTOM_API_RESPONSE_BYTES,
+): Promise<unknown> {
+  return await readBoundedJsonResponse(response, maxBytes, "Custom API response");
+}
diff --git a/packages/api/src/router/widgets/custom-api.ts b/packages/api/src/router/widgets/custom-api.ts
index 09fafa880..a306e71ca 100644
--- a/packages/api/src/router/widgets/custom-api.ts
+++ b/packages/api/src/router/widgets/custom-api.ts
@@ -9,13 +9,12 @@ import { createLogger } from "@homarr/core/infrastructure/logs";
 import { createTRPCRouter, protectedProcedure } from "../../trpc";
 import { applyAuth } from "../custom-widget/auth";
 import { extractActionButtonDisplay, extractDisplayDataWithFallback } from "../custom-widget/display-data";
+import { readBoundedJsonResponseAsync, validateCustomApiUrl } from "./custom-api-security";
 
 const logger = createLogger({ module: "widget:customApi" });
 
 const FETCH_TIMEOUT_MS = 10_000;
 
-const validateUrl = (urlString: string): URL => new URL(urlString);
-
 export const customApiRouter = createTRPCRouter({
   getData: protectedProcedure.input(z.object({ definitionId: z.string() })).query(async ({ ctx, input }) => {
     const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
@@ -47,7 +46,7 @@ export const customApiRouter = createTRPCRouter({
       value: decryptSecret(s.value),
     }));
 
-    const url = validateUrl(definition.url);
+    const url = validateCustomApiUrl(definition.url);
     const headers = new Headers({ Accept: "application/json" });
 
     if (definition.method !== "GET" && definition.requestBody) {
@@ -64,7 +63,7 @@ export const customApiRouter = createTRPCRouter({
         method: definition.method,
         headers,
         body: definition.method !== "GET" ? definition.requestBody : undefined,
-        redirect: "follow",
+        redirect: "error",
         signal: controller.signal,
       });
 
@@ -75,7 +74,7 @@ export const customApiRouter = createTRPCRouter({
         });
       }
 
-      const json: unknown = await response.json();
+      const json = await readBoundedJsonResponseAsync(response);
       return extractDisplayDataWithFallback(json, definition.displayType, displayConfig);
     } catch (error) {
       if (error instanceof TRPCError) throw error;
diff --git a/packages/api/src/router/widgets/firewall.ts b/packages/api/src/router/widgets/firewall.ts
index 08951da7c..fdeb77831 100644
--- a/packages/api/src/router/widgets/firewall.ts
+++ b/packages/api/src/router/widgets/firewall.ts
@@ -18,20 +18,33 @@ const queryFirewall = <
   },
 >(
   handler: THandler,
+  createFallback: () => Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
 ) =>
   publicProcedure.concat(firewallMiddleware).query(async ({ ctx }) =>
-    settleIntegrationQueries(ctx.integrations, async (integration) => {
-      const { data, timestamp } = await handler.handler(integration, {}).getDataAsync();
-      return {
-        integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
-        summary: data as Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
-      };
-    }),
+    settleIntegrationQueries(
+      ctx.integrations,
+      async (integration) => {
+        const { data, timestamp } = await handler.handler(integration, {}).getDataAsync();
+        return {
+          integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: timestamp },
+          summary: data as Awaited<ReturnType<ReturnType<THandler["handler"]>["getDataAsync"]>>["data"],
+          error: undefined as string | undefined,
+        };
+      },
+      {
+        fallback: (integration, error) => ({
+          integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: new Date(0) },
+          summary: createFallback(),
+          error: error instanceof Error ? error.message : "Integration request failed",
+        }),
+        throwOnAllFailures: true,
+      },
+    ),
   );
 
 export const firewallRouter = createTRPCRouter({
-  getFirewallCpuStatus: queryFirewall(firewallCpuRequestHandler),
-  getFirewallInterfacesStatus: queryFirewall(firewallInterfacesRequestHandler),
-  getFirewallVersionStatus: queryFirewall(firewallVersionRequestHandler),
-  getFirewallMemoryStatus: queryFirewall(firewallMemoryRequestHandler),
+  getFirewallCpuStatus: queryFirewall(firewallCpuRequestHandler, () => ({ total: 0 })),
+  getFirewallInterfacesStatus: queryFirewall(firewallInterfacesRequestHandler, () => []),
+  getFirewallVersionStatus: queryFirewall(firewallVersionRequestHandler, () => ({ version: "Unknown" })),
+  getFirewallMemoryStatus: queryFirewall(firewallMemoryRequestHandler, () => ({ used: 0, total: 0, percent: 0 })),
 });
diff --git a/packages/api/src/router/widgets/indexer-manager.ts b/packages/api/src/router/widgets/indexer-manager.ts
index 54a949dab..fe411d9be 100644
--- a/packages/api/src/router/widgets/indexer-manager.ts
+++ b/packages/api/src/router/widgets/indexer-manager.ts
@@ -16,15 +16,29 @@ export const indexerManagerRouter = createTRPCRouter({
   getIndexersStatus: publicProcedure
     .concat(createIndexerManagerIntegrationMiddleware("query"))
     .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const innerHandler = indexerManagerRequestHandler.handler(integration, {});
-        const { data: indexers } = await innerHandler.getDataAsync();
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const innerHandler = indexerManagerRequestHandler.handler(integration, {});
+          const { data: indexers } = await innerHandler.getDataAsync();
 
-        return {
-          integrationId: integration.id,
-          indexers,
-        };
-      });
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            indexers,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            indexers: [],
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
   testAllIndexers: protectedProcedure
     .concat(createIndexerManagerIntegrationMiddleware("interact"))
diff --git a/packages/api/src/router/widgets/media-organizer.ts b/packages/api/src/router/widgets/media-organizer.ts
index dd0d687cb..2f38423f1 100644
--- a/packages/api/src/router/widgets/media-organizer.ts
+++ b/packages/api/src/router/widgets/media-organizer.ts
@@ -4,6 +4,7 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { mediaOrganizerRequestHandler } from "@homarr/request-handler/media-organizer";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
+import { settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const mediaOrganizerRouter = createTRPCRouter({
@@ -18,16 +19,30 @@ export const mediaOrganizerRouter = createTRPCRouter({
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaOrganizer")))
     .input(z.object({ pageSize: z.number().min(1).max(50).default(10) }))
     .query(async ({ ctx, input }) => {
-      const results = await Promise.all(
-        ctx.integrations.map(async (integration) => {
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
           const innerHandler = mediaOrganizerRequestHandler.handler(integration, { pageSize: input.pageSize });
           const { data } = await innerHandler.getDataAsync();
           return {
             integrationId: integration.id,
+            integrationName: integration.name,
             ...data,
+            error: undefined as string | undefined,
           };
-        }),
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            missing: [],
+            missingCount: 0,
+            queued: [],
+            queuedCount: 0,
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
       );
-      return results;
     }),
 });
diff --git a/packages/api/src/router/widgets/media-requests.ts b/packages/api/src/router/widgets/media-requests.ts
index fbd192499..eb13b25d1 100644
--- a/packages/api/src/router/widgets/media-requests.ts
+++ b/packages/api/src/router/widgets/media-requests.ts
@@ -34,6 +34,7 @@ export const mediaRequestsRouter = createTRPCRouter({
           data.map((request) => ({
             ...request,
             integrationId: integration.id,
+            integration,
           })),
         )
         .toSorted((dataA, dataB) => {
@@ -99,5 +100,6 @@ export const mediaRequestsRouter = createTRPCRouter({
       } as const;
 
       await answerActions[input.answer](input.requestId);
+      return { success: true };
     }),
 });
diff --git a/packages/api/src/router/widgets/media-server.ts b/packages/api/src/router/widgets/media-server.ts
index 591d58d2b..80ce9018d 100644
--- a/packages/api/src/router/widgets/media-server.ts
+++ b/packages/api/src/router/widgets/media-server.ts
@@ -27,7 +27,12 @@ export const mediaServerRouter = createTRPCRouter({
         const { data } = await mediaServerRequestHandler
           .handler(integration, { showOnlyPlaying: input.showOnlyPlaying })
           .getDataAsync();
-        return { integrationId: integration.id, integrationKind: integration.kind, sessions: data };
+        return {
+          integrationId: integration.id,
+          integrationName: integration.name,
+          integrationKind: integration.kind,
+          sessions: data,
+        };
       });
     }),
 });
diff --git a/packages/api/src/router/widgets/notifications.ts b/packages/api/src/router/widgets/notifications.ts
index bae8ba9fd..86124164c 100644
--- a/packages/api/src/router/widgets/notifications.ts
+++ b/packages/api/src/router/widgets/notifications.ts
@@ -13,19 +13,36 @@ export const notificationsRouter = createTRPCRouter({
   getNotifications: publicProcedure
     .unstable_concat(createNotificationsIntegrationMiddleware("query"))
     .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const innerHandler = notificationsRequestHandler.handler(integration, {});
-        const { data, timestamp } = await innerHandler.getDataAsync();
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const innerHandler = notificationsRequestHandler.handler(integration, {});
+          const { data, timestamp } = await innerHandler.getDataAsync();
 
-        return {
-          integration: {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-            updatedAt: timestamp,
-          },
-          data,
-        };
-      });
+          return {
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: timestamp,
+            },
+            data,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: new Date(0),
+            },
+            data: [],
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/api/src/router/widgets/rssFeed.ts b/packages/api/src/router/widgets/rssFeed.ts
index 5e43efe3e..56fa10fd1 100644
--- a/packages/api/src/router/widgets/rssFeed.ts
+++ b/packages/api/src/router/widgets/rssFeed.ts
@@ -34,6 +34,11 @@ export const rssFeedRouter = createTRPCRouter({
       }),
     );
 
+    const failures = settled.filter((result) => result.status === "rejected");
+    if (settled.length > 0 && failures.length === settled.length) {
+      throw failures[0]?.reason;
+    }
+
     return settled
       .flatMap((result, index) => {
         if (result.status === "fulfilled") return result.value.data.entries;
diff --git a/packages/api/src/router/widgets/smart-home.ts b/packages/api/src/router/widgets/smart-home.ts
index c37468752..a0f38c7fa 100644
--- a/packages/api/src/router/widgets/smart-home.ts
+++ b/packages/api/src/router/widgets/smart-home.ts
@@ -1,8 +1,12 @@
 import { z } from "zod/v4";
+import { TRPCError } from "@trpc/server";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
-import { smartHomeEntityStateRequestHandler } from "@homarr/request-handler/smart-home-entity-state";
+import {
+  smartHomeEntityStateRequestHandler,
+  toSafeEntityDetails,
+} from "@homarr/request-handler/smart-home-entity-state";
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createOneIntegrationMiddleware } from "../../middlewares/integration";
@@ -25,7 +29,22 @@ export const smartHomeRouter = createTRPCRouter({
     .query(async ({ ctx: { integration }, input }) => {
       const innerHandler = smartHomeEntityStateRequestHandler.handler(integration, { entityId: input.entityId });
       const { data } = await innerHandler.getDataAsync();
-      return data;
+      return data.state;
+    }),
+  entityDetails: publicProcedure
+    .meta({
+      mcp: {
+        enabled: true,
+        description:
+          "Get the state, attributes, and update timestamps for a Home Assistant entity. REQUIRED: integrationId (Home Assistant integration ID), entityId (for example 'sensor.temperature')",
+      },
+    })
+    .input(z.object({ entityId: z.string() }))
+    .concat(createSmartHomeIntegrationMiddleware("query"))
+    .query(async ({ ctx: { integration }, input }) => {
+      const innerHandler = smartHomeEntityStateRequestHandler.handler(integration, { entityId: input.entityId });
+      const { data } = await innerHandler.getDataAsync();
+      return toSafeEntityDetails(data);
     }),
   switchEntity: protectedProcedure
     .meta({
@@ -40,8 +59,10 @@ export const smartHomeRouter = createTRPCRouter({
     .mutation(async ({ ctx: { integration }, input }) => {
       const client = await createIntegrationAsync(integration);
       const success = await client.triggerToggleAsync(input.entityId);
-
-      return success;
+      if (!success) {
+        throw new TRPCError({ code: "BAD_GATEWAY", message: "Home Assistant did not toggle the entity" });
+      }
+      return true;
     }),
   executeAutomation: protectedProcedure
     .meta({
@@ -55,6 +76,10 @@ export const smartHomeRouter = createTRPCRouter({
     .input(z.object({ automationId: z.string() }))
     .mutation(async ({ ctx: { integration }, input }) => {
       const client = await createIntegrationAsync(integration);
-      await client.triggerAutomationAsync(input.automationId);
+      const success = await client.triggerAutomationAsync(input.automationId);
+      if (!success) {
+        throw new TRPCError({ code: "BAD_GATEWAY", message: "Home Assistant did not execute the automation" });
+      }
+      return true;
     }),
 });
diff --git a/packages/api/src/router/widgets/timetable.ts b/packages/api/src/router/widgets/timetable.ts
index ef60ce320..84f680382 100644
--- a/packages/api/src/router/widgets/timetable.ts
+++ b/packages/api/src/router/widgets/timetable.ts
@@ -1,36 +1,90 @@
+import { TRPCError } from "@trpc/server";
+import { parse } from "superjson";
 import z from "zod";
 
+import type { Session } from "@homarr/auth";
+import type { Database } from "@homarr/db";
+import { and, eq } from "@homarr/db";
+import { boards, items } from "@homarr/db/schema";
 import {
   timetableGetTimetableRequestHandler,
   timetableSearchStationsRequestHandler,
 } from "@homarr/request-handler/timetable";
+import { DEFAULT_TIMETABLE_BASE_URL, normalizeTimetableBaseUrl } from "@homarr/request-handler/timetable-url";
 
 import { createTRPCRouter, publicProcedure } from "../../trpc";
+import { throwIfActionForbiddenAsync } from "../board/board-access";
 
-const baseUrlSchema = z.string().url();
+const baseUrlSchema = z.string().url().max(2_048);
+const timetableSourceSchema = z.object({
+  baseUrl: baseUrlSchema,
+  itemId: z.string().max(100).optional(),
+  boardId: z.string().max(100).optional(),
+});
+
+const resolveTimetableBaseUrlAsync = async (
+  ctx: { db: Database; session: Session | null },
+  input: z.infer<typeof timetableSourceSchema>,
+  allowBoardConfiguration = false,
+) => {
+  const requestedBaseUrl = normalizeTimetableBaseUrl(input.baseUrl);
+  if (allowBoardConfiguration) {
+    if (input.boardId) {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
+      return requestedBaseUrl;
+    }
+    if (requestedBaseUrl !== DEFAULT_TIMETABLE_BASE_URL) {
+      throw new TRPCError({ code: "FORBIDDEN", message: "Board modify access is required for this endpoint" });
+    }
+    return DEFAULT_TIMETABLE_BASE_URL;
+  }
+  if (!input.itemId) {
+    if (requestedBaseUrl !== DEFAULT_TIMETABLE_BASE_URL) {
+      throw new TRPCError({ code: "FORBIDDEN", message: "A saved timetable widget is required for this endpoint" });
+    }
+    return DEFAULT_TIMETABLE_BASE_URL;
+  }
+
+  const item = await ctx.db.query.items.findFirst({
+    where: and(eq(items.id, input.itemId), eq(items.kind, "timetable")),
+  });
+  if (!item) throw new TRPCError({ code: "NOT_FOUND", message: "Timetable widget not found" });
+
+  await throwIfActionForbiddenAsync(ctx, eq(boards.id, item.boardId), "view");
+  const options = parse<Record<string, unknown>>(item.options);
+  const savedBaseUrl = normalizeTimetableBaseUrl(
+    typeof options.baseUrl === "string" ? options.baseUrl : DEFAULT_TIMETABLE_BASE_URL,
+  );
+  if (requestedBaseUrl !== savedBaseUrl) {
+    throw new TRPCError({ code: "FORBIDDEN", message: "Timetable URL does not match the saved widget" });
+  }
+  return savedBaseUrl;
+};
 
 export const timetableRouter = createTRPCRouter({
   getTimetable: publicProcedure
     .input(
-      z.object({
-        baseUrl: baseUrlSchema,
-        stationId: z.string(),
+      timetableSourceSchema.extend({
+        stationId: z.string().min(1).max(200),
         limit: z.number().int().min(1).max(100),
       }),
     )
-    .query(async ({ input }) => {
-      const { data } = await timetableGetTimetableRequestHandler.handler(input).getDataAsync();
+    .query(async ({ ctx, input }) => {
+      const baseUrl = await resolveTimetableBaseUrlAsync(ctx, input);
+      const { itemId: _itemId, boardId: _boardId, ...handlerInput } = input;
+      const { data } = await timetableGetTimetableRequestHandler.handler({ ...handlerInput, baseUrl }).getDataAsync();
       return data;
     }),
   searchStations: publicProcedure
     .input(
-      z.object({
-        baseUrl: baseUrlSchema,
-        query: z.string(),
+      timetableSourceSchema.extend({
+        query: z.string().max(200),
       }),
     )
-    .query(async ({ input }) => {
-      const { data } = await timetableSearchStationsRequestHandler.handler(input).getDataAsync();
+    .query(async ({ ctx, input }) => {
+      const baseUrl = await resolveTimetableBaseUrlAsync(ctx, input, true);
+      const { itemId: _itemId, boardId: _boardId, ...handlerInput } = input;
+      const { data } = await timetableSearchStationsRequestHandler.handler({ ...handlerInput, baseUrl }).getDataAsync();
       return data;
     }),
 });
diff --git a/packages/api/src/router/widgets/vpn.ts b/packages/api/src/router/widgets/vpn.ts
index 407e4986f..79ee5308b 100644
--- a/packages/api/src/router/widgets/vpn.ts
+++ b/packages/api/src/router/widgets/vpn.ts
@@ -9,17 +9,34 @@ export const vpnRouter = createTRPCRouter({
   getSummaries: publicProcedure
     .unstable_concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("vpn")))
     .query(async ({ ctx }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data, timestamp } = await vpnSummaryHandler.handler(integration, {}).getDataAsync();
-        return {
-          integration: {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-            updatedAt: timestamp,
-          },
-          summary: data,
-        };
-      });
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data, timestamp } = await vpnSummaryHandler.handler(integration, {}).getDataAsync();
+          return {
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: timestamp,
+            },
+            summary: data as typeof data | null,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+              updatedAt: new Date(0),
+            },
+            summary: null,
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/api/src/settle-integrations.ts b/packages/api/src/settle-integrations.ts
index a9dbff5ba..773117877 100644
--- a/packages/api/src/settle-integrations.ts
+++ b/packages/api/src/settle-integrations.ts
@@ -11,6 +11,7 @@ interface IntegrationLike {
 
 interface Options<TIntegration extends IntegrationLike, TResult> {
   fallback?: (integration: TIntegration, error: unknown) => TResult;
+  throwOnAllFailures?: boolean;
 }
 
 export async function settleIntegrationQueries<TIntegration extends IntegrationLike, TResult>(
@@ -37,15 +38,18 @@ export async function settleIntegrationQueries<TIntegration extends IntegrationL
       ),
     );
 
+    errors.push(result.reason);
+
     if (options?.fallback && integration) {
       results.push(options.fallback(integration, result.reason));
       return;
     }
-
-    errors.push(result.reason);
   });
 
-  if (results.length === 0 && errors.length > 0) {
+  if (
+    errors.length > 0 &&
+    (results.length === 0 || (options?.throwOnAllFailures === true && errors.length === integrations.length))
+  ) {
     throw errors[0];
   }
 
diff --git a/packages/api/src/test/settle-integrations.spec.ts b/packages/api/src/test/settle-integrations.spec.ts
index 09f80bc31..70024da7f 100644
--- a/packages/api/src/test/settle-integrations.spec.ts
+++ b/packages/api/src/test/settle-integrations.spec.ts
@@ -47,4 +47,21 @@ describe("settleIntegrationQueries", () => {
       }),
     ).resolves.toEqual(["First", "Second"]);
   });
+
+  test("can retain partial fallbacks while rejecting total failure", async () => {
+    const error = new Error("Integration unavailable");
+    const options = {
+      fallback: (integration: (typeof integrations)[number]) => integration.name,
+      throwOnAllFailures: true,
+    };
+
+    await expect(
+      settleIntegrationQueries(
+        integrations,
+        (integration) => (integration.id === "first" ? Promise.reject(error) : Promise.resolve(integration.name)),
+        options,
+      ),
+    ).resolves.toEqual(["First", "Second"]);
+    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error), options)).rejects.toBe(error);
+  });
 });
diff --git a/packages/boards/src/updater.spec.ts b/packages/boards/src/updater.spec.ts
new file mode 100644
index 000000000..1f78f7e97
--- /dev/null
+++ b/packages/boards/src/updater.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+
+import { getBoardSaveScopeId, shouldRefetchAfterSaveError } from "./updater";
+
+describe("board persistence coordination", () => {
+  it("uses one mutation scope for every save of the same board", () => {
+    expect(getBoardSaveScopeId("board-1")).toBe(getBoardSaveScopeId("board-1"));
+    expect(getBoardSaveScopeId("board-1")).not.toBe(getBoardSaveScopeId("board-2"));
+  });
+
+  it("only refetches after a failed save when no newer local board exists", () => {
+    const failedBoard = { id: "board-1", items: ["first"] };
+    const newerBoard = { id: "board-1", items: ["first", "second"] };
+
+    expect(shouldRefetchAfterSaveError(failedBoard, failedBoard)).toBe(true);
+    expect(shouldRefetchAfterSaveError(newerBoard, failedBoard)).toBe(false);
+  });
+});
diff --git a/packages/boards/src/updater.ts b/packages/boards/src/updater.ts
index 49a301a8c..6763c48ce 100644
--- a/packages/boards/src/updater.ts
+++ b/packages/boards/src/updater.ts
@@ -5,13 +5,19 @@ import { useCallback } from "react";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 
+type Board = RouterOutputs["board"]["getHomeBoard"];
+type UpdateCallback = (previous: Board) => Board;
+
 let boardName: string | null = null;
 
 export const updateBoardName = (name: string | null) => {
   boardName = name;
 };
 
-type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"];
+export const getBoardSaveScopeId = (boardId: string) => `board-save:${boardId}`;
+
+export const shouldRefetchAfterSaveError = <T>(currentBoard: T | undefined, failedBoard: T) =>
+  currentBoard === failedBoard;
 
 export const useUpdateBoard = () => {
   const utils = clientApi.useUtils();
@@ -21,9 +27,13 @@ export const useUpdateBoard = () => {
       if (!boardName) {
         throw new Error("Board name is not set");
       }
-      utils.board.getBoardByName.setData({ name: boardName }, (previous) =>
-        previous ? updaterWithoutUndefined(previous) : previous,
-      );
+      let updatedBoard: Board | undefined;
+      utils.board.getBoardByName.setData({ name: boardName }, (previous) => {
+        if (!previous) return previous;
+        updatedBoard = updaterWithoutUndefined(previous);
+        return updatedBoard;
+      });
+      return updatedBoard;
     },
     [utils],
   );
@@ -32,3 +42,37 @@ export const useUpdateBoard = () => {
     updateBoard,
   };
 };
+
+interface PersistBoardOptions {
+  onError?: (error: unknown) => void;
+}
+
+export const usePersistBoard = ({ id, name }: Pick<Board, "id" | "name">) => {
+  const utils = clientApi.useUtils();
+  const { updateBoard } = useUpdateBoard();
+  const { mutateAsync: saveBoardAsync } = clientApi.board.saveBoard.useMutation({
+    scope: { id: getBoardSaveScopeId(id) },
+  });
+
+  const updateAndPersistBoard = useCallback(
+    (updater: UpdateCallback, options?: PersistBoardOptions) => {
+      const updatedBoard = updateBoard(updater);
+      if (!updatedBoard) return undefined;
+      const persistedBoard = utils.board.getBoardByName.getData({ name });
+      if (!persistedBoard) return undefined;
+
+      void saveBoardAsync(persistedBoard).catch((error: unknown) => {
+        const currentBoard = utils.board.getBoardByName.getData({ name });
+        if (shouldRefetchAfterSaveError(currentBoard, persistedBoard)) {
+          void utils.board.getBoardByName.invalidate({ name });
+        }
+        options?.onError?.(error);
+      });
+
+      return persistedBoard;
+    },
+    [name, saveBoardAsync, updateBoard, utils],
+  );
+
+  return { updateAndPersistBoard };
+};
diff --git a/packages/common/src/bounded-response.ts b/packages/common/src/bounded-response.ts
new file mode 100644
index 000000000..d1432fb39
--- /dev/null
+++ b/packages/common/src/bounded-response.ts
@@ -0,0 +1,45 @@
+interface ReadableResponse {
+  headers: { get: (name: string) => string | null };
+  body: {
+    getReader: () => {
+      read: () => Promise<{ done: boolean; value?: Uint8Array }>;
+      cancel: () => Promise<void>;
+    };
+  } | null;
+}
+
+export async function readBoundedJsonResponseAsync(
+  response: ReadableResponse,
+  maxBytes: number,
+  label = "Response",
+): Promise<unknown> {
+  const declaredLength = Number(response.headers.get("content-length"));
+  if (Number.isFinite(declaredLength) && declaredLength > maxBytes) {
+    throw new Error(`${label} exceeds ${maxBytes} bytes`);
+  }
+
+  if (!response.body) return null;
+
+  const reader = response.body.getReader();
+  const chunks: Uint8Array[] = [];
+  let byteLength = 0;
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    if (!value) continue;
+    byteLength += value.byteLength;
+    if (byteLength > maxBytes) {
+      await reader.cancel();
+      throw new Error(`${label} exceeds ${maxBytes} bytes`);
+    }
+    chunks.push(value);
+  }
+
+  const body = new Uint8Array(byteLength);
+  let offset = 0;
+  for (const chunk of chunks) {
+    body.set(chunk, offset);
+    offset += chunk.byteLength;
+  }
+  return JSON.parse(new TextDecoder().decode(body)) as unknown;
+}
diff --git a/packages/common/src/server.ts b/packages/common/src/server.ts
index d6e62d5b9..502ae5f6b 100644
--- a/packages/common/src/server.ts
+++ b/packages/common/src/server.ts
@@ -2,3 +2,4 @@ export * from "./security";
 export * from "./encryption";
 export * from "./request";
 export * from "./errors";
+export * from "./bounded-response";
diff --git a/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts b/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts
index 441d7fe3a..2dee921d0 100644
--- a/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts
+++ b/packages/integrations/src/audiobookshelf/audiobookshelf-integration.ts
@@ -54,6 +54,7 @@ export class AudiobookshelfIntegration extends Integration {
 
     const statsByLibrary = await Promise.all(
       libraries.map(async (library) => ({
+        library,
         mediaType: library.mediaType,
         stats: await this.getLibraryStatsAsync(library.id),
       })),
@@ -75,6 +76,14 @@ export class AudiobookshelfIntegration extends Integration {
       totalPodcasts: counts.totalPodcasts,
       totalListeningTimeSeconds: listeningStats.totalTime,
       activeSessions,
+      libraries: statsByLibrary.map(({ library, stats }) => ({
+        id: library.id,
+        name: library.name,
+        mediaType: library.mediaType,
+        totalItems: stats.totalItems,
+        totalDurationSeconds: stats.totalDuration ?? null,
+        totalSizeBytes: stats.totalSize ?? null,
+      })),
     };
   }
 
diff --git a/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts b/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts
index 495a24c08..4c853c139 100644
--- a/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts
+++ b/packages/integrations/src/audiobookshelf/audiobookshelf-types.ts
@@ -30,6 +30,14 @@ export interface AudiobookshelfDashboardData {
   totalPodcasts: number;
   totalListeningTimeSeconds: number;
   activeSessions: number;
+  libraries?: {
+    id: string;
+    name: string;
+    mediaType: "book" | "podcast";
+    totalItems: number;
+    totalDurationSeconds: number | null;
+    totalSizeBytes: number | null;
+  }[];
 }
 
 export type AudiobookshelfLibrary = z.infer<typeof audiobookshelfLibrarySchema>;
diff --git a/packages/integrations/src/immich/immich-integration.ts b/packages/integrations/src/immich/immich-integration.ts
index 9496482d6..ce4892d10 100644
--- a/packages/integrations/src/immich/immich-integration.ts
+++ b/packages/integrations/src/immich/immich-integration.ts
@@ -36,7 +36,6 @@ export interface ImmichAlbum {
 
 export interface ImmichAsset {
   id: string;
-  originalPath: string;
   thumbhash: string | null;
   fileModifiedAt: string;
   fileCreatedAt: string;
@@ -156,7 +155,6 @@ export class ImmichIntegration extends Integration {
           thumbhash: asset.thumbhash,
           fileCreatedAt: asset.fileCreatedAt,
           fileModifiedAt: asset.fileModifiedAt,
-          originalPath: asset.originalPath,
           updatedAt: asset.updatedAt,
           publicLink,
         };
diff --git a/packages/integrations/src/index.ts b/packages/integrations/src/index.ts
index f172cec36..71b0652fc 100644
--- a/packages/integrations/src/index.ts
+++ b/packages/integrations/src/index.ts
@@ -61,6 +61,7 @@ export type { SystemHealthMonitoring } from "./interfaces/health-monitoring/heal
 export { UpstreamMediaRequestStatus } from "./interfaces/media-requests/media-request-types";
 export type { MediaRequestList, MediaRequestStats } from "./interfaces/media-requests/media-request-types";
 export type { StreamSession } from "./interfaces/media-server/media-server-types";
+export type { EntityState } from "./interfaces/smart-home/smart-home-types";
 export type {
   TdarrQueue,
   TdarrPieSegment,
diff --git a/packages/integrations/src/interfaces/smart-home/smart-home-types.ts b/packages/integrations/src/interfaces/smart-home/smart-home-types.ts
index efc113dc7..2208c4953 100644
--- a/packages/integrations/src/interfaces/smart-home/smart-home-types.ts
+++ b/packages/integrations/src/interfaces/smart-home/smart-home-types.ts
@@ -1,4 +1,4 @@
-interface EntityState {
+export interface EntityState {
   attributes: Record<string, string | number | boolean | null | (string | number)[]>;
   entity_id: string;
   last_changed: Date;
diff --git a/packages/integrations/src/overseerr/overseerr-integration.spec.ts b/packages/integrations/src/overseerr/overseerr-integration.spec.ts
new file mode 100644
index 000000000..1fc4484d0
--- /dev/null
+++ b/packages/integrations/src/overseerr/overseerr-integration.spec.ts
@@ -0,0 +1,30 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { OverseerrIntegration } from "./overseerr-integration";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({ fetchWithTrustedCertificatesAsync: vi.fn() }));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+const integration = new OverseerrIntegration({
+  id: "overseerr-1",
+  name: "Overseerr",
+  url: "https://overseerr.example.com",
+  externalUrl: null,
+  decryptedSecrets: [{ kind: "apiKey", value: "test-key" }],
+});
+
+describe("Overseerr media request actions", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it.each([
+    ["approve", () => integration.approveRequestAsync(42)],
+    ["decline", () => integration.declineRequestAsync(42)],
+  ])("rejects %s when Overseerr returns a non-success response", async (_action, run) => {
+    mockFetch.mockResolvedValue(new Response(null, { status: 500 }));
+
+    await expect(run()).rejects.toThrow("Response from integration did not indicate success");
+  });
+});
diff --git a/packages/integrations/src/overseerr/overseerr-integration.ts b/packages/integrations/src/overseerr/overseerr-integration.ts
index 9de482008..226cebbf3 100644
--- a/packages/integrations/src/overseerr/overseerr-integration.ts
+++ b/packages/integrations/src/overseerr/overseerr-integration.ts
@@ -1,8 +1,8 @@
 import { z } from "zod/v4";
 
+import { ResponseError } from "@homarr/common/server";
 import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 import { createLogger } from "@homarr/core/infrastructure/logs";
-import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 
 import type { IntegrationTestingInput } from "../base/integration";
 import { Integration } from "../base/integration";
@@ -253,49 +253,27 @@ export class OverseerrIntegration
 
   public async approveRequestAsync(requestId: number): Promise<void> {
     logger.info("Approving media request", { requestId, integration: this.integration.name });
-    await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/approve`), {
+    const response = await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/approve`), {
       method: "POST",
       headers: {
         "X-Api-Key": this.getSecretValue("apiKey"),
       },
-    }).then((response) => {
-      if (!response.ok) {
-        logger.error(
-          new ErrorWithMetadata("Failed to approve media request", {
-            requestId,
-            integration: this.integration.name,
-            reason: `${response.status} ${response.statusText}`,
-            url: response.url,
-          }),
-        );
-      }
-
-      logger.info("Successfully approved media request", { requestId, integration: this.integration.name });
     });
+    if (!response.ok) throw new ResponseError(response);
+    logger.info("Successfully approved media request", { requestId, integration: this.integration.name });
   }
 
   public async declineRequestAsync(requestId: number): Promise<void> {
     logger.info("Declining media request", { requestId, integration: this.integration.name });
 
-    await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/decline`), {
+    const response = await fetchWithTrustedCertificatesAsync(this.url(`/api/v1/request/${requestId}/decline`), {
       method: "POST",
       headers: {
         "X-Api-Key": this.getSecretValue("apiKey"),
       },
-    }).then((response) => {
-      if (!response.ok) {
-        logger.error(
-          new ErrorWithMetadata("Failed to decline media request", {
-            requestId,
-            integration: this.integration.name,
-            reason: `${response.status} ${response.statusText}`,
-            url: response.url,
-          }),
-        );
-      }
-
-      logger.info("Successfully declined media request", { requestId, integration: this.integration.name });
     });
+    if (!response.ok) throw new ResponseError(response);
+    logger.info("Successfully declined media request", { requestId, integration: this.integration.name });
   }
 
   private async getItemInformationAsync(id: number, type: MediaRequest["type"]): Promise<MediaInformation> {
diff --git a/packages/integrations/src/patchmon/patchmon-types.ts b/packages/integrations/src/patchmon/patchmon-types.ts
index 1f912d6c9..96c3db293 100644
--- a/packages/integrations/src/patchmon/patchmon-types.ts
+++ b/packages/integrations/src/patchmon/patchmon-types.ts
@@ -52,9 +52,9 @@ const mapOsDistributionEntry = (
   osVersion: entry.os_version,
 });
 
-export const parsePatchMonStatsResponseAsync = async (
-  response: { json: () => Promise<unknown> },
-): Promise<z.infer<typeof patchmonStatsResponseSchema>> => {
+export const parsePatchMonStatsResponseAsync = async (response: {
+  json: () => Promise<unknown>;
+}): Promise<z.infer<typeof patchmonStatsResponseSchema>> => {
   let json: unknown;
   try {
     json = await response.json();
@@ -82,7 +82,5 @@ export const mapPatchMonStats = (data: z.infer<typeof patchmonStatsResponseSchem
   totalOutdatedPackages: data.total_outdated_packages,
   totalRepos: data.total_repos,
   lastUpdated: data.last_updated,
-  osDistribution: [...data.os_distribution]
-    .map(mapOsDistributionEntry)
-    .sort((a, b) => b.count - a.count),
+  osDistribution: [...data.os_distribution].map(mapOsDistributionEntry).sort((a, b) => b.count - a.count),
 });
diff --git a/packages/integrations/src/plex/test/plex-integration.spec.ts b/packages/integrations/src/plex/test/plex-integration.spec.ts
index 64e046256..2a7284b64 100644
--- a/packages/integrations/src/plex/test/plex-integration.spec.ts
+++ b/packages/integrations/src/plex/test/plex-integration.spec.ts
@@ -137,4 +137,4 @@ describe("PlexIntegration.getMediaReleasesAsync", () => {
       },
     ]);
   });
-});
\ No newline at end of file
+});
diff --git a/packages/integrations/src/traefik/traefik-bounds.spec.ts b/packages/integrations/src/traefik/traefik-bounds.spec.ts
new file mode 100644
index 000000000..1f14aff89
--- /dev/null
+++ b/packages/integrations/src/traefik/traefik-bounds.spec.ts
@@ -0,0 +1,12 @@
+import { Response } from "undici";
+import { describe, expect, it } from "vitest";
+
+import { readBoundedTraefikJsonAsync } from "./traefik-bounds";
+
+describe("readBoundedTraefikJsonAsync", () => {
+  it("rejects a response that exceeds its byte budget", async () => {
+    const response = new Response(JSON.stringify({ value: "x".repeat(100) }));
+
+    await expect(readBoundedTraefikJsonAsync(response, 32)).rejects.toThrow("exceeds 32 bytes");
+  });
+});
diff --git a/packages/integrations/src/traefik/traefik-bounds.ts b/packages/integrations/src/traefik/traefik-bounds.ts
new file mode 100644
index 000000000..99a6c8b1b
--- /dev/null
+++ b/packages/integrations/src/traefik/traefik-bounds.ts
@@ -0,0 +1,12 @@
+import type { Response } from "undici";
+
+import { readBoundedJsonResponseAsync as readBoundedJsonResponse } from "@homarr/common/server";
+
+export const MAX_TRAEFIK_RESPONSE_BYTES = 2 * 1024 * 1024;
+
+export async function readBoundedTraefikJsonAsync(
+  response: Response,
+  maxBytes = MAX_TRAEFIK_RESPONSE_BYTES,
+): Promise<unknown> {
+  return await readBoundedJsonResponse(response, maxBytes, "Traefik response");
+}
diff --git a/packages/integrations/src/traefik/traefik-integration.spec.ts b/packages/integrations/src/traefik/traefik-integration.spec.ts
new file mode 100644
index 000000000..ced92e33a
--- /dev/null
+++ b/packages/integrations/src/traefik/traefik-integration.spec.ts
@@ -0,0 +1,43 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { TraefikIntegration } from "./traefik-integration";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({ fetchWithTrustedCertificatesAsync: vi.fn() }));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+const integration = new TraefikIntegration({
+  id: "traefik-1",
+  name: "Traefik",
+  url: "https://traefik.example.com",
+  externalUrl: null,
+  decryptedSecrets: [],
+});
+
+describe("TraefikIntegration response bounds", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockFetch.mockImplementation((url) => {
+      const path = new URL(url.toString()).pathname;
+      if (path === "/api/version") return Promise.resolve(jsonResponse({ Version: "3.0.0" }));
+      if (path === "/api/http/routers") {
+        return Promise.resolve(
+          jsonResponse(Array.from({ length: 250 }, (_, index) => ({ name: `router-${index}`, status: "enabled" }))),
+        );
+      }
+      return Promise.resolve(jsonResponse([]));
+    });
+  });
+
+  it("caps detailed resource allocation while retaining bounded summary counts", async () => {
+    const result = await integration.getDashboardDataAsync();
+
+    expect(result.resources).toHaveLength(200);
+    expect(result.resources.at(-1)?.name).toBe("router-199");
+    expect(result.http.routers.total).toBe(250);
+  });
+});
+
+const jsonResponse = (body: unknown) => new Response(JSON.stringify(body), { status: 200 });
diff --git a/packages/integrations/src/traefik/traefik-integration.ts b/packages/integrations/src/traefik/traefik-integration.ts
index 0dc8cf57f..2e0e72b4c 100644
--- a/packages/integrations/src/traefik/traefik-integration.ts
+++ b/packages/integrations/src/traefik/traefik-integration.ts
@@ -4,10 +4,12 @@ import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/h
 import type { IntegrationTestingInput } from "../base/integration";
 import { Integration } from "../base/integration";
 import type { TestingResult } from "../base/test-connection/test-connection-service";
+import { readBoundedTraefikJsonAsync } from "./traefik-bounds";
 import type {
   TraefikDashboardData,
   TraefikProtocolSummary,
   TraefikResource,
+  TraefikResourceDetail,
   TraefikResourceStatus,
   TraefikResourceSummary,
 } from "./traefik-types";
@@ -24,6 +26,8 @@ type ResourcePath =
   | "/api/udp/services"
   | "/api/entrypoints";
 
+const MAX_RESOURCE_DETAILS = 200;
+
 export class TraefikIntegration extends Integration {
   protected async testingAsync(input: IntegrationTestingInput): Promise<TestingResult> {
     const response = await input.fetchAsync(this.url("/api/version"), { headers: this.getAuthHeaders() });
@@ -32,7 +36,7 @@ export class TraefikIntegration extends Integration {
       throw new ResponseError(response);
     }
 
-    traefikVersionSchema.parse(await response.json());
+    traefikVersionSchema.parse(await readBoundedTraefikJsonAsync(response));
     return { success: true };
   }
 
@@ -60,6 +64,38 @@ export class TraefikIntegration extends Integration {
       this.getResourcesAsync("/api/udp/routers"),
       this.getResourcesAsync("/api/udp/services"),
     ]);
+
+    const allResults = [
+      versionResult,
+      entryPointsResult,
+      httpRoutersResult,
+      httpServicesResult,
+      httpMiddlewaresResult,
+      tcpRoutersResult,
+      tcpServicesResult,
+      tcpMiddlewaresResult,
+      udpRoutersResult,
+      udpServicesResult,
+    ];
+    if (allResults.every((result) => result.status === "rejected")) {
+      throw versionResult.status === "rejected" ? versionResult.reason : new Error("Every Traefik endpoint failed");
+    }
+
+    const endpointResults = [
+      ["version", versionResult],
+      ["entrypoints", entryPointsResult],
+      ["http/routers", httpRoutersResult],
+      ["http/services", httpServicesResult],
+      ["http/middlewares", httpMiddlewaresResult],
+      ["tcp/routers", tcpRoutersResult],
+      ["tcp/services", tcpServicesResult],
+      ["tcp/middlewares", tcpMiddlewaresResult],
+      ["udp/routers", udpRoutersResult],
+      ["udp/services", udpServicesResult],
+    ] as const;
+    const failedEndpoints = endpointResults
+      .filter(([, result]) => result.status === "rejected")
+      .map(([endpoint]) => endpoint);
     const version = versionResult.status === "fulfilled" ? versionResult.value : null;
     const entryPoints = entryPointsResult.status === "fulfilled" ? entryPointsResult.value : [];
     const httpRouters = httpRoutersResult.status === "fulfilled" ? httpRoutersResult.value : [];
@@ -71,9 +107,30 @@ export class TraefikIntegration extends Integration {
     const udpRouters = udpRoutersResult.status === "fulfilled" ? udpRoutersResult.value : [];
     const udpServices = udpServicesResult.status === "fulfilled" ? udpServicesResult.value : [];
 
+    const resources: TraefikResourceDetail[] = [];
+    const resourceGroups = [
+      ["http", "router", httpRouters],
+      ["http", "service", httpServices],
+      ["http", "middleware", httpMiddlewares],
+      ["tcp", "router", tcpRouters],
+      ["tcp", "service", tcpServices],
+      ["tcp", "middleware", tcpMiddlewares],
+      ["udp", "router", udpRouters],
+      ["udp", "service", udpServices],
+    ] as const;
+    for (const [protocol, type, entries] of resourceGroups) {
+      const remaining = MAX_RESOURCE_DETAILS - resources.length;
+      if (remaining === 0) break;
+      resources.push(...this.createResourceDetails(protocol, type, entries.slice(0, remaining)));
+    }
+
     return {
       version,
-      entryPoints: entryPoints.map((entryPoint, index) => entryPoint.name ?? `entrypoint-${index + 1}`),
+      entryPoints: entryPoints
+        .slice(0, MAX_RESOURCE_DETAILS)
+        .map((entryPoint, index) => entryPoint.name ?? `entrypoint-${index + 1}`),
+      resources,
+      failedEndpoints,
       http: this.createProtocolSummary(httpRouters, httpServices, httpMiddlewares),
       tcp: this.createProtocolSummary(tcpRouters, tcpServices, tcpMiddlewares),
       udp: {
@@ -83,15 +140,29 @@ export class TraefikIntegration extends Integration {
     };
   }
 
+  private createResourceDetails(
+    protocol: TraefikResourceDetail["protocol"],
+    type: TraefikResourceDetail["type"],
+    resources: TraefikResource[],
+  ): TraefikResourceDetail[] {
+    return resources.map((resource, index) => ({
+      protocol,
+      type,
+      name: resource.name ?? `${type}-${index + 1}`,
+      provider: resource.provider ?? null,
+      status: this.normalizeStatus(resource.status),
+    }));
+  }
+
   private async getVersionAsync() {
     const response = await this.fetchOkAsync("/api/version");
-    const version = traefikVersionSchema.parse(await response.json());
+    const version = traefikVersionSchema.parse(await readBoundedTraefikJsonAsync(response));
     return version.Version ?? null;
   }
 
   private async getResourcesAsync(path: ResourcePath) {
     const response = await this.fetchOkAsync(path);
-    return traefikResourcesSchema.parse(await response.json());
+    return traefikResourcesSchema.parse(await readBoundedTraefikJsonAsync(response));
   }
 
   private createProtocolSummary(
@@ -137,6 +208,7 @@ export class TraefikIntegration extends Integration {
     const response = await fetchWithTrustedCertificatesAsync(this.url(path), {
       headers: this.getAuthHeaders(),
       timeout: 10_000,
+      bodyTimeout: 10_000,
     });
 
     if (!response.ok) {
diff --git a/packages/integrations/src/traefik/traefik-types.ts b/packages/integrations/src/traefik/traefik-types.ts
index 5874ef41b..188941465 100644
--- a/packages/integrations/src/traefik/traefik-types.ts
+++ b/packages/integrations/src/traefik/traefik-types.ts
@@ -31,9 +31,19 @@ export interface TraefikProtocolSummary {
   middlewares: TraefikResourceSummary;
 }
 
+export interface TraefikResourceDetail {
+  protocol: "http" | "tcp" | "udp";
+  type: "router" | "service" | "middleware";
+  name: string;
+  provider: string | null;
+  status: TraefikResourceStatus;
+}
+
 export interface TraefikDashboardData {
   version: string | null;
   entryPoints: string[];
+  resources: TraefikResourceDetail[];
+  failedEndpoints: string[];
   http: TraefikProtocolSummary;
   tcp: TraefikProtocolSummary;
   udp: Omit<TraefikProtocolSummary, "middlewares">;
diff --git a/packages/request-handler/src/smart-home-entity-state.spec.ts b/packages/request-handler/src/smart-home-entity-state.spec.ts
new file mode 100644
index 000000000..bee81d2de
--- /dev/null
+++ b/packages/request-handler/src/smart-home-entity-state.spec.ts
@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+
+import { toSafeEntityDetails } from "./smart-home-entity-state";
+
+describe("toSafeEntityDetails", () => {
+  it("keeps display attributes and removes sensitive Home Assistant metadata", () => {
+    const details = toSafeEntityDetails({
+      entity_id: "camera.front_door",
+      state: "streaming",
+      last_changed: new Date("2026-01-01T00:00:00Z"),
+      last_updated: new Date("2026-01-01T00:00:01Z"),
+      attributes: {
+        friendly_name: "Front door",
+        icon: "mdi:camera",
+        access_token: "secret-camera-token",
+        latitude: 48.85,
+      },
+    });
+
+    expect(details.attributes).toEqual({ friendly_name: "Front door", icon: "mdi:camera" });
+    expect(details.attributes).not.toHaveProperty("access_token");
+    expect(details.attributes).not.toHaveProperty("latitude");
+  });
+});
diff --git a/packages/request-handler/src/smart-home-entity-state.ts b/packages/request-handler/src/smart-home-entity-state.ts
index 3c8851522..1d0d2471c 100644
--- a/packages/request-handler/src/smart-home-entity-state.ts
+++ b/packages/request-handler/src/smart-home-entity-state.ts
@@ -1,10 +1,29 @@
 import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
+import type { EntityState } from "@homarr/integrations";
 
 import { createIntegrationRequestHandler } from "./lib/integration-request-handler";
 
+const safeAttributeKeys = ["friendly_name", "unit_of_measurement", "device_class", "icon"] as const;
+
+export const toSafeEntityDetails = (entity: EntityState) => {
+  const attributes: Partial<Record<(typeof safeAttributeKeys)[number], string>> = {};
+  for (const key of safeAttributeKeys) {
+    const value = entity.attributes[key];
+    if (typeof value === "string") attributes[key] = value;
+  }
+
+  return {
+    attributes,
+    entity_id: entity.entity_id,
+    last_changed: entity.last_changed,
+    last_updated: entity.last_updated,
+    state: entity.state,
+  };
+};
+
 export const smartHomeEntityStateRequestHandler = createIntegrationRequestHandler<
-  string,
+  EntityState,
   IntegrationKindByCategory<"smartHomeServer">,
   { entityId: string }
 >({
@@ -16,6 +35,6 @@ export const smartHomeEntityStateRequestHandler = createIntegrationRequestHandle
       throw new Error(`Unable to fetch data from Home Assistant error='${result.error as string}'`);
     }
 
-    return result.data.state;
+    return result.data;
   },
 });
diff --git a/packages/request-handler/src/timetable-url.ts b/packages/request-handler/src/timetable-url.ts
new file mode 100644
index 000000000..f7241a542
--- /dev/null
+++ b/packages/request-handler/src/timetable-url.ts
@@ -0,0 +1,26 @@
+import type { Response } from "undici";
+
+import { readBoundedJsonResponseAsync as readBoundedJsonResponse } from "@homarr/common/server";
+
+export const DEFAULT_TIMETABLE_BASE_URL = "https://search.ch";
+export const MAX_TIMETABLE_RESPONSE_BYTES = 512 * 1024;
+
+export const normalizeTimetableBaseUrl = (baseUrl: string) => {
+  if (baseUrl.length > 2_048) throw new Error("Timetable base URL is too long");
+
+  const url = new URL(baseUrl);
+  if (url.protocol !== "http:" && url.protocol !== "https:") {
+    throw new Error("Timetable base URL must use HTTP or HTTPS");
+  }
+  if (url.username || url.password) throw new Error("Timetable base URL must not contain credentials");
+  if (url.search || url.hash) throw new Error("Timetable base URL must not contain a query or fragment");
+
+  return url.toString().replace(/\/$/, "");
+};
+
+export async function readBoundedTimetableJsonAsync(
+  response: Response,
+  maxBytes = MAX_TIMETABLE_RESPONSE_BYTES,
+): Promise<unknown> {
+  return await readBoundedJsonResponse(response, maxBytes, "Timetable response");
+}
diff --git a/packages/request-handler/src/timetable.spec.ts b/packages/request-handler/src/timetable.spec.ts
new file mode 100644
index 000000000..cb08cb313
--- /dev/null
+++ b/packages/request-handler/src/timetable.spec.ts
@@ -0,0 +1,79 @@
+import { Response } from "undici";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+
+import { timetableGetTimetableRequestHandler, timetableSearchStationsRequestHandler } from "./timetable";
+import { normalizeTimetableBaseUrl, readBoundedTimetableJsonAsync } from "./timetable-url";
+
+vi.mock("@homarr/core/infrastructure/http", () => ({ fetchWithTrustedCertificatesAsync: vi.fn() }));
+
+const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+
+beforeEach(() => vi.clearAllMocks());
+
+describe("normalizeTimetableBaseUrl", () => {
+  it("normalizes an HTTP endpoint", () => {
+    expect(normalizeTimetableBaseUrl("https://search.ch/")).toBe("https://search.ch");
+  });
+
+  it.each(["file:///etc/passwd", "https://user:secret@example.com", "https://example.com?redirect=/admin"])(
+    "rejects unsafe base URL %s",
+    (url) => expect(() => normalizeTimetableBaseUrl(url)).toThrow(),
+  );
+});
+
+describe("timetable response bounds", () => {
+  it("rejects a response once its byte budget is exceeded", async () => {
+    const response = new Response(JSON.stringify({ value: "x".repeat(100) }));
+    await expect(readBoundedTimetableJsonAsync(response, 32)).rejects.toThrow("exceeds 32 bytes");
+  });
+
+  it("caps and caches station results and rejects redirects", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(
+        JSON.stringify(
+          Array.from({ length: 125 }, (_, index) => ({
+            id: String(index),
+            label: `Station ${index}`,
+            iconclass: "train",
+          })),
+        ),
+      ),
+    );
+    const input = { baseUrl: "http://timetable.internal", query: "bounded-stations" };
+
+    const first = await timetableSearchStationsRequestHandler.handler(input).getDataAsync();
+    const second = await timetableSearchStationsRequestHandler.handler(input).getDataAsync();
+
+    expect(first.data).toHaveLength(100);
+    expect(second.data).toHaveLength(100);
+    expect(mockFetch).toHaveBeenCalledOnce();
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({ redirect: "error", bodyTimeout: 10_000 }),
+    );
+  });
+
+  it("never caches more departures than requested", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          connections: Array.from({ length: 5 }, (_, index) => ({
+            time: `2026-01-01T00:0${index}:00Z`,
+            line: "1",
+            color: "ffffff",
+            terminal: { name: `Stop ${index}` },
+            dep_delay: "0",
+          })),
+        }),
+      ),
+    );
+
+    const result = await timetableGetTimetableRequestHandler
+      .handler({ baseUrl: "http://timetable.internal", stationId: "bounded-departures", limit: 2 })
+      .getDataAsync();
+
+    expect(result.data.entries).toHaveLength(2);
+  });
+});
diff --git a/packages/request-handler/src/timetable.ts b/packages/request-handler/src/timetable.ts
index 2be7355d8..b55a688f7 100644
--- a/packages/request-handler/src/timetable.ts
+++ b/packages/request-handler/src/timetable.ts
@@ -4,6 +4,7 @@ import { ResponseError } from "@homarr/common/server";
 import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 
 import { createRequestHandler } from "./lib/request-handler";
+import { normalizeTimetableBaseUrl, readBoundedTimetableJsonAsync } from "./timetable-url";
 
 export interface Station {
   id: string;
@@ -31,6 +32,9 @@ export interface Timetable {
 }
 
 const supportedStationTypes = ["bus", "tram", "train", "ship", "cablecar", "funicular", "chairlift"];
+const MAX_STATION_RESULTS = 100;
+const MAX_TIMETABLE_ENTRIES = 100;
+const timetableFetchOptions = { redirect: "error", timeout: 10_000, bodyTimeout: 10_000 } as const;
 
 export const timetableSearchStationsRequestHandler = createRequestHandler<
   Station[],
@@ -53,7 +57,7 @@ export const timetableGetTimetableRequestHandler = createRequestHandler<
 });
 
 const buildUrl = (baseUrl: string, path: `/${string}`, queryParams: Record<string, string | number>) => {
-  const url = new URL(`${baseUrl.replace(/\/$/, "")}${path}`);
+  const url = new URL(`${normalizeTimetableBaseUrl(baseUrl)}${path}`);
   for (const [key, value] of Object.entries(queryParams)) {
     url.searchParams.set(key, value.toString());
   }
@@ -63,10 +67,12 @@ const buildUrl = (baseUrl: string, path: `/${string}`, queryParams: Record<strin
 const searchStationsAsync = async (baseUrl: string, query: string): Promise<Station[]> => {
   const response = await fetchWithTrustedCertificatesAsync(
     buildUrl(baseUrl, "/timetable/api/completion.json", { term: query, show_ids: 1, nofavorites: 1 }),
+    timetableFetchOptions,
   );
   if (!response.ok) throw new ResponseError(response);
 
-  const data = await searchSchema.parseAsync(await response.json());
+  const body = await readBoundedTimetableJsonAsync(response);
+  const data = await searchSchema.parseAsync(Array.isArray(body) ? body.slice(0, MAX_STATION_RESULTS) : body);
   return data
     .filter((item) => supportedStationTypes.some((type) => item.iconclass.endsWith(type)))
     .map((item) => (item.id !== undefined ? { id: item.id, name: item.label } : null))
@@ -99,10 +105,15 @@ const getTimetableAsync = async (
       date,
       time,
     }),
+    timetableFetchOptions,
   );
   if (!response.ok) throw new ResponseError(response);
 
-  const data = await timetableSchema.parseAsync(await response.json());
+  const body = await readBoundedTimetableJsonAsync(response);
+  const envelope = timetableEnvelopeSchema.parse(body);
+  const data = await timetableSchema.parseAsync({
+    connections: envelope.connections.slice(0, Math.min(options.limit, MAX_TIMETABLE_ENTRIES)),
+  });
   return {
     stationId: options.stationId,
     timestamp: now,
@@ -145,6 +156,8 @@ const timetableSchema = z.object({
   ),
 });
 
+const timetableEnvelopeSchema = z.object({ connections: z.array(z.unknown()) });
+
 const searchSchema = z.array(
   z.object({
     id: z.string().optional(),
diff --git a/packages/request-handler/src/vpn.ts b/packages/request-handler/src/vpn.ts
index ebca0fbeb..97182ab11 100644
--- a/packages/request-handler/src/vpn.ts
+++ b/packages/request-handler/src/vpn.ts
@@ -1,28 +1,16 @@
-import { createLogger } from "@homarr/core/infrastructure/logs";
 import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
 import type { VpnSummary } from "@homarr/integrations/types";
 
 import { createIntegrationRequestHandler } from "./lib/integration-request-handler";
 
-const logger = createLogger({ module: "vpnRequestHandler" });
-
 export const vpnSummaryHandler = createIntegrationRequestHandler<
-  VpnSummary | null,
+  VpnSummary,
   IntegrationKindByCategory<"vpn">,
   Record<string, never>
 >({
   async requestAsync(integration, _input) {
-    try {
-      const integrationInstance = await createIntegrationAsync(integration);
-      return await integrationInstance.getSummaryAsync();
-    } catch (error) {
-      logger.warn("Failed to fetch VPN summary, marking as unavailable", {
-        integrationId: integration.id,
-        integrationKind: integration.kind,
-        error: error instanceof Error ? error.message : String(error),
-      });
-      return null;
-    }
+    const integrationInstance = await createIntegrationAsync(integration);
+    return await integrationInstance.getSummaryAsync();
   },
 });
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index de211bf66..e8a9192a7 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1632,12 +1632,33 @@
         "error": "Error",
         "loading": "Loading",
         "idle": "Idle"
+      },
+      "notification": {
+        "saveError": {
+          "title": "Unable to save widget",
+          "message": "The widget changes were rolled back"
+        }
       }
     },
     "create": {
       "title": "Choose item to add",
       "search": "Filter items",
-      "addToBoard": "Add to board"
+      "addToBoard": "Add to board",
+      "addAtPosition": "Add item here",
+      "integrationAvailable": "Connected integration available",
+      "notification": {
+        "error": {
+          "title": "Unable to add item",
+          "message": "The item could not be added to this board"
+        }
+      }
+    },
+    "advancedFocus": {
+      "open": "Open advanced view",
+      "close": "Close advanced view",
+      "pin": "Keep advanced view open",
+      "pinned": "Advanced view is pinned",
+      "dialog": "{widget} advanced view"
     },
     "moveResize": {
       "title": "Move / resize item",
@@ -1791,6 +1812,26 @@
         "showBroadcastMessage": {
           "label": "Show broadcast messages"
         }
+      },
+      "noProjectSelected": "No project selected",
+      "runnerStatus": "Runner: {status}",
+      "updatedAt": "Updated {date}",
+      "metric": {
+        "running": "Running",
+        "completed": "Done",
+        "failed": "Failed",
+        "canceled": "Canceled",
+        "download": "Download",
+        "upload": "Upload"
+      },
+      "status": {
+        "running": "Running",
+        "completed": "Completed",
+        "failed": "Failed",
+        "canceled": "Canceled",
+        "stopped": "Stopped",
+        "idle": "Idle",
+        "unknown": "Unknown"
       }
     },
     "dnsHoleSummary": {
@@ -1825,6 +1866,11 @@
         "dnsQueriesToday": "Queries today",
         "domainsBeingBlocked": "Domains on blocklist"
       },
+      "status": {
+        "enabled": "Enabled",
+        "disabled": "Disabled",
+        "unknown": "Unknown"
+      },
       "domainsTooltip": "Due to multiple integrations Homarr can't calculate the exact number of domains being blocked"
     },
     "dnsHoleControls": {
@@ -1850,7 +1896,8 @@
         }
       },
       "error": {
-        "internalServerError": "Failed to control DNS Hole"
+        "internalServerError": "Failed to control DNS Hole",
+        "bulkActionsFailed": "{count, plural, one {# action failed} other {# actions failed}}"
       },
       "controls": {
         "enableAll": "Enable All",
@@ -2014,6 +2061,8 @@
         "height": "Height"
       },
       "placeholder": "Start writing your notes",
+      "saveFailed": "Unable to save note",
+      "documentStats": "{words, plural, one {# word} other {# words}} · {characters, plural, one {# character} other {# characters}}",
       "dismiss": {
         "title": "Dismiss changes?",
         "message": "You have unsaved changes in your notebook. Are you sure you want to discard them?",
@@ -2043,13 +2092,23 @@
       "noNotes": "No notes found",
       "integrationRequired": "Select an Anchor integration first",
       "updatedAt": "Updated {date}",
+      "createdAt": "Created {date}",
       "untitled": "Untitled",
       "edit": "Edit",
       "save": "Save",
       "cancel": "Cancel",
       "readOnlyViewer": "You have viewer access to this note. Editing is disabled.",
       "saveForbidden": "You do not have permission to edit this note.",
-      "saveFailed": "Failed to save this note. Please try again."
+      "saveFailed": "Failed to save this note. Please try again.",
+      "permission": {
+        "owner": "Owner",
+        "editor": "Editor",
+        "viewer": "Viewer"
+      },
+      "status": {
+        "pinned": "Pinned",
+        "archived": "Archived"
+      }
     },
     "iframe": {
       "name": "iFrame",
@@ -2108,6 +2167,18 @@
         "clickable": {
           "label": "Clickable"
         }
+      },
+      "advanced": {
+        "entityId": "Entity ID: {id}",
+        "lastUpdated": "Updated {date}",
+        "attribute": {
+          "unit": "Unit",
+          "deviceClass": "Device class",
+          "icon": "Icon"
+        }
+      },
+      "error": {
+        "toggleFailed": "Unable to update entity"
       }
     },
     "smartHome-executeAutomation": {
@@ -2123,6 +2194,13 @@
       },
       "spotlightAction": {
         "run": "Run {name}"
+      },
+      "advanced": {
+        "lastExecuted": "Last run at {time}",
+        "automationId": "Automation ID: {id}"
+      },
+      "error": {
+        "executeFailed": "Unable to run automation"
       }
     },
     "stockPrice": {
@@ -2498,7 +2576,13 @@
         "runtime": "Runtime",
         "load": "Load",
         "input": "Input",
-        "output": "Output"
+        "output": "Output",
+        "batteryVoltage": "Battery voltage",
+        "power": "Power",
+        "temperature": "Temperature",
+        "manufacturer": "Manufacturer",
+        "model": "Model",
+        "serial": "Serial"
       },
       "error": {
         "internalServerError": "Failed to fetch UPS data"
@@ -2755,6 +2839,11 @@
             "target": "Target codec"
           }
         }
+      },
+      "summary": {
+        "sessions": "{count, plural, one {# session} other {# sessions}}",
+        "playing": "{count} playing",
+        "transcoding": "{count} transcoding"
       }
     },
     "paperlessNgx": {
@@ -3037,7 +3126,16 @@
         }
       },
       "description": "Slideshow of pictures from an Immich album or your full library",
-      "noPhotos": "No photos found"
+      "noPhotos": "No photos found",
+      "albumPhoto": "Album photo",
+      "actions": {
+        "previousPhoto": "Previous photo",
+        "nextPhoto": "Next photo",
+        "pauseSlideshow": "Pause slideshow",
+        "resumeSlideshow": "Resume slideshow",
+        "toggleSlideshow": "Pause or resume slideshow",
+        "photo": "Photo {number}"
+      }
     },
     "downloads": {
       "name": "Download Client",
@@ -3610,6 +3708,13 @@
       "error": {
         "internalServerError": "Unable to get data from firewall"
       },
+      "versionUnknown": "Unknown version",
+      "metricAccessible": "{metric}: {value}%, {status}",
+      "status": {
+        "normal": "Normal",
+        "warning": "Warning",
+        "critical": "Critical"
+      },
       "option": {
         "interfaces": "Network interfaces to display"
       },
@@ -3673,6 +3778,11 @@
       "unhealthy": "Unhealthy",
       "ok": "OK",
       "fail": "Fail",
+      "range": {
+        "twelveHours": "12h",
+        "oneDay": "24h",
+        "all": "All"
+      },
       "noSectionsEnabled": "Enable at least one section in widget options.",
       "error": {
         "internalServerError": "Failed to fetch speedtest data"
@@ -3714,6 +3824,11 @@
         "downCount": "Down",
         "pausedCount": "Paused"
       },
+      "status": {
+        "up": "Up",
+        "down": "Down",
+        "paused": "Paused"
+      },
       "error": {
         "internalServerError": "Failed to fetch uptime data"
       }
@@ -3743,6 +3858,19 @@
         "services": "Services",
         "middlewares": "Middlewares"
       },
+      "resourceType": {
+        "router": "Router",
+        "service": "Service",
+        "middleware": "Middleware"
+      },
+      "resourceStatus": {
+        "enabled": "Enabled",
+        "disabled": "Disabled",
+        "warning": "Warning",
+        "error": "Error",
+        "unknown": "Unknown"
+      },
+      "failedEndpoint": "Failed: {endpoint}",
       "status": {
         "healthy": "Healthy",
         "errors": "{count} errors",
@@ -3889,11 +4017,30 @@
       },
       "noDefinition": "No definition selected",
       "definitionNotFound": "Widget definition not found. It may have been deleted.",
+      "fetchFailed": "Unable to load custom API data",
       "noDisplayOutput": "No display output",
       "executeConfirm": "Are you sure you want to execute this action?",
       "executing": "Executing...",
       "executeSuccess": "Action executed successfully",
-      "executeFailed": "Action failed. Check the widget configuration."
+      "executeFailed": "Action failed. Check the widget configuration.",
+      "actions": {
+        "pausePolling": "Pause polling",
+        "resumePolling": "Resume polling",
+        "togglePolling": "Pause or resume polling"
+      },
+      "displayType": {
+        "singleValue": "Single value",
+        "keyValue": "Key/value",
+        "table": "Table",
+        "statGrid": "Stat grid",
+        "progressBars": "Progress bars",
+        "statusIndicator": "Status indicator",
+        "countGrid": "Count grid",
+        "raw": "Raw data",
+        "actionButton": "Action button",
+        "customJsx": "Custom JSX",
+        "unknown": "Custom data"
+      }
     },
     "beszelSystemTable": {
       "name": "Beszel Systems (Table)",
@@ -4081,6 +4228,14 @@
         }
       },
       "selectSystem": "Select system",
+      "period": {
+        "live": "Live",
+        "oneHour": "1h",
+        "twelveHours": "12h",
+        "oneDay": "24h",
+        "oneWeek": "1w",
+        "thirtyDays": "30d"
+      },
       "empty": {
         "noSystems": "No systems found"
       },
diff --git a/packages/widgets/src/_inputs/common.tsx b/packages/widgets/src/_inputs/common.tsx
index 3d575bfb0..abeb7e350 100644
--- a/packages/widgets/src/_inputs/common.tsx
+++ b/packages/widgets/src/_inputs/common.tsx
@@ -9,6 +9,7 @@ export interface CommonWidgetInputProps<TKey extends WidgetOptionType> {
   options: Omit<WidgetOptionOfType<TKey>, "defaultValue" | "type">;
   initialOptions: Record<string, unknown>;
   itemId?: string;
+  boardId?: string;
 }
 
 type UseWidgetInputTranslationReturnType = (key: "label" | "description" | "placeholder") => string;
diff --git a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
index 3b5b636aa..532fd04f8 100644
--- a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
+++ b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
@@ -17,7 +17,13 @@ export interface DynamicSelectOption {
   label: string;
 }
 
-export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidgetInputProps<"dynamicSelect">) => {
+export const WidgetDynamicSelectInput = ({
+  property,
+  kind,
+  options,
+  itemId,
+  boardId,
+}: CommonWidgetInputProps<"dynamicSelect">) => {
   const t = useI18n();
   const tWidget = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
@@ -28,6 +34,8 @@ export const WidgetDynamicSelectInput = ({ property, kind, options }: CommonWidg
     debouncedSearch,
     form.values.integrationIds,
     form.values.options,
+    itemId,
+    boardId,
   );
   const currentOption = inputProps.value as DynamicSelectOption | null;
   const onChange = inputProps.onChange as (value: DynamicSelectOption | null) => void;
diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 90a1c998c..781a09930 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -3,13 +3,14 @@
 import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
 import type { ComponentProps } from "react";
 import dynamic from "next/dynamic";
-import { Button, Center, Group, Stack, Text, TextInput } from "@mantine/core";
+import { Badge, Button, Center, Group, Stack, Text, TextInput } from "@mantine/core";
 import { Quill } from "react-quill-new";
 import type { DeltaStatic } from "react-quill-new";
 import type ReactQuillComponent from "react-quill-new";
 import { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useTimeAgo } from "@homarr/common";
 import type { AnchorNotePermission } from "@homarr/integrations";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -106,6 +107,13 @@ const stringifyDelta = (delta: unknown): string => {
   return JSON.stringify(emptyDelta());
 };
 
+export const storedContentToPlainText = (content?: string | null): string => {
+  return parseStoredContent(content)
+    .ops.map(({ insert }) => (typeof insert === "string" ? insert : ""))
+    .join("")
+    .trim();
+};
+
 const canEditPermission = (permission: AnchorNotePermission) => {
   return permission === "owner" || permission === "editor";
 };
@@ -119,7 +127,14 @@ const isForbiddenError = (error: unknown): boolean => {
   return (data as { code?: unknown }).code === "FORBIDDEN";
 };
 
-export default function AnchorNoteWidget({ options, integrationIds }: WidgetComponentProps<"anchorNote">) {
+export default function AnchorNoteWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode,
+  widgetStateRef,
+}: WidgetComponentProps<"anchorNote">) {
   const t = useScopedI18n("widget.anchorNote");
   const noteId = options.noteId.trim();
   if (!noteId) {
@@ -134,27 +149,74 @@ export default function AnchorNoteWidget({ options, integrationIds }: WidgetComp
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const integrationId = integrationIds[0]!;
 
-  return <AnchorNoteWidgetContent options={options} integrationId={integrationId} noteId={noteId} />;
+  return (
+    <AnchorNoteWidgetContent
+      options={options}
+      integrationId={integrationId}
+      noteId={noteId}
+      width={width}
+      height={height}
+      isAdvanced={displayMode === "advanced"}
+      widgetStateRef={widgetStateRef}
+    />
+  );
+}
+
+interface AnchorNotePersistedState {
+  integrationId: string;
+  noteId: string;
+  isEditing: boolean;
+  draftTitle: string;
+  draftContent: string;
+  saveError: string | null;
 }
 
 interface AnchorNoteWidgetContentProps {
   options: WidgetComponentProps<"anchorNote">["options"];
   integrationId: string;
   noteId: string;
+  width: number;
+  height: number;
+  isAdvanced: boolean;
+  widgetStateRef?: WidgetComponentProps<"anchorNote">["widgetStateRef"];
 }
 
-const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteWidgetContentProps) => {
+const AnchorNoteWidgetContent = ({
+  options,
+  integrationId,
+  noteId,
+  width,
+  height,
+  isAdvanced,
+  widgetStateRef,
+}: AnchorNoteWidgetContentProps) => {
   const t = useScopedI18n("widget.anchorNote");
+  const persistedState = widgetStateRef?.current?.anchorNote as AnchorNotePersistedState | undefined;
+  const canHydratePersistedState = persistedState?.integrationId === integrationId && persistedState.noteId === noteId;
   const { data: note, refetch } = clientApi.widget.anchorNotes.getNote.useQuery({
     integrationId,
     noteId,
   });
   const { mutateAsync: updateNoteAsync, isPending: isUpdating } = clientApi.widget.anchorNotes.updateNote.useMutation();
 
-  const [isEditing, setIsEditing] = useState(false);
-  const [draftTitle, setDraftTitle] = useState(note?.title ?? "");
-  const [draftContent, setDraftContent] = useState(note?.content ?? "");
-  const [saveError, setSaveError] = useState<string | null>(null);
+  const [isEditing, setIsEditing] = useState(canHydratePersistedState ? (persistedState?.isEditing ?? false) : false);
+  const [draftTitle, setDraftTitle] = useState(
+    canHydratePersistedState ? (persistedState?.draftTitle ?? "") : (note?.title ?? ""),
+  );
+  const [draftContent, setDraftContent] = useState(
+    canHydratePersistedState ? (persistedState?.draftContent ?? "") : (note?.content ?? ""),
+  );
+  const [saveError, setSaveError] = useState<string | null>(
+    canHydratePersistedState ? (persistedState?.saveError ?? null) : null,
+  );
+
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      anchorNote: { integrationId, noteId, isEditing, draftTitle, draftContent, saveError },
+    };
+  }, [draftContent, draftTitle, integrationId, isEditing, noteId, saveError, widgetStateRef]);
 
   useEffect(() => {
     if (isEditing || !note) return;
@@ -165,7 +227,8 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
     });
   }, [isEditing, note]);
 
-  const canEdit = canEditPermission(note?.permission ?? "viewer");
+  const hasInteractAccess = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
+  const canEdit = canEditPermission(note?.permission ?? "viewer") && hasInteractAccess;
   const isViewer = !note || note.permission === "viewer";
   const updatedAt = useMemo(() => (note ? new Date(note.updatedAt) : new Date()), [note]);
   const updatedAtRelative = useTimeAgo(updatedAt, 30000);
@@ -178,6 +241,7 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
 
   const editorValue = useMemo(() => parseStoredContent(draftContent), [draftContent]);
   const readOnlyValue = useMemo(() => parseStoredContent(note?.content), [note?.content]);
+  const plainText = useMemo(() => storedContentToPlainText(note?.content), [note?.content]);
   const handleEditorChange = useCallback<ReactQuillOnChange>(
     (_html, _delta, source, editor) => {
       if (!isEditing || source !== "user") return;
@@ -260,7 +324,7 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
   if (!note) return <WidgetEmptyState />;
 
   return (
-    <Stack h="100%" gap="xs" p="sm">
+    <Stack h="100%" gap="xs" p={height < 120 ? "xs" : "sm"}>
       <Group justify="space-between" align="flex-start">
         <Stack gap={2} style={{ flex: 1 }}>
           {isEditing ? (
@@ -278,6 +342,22 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
               {t("readOnlyViewer")}
             </Text>
           )}
+          {!isEditing && isAdvanced && (
+            <Group gap={4}>
+              <Badge size="xs" variant="light">
+                {t(`permission.${note.permission}`)}
+              </Badge>
+              {note.isPinned && <Badge size="xs">{t("status.pinned")}</Badge>}
+              {note.isArchived && (
+                <Badge size="xs" color="gray">
+                  {t("status.archived")}
+                </Badge>
+              )}
+              <Text size="xs" c="dimmed">
+                {t("createdAt", { date: new Date(note.createdAt).toLocaleDateString() })}
+              </Text>
+            </Group>
+          )}
           {saveError && (
             <Text size="xs" c="red">
               {saveError}
@@ -301,17 +381,31 @@ const AnchorNoteWidgetContent = ({ options, integrationId, noteId }: AnchorNoteW
           )}
         </Group>
       </Group>
-      <div className={`homarr-anchor-quill${isEditing ? "" : " homarr-anchor-quill--readonly"}`} style={{ flex: 1 }}>
-        <ReactQuill
-          theme="snow"
-          readOnly={!isEditing}
-          value={isEditing ? editorValue : readOnlyValue}
-          onChange={handleEditorChange}
-          modules={isEditing ? quillModules : readOnlyModules}
-          formats={quillFormats}
-          placeholder={t("emptyContent")}
-        />
-      </div>
+      {isEditing || isAdvanced ? (
+        <div
+          className={`homarr-anchor-quill${isEditing ? "" : " homarr-anchor-quill--readonly"}`}
+          style={{ flex: 1, minHeight: 0 }}
+        >
+          <ReactQuill
+            theme="snow"
+            readOnly={!isEditing}
+            value={isEditing ? editorValue : readOnlyValue}
+            onChange={handleEditorChange}
+            modules={isEditing ? quillModules : readOnlyModules}
+            formats={quillFormats}
+            placeholder={t("emptyContent")}
+          />
+        </div>
+      ) : (
+        <Text
+          size={width < 180 || height < 100 ? "xs" : "sm"}
+          c={plainText ? undefined : "dimmed"}
+          style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}
+          lineClamp={Math.max(2, Math.floor((height - 70) / 18))}
+        >
+          {plainText || t("emptyContent")}
+        </Text>
+      )}
     </Stack>
   );
 };
diff --git a/packages/widgets/src/anchor-note/index.ts b/packages/widgets/src/anchor-note/index.ts
index a54aada3f..9baaccf2d 100644
--- a/packages/widgets/src/anchor-note/index.ts
+++ b/packages/widgets/src/anchor-note/index.ts
@@ -5,6 +5,8 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("anchorNote", {
   icon: IconNotes,
+  queryKey: [["widget", "anchorNotes"]],
+  maxIntegrations: 1,
   supportedIntegrations: ["anchor"],
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 56e079a8c..aa3dad356 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -19,7 +19,7 @@ import classes from "./app.module.css";
 import { PingDot } from "./ping/ping-dot";
 import { PingIndicator } from "./ping/ping-indicator";
 
-export default function AppWidget({ options, isEditMode, height, width }: WidgetComponentProps<"app">) {
+export default function AppWidget({ options, isEditMode, height, width, displayMode }: WidgetComponentProps<"app">) {
   const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
@@ -51,6 +51,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
   if (!app) return <WidgetEmptyState />;
 
   const isTiny = height < 100 || width < 100;
+  const isAdvanced = displayMode === "advanced";
   const isColumnLayout = options.layout.startsWith("column");
 
   return (
@@ -83,7 +84,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
           onContextMenu={isEditMode ? (e) => e.preventDefault() : undefined}
         >
           <Stack gap={0}>
-            {options.showTitle && (
+            {(options.showTitle || isAdvanced) && (
               <Text
                 className="app-title"
                 fw={700}
@@ -93,13 +94,13 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
                 {app.name}
               </Text>
             )}
-            {options.descriptionDisplayMode === "normal" && (
+            {(options.descriptionDisplayMode === "normal" || isAdvanced) && (
               <Text
                 className="app-description"
                 size={isTiny ? rem(8) : "sm"}
                 ta={isColumnLayout ? "center" : undefined}
                 c="dimmed"
-                lineClamp={4}
+                lineClamp={isAdvanced ? 10 : Math.max(1, Math.floor((height - 48) / 18))}
               >
                 {app.description?.split("\n").map((line, index) => (
                   <Fragment key={index}>
@@ -109,6 +110,11 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
                 ))}
               </Text>
             )}
+            {isAdvanced && app.href && (
+              <Text size="xs" c="dimmed" lineClamp={1}>
+                {getDisplayHost(app.href)}
+              </Text>
+            )}
           </Stack>
           <MaskedOrNormalImage
             imageUrl={app.iconUrl}
@@ -119,7 +125,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
               height: "100%",
               width: "100%",
               minWidth: "20%",
-              maxWidth: isColumnLayout ? undefined : "50%",
+              maxWidth: isColumnLayout ? undefined : isTiny ? "38%" : "50%",
             }}
           />
         </Flex>
@@ -154,3 +160,11 @@ const AppLink = ({ href, openInNewTab, enabled, children }: PropsWithChildren<Ap
   ) : (
     children
   );
+
+const getDisplayHost = (href: string) => {
+  try {
+    return new URL(href).host;
+  } catch {
+    return href;
+  }
+};
diff --git a/packages/widgets/src/app/index.ts b/packages/widgets/src/app/index.ts
index 62f01287d..7755ac105 100644
--- a/packages/widgets/src/app/index.ts
+++ b/packages/widgets/src/app/index.ts
@@ -15,6 +15,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("app", {
   icon: IconApps,
+  queryKeys: [[["app", "byId"]], [["widget", "app"]]],
   createOptions(settings) {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx
index 5ac03eadc..50b213257 100644
--- a/packages/widgets/src/archive-team-warrior/component.tsx
+++ b/packages/widgets/src/archive-team-warrior/component.tsx
@@ -1,16 +1,20 @@
 "use client";
 
-import { Avatar, Badge, Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Avatar, Badge, Card, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatByteRate } from "@homarr/common";
 import { getIconUrl } from "@homarr/definitions";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 
 export default function ArchiveTeamWarriorWidget({
   integrationIds,
   options,
+  width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"archiveTeamWarrior">) {
   const integrationId = integrationIds[0];
 
@@ -18,23 +22,39 @@ export default function ArchiveTeamWarriorWidget({
     return null;
   }
 
-  return <ArchiveTeamWarriorWidgetContent integrationId={integrationId} options={options} />;
+  return (
+    <ArchiveTeamWarriorWidgetContent
+      integrationId={integrationId}
+      options={options}
+      width={width}
+      height={height}
+      isAdvanced={displayMode === "advanced"}
+    />
+  );
 }
 
 const ArchiveTeamWarriorWidgetContent = ({
   integrationId,
   options,
+  width,
+  height,
+  isAdvanced,
 }: {
   integrationId: string;
   options: WidgetComponentProps<"archiveTeamWarrior">["options"];
+  width: number;
+  height: number;
+  isAdvanced: boolean;
 }) => {
+  const t = useScopedI18n("widget.archiveTeamWarrior");
   const [data] = clientApi.widget.archiveTeamWarrior.getStatus.useSuspenseQuery({ integrationId });
 
   const status = data.status;
-  const projectName = status.project?.title ?? status.selectedProject ?? "No project selected";
+  const projectName = status.project?.title ?? status.selectedProject ?? t("noProjectSelected");
+  const statusKey = getStatusKey(status.status);
 
   return (
-    <Stack p="xs" gap="xs" h="100%">
+    <Stack p="xs" gap="xs" h="100%" style={{ overflow: "hidden" }}>
       <Group justify="space-between" align="center" wrap="nowrap">
         <Group gap="xs" wrap="nowrap" miw={0}>
           <Avatar size="sm" radius="md" src={getIconUrl("archiveTeamWarrior")} />
@@ -43,12 +63,12 @@ const ArchiveTeamWarriorWidgetContent = ({
           </Text>
         </Group>
 
-        <Badge size="sm" color={status.status === "Running" ? "green" : "gray"}>
-          {status.status}
+        <Badge size="sm" color={getStatusColor(statusKey)}>
+          {t(`status.${statusKey}`)}
         </Badge>
       </Group>
 
-      {options.showBroadcastMessage && status.broadcastMessage && (
+      {options.showBroadcastMessage && status.broadcastMessage && (isAdvanced || height >= 160) && (
         <Card withBorder p="xs">
           <Text size="xs" lineClamp={3}>
             {status.broadcastMessage}
@@ -56,19 +76,52 @@ const ArchiveTeamWarriorWidgetContent = ({
         </Card>
       )}
 
-      <SimpleGrid cols={2} spacing="xs">
-        <Metric label="Running" value={status.counts.running} />
-        <Metric label="Done" value={status.counts.completed} />
-        <Metric label="Failed" value={status.counts.failed} />
-        <Metric label="Canceled" value={status.counts.canceled} />
+      <SimpleGrid cols={width < 180 || height < 120 ? 4 : 2} spacing="xs">
+        <Metric label={t("metric.running")} value={status.counts.running} />
+        <Metric label={t("metric.completed")} value={status.counts.completed} />
+        <Metric label={t("metric.failed")} value={status.counts.failed} />
+        <Metric label={t("metric.canceled")} value={status.counts.canceled} />
       </SimpleGrid>
 
       {status.bandwidth && (
         <SimpleGrid cols={2} spacing="xs">
-          <Metric label="Download" value={formatBandwidth(status.bandwidth.receiving)} />
-          <Metric label="Upload" value={formatBandwidth(status.bandwidth.sending)} />
+          <Metric label={t("metric.download")} value={formatBandwidth(status.bandwidth.receiving)} />
+          <Metric label={t("metric.upload")} value={formatBandwidth(status.bandwidth.sending)} />
         </SimpleGrid>
       )}
+      {isAdvanced && (
+        <>
+          <Group justify="space-between" gap="xs">
+            <Text size="xs" c="dimmed">
+              {t("runnerStatus", { status: t(`status.${getStatusKey(status.runnerStatus ?? status.status)}`) })}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {t("updatedAt", { date: new Date(status.updatedAt).toLocaleString() })}
+            </Text>
+          </Group>
+          <ScrollArea style={{ flex: 1 }}>
+            <Stack gap={4}>
+              {status.items.map((item) => (
+                <Card key={item.id} withBorder p="xs">
+                  <Group justify="space-between" wrap="nowrap">
+                    <Stack gap={0} miw={0}>
+                      <Text size="sm" fw={600} lineClamp={1}>
+                        {item.name}
+                      </Text>
+                      <Text size="xs" c="dimmed" lineClamp={1}>
+                        {item.project ?? projectName}
+                      </Text>
+                    </Stack>
+                    <Badge size="xs" color={getStatusColor(item.status)}>
+                      {t(`status.${item.status}`)}
+                    </Badge>
+                  </Group>
+                </Card>
+              ))}
+            </Stack>
+          </ScrollArea>
+        </>
+      )}
     </Stack>
   );
 };
@@ -85,3 +138,33 @@ const Metric = ({ label, value }: { label: string; value: number | string }) =>
 );
 
 const formatBandwidth = (value?: number) => formatByteRate(Math.round(value ?? 0));
+
+type WarriorStatusKey = "running" | "completed" | "failed" | "canceled" | "stopped" | "idle" | "unknown";
+
+const getStatusKey = (status?: string | null): WarriorStatusKey => {
+  switch (status?.trim().toLowerCase()) {
+    case "running":
+      return "running";
+    case "done":
+    case "completed":
+      return "completed";
+    case "failed":
+      return "failed";
+    case "canceled":
+    case "cancelled":
+      return "canceled";
+    case "stopped":
+      return "stopped";
+    case "idle":
+      return "idle";
+    default:
+      return "unknown";
+  }
+};
+
+const getStatusColor = (status: WarriorStatusKey): string => {
+  if (status === "running") return "green";
+  if (status === "failed") return "red";
+  if (status === "canceled" || status === "stopped") return "yellow";
+  return "gray";
+};
diff --git a/packages/widgets/src/archive-team-warrior/index.ts b/packages/widgets/src/archive-team-warrior/index.ts
index 5e0998ec2..e639c7e9f 100644
--- a/packages/widgets/src/archive-team-warrior/index.ts
+++ b/packages/widgets/src/archive-team-warrior/index.ts
@@ -5,6 +5,8 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("archiveTeamWarrior", {
   icon: IconArchive,
+  queryKey: [["widget", "archiveTeamWarrior"]],
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showBroadcastMessage: factory.switch({
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 9e410f527..d31aca8fe 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -1,17 +1,91 @@
 "use client";
 
+import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+
 import { clientApi } from "@homarr/api/client";
+import { formatBytes, formatDuration } from "@homarr/common";
+import type { AudiobookshelfDashboardData } from "@homarr/integrations/types";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { AudioStatsContent } from "./audio-stats-content";
 
-export default function AudioStatsWidget({ integrationIds, options, width }: WidgetComponentProps<"audioStats">) {
+export default function AudioStatsWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"audioStats">) {
   const { data: response } = clientApi.widget.audioStats.getStats.useQuery({
     integrationId: integrationIds[0] ?? "",
   });
+  const { data: streamResults = [] } = clientApi.widget.mediaServer.getCurrentStreams.useQuery(
+    { integrationIds, showOnlyPlaying: false },
+    { enabled: displayMode === "advanced" && response?.kind === "navidrome" },
+  );
 
   if (!response) return <WidgetEmptyState />;
 
-  return <AudioStatsContent backend={response.kind} stats={response.data} options={options} width={width} />;
+  const summary = (
+    <AudioStatsContent
+      backend={response.kind}
+      stats={response.data}
+      options={{ ...options, compactMode: displayMode === "compact" && (options.compactMode || height < 160) }}
+      width={width}
+    />
+  );
+  if (displayMode === "compact") return summary;
+
+  const sessions = streamResults.flatMap((result) =>
+    result.sessions.map((session) => ({ integrationId: result.integrationId, session })),
+  );
+  const audiobookStats = response.kind === "audiobookshelf" ? (response.data as AudiobookshelfDashboardData) : null;
+  return (
+    <Stack h="100%" gap="lg" p="md">
+      <div style={{ minHeight: 150 }}>{summary}</div>
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        {response.kind === "navidrome" ? (
+          <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="xs">
+            {sessions.map(({ integrationId, session }) => {
+              const currentlyPlaying = session.currentlyPlaying;
+              if (!currentlyPlaying) return null;
+              return (
+                <Group key={`${integrationId}:${session.sessionId}`} justify="space-between" wrap="nowrap" p="sm">
+                  <Stack gap={0} style={{ minWidth: 0 }}>
+                    <Text size="sm" fw={600} truncate>
+                      {currentlyPlaying.name}
+                    </Text>
+                    <Text size="xs" c="dimmed" truncate>
+                      {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user.username}
+                    </Text>
+                  </Stack>
+                  <Badge variant="light">{session.sessionName}</Badge>
+                </Group>
+              );
+            })}
+          </SimpleGrid>
+        ) : (
+          <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="xs">
+            {(audiobookStats?.libraries ?? []).map((library) => (
+              <Stack key={library.id} gap={2} p="sm">
+                <Group justify="space-between" wrap="nowrap">
+                  <Text size="sm" fw={600} truncate>
+                    {library.name}
+                  </Text>
+                  <Badge size="xs" variant="light">
+                    {library.totalItems}
+                  </Badge>
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {library.totalDurationSeconds === null ? "—" : formatDuration(library.totalDurationSeconds * 1000)} ·{" "}
+                  {library.totalSizeBytes === null ? "—" : formatBytes(library.totalSizeBytes)}
+                </Text>
+              </Stack>
+            ))}
+          </SimpleGrid>
+        )}
+      </ScrollArea>
+    </Stack>
+  );
 }
diff --git a/packages/widgets/src/audio-stats/index.ts b/packages/widgets/src/audio-stats/index.ts
index ffcd2dd93..c5783fb89 100644
--- a/packages/widgets/src/audio-stats/index.ts
+++ b/packages/widgets/src/audio-stats/index.ts
@@ -13,6 +13,7 @@ const hideUnlessAudiobookshelf = {
 
 export const { definition, componentLoader } = createWidgetDefinition("audioStats", {
   icon: IconHeadphones,
+  queryKeys: [[["widget", "audioStats"]], [["widget", "mediaServer"]]],
   supportedIntegrations: ["navidrome", "audiobookshelf"],
   integrationsRequired: true,
   maxIntegrations: 1,
diff --git a/packages/widgets/src/bazarr/component.tsx b/packages/widgets/src/bazarr/component.tsx
index 094c32ee1..5e4d32ffd 100644
--- a/packages/widgets/src/bazarr/component.tsx
+++ b/packages/widgets/src/bazarr/component.tsx
@@ -36,7 +36,13 @@ const iconSizeByWidth = [
   { minWidth: 0, size: 16 },
 ] as const;
 
-export default function BazarrWidget({ integrationIds, options, width }: WidgetComponentProps<"bazarr">) {
+export default function BazarrWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"bazarr">) {
   const t = useScopedI18n("widget.bazarr");
   const { data: badges } = clientApi.widget.bazarr.getBadges.useQuery(
     { integrationId: integrationIds[0] ?? "" },
@@ -53,11 +59,11 @@ export default function BazarrWidget({ integrationIds, options, width }: WidgetC
   } as const;
 
   const visibleStatKeys = Object.entries(statVisibilityByOption)
-    .filter(([optionKey]) => options[optionKey as keyof typeof options])
+    .filter(([optionKey]) => displayMode === "advanced" || options[optionKey as keyof typeof options])
     .map(([, statKey]) => statKey);
 
-  const gridCols = getGridCols(width);
-  const iconSize = getIconSize(width);
+  const gridCols = getGridCols(width, height, visibleStatKeys.length, displayMode === "advanced");
+  const iconSize = getIconSize(Math.min(width, height));
 
   if (visibleStatKeys.length === 0) {
     return (
@@ -92,12 +98,17 @@ export default function BazarrWidget({ integrationIds, options, width }: WidgetC
   );
 }
 
-function getGridCols(width: number): number {
-  const match = gridColsByWidth.find(({ minWidth }) => width >= minWidth);
-  return match?.cols ?? 1;
+export function getGridCols(width: number, height: number, itemCount: number, isAdvanced = false): number {
+  if (itemCount <= 1) return 1;
+  if (isAdvanced && width >= 640) return Math.min(itemCount, 4);
+
+  const widthMatch = gridColsByWidth.find(({ minWidth }) => width >= minWidth)?.cols ?? 1;
+  const rowsAtWidth = Math.ceil(itemCount / widthMatch);
+  const rowHeight = height / rowsAtWidth;
+  return rowHeight >= 72 ? widthMatch : Math.min(itemCount, Math.max(widthMatch, 2));
 }
 
-function getIconSize(width: number): number {
+export function getIconSize(width: number): number {
   const match = iconSizeByWidth.find(({ minWidth }) => width >= minWidth);
   return match?.size ?? 16;
 }
diff --git a/packages/widgets/src/bazarr/index.ts b/packages/widgets/src/bazarr/index.ts
index f2e79f570..7ac60e0de 100644
--- a/packages/widgets/src/bazarr/index.ts
+++ b/packages/widgets/src/bazarr/index.ts
@@ -5,8 +5,10 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("bazarr", {
   icon: IconBadgeCc,
+  queryKey: [["widget", "bazarr"]],
   supportedIntegrations: ["bazarr"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showMissingEpisodes: factory.switch({
diff --git a/packages/widgets/src/bazarr/layout.spec.ts b/packages/widgets/src/bazarr/layout.spec.ts
new file mode 100644
index 000000000..2401ce4e6
--- /dev/null
+++ b/packages/widgets/src/bazarr/layout.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+
+import { getGridCols, getIconSize } from "./component";
+
+describe("Bazarr responsive layout", () => {
+  test("uses two columns for a short widget so all stats remain visible", () => {
+    expect(getGridCols(220, 100, 4)).toBe(2);
+  });
+
+  test("uses four columns in a wide advanced surface", () => {
+    expect(getGridCols(800, 400, 4, true)).toBe(4);
+  });
+
+  test("sizes icons from the constrained dimension", () => {
+    expect(getIconSize(180)).toBe(16);
+    expect(getIconSize(340)).toBe(22);
+  });
+});
diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index 3f934423d..f81835739 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -35,6 +35,8 @@ export default function BeszelAlertsWidget({
   options,
   integrationIds,
   isEditMode,
+  height,
+  displayMode = "compact",
 }: WidgetComponentProps<"beszelAlerts">) {
   const t = useScopedI18n("widget.beszelAlerts");
   const alertsInput = useMemo(
@@ -67,6 +69,8 @@ export default function BeszelAlertsWidget({
 
   const triggeredAlerts = alerts.filter((a) => a.triggered);
   const okAlerts = alerts.filter((a) => !a.triggered);
+  const showOkAlerts = displayMode === "advanced" || triggeredAlerts.length === 0 || height >= 260;
+  const showHistory = options.showHistory && (displayMode === "advanced" || height >= 360);
 
   if (alertsError) throw alertsError;
 
@@ -117,9 +121,9 @@ export default function BeszelAlertsWidget({
             </Stack>
           )}
 
-          {triggeredAlerts.length > 0 && okAlerts.length > 0 && <Divider />}
+          {triggeredAlerts.length > 0 && showOkAlerts && okAlerts.length > 0 && <Divider />}
 
-          {okAlerts.length > 0 && (
+          {showOkAlerts && okAlerts.length > 0 && (
             <Stack gap={6}>
               <Group gap={6}>
                 <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
@@ -140,7 +144,7 @@ export default function BeszelAlertsWidget({
             </Stack>
           )}
 
-          {options.showHistory && history.length > 0 && (
+          {showHistory && history.length > 0 && (
             <>
               <Divider />
               <Stack gap={6}>
diff --git a/packages/widgets/src/beszel-alerts/index.ts b/packages/widgets/src/beszel-alerts/index.ts
index 5e3799a90..f7dd6dee7 100644
--- a/packages/widgets/src/beszel-alerts/index.ts
+++ b/packages/widgets/src/beszel-alerts/index.ts
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", {
   icon: IconBell,
+  queryKey: [["widget", "beszel"]],
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index dd2f56c54..8359b2353 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -330,7 +330,9 @@ const metricRenderers = [
 ] as const;
 
 const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick }: SystemCardProps) => {
-  const visibleMetrics = metricRenderers.filter((m) => m.visible(system, options)).slice(0, maxMetrics);
+  const enabledMetrics = metricRenderers.filter((metric) => metric.visible(system, options));
+  const visibleMetrics = enabledMetrics.slice(0, maxMetrics);
+  const hiddenMetricCount = enabledMetrics.length - visibleMetrics.length;
 
   return (
     <Card
@@ -362,6 +364,11 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
       <Stack gap={0} style={{ flex: 1 }} justify="space-evenly">
         {visibleMetrics.map((m) => m.render(system, t, size))}
       </Stack>
+      {hiddenMetricCount > 0 && (
+        <Text size="10px" c="dimmed" ta="right">
+          +{hiddenMetricCount}
+        </Text>
+      )}
     </Card>
   );
 };
@@ -372,6 +379,7 @@ export default function BeszelSystemGridWidget({
   isEditMode,
   width,
   height,
+  displayMode = "compact",
 }: WidgetComponentProps<"beszelSystemGrid">) {
   const t = useScopedI18n("widget.beszelSystemGrid");
   const board = useRequiredBoard();
@@ -411,14 +419,18 @@ export default function BeszelSystemGridWidget({
     );
   }
 
-  const cols = getColCount(width, height, filteredSystems.length);
+  const advanced = displayMode === "advanced";
+  const cols = advanced
+    ? Math.min(filteredSystems.length, width >= 900 ? 2 : 1)
+    : getColCount(width, height, filteredSystems.length);
   const rows = Math.ceil(filteredSystems.length / cols) || 1;
   const rawCellHeight = height / rows;
-  const scrollEnabled = rawCellHeight < MIN_CELL_HEIGHT;
-  const effectiveCellHeight = scrollEnabled ? MIN_CELL_HEIGHT : rawCellHeight;
+  const minimumCellHeight = advanced ? 320 : MIN_CELL_HEIGHT;
+  const scrollEnabled = rawCellHeight < minimumCellHeight;
+  const effectiveCellHeight = scrollEnabled ? minimumCellHeight : rawCellHeight;
   const cellWidth = width / cols;
   const size = getSizeConfig(cellWidth, effectiveCellHeight);
-  const maxMetrics = getMaxVisibleMetrics(effectiveCellHeight, size);
+  const maxMetrics = advanced ? metricRenderers.length : getMaxVisibleMetrics(effectiveCellHeight, size);
 
   return (
     <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
@@ -428,7 +440,7 @@ export default function BeszelSystemGridWidget({
         style={{
           display: "grid",
           gridTemplateColumns: `repeat(${cols}, 1fr)`,
-          gridTemplateRows: scrollEnabled ? `repeat(${rows}, ${MIN_CELL_HEIGHT}px)` : `repeat(${rows}, 1fr)`,
+          gridTemplateRows: scrollEnabled ? `repeat(${rows}, ${minimumCellHeight}px)` : `repeat(${rows}, 1fr)`,
           gap: size.gap,
           overflow: scrollEnabled ? "auto" : "hidden",
         }}
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 91dcd7292..1b964c409 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useMemo } from "react";
-import { Box, Button, Center, Loader, Menu, ScrollArea, Select, Stack, Text } from "@mantine/core";
+import { Box, Button, Center, Loader, Menu, ScrollArea, SegmentedControl, Select, Stack, Text } from "@mantine/core";
 import { IconQuestionMark, IconServer, IconServerOff } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -16,12 +16,15 @@ import type { WidgetComponentProps } from "../definition";
 import type { BeszelTimePeriod } from "../beszel/_shared/chart";
 import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
+import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";
 
 export default function BeszelSystemStatsWidget({
   options,
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode = "compact",
   boardId,
   itemId,
   setOptions,
@@ -37,13 +40,11 @@ export default function BeszelSystemStatsWidget({
     error: systemsError,
   } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
 
-  const systems = useMemo(
-    () => systemsResult.flatMap((result) => result.systems.map((system) => ({ value: system.id, label: system.name }))),
-    [systemsResult],
-  );
-  const selectedSystem = options.systemId || systems[0]?.value || "";
-  const selectedLabel = systems.find((system) => system.value === selectedSystem)?.label;
-  const systemExists = systems.some((system) => system.value === selectedSystem);
+  const systems = useMemo(() => createBeszelSystemChoices(systemsResult), [systemsResult]);
+  const selectedSystem = resolveBeszelSystemChoice(systems, options.systemId);
+  const selectedValue = selectedSystem?.value ?? "";
+  const selectedLabel = selectedSystem?.label;
+  const systemExists = selectedSystem !== undefined;
 
   const handleSelectSystem = useCallback(
     (value: string) => {
@@ -55,6 +56,16 @@ export default function BeszelSystemStatsWidget({
     [setOptions, hasChangeAccess, boardId, itemId, saveItemOptions],
   );
 
+  const handleTimePeriod = useCallback(
+    (value: string) => {
+      setOptions({ newOptions: { timePeriod: value as BeszelTimePeriod } });
+      if (hasChangeAccess && boardId && itemId) {
+        saveItemOptions({ boardId, itemId, newOptions: { timePeriod: value } });
+      }
+    },
+    [boardId, hasChangeAccess, itemId, saveItemOptions, setOptions],
+  );
+
   if (systemsError) throw systemsError;
   if (systemsPending)
     return (
@@ -90,7 +101,7 @@ export default function BeszelSystemStatsWidget({
           <Select
             size="xs"
             data={systems}
-            value={selectedSystem}
+            value={selectedValue}
             placeholder={t("selectSystem")}
             onChange={(value) => value && handleSelectSystem(value)}
           />
@@ -127,8 +138,8 @@ export default function BeszelSystemStatsWidget({
                   <Menu.Item
                     key={system.value}
                     fz="xs"
-                    fw={system.value === selectedSystem ? 600 : 400}
-                    c={system.value !== selectedSystem ? "dimmed" : undefined}
+                    fw={system.value === selectedValue ? 600 : 400}
+                    c={system.value !== selectedValue ? "dimmed" : undefined}
                     onClick={() => handleSelectSystem(system.value)}
                   >
                     {system.label}
@@ -137,20 +148,35 @@ export default function BeszelSystemStatsWidget({
               </Menu.Dropdown>
             </Menu>
           )}
+          {!isEditMode && displayMode === "advanced" && (
+            <SegmentedControl
+              size="xs"
+              value={options.timePeriod}
+              onChange={handleTimePeriod}
+              data={[
+                { value: "1m", label: t("period.live") },
+                { value: "1h", label: t("period.oneHour") },
+                { value: "12h", label: t("period.twelveHours") },
+                { value: "24h", label: t("period.oneDay") },
+                { value: "1w", label: t("period.oneWeek") },
+                { value: "30d", label: t("period.thirtyDays") },
+              ]}
+            />
+          )}
           <BeszelStatsView
-            integrationIds={integrationIds}
-            systemId={selectedSystem}
+            integrationIds={selectedSystem ? [selectedSystem.integrationId] : []}
+            systemId={selectedSystem?.systemId ?? ""}
             timePeriod={options.timePeriod as BeszelTimePeriod}
-            columns={width > 600 ? 2 : 1}
+            columns={displayMode === "advanced" || width > 600 ? 2 : 1}
             visibility={{
               cpu: options.showCpu,
               memory: options.showMemory,
               disk: options.showDisk,
-              diskIO: options.showDiskIO,
-              network: options.showNetwork,
-              dockerCpu: options.showDockerCpu,
-              dockerMemory: options.showDockerMemory,
-              dockerNetwork: options.showDockerNetwork,
+              diskIO: options.showDiskIO && (displayMode === "advanced" || height >= 260),
+              network: options.showNetwork && (displayMode === "advanced" || height >= 260),
+              dockerCpu: options.showDockerCpu && (displayMode === "advanced" || height >= 380),
+              dockerMemory: options.showDockerMemory && (displayMode === "advanced" || height >= 380),
+              dockerNetwork: options.showDockerNetwork && (displayMode === "advanced" || height >= 380),
             }}
             onSwitchToHistorical={() => setOptions({ newOptions: { timePeriod: "1h" } })}
           />
diff --git a/packages/widgets/src/beszel-system-stats/index.ts b/packages/widgets/src/beszel-system-stats/index.ts
index af2907b25..3a885f563 100644
--- a/packages/widgets/src/beszel-system-stats/index.ts
+++ b/packages/widgets/src/beszel-system-stats/index.ts
@@ -4,6 +4,7 @@ import { clientApi } from "@homarr/api/client";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
+import { createBeszelSystemChoices } from "./selection";
 
 const timePeriodOptions = [
   { value: "1m", label: "Live" },
@@ -30,7 +31,7 @@ export const { definition, componentLoader } = createWidgetDefinition("beszelSys
             isPending,
             isError,
           } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds }, { enabled: integrationIds.length > 0 });
-          const selectData = data.flatMap((r) => r.systems.map((s) => ({ value: s.id, label: s.name })));
+          const selectData = createBeszelSystemChoices(data).map(({ value, label }) => ({ value, label }));
           return { data: selectData, isPending, isError };
         },
       }),
diff --git a/packages/widgets/src/beszel-system-stats/selection.spec.ts b/packages/widgets/src/beszel-system-stats/selection.spec.ts
new file mode 100644
index 000000000..8280761ad
--- /dev/null
+++ b/packages/widgets/src/beszel-system-stats/selection.spec.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+
+import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";
+
+const choices = createBeszelSystemChoices([
+  { integrationId: "one", integrationName: "Primary", systems: [{ id: "same", name: "Host A" }] },
+  { integrationId: "two", integrationName: "Backup", systems: [{ id: "same", name: "Host B" }] },
+]);
+
+describe("Beszel system selection", () => {
+  it("uses a composite integration and system identity", () => {
+    expect(choices.map((choice) => choice.value)).toEqual(["one:same", "two:same"]);
+    expect(resolveBeszelSystemChoice(choices, "two:same")?.integrationId).toBe("two");
+  });
+
+  it("keeps legacy plain system ids working", () => {
+    expect(resolveBeszelSystemChoice(choices, "same")?.integrationId).toBe("one");
+  });
+});
diff --git a/packages/widgets/src/beszel-system-stats/selection.ts b/packages/widgets/src/beszel-system-stats/selection.ts
new file mode 100644
index 000000000..bd7445704
--- /dev/null
+++ b/packages/widgets/src/beszel-system-stats/selection.ts
@@ -0,0 +1,32 @@
+export interface BeszelSystemChoice {
+  value: string;
+  label: string;
+  integrationId: string;
+  systemId: string;
+}
+
+interface BeszelSystemsResult {
+  integrationId: string;
+  integrationName: string;
+  systems: { id: string; name: string }[];
+}
+
+export function createBeszelSystemChoices(results: BeszelSystemsResult[]): BeszelSystemChoice[] {
+  const includeIntegrationName = results.length > 1;
+  return results.flatMap((result) =>
+    result.systems.map((system) => ({
+      value: `${result.integrationId}:${system.id}`,
+      label: includeIntegrationName ? `${result.integrationName} · ${system.name}` : system.name,
+      integrationId: result.integrationId,
+      systemId: system.id,
+    })),
+  );
+}
+
+export function resolveBeszelSystemChoice(choices: BeszelSystemChoice[], storedValue: string) {
+  return (
+    choices.find((choice) => choice.value === storedValue) ??
+    choices.find((choice) => choice.systemId === storedValue) ??
+    choices[0]
+  );
+}
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index 5352eb170..14ac594df 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -3,7 +3,7 @@
 import "./styles.css";
 
 import { useMemo, useState } from "react";
-import { Center, Group, Indicator, Loader, Progress, Text } from "@mantine/core";
+import { Center, Group, Indicator, Loader, Progress, ScrollArea, Stack, Text } from "@mantine/core";
 import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
 import { DataTable } from "mantine-datatable";
 import {
@@ -38,6 +38,7 @@ import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
 import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
+import { BeszelStatsView } from "../beszel/_shared/stats-view";
 
 const directionMultiplier: Record<string, number> = { asc: 1, desc: -1 };
 
@@ -75,6 +76,7 @@ export default function BeszelSystemTableWidget({
   integrationIds,
   isEditMode,
   width,
+  displayMode = "compact",
 }: WidgetComponentProps<"beszelSystemTable">) {
   const t = useScopedI18n("widget.beszelSystemTable");
   const { openModal } = useModalAction(BeszelSystemStatsModal);
@@ -84,6 +86,34 @@ export default function BeszelSystemTableWidget({
     isPending,
   } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
   const size = getSizeConfig(width);
+  const [selectedSystem, setSelectedSystem] = useState<SystemRowWithKey | null>(null);
+
+  const visibleMetricKeys = useMemo(() => {
+    const enabled = [
+      "showCpu",
+      "showMemory",
+      "showDisk",
+      "showGpu",
+      "showLoadAvg",
+      "showNet",
+      "showTemp",
+      "showBattery",
+      "showServices",
+      "showUptime",
+      "showAgent",
+    ].filter((key) => options[key as keyof typeof options]) as string[];
+    const budget =
+      displayMode === "advanced"
+        ? enabled.length
+        : width < 360
+          ? 1
+          : width < 560
+            ? 2
+            : width < 760
+              ? 4
+              : enabled.length;
+    return new Set(enabled.slice(0, budget));
+  }, [displayMode, options, width]);
 
   const filteredSystems = useBeszelFilteredSystems(results, options.statusFilter);
 
@@ -138,7 +168,7 @@ export default function BeszelSystemTableWidget({
           </Group>
         ),
       },
-      options.showCpu && {
+      visibleMetricKeys.has("showCpu") && {
         accessor: "cpu",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -149,7 +179,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <PercentCell value={record.cpu} />,
       },
-      options.showMemory && {
+      visibleMetricKeys.has("showMemory") && {
         accessor: "memory",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -160,7 +190,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <PercentCell value={record.memory} />,
       },
-      options.showDisk && {
+      visibleMetricKeys.has("showDisk") && {
         accessor: "disk",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -179,7 +209,7 @@ export default function BeszelSystemTableWidget({
           />
         ),
       },
-      options.showGpu && {
+      visibleMetricKeys.has("showGpu") && {
         accessor: "gpu",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -190,7 +220,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <PercentCell value={record.gpu} />,
       },
-      options.showLoadAvg && {
+      visibleMetricKeys.has("showLoadAvg") && {
         accessor: "loadAvg",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -206,7 +236,7 @@ export default function BeszelSystemTableWidget({
           </Group>
         ),
       },
-      options.showNet && {
+      visibleMetricKeys.has("showNet") && {
         accessor: "netBytes",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -221,7 +251,7 @@ export default function BeszelSystemTableWidget({
           </Text>
         ),
       },
-      options.showTemp && {
+      visibleMetricKeys.has("showTemp") && {
         accessor: "temp",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -232,7 +262,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <Text size={size.fontSize}>{formatTemp(record.temp, false)}</Text>,
       },
-      options.showBattery && {
+      visibleMetricKeys.has("showBattery") && {
         accessor: "battery",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -242,7 +272,7 @@ export default function BeszelSystemTableWidget({
         ),
         render: (record) => <Text size={size.fontSize}>{record.battery ? `${record.battery[0]}%` : "—"}</Text>,
       },
-      options.showServices && {
+      visibleMetricKeys.has("showServices") && {
         accessor: "services",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -253,7 +283,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <Text size={size.fontSize}>{record.services}</Text>,
       },
-      options.showUptime && {
+      visibleMetricKeys.has("showUptime") && {
         accessor: "uptime",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -264,7 +294,7 @@ export default function BeszelSystemTableWidget({
         sortable: true,
         render: (record) => <Text size={size.fontSize}>{formatUptime(record.uptime)}</Text>,
       },
-      options.showAgent && {
+      visibleMetricKeys.has("showAgent") && {
         accessor: "agentVersion",
         title: (
           <Group gap={4} wrap="nowrap">
@@ -278,9 +308,13 @@ export default function BeszelSystemTableWidget({
     ];
 
     return cols.filter(Boolean) as DataTableColumn<SystemRowWithKey>[];
-  }, [options, t, size]);
+  }, [t, size, visibleMetricKeys]);
 
   const handleRowClick = ({ record }: { record: SystemRowWithKey }) => {
+    if (displayMode === "advanced") {
+      setSelectedSystem(record);
+      return;
+    }
     const integrationId = record._key.split(":")[0] ?? "";
     openModal({ integrationId, systemId: record.id }, { title: record.name });
   };
@@ -295,7 +329,7 @@ export default function BeszelSystemTableWidget({
     );
   }
 
-  return (
+  const table = (
     <div style={{ position: "relative", height: "100%" }}>
       <div style={{ position: "absolute", top: 4, right: 8, zIndex: 1 }}>
         <BeszelIntegrationErrorIndicator results={results} />
@@ -318,4 +352,45 @@ export default function BeszelSystemTableWidget({
       />
     </div>
   );
+
+  if (displayMode === "compact") return table;
+
+  const activeSystem = selectedSystem ?? sortedSystems[0];
+  const activeIntegrationId = activeSystem?._key.split(":")[0] ?? "";
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: width >= 900 ? "minmax(0, 3fr) minmax(320px, 2fr)" : "1fr",
+        height: "100%",
+        gap: 12,
+        padding: 12,
+      }}
+    >
+      {table}
+      {activeSystem && (
+        <ScrollArea h="100%">
+          <Stack gap="sm">
+            <Text fw={700}>{activeSystem.name}</Text>
+            <BeszelStatsView
+              integrationIds={[activeIntegrationId]}
+              systemId={activeSystem.id}
+              timePeriod="1h"
+              columns={1}
+              visibility={{
+                cpu: true,
+                memory: true,
+                disk: true,
+                diskIO: true,
+                network: true,
+                dockerCpu: true,
+                dockerMemory: true,
+                dockerNetwork: true,
+              }}
+            />
+          </Stack>
+        </ScrollArea>
+      )}
+    </div>
+  );
 }
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index e6b7eb7c0..875394ea8 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Anchor, Card, Flex, Group, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import { Anchor, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text, Title, UnstyledButton } from "@mantine/core";
 import combineClasses from "clsx";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -12,11 +12,11 @@ import { MaskedOrNormalImage } from "@homarr/ui";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./bookmark.module.css";
 
-export default function BookmarksWidget({ options, itemId }: WidgetComponentProps<"bookmarks">) {
+export default function BookmarksWidget({ options, itemId, width, displayMode }: WidgetComponentProps<"bookmarks">) {
   const board = useRequiredBoard();
   const { data = [] } = clientApi.app.byIds.useQuery(options.items, {
-    select(data) {
-      return data.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
+    select(apps) {
+      return apps.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
     },
   });
 
@@ -48,7 +48,16 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           {options.title}
         </Title>
       )}
-      {(options.layout === "grid" || options.layout === "gridHorizontal") && (
+      {displayMode === "advanced" && (
+        <AdvancedBookmarksLayout
+          data={data}
+          width={width}
+          openNewTab={options.openNewTab}
+          withBorder={options.withBorder}
+          hasIconColor={board.iconColor !== null}
+        />
+      )}
+      {displayMode !== "advanced" && (options.layout === "grid" || options.layout === "gridHorizontal") && (
         <GridLayout
           data={data}
           itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
@@ -60,7 +69,7 @@ export default function BookmarksWidget({ options, itemId }: WidgetComponentProp
           hasIconColor={board.iconColor !== null}
         />
       )}
-      {options.layout !== "grid" && options.layout !== "gridHorizontal" && (
+      {displayMode !== "advanced" && options.layout !== "grid" && options.layout !== "gridHorizontal" && (
         <FlexLayout
           data={data}
           direction={options.layout}
@@ -144,6 +153,77 @@ const FlexLayout = ({
   );
 };
 
+interface AdvancedBookmarksLayoutProps {
+  data: RouterOutputs["app"]["byIds"];
+  width: number;
+  openNewTab: boolean;
+  withBorder: boolean;
+  hasIconColor: boolean;
+}
+
+export const getAdvancedBookmarkColumns = (width: number, itemCount: number): number =>
+  Math.max(1, Math.min(itemCount || 1, Math.floor(width / 280)));
+
+export const getBookmarkHostname = (href: string | null): string | undefined => {
+  if (!href) return undefined;
+  try {
+    return new URL(href).hostname;
+  } catch {
+    return href;
+  }
+};
+
+const AdvancedBookmarksLayout = ({
+  data,
+  width,
+  openNewTab,
+  withBorder,
+  hasIconColor,
+}: AdvancedBookmarksLayoutProps) => {
+  const board = useRequiredBoard();
+
+  return (
+    <ScrollArea h="100%" style={{ flex: 1 }}>
+      <SimpleGrid cols={getAdvancedBookmarkColumns(width, data.length)} spacing="sm">
+        {data.map((app) => (
+          <UnstyledButton
+            key={app.id}
+            component="a"
+            href={app.href ?? undefined}
+            target={openNewTab ? "_blank" : "_self"}
+            rel="noopener noreferrer"
+          >
+            <Card radius={board.itemRadius} className={classes.card} withBorder={withBorder} p="md" h="100%">
+              <Group align="flex-start" wrap="nowrap">
+                <MaskedOrNormalImage
+                  imageUrl={app.iconUrl}
+                  hasColor={hasIconColor}
+                  alt={app.name}
+                  className={classes.bookmarkIcon}
+                  style={{ width: 40, height: 40, flex: "0 0 auto" }}
+                />
+                <Stack gap={3} miw={0}>
+                  <Text fw={700} size="sm" truncate="end">
+                    {app.name}
+                  </Text>
+                  <Anchor component="span" size="xs" truncate="end">
+                    {getBookmarkHostname(app.href)}
+                  </Anchor>
+                  {app.description && (
+                    <Text size="xs" c="dimmed" lineClamp={3}>
+                      {app.description}
+                    </Text>
+                  )}
+                </Stack>
+              </Group>
+            </Card>
+          </UnstyledButton>
+        ))}
+      </SimpleGrid>
+    </ScrollArea>
+  );
+};
+
 interface GridLayoutProps {
   data: RouterOutputs["app"]["byIds"];
   hideTitle: boolean;
@@ -247,7 +327,7 @@ const VerticalItem = ({
       )}
       {!hideHostname && (
         <Anchor ta="center" component="span" size="xs">
-          {app.href ? new URL(app.href).hostname : undefined}
+          {getBookmarkHostname(app.href)}
         </Anchor>
       )}
     </Stack>
@@ -294,7 +374,7 @@ const HorizontalItem = ({
 
             {!hideHostname && (
               <Anchor component="span" size="xs">
-                {app.href ? new URL(app.href).hostname : undefined}
+                {getBookmarkHostname(app.href)}
               </Anchor>
             )}
           </Stack>
diff --git a/packages/widgets/src/bookmarks/index.tsx b/packages/widgets/src/bookmarks/index.tsx
index c57b909fd..c18ff796e 100644
--- a/packages/widgets/src/bookmarks/index.tsx
+++ b/packages/widgets/src/bookmarks/index.tsx
@@ -10,6 +10,7 @@ import { BookmarkAddButton } from "./add-button";
 
 export const { definition, componentLoader } = createWidgetDefinition("bookmarks", {
   icon: IconBookmark,
+  queryKey: [["app", "byIds"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       title: factory.text(),
diff --git a/packages/widgets/src/bookmarks/layout.spec.ts b/packages/widgets/src/bookmarks/layout.spec.ts
new file mode 100644
index 000000000..adb35a554
--- /dev/null
+++ b/packages/widgets/src/bookmarks/layout.spec.ts
@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+
+import { getAdvancedBookmarkColumns, getBookmarkHostname } from "./component";
+
+describe("bookmark display helpers", () => {
+  test("uses bounded advanced columns", () => {
+    expect(getAdvancedBookmarkColumns(900, 8)).toBe(3);
+    expect(getAdvancedBookmarkColumns(120, 8)).toBe(1);
+    expect(getAdvancedBookmarkColumns(900, 0)).toBe(1);
+  });
+
+  test("does not crash on malformed bookmark URLs", () => {
+    expect(getBookmarkHostname("https://homarr.dev/docs")).toBe("homarr.dev");
+    expect(getBookmarkHostname("not a URL")).toBe("not a URL");
+    expect(getBookmarkHostname(null)).toBeUndefined();
+  });
+});
diff --git a/packages/widgets/src/calendar/calendar-event-list.tsx b/packages/widgets/src/calendar/calendar-event-list.tsx
index 992da9d71..3fadb5a98 100644
--- a/packages/widgets/src/calendar/calendar-event-list.tsx
+++ b/packages/widgets/src/calendar/calendar-event-list.tsx
@@ -1,3 +1,4 @@
+import { useId } from "react";
 import {
   Badge,
   Box,
@@ -18,15 +19,25 @@ import { isNullOrWhitespace } from "@homarr/common";
 import type { CalendarEvent } from "@homarr/integrations/types";
 import { useI18n } from "@homarr/translation/client";
 
+import { groupEventsByDate } from "./calendar-events";
 import classes from "./calendar-event-list.module.css";
 
 interface CalendarEventListProps {
   events: CalendarEvent[];
+  groupByDate?: boolean;
+  locale?: string;
 }
 
-export const CalendarEventList = ({ events }: CalendarEventListProps) => {
-  const { colorScheme } = useMantineColorScheme();
-  const t = useI18n();
+export const CalendarEventList = ({ events, groupByDate = false, locale }: CalendarEventListProps) => {
+  const headingIdPrefix = useId();
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+  const groups = groupByDate ? [...groupEventsByDate(events).entries()] : null;
+
   return (
     <ScrollArea
       offsetScrollbars
@@ -38,129 +49,155 @@ export const CalendarEventList = ({ events }: CalendarEventListProps) => {
         },
       }}
     >
-      <Stack>
-        {events.map((event, eventIndex) => (
-          <Group key={`event-${eventIndex}`} align={"stretch"} wrap="nowrap">
-            {event.image !== null && (
-              <Box pos="relative">
-                <Image
-                  src={event.image.src}
-                  w={70}
-                  mah={150}
-                  style={{
-                    aspectRatio: event.image.aspectRatio
-                      ? `${event.image.aspectRatio.width} / ${event.image.aspectRatio.height}`
-                      : "1/1",
-                  }}
-                  radius="sm"
-                  fallbackSrc="https://placehold.co/400x400?text=No%20image"
-                />
-                {event.image.badge !== undefined && (
-                  <Badge pos="absolute" bottom={-6} left="50%" w="90%" className={classes.badge}>
-                    {event.image.badge.content}
-                  </Badge>
-                )}
-              </Box>
-            )}
-            <Stack style={{ flexGrow: 1 }} gap={0}>
-              <Group justify="space-between" align="start" mb="xs" wrap="nowrap">
-                <Stack gap={0}>
-                  {event.subTitle !== null && (
-                    <Text lineClamp={1} size="sm">
-                      {event.subTitle}
-                    </Text>
-                  )}
-                  <Text fw={"bold"} lineClamp={1} size="sm">
-                    {event.title}
-                  </Text>
-                </Stack>
-                {event.metadata?.type === "radarr" && (
-                  <Group wrap="nowrap">
-                    <Text c="dimmed" size="sm">
-                      {t(`widget.calendar.option.releaseType.options.${event.metadata.releaseType}`)}
-                    </Text>
-                  </Group>
-                )}
-
-                <Group gap={3} wrap="nowrap" align={"center"}>
-                  <IconClock opacity={0.7} size={"1rem"} />
-                  {isAllDay(event) ? (
-                    <Text c={"dimmed"} size={"sm"}>
-                      {t("widget.calendar.duration.allDay")}
-                    </Text>
-                  ) : (
-                    <>
-                      <Text c={"dimmed"} size={"sm"}>
-                        {dayjs(event.startDate).format("HH:mm")}
-                      </Text>
-
-                      {event.endDate !== null && (
-                        <>
-                          -{" "}
-                          <Text c={"dimmed"} size={"sm"}>
-                            {dayjs(event.endDate).format("HH:mm")}
-                          </Text>
-                        </>
-                      )}
-                    </>
-                  )}
-                </Group>
-              </Group>
-
-              {event.location !== null && (
-                <Group gap={4} mb={isNullOrWhitespace(event.description) ? 0 : "sm"}>
-                  <IconPin opacity={0.7} size={"1rem"} />
-                  <Text size={"xs"} c={"dimmed"} lineClamp={1}>
-                    {event.location}
-                  </Text>
-                </Group>
-              )}
-
-              {!isNullOrWhitespace(event.description) && (
-                <Text size={"xs"} c={"dimmed"} lineClamp={2}>
-                  {event.description}
+      <Stack gap="md">
+        {groups ? (
+          groups.map(([date, groupedEvents]) => {
+            const headingId = `${headingIdPrefix}-${date}`;
+            return (
+              <Box key={date} component="section" aria-labelledby={headingId}>
+                <Text id={headingId} component="h3" size="sm" fw={600} tt="capitalize">
+                  {dateFormatter.format(groupedEvents[0]?.startDate)}
                 </Text>
-              )}
-
-              {event.links.length > 0 && (
-                <Group pt={5} gap={5} mt={"auto"} wrap="nowrap">
-                  {event.links
-                    .filter((link) => link.href)
-                    .map((link) => (
-                      <Button
-                        key={link.href}
-                        component={"a"}
-                        href={link.href.toString()}
-                        target={"_blank"}
-                        size={"xs"}
-                        radius={"xl"}
-                        variant={link.color ? undefined : "default"}
-                        styles={{
-                          root: {
-                            backgroundColor: link.color,
-                            color: link.isDark && colorScheme === "dark" ? "white" : "black",
-                            "&:hover": link.color
-                              ? {
-                                  backgroundColor: link.isDark ? lighten(link.color, 0.1) : darken(link.color, 0.1),
-                                }
-                              : undefined,
-                          },
-                        }}
-                        leftSection={link.logo ? <Image src={link.logo} fit="contain" w={20} h={20} /> : undefined}
-                      >
-                        <Text>{link.name}</Text>
-                      </Button>
-                    ))}
-                </Group>
-              )}
-            </Stack>
-          </Group>
-        ))}
+                <Stack mt="xs">
+                  <CalendarEventRows events={groupedEvents} />
+                </Stack>
+              </Box>
+            );
+          })
+        ) : (
+          <CalendarEventRows events={events} />
+        )}
       </Stack>
     </ScrollArea>
   );
 };
 
+const CalendarEventRows = ({ events }: Pick<CalendarEventListProps, "events">) => {
+  const { colorScheme } = useMantineColorScheme();
+  const t = useI18n();
+  return (
+    <>
+      {events.map((event, eventIndex) => (
+        <Group key={`event-${eventIndex}`} align={"stretch"} wrap="nowrap">
+          {event.image !== null && (
+            <Box pos="relative">
+              <Image
+                src={event.image.src}
+                w={70}
+                mah={150}
+                style={{
+                  aspectRatio: event.image.aspectRatio
+                    ? `${event.image.aspectRatio.width} / ${event.image.aspectRatio.height}`
+                    : "1/1",
+                }}
+                radius="sm"
+                fallbackSrc="https://placehold.co/400x400?text=No%20image"
+              />
+              {event.image.badge !== undefined && (
+                <Badge pos="absolute" bottom={-6} left="50%" w="90%" className={classes.badge}>
+                  {event.image.badge.content}
+                </Badge>
+              )}
+            </Box>
+          )}
+          <Stack style={{ flexGrow: 1 }} gap={0}>
+            <Group justify="space-between" align="start" mb="xs" wrap="nowrap">
+              <Stack gap={0}>
+                {event.subTitle !== null && (
+                  <Text lineClamp={1} size="sm">
+                    {event.subTitle}
+                  </Text>
+                )}
+                <Text fw={"bold"} lineClamp={1} size="sm">
+                  {event.title}
+                </Text>
+              </Stack>
+              {event.metadata?.type === "radarr" && (
+                <Group wrap="nowrap">
+                  <Text c="dimmed" size="sm">
+                    {t(`widget.calendar.option.releaseType.options.${event.metadata.releaseType}`)}
+                  </Text>
+                </Group>
+              )}
+
+              <Group gap={3} wrap="nowrap" align={"center"}>
+                <IconClock opacity={0.7} size={"1rem"} />
+                {isAllDay(event) ? (
+                  <Text c={"dimmed"} size={"sm"}>
+                    {t("widget.calendar.duration.allDay")}
+                  </Text>
+                ) : (
+                  <>
+                    <Text c={"dimmed"} size={"sm"}>
+                      {dayjs(event.startDate).format("HH:mm")}
+                    </Text>
+
+                    {event.endDate !== null && (
+                      <>
+                        -{" "}
+                        <Text c={"dimmed"} size={"sm"}>
+                          {dayjs(event.endDate).format("HH:mm")}
+                        </Text>
+                      </>
+                    )}
+                  </>
+                )}
+              </Group>
+            </Group>
+
+            {event.location !== null && (
+              <Group gap={4} mb={isNullOrWhitespace(event.description) ? 0 : "sm"}>
+                <IconPin opacity={0.7} size={"1rem"} />
+                <Text size={"xs"} c={"dimmed"} lineClamp={1}>
+                  {event.location}
+                </Text>
+              </Group>
+            )}
+
+            {!isNullOrWhitespace(event.description) && (
+              <Text size={"xs"} c={"dimmed"} lineClamp={2}>
+                {event.description}
+              </Text>
+            )}
+
+            {event.links.length > 0 && (
+              <Group pt={5} gap={5} mt={"auto"} wrap="nowrap">
+                {event.links
+                  .filter((link) => link.href)
+                  .map((link) => (
+                    <Button
+                      key={link.href}
+                      component={"a"}
+                      href={link.href.toString()}
+                      target={"_blank"}
+                      size={"xs"}
+                      radius={"xl"}
+                      variant={link.color ? undefined : "default"}
+                      styles={{
+                        root: {
+                          backgroundColor: link.color,
+                          color: link.isDark && colorScheme === "dark" ? "white" : "black",
+                          "&:hover": link.color
+                            ? {
+                                backgroundColor: link.isDark ? lighten(link.color, 0.1) : darken(link.color, 0.1),
+                              }
+                            : undefined,
+                        },
+                      }}
+                      leftSection={link.logo ? <Image src={link.logo} fit="contain" w={20} h={20} /> : undefined}
+                    >
+                      <Text>{link.name}</Text>
+                    </Button>
+                  ))}
+              </Group>
+            )}
+          </Stack>
+        </Group>
+      ))}
+    </>
+  );
+};
+
 const isAllDay = (event: Pick<CalendarEvent, "startDate" | "endDate">) => {
   if (!event.endDate) return false;
 
diff --git a/packages/widgets/src/calendar/calendar-events.ts b/packages/widgets/src/calendar/calendar-events.ts
new file mode 100644
index 000000000..0b15e0098
--- /dev/null
+++ b/packages/widgets/src/calendar/calendar-events.ts
@@ -0,0 +1,77 @@
+import dayjs from "dayjs";
+
+import type { CalendarEvent } from "@homarr/integrations/types";
+
+export const toCalendarDateKey = (date: Date) => dayjs(date).format("YYYY-MM-DD");
+
+const matchesReleaseType = (event: CalendarEvent, releaseTypes: readonly string[]) =>
+  event.metadata?.type !== "radarr" || releaseTypes.includes(event.metadata.releaseType);
+
+export const getCalendarAgendaEvents = (
+  events: CalendarEvent[],
+  viewedMonth: Date,
+  releaseTypes: readonly string[],
+): CalendarEvent[] => {
+  const monthStart = dayjs(viewedMonth).startOf("month");
+  const monthEnd = monthStart.add(1, "month");
+
+  return events
+    .filter((event) => {
+      if (!matchesReleaseType(event, releaseTypes)) return false;
+
+      const start = dayjs(event.startDate);
+      if (!event.endDate) return !start.isBefore(monthStart) && start.isBefore(monthEnd);
+
+      // Calendar intervals are half-open: an all-day event ending at midnight does not occupy the next day.
+      return start.isBefore(monthEnd) && dayjs(event.endDate).isAfter(monthStart);
+    })
+    .toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime());
+};
+
+export const groupEventsByDate = (events: CalendarEvent[]): Map<string, CalendarEvent[]> => {
+  const result = new Map<string, CalendarEvent[]>();
+  for (const event of events) {
+    const key = toCalendarDateKey(event.startDate);
+    const entries = result.get(key) ?? [];
+    entries.push(event);
+    result.set(key, entries);
+  }
+
+  return new Map(
+    [...result.entries()]
+      .toSorted(([dateA], [dateB]) => dateA.localeCompare(dateB))
+      .map(([date, entries]) => [
+        date,
+        entries.toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime()),
+      ]),
+  );
+};
+
+/** Splits multi-day events into single-day calendar tiles. */
+export const splitEvents = (events: CalendarEvent[]): CalendarEvent[] => {
+  const splitEventEntries: CalendarEvent[] = [];
+  for (const event of events) {
+    if (!event.endDate) {
+      splitEventEntries.push(event);
+      continue;
+    }
+
+    if (dayjs(event.startDate).isSame(event.endDate, "day")) {
+      splitEventEntries.push(event);
+      continue;
+    }
+
+    if (dayjs(event.startDate).isAfter(event.endDate)) continue;
+
+    let currentStart = dayjs(event.startDate);
+    while (currentStart.isBefore(event.endDate)) {
+      splitEventEntries.push({
+        ...event,
+        startDate: currentStart.toDate(),
+        endDate: currentStart.endOf("day").isAfter(event.endDate) ? event.endDate : currentStart.endOf("day").toDate(),
+      });
+      currentStart = currentStart.add(1, "day").startOf("day");
+    }
+  }
+  return splitEventEntries;
+};
diff --git a/packages/widgets/src/calendar/calendar.spec.ts b/packages/widgets/src/calendar/calendar.spec.ts
index 0d655adc6..84ba92b86 100644
--- a/packages/widgets/src/calendar/calendar.spec.ts
+++ b/packages/widgets/src/calendar/calendar.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
 
 import type { CalendarEvent } from "@homarr/integrations/types";
 
-import { splitEvents } from "./component";
+import { getCalendarAgendaEvents, groupEventsByDate, splitEvents } from "./calendar-events";
 
 describe("splitEvents should split multi-day events into multiple single-day events", () => {
   test("2 day all-day event should be split up into two all-day events", () => {
@@ -53,6 +53,45 @@ describe("splitEvents should split multi-day events into multiple single-day eve
   });
 });
 
+describe("groupEventsByDate", () => {
+  test("groups once per day and sorts each bucket", () => {
+    const later = createEvent(new Date(2025, 0, 1, 18));
+    const earlier = createEvent(new Date(2025, 0, 1, 9));
+    const nextDay = createEvent(new Date(2025, 0, 2, 9));
+
+    const result = groupEventsByDate([later, nextDay, earlier]);
+
+    expect(result.size).toBe(2);
+    expect([...result.values()][0]).toEqual([earlier, later]);
+  });
+});
+
+describe("getCalendarAgendaEvents", () => {
+  test("keeps overlapping original events once and excludes adjacent-month events", () => {
+    const spansIntoMonth = createEvent(new Date(2024, 11, 31, 22), new Date(2025, 0, 2, 8));
+    const inMonth = createEvent(new Date(2025, 0, 20, 9));
+    const endsAtMonthStart = createEvent(new Date(2024, 11, 31), new Date(2025, 0, 1));
+    const nextMonth = createEvent(new Date(2025, 1, 1));
+
+    const result = getCalendarAgendaEvents(
+      [nextMonth, spansIntoMonth, endsAtMonthStart, inMonth],
+      new Date(2025, 0, 15),
+      [],
+    );
+
+    expect(result).toEqual([spansIntoMonth, inMonth]);
+  });
+
+  test("applies Radarr release filters without splitting multi-day events", () => {
+    const cinema = createEvent(new Date(2025, 0, 5), new Date(2025, 0, 8));
+    cinema.metadata = { type: "radarr", releaseType: "inCinemas" };
+    const digital = createEvent(new Date(2025, 0, 7));
+    digital.metadata = { type: "radarr", releaseType: "digitalRelease" };
+
+    expect(getCalendarAgendaEvents([cinema, digital], new Date(2025, 0, 1), ["inCinemas"])).toEqual([cinema]);
+  });
+});
+
 const createEvent = (startDate: Date, endDate: Date | null = null): CalendarEvent => ({
   title: "Test",
   subTitle: null,
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 6d309ce42..275c913b4 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useParams } from "next/navigation";
-import { useMantineTheme } from "@mantine/core";
+import { Box, Stack, Text, useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
 import { useElementSize } from "@mantine/hooks";
 import dayjs from "dayjs";
@@ -14,10 +14,24 @@ import { useSettings } from "@homarr/settings";
 
 import type { WidgetComponentProps } from "../definition";
 import { CalendarDay } from "./calender-day";
+import { getCalendarAgendaEvents, groupEventsByDate, splitEvents, toCalendarDateKey } from "./calendar-events";
+import { CalendarEventList } from "./calendar-event-list";
 import classes from "./component.module.css";
 
 export default function CalendarWidget(props: WidgetComponentProps<"calendar">) {
-  const [month, setMonth] = useState(new Date());
+  const persistedState = props.widgetStateRef?.current?.calendar as { monthTimestamp?: number } | undefined;
+  const [month, setMonth] = useState(() => {
+    const timestamp = persistedState?.monthTimestamp;
+    return typeof timestamp === "number" && Number.isFinite(timestamp) ? new Date(timestamp) : new Date();
+  });
+
+  useEffect(() => {
+    if (!props.widgetStateRef) return;
+    props.widgetStateRef.current = {
+      ...props.widgetStateRef.current,
+      calendar: { monthTimestamp: month.getTime() },
+    };
+  }, [month, props.widgetStateRef]);
 
   if (props.integrationIds.length === 0) {
     return <CalendarBase {...props} events={[]} month={month} setMonth={setMonth} />;
@@ -31,7 +45,7 @@ interface FetchCalendarProps extends WidgetComponentProps<"calendar"> {
   setMonth: (date: Date) => void;
 }
 
-const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options }: FetchCalendarProps) => {
+const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, displayMode }: FetchCalendarProps) => {
   const input = {
     integrationIds,
     month: month.getMonth(),
@@ -43,7 +57,16 @@ const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options }:
 
   const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
 
-  return <CalendarBase isEditMode={isEditMode} events={events} month={month} setMonth={setMonth} options={options} />;
+  return (
+    <CalendarBase
+      isEditMode={isEditMode}
+      events={events}
+      month={month}
+      setMonth={setMonth}
+      options={options}
+      displayMode={displayMode}
+    />
+  );
 };
 
 interface CalendarBaseProps {
@@ -52,9 +75,10 @@ interface CalendarBaseProps {
   month: Date;
   setMonth: (date: Date) => void;
   options: WidgetComponentProps<"calendar">["options"];
+  displayMode?: WidgetComponentProps<"calendar">["displayMode"];
 }
 
-const CalendarBase = ({ isEditMode, events, month, setMonth, options }: CalendarBaseProps) => {
+const CalendarBase = ({ isEditMode, events, month, setMonth, options, displayMode }: CalendarBaseProps) => {
   const params = useParams();
   const locale = params.locale as string;
   const { firstDayOfWeek } = useSettings();
@@ -65,124 +89,101 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
   const isSmall = width < 256;
 
   const normalizedEvents = useMemo(() => splitEvents(events), [events]);
+  const visibleEvents = useMemo(
+    () =>
+      normalizedEvents.filter(
+        (event) => event.metadata?.type !== "radarr" || options.releaseType.includes(event.metadata.releaseType),
+      ),
+    [normalizedEvents, options.releaseType],
+  );
+  const eventsByDate = useMemo(() => groupEventsByDate(visibleEvents), [visibleEvents]);
+  const agendaEvents = useMemo(
+    () => getCalendarAgendaEvents(events, month, options.releaseType),
+    [events, month, options.releaseType],
+  );
 
   return (
-    <Calendar
-      defaultDate={new Date()}
-      onPreviousMonth={(month) => setMonth(new Date(month))}
-      onNextMonth={(month) => setMonth(new Date(month))}
-      highlightToday
-      locale={locale}
-      hideWeekdays={false}
-      date={month}
-      maxLevel="month"
-      firstDayOfWeek={firstDayOfWeek}
-      static={isEditMode}
-      className={classes.calendar}
-      w="100%"
-      h="100%"
-      ref={ref}
-      styles={{
-        calendarHeaderControl: {
-          pointerEvents: isEditMode ? "none" : undefined,
-          borderRadius: "md",
-          height: isSmall ? "1.5rem" : undefined,
-          width: isSmall ? "1.5rem" : undefined,
-        },
-        calendarHeaderLevel: {
-          pointerEvents: "none",
-          fontSize: isSmall ? "0.75rem" : undefined,
-          height: "100%",
-        },
-        levelsGroup: {
-          height: "100%",
-          padding: "md",
-        },
-        calendarHeader: {
-          maxWidth: "unset",
-          marginBottom: 0,
-        },
-        monthCell: {
-          textAlign: "center",
-          position: "relative",
-        },
-        day: {
-          borderRadius: actualItemRadius,
-          width: "100%",
-          height: "100%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          bottom: 0,
-          right: 0,
-        },
-        month: {
-          height: "100%",
-        },
-        weekday: {
-          padding: 0,
-        },
-        weekdaysRow: {
-          height: 22,
-        },
-      }}
-      renderDay={(tileDate) => {
-        const eventsForDate = normalizedEvents
-          .filter((event) => dayjs(event.startDate).isSame(tileDate, "day"))
-          .filter(
-            (event) => event.metadata?.type !== "radarr" || options.releaseType.includes(event.metadata.releaseType),
-          )
-          .toSorted((eventA, eventB) => eventA.startDate.getTime() - eventB.startDate.getTime());
+    <Stack ref={ref} h="100%" w="100%" gap="xs" style={{ overflow: "hidden" }}>
+      <Calendar
+        defaultDate={new Date()}
+        onPreviousMonth={(previousMonth) => setMonth(new Date(previousMonth))}
+        onNextMonth={(nextMonth) => setMonth(new Date(nextMonth))}
+        highlightToday
+        locale={locale}
+        hideWeekdays={false}
+        date={month}
+        maxLevel="month"
+        firstDayOfWeek={firstDayOfWeek}
+        static={isEditMode}
+        className={classes.calendar}
+        w="100%"
+        h={displayMode === "advanced" ? "62%" : "100%"}
+        styles={{
+          calendarHeaderControl: {
+            pointerEvents: isEditMode ? "none" : undefined,
+            borderRadius: "md",
+            height: isSmall ? "1.5rem" : undefined,
+            width: isSmall ? "1.5rem" : undefined,
+          },
+          calendarHeaderLevel: {
+            pointerEvents: "none",
+            fontSize: isSmall ? "0.75rem" : undefined,
+            height: "100%",
+          },
+          levelsGroup: {
+            height: "100%",
+            padding: "md",
+          },
+          calendarHeader: {
+            maxWidth: "unset",
+            marginBottom: 0,
+          },
+          monthCell: {
+            textAlign: "center",
+            position: "relative",
+          },
+          day: {
+            borderRadius: actualItemRadius,
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            bottom: 0,
+            right: 0,
+          },
+          month: {
+            height: "100%",
+          },
+          weekday: {
+            padding: 0,
+          },
+          weekdaysRow: {
+            height: 22,
+          },
+        }}
+        renderDay={(tileDate) => {
+          const eventsForDate = eventsByDate.get(toCalendarDateKey(dayjs(tileDate).toDate())) ?? [];
 
-        return (
-          <CalendarDay
-            date={dayjs(tileDate).toDate()}
-            events={eventsForDate}
-            disabled={isEditMode || eventsForDate.length === 0}
-            rootWidth={width}
-            rootHeight={height}
-          />
-        );
-      }}
-    />
+          return (
+            <CalendarDay
+              date={dayjs(tileDate).toDate()}
+              events={eventsForDate}
+              disabled={isEditMode || eventsForDate.length === 0}
+              rootWidth={width}
+              rootHeight={height}
+            />
+          );
+        }}
+      />
+      {displayMode === "advanced" && (
+        <Box px="md" pb="sm" style={{ flex: 1, minHeight: 0 }}>
+          <Text size="sm" fw={600} mb={4}>
+            {new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month)} · {agendaEvents.length}
+          </Text>
+          <CalendarEventList events={agendaEvents} groupByDate locale={locale} />
+        </Box>
+      )}
+    </Stack>
   );
 };
-
-/**
- * Splits multi-day events into multiple single-day events.
- * @param events The events to split.
- * @returns The split events.
- */
-export const splitEvents = (events: CalendarEvent[]): CalendarEvent[] => {
-  const splitEvents: CalendarEvent[] = [];
-  for (const event of events) {
-    if (!event.endDate) {
-      splitEvents.push(event);
-      continue;
-    }
-
-    if (dayjs(event.startDate).isSame(event.endDate, "day")) {
-      splitEvents.push(event);
-      continue;
-    }
-
-    if (dayjs(event.startDate).isAfter(event.endDate)) {
-      // Invalid event, skip it
-      continue;
-    }
-
-    // Event spans multiple days, split it
-    let currentStart = dayjs(event.startDate);
-
-    while (currentStart.isBefore(event.endDate)) {
-      splitEvents.push({
-        ...event,
-        startDate: currentStart.toDate(),
-        endDate: currentStart.endOf("day").isAfter(event.endDate) ? event.endDate : currentStart.endOf("day").toDate(),
-      });
-
-      currentStart = currentStart.add(1, "day").startOf("day");
-    }
-  }
-  return splitEvents;
-};
diff --git a/packages/widgets/src/calendar/index.ts b/packages/widgets/src/calendar/index.ts
index d03b2f610..3f0abfea0 100644
--- a/packages/widgets/src/calendar/index.ts
+++ b/packages/widgets/src/calendar/index.ts
@@ -9,6 +9,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("calendar", {
   icon: IconCalendar,
+  queryKey: [["widget", "calendar"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       releaseType: factory.multiSelect({
diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index dd43e0380..dad04fe80 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -16,7 +16,7 @@ dayjs.extend(advancedFormat);
 dayjs.extend(utc);
 dayjs.extend(timezones);
 
-export default function ClockWidget({ options, width }: WidgetComponentProps<"clock">) {
+export default function ClockWidget({ options, width, height, displayMode }: WidgetComponentProps<"clock">) {
   const secondsFormat = options.showSeconds ? ":ss" : "";
   const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `hh:mm${secondsFormat} A`;
   const dateFormat = options.dateFormat;
@@ -25,7 +25,8 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
   const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
   const time = useCurrentTime(options);
 
-  const sizing = width < 128 ? "xs" : width < 196 ? "sm" : "md";
+  const minimumAxis = Math.min(width, height * 1.5);
+  const sizing = minimumAxis < 128 ? "xs" : minimumAxis < 196 ? "sm" : "md";
   const showWeatherCorner = options.showWeather && sizing !== "xs";
 
   return (
@@ -35,6 +36,7 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
           latitude={options.weatherLocation.latitude}
           longitude={options.weatherLocation.longitude}
           isFahrenheit={options.isWeatherFormatFahrenheit}
+          showDetails={displayMode === "advanced"}
         />
       )}
       <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap={sizing}>
@@ -44,9 +46,11 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
           </Text>
         )}
         <Title className="clock-time-text" fw={700} order={sizing === "md" ? 2 : sizing === "sm" ? 4 : 6} lh="1">
-          {options.customTimeFormat
-            ? dayjs(time).tz(timezone).format(customTimeFormat)
-            : dayjs(time).tz(timezone).format(timeFormat)}
+          <time dateTime={dayjs(time).tz(timezone).toISOString()}>
+            {options.customTimeFormat
+              ? dayjs(time).tz(timezone).format(customTimeFormat)
+              : dayjs(time).tz(timezone).format(timeFormat)}
+          </time>
         </Title>
         {options.showDate && (
           <Text className="clock-date-text" size={sizing} lineClamp={1}>
@@ -55,6 +59,11 @@ export default function ClockWidget({ options, width }: WidgetComponentProps<"cl
               : dayjs(time).tz(timezone).format(dateFormat)}
           </Text>
         )}
+        {displayMode === "advanced" && (
+          <Text size="xs" c="dimmed" lineClamp={1}>
+            {timezone} · UTC{dayjs(time).tz(timezone).format("Z")}
+          </Text>
+        )}
       </Stack>
     </Box>
   );
@@ -64,9 +73,10 @@ interface ClockWeatherCornerProps {
   latitude: number;
   longitude: number;
   isFahrenheit: boolean;
+  showDetails: boolean;
 }
 
-const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit }: ClockWeatherCornerProps) => {
+const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit, showDetails }: ClockWeatherCornerProps) => {
   const { data: weather } = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
 
   if (!weather) return null;
@@ -81,6 +91,11 @@ const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit }: ClockWeatherC
         {Math.round(temp)}
         {unit}
       </Text>
+      {showDetails && (
+        <Text size="xs" c="dimmed">
+          {Math.round(weather.current.windspeed)} km/h
+        </Text>
+      )}
     </Stack>
   );
 };
diff --git a/packages/widgets/src/clock/index.ts b/packages/widgets/src/clock/index.ts
index 20b22d6a0..3fe152b73 100644
--- a/packages/widgets/src/clock/index.ts
+++ b/packages/widgets/src/clock/index.ts
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("clock", {
   icon: IconClock,
+  queryKey: [["widget", "weather"]],
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/coolify/component.tsx b/packages/widgets/src/coolify/component.tsx
index 46940f56e..0e0a5c801 100644
--- a/packages/widgets/src/coolify/component.tsx
+++ b/packages/widgets/src/coolify/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ScrollArea, Stack, Text } from "@mantine/core";
+import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -10,7 +10,12 @@ import { createWidgetKey } from "./coolify-utils";
 import { InstanceCard } from "./instance-card";
 import { SingleInstanceLayout } from "./single-instance-layout";
 
-export default function CoolifyWidget({ options, integrationIds, width }: WidgetComponentProps<"coolify">) {
+export default function CoolifyWidget({
+  options,
+  integrationIds,
+  width,
+  displayMode,
+}: WidgetComponentProps<"coolify">) {
   const t = useScopedI18n("widget.coolify");
 
   if (integrationIds.length === 0) {
@@ -21,29 +26,45 @@ export default function CoolifyWidget({ options, integrationIds, width }: Widget
     );
   }
 
-  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <CoolifyContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      isAdvanced={displayMode === "advanced"}
+    />
+  );
 }
 
 interface CoolifyContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"coolify">["options"];
   width: number;
+  isAdvanced: boolean;
 }
 
-function CoolifyContent({ integrationIds, options, width }: CoolifyContentProps) {
+function CoolifyContent({ integrationIds, options, width, isAdvanced }: CoolifyContentProps) {
   const { data: instancesData = [] } = clientApi.widget.coolify.getInstancesInfo.useQuery({ integrationIds });
 
-  const isTiny = width < 256;
+  const isTiny = !isAdvanced && width < 256;
   const [firstInstance] = instancesData;
   const widgetKey = createWidgetKey(integrationIds);
 
   if (instancesData.length === 1 && firstInstance) {
-    return <SingleInstanceLayout instance={firstInstance} options={options} isTiny={isTiny} widgetKey={widgetKey} />;
+    return (
+      <SingleInstanceLayout
+        instance={firstInstance}
+        options={options}
+        isTiny={isTiny}
+        widgetKey={widgetKey}
+        isAdvanced={isAdvanced}
+      />
+    );
   }
 
   return (
     <ScrollArea h="100%">
-      <Stack gap="xs" p="xs">
+      <SimpleGrid cols={isAdvanced && width >= 760 ? 2 : 1} spacing="sm" p="xs">
         {instancesData.map((instance) => (
           <InstanceCard
             key={instance.integrationId}
@@ -51,9 +72,10 @@ function CoolifyContent({ integrationIds, options, width }: CoolifyContentProps)
             options={options}
             isTiny={isTiny}
             widgetKey={widgetKey}
+            isAdvanced={isAdvanced}
           />
         ))}
-      </Stack>
+      </SimpleGrid>
     </ScrollArea>
   );
 }
diff --git a/packages/widgets/src/coolify/index.ts b/packages/widgets/src/coolify/index.ts
index cebf9de05..e68e4c839 100644
--- a/packages/widgets/src/coolify/index.ts
+++ b/packages/widgets/src/coolify/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("coolify", {
   icon: IconCloud,
+  queryKey: [["widget", "coolify"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showServers: factory.switch({
diff --git a/packages/widgets/src/coolify/instance-card.tsx b/packages/widgets/src/coolify/instance-card.tsx
index 0f4522dc4..2cc694f9c 100644
--- a/packages/widgets/src/coolify/instance-card.tsx
+++ b/packages/widgets/src/coolify/instance-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Accordion, Anchor, Badge, Card, Group, Image, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
@@ -18,9 +19,10 @@ interface InstanceCardProps {
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
+  isAdvanced: boolean;
 }
 
-export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced }: InstanceCardProps) {
   const t = useScopedI18n("widget.coolify");
   const cardKey = `${widgetKey}-${instance.integrationId}`;
   const [showIp, setShowIp] = useLocalStorage({
@@ -31,6 +33,12 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
     key: `coolify-sections-${cardKey}`,
     defaultValue: ["applications"],
   });
+  const visibleSections = [
+    options.showServers ? "servers" : null,
+    options.showApplications ? "applications" : null,
+    options.showServices ? "services" : null,
+  ].filter((section): section is string => section !== null);
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(visibleSections);
 
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
@@ -90,7 +98,13 @@ export function InstanceCard({ instance, options, isTiny, widgetKey }: InstanceC
         </Group>
       </Group>
 
-      <Accordion variant="filled" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
+      <Accordion
+        variant="filled"
+        chevronPosition="right"
+        multiple
+        value={isAdvanced ? advancedOpenSections : openSections}
+        onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
+      >
         {options.showServers && (
           <ServersSection
             servers={instance.instanceInfo.servers}
diff --git a/packages/widgets/src/coolify/single-instance-layout.tsx b/packages/widgets/src/coolify/single-instance-layout.tsx
index ae44b998f..4d05b71d6 100644
--- a/packages/widgets/src/coolify/single-instance-layout.tsx
+++ b/packages/widgets/src/coolify/single-instance-layout.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { Accordion, Anchor, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
@@ -18,9 +19,10 @@ interface SingleInstanceLayoutProps {
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
+  isAdvanced: boolean;
 }
 
-export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isAdvanced }: SingleInstanceLayoutProps) {
   const t = useScopedI18n("widget.coolify");
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${widgetKey}`,
@@ -30,6 +32,12 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
     key: `coolify-sections-${widgetKey}`,
     defaultValue: ["applications"],
   });
+  const visibleSections = [
+    options.showServers ? "servers" : null,
+    options.showApplications ? "applications" : null,
+    options.showServices ? "services" : null,
+  ].filter((section): section is string => section !== null);
+  const [advancedOpenSections, setAdvancedOpenSections] = useState(visibleSections);
 
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
@@ -56,7 +64,13 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey }: S
           </Anchor>
         </Group>
 
-        <Accordion variant="contained" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
+        <Accordion
+          variant="contained"
+          chevronPosition="right"
+          multiple
+          value={isAdvanced ? advancedOpenSections : openSections}
+          onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
+        >
           {options.showServers && (
             <ServersSection
               servers={instance.instanceInfo.servers}
diff --git a/packages/widgets/src/custom-api/component.tsx b/packages/widgets/src/custom-api/component.tsx
index ea89301d8..9050035bc 100644
--- a/packages/widgets/src/custom-api/component.tsx
+++ b/packages/widgets/src/custom-api/component.tsx
@@ -1,10 +1,12 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { ComponentType } from "react";
 import {
   ActionIcon,
+  Badge,
+  Box,
   Button,
   Card,
   Center,
@@ -22,7 +24,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
-import { IconAlertTriangle, IconCheck, IconExternalLink, IconPlayerPlay } from "@tabler/icons-react";
+import { IconAlertTriangle, IconCheck, IconExternalLink, IconPlayerPause, IconPlayerPlay } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
@@ -96,18 +98,29 @@ function KeyValueDisplay({ data }: { data: Record<string, unknown> }) {
   );
 }
 
-function TableDisplay({ data }: { data: Record<string, unknown> }) {
+interface CustomDisplayProps {
+  data: Record<string, unknown>;
+  displayMode: "compact" | "advanced";
+  width: number;
+  height: number;
+}
+
+function TableDisplay({ data, displayMode, width, height }: CustomDisplayProps) {
   const columns = (data.columns as string[]) ?? [];
   const rows = (data.rows as unknown[][]) ?? [];
   const striped = (data.striped as boolean) ?? true;
   const compact = (data.compact as boolean) ?? false;
 
+  const visibleColumnCount = displayMode === "advanced" ? columns.length : Math.max(1, Math.floor(width / 120));
+  const visibleRowCount = displayMode === "advanced" ? rows.length : Math.max(1, Math.floor(height / 32) - 1);
+  const visibleColumns = columns.slice(0, visibleColumnCount);
+
   return (
-    <ScrollArea>
+    <ScrollArea h="100%">
       <Table striped={striped} highlightOnHover withTableBorder>
         <Table.Thead>
           <Table.Tr>
-            {columns.map((col, i) => (
+            {visibleColumns.map((col, i) => (
               <Table.Th key={i} py={compact ? 4 : undefined}>
                 {col}
               </Table.Th>
@@ -115,9 +128,9 @@ function TableDisplay({ data }: { data: Record<string, unknown> }) {
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>
-          {rows.map((row, i) => (
+          {rows.slice(0, visibleRowCount).map((row, i) => (
             <Table.Tr key={i}>
-              {row.map((cell, j) => (
+              {row.slice(0, visibleColumnCount).map((cell, j) => (
                 <Table.Td key={j} py={compact ? 2 : undefined}>
                   {String(cell ?? "—")}
                 </Table.Td>
@@ -181,9 +194,11 @@ function StatGridCard({
   );
 }
 
-function StatGridDisplay({ data }: { data: Record<string, unknown> }) {
+function StatGridDisplay({ data, displayMode, width }: CustomDisplayProps) {
   const items = (data.items as Array<{ label: string; unit: string; color: string; value: unknown }>) ?? [];
-  const columns = (data.columns as number) ?? 2;
+  const configuredColumns = (data.columns as number) ?? 2;
+  const columns =
+    displayMode === "advanced" ? configuredColumns : Math.min(configuredColumns, Math.max(1, Math.floor(width / 120)));
   const cardStyle = (data.cardStyle as string) ?? "filled";
 
   return (
@@ -304,12 +319,12 @@ function CountGridDisplay({ data }: { data: Record<string, unknown> }) {
 function openJsonInBrowser(json: unknown) {
   const blob = new Blob([JSON.stringify(json, null, 2)], { type: "application/json" });
   const blobUrl = URL.createObjectURL(blob);
-  window.open(blobUrl);
+  window.open(blobUrl, "_blank", "noopener,noreferrer");
   setTimeout(() => URL.revokeObjectURL(blobUrl), 60_000);
 }
 
-function RawDisplay({ data }: { data: Record<string, unknown> }) {
-  const maxHeight = (data.maxHeight as number) ?? 300;
+function RawDisplay({ data, displayMode, height }: CustomDisplayProps) {
+  const maxHeight = displayMode === "advanced" ? Math.max(160, height - 80) : ((data.maxHeight as number) ?? 300);
   const jsonString = JSON.stringify(data.data, null, 2);
 
   return (
@@ -387,7 +402,9 @@ function ActionButtonDisplay({ data }: { data: Record<string, unknown> }) {
   );
 }
 
-export const displayComponents: Record<string, ComponentType<{ data: Record<string, unknown> }>> = {
+const CustomJsxAdapter = ({ data }: CustomDisplayProps) => <CustomJsxDisplay data={data} />;
+
+export const displayComponents: Record<string, ComponentType<CustomDisplayProps>> = {
   singleValue: SingleValueDisplay,
   keyValue: KeyValueDisplay,
   table: TableDisplay,
@@ -397,10 +414,29 @@ export const displayComponents: Record<string, ComponentType<{ data: Record<stri
   countGrid: CountGridDisplay,
   raw: RawDisplay,
   actionButton: ActionButtonDisplay,
-  customJsx: CustomJsxDisplay,
+  customJsx: CustomJsxAdapter,
 };
 
-export default function CustomApiWidget({ options }: WidgetComponentProps<"customApi">) {
+const displayTypeTranslationKeys = {
+  singleValue: "displayType.singleValue",
+  keyValue: "displayType.keyValue",
+  table: "displayType.table",
+  statGrid: "displayType.statGrid",
+  progressBars: "displayType.progressBars",
+  statusIndicator: "displayType.statusIndicator",
+  countGrid: "displayType.countGrid",
+  raw: "displayType.raw",
+  actionButton: "displayType.actionButton",
+  customJsx: "displayType.customJsx",
+} as const;
+
+export default function CustomApiWidget({
+  options,
+  width,
+  height,
+  displayMode = "compact",
+  widgetStateRef,
+}: WidgetComponentProps<"customApi">) {
   const t = useScopedI18n("widget.customApi");
   const { definitionId, refreshInterval } = options;
 
@@ -417,20 +453,45 @@ export default function CustomApiWidget({ options }: WidgetComponentProps<"custo
     );
   }
 
-  return <CustomApiWidgetInner definitionId={definitionId} refreshInterval={refreshInterval as number} />;
+  return (
+    <CustomApiWidgetInner
+      definitionId={definitionId}
+      refreshInterval={refreshInterval as number}
+      width={width}
+      height={height}
+      displayMode={displayMode}
+      widgetStateRef={widgetStateRef}
+    />
+  );
 }
 
-function CustomApiWidgetInner({ definitionId, refreshInterval }: { definitionId: string; refreshInterval: number }) {
+function CustomApiWidgetInner({
+  definitionId,
+  refreshInterval,
+  width,
+  height,
+  displayMode,
+  widgetStateRef,
+}: {
+  definitionId: string;
+  refreshInterval: number;
+  width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
+  widgetStateRef?: WidgetComponentProps<"customApi">["widgetStateRef"];
+}) {
   const t = useScopedI18n("widget.customApi");
   const tCustomWidget = useScopedI18n("customWidget");
   const safeInterval = Number.isFinite(refreshInterval) ? refreshInterval : 30;
   const intervalMs = Math.max(1000, safeInterval * 1000);
-  const { data, isLoading, error } = clientApi.widget.customApi.getData.useQuery(
+  const persistedState = widgetStateRef?.current?.customApi as { pollingPaused?: boolean } | undefined;
+  const [pollingPaused, setPollingPaused] = useState(persistedState?.pollingPaused === true);
+  const { data, isLoading, error, refetch, isFetching } = clientApi.widget.customApi.getData.useQuery(
     { definitionId },
     {
       refetchInterval: (query) => {
         const result = query.state.data as Record<string, unknown> | undefined;
-        if (result?.type === "actionButton" || result?.type === "disabled") return false;
+        if (pollingPaused || result?.type === "actionButton" || result?.type === "disabled") return false;
         return intervalMs;
       },
       retry: (failureCount, err) => {
@@ -440,6 +501,33 @@ function CustomApiWidgetInner({ definitionId, refreshInterval }: { definitionId:
     },
   );
 
+  const widgetData = (data ?? {}) as Record<string, unknown>;
+  const dataType = widgetData.type as string | undefined;
+  const canTogglePolling = Boolean(data) && dataType !== "actionButton" && dataType !== "disabled";
+  const togglePolling = useCallback(() => setPollingPaused((value) => !value), []);
+
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      customApi: { pollingPaused },
+    };
+  }, [pollingPaused, widgetStateRef]);
+
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    if (canTogglePolling) {
+      widgetStateRef.current = { ...widgetStateRef.current, togglePolling };
+    } else if (widgetStateRef.current) {
+      delete widgetStateRef.current.togglePolling;
+    }
+    return () => {
+      if (widgetStateRef.current?.togglePolling === togglePolling) {
+        delete widgetStateRef.current.togglePolling;
+      }
+    };
+  }, [canTogglePolling, togglePolling, widgetStateRef]);
+
   if (isLoading) {
     return (
       <Center h="100%">
@@ -454,9 +542,17 @@ function CustomApiWidgetInner({ definitionId, refreshInterval }: { definitionId:
       <Center h="100%">
         <Stack align="center" gap="xs">
           <IconAlertTriangle size={32} color={`var(--mantine-color-${isNotFound ? "yellow" : "red"}-6)`} />
-          <Text c="dimmed" size="sm" ta="center">
-            {isNotFound ? t("definitionNotFound") : error.message}
-          </Text>
+          {isNotFound ? (
+            <Text c="dimmed" size="sm" ta="center">
+              {t("definitionNotFound")}
+            </Text>
+          ) : (
+            <Tooltip label={error.message} multiline>
+              <Text c="dimmed" size="sm" ta="center" tabIndex={0} aria-label={`${t("fetchFailed")}. ${error.message}`}>
+                {t("fetchFailed")}
+              </Text>
+            </Tooltip>
+          )}
         </Stack>
       </Center>
     );
@@ -464,9 +560,6 @@ function CustomApiWidgetInner({ definitionId, refreshInterval }: { definitionId:
 
   if (!data) return null;
 
-  const widgetData = data as Record<string, unknown>;
-  const dataType = widgetData.type as string | undefined;
-
   if (dataType === "disabled") {
     return (
       <Center h="100%">
@@ -479,8 +572,34 @@ function CustomApiWidgetInner({ definitionId, refreshInterval }: { definitionId:
 
   const Component = dataType ? displayComponents[dataType] : undefined;
   if (Component) {
+    const displayTypeKey = displayTypeTranslationKeys[dataType as keyof typeof displayTypeTranslationKeys];
+    const pollingLabel = pollingPaused ? t("actions.resumePolling") : t("actions.pausePolling");
     const enrichedData = dataType === "actionButton" ? { ...widgetData, widgetDefinitionId: definitionId } : widgetData;
-    return <Component data={enrichedData} />;
+    const content = <Component data={enrichedData} displayMode={displayMode} width={width} height={height} />;
+    if (displayMode === "compact") return content;
+    return (
+      <Stack h="100%" gap="xs" p="xs">
+        <Group justify="space-between" wrap="nowrap">
+          <Badge variant="light">{displayTypeKey ? t(displayTypeKey) : t("displayType.unknown")}</Badge>
+          {dataType !== "actionButton" && (
+            <Tooltip label={pollingLabel}>
+              <ActionIcon
+                aria-label={pollingLabel}
+                variant="subtle"
+                loading={isFetching}
+                onClick={() => {
+                  if (pollingPaused) void refetch();
+                  setPollingPaused((value) => !value);
+                }}
+              >
+                {pollingPaused ? <IconPlayerPlay size={16} /> : <IconPlayerPause size={16} />}
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </Group>
+        <Box style={{ flex: 1, minHeight: 0 }}>{content}</Box>
+      </Stack>
+    );
   }
 
   return (
diff --git a/packages/widgets/src/custom-api/index.ts b/packages/widgets/src/custom-api/index.ts
index 2bb9d3867..ed8242cab 100644
--- a/packages/widgets/src/custom-api/index.ts
+++ b/packages/widgets/src/custom-api/index.ts
@@ -1,4 +1,4 @@
-import { IconApi } from "@tabler/icons-react";
+import { IconApi, IconPlayerPause } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { createWidgetDefinition } from "../definition";
@@ -6,6 +6,22 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("customApi", {
   icon: IconApi,
+  queryKey: [["widget", "customApi"]],
+  contextActions({ options, widgetStateRef }) {
+    return [
+      {
+        key: "togglePolling",
+        label: (t) => t("widget.customApi.actions.togglePolling"),
+        icon: IconPlayerPause,
+        hidden: typeof options.definitionId !== "string" || options.definitionId.trim() === "",
+        disabled: typeof widgetStateRef.current?.togglePolling !== "function",
+        onClick: () => {
+          const action = widgetStateRef.current?.togglePolling;
+          if (typeof action === "function") action();
+        },
+      },
+    ];
+  },
   createOptions() {
     return optionsBuilder.from((factory) => ({
       definitionId: factory.customWidgetSelect({ defaultValue: "" }),
diff --git a/packages/widgets/src/definition.spec.ts b/packages/widgets/src/definition.spec.ts
new file mode 100644
index 000000000..ce08a0ace
--- /dev/null
+++ b/packages/widgets/src/definition.spec.ts
@@ -0,0 +1,19 @@
+import { describe, expect, test } from "vitest";
+
+import { getWidgetQueryKeys } from "./definition";
+
+describe("getWidgetQueryKeys", () => {
+  test("falls back to the widget router namespace", () => {
+    expect(getWidgetQueryKeys({ kind: "example" })).toEqual([[["widget", "example"]]]);
+  });
+
+  test("wraps a singular explicit key", () => {
+    expect(getWidgetQueryKeys({ kind: "example", queryKey: [["app", "byId"]] })).toEqual([[["app", "byId"]]]);
+  });
+
+  test("preserves every explicit key for multi-root widgets", () => {
+    const queryKeys = [[["widget", "audioStats"]], [["widget", "mediaServer"]]] as const;
+
+    expect(getWidgetQueryKeys({ kind: "audioStats", queryKeys })).toBe(queryKeys);
+  });
+});
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index 3ba53987e..775963b28 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -26,6 +26,7 @@ export interface WidgetContextMenuContext {
   isEditMode: boolean;
   boardId: string | undefined;
   itemId: string | undefined;
+  canInteractWithSelectedIntegrations: boolean;
 }
 
 export interface WidgetContextActionProps<
@@ -70,6 +71,7 @@ export const createWidgetDefinition = <TKind extends WidgetKind, TDefinition ext
 export interface WidgetDefinition {
   icon: TablerIcon;
   queryKey?: QueryKey;
+  queryKeys?: readonly QueryKey[];
   refetchInterval?: number | null;
   supportedIntegrations?: IntegrationKind[];
   integrationsRequired?: boolean;
@@ -90,6 +92,15 @@ export interface WidgetDefinition {
   contextActions?: (props: Omit<WidgetContextActionProps<WidgetKind>, "kind">) => WidgetContextMenuAction[];
 }
 
+export const getWidgetQueryKeys = (definition: {
+  kind: string;
+  queryKey?: QueryKey;
+  queryKeys?: readonly QueryKey[];
+}): readonly QueryKey[] => {
+  if (definition.queryKeys && definition.queryKeys.length > 0) return definition.queryKeys;
+  return [definition.queryKey ?? [["widget", definition.kind]]];
+};
+
 export interface WidgetProps<TKind extends WidgetKind> {
   options: inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>;
   integrationIds: string[];
@@ -99,6 +110,7 @@ export interface WidgetProps<TKind extends WidgetKind> {
 export type WidgetComponentProps<TKind extends WidgetKind> = WidgetProps<TKind> & {
   boardId: string | undefined; // undefined when in preview mode
   isEditMode: boolean;
+  displayMode?: "compact" | "advanced";
   setOptions: ({ newOptions }: { newOptions: Partial<inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>> }) => void;
   width: number;
   height: number;
diff --git a/packages/widgets/src/dns-hole/controls/component.tsx b/packages/widgets/src/dns-hole/controls/component.tsx
index f46c3d746..e6072ff95 100644
--- a/packages/widgets/src/dns-hole/controls/component.tsx
+++ b/packages/widgets/src/dns-hole/controls/component.tsx
@@ -44,6 +44,8 @@ export default function DnsHoleControlsWidget({
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<typeof widgetKind>) {
   const board = useRequiredBoard();
   // DnsHole integrations with interaction permissions
@@ -56,13 +58,21 @@ export default function DnsHoleControlsWidget({
   });
   const utils = clientApi.useUtils();
 
-  const { mutate: enableDns } = clientApi.widget.dnsHole.enable.useMutation({
+  const {
+    mutateAsync: enableDns,
+    isPending: isEnabling,
+    error: enableError,
+  } = clientApi.widget.dnsHole.enable.useMutation({
     onSettled: () => void utils.widget.dnsHole.summary.invalidate(),
   });
-  const { mutate: disableDns } = clientApi.widget.dnsHole.disable.useMutation({
+  const {
+    mutateAsync: disableDns,
+    isPending: isDisabling,
+    error: disableError,
+  } = clientApi.widget.dnsHole.disable.useMutation({
     onSettled: () => void utils.widget.dnsHole.summary.invalidate(),
   });
-  const toggleDns = (integrationId: string) => {
+  const toggleDns = async (integrationId: string) => {
     const integrationStatus = summaries.find(({ integration }) => integration.id === integrationId);
     if (!integrationStatus?.summary.status) return;
     utils.widget.dnsHole.summary.setData(
@@ -86,9 +96,9 @@ export default function DnsHoleControlsWidget({
       },
     );
     if (integrationStatus.summary.status === "enabled") {
-      disableDns({ integrationId, duration: 0 });
+      await disableDns({ integrationId, duration: 0 });
     } else {
-      enableDns({ integrationId });
+      await enableDns({ integrationId });
     }
   };
 
@@ -103,9 +113,21 @@ export default function DnsHoleControlsWidget({
 
   // Timer modal setup
   const [selectedIntegrationIds, setSelectedIntegrationIds] = useState<string[]>([]);
+  const [bulkPending, setBulkPending] = useState(false);
+  const [bulkFailureCount, setBulkFailureCount] = useState(0);
   const [opened, { close, open }] = useDisclosure(false);
 
-  const controlAllButtonsVisible = options.showToggleAllButtons && integrationsWithInteractions.length > 0;
+  const controlAllButtonsVisible =
+    (options.showToggleAllButtons || displayMode === "advanced") && integrationsWithInteractions.length > 0;
+  const actionsPending = bulkPending || isEnabling || isDisabling;
+  const actionError = enableError ?? disableError;
+  const runBulkToggle = async (integrationIdsToToggle: string[]) => {
+    setBulkPending(true);
+    setBulkFailureCount(0);
+    const results = await Promise.allSettled(integrationIdsToToggle.map(toggleDns));
+    setBulkFailureCount(results.filter(({ status }) => status === "rejected").length);
+    setBulkPending(false);
+  };
 
   return (
     <Stack
@@ -123,8 +145,8 @@ export default function DnsHoleControlsWidget({
               size="xs"
               p={0}
               className="dns-hole-controls-enable-all-button"
-              onClick={() => integrationsSummaries.disabled.forEach((integrationId) => toggleDns(integrationId))}
-              disabled={integrationsSummaries.disabled.length === 0}
+              onClick={() => void runBulkToggle(integrationsSummaries.disabled)}
+              disabled={integrationsSummaries.disabled.length === 0 || actionsPending}
               variant="light"
               color="green"
               bd={0}
@@ -144,7 +166,7 @@ export default function DnsHoleControlsWidget({
                 setSelectedIntegrationIds(integrationsSummaries.enabled);
                 open();
               }}
-              disabled={integrationsSummaries.enabled.length === 0}
+              disabled={integrationsSummaries.enabled.length === 0 || actionsPending}
               variant="light"
               color="yellow"
               bd={0}
@@ -160,8 +182,8 @@ export default function DnsHoleControlsWidget({
               size="xs"
               p={0}
               className="dns-hole-controls-disable-all-button"
-              onClick={() => integrationsSummaries.enabled.forEach((integrationId) => toggleDns(integrationId))}
-              disabled={integrationsSummaries.enabled.length === 0}
+              onClick={() => void runBulkToggle(integrationsSummaries.enabled)}
+              disabled={integrationsSummaries.enabled.length === 0 || actionsPending}
               variant="light"
               color="red"
               bd={0}
@@ -192,16 +214,32 @@ export default function DnsHoleControlsWidget({
               t={t}
               hasIconColor={board.iconColor !== null}
               rootWidth={width}
+              rootHeight={height}
+              isAdvanced={displayMode === "advanced"}
+              actionsPending={actionsPending}
             />
           ))}
         </Stack>
       </ScrollArea.Autosize>
 
+      {bulkFailureCount > 0 && (
+        <Text size="xs" c="red" ta="center">
+          {t("widget.dnsHoleControls.error.bulkActionsFailed", { count: bulkFailureCount })}
+        </Text>
+      )}
+      {actionError && (
+        <Tooltip label={actionError.message} multiline>
+          <Text size="xs" c="red" ta="center" lineClamp={2} tabIndex={0}>
+            {t("widget.dnsHoleControls.error.internalServerError")}
+          </Text>
+        </Tooltip>
+      )}
+
       <TimerModal
         opened={opened}
         close={close}
         selectedIntegrationIds={selectedIntegrationIds}
-        disableDns={disableDns}
+        disableDns={(input) => void disableDns(input).catch(() => undefined)}
       />
     </Stack>
   );
@@ -209,13 +247,16 @@ export default function DnsHoleControlsWidget({
 
 interface ControlsCardProps {
   integrationsWithInteractions: string[];
-  toggleDns: (integrationId: string) => void;
+  toggleDns: (integrationId: string) => Promise<void>;
   data: RouterOutputs["widget"]["dnsHole"]["summary"][number];
   setSelectedIntegrationIds: (integrationId: string[]) => void;
   open: () => void;
   t: TranslationFunction;
   hasIconColor: boolean;
   rootWidth: number;
+  rootHeight: number;
+  isAdvanced: boolean;
+  actionsPending: boolean;
 }
 
 const ControlsCard: React.FC<ControlsCardProps> = ({
@@ -227,16 +268,19 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
   t,
   hasIconColor,
   rootWidth,
+  rootHeight,
+  isAdvanced,
+  actionsPending,
 }) => {
   const isConnected = useIntegrationConnected(data.integration.updatedAt, { timeout: 30000 });
   const isEnabled = data.summary.status ? data.summary.status === "enabled" : undefined;
   const isInteractPermitted = integrationsWithInteractions.includes(data.integration.id);
   // Use all factors to infer the state of the action buttons
-  const controlEnabled = isInteractPermitted && isEnabled !== undefined && isConnected;
+  const controlEnabled = isInteractPermitted && isEnabled !== undefined && isConnected && !actionsPending;
   const board = useRequiredBoard();
 
   const iconUrl = integrationDefs[data.integration.kind].iconUrl;
-  const layout = rootWidth < 256 ? "sm" : "md";
+  const layout = !isAdvanced && (rootWidth < 256 || rootHeight < 112) ? "sm" : "md";
 
   return (
     <Indicator
@@ -296,7 +340,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                 <Group gap="xs" grow wrap="nowrap" w="100%">
                   {!isEnabled ? (
                     <ActionIcon
-                      onClick={() => toggleDns(data.integration.id)}
+                      onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
                       size="sm"
                       color="green"
@@ -306,7 +350,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     </ActionIcon>
                   ) : (
                     <ActionIcon
-                      onClick={() => toggleDns(data.integration.id)}
+                      onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
                       size="sm"
                       color="red"
@@ -323,6 +367,8 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     size="sm"
                     color="yellow"
                     variant="light"
+                    display={isInteractPermitted ? undefined : "none"}
+                    disabled={!controlEnabled || !isEnabled}
                   >
                     <IconClockPause size={12} />
                   </ActionIcon>
@@ -334,7 +380,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                   disabled={!controlEnabled}
                   display="contents"
                   style={{ cursor: controlEnabled ? "pointer" : "default" }}
-                  onClick={() => toggleDns(data.integration.id)}
+                  onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                 >
                   <Badge
                     className={`dns-hole-controls-item-toggle-button-styling${controlEnabled ? " hoverable-component clickable-component" : ""}`}
diff --git a/packages/widgets/src/dns-hole/summary/component.tsx b/packages/widgets/src/dns-hole/summary/component.tsx
index 4bcc82568..c9b893445 100644
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -2,7 +2,19 @@
 
 import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
-import { Avatar, AvatarGroup, Card, Flex, SimpleGrid, Stack, Text, Tooltip, TooltipFloating } from "@mantine/core";
+import {
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Card,
+  Flex,
+  Group,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+  TooltipFloating,
+} from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
 
@@ -19,7 +31,11 @@ import type { TablerIcon } from "@homarr/ui";
 import type { widgetKind } from ".";
 import type { WidgetComponentProps, WidgetProps } from "../../definition";
 
-export default function DnsHoleSummaryWidget({ options, integrationIds }: WidgetComponentProps<typeof widgetKind>) {
+export default function DnsHoleSummaryWidget({
+  options,
+  integrationIds,
+  displayMode,
+}: WidgetComponentProps<typeof widgetKind>) {
   const { data: summaries = [] } = clientApi.widget.dnsHole.summary.useQuery({
     integrationIds,
   });
@@ -27,28 +43,44 @@ export default function DnsHoleSummaryWidget({ options, integrationIds }: Widget
   const t = useI18n();
 
   const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const layoutProps = boxPropsByLayout(options.layout);
 
   return (
-    <SimpleGrid cols={2} spacing="xs" h="100%" p={"xs"} {...boxPropsByLayout(options.layout)}>
-      {data.length > 0 ? (
-        stats.map((item) => (
-          <StatCard key={item.color} item={item} usePiHoleColors={options.usePiHoleColors} data={data} t={t} />
-        ))
-      ) : (
-        <Stack h="100%" w="100%" justify="center" align="center" gap="sm" p="sm">
-          <AvatarGroup spacing="md">
-            {summaries.map(({ integration }) => (
-              <Tooltip key={integration.id} label={integration.name}>
-                <Avatar h={30} w={30} src={integrationDefs[integration.kind].iconUrl} />
-              </Tooltip>
-            ))}
-          </AvatarGroup>
-          <Text fz="md" ta="center">
-            {t("widget.dnsHoleSummary.error.integrationsDisconnected")}
-          </Text>
-        </Stack>
+    <Stack h="100%" gap={0}>
+      <SimpleGrid cols={2} spacing="xs" p="xs" {...layoutProps} style={{ ...layoutProps.style, flex: 1, minHeight: 0 }}>
+        {data.length > 0 ? (
+          stats.map((item) => (
+            <StatCard key={item.color} item={item} usePiHoleColors={options.usePiHoleColors} data={data} t={t} />
+          ))
+        ) : (
+          <Stack h="100%" w="100%" justify="center" align="center" gap="sm" p="sm">
+            <AvatarGroup spacing="md">
+              {summaries.map(({ integration }) => (
+                <Tooltip key={integration.id} label={integration.name}>
+                  <Avatar h={30} w={30} src={integrationDefs[integration.kind].iconUrl} />
+                </Tooltip>
+              ))}
+            </AvatarGroup>
+            <Text fz="md" ta="center">
+              {t("widget.dnsHoleSummary.error.integrationsDisconnected")}
+            </Text>
+          </Stack>
+        )}
+      </SimpleGrid>
+      {displayMode === "advanced" && summaries.length > 0 && (
+        <Group px="xs" pb="xs" gap="xs">
+          {summaries.map(({ integration, summary }) => (
+            <Badge
+              key={integration.id}
+              variant="light"
+              color={summary.status === "enabled" ? "green" : summary.status === "disabled" ? "red" : "gray"}
+            >
+              {integration.name}: {t(`widget.dnsHoleSummary.status.${summary.status ?? "unknown"}`)}
+            </Badge>
+          ))}
+        </Group>
       )}
-    </SimpleGrid>
+    </Stack>
   );
 }
 
diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index e56cd5cf7..12e8ca092 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -17,6 +17,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
+import { getDockerColumnVisibility } from "./layout";
 
 const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   const t = useScopedI18n("docker.field.state.option");
@@ -35,6 +36,7 @@ const actionIconIconStyle: IconProps["style"] = {
 
 const createColumns = (
   t: ReturnType<typeof useScopedI18n<"docker">>,
+  isEditMode: boolean,
 ): MRT_ColumnDef<RouterOutputs["docker"]["getContainers"]["containers"][number]>[] => [
   {
     id: "name",
@@ -160,6 +162,7 @@ const createColumns = (
               variant="subtle"
               size="xs"
               radius="100%"
+              disabled={isEditMode}
               onClick={() => handleActionAsync(row.original.state === "running" ? "stop" : "start")}
             >
               {row.original.state === "running" ? (
@@ -170,7 +173,13 @@ const createColumns = (
             </ActionIcon>
           </Tooltip>
           <Tooltip label={t("action.restart.label")}>
-            <ActionIcon variant="subtle" size="xs" radius="100%" onClick={() => handleActionAsync("restart")}>
+            <ActionIcon
+              variant="subtle"
+              size="xs"
+              radius="100%"
+              disabled={isEditMode}
+              onClick={() => handleActionAsync("restart")}
+            >
               <IconRotateClockwise style={actionIconIconStyle} />
             </ActionIcon>
           </Tooltip>
@@ -180,12 +189,18 @@ const createColumns = (
   },
 ];
 
-export default function DockerWidget({ options, width, isEditMode }: WidgetComponentProps<"dockerContainers">) {
+export default function DockerWidget({
+  options,
+  width,
+  isEditMode,
+  displayMode,
+}: WidgetComponentProps<"dockerContainers">) {
   const t = useScopedI18n("docker");
-  const isTiny = width <= 256;
+  const isAdvanced = displayMode === "advanced";
+  const isTiny = !isAdvanced && width <= 256;
 
   const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery();
-  const containers = data?.containers ?? [];
+  const containers = useMemo(() => data?.containers ?? [], [data?.containers]);
   const timestamp = useMemo(() => data?.timestamp ?? new Date(), [data?.timestamp]);
   const relativeTime = useTimeAgo(timestamp);
 
@@ -202,33 +217,26 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
     );
   }, [containers]);
 
-  const columns = useMemo(() => createColumns(t), [t]);
+  const columns = useMemo(() => createColumns(t, isEditMode), [isEditMode, t]);
 
-  const columnVisibility: MRT_VisibilityState = {
-    name: options.columns.includes("name"),
-    state: options.columns.includes("state"),
-    host: options.columns.includes("host"),
-    cpuUsage: options.columns.includes("cpuUsage"),
-    memoryUsage: options.columns.includes("memoryUsage"),
-    actions: options.columns.includes("actions"),
-  };
+  const columnVisibility: MRT_VisibilityState = getDockerColumnVisibility(options.columns, width, isAdvanced);
 
   const table = useTranslatedMantineReactTable({
     columns,
     data: containers,
     enablePagination: false,
-    enableTopToolbar: false,
+    enableTopToolbar: isAdvanced,
     enableBottomToolbar: false,
-    enableColumnActions: false,
-    enableSorting: options.enableRowSorting && !isEditMode,
-    enableStickyHeader: false,
-    enableColumnOrdering: false,
+    enableColumnActions: isAdvanced,
+    enableSorting: (isAdvanced || options.enableRowSorting) && !isEditMode,
+    enableStickyHeader: isAdvanced,
+    enableColumnOrdering: isAdvanced && !isEditMode,
     enableRowSelection: false,
     enableFullScreenToggle: false,
-    enableGlobalFilter: false,
+    enableGlobalFilter: isAdvanced,
     enableDensityToggle: false,
     enableFilters: false,
-    enableHiding: false,
+    enableHiding: isAdvanced,
     initialState: {
       sorting: [{ id: options.defaultSort, desc: options.descendingDefaultSort }],
       density: "xs",
@@ -259,11 +267,12 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
     mantineTableContainerProps: {
       style: {
         height: "100%",
+        pointerEvents: isEditMode ? "none" : undefined,
       },
     },
   });
 
-  if (options.columns.length === 0)
+  if (!isAdvanced && options.columns.length === 0)
     return (
       <Center h="100%">
         <Text>{t("error.noColumns")}</Text>
@@ -274,7 +283,7 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
     <Stack gap={0} h="100%" display="flex">
       <MantineReactTable table={table} />
 
-      {!isTiny && (
+      {(isAdvanced || !isTiny) && (
         <Group
           justify="space-between"
           style={{
diff --git a/packages/widgets/src/docker/layout.spec.ts b/packages/widgets/src/docker/layout.spec.ts
new file mode 100644
index 000000000..ed758d0d8
--- /dev/null
+++ b/packages/widgets/src/docker/layout.spec.ts
@@ -0,0 +1,37 @@
+import { describe, expect, test } from "vitest";
+
+import { getDockerColumnVisibility } from "./layout";
+
+const columns = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
+
+describe("getDockerColumnVisibility", () => {
+  test("keeps only essential columns in a narrow compact widget", () => {
+    expect(getDockerColumnVisibility(columns, 240, false)).toEqual({
+      name: true,
+      state: true,
+      host: false,
+      cpuUsage: false,
+      memoryUsage: false,
+      actions: true,
+    });
+  });
+
+  test("reveals compact metrics as width becomes available", () => {
+    expect(getDockerColumnVisibility(columns, 380, false)).toMatchObject({
+      host: false,
+      cpuUsage: true,
+      memoryUsage: true,
+    });
+  });
+
+  test("uses every expert column in advanced mode", () => {
+    expect(getDockerColumnVisibility([], 240, true)).toEqual({
+      name: true,
+      state: true,
+      host: true,
+      cpuUsage: true,
+      memoryUsage: true,
+      actions: true,
+    });
+  });
+});
diff --git a/packages/widgets/src/docker/layout.ts b/packages/widgets/src/docker/layout.ts
new file mode 100644
index 000000000..4d3b1029b
--- /dev/null
+++ b/packages/widgets/src/docker/layout.ts
@@ -0,0 +1,19 @@
+export type DockerColumn = "name" | "state" | "host" | "cpuUsage" | "memoryUsage" | "actions";
+
+export const getDockerColumnVisibility = (
+  configuredColumns: readonly DockerColumn[],
+  width: number,
+  isAdvanced: boolean,
+): Record<DockerColumn, boolean> => {
+  const configured = new Set(configuredColumns);
+  const isVisible = (column: DockerColumn) => isAdvanced || configured.has(column);
+
+  return {
+    name: isVisible("name"),
+    state: isVisible("state"),
+    host: isVisible("host") && (isAdvanced || width >= 440),
+    cpuUsage: isVisible("cpuUsage") && (isAdvanced || width >= 280),
+    memoryUsage: isVisible("memoryUsage") && (isAdvanced || width >= 360),
+    actions: isVisible("actions"),
+  };
+};
diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx
index e03c937bf..967288fc4 100644
--- a/packages/widgets/src/downloads/component.tsx
+++ b/packages/widgets/src/downloads/component.tsx
@@ -44,7 +44,9 @@ import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
 import { DataTable, useDataTableColumns } from "mantine-datatable";
 
 import { clientApi } from "@homarr/api/client";
-import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
+import { useIntegrationsWithInteractAccess, useSession } from "@homarr/auth/client";
+import { constructBoardPermissions } from "@homarr/auth/shared";
+import { useOptionalBoard } from "@homarr/boards/context";
 import { formatByteRate, formatBytes, useIntegrationConnected } from "@homarr/common";
 import { getIconUrl, getIntegrationKindsByCategory } from "@homarr/definitions";
 import type { ExtendedClientStatus, ExtendedDownloadClientItem } from "@homarr/integrations";
@@ -52,9 +54,12 @@ import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { columnWidthsToRecord, filterDownloadItemsByStatus, getAvailableDownloadStates } from "./helpers";
 
 dayjs.extend(relativeTime);
 
+const COLUMN_WIDTH_SAVE_DELAY_MS = 200;
+
 type DownloadsT = ReturnType<typeof useScopedI18n<"widget.downloads">>;
 type DownloadState = ExtendedDownloadClientItem["state"];
 
@@ -73,6 +78,14 @@ interface ContextMenuState {
   item: ExtendedDownloadClientItem;
 }
 
+interface DownloadsWidgetState {
+  integrationKey: string;
+  clientFilter: string[];
+  statusFilter: string[];
+  sortStatus: DataTableSortStatus<ExtendedDownloadClientItem>;
+  showStats: boolean;
+}
+
 interface ColumnContext {
   optionsColumnSet: Set<string>;
   hasTorrents: boolean;
@@ -149,7 +162,10 @@ const speedColumnConfig = {
   up: { Icon: IconUpload, color: "green" as const },
 } as const;
 
-function getSizeConfig(width: number): SizeConfig {
+export function getSizeConfig(width: number, height = Number.POSITIVE_INFINITY, isAdvanced = false): SizeConfig {
+  if (isAdvanced) return DEFAULT_SIZE_CONFIG;
+  if (height < 120) return SIZE_BREAKPOINTS[0]?.config ?? DEFAULT_SIZE_CONFIG;
+  if (height < 180) return SIZE_BREAKPOINTS[1]?.config ?? DEFAULT_SIZE_CONFIG;
   for (const { maxWidth, config } of SIZE_BREAKPOINTS) {
     if (width < maxWidth) return config;
   }
@@ -286,7 +302,13 @@ export default function DownloadClientsWidget({
   boardId,
   itemId,
   width,
+  height,
+  displayMode,
+  widgetStateRef,
 }: WidgetComponentProps<"downloads">) {
+  const board = useOptionalBoard();
+  const { data: session } = useSession();
+  const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
   const allInteractAccess = useIntegrationsWithInteractAccess();
   const integrationInteractSet = useMemo(
     () => new Set(allInteractAccess.filter(({ id }) => integrationIds.includes(id)).map(({ id }) => id)),
@@ -304,10 +326,19 @@ export default function DownloadClientsWidget({
 
   const t = useScopedI18n("widget.downloads");
 
-  const [clientFilter, setClientFilter] = useState<string[]>([]);
-  const [statusFilter, setStatusFilter] = useState<string[]>([]);
+  const integrationKey = integrationIds.join("\u0000");
+  const storedWidgetState = widgetStateRef?.current?.downloads as Partial<DownloadsWidgetState> | undefined;
+  const persistedWidgetState = storedWidgetState?.integrationKey === integrationKey ? storedWidgetState : undefined;
+
+  const [clientFilter, setClientFilter] = useState<string[]>(() =>
+    Array.isArray(persistedWidgetState?.clientFilter) ? [...persistedWidgetState.clientFilter] : [],
+  );
+  const [statusFilter, setStatusFilter] = useState<string[]>(() =>
+    Array.isArray(persistedWidgetState?.statusFilter) ? [...persistedWidgetState.statusFilter] : [],
+  );
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
-  const [showStats, { toggle: toggleStats }] = useDisclosure(false);
+  const [showStats, { toggle: toggleStats }] = useDisclosure(persistedWidgetState?.showStats === true);
+  const isAdvanced = displayMode === "advanced";
 
   const utils = clientApi.useUtils();
   const mutationOptions = {
@@ -321,14 +352,21 @@ export default function DownloadClientsWidget({
   const { mutate: mutatePauseQueue } = clientApi.widget.downloads.pause.useMutation(mutationOptions);
 
   const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
+    scope: { id: `downloads-options:${boardId ?? "preview"}:${itemId ?? "preview"}` },
     onError: () => showErrorNotification({ title: t("errors.actionFailed"), message: t("errors.actionFailedMessage") }),
   });
+  const saveOptionToServer = useCallback(
+    (newOptions: Partial<Record<string, string>>) => {
+      if (hasChangeAccess && boardId && itemId) saveItemOptions({ boardId, itemId, newOptions });
+    },
+    [boardId, hasChangeAccess, itemId, saveItemOptions],
+  );
   const persistOption = useCallback(
     (newOptions: Partial<Record<string, string>>) => {
       setOptions({ newOptions });
-      if (boardId && itemId) saveItemOptions({ boardId, itemId, newOptions });
+      saveOptionToServer(newOptions);
     },
-    [setOptions, boardId, itemId, saveItemOptions],
+    [saveOptionToServer, setOptions],
   );
 
   const savedOrder = useMemo(() => parseJsonOption(options.columnOrder, [] as string[]), [options.columnOrder]);
@@ -339,26 +377,28 @@ export default function DownloadClientsWidget({
 
   let defaultSortDirection: DataTableSortStatus<ExtendedDownloadClientItem>["direction"] = "asc";
   if (options.descendingDefaultSort) defaultSortDirection = "desc";
-  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<ExtendedDownloadClientItem>>({
-    columnAccessor: options.defaultSort,
-    direction: defaultSortDirection,
-  });
+  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<ExtendedDownloadClientItem>>(() =>
+    persistedWidgetState?.sortStatus
+      ? { ...persistedWidgetState.sortStatus }
+      : { columnAccessor: options.defaultSort, direction: defaultSortDirection },
+  );
+  const hasMountedSortDefaults = useRef(false);
   useEffect(() => {
+    if (!hasMountedSortDefaults.current) {
+      hasMountedSortDefaults.current = true;
+      return;
+    }
     setSortStatus({ columnAccessor: options.defaultSort, direction: defaultSortDirection });
   }, [options.defaultSort, defaultSortDirection]);
 
-  const data = useMemo<ExtendedDownloadClientItem[]>(() => {
+  const eligibleData = useMemo<ExtendedDownloadClientItem[]>(() => {
     return currentItems
       .filter(({ integration }) => integrationIds.includes(integration.id))
       .flatMap((pair) =>
         pair.data.items
           .filter(({ category }) => matchesCategoryFilter(category, options.categoryFilter, options.filterIsWhitelist))
           .filter((item) => showCompletedItem(item, options))
-          .filter(
-            ({ state }) =>
-              (clientFilter.length === 0 || clientFilter.includes(pair.integration.id)) &&
-              (statusFilter.length === 0 || statusFilter.includes(state)),
-          )
+          .filter(() => clientFilter.length === 0 || clientFilter.includes(pair.integration.id))
           .map((item): ExtendedDownloadClientItem => {
             const received = item.received ?? Math.floor(item.size * item.progress);
             const ids = [pair.integration.id];
@@ -389,9 +429,10 @@ export default function DownloadClientsWidget({
     mutateResumeItem,
     options,
     clientFilter,
-    statusFilter,
   ]);
 
+  const data = useMemo(() => filterDownloadItemsByStatus(eligibleData, statusFilter), [eligibleData, statusFilter]);
+
   const sortedData = useMemo(() => {
     const accessor = sortStatus.columnAccessor as keyof ExtendedDownloadClientItem;
     const multiplier = getSortMultiplier(sortStatus.direction);
@@ -452,7 +493,7 @@ export default function DownloadClientsWidget({
   const hasMultipleClients = clients.length > 1;
   const hasMultipleTypes = new Set(data.map(({ type }) => type)).size > 1;
 
-  const size = useMemo(() => getSizeConfig(width), [width]);
+  const size = useMemo(() => getSizeConfig(width, height, isAdvanced), [height, isAdvanced, width]);
   const optionsColumnSet = useMemo(() => new Set<string>(options.columns), [options.columns]);
   const columnContext = useMemo<ColumnContext>(
     () => ({ optionsColumnSet, hasTorrents, hasMultipleClients, hasMultipleTypes, size }),
@@ -660,7 +701,7 @@ export default function DownloadClientsWidget({
   }, [columnContext, t, size, progressColumnWidth]);
 
   const storeKey = `downloads-${itemId ?? "preview"}-${[...options.columns].toSorted().join(",")}`;
-  const { effectiveColumns, columnsOrder, columnsWidth, setColumnsOrder, setMultipleColumnWidths } =
+  const { effectiveColumns, columnsOrder, columnsWidth, isResizing, setColumnsOrder, setMultipleColumnWidths } =
     useDataTableColumns<ExtendedDownloadClientItem>({
       key: storeKey,
       columns,
@@ -685,28 +726,46 @@ export default function DownloadClientsWidget({
   }, [storeKey, savedOrder, savedWidths, setColumnsOrder, setMultipleColumnWidths]);
 
   const prevOrder = useRef(columnsOrder);
-  const prevWidths = useRef(columnsWidth);
   useEffect(() => {
     if (!hydrated.current) return;
     const orderChanged = JSON.stringify(columnsOrder) !== JSON.stringify(prevOrder.current);
-    const widthsChanged = JSON.stringify(columnsWidth) !== JSON.stringify(prevWidths.current);
     prevOrder.current = columnsOrder;
-    prevWidths.current = columnsWidth;
-
-    if (!orderChanged && !widthsChanged) return;
     if (orderChanged) persistOption({ columnOrder: JSON.stringify(columnsOrder) });
-    if (widthsChanged) {
-      const widthMap: Record<string, number> = {};
-      for (const entry of columnsWidth) {
-        const key = Object.keys(entry)[0];
-        if (!key) continue;
-        const w = entry[key as keyof typeof entry];
-        if (typeof w === "number") widthMap[key] = w;
-        else if (typeof w === "string" && w.endsWith("px")) widthMap[key] = parseInt(w, 10);
-      }
-      persistOption({ columnWidths: JSON.stringify(widthMap) });
-    }
-  }, [columnsOrder, columnsWidth, persistOption]);
+  }, [columnsOrder, persistOption]);
+
+  const prevWidths = useRef(columnsWidth);
+  const pendingColumnWidths = useRef<string | null>(null);
+  const columnWidthSaveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const saveOptionToServerRef = useRef(saveOptionToServer);
+  useEffect(() => {
+    saveOptionToServerRef.current = saveOptionToServer;
+  }, [saveOptionToServer]);
+  useEffect(() => {
+    if (!hydrated.current || isResizing) return;
+    const widthsChanged = JSON.stringify(columnsWidth) !== JSON.stringify(prevWidths.current);
+    prevWidths.current = columnsWidth;
+    if (!widthsChanged) return;
+
+    const serializedWidths = JSON.stringify(columnWidthsToRecord(columnsWidth));
+    setOptions({ newOptions: { columnWidths: serializedWidths } });
+    pendingColumnWidths.current = serializedWidths;
+    if (columnWidthSaveTimer.current !== null) clearTimeout(columnWidthSaveTimer.current);
+    columnWidthSaveTimer.current = setTimeout(() => {
+      const value = pendingColumnWidths.current;
+      pendingColumnWidths.current = null;
+      columnWidthSaveTimer.current = null;
+      if (value !== null) saveOptionToServerRef.current({ columnWidths: value });
+    }, COLUMN_WIDTH_SAVE_DELAY_MS);
+  }, [columnsWidth, isResizing, setOptions]);
+  useEffect(
+    () => () => {
+      if (columnWidthSaveTimer.current !== null) clearTimeout(columnWidthSaveTimer.current);
+      const value = pendingColumnWidths.current;
+      pendingColumnWidths.current = null;
+      if (value !== null) saveOptionToServerRef.current({ columnWidths: value });
+    },
+    [],
+  );
 
   const handleContextMenu = useCallback(
     ({ record, event }: { record: ExtendedDownloadClientItem; event: React.MouseEvent }) => {
@@ -731,7 +790,7 @@ export default function DownloadClientsWidget({
     return traffic.up / traffic.down;
   }, [clients]);
 
-  const availableStatuses = useMemo(() => [...new Set(data.map(({ state }) => state))], [data]);
+  const availableStatuses = useMemo(() => getAvailableDownloadStates(eligibleData), [eligibleData]);
 
   const queueStats = useMemo(() => {
     const stateCounts: Record<string, number> = {};
@@ -745,6 +804,20 @@ export default function DownloadClientsWidget({
     return { stateCounts, totalSize, completedSize, totalItems: data.length };
   }, [data]);
 
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      downloads: {
+        integrationKey,
+        clientFilter,
+        statusFilter,
+        sortStatus,
+        showStats,
+      } satisfies DownloadsWidgetState,
+    };
+  }, [clientFilter, integrationKey, showStats, sortStatus, statusFilter, widgetStateRef]);
+
   if (options.columns.length === 0) {
     return (
       <Center h="100%">
@@ -769,7 +842,7 @@ export default function DownloadClientsWidget({
 
   return (
     <Stack gap={0} h="100%" style={{ overflow: "hidden" }}>
-      {showStats && (
+      {(showStats || isAdvanced) && (
         <GlobalStatsBar
           queueStats={queueStats}
           totalSpeed={totalSpeed}
@@ -829,22 +902,24 @@ export default function DownloadClientsWidget({
         />
       </Box>
 
-      <WidgetFooter
-        clients={clients}
-        totalSpeed={totalSpeed}
-        totalUpSpeed={totalUpSpeed}
-        globalRatio={globalRatio}
-        hasTorrents={hasTorrents}
-        clientFilter={clientFilter}
-        setClientFilter={setClientFilter}
-        statusFilter={statusFilter}
-        setStatusFilter={setStatusFilter}
-        availableStatuses={availableStatuses}
-        pauseQueue={mutatePauseQueue}
-        resumeQueue={mutateResumeQueue}
-        showStats={showStats}
-        toggleStats={toggleStats}
-      />
+      {(isAdvanced || height >= 96) && (
+        <WidgetFooter
+          clients={clients}
+          totalSpeed={totalSpeed}
+          totalUpSpeed={totalUpSpeed}
+          globalRatio={globalRatio}
+          hasTorrents={hasTorrents}
+          clientFilter={clientFilter}
+          setClientFilter={setClientFilter}
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
+          availableStatuses={availableStatuses}
+          pauseQueue={mutatePauseQueue}
+          resumeQueue={mutateResumeQueue}
+          showStats={showStats}
+          toggleStats={toggleStats}
+        />
+      )}
 
       {contextMenu && <RowContextMenu state={contextMenu} onClose={closeContextMenu} t={t} />}
     </Stack>
diff --git a/packages/widgets/src/downloads/helpers.spec.ts b/packages/widgets/src/downloads/helpers.spec.ts
new file mode 100644
index 000000000..09a4aa042
--- /dev/null
+++ b/packages/widgets/src/downloads/helpers.spec.ts
@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest";
+
+import { columnWidthsToRecord, filterDownloadItemsByStatus, getAvailableDownloadStates } from "./helpers";
+
+describe("downloads filters", () => {
+  const eligibleItems = [{ state: "downloading" as const }, { state: "seeding" as const }];
+
+  test("keeps all eligible statuses available after applying a status filter", () => {
+    expect(filterDownloadItemsByStatus(eligibleItems, ["downloading"])).toEqual([{ state: "downloading" }]);
+    expect(getAvailableDownloadStates(eligibleItems)).toEqual(["downloading", "seeding"]);
+  });
+
+  test("deduplicates available statuses", () => {
+    expect(getAvailableDownloadStates([...eligibleItems, { state: "downloading" }])).toEqual([
+      "downloading",
+      "seeding",
+    ]);
+  });
+});
+
+describe("downloads column widths", () => {
+  test("serializes numeric and pixel widths while ignoring automatic widths", () => {
+    expect(columnWidthsToRecord([{ name: 240 }, { progress: "120px" }, { state: "auto" }])).toEqual({
+      name: 240,
+      progress: 120,
+    });
+  });
+});
diff --git a/packages/widgets/src/downloads/helpers.ts b/packages/widgets/src/downloads/helpers.ts
new file mode 100644
index 000000000..2763d57ee
--- /dev/null
+++ b/packages/widgets/src/downloads/helpers.ts
@@ -0,0 +1,27 @@
+import type { ExtendedDownloadClientItem } from "@homarr/integrations";
+
+type DownloadState = ExtendedDownloadClientItem["state"];
+
+export function filterDownloadItemsByStatus<T extends { state: DownloadState }>(
+  items: readonly T[],
+  statusFilter: readonly string[],
+): T[] {
+  if (statusFilter.length === 0) return [...items];
+  return items.filter(({ state }) => statusFilter.includes(state));
+}
+
+export function getAvailableDownloadStates(items: readonly { state: DownloadState }[]): DownloadState[] {
+  return [...new Set(items.map(({ state }) => state))];
+}
+
+export function columnWidthsToRecord(columnsWidth: readonly Record<string, string | number>[]): Record<string, number> {
+  const result: Record<string, number> = {};
+  for (const entry of columnsWidth) {
+    const key = Object.keys(entry)[0];
+    if (!key) continue;
+    const width = entry[key];
+    if (typeof width === "number") result[key] = width;
+    else if (typeof width === "string" && width.endsWith("px")) result[key] = parseInt(width, 10);
+  }
+  return result;
+}
diff --git a/packages/widgets/src/downloads/index.ts b/packages/widgets/src/downloads/index.ts
index cc8f9a5b0..3f051110b 100644
--- a/packages/widgets/src/downloads/index.ts
+++ b/packages/widgets/src/downloads/index.ts
@@ -42,6 +42,7 @@ const sortColumns = [
 
 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
   icon: IconDownload,
+  queryKey: [["widget", "downloads"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/filter-storage-volumes.spec.ts b/packages/widgets/src/filter-storage-volumes.spec.ts
index 51d84169a..25a459c06 100644
--- a/packages/widgets/src/filter-storage-volumes.spec.ts
+++ b/packages/widgets/src/filter-storage-volumes.spec.ts
@@ -1,10 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import {
-  filterStorageVolumes,
-  normalizeStorageDeviceName,
-  toScopedStorageVolumeValue,
-} from "./filter-storage-volumes";
+import { filterStorageVolumes, normalizeStorageDeviceName, toScopedStorageVolumeValue } from "./filter-storage-volumes";
 import { matchFileSystemAndSmart } from "./health-monitoring/system-health";
 
 describe("normalizeStorageDeviceName", () => {
diff --git a/packages/widgets/src/filter-storage-volumes.ts b/packages/widgets/src/filter-storage-volumes.ts
index 5e88584be..9c406c65e 100644
--- a/packages/widgets/src/filter-storage-volumes.ts
+++ b/packages/widgets/src/filter-storage-volumes.ts
@@ -35,11 +35,7 @@ const storageDeviceNamesMatch = (leftDeviceName: string, rightDeviceName: string
   );
 };
 
-const matchesVisibleStorageVolume = (
-  visibleVolume: string,
-  integrationId: string,
-  deviceName: string,
-): boolean => {
+const matchesVisibleStorageVolume = (visibleVolume: string, integrationId: string, deviceName: string): boolean => {
   const separatorIndex = visibleVolume.indexOf(":");
   if (separatorIndex === -1) {
     return storageDeviceNamesMatch(visibleVolume, deviceName);
diff --git a/packages/widgets/src/firewall/bandwidth.spec.ts b/packages/widgets/src/firewall/bandwidth.spec.ts
new file mode 100644
index 000000000..9b9250d98
--- /dev/null
+++ b/packages/widgets/src/firewall/bandwidth.spec.ts
@@ -0,0 +1,40 @@
+import { describe, expect, test } from "vitest";
+
+import { calculateBandwidth, formatBitsPerSec } from "./bandwidth";
+
+describe("calculateBandwidth", () => {
+  test("sorts samples before calculating a rate", () => {
+    const result = calculateBandwidth([
+      { timestamp: new Date("2026-01-01T00:00:00Z"), data: [{ name: "wan", receive: 100, transmit: 200 }] },
+      { timestamp: new Date("2026-01-01T00:00:10Z"), data: [{ name: "wan", receive: 300, transmit: 500 }] },
+    ]);
+
+    expect(result.data).toEqual([{ name: "wan", receive: 160, transmit: 240 }]);
+  });
+
+  test("treats counter resets as zero instead of negative traffic", () => {
+    const result = calculateBandwidth([
+      { timestamp: new Date("2026-01-01T00:00:10Z"), data: [{ name: "wan", receive: 10, transmit: 10 }] },
+      { timestamp: new Date("2026-01-01T00:00:00Z"), data: [{ name: "wan", receive: 100, transmit: 100 }] },
+    ]);
+
+    expect(result.data).toEqual([{ name: "wan", receive: 0, transmit: 0 }]);
+  });
+
+  test("rejects duplicate timestamps", () => {
+    const timestamp = new Date("2026-01-01T00:00:00Z");
+    expect(
+      calculateBandwidth([
+        { timestamp, data: [{ name: "wan", receive: 100, transmit: 100 }] },
+        { timestamp, data: [{ name: "wan", receive: 50, transmit: 50 }] },
+      ]).data,
+    ).toEqual([]);
+  });
+});
+
+describe("formatBitsPerSec", () => {
+  test("handles invalid and negative rates", () => {
+    expect(formatBitsPerSec(Number.NaN, 2)).toBe("0 b/s");
+    expect(formatBitsPerSec(-1, 2)).toBe("0 b/s");
+  });
+});
diff --git a/packages/widgets/src/firewall/bandwidth.ts b/packages/widgets/src/firewall/bandwidth.ts
new file mode 100644
index 000000000..79744660c
--- /dev/null
+++ b/packages/widgets/src/firewall/bandwidth.ts
@@ -0,0 +1,39 @@
+import type { FirewallInterface, FirewallInterfacesSummary } from "@homarr/integrations";
+
+export function formatBitsPerSec(bitsPerSecond: number, decimals: number): string {
+  if (!Number.isFinite(bitsPerSecond) || bitsPerSecond <= 0) return "0 b/s";
+
+  const unitSize = 1024;
+  const sizes = ["b/s", "kb/s", "Mb/s", "Gb/s", "Tb/s", "Pb/s", "Eb/s", "Zb/s", "Yb/s"];
+  const unitIndex = Math.min(Math.floor(Math.log(bitsPerSecond) / Math.log(unitSize)), sizes.length - 1);
+
+  return `${parseFloat((bitsPerSecond / Math.pow(unitSize, unitIndex)).toFixed(decimals))} ${sizes[unitIndex]}`;
+}
+
+export function calculateBandwidth(data: FirewallInterfacesSummary[]): { data: FirewallInterface[] } {
+  const samples = data
+    .filter((sample) => Number.isFinite(new Date(sample.timestamp).getTime()))
+    .toSorted((left, right) => new Date(right.timestamp).getTime() - new Date(left.timestamp).getTime());
+  const latest = samples[0];
+  const previous = samples[1];
+
+  if (!latest || !previous) return { data: [] };
+
+  const timeDiffInSeconds = (new Date(latest.timestamp).getTime() - new Date(previous.timestamp).getTime()) / 1000;
+  if (timeDiffInSeconds <= 0) return { data: [] };
+
+  return {
+    data: latest.data.flatMap((latestInterface) => {
+      const previousInterface = previous.data.find((item) => item.name === latestInterface.name);
+      if (!previousInterface) return [];
+
+      return [
+        {
+          name: latestInterface.name,
+          receive: Math.max(0, (8 * (latestInterface.receive - previousInterface.receive)) / timeDiffInSeconds),
+          transmit: Math.max(0, (8 * (latestInterface.transmit - previousInterface.transmit)) / timeDiffInSeconds),
+        },
+      ];
+    }),
+  };
+}
diff --git a/packages/widgets/src/firewall/component.tsx b/packages/widgets/src/firewall/component.tsx
index 523eadd8d..66a65b6d1 100644
--- a/packages/widgets/src/firewall/component.tsx
+++ b/packages/widgets/src/firewall/component.tsx
@@ -1,32 +1,51 @@
 "use client";
 
 import { useCallback, useState } from "react";
-import { Accordion, Box, Center, Flex, Group, RingProgress, ScrollArea, Text } from "@mantine/core";
+import {
+  Accordion,
+  Badge,
+  Center,
+  Flex,
+  Group,
+  Paper,
+  RingProgress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import { IconArrowBarDown, IconArrowBarUp, IconBrain, IconCpu, IconTopologyBus } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import type { FirewallInterface, FirewallInterfacesSummary } from "@homarr/integrations";
+import type { FirewallInterfacesSummary } from "@homarr/integrations";
+import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { calculateBandwidth, formatBitsPerSec } from "./bandwidth";
 import { FirewallMenu } from "./firewall-menu";
-import { FirewallVersion } from "./firewall-version";
+import { FirewallVersion, formatVersion } from "./firewall-version";
 
 export interface Firewall {
   label: string;
   value: string;
 }
 
-export default function FirewallWidget({ integrationIds, width, itemId }: WidgetComponentProps<"firewall">) {
-  const [selectedFirewall, setSelectedFirewall] = useState<string>("");
+export default function FirewallWidget({
+  integrationIds,
+  width,
+  itemId,
+  displayMode,
+}: WidgetComponentProps<"firewall">) {
+  const [selectedFirewall, setSelectedFirewall] = useState("");
+  const isAdvanced = displayMode === "advanced";
+  const isTiny = !isAdvanced && width < 256;
+  const t = useI18n();
 
   const handleSelect = useCallback((value: string | null) => {
-    if (value !== null) {
-      setSelectedFirewall(value);
-    } else {
-      setSelectedFirewall("default_value");
-    }
+    setSelectedFirewall(value ?? "");
   }, []);
 
   const { data: firewallsCpuData = [] } = clientApi.widget.firewall.getFirewallCpuStatus.useQuery({ integrationIds });
@@ -40,202 +59,275 @@ export default function FirewallWidget({ integrationIds, width, itemId }: Widget
     integrationIds,
   });
 
-  const initialSelectedFirewall = firewallsVersionData[0] ? firewallsVersionData[0].integration.id : "undefined";
-  const isTiny = width < 256;
-
   const [accordionValue, setAccordionValue] = useLocalStorage<string | null>({
     key: `homarr-${itemId}-firewall`,
     defaultValue: "interfaces",
   });
 
+  const initialSelectedFirewall = firewallsVersionData[0]?.integration.id ?? "";
+  const activeFirewall = firewallsVersionData.some(({ integration }) => integration.id === selectedFirewall)
+    ? selectedFirewall
+    : initialSelectedFirewall;
+  const displayedFirewallIds = isAdvanced
+    ? firewallsVersionData.map(({ integration }) => integration.id)
+    : activeFirewall
+      ? [activeFirewall]
+      : [];
   const dropdownItems = firewallsVersionData.map((firewall) => ({
     label: firewall.integration.name,
     value: firewall.integration.id,
   }));
 
-  const t = useI18n();
-
   return (
     <ScrollArea h="100%">
-      <Group justify="space-between" w="100%" style={{ padding: "8px" }}>
-        <FirewallMenu
-          onChange={handleSelect}
-          selectedFirewall={selectedFirewall || initialSelectedFirewall}
-          dropdownItems={dropdownItems}
-          isTiny={isTiny}
-        />
-        <FirewallVersion
-          firewallsVersionData={firewallsVersionData}
-          selectedFirewall={selectedFirewall || initialSelectedFirewall}
-          isTiny={isTiny}
-        />
-      </Group>
-      <Flex justify="center" align="center" wrap="wrap">
-        {/* Render CPU and Memory data */}
-        {firewallsCpuData
-          .filter(({ integration }) => integration.id === (selectedFirewall || initialSelectedFirewall))
-          .map(({ summary, integration }) => (
-            <RingProgress
-              key={`${integration.name}-cpu`}
-              roundCaps
-              size={isTiny ? 50 : 100}
-              thickness={isTiny ? 4 : 8}
-              label={
-                <Center style={{ flexDirection: "column" }}>
-                  <Text size={isTiny ? "8px" : "xs"}>{`${summary.total.toFixed(2)}%`}</Text>
-                  <IconCpu size={isTiny ? 8 : 16} />
-                </Center>
-              }
-              sections={[
-                {
-                  value: Number(summary.total.toFixed(1)),
-                  color: summary.total > 50 ? (summary.total < 75 ? "yellow" : "red") : "green",
-                },
-              ]}
+      <Stack gap="xs" p={isAdvanced ? "xs" : 0}>
+        {!isAdvanced && (
+          <Group justify="space-between" w="100%" p="xs">
+            <FirewallMenu
+              onChange={handleSelect}
+              selectedFirewall={activeFirewall}
+              dropdownItems={dropdownItems}
+              isTiny={isTiny}
             />
-          ))}
-        {firewallsMemoryData
-          .filter(({ integration }) => integration.id === (selectedFirewall || initialSelectedFirewall))
-          .map(({ summary, integration }) => (
-            <RingProgress
-              key={`${integration.name}-memory`}
-              roundCaps
-              size={isTiny ? 50 : 100}
-              thickness={isTiny ? 4 : 8}
-              label={
-                <Center style={{ flexDirection: "column" }}>
-                  <Text size={isTiny ? "8px" : "xs"}>{`${summary.percent.toFixed(1)}%`}</Text>
-                  <IconBrain size={isTiny ? 8 : 16} />
-                </Center>
-              }
-              sections={[
-                {
-                  value: Number(summary.percent.toFixed(1)),
-                  color: summary.percent > 50 ? (summary.percent < 75 ? "yellow" : "red") : "green",
-                },
-              ]}
+            <FirewallVersion
+              firewallsVersionData={firewallsVersionData}
+              selectedFirewall={activeFirewall}
+              isTiny={isTiny}
             />
-          ))}
-      </Flex>
-      {firewallsInterfacesData
-        .filter(({ integration }) => integration.id === (selectedFirewall || initialSelectedFirewall))
-        .map(({ summary }) => (
-          <Accordion key="interfaces" value={accordionValue} onChange={setAccordionValue}>
-            <Accordion.Item value="interfaces">
-              <Accordion.Control icon={isTiny ? null : <IconTopologyBus size={16} />}>
-                <Text size={isTiny ? "8px" : "xs"}> {t("widget.firewall.widget.interfaces.title")} </Text>
-              </Accordion.Control>
-              <Accordion.Panel>
-                <Flex direction="column" key="interfaces">
-                  {Array.isArray(summary) && summary.every((item) => Array.isArray(item.data)) ? (
-                    calculateBandwidth(summary).data.map(({ name, receive, transmit }) => (
-                      <Flex
-                        key={name}
-                        direction={isTiny ? "column" : "row"}
-                        style={{
-                          width: "100%",
-                          padding: isTiny ? "2px" : "0px",
-                        }}
-                      >
-                        <Flex w={isTiny ? "100%" : "33%"} style={{ justifyContent: "flex-start" }}>
-                          <Text
-                            size={isTiny ? "8px" : "xs"}
-                            color="lightblue"
-                            style={{
-                              maxWidth: "100px",
-                              overflow: "hidden",
-                              textOverflow: "ellipsis",
-                              whiteSpace: "nowrap",
-                              textAlign: "left",
-                            }}
-                          >
-                            {name}
-                          </Text>
-                        </Flex>
-                        <Flex
-                          align="center"
-                          gap="4"
-                          w={isTiny ? "100%" : "33%"}
-                          style={{ justifyContent: "flex-start" }}
-                        >
-                          <IconArrowBarUp size={isTiny ? "8" : "12"} color="lightgreen" />
-                          <Text size={isTiny ? "8px" : "xs"} c="lightgreen" style={{ textAlign: "left" }}>
-                            {formatBitsPerSec(transmit, 2)}
-                          </Text>
-                        </Flex>
-                        <Flex
-                          align="center"
-                          gap="4"
-                          w={isTiny ? "100%" : "33%"}
-                          style={{ justifyContent: "flex-start" }}
-                        >
-                          <IconArrowBarDown size={isTiny ? "8" : "12"} color="yellow" />
-                          <Text size={isTiny ? "8px" : "xs"} c="yellow" style={{ textAlign: "left" }}>
-                            {formatBitsPerSec(receive, 2)}
-                          </Text>
-                        </Flex>
-                      </Flex>
-                    ))
-                  ) : (
-                    <Box>No data available</Box>
-                  )}
-                </Flex>
-              </Accordion.Panel>
-            </Accordion.Item>
-          </Accordion>
-        ))}
+          </Group>
+        )}
+
+        <SimpleGrid cols={isAdvanced && width >= 720 ? 2 : 1} spacing="xs">
+          {displayedFirewallIds.map((firewallId) => {
+            const cpu = firewallsCpuData.find(({ integration }) => integration.id === firewallId);
+            const memory = firewallsMemoryData.find(({ integration }) => integration.id === firewallId);
+            const version = firewallsVersionData.find(({ integration }) => integration.id === firewallId);
+            const interfaces = firewallsInterfacesData.find(({ integration }) => integration.id === firewallId);
+            const hasError = Boolean(cpu?.error || memory?.error || version?.error || interfaces?.error);
+
+            return (
+              <FirewallPanel
+                key={firewallId}
+                name={version?.integration.name ?? cpu?.integration.name ?? firewallId}
+                kind={version?.integration.kind}
+                version={version?.summary.version}
+                cpu={cpu?.summary.total}
+                memory={memory?.summary.percent}
+                interfaces={interfaces?.summary}
+                hasError={hasError}
+                isAdvanced={isAdvanced}
+                isTiny={isTiny}
+                accordionValue={accordionValue}
+                setAccordionValue={setAccordionValue}
+                noDataLabel={t("widget.firewall.error.internalServerError")}
+                interfacesLabel={t("widget.firewall.widget.interfaces.title")}
+                t={t}
+              />
+            );
+          })}
+        </SimpleGrid>
+      </Stack>
     </ScrollArea>
   );
 }
 
-export function formatBitsPerSec(bytes: number, decimals: number): string {
-  if (bytes === 0) return "0 b/s";
-
-  const kilobyte = 1024;
-  const sizes = ["b/s", "kb/s", "Mb/s", "Gb/s", "Tb/s", "Pb/s", "Eb/s", "Zb/s", "Yb/s"];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(kilobyte));
-
-  return `${parseFloat((bytes / Math.pow(kilobyte, i)).toFixed(decimals))} ${sizes[i]}`;
+interface FirewallPanelProps {
+  name: string;
+  kind?: string;
+  version?: string;
+  cpu?: number;
+  memory?: number;
+  interfaces?: FirewallInterfacesSummary[];
+  hasError: boolean;
+  isAdvanced: boolean;
+  isTiny: boolean;
+  accordionValue: string | null;
+  setAccordionValue: (value: string | null) => void;
+  noDataLabel: string;
+  interfacesLabel: string;
+  t: TranslationFunction;
 }
 
-export function calculateBandwidth(data: FirewallInterfacesSummary[]): { data: FirewallInterface[] } {
-  const result = {
-    data: [] as FirewallInterface[],
-    timestamp: new Date().toISOString(),
-  };
+const FirewallPanel = ({
+  name,
+  kind,
+  version,
+  cpu,
+  memory,
+  interfaces,
+  hasError,
+  isAdvanced,
+  isTiny,
+  accordionValue,
+  setAccordionValue,
+  noDataLabel,
+  interfacesLabel,
+  t,
+}: FirewallPanelProps) => (
+  <Paper withBorder={isAdvanced} radius="sm" p={isAdvanced ? "xs" : 0}>
+    <Stack gap="xs">
+      {isAdvanced && (
+        <Group justify="space-between" wrap="nowrap">
+          <Stack gap={0} miw={0}>
+            <Text size="sm" fw={600} truncate="end">
+              {name}
+            </Text>
+            {kind && (
+              <Text size="xs" c="dimmed">
+                {kind}
+              </Text>
+            )}
+          </Stack>
+          <Group gap={4} wrap="nowrap">
+            {hasError && (
+              <Tooltip label={noDataLabel}>
+                <Badge color="red" variant="light" size="xs">
+                  {t("common.error")}
+                </Badge>
+              </Tooltip>
+            )}
+            <Badge variant="outline" color="gray" size="xs">
+              {formatVersion(version ?? "", t("widget.firewall.versionUnknown"))}
+            </Badge>
+          </Group>
+        </Group>
+      )}
 
-  if (data.length > 1) {
-    const firstData = data[0];
-    const secondData = data[1];
+      <Flex justify="center" align="center" wrap="wrap">
+        {cpu !== undefined && (
+          <MetricRing value={cpu} icon={IconCpu} isTiny={isTiny} label={t("widget.firewall.widget.cpu")} t={t} />
+        )}
+        {memory !== undefined && (
+          <MetricRing
+            value={memory}
+            icon={IconBrain}
+            isTiny={isTiny}
+            label={t("widget.firewall.widget.memory")}
+            t={t}
+          />
+        )}
+      </Flex>
 
-    if (firstData && secondData) {
-      const time1 = new Date(firstData.timestamp);
-      const time2 = new Date(secondData.timestamp);
-      const timeDiffInSeconds = (time1.getTime() - time2.getTime()) / 1000;
+      <InterfacesPanel
+        summary={interfaces ?? []}
+        isAdvanced={isAdvanced}
+        isTiny={isTiny}
+        accordionValue={accordionValue}
+        setAccordionValue={setAccordionValue}
+        noDataLabel={noDataLabel}
+        label={interfacesLabel}
+      />
+    </Stack>
+  </Paper>
+);
 
-      firstData.data.forEach((iface) => {
-        const ifaceName = iface.name;
-        const recv1 = iface.receive;
-        const trans1 = iface.transmit;
-
-        const iface2 = secondData.data.find((i) => i.name === ifaceName);
-
-        if (iface2) {
-          const recv2 = iface2.receive;
-          const trans2 = iface2.transmit;
-          const recvDiff = recv1 - recv2;
-          const transDiff = trans1 - trans2;
-
-          result.data.push({
-            name: ifaceName,
-            receive: (8 * recvDiff) / timeDiffInSeconds,
-            transmit: (8 * transDiff) / timeDiffInSeconds,
-          });
-        }
-      });
-    }
-  }
-
-  return result;
+interface MetricRingProps {
+  value: number;
+  icon: typeof IconCpu;
+  isTiny: boolean;
+  label: string;
+  t: TranslationFunction;
 }
+
+const MetricRing = ({ value, icon: Icon, isTiny, label, t }: MetricRingProps) => {
+  const safeValue = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
+  const status = getMetricStatus(safeValue);
+  const statusLabel = t(`widget.firewall.status.${status}`);
+
+  return (
+    <RingProgress
+      aria-label={t("widget.firewall.metricAccessible", {
+        metric: label,
+        value: safeValue.toFixed(1),
+        status: statusLabel,
+      })}
+      roundCaps
+      size={isTiny ? 50 : 100}
+      thickness={isTiny ? 4 : 8}
+      label={
+        <Center style={{ flexDirection: "column" }}>
+          <Text size={isTiny ? "8px" : "xs"}>{safeValue.toFixed(1)}%</Text>
+          <Icon size={isTiny ? 8 : 16} />
+          {!isTiny && <Text size="8px">{statusLabel}</Text>}
+        </Center>
+      }
+      sections={[
+        {
+          value: safeValue,
+          color: status === "warning" ? "yellow" : status === "critical" ? "red" : "green",
+        },
+      ]}
+    />
+  );
+};
+
+const getMetricStatus = (value: number): "normal" | "warning" | "critical" => {
+  if (value >= 75) return "critical";
+  if (value > 50) return "warning";
+  return "normal";
+};
+
+interface InterfacesPanelProps {
+  summary: FirewallInterfacesSummary[];
+  isAdvanced: boolean;
+  isTiny: boolean;
+  accordionValue: string | null;
+  setAccordionValue: (value: string | null) => void;
+  noDataLabel: string;
+  label: string;
+}
+
+const InterfacesPanel = ({
+  summary,
+  isAdvanced,
+  isTiny,
+  accordionValue,
+  setAccordionValue,
+  noDataLabel,
+  label,
+}: InterfacesPanelProps) => {
+  const bandwidth = calculateBandwidth(summary).data;
+
+  return (
+    <Accordion
+      value={isAdvanced ? "interfaces" : accordionValue}
+      onChange={isAdvanced ? undefined : setAccordionValue}
+      variant={isAdvanced ? "contained" : "default"}
+    >
+      <Accordion.Item value="interfaces">
+        <Accordion.Control icon={isTiny ? null : <IconTopologyBus size={16} />}>
+          <Text size={isTiny ? "8px" : "xs"}>{label}</Text>
+        </Accordion.Control>
+        <Accordion.Panel>
+          <Stack gap={4}>
+            {bandwidth.length > 0 ? (
+              bandwidth.map(({ name, receive, transmit }) => (
+                <Group key={name} gap="xs" wrap={isTiny ? "wrap" : "nowrap"} justify="space-between">
+                  <Text size={isTiny ? "8px" : "xs"} c="blue.3" truncate="end" style={{ flex: 1 }}>
+                    {name}
+                  </Text>
+                  <Group gap={4} wrap="nowrap">
+                    <IconArrowBarUp size={isTiny ? 8 : 12} color="lightgreen" />
+                    <Text size={isTiny ? "8px" : "xs"} c="green.3">
+                      {formatBitsPerSec(transmit, 2)}
+                    </Text>
+                  </Group>
+                  <Group gap={4} wrap="nowrap">
+                    <IconArrowBarDown size={isTiny ? 8 : 12} color="yellow" />
+                    <Text size={isTiny ? "8px" : "xs"} c="yellow.3">
+                      {formatBitsPerSec(receive, 2)}
+                    </Text>
+                  </Group>
+                </Group>
+              ))
+            ) : (
+              <Text size="xs" c="dimmed">
+                {noDataLabel}
+              </Text>
+            )}
+          </Stack>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion>
+  );
+};
diff --git a/packages/widgets/src/firewall/firewall-version.tsx b/packages/widgets/src/firewall/firewall-version.tsx
index 8a85312fb..3fae1fa2a 100644
--- a/packages/widgets/src/firewall/firewall-version.tsx
+++ b/packages/widgets/src/firewall/firewall-version.tsx
@@ -1,6 +1,7 @@
 import { Badge, Box } from "@mantine/core";
 
 import type { FirewallVersionSummary } from "@homarr/integrations";
+import { useI18n } from "@homarr/translation/client";
 
 interface FirewallVersionProps {
   firewallsVersionData: {
@@ -18,24 +19,34 @@ export interface FirewallIntegration {
   updatedAt: Date;
 }
 
-export const FirewallVersion = ({ firewallsVersionData, selectedFirewall, isTiny }: FirewallVersionProps) => (
-  <Box>
-    <Badge autoContrast variant="outline" color="lightgray" size={isTiny ? "8px" : "xs"} style={{ minHeight: "24px" }}>
-      {firewallsVersionData
-        .filter(({ integration }) => integration.id === selectedFirewall)
-        .map(({ summary, integration }) => (
-          <span key={integration.id}>{formatVersion(summary.version)}</span>
-        ))}
-    </Badge>
-  </Box>
-);
+export const FirewallVersion = ({ firewallsVersionData, selectedFirewall, isTiny }: FirewallVersionProps) => {
+  const t = useI18n();
 
-function formatVersion(inputString: string): string {
+  return (
+    <Box>
+      <Badge
+        autoContrast
+        variant="outline"
+        color="lightgray"
+        size={isTiny ? "8px" : "xs"}
+        style={{ minHeight: "24px" }}
+      >
+        {firewallsVersionData
+          .filter(({ integration }) => integration.id === selectedFirewall)
+          .map(({ summary, integration }) => (
+            <span key={integration.id}>{formatVersion(summary.version, t("widget.firewall.versionUnknown"))}</span>
+          ))}
+      </Badge>
+    </Box>
+  );
+};
+
+export function formatVersion(inputString: string, fallback: string): string {
   const regex = /([\d._]+)/;
   const match = regex.exec(inputString);
   if (match?.[1]) {
     return match[1];
   } else {
-    return "Unknown Version";
+    return fallback;
   }
 }
diff --git a/packages/widgets/src/firewall/index.ts b/packages/widgets/src/firewall/index.ts
index e154fd3ac..800874812 100644
--- a/packages/widgets/src/firewall/index.ts
+++ b/packages/widgets/src/firewall/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("firewall", {
   icon: IconWall,
+  queryKey: [["widget", "firewall"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(() => ({}));
diff --git a/packages/widgets/src/health-monitoring/cluster/accordion-state.spec.ts b/packages/widgets/src/health-monitoring/cluster/accordion-state.spec.ts
new file mode 100644
index 000000000..2004a4b01
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/cluster/accordion-state.spec.ts
@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+
+import { getClusterAccordionDefault } from "./accordion-state";
+
+describe("getClusterAccordionDefault", () => {
+  test("opens only the first visible section in compact mode", () => {
+    expect(getClusterAccordionDefault("compact", ["node", "qemu", "storage"])).toEqual(["node"]);
+  });
+
+  test("opens every visible section in advanced mode", () => {
+    expect(getClusterAccordionDefault("advanced", ["node", "qemu", "storage"])).toEqual(["node", "qemu", "storage"]);
+  });
+
+  test("does not invent a section when none are visible", () => {
+    expect(getClusterAccordionDefault("compact", [])).toEqual([]);
+  });
+});
diff --git a/packages/widgets/src/health-monitoring/cluster/accordion-state.ts b/packages/widgets/src/health-monitoring/cluster/accordion-state.ts
new file mode 100644
index 000000000..425e4431b
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/cluster/accordion-state.ts
@@ -0,0 +1,4 @@
+export const getClusterAccordionDefault = (
+  displayMode: "compact" | "advanced" | undefined,
+  visibleSections: readonly string[],
+): string[] => (displayMode === "advanced" ? [...visibleSections] : visibleSections.slice(0, 1));
diff --git a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
index 1ac7922d5..a8981150e 100644
--- a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
+++ b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Accordion, Center, Flex, Group, RingProgress, Stack, Text } from "@mantine/core";
 import { IconBrain, IconCpu, IconCube, IconDatabase, IconDeviceLaptop, IconServer } from "@tabler/icons-react";
 
@@ -8,6 +9,7 @@ import { useI18n } from "@homarr/translation/client";
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
 import { formatUptime } from "../system-health";
+import { getClusterAccordionDefault } from "./accordion-state";
 import { ResourceAccordionItem } from "./resource-accordion-item";
 import { ResourceTable } from "./resource-table";
 
@@ -33,11 +35,16 @@ export const ClusterHealthMonitoring = ({
   integrationId,
   options,
   width,
+  displayMode,
 }: WidgetComponentProps<"healthMonitoring"> & { integrationId: string }) => {
   const t = useI18n();
   const { data: healthData } = clientApi.widget.healthMonitoring.getClusterHealthStatus.useQuery({
     integrationId,
   });
+  const accordionScope = `${displayMode}:${options.visibleClusterSections.join(",")}`;
+  const accordionDefault = getClusterAccordionDefault(displayMode, options.visibleClusterSections);
+  const [accordionValues, setAccordionValues] = useState<Record<string, string[]>>({});
+  const accordionValue = accordionValues[accordionScope] ?? accordionDefault;
 
   if (!healthData) return <WidgetEmptyState />;
 
@@ -53,15 +60,13 @@ export const ClusterHealthMonitoring = ({
     (sum, item) => (item.isRunning ? item.cpu.utilization * item.cpu.cores + sum : sum),
     0,
   );
-  const uptime = healthData.nodes.reduce((sum, { uptime }) => (sum > uptime ? sum : uptime), 0);
+  const uptime = healthData.nodes.reduce((sum, { uptime: nodeUptime }) => (sum > nodeUptime ? sum : nodeUptime), 0);
 
   const cpuPercent = maxCpu ? (usedCpu / maxCpu) * 100 : 0;
   const memPercent = maxMem ? (usedMem / maxMem) * 100 : 0;
-  const defaultValue = [options.visibleClusterSections.at(0) ?? "node"];
-
-  const isTiny = width < 256;
+  const isTiny = displayMode !== "advanced" && width < 256;
   return (
-    <Stack h="100%" p="xs" gap={isTiny ? "xs" : "md"}>
+    <Stack h={displayMode === "advanced" ? "auto" : "100%"} p="xs" gap={isTiny ? "xs" : "md"}>
       {options.showUptime && (
         <Group justify="center" wrap="nowrap">
           <Text fz={isTiny ? 8 : "xs"} tt="uppercase" fw={700} c="dimmed" ta="center">
@@ -81,7 +86,13 @@ export const ClusterHealthMonitoring = ({
         isTiny={isTiny}
       />
       {options.visibleClusterSections.length >= 1 && (
-        <Accordion variant="contained" chevronPosition="right" multiple defaultValue={defaultValue}>
+        <Accordion
+          variant="contained"
+          chevronPosition="right"
+          multiple
+          value={accordionValue}
+          onChange={(value) => setAccordionValues((current) => ({ ...current, [accordionScope]: value }))}
+        >
           {options.visibleClusterSections.includes("node") && (
             <ResourceAccordionItem
               value="node"
diff --git a/packages/widgets/src/health-monitoring/component.tsx b/packages/widgets/src/health-monitoring/component.tsx
index ead4fef92..d030e57ae 100644
--- a/packages/widgets/src/health-monitoring/component.tsx
+++ b/packages/widgets/src/health-monitoring/component.tsx
@@ -1,38 +1,54 @@
 "use client";
 
-import { ScrollArea, Tabs } from "@mantine/core";
+import { Box, ScrollArea, SimpleGrid, Stack, Tabs } from "@mantine/core";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 
 import { clientApi } from "@homarr/api/client";
-import type { IntegrationKind } from "@homarr/definitions";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { ClusterHealthMonitoring } from "./cluster/cluster-health";
+import { partitionHealthMonitoringIntegrations } from "./integration-selection";
 import { SystemHealthMonitoring } from "./system-health";
 
 dayjs.extend(duration);
 
-const isClusterIntegration = (integration: { kind: IntegrationKind }) =>
-  integration.kind === "proxmox" || integration.kind === "mock";
-
 export default function HealthMonitoringWidget(props: WidgetComponentProps<"healthMonitoring">) {
   const { data: integrations = [] } = clientApi.integration.byIds.useQuery(props.integrationIds);
   const t = useI18n();
 
-  const clusterIntegrationId = integrations.find(isClusterIntegration)?.id;
+  const { clusterIntegrationIds, systemIntegrationIds } = partitionHealthMonitoringIntegrations(integrations);
 
-  if (!clusterIntegrationId) {
+  if (clusterIntegrationIds.length === 0) {
     return <SystemHealthMonitoring {...props} />;
   }
 
-  const otherIntegrationIds = integrations
-    // We want to have the mock integration also in the system tab, so we use it for both
-    .filter((integration) => integration.kind !== "proxmox")
-    .map((integration) => integration.id);
-  if (otherIntegrationIds.length === 0) {
-    return <ClusterHealthMonitoring {...props} integrationId={clusterIntegrationId} />;
+  const clusters = (
+    <Stack gap="sm">
+      {clusterIntegrationIds.map((integrationId) => (
+        <ClusterHealthMonitoring key={integrationId} {...props} integrationId={integrationId} />
+      ))}
+    </Stack>
+  );
+
+  if (systemIntegrationIds.length === 0) {
+    const onlyClusterIntegrationId = clusterIntegrationIds[0];
+    if (clusterIntegrationIds.length === 1 && onlyClusterIntegrationId) {
+      return <ClusterHealthMonitoring {...props} integrationId={onlyClusterIntegrationId} />;
+    }
+    return <ScrollArea h="100%">{clusters}</ScrollArea>;
+  }
+
+  if (props.displayMode === "advanced") {
+    return (
+      <SimpleGrid cols={props.width >= 900 ? 2 : 1} spacing="sm" p="xs" h="100%">
+        <Box style={{ minHeight: 0, overflow: "hidden" }}>
+          <SystemHealthMonitoring {...props} integrationIds={systemIntegrationIds} />
+        </Box>
+        <ScrollArea h="100%">{clusters}</ScrollArea>
+      </SimpleGrid>
+    );
   }
 
   return (
@@ -47,11 +63,9 @@ export default function HealthMonitoringWidget(props: WidgetComponentProps<"heal
           </Tabs.Tab>
         </Tabs.List>
         <Tabs.Panel value="system">
-          <SystemHealthMonitoring {...props} integrationIds={otherIntegrationIds} />
-        </Tabs.Panel>
-        <Tabs.Panel value="cluster">
-          <ClusterHealthMonitoring integrationId={clusterIntegrationId} {...props} />
+          <SystemHealthMonitoring {...props} integrationIds={systemIntegrationIds} />
         </Tabs.Panel>
+        <Tabs.Panel value="cluster">{clusters}</Tabs.Panel>
       </Tabs>
     </ScrollArea>
   );
diff --git a/packages/widgets/src/health-monitoring/index.ts b/packages/widgets/src/health-monitoring/index.ts
index ff8eb87ab..b63603468 100644
--- a/packages/widgets/src/health-monitoring/index.ts
+++ b/packages/widgets/src/health-monitoring/index.ts
@@ -8,6 +8,8 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options
 
 export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
   icon: IconHeartRateMonitor,
+  queryKey: [["widget", "healthMonitoring"]],
+  queryKeys: [[["integration", "byIds"]], [["widget", "healthMonitoring"]]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/health-monitoring/integration-selection.spec.ts b/packages/widgets/src/health-monitoring/integration-selection.spec.ts
new file mode 100644
index 000000000..3d7b3c916
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/integration-selection.spec.ts
@@ -0,0 +1,25 @@
+import { describe, expect, test } from "vitest";
+
+import { partitionHealthMonitoringIntegrations } from "./integration-selection";
+
+describe("partitionHealthMonitoringIntegrations", () => {
+  test("preserves every Proxmox integration", () => {
+    expect(
+      partitionHealthMonitoringIntegrations([
+        { id: "proxmox-a", kind: "proxmox" },
+        { id: "proxmox-b", kind: "proxmox" },
+        { id: "system", kind: "glances" },
+      ]),
+    ).toEqual({
+      clusterIntegrationIds: ["proxmox-a", "proxmox-b"],
+      systemIntegrationIds: ["system"],
+    });
+  });
+
+  test("keeps mock integrations in both views", () => {
+    expect(partitionHealthMonitoringIntegrations([{ id: "mock", kind: "mock" }])).toEqual({
+      clusterIntegrationIds: ["mock"],
+      systemIntegrationIds: ["mock"],
+    });
+  });
+});
diff --git a/packages/widgets/src/health-monitoring/integration-selection.ts b/packages/widgets/src/health-monitoring/integration-selection.ts
new file mode 100644
index 000000000..ee2f679df
--- /dev/null
+++ b/packages/widgets/src/health-monitoring/integration-selection.ts
@@ -0,0 +1,12 @@
+import type { IntegrationKind } from "@homarr/definitions";
+
+interface HealthMonitoringIntegration {
+  id: string;
+  kind: IntegrationKind;
+}
+
+export const partitionHealthMonitoringIntegrations = (integrations: HealthMonitoringIntegration[]) => ({
+  clusterIntegrationIds: integrations.filter(({ kind }) => kind === "proxmox" || kind === "mock").map(({ id }) => id),
+  // Mock implements both contracts and remains visible in both views.
+  systemIntegrationIds: integrations.filter(({ kind }) => kind !== "proxmox").map(({ id }) => id),
+});
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 3614a570c..b52ba7fc5 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+
 import {
   ActionIcon,
   Box,
@@ -11,10 +13,10 @@ import {
   List,
   Modal,
   Progress,
+  ScrollArea,
   Stack,
   Text,
 } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
 import {
   IconBrain,
   IconClock,
@@ -30,6 +32,7 @@ import combineClasses from "clsx";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 
+import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { formatBytes } from "@homarr/common";
@@ -51,206 +54,222 @@ export const SystemHealthMonitoring = ({
   options,
   integrationIds,
   width,
+  displayMode,
 }: WidgetComponentProps<"healthMonitoring">) => {
   const t = useI18n();
   const { data: healthData = [] } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
     integrationIds,
   });
-  const [opened, { open, close }] = useDisclosure(false);
+  const [openedIntegrationId, setOpenedIntegrationId] = useState<string | null>(null);
   const board = useRequiredBoard();
 
-  const isTiny = width < 256;
+  const isAdvanced = displayMode === "advanced";
+  const isTiny = !isAdvanced && width < 256;
 
   if (healthData.length === 0) return <WidgetEmptyState />;
 
   return (
-    <Stack h="100%" gap="sm" className="health-monitoring">
-      {healthData.map(({ integrationId, integrationName, healthInfo }) => {
-        const filteredFileSystem = filterStorageVolumes(
-          healthInfo.fileSystem,
-          options.visibleStorageVolumes,
-          integrationId,
-        );
-        const filteredSmart = filterStorageVolumes(healthInfo.smart, options.visibleStorageVolumes, integrationId);
-        const disksData = matchFileSystemAndSmart(filteredFileSystem, filteredSmart);
-        const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes);
-        return (
-          <Stack
-            gap="sm"
-            key={integrationId}
-            h="100%"
-            className={`health-monitoring-information health-monitoring-${integrationName}`}
-            p="sm"
-            pos="relative"
-          >
-            <Box className="health-monitoring-information-card-section" pos="absolute" top={8} right={8}>
-              <Indicator
-                className="health-monitoring-updates-reboot-indicator"
-                inline
-                processing
-                styles={{ indicator: { pointerEvents: "none" } }}
-                color={healthInfo.rebootRequired ? "red" : healthInfo.availablePkgUpdates > 0 ? "blue" : "gray"}
-                position="top-end"
-                size={16}
-                label={healthInfo.availablePkgUpdates > 0 ? healthInfo.availablePkgUpdates : undefined}
-                disabled={!healthInfo.rebootRequired && healthInfo.availablePkgUpdates === 0}
-              >
-                <ActionIcon
-                  className="health-monitoring-information-icon-avatar"
-                  variant={"light"}
-                  color="var(--mantine-color-text)"
-                  size="sm"
-                  radius={board.itemRadius}
+    <ScrollArea h="100%">
+      <Stack mih="100%" gap="sm" className="health-monitoring">
+        {healthData.map(({ integrationId, integrationName, healthInfo }) => {
+          const filteredFileSystem = filterStorageVolumes(
+            healthInfo.fileSystem,
+            options.visibleStorageVolumes,
+            integrationId,
+          );
+          const filteredSmart = filterStorageVolumes(healthInfo.smart, options.visibleStorageVolumes, integrationId);
+          const disksData = matchFileSystemAndSmart(filteredFileSystem, filteredSmart);
+          const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes);
+          return (
+            <Stack
+              gap="sm"
+              key={integrationId}
+              h={!isAdvanced && healthData.length === 1 ? "100%" : "auto"}
+              className={`health-monitoring-information health-monitoring-${integrationName}`}
+              p="sm"
+              pos="relative"
+            >
+              <Box className="health-monitoring-information-card-section" pos="absolute" top={8} right={8}>
+                <Indicator
+                  className="health-monitoring-updates-reboot-indicator"
+                  inline
+                  processing
+                  styles={{ indicator: { pointerEvents: "none" } }}
+                  color={healthInfo.rebootRequired ? "red" : healthInfo.availablePkgUpdates > 0 ? "blue" : "gray"}
+                  position="top-end"
+                  size={16}
+                  label={healthInfo.availablePkgUpdates > 0 ? healthInfo.availablePkgUpdates : undefined}
+                  disabled={!healthInfo.rebootRequired && healthInfo.availablePkgUpdates === 0}
                 >
-                  <IconInfoCircle className="health-monitoring-information-icon" size={30} onClick={open} />
-                </ActionIcon>
-              </Indicator>
-              <Modal
-                opened={opened}
-                onClose={close}
-                size="auto"
-                title={t("widget.healthMonitoring.popover.information")}
-                centered
-              >
-                <Stack gap="10px" className="health-monitoring-modal-stack">
-                  <Divider />
-                  <List className="health-monitoring-information-list" center spacing="xs">
-                    <List.Item className="health-monitoring-information-processor" icon={<IconCpu2 size={30} />}>
-                      {t("widget.healthMonitoring.popover.processor", { cpuModelName: healthInfo.cpuModelName })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={30} />}>
-                      {t("widget.healthMonitoring.popover.memory", { memory: memoryUsage.memTotal.GB })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={30} />}>
-                      {t("widget.healthMonitoring.popover.memoryAvailable", {
-                        memoryAvailable: memoryUsage.memFree.GB,
-                        percent: String(memoryUsage.memFree.percent),
-                      })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-version" icon={<IconVersions size={30} />}>
-                      {t("widget.healthMonitoring.popover.version", {
-                        version: healthInfo.version,
-                      })}
-                    </List.Item>
-                    <List.Item className="health-monitoring-information-uptime" icon={<IconClock size={30} />}>
-                      {formatUptime(healthInfo.uptime, t)}
-                    </List.Item>
-                    {healthInfo.loadAverage && (
-                      <>
-                        <List.Item className="health-monitoring-information-load-average" icon={<IconCpu size={30} />}>
-                          {t("widget.healthMonitoring.popover.loadAverage")}
-                        </List.Item>
-                        <List m="xs" withPadding center spacing="xs" icon={<IconCpu size={30} />}>
-                          <List.Item className="health-monitoring-information-load-average-1min">
-                            {t("widget.healthMonitoring.popover.minute")} {healthInfo.loadAverage["1min"]}%
-                          </List.Item>
-                          <List.Item className="health-monitoring-information-load-average-5min">
-                            {t("widget.healthMonitoring.popover.minutes", { count: "5" })}{" "}
-                            {healthInfo.loadAverage["5min"]}%
-                          </List.Item>
-                          <List.Item className="health-monitoring-information-load-average-15min">
-                            {t("widget.healthMonitoring.popover.minutes", { count: "15" })}{" "}
-                            {healthInfo.loadAverage["15min"]}%
-                          </List.Item>
-                        </List>
-                      </>
-                    )}
-                  </List>
-                </Stack>
-              </Modal>
-            </Box>
-            <Flex className="health-monitoring-information-card-elements" justify="center" align="center" wrap="wrap">
-              {options.cpu && <CpuRing cpuUtilization={healthInfo.cpuUtilization} isTiny={isTiny} />}
-              {options.cpu && (
-                <CpuTempRing fahrenheit={options.fahrenheit} cpuTemp={healthInfo.cpuTemp} isTiny={isTiny} />
-              )}
-              {options.memory && (
-                <MemoryRing
-                  available={healthInfo.memAvailableInBytes}
-                  used={healthInfo.memUsedInBytes}
-                  isTiny={isTiny}
-                />
-              )}
-              {options.gpu &&
-                healthInfo.gpu.map((gpu) => (
-                  <GpuRing key={gpu.gpuId} gpu={gpu} isTiny={isTiny} fahrenheit={options.fahrenheit} />
-                ))}
-            </Flex>
-            {options.fileSystem &&
-              disksData.map((disk) => {
-                return (
-                  <Card
-                    className={combineClasses(
-                      `health-monitoring-disk-card health-monitoring-disk-card-${integrationName}`,
-                      classes.card,
-                    )}
-                    style={{ overflow: "visible" }}
-                    key={disk.deviceName}
+                  <ActionIcon
+                    className="health-monitoring-information-icon-avatar"
+                    variant={"light"}
+                    color="var(--mantine-color-text)"
+                    size="sm"
                     radius={board.itemRadius}
-                    p="xs"
+                    onClick={() => setOpenedIntegrationId(integrationId)}
+                    aria-label={t("widget.healthMonitoring.popover.information")}
                   >
-                    <Stack gap="xs">
-                      <Group
-                        className="health-monitoring-disk-status"
-                        justify="space-between"
-                        align="center"
-                        wrap="wrap"
-                        gap={8}
-                      >
-                        <Group gap={4} wrap="nowrap">
-                          <IconServer className="health-monitoring-disk-icon" size="1rem" />
-                          <Text className="dihealth-monitoring-disk-name" size="xs">
-                            {disk.deviceName}
-                          </Text>
-                        </Group>
-                        {disk.temperature !== null && (
+                    <IconInfoCircle className="health-monitoring-information-icon" size={30} />
+                  </ActionIcon>
+                </Indicator>
+                <Modal
+                  opened={openedIntegrationId === integrationId}
+                  onClose={() => setOpenedIntegrationId(null)}
+                  size="auto"
+                  title={t("widget.healthMonitoring.popover.information")}
+                  centered
+                >
+                  <Stack gap="10px" className="health-monitoring-modal-stack">
+                    <Divider />
+                    <SystemInformationList healthInfo={healthInfo} memoryUsage={memoryUsage} t={t} />
+                  </Stack>
+                </Modal>
+              </Box>
+              <Flex className="health-monitoring-information-card-elements" justify="center" align="center" wrap="wrap">
+                {options.cpu && <CpuRing cpuUtilization={healthInfo.cpuUtilization} isTiny={isTiny} />}
+                {options.cpu && (
+                  <CpuTempRing fahrenheit={options.fahrenheit} cpuTemp={healthInfo.cpuTemp} isTiny={isTiny} />
+                )}
+                {options.memory && (
+                  <MemoryRing
+                    available={healthInfo.memAvailableInBytes}
+                    used={healthInfo.memUsedInBytes}
+                    isTiny={isTiny}
+                  />
+                )}
+                {options.gpu &&
+                  healthInfo.gpu.map((gpu) => (
+                    <GpuRing key={gpu.gpuId} gpu={gpu} isTiny={isTiny} fahrenheit={options.fahrenheit} />
+                  ))}
+              </Flex>
+              {isAdvanced && (
+                <Card radius={board.itemRadius} p="sm">
+                  <SystemInformationList healthInfo={healthInfo} memoryUsage={memoryUsage} t={t} compact />
+                </Card>
+              )}
+              {options.fileSystem &&
+                disksData.map((disk) => {
+                  return (
+                    <Card
+                      className={combineClasses(
+                        `health-monitoring-disk-card health-monitoring-disk-card-${integrationName}`,
+                        classes.card,
+                      )}
+                      style={{ overflow: "visible" }}
+                      key={disk.deviceName}
+                      radius={board.itemRadius}
+                      p="xs"
+                    >
+                      <Stack gap="xs">
+                        <Group
+                          className="health-monitoring-disk-status"
+                          justify="space-between"
+                          align="center"
+                          wrap="wrap"
+                          gap={8}
+                        >
                           <Group gap={4} wrap="nowrap">
-                            <IconTemperature className="health-monitoring-disk-temperature-icon" size="1rem" />
-                            <Text className="health-monitoring-disk-temperature-value" size="xs">
-                              {options.fahrenheit
-                                ? `${(disk.temperature * 1.8 + 32).toFixed(1)}°F`
-                                : `${disk.temperature}°C`}
+                            <IconServer className="health-monitoring-disk-icon" size="1rem" />
+                            <Text className="dihealth-monitoring-disk-name" size="xs">
+                              {disk.deviceName}
                             </Text>
                           </Group>
-                        )}
-                        <Group gap={4} wrap="nowrap">
-                          <IconFileReport className="health-monitoring-disk-status-icon" size="1rem" />
-                          <Text className="health-monitoring-disk-status-value" size="xs">
-                            {disk.overallStatus ? disk.overallStatus : "N/A"}
+                          {disk.temperature !== null && (
+                            <Group gap={4} wrap="nowrap">
+                              <IconTemperature className="health-monitoring-disk-temperature-icon" size="1rem" />
+                              <Text className="health-monitoring-disk-temperature-value" size="xs">
+                                {options.fahrenheit
+                                  ? `${(disk.temperature * 1.8 + 32).toFixed(1)}°F`
+                                  : `${disk.temperature}°C`}
+                              </Text>
+                            </Group>
+                          )}
+                          <Group gap={4} wrap="nowrap">
+                            <IconFileReport className="health-monitoring-disk-status-icon" size="1rem" />
+                            <Text className="health-monitoring-disk-status-value" size="xs">
+                              {disk.overallStatus ? disk.overallStatus : "N/A"}
+                            </Text>
+                          </Group>
+                        </Group>
+                        <Progress.Root className="health-monitoring-disk-use" radius={board.itemRadius} size="lg">
+                          <Progress.Section
+                            value={disk.percentage}
+                            color={progressColor(disk.percentage)}
+                            className="health-monitoring-disk-use-percentage"
+                          />
+                          <Progress.Section
+                            className="health-monitoring-disk-available-percentage"
+                            value={100 - disk.percentage}
+                            color="default"
+                          />
+                        </Progress.Root>
+                        <Group justify="space-between" gap={8} wrap="nowrap">
+                          <Text className="health-monitoring-disk-use-value" size="xs" c="dimmed">
+                            {t("widget.healthMonitoring.popover.used")} {formatFileSize(disk.used)}
+                          </Text>
+                          <Text className="health-monitoring-disk-available-value" size="xs" c="dimmed">
+                            {formatFileSize(disk.available)} {t("widget.healthMonitoring.popover.available")}
                           </Text>
                         </Group>
-                      </Group>
-                      <Progress.Root className="health-monitoring-disk-use" radius={board.itemRadius} size="lg">
-                        <Progress.Section
-                          value={disk.percentage}
-                          color={progressColor(disk.percentage)}
-                          className="health-monitoring-disk-use-percentage"
-                        />
-                        <Progress.Section
-                          className="health-monitoring-disk-available-percentage"
-                          value={100 - disk.percentage}
-                          color="default"
-                        />
-                      </Progress.Root>
-                      <Group justify="space-between" gap={8} wrap="nowrap">
-                        <Text className="health-monitoring-disk-use-value" size="xs" c="dimmed">
-                          {t("widget.healthMonitoring.popover.used")} {formatFileSize(disk.used)}
-                        </Text>
-                        <Text className="health-monitoring-disk-available-value" size="xs" c="dimmed">
-                          {formatFileSize(disk.available)} {t("widget.healthMonitoring.popover.available")}
-                        </Text>
-                      </Group>
-                    </Stack>
-                  </Card>
-                );
-              })}
-          </Stack>
-        );
-      })}
-    </Stack>
+                      </Stack>
+                    </Card>
+                  );
+                })}
+            </Stack>
+          );
+        })}
+      </Stack>
+    </ScrollArea>
   );
 };
 
+type HealthInfo = RouterOutputs["widget"]["healthMonitoring"]["getSystemHealthStatus"][number]["healthInfo"];
+
+const SystemInformationList = ({
+  healthInfo,
+  memoryUsage,
+  t,
+  compact = false,
+}: {
+  healthInfo: HealthInfo;
+  memoryUsage: ReturnType<typeof formatMemoryUsage>;
+  t: TranslationFunction;
+  compact?: boolean;
+}) => (
+  <List
+    className="health-monitoring-information-list"
+    center
+    spacing={compact ? 4 : "xs"}
+    size={compact ? "sm" : undefined}
+  >
+    <List.Item className="health-monitoring-information-processor" icon={<IconCpu2 size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.processor", { cpuModelName: healthInfo.cpuModelName })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.memory", { memory: memoryUsage.memTotal.GB })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.memoryAvailable", {
+        memoryAvailable: memoryUsage.memFree.GB,
+        percent: String(memoryUsage.memFree.percent),
+      })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-version" icon={<IconVersions size={compact ? 18 : 30} />}>
+      {t("widget.healthMonitoring.popover.version", { version: healthInfo.version })}
+    </List.Item>
+    <List.Item className="health-monitoring-information-uptime" icon={<IconClock size={compact ? 18 : 30} />}>
+      {formatUptime(healthInfo.uptime, t)}
+    </List.Item>
+    {healthInfo.loadAverage && (
+      <List.Item className="health-monitoring-information-load-average" icon={<IconCpu size={compact ? 18 : 30} />}>
+        {t("widget.healthMonitoring.popover.loadAverage")}: {healthInfo.loadAverage["1min"]}% /{" "}
+        {healthInfo.loadAverage["5min"]}% / {healthInfo.loadAverage["15min"]}%
+      </List.Item>
+    )}
+  </List>
+);
+
 export const formatUptime = (uptimeInSeconds: number, t: TranslationFunction) => {
   const uptimeDuration = dayjs.duration(uptimeInSeconds, "seconds");
   const months = uptimeDuration.months();
diff --git a/packages/widgets/src/iframe/component.spec.ts b/packages/widgets/src/iframe/component.spec.ts
new file mode 100644
index 000000000..97f9abf45
--- /dev/null
+++ b/packages/widgets/src/iframe/component.spec.ts
@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+
+import { getAllowedPermissions, getSandboxFlags, isSupportedProtocol } from "./component";
+
+const permissions = {
+  allowFullScreen: true,
+  allowPayment: false,
+  allowAutoPlay: true,
+  allowMicrophone: false,
+  allowCamera: false,
+  allowGeolocation: false,
+  allowModals: true,
+};
+
+describe("iframe policy", () => {
+  it("keeps sandbox-only modal permission out of Permissions Policy", () => {
+    expect(getAllowedPermissions(permissions)).toBe("fullscreen *; autoplay *");
+    expect(getSandboxFlags(permissions)).toContain("allow-modals");
+  });
+
+  it("accepts only HTTP protocols", () => {
+    expect(isSupportedProtocol("https://example.com")).toBe(true);
+    expect(isSupportedProtocol("javascript:alert(1)")).toBe(false);
+    expect(isSupportedProtocol("not a url")).toBe(false);
+  });
+});
diff --git a/packages/widgets/src/iframe/component.tsx b/packages/widgets/src/iframe/component.tsx
index ac794a631..068b5dc45 100644
--- a/packages/widgets/src/iframe/component.tsx
+++ b/packages/widgets/src/iframe/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Box, Stack, Text, Title } from "@mantine/core";
+import { Anchor, Box, Group, Stack, Text, Title } from "@mantine/core";
 import { IconBrowserOff, IconProtocol } from "@tabler/icons-react";
 
 import { objectEntries } from "@homarr/common";
@@ -9,7 +9,7 @@ import { useI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.css";
 
-export default function IFrameWidget({ options, isEditMode }: WidgetComponentProps<"iframe">) {
+export default function IFrameWidget({ options, isEditMode, displayMode }: WidgetComponentProps<"iframe">) {
   const t = useI18n();
   const { embedUrl, allowScrolling, ...permissions } = options;
   const allowedPermissions = getAllowedPermissions(permissions);
@@ -21,25 +21,37 @@ export default function IFrameWidget({ options, isEditMode }: WidgetComponentPro
   }
 
   return (
-    <Box h="100%" w="100%">
-      <iframe
-        style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}
-        className={classes.iframe}
-        src={embedUrl}
-        title="widget iframe"
-        allow={allowedPermissions}
-        scrolling={allowScrolling ? "yes" : "no"}
-        sandbox={sandboxFlags.join(" ")}
-      >
-        <Text>{t("widget.iframe.error.noBrowerSupport")}</Text>
-      </iframe>
-    </Box>
+    <Stack h="100%" w="100%" gap={0}>
+      {displayMode === "advanced" && (
+        <Group key="advanced-header" px="xs" py={4} wrap="nowrap" justify="space-between">
+          <Text size="xs" c="dimmed" truncate>
+            {getFrameTitle(embedUrl)}
+          </Text>
+          <Anchor href={embedUrl} target="_blank" rel="noreferrer" size="xs">
+            {embedUrl}
+          </Anchor>
+        </Group>
+      )}
+      <Box key="frame" style={{ flex: 1, minHeight: 0 }}>
+        <iframe
+          style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}
+          className={classes.iframe}
+          src={embedUrl}
+          title={getFrameTitle(embedUrl)}
+          allow={allowedPermissions}
+          scrolling={allowScrolling ? "yes" : "no"}
+          sandbox={sandboxFlags.join(" ")}
+        >
+          <Text>{t("widget.iframe.error.noBrowerSupport")}</Text>
+        </iframe>
+      </Box>
+    </Stack>
   );
 }
 
 const supportedProtocols = ["http", "https"];
 
-const isSupportedProtocol = (url: string) => {
+export const isSupportedProtocol = (url: string) => {
   try {
     const parsedUrl = new URL(url);
     return supportedProtocols.map((protocol) => `${protocol}:`).includes(`${parsedUrl.protocol}`);
@@ -74,19 +86,22 @@ const UnsupportedProtocol = () => {
   );
 };
 
-const getAllowedPermissions = (
+export const getAllowedPermissions = (
   permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">,
 ) => {
   return (
     objectEntries(permissions)
-      .filter(([_key, value]) => value)
-      // * means it applies to all origins
-      .map(([key]) => `${permissionMapping[key]} *`)
+      // * means it applies to all origins. Sandbox-only flags such as
+      // allow-modals intentionally have no Permissions Policy mapping.
+      .flatMap(([key, value]) => {
+        const permission = permissionMapping[key];
+        return value && permission ? [`${permission} *`] : [];
+      })
       .join("; ")
   );
 };
 
-const getSandboxFlags = (
+export const getSandboxFlags = (
   permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">,
 ) => {
   const baseSandbox = [
@@ -112,12 +127,21 @@ const getSandboxFlags = (
   return baseSandbox;
 };
 
-const permissionMapping = {
+const permissionMapping: Partial<
+  Record<keyof Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">, string>
+> = {
   allowAutoPlay: "autoplay",
   allowCamera: "camera",
   allowFullScreen: "fullscreen",
   allowGeolocation: "geolocation",
   allowMicrophone: "microphone",
   allowPayment: "payment",
-  allowModals: "allow-modals",
-} satisfies Record<keyof Omit<WidgetComponentProps<"iframe">["options"], "embedUrl" | "allowScrolling">, string>;
+};
+
+const getFrameTitle = (url: string) => {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return "iframe";
+  }
+};
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index 49bb4ceec..f219e9eb1 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -2,11 +2,19 @@
 
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useMemo, useState } from "react";
-import { Box, Center, Group, Image, Stack, Text } from "@mantine/core";
-import { IconAlertCircle, IconCalendar } from "@tabler/icons-react";
+import { ActionIcon, Box, Center, Group, Image, ScrollArea, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useReducedMotion } from "@mantine/hooks";
+import {
+  IconAlertCircle,
+  IconCalendar,
+  IconChevronLeft,
+  IconChevronRight,
+  IconPlayerPause,
+  IconPlayerPlay,
+} from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useI18n } from "@homarr/translation/client";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
@@ -16,8 +24,16 @@ import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 export default function ImmichAlbumCarouselWidget({
   integrationIds,
   options,
+  displayMode = "compact",
+  widgetStateRef,
 }: WidgetComponentProps<"immich-albumCarousel">) {
-  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
+  const persistedState = widgetStateRef?.current?.immichAlbumCarousel as
+    | { currentPhotoIndex?: number; paused?: boolean }
+    | undefined;
+  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(() =>
+    typeof persistedState?.currentPhotoIndex === "number" ? persistedState.currentPhotoIndex : 0,
+  );
+  const [paused, setPaused] = useState(persistedState?.paused === true);
 
   const { data: album } = clientApi.widget.immich.getAlbum.useQuery(
     {
@@ -33,8 +49,42 @@ export default function ImmichAlbumCarouselWidget({
   }, [album?.assets, options.randomizePhotos]);
 
   useEffect(() => {
-    setCurrentPhotoIndex(0);
-  }, [photoAssets]);
+    if (photoAssets.length === 0) return;
+    setCurrentPhotoIndex((current) => Math.min(current, photoAssets.length - 1));
+  }, [photoAssets.length]);
+
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      immichAlbumCarousel: { currentPhotoIndex, paused },
+    };
+  }, [currentPhotoIndex, paused, widgetStateRef]);
+
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    const clearActions = () => {
+      if (!widgetStateRef.current) return;
+      delete widgetStateRef.current.previousPhoto;
+      delete widgetStateRef.current.nextPhoto;
+      delete widgetStateRef.current.toggleSlideshow;
+    };
+    if (photoAssets.length <= 1) {
+      clearActions();
+      return;
+    }
+    const previousPhoto = () =>
+      setCurrentPhotoIndex((current) => (current - 1 + photoAssets.length) % photoAssets.length);
+    const nextPhoto = () => setCurrentPhotoIndex((current) => (current + 1) % photoAssets.length);
+    const toggleSlideshow = () => setPaused((value) => !value);
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      previousPhoto,
+      nextPhoto,
+      toggleSlideshow,
+    };
+    return clearActions;
+  }, [photoAssets.length, widgetStateRef]);
 
   if (!album) return <WidgetEmptyState />;
 
@@ -53,6 +103,10 @@ export default function ImmichAlbumCarouselWidget({
       setCurrentIndex={setCurrentPhotoIndex}
       rotationInterval={options.rotationIntervalSeconds}
       showPhotoInfo={options.showPhotoInfo}
+      albumName={album.albumName}
+      advanced={displayMode === "advanced"}
+      paused={paused}
+      setPaused={setPaused}
     />
   );
 }
@@ -73,7 +127,6 @@ function shuffle<T>(items: T[]) {
 interface CarouselProps {
   assets: {
     id: string;
-    originalPath: string;
     fileModifiedAt: string;
     publicLink: string;
   }[];
@@ -81,36 +134,126 @@ interface CarouselProps {
   setCurrentIndex: Dispatch<SetStateAction<number>>;
   rotationInterval: number;
   showPhotoInfo: boolean;
+  albumName: string;
+  advanced: boolean;
+  paused: boolean;
+  setPaused: Dispatch<SetStateAction<boolean>>;
 }
 
-function Carousel({ assets, currentIndex, setCurrentIndex, rotationInterval, showPhotoInfo }: CarouselProps) {
+function Carousel({
+  assets,
+  currentIndex,
+  setCurrentIndex,
+  rotationInterval,
+  showPhotoInfo,
+  albumName,
+  advanced,
+  paused,
+  setPaused,
+}: CarouselProps) {
+  const t = useScopedI18n("widget.immich-albumCarousel");
+  const reduceMotion = useReducedMotion();
+
   useEffect(() => {
+    if (paused || reduceMotion || assets.length <= 1) return;
     const interval = setInterval(() => {
       setCurrentIndex((prev) => (prev + 1) % assets.length);
     }, rotationInterval * 1000);
 
     return () => clearInterval(interval);
-  }, [assets.length, rotationInterval, setCurrentIndex]);
+  }, [assets.length, paused, reduceMotion, rotationInterval, setCurrentIndex]);
 
+  const safeCurrentIndex = Math.min(currentIndex, assets.length - 1);
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const currentAsset = assets[currentIndex]!;
+  const currentAsset = assets[safeCurrentIndex]!;
+
+  const move = (offset: number) => setCurrentIndex((current) => (current + offset + assets.length) % assets.length);
 
   return (
-    <Box w="100%" h="100%" className={classes.carouselContainer}>
-      <Image src={currentAsset.publicLink} alt="Album photo" className={classes.carouselImage} />
+    <Stack w="100%" h="100%" gap={0}>
+      <Box w="100%" style={{ flex: 1, minHeight: 0 }} className={classes.carouselContainer}>
+        <Image src={currentAsset.publicLink} alt={t("albumPhoto")} className={classes.carouselImage} />
 
-      {showPhotoInfo && (
-        <Stack gap="xs" className={classes.photoInfo} p="md">
-          <Group gap="xs">
-            <IconCalendar size={16} />
-            <Text size="xs">{new Date(currentAsset.fileModifiedAt).toLocaleDateString()}</Text>
+        {advanced && (
+          <>
+            <ActionIcon
+              aria-label={t("actions.previousPhoto")}
+              variant="filled"
+              radius="xl"
+              pos="absolute"
+              left="md"
+              top="50%"
+              onClick={() => move(-1)}
+            >
+              <IconChevronLeft size={18} />
+            </ActionIcon>
+            <Group pos="absolute" right="md" top="md" gap="xs">
+              <ActionIcon
+                aria-label={paused ? t("actions.resumeSlideshow") : t("actions.pauseSlideshow")}
+                variant="filled"
+                radius="xl"
+                onClick={() => setPaused((value) => !value)}
+              >
+                {paused ? <IconPlayerPlay size={16} /> : <IconPlayerPause size={16} />}
+              </ActionIcon>
+            </Group>
+            <ActionIcon
+              aria-label={t("actions.nextPhoto")}
+              variant="filled"
+              radius="xl"
+              pos="absolute"
+              right="md"
+              top="50%"
+              onClick={() => move(1)}
+            >
+              <IconChevronRight size={18} />
+            </ActionIcon>
+          </>
+        )}
+
+        {(showPhotoInfo || advanced) && (
+          <Stack gap="xs" className={classes.photoInfo} p="md">
+            {albumName && (
+              <Text size="xs" fw={600}>
+                {albumName}
+              </Text>
+            )}
+            <Group gap="xs">
+              <IconCalendar size={16} />
+              <Text size="xs">{new Date(currentAsset.fileModifiedAt).toLocaleDateString()}</Text>
+            </Group>
+            <Text size="xs" c="dimmed">
+              {safeCurrentIndex + 1} / {assets.length}
+            </Text>
+          </Stack>
+        )}
+      </Box>
+      {advanced && (
+        <ScrollArea type="never" scrollbarSize={0} px="xs" py={6}>
+          <Group gap={6} wrap="nowrap">
+            {assets.slice(0, 24).map((asset, index) => (
+              <UnstyledButton
+                key={asset.id}
+                onClick={() => setCurrentIndex(index)}
+                aria-label={t("actions.photo", { number: index + 1 })}
+                aria-pressed={index === safeCurrentIndex}
+                aria-current={index === safeCurrentIndex ? "true" : undefined}
+              >
+                <Image
+                  src={asset.publicLink}
+                  alt=""
+                  w={64}
+                  h={44}
+                  radius="sm"
+                  fit="cover"
+                  style={{ opacity: index === currentIndex ? 1 : 0.55 }}
+                />
+              </UnstyledButton>
+            ))}
           </Group>
-          <Text size="xs" c="dimmed">
-            {currentIndex + 1} / {assets.length}
-          </Text>
-        </Stack>
+        </ScrollArea>
       )}
-    </Box>
+    </Stack>
   );
 }
 
diff --git a/packages/widgets/src/immich/album-carousel/index.ts b/packages/widgets/src/immich/album-carousel/index.ts
index 8c4223ef3..ef07d245e 100644
--- a/packages/widgets/src/immich/album-carousel/index.ts
+++ b/packages/widgets/src/immich/album-carousel/index.ts
@@ -1,4 +1,4 @@
-import { IconPhoto } from "@tabler/icons-react";
+import { IconChevronLeft, IconChevronRight, IconPhoto, IconPlayerPause } from "@tabler/icons-react";
 import z from "zod";
 
 import { clientApi } from "@homarr/api/client";
@@ -14,6 +14,37 @@ export const { definition, componentLoader } = createWidgetDefinition("immich-al
   refetchInterval: null,
   supportedIntegrations: ["immich"],
   integrationsRequired: true,
+  maxIntegrations: 1,
+  contextActions({ widgetStateRef }) {
+    const call = (key: string) => () => {
+      const action = widgetStateRef.current?.[key];
+      if (typeof action === "function") action();
+    };
+    const disabled = (key: string) => typeof widgetStateRef.current?.[key] !== "function";
+    return [
+      {
+        key: "previousPhoto",
+        label: (t) => t("widget.immich-albumCarousel.actions.previousPhoto"),
+        icon: IconChevronLeft,
+        disabled: disabled("previousPhoto"),
+        onClick: call("previousPhoto"),
+      },
+      {
+        key: "nextPhoto",
+        label: (t) => t("widget.immich-albumCarousel.actions.nextPhoto"),
+        icon: IconChevronRight,
+        disabled: disabled("nextPhoto"),
+        onClick: call("nextPhoto"),
+      },
+      {
+        key: "toggleSlideshow",
+        label: (t) => t("widget.immich-albumCarousel.actions.toggleSlideshow"),
+        icon: IconPlayerPause,
+        disabled: disabled("toggleSlideshow"),
+        onClick: call("toggleSlideshow"),
+      },
+    ];
+  },
   createOptions() {
     return optionsBuilder.from((factory) => ({
       albumId: factory.integrationSelect({
diff --git a/packages/widgets/src/immich/server-stats/component.tsx b/packages/widgets/src/immich/server-stats/component.tsx
index 3b82499f7..308e803a7 100644
--- a/packages/widgets/src/immich/server-stats/component.tsx
+++ b/packages/widgets/src/immich/server-stats/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Group, Stack, Text } from "@mantine/core";
+import { Group, Progress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconDatabase, IconPhoto, IconUsers, IconVideo } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -15,16 +15,22 @@ import classes from "./component.module.css";
 export default function ImmichServerStatsWidget({
   integrationIds,
   options,
+  displayMode = "compact",
+  width,
 }: WidgetComponentProps<"immich-serverStats">) {
   const t = useI18n();
   const { data: stats } = clientApi.widget.immich.getServerStats.useQuery({
     integrationId: integrationIds[0] ?? "",
   });
+  const { data: albums = [] } = clientApi.widget.immich.getAlbums.useQuery(
+    { integrationId: integrationIds[0] ?? "" },
+    { enabled: displayMode === "advanced" && integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
+  );
 
   if (!stats) return <WidgetEmptyState />;
 
-  return (
-    <Stack gap="md" h="100%" p="md">
+  const statsContent = (
+    <SimpleGrid cols={displayMode === "advanced" ? 4 : width >= 320 ? 2 : 1} spacing="sm">
       {options.showUsers && (
         <StatItem icon={<IconUsers size={20} />} label={t("widget.immich-serverStats.users")} value={stats.userCount} />
       )}
@@ -49,6 +55,39 @@ export default function ImmichServerStatsWidget({
           value={formatBytes(stats.totalLibraryUsageInBytes)}
         />
       )}
+    </SimpleGrid>
+  );
+
+  if (displayMode === "compact") {
+    return (
+      <Stack gap="md" h="100%" p="md" justify="center">
+        {statsContent}
+      </Stack>
+    );
+  }
+
+  const sortedAlbums = [...albums].toSorted((left, right) => right.assetCount - left.assetCount);
+  const maxAssets = sortedAlbums[0]?.assetCount ?? 1;
+  return (
+    <Stack gap="lg" h="100%" p="lg">
+      {statsContent}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="xs">
+          {sortedAlbums.map((album) => (
+            <Stack key={album.id} gap={4} p="xs">
+              <Group justify="space-between" wrap="nowrap">
+                <Text size="sm" fw={600} truncate>
+                  {album.albumName}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  {album.assetCount.toLocaleString()}
+                </Text>
+              </Group>
+              <Progress value={(album.assetCount / Math.max(maxAssets, 1)) * 100} size="sm" />
+            </Stack>
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
     </Stack>
   );
 }
diff --git a/packages/widgets/src/immich/server-stats/index.ts b/packages/widgets/src/immich/server-stats/index.ts
index ed4e05a20..da9b6e1f2 100644
--- a/packages/widgets/src/immich/server-stats/index.ts
+++ b/packages/widgets/src/immich/server-stats/index.ts
@@ -9,6 +9,7 @@ export const { definition, componentLoader } = createWidgetDefinition("immich-se
   refetchInterval: null,
   supportedIntegrations: ["immich"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showUsers: factory.switch({
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index 061fc4b2d..f0e2e1bcf 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -71,6 +71,7 @@ export type {
   WidgetContextActionProps,
   WidgetOptionsSettings,
 } from "./definition";
+export { getWidgetQueryKeys } from "./definition";
 export type { WidgetComponentProps };
 export type { WidgetOptionDefinition, WidgetOptionType } from "./options";
 
diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx
index 4e3fb7c7e..df0298b82 100644
--- a/packages/widgets/src/indexer-manager/component.tsx
+++ b/packages/widgets/src/indexer-manager/component.tsx
@@ -1,6 +1,7 @@
 "use client";
 
-import { ActionIcon, Anchor, Button, Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
+import { useEffect, useMemo } from "react";
+import { ActionIcon, Anchor, Badge, Button, Card, Flex, Group, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
@@ -16,6 +17,9 @@ export default function IndexerManagerWidget({
   integrationIds,
   width,
   height,
+  displayMode,
+  isEditMode,
+  widgetStateRef,
 }: WidgetComponentProps<"indexerManager">) {
   const t = useI18n();
   const { data: indexersData = [] } = clientApi.widget.indexerManager.getIndexersStatus.useQuery({ integrationIds });
@@ -25,8 +29,22 @@ export default function IndexerManagerWidget({
     onSettled: () => void utils.widget.indexerManager.getIndexersStatus.invalidate(),
   });
   const board = useRequiredBoard();
-  const hasSmallWidth = width < 256;
-  const hasSmallHeight = height < 256;
+  const isAdvanced = displayMode === "advanced";
+  const hasSmallWidth = !isAdvanced && width < 256;
+  const hasSmallHeight = !isAdvanced && height < 256;
+  const allIndexers = useMemo(() => indexersData.flatMap((entry) => entry.indexers), [indexersData]);
+  const unavailableCount = allIndexers.filter((indexer) => !indexer.status || !indexer.enabled).length;
+
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      testAllIndexers: () => testAll({ integrationIds }),
+    };
+    return () => {
+      if (widgetStateRef.current) delete widgetStateRef.current.testAllIndexers;
+    };
+  }, [integrationIds, testAll, widgetStateRef]);
 
   return (
     <Flex className="indexer-manager-container" h="100%" direction="column" gap="sm" p="sm" align="center">
@@ -39,6 +57,18 @@ export default function IndexerManagerWidget({
         <Text size={hasSmallWidth ? "xs" : "md"} fw="bold">
           {t("widget.indexerManager.title")}
         </Text>
+        {isAdvanced && (
+          <Group gap={4} wrap="nowrap">
+            <Badge size="xs" color="green" variant="light">
+              {allIndexers.length - unavailableCount}
+            </Badge>
+            {unavailableCount > 0 && (
+              <Badge size="xs" color="red" variant="light">
+                {unavailableCount}
+              </Badge>
+            )}
+          </Group>
+        )}
         {hasSmallHeight && (
           <ActionIcon
             className="indexer-manager-test-action-icon"
@@ -46,6 +76,7 @@ export default function IndexerManagerWidget({
             radius={board.itemRadius}
             variant="light"
             loading={isPending}
+            disabled={isEditMode}
             loaderProps={{ type: "dots" }}
             onClick={() => {
               testAll({ integrationIds });
@@ -63,8 +94,22 @@ export default function IndexerManagerWidget({
         flex={1}
       >
         <ScrollArea className="indexer-manager-list-scroll-area" h="100%" scrollbars="y">
-          {indexersData.map(({ integrationId, indexers }) => (
+          {indexersData.map(({ integrationId, integrationName, indexers, error }) => (
             <Stack gap={4} className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
+              {(isAdvanced || indexersData.length > 1) && (
+                <Group justify="space-between" wrap="nowrap" py={4}>
+                  <Text size="xs" fw={600} truncate="end">
+                    {integrationName}
+                  </Text>
+                  {error && (
+                    <Tooltip label={error} multiline maw={360}>
+                      <Badge size="xs" color="red" variant="light">
+                        {t("common.error")}
+                      </Badge>
+                    </Tooltip>
+                  )}
+                </Group>
+              )}
               {indexers.map((indexer) => (
                 <Group
                   className={`indexer-manager-line indexer-manager-${indexer.name}`}
@@ -82,6 +127,11 @@ export default function IndexerManagerWidget({
                       {indexer.name}
                     </Text>
                   </Anchor>
+                  {isAdvanced && (
+                    <Text size="xs" c="dimmed" truncate="end" style={{ flex: 1 }}>
+                      {indexer.url}
+                    </Text>
+                  )}
                   {indexer.status === false || indexer.enabled === false ? (
                     <IconCircleX
                       className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
@@ -110,6 +160,7 @@ export default function IndexerManagerWidget({
           variant="light"
           leftSection={<IconTestPipe size={"1rem"} />}
           loading={isPending}
+          disabled={isEditMode}
           loaderProps={{ type: "dots" }}
           onClick={() => {
             testAll({ integrationIds });
diff --git a/packages/widgets/src/indexer-manager/index.ts b/packages/widgets/src/indexer-manager/index.ts
index e515cd697..a7fc8a0cd 100644
--- a/packages/widgets/src/indexer-manager/index.ts
+++ b/packages/widgets/src/indexer-manager/index.ts
@@ -1,4 +1,4 @@
-import { IconReportSearch, IconServerOff } from "@tabler/icons-react";
+import { IconReportSearch, IconServerOff, IconTestPipe } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
@@ -7,6 +7,22 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
   icon: IconReportSearch,
+  queryKey: [["widget", "indexerManager"]],
+  contextActions: ({ widgetStateRef, context }) => [
+    {
+      key: "test-all-indexers",
+      label: (t) => t("widget.indexerManager.testAll"),
+      icon: IconTestPipe,
+      disabled:
+        context.isEditMode ||
+        !context.canInteractWithSelectedIntegrations ||
+        typeof widgetStateRef.current?.testAllIndexers !== "function",
+      onClick: () => {
+        const action = widgetStateRef.current?.testAllIndexers;
+        if (typeof action === "function") action();
+      },
+    },
+  ],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/media-missing/component.tsx b/packages/widgets/src/media-missing/component.tsx
index 69c1edf21..b5bb9d320 100644
--- a/packages/widgets/src/media-missing/component.tsx
+++ b/packages/widgets/src/media-missing/component.tsx
@@ -1,7 +1,23 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { Badge, Box, Center, Group, Image, Paper, RingProgress, ScrollArea, SimpleGrid, Stack, Tabs, Text, ThemeIcon } from "@mantine/core";
+import { useEffect, useState } from "react";
+import {
+  Badge,
+  Box,
+  Center,
+  Group,
+  Image,
+  Paper,
+  RingProgress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Tabs,
+  Text,
+  ThemeIcon,
+  Tooltip,
+} from "@mantine/core";
 import { IconDownload, IconMovie, IconQuestionMark, IconVideo } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -12,14 +28,29 @@ import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
+import type { MediaMissingTab } from "./tabs";
+import { resolveMediaMissingTab } from "./tabs";
 
-export default function MediaMissingWidget({ integrationIds, options, width, height }: WidgetComponentProps<"mediaMissing">) {
+export default function MediaMissingWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"mediaMissing">) {
   const t = useScopedI18n("widget.mediaMissing");
-  const pageSize = Number(options.pageSize);
+  const isAdvanced = displayMode === "advanced";
+  const pageSize = isAdvanced ? Math.max(Number(options.pageSize), 50) : Number(options.pageSize);
   const { data } = clientApi.widget.mediaOrganizer.getData.useQuery(
     { integrationIds, pageSize },
     { staleTime: 60 * 1000, refetchOnWindowFocus: false, refetchOnReconnect: false },
   );
+  const [selectedTab, setSelectedTab] = useState<MediaMissingTab>(options.showMissing ? "missing" : "queued");
+  const activeTab = resolveMediaMissingTab(selectedTab, options.showMissing, options.showQueued);
+
+  useEffect(() => {
+    if (activeTab !== null && activeTab !== selectedTab) setSelectedTab(activeTab);
+  }, [activeTab, selectedTab]);
 
   if (!data) return <WidgetEmptyState />;
   if (data.length === 0) throw new NoIntegrationDataError();
@@ -32,25 +63,26 @@ export default function MediaMissingWidget({ integrationIds, options, width, hei
       </Center>
     );
 
-  const missing = data.flatMap((entry) =>
-    entry.missing.map((item) => ({ item, integrationId: entry.integrationId })),
-  );
-  const queued = data.flatMap((entry) =>
-    entry.queued.map((item) => ({ item, integrationId: entry.integrationId })),
-  );
+  const missing = data.flatMap((entry) => entry.missing.map((item) => ({ item, integrationId: entry.integrationId })));
+  const queued = data.flatMap((entry) => entry.queued.map((item) => ({ item, integrationId: entry.integrationId })));
   const missingCount = data.reduce((sum, entry) => sum + entry.missingCount, 0);
   const queuedCount = data.reduce((sum, entry) => sum + entry.queuedCount, 0);
+  const failedIntegrations = data.filter((entry): entry is typeof entry & { error: string } => Boolean(entry.error));
 
-  const isThin = width > 0 && width < 160;
-  const isShort = height > 0 && height < 180;
+  const enabledPanelCount = Number(options.showMissing) + Number(options.showQueued);
+  const panelWidth = isAdvanced && enabledPanelCount > 1 ? width / enabledPanelCount : width;
+  const isThin = !isAdvanced && panelWidth > 0 && panelWidth < 160;
+  const isShort = !isAdvanced && height > 0 && height < 180;
   const targetCardWidth = isShort ? 130 : 200;
-  const columns = width > 0 ? Math.max(1, Math.min(Math.floor(width / targetCardWidth), 4)) : 1;
-  const density: Density = isThin ? "thin" : width > 0 && width / columns < 180 ? "compact" : "comfortable";
+  const columns = panelWidth > 0 ? Math.max(1, Math.min(Math.floor(panelWidth / targetCardWidth), 4)) : 1;
+  const density: Density = isThin ? "thin" : panelWidth > 0 && panelWidth / columns < 180 ? "compact" : "comfortable";
 
-  const tabLabel = (label: string, shown: number, total: number) =>
-    isThin ? total : `${label} (${shown}/${total})`;
+  const tabLabel = (label: string, shown: number, total: number) => (isThin ? total : `${label} (${shown}/${total})`);
 
-  const renderPanel = (entries: { item: MissingMediaItem | QueuedMediaItem; integrationId: string }[], emptyLabel: string) => (
+  const renderPanel = (
+    entries: { item: MissingMediaItem | QueuedMediaItem; integrationId: string }[],
+    emptyLabel: string,
+  ) => (
     <ScrollArea h="100%" scrollbarSize={4}>
       <Box p="xs">
         {entries.length === 0 ? (
@@ -68,12 +100,60 @@ export default function MediaMissingWidget({ integrationIds, options, width, hei
     </ScrollArea>
   );
 
+  const partialFailures = failedIntegrations.length > 0 && (
+    <Group gap={4} p={4} wrap="wrap">
+      {failedIntegrations.map((entry) => (
+        <Tooltip key={entry.integrationId} label={entry.error} multiline maw={360}>
+          <Badge size="xs" color="red" variant="light">
+            {entry.integrationName}
+          </Badge>
+        </Tooltip>
+      ))}
+    </Group>
+  );
+
+  if (isAdvanced) {
+    return (
+      <Stack h="100%" gap={0}>
+        {partialFailures}
+        <SimpleGrid cols={enabledPanelCount} spacing="sm" p="sm" style={{ flex: 1, minHeight: 0 }}>
+          {options.showMissing && (
+            <Paper withBorder radius="sm" style={{ minHeight: 0, overflow: "hidden" }}>
+              <Group p="xs" gap="xs">
+                <IconQuestionMark size={16} />
+                <Text size="sm" fw={600}>
+                  {tabLabel(t("tab.missing"), missing.length, missingCount)}
+                </Text>
+              </Group>
+              <Box h="calc(100% - 40px)">{renderPanel(missing, t("empty.missing"))}</Box>
+            </Paper>
+          )}
+          {options.showQueued && (
+            <Paper withBorder radius="sm" style={{ minHeight: 0, overflow: "hidden" }}>
+              <Group p="xs" gap="xs">
+                <IconDownload size={16} />
+                <Text size="sm" fw={600}>
+                  {tabLabel(t("tab.queued"), queued.length, queuedCount)}
+                </Text>
+              </Group>
+              <Box h="calc(100% - 40px)">{renderPanel(queued, t("empty.queued"))}</Box>
+            </Paper>
+          )}
+        </SimpleGrid>
+      </Stack>
+    );
+  }
+
   return (
     <Tabs
-      defaultValue={options.showMissing ? "missing" : "queued"}
+      value={activeTab}
+      onChange={(value) => {
+        if (value === "missing" || value === "queued") setSelectedTab(value);
+      }}
       h="100%"
       style={{ display: "flex", flexDirection: "column" }}
     >
+      {partialFailures}
       <Tabs.List grow>
         {options.showMissing && (
           <Tabs.Tab value="missing" px={isThin ? 6 : undefined} leftSection={<IconQuestionMark size={14} />}>
@@ -116,7 +196,14 @@ const Poster = ({ src, type, density }: { src?: string | null; type: "movie" | "
   }
 
   return (
-    <ThemeIcon className={classes.poster} h={size} w={w} radius="sm" variant="light" color={type === "movie" ? "yellow" : "blue"}>
+    <ThemeIcon
+      className={classes.poster}
+      h={size}
+      w={w}
+      radius="sm"
+      variant="light"
+      color={type === "movie" ? "yellow" : "blue"}
+    >
       {type === "movie" ? <IconMovie size={size * 0.5} /> : <IconVideo size={size * 0.5} />}
     </ThemeIcon>
   );
@@ -183,8 +270,25 @@ const ProgressRing = ({ percent, density }: { percent: number; density: Density
   );
 };
 
-const CardShell = ({ item, density, children }: { item: MissingMediaItem | QueuedMediaItem; density: Density; children: ReactNode }) => (
-  <Paper className={classes.card} component="a" href={item.link} target="_blank" rel="noreferrer" radius="sm" p="xs" h={CARD_HEIGHT[density]}>
+const CardShell = ({
+  item,
+  density,
+  children,
+}: {
+  item: MissingMediaItem | QueuedMediaItem;
+  density: Density;
+  children: ReactNode;
+}) => (
+  <Paper
+    className={classes.card}
+    component="a"
+    href={item.link}
+    target="_blank"
+    rel="noreferrer"
+    radius="sm"
+    p="xs"
+    h={CARD_HEIGHT[density]}
+  >
     {item.imageUrl && (
       <span className={classes.backdrop} style={{ backgroundImage: `url("${item.imageUrl}")` }} aria-hidden />
     )}
diff --git a/packages/widgets/src/media-missing/index.ts b/packages/widgets/src/media-missing/index.ts
index eaa44be6d..fd325f801 100644
--- a/packages/widgets/src/media-missing/index.ts
+++ b/packages/widgets/src/media-missing/index.ts
@@ -9,6 +9,7 @@ const pageSizeOptions = ["10", "20", "30", "50"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaMissing", {
   icon: IconMovie,
+  queryKey: [["widget", "mediaOrganizer"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showMissing: factory.switch({ defaultValue: true }),
diff --git a/packages/widgets/src/media-missing/tabs.spec.ts b/packages/widgets/src/media-missing/tabs.spec.ts
new file mode 100644
index 000000000..4f3af6af1
--- /dev/null
+++ b/packages/widgets/src/media-missing/tabs.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+
+import { resolveMediaMissingTab } from "./tabs";
+
+describe("resolveMediaMissingTab", () => {
+  test("preserves the selected tab while it remains enabled", () => {
+    expect(resolveMediaMissingTab("queued", true, true)).toBe("queued");
+  });
+
+  test("falls back when the selected tab is disabled", () => {
+    expect(resolveMediaMissingTab("missing", false, true)).toBe("queued");
+    expect(resolveMediaMissingTab("queued", true, false)).toBe("missing");
+  });
+
+  test("returns no tab when both panels are disabled", () => {
+    expect(resolveMediaMissingTab("missing", false, false)).toBeNull();
+  });
+});
diff --git a/packages/widgets/src/media-missing/tabs.ts b/packages/widgets/src/media-missing/tabs.ts
new file mode 100644
index 000000000..8877dc15f
--- /dev/null
+++ b/packages/widgets/src/media-missing/tabs.ts
@@ -0,0 +1,13 @@
+export type MediaMissingTab = "missing" | "queued";
+
+export const resolveMediaMissingTab = (
+  current: MediaMissingTab,
+  showMissing: boolean,
+  showQueued: boolean,
+): MediaMissingTab | null => {
+  if (current === "missing" && showMissing) return current;
+  if (current === "queued" && showQueued) return current;
+  if (showMissing) return "missing";
+  if (showQueued) return "queued";
+  return null;
+};
diff --git a/packages/widgets/src/media-releases/component.tsx b/packages/widgets/src/media-releases/component.tsx
index 05ba18fe5..f768f7ed4 100644
--- a/packages/widgets/src/media-releases/component.tsx
+++ b/packages/widgets/src/media-releases/component.tsx
@@ -1,7 +1,20 @@
 "use client";
 
 import { Fragment } from "react";
-import { Avatar, Badge, Box, Divider, Group, Image, Stack, Text, TooltipFloating, UnstyledButton } from "@mantine/core";
+import {
+  Avatar,
+  Badge,
+  Box,
+  Divider,
+  Group,
+  Image,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  TooltipFloating,
+  UnstyledButton,
+} from "@mantine/core";
 import { IconBook, IconCalendar, IconClock, IconStarFilled } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -17,26 +30,36 @@ import { OverflowBadge } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
 
-export default function MediaReleasesWidget({ options, integrationIds }: WidgetComponentProps<"mediaReleases">) {
+export default function MediaReleasesWidget({
+  options,
+  integrationIds,
+  width,
+  displayMode,
+}: WidgetComponentProps<"mediaReleases">) {
   const { data: releases = [] } = clientApi.widget.mediaRelease.getMediaReleases.useQuery({
     integrationIds,
   });
 
+  const isAdvanced = displayMode === "advanced";
+
   return (
-    <Stack p="xs" gap="sm">
-      {releases.map((item, index) => (
-        <Fragment key={item.id}>
-          {index !== 0 && options.layout === "poster" && <Divider />}
-          <Item item={item} options={options} />
-        </Fragment>
-      ))}
-    </Stack>
+    <ScrollArea h="100%">
+      <SimpleGrid cols={isAdvanced ? Math.max(1, Math.floor(width / 360)) : 1} p="xs" spacing="sm">
+        {releases.map((item, index) => (
+          <Fragment key={`${item.integration.id}:${item.id}`}>
+            {!isAdvanced && index !== 0 && options.layout === "poster" && <Divider />}
+            <Item item={item} options={options} isAdvanced={isAdvanced} />
+          </Fragment>
+        ))}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
 
 interface ItemProps {
   item: RouterOutputs["widget"]["mediaRelease"]["getMediaReleases"][number];
   options: WidgetComponentProps<"mediaReleases">["options"];
+  isAdvanced: boolean;
 }
 
 const formatReleaseDate = (value: unknown, locale: string) => {
@@ -52,7 +75,7 @@ const formatReleaseDate = (value: unknown, locale: string) => {
   }).format(date);
 };
 
-const Item = ({ item, options }: ItemProps) => {
+const Item = ({ item, options, isAdvanced }: ItemProps) => {
   const locale = useCurrentLocale();
   const t = useI18n();
   const length = formatLength(item.length, item.type, t);
@@ -62,7 +85,12 @@ const Item = ({ item, options }: ItemProps) => {
       label={item.description}
       w={300}
       multiline
-      disabled={item.description === undefined || item.description.trim() === "" || !options.showDescriptionTooltip}
+      disabled={
+        isAdvanced ||
+        item.description === undefined ||
+        item.description.trim() === "" ||
+        !options.showDescriptionTooltip
+      }
     >
       <UnstyledButton
         component="a"
@@ -70,9 +98,18 @@ const Item = ({ item, options }: ItemProps) => {
         target="_blank"
         rel="noopener noreferrer"
         pos="relative"
-        p={options.layout === "poster" ? 0 : 4}
+        p={isAdvanced ? "sm" : options.layout === "poster" ? 0 : 4}
+        h="100%"
+        style={
+          isAdvanced
+            ? {
+                border: "1px solid var(--mantine-color-default-border)",
+                borderRadius: "var(--mantine-radius-sm)",
+              }
+            : undefined
+        }
       >
-        {options.layout === "backdrop" && (
+        {!isAdvanced && options.layout === "backdrop" && (
           <Box
             w="100%"
             h="100%"
@@ -91,7 +128,9 @@ const Item = ({ item, options }: ItemProps) => {
         )}
         <Group justify="space-between" h="100%" wrap="nowrap">
           <Group align="start" wrap="nowrap" style={{ zIndex: 0 }}>
-            {options.layout === "poster" && <Image w={60} src={item.imageUrls.poster} alt={item.title} />}
+            {(isAdvanced || options.layout === "poster") && (
+              <Image w={isAdvanced ? 80 : 60} src={item.imageUrls.poster} alt={item.title} radius="xs" />
+            )}
             <Stack gap={4}>
               <Stack gap={0}>
                 <Text size="sm" fw="bold" lineClamp={2}>
@@ -136,15 +175,20 @@ const Item = ({ item, options }: ItemProps) => {
                   groupGap={4}
                   data={item.tags}
                   overflowCount={3}
-                  disablePopover
+                  disablePopover={!isAdvanced}
                   style={{ cursor: "pointer" }}
                 />
               )}
+              {isAdvanced && item.description && (
+                <Text size="xs" c="dimmed" lineClamp={3}>
+                  {item.description}
+                </Text>
+              )}
             </Stack>
           </Group>
-          {(options.showType || options.showSource) && (
+          {(isAdvanced || options.showType || options.showSource) && (
             <Stack justify="space-between" align="end" h="100%" style={{ zIndex: 0 }}>
-              {options.showType && (
+              {(isAdvanced || options.showType) && (
                 <Badge
                   w="max-content"
                   size="xs"
@@ -155,7 +199,7 @@ const Item = ({ item, options }: ItemProps) => {
                 </Badge>
               )}
 
-              {options.showSource && (
+              {(isAdvanced || options.showSource) && (
                 <Avatar size="sm" radius="xl" src={getIconUrl(item.integration.kind)} alt={item.integration.name} />
               )}
             </Stack>
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index c5dc5bf06..b8760eb56 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -18,6 +18,7 @@ import { IconSearch, IconThumbDown, IconThumbUp } from "@tabler/icons-react";
 
 import type { RouterInputs, RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { toValidDate } from "@homarr/common";
 import type { MediaRequestStatus } from "@homarr/integrations/types";
@@ -35,7 +36,14 @@ export default function MediaServerWidget({
   isEditMode,
   options,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"mediaRequests-requestList">) {
+  const interactIntegrationIds = new Set(
+    useIntegrationsWithInteractAccess()
+      .filter(({ id }) => integrationIds.includes(id))
+      .map(({ id }) => id),
+  );
   const { data: mediaRequests } = clientApi.widget.mediaRequests.getLatestRequests.useQuery({
     integrationIds,
     statuses:
@@ -61,7 +69,9 @@ export default function MediaServerWidget({
             <MediaRequestCard
               key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
               request={mediaRequest}
-              isTiny={width <= 256}
+              isTiny={displayMode !== "advanced" && (width <= 256 || height < 96)}
+              isAdvanced={displayMode === "advanced"}
+              canInteract={interactIntegrationIds.has(mediaRequest.integrationId)}
               options={options}
             />
           ))}
@@ -92,10 +102,12 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
 interface MediaRequestCardProps {
   request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"][number];
   isTiny: boolean;
+  isAdvanced: boolean;
+  canInteract: boolean;
   options: WidgetComponentProps<"mediaRequests-requestList">["options"];
 }
 
-const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) => {
+const MediaRequestCard = ({ request, isTiny, isAdvanced, canInteract, options }: MediaRequestCardProps) => {
   const board = useRequiredBoard();
   const t = useScopedI18n("widget.mediaRequests-requestList");
 
@@ -152,6 +164,11 @@ const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) =
                     {t(`availability.${request.availability}`)}
                   </Badge>
                 )}
+                {isAdvanced && (
+                  <Badge size="xs" variant="outline">
+                    {request.integration.name}
+                  </Badge>
+                )}
               </Group>
               <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap">
                 <Avatar
@@ -186,7 +203,11 @@ const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) =
                 {request.name || "unknown"}
               </Anchor>
               {request.status === "pending" ? (
-                <DecisionButtons requestId={request.id} integrationId={request.integrationId} />
+                <DecisionButtons
+                  requestId={request.id}
+                  integrationId={request.integrationId}
+                  canInteract={canInteract}
+                />
               ) : (
                 <StatusBadge status={request.status} />
               )}
@@ -201,15 +222,21 @@ const MediaRequestCard = ({ request, isTiny, options }: MediaRequestCardProps) =
 interface DecisionButtonsProps {
   requestId: number;
   integrationId: string;
+  canInteract: boolean;
 }
 
-const DecisionButtons = ({ requestId, integrationId }: DecisionButtonsProps) => {
+const DecisionButtons = ({ requestId, integrationId, canInteract }: DecisionButtonsProps) => {
   const utils = clientApi.useUtils();
-  const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation({
+  const {
+    mutate: mutateRequestAnswer,
+    isPending,
+    error,
+  } = clientApi.widget.mediaRequests.answerRequest.useMutation({
     onSettled: () => void utils.widget.mediaRequests.invalidate(),
   });
   const t = useScopedI18n("widget.mediaRequests-requestList");
   const handleDecision = (answer: RouterInputs["widget"]["mediaRequests"]["answerRequest"]["answer"]) => {
+    if (!canInteract || isPending) return;
     mutateRequestAnswer({
       integrationId,
       requestId,
@@ -218,13 +245,15 @@ const DecisionButtons = ({ requestId, integrationId }: DecisionButtonsProps) =>
   };
 
   return (
-    <Group className="mediaRequests-list-item-pending-buttons" gap="sm">
+    <Group className="mediaRequests-list-item-pending-buttons" gap="sm" title={error?.message}>
       <Tooltip label={t("pending.approve")}>
         <ActionIcon
           className="mediaRequests-list-item-pending-button-approve"
           variant="light"
           color="green"
           size="xs"
+          disabled={!canInteract || isPending}
+          aria-label={t("pending.approve")}
           onClick={() => {
             handleDecision("approve");
           }}
@@ -238,6 +267,8 @@ const DecisionButtons = ({ requestId, integrationId }: DecisionButtonsProps) =>
           variant="light"
           color="red"
           size="xs"
+          disabled={!canInteract || isPending}
+          aria-label={t("pending.decline")}
           onClick={() => {
             handleDecision("decline");
           }}
diff --git a/packages/widgets/src/media-requests/list/index.ts b/packages/widgets/src/media-requests/list/index.ts
index 1f65cd0c3..bcc5dd4fd 100644
--- a/packages/widgets/src/media-requests/list/index.ts
+++ b/packages/widgets/src/media-requests/list/index.ts
@@ -11,6 +11,7 @@ const mediaRequestStatusValues = ["pending", "approved", "declined", "failed", "
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
   icon: IconZoomQuestion,
+  queryKey: [["widget", "mediaRequests"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       linksTargetNewTab: factory.switch({
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
index 5348b845a..be9f2796b 100644
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ActionIcon, Avatar, Box, Card, Grid, Group, Stack, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Card, Grid, Group, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import type { Icon } from "@tabler/icons-react";
 import {
   IconDeviceTv,
@@ -34,6 +34,8 @@ export default function MediaServerWidget({
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"mediaRequests-requestStats">) {
   const t = useScopedI18n("widget.mediaRequests-requestStats");
   const { data: requestStats } = clientApi.widget.mediaRequests.getStats.useQuery({
@@ -88,7 +90,12 @@ export default function MediaServerWidget({
     },
   ] satisfies { name: keyof RequestStats; icon: Icon; number: number }[];
 
-  const isTiny = width < 256;
+  const isTiny = displayMode !== "advanced" && (width < 256 || height < 180);
+  const visibleStats = displayMode === "advanced" ? data : data.slice(0, height < 120 ? 4 : 8);
+  const visibleUsers = requestStats.users.slice(
+    0,
+    displayMode === "advanced" ? 50 : Math.max(1, Math.floor(height / 44) - 3),
+  );
 
   return (
     <Box className={searchClasses.searchRoot}>
@@ -107,7 +114,7 @@ export default function MediaServerWidget({
             {t("titles.stats.main")}
           </Text>
           <Grid className="mediaRequests-stats-stats-grid" gap={4} w="100%">
-            {data.map((stat) => (
+            {visibleStats.map((stat) => (
               <Grid.Col
                 className={combineClasses("mediaRequests-stats-stat-wrapper", `mediaRequests-stats-stat-${stat.name}`)}
                 key={stat.name}
@@ -131,44 +138,61 @@ export default function MediaServerWidget({
           <Text className="mediaRequests-stats-users-title" fw="bold" ta="center" size={isTiny ? "xs" : "sm"}>
             {t("titles.users.main")} ({t("titles.users.requests")})
           </Text>
-          <Stack className="mediaRequests-stats-users-wrapper" flex={1} w="100%" gap={4} style={{ overflow: "hidden" }}>
-            {requestStats.users.slice(0, 10).map((user) => (
-              <Card
-                component="a"
-                href={user.link}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={combineClasses(
-                  "mediaRequests-stats-users-user-wrapper",
-                  `mediaRequests-stats-users-user-${user.id}`,
-                  classes.card,
-                )}
-                key={user.id}
-                p="xs"
-                radius={board.itemRadius}
-              >
-                <Group className="mediaRequests-stats-users-user-group" h="100%" p={0} gap="sm" justify="space-between">
-                  <Group gap={4}>
-                    <Tooltip label={user.integration.name}>
-                      <Avatar
-                        className="mediaRequests-stats-users-user-avatar"
-                        size={20}
-                        src={user.avatar}
-                        bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
-                      />
-                    </Tooltip>
-                    <Text className="mediaRequests-stats-users-user-userName" size="sm">
-                      {user.displayName}
+          <ScrollArea className="mediaRequests-stats-users-wrapper" flex={1} w="100%">
+            <Stack gap={4}>
+              {visibleUsers.map((user) => (
+                <Card
+                  component="a"
+                  href={user.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={combineClasses(
+                    "mediaRequests-stats-users-user-wrapper",
+                    `mediaRequests-stats-users-user-${user.id}`,
+                    classes.card,
+                  )}
+                  key={`${user.integration.id}:${user.id}`}
+                  p="xs"
+                  radius={board.itemRadius}
+                >
+                  <Group
+                    className="mediaRequests-stats-users-user-group"
+                    h="100%"
+                    p={0}
+                    gap="sm"
+                    justify="space-between"
+                  >
+                    <Group gap={4}>
+                      <Tooltip label={user.integration.name}>
+                        <Avatar
+                          className="mediaRequests-stats-users-user-avatar"
+                          size={20}
+                          src={user.avatar}
+                          bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
+                        />
+                      </Tooltip>
+                      <Text className="mediaRequests-stats-users-user-userName" size="sm">
+                        {user.displayName}
+                      </Text>
+                    </Group>
+
+                    <Text className="mediaRequests-stats-users-user-request-count" size="md" fw={500}>
+                      {user.requestCount}
                     </Text>
                   </Group>
-
-                  <Text className="mediaRequests-stats-users-user-request-count" size="md" fw={500}>
-                    {user.requestCount}
-                  </Text>
-                </Group>
-              </Card>
-            ))}
-          </Stack>
+                </Card>
+              ))}
+            </Stack>
+          </ScrollArea>
+          {displayMode === "advanced" && (
+            <Group justify="center" gap={4}>
+              {requestStats.integrations.map((integration) => (
+                <Badge key={integration.id} size="xs" variant="light">
+                  {integration.name}
+                </Badge>
+              ))}
+            </Group>
+          )}
         </Stack>
       </Stack>
     </Box>
diff --git a/packages/widgets/src/media-requests/stats/index.ts b/packages/widgets/src/media-requests/stats/index.ts
index d49cb8495..5efbd8909 100644
--- a/packages/widgets/src/media-requests/stats/index.ts
+++ b/packages/widgets/src/media-requests/stats/index.ts
@@ -7,6 +7,7 @@ import { createWidgetDefinition } from "../../definition";
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestStats", {
   icon: IconChartBar,
+  queryKey: [["widget", "mediaRequests"]],
   createOptions() {
     return {};
   },
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index 439857a8f..d474b2edd 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -17,7 +17,7 @@ import { MantineReactTable } from "mantine-react-table";
 
 import { clientApi } from "@homarr/api/client";
 import { objectEntries } from "@homarr/common";
-import { getIconUrl, integrationDefs } from "@homarr/definitions";
+import { getIconUrl } from "@homarr/definitions";
 import type { StreamSession } from "@homarr/integrations";
 import { createModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -26,38 +26,50 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
 
-export default function MediaServerWidget({ options, integrationIds }: WidgetComponentProps<"mediaServer">) {
+export default function MediaServerWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  isEditMode,
+  displayMode,
+}: WidgetComponentProps<"mediaServer">) {
   const { data: currentStreams = [] } = clientApi.widget.mediaServer.getCurrentStreams.useQuery({
     integrationIds,
     showOnlyPlaying: options.showOnlyPlaying,
   });
 
   const t = useScopedI18n("widget.mediaServer");
-  const columns = useMemo<MRT_ColumnDef<StreamSession>[]>(
-    () => [
-      {
-        accessorKey: "user.username",
-        header: t("items.user"),
-        size: 160,
+  const isAdvanced = displayMode === "advanced";
+  const columns = useMemo<MRT_ColumnDef<StreamSession>[]>(() => {
+    const result: MRT_ColumnDef<StreamSession>[] = [
+      ...(width >= 300 || isAdvanced
+        ? [
+            {
+              accessorKey: "user.username",
+              header: t("items.user"),
+              size: 160,
 
-        Cell: ({ row }) => (
-          <Group gap="xs" wrap="nowrap">
-            <Avatar size={28} src={row.original.user.profilePictureUrl} />
-            <Stack gap={0} style={{ minWidth: 0 }}>
-              <Text size="xs" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                {row.original.user.username}
-              </Text>
-              <Text
-                size="10px"
-                c="dimmed"
-                style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
-              >
-                {row.original.sessionName}
-              </Text>
-            </Stack>
-          </Group>
-        ),
-      },
+              Cell: ({ row }) => (
+                <Group gap="xs" wrap="nowrap">
+                  <Avatar size={28} src={row.original.user.profilePictureUrl} />
+                  <Stack gap={0} style={{ minWidth: 0 }}>
+                    <Text size="xs" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {row.original.user.username}
+                    </Text>
+                    <Text
+                      size="10px"
+                      c="dimmed"
+                      style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+                    >
+                      {row.original.sessionName}
+                    </Text>
+                  </Stack>
+                </Group>
+              ),
+            } satisfies MRT_ColumnDef<StreamSession>,
+          ]
+        : []),
       {
         accessorKey: "currentlyPlaying", // currentlyPlaying.name can be undefined which results in a warning. This is why we use currentlyPlaying instead of currentlyPlaying.name
         header: t("items.currentlyPlaying"),
@@ -77,7 +89,9 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
               ? Math.min(100, Math.round((positionMs / durationMs) * 100))
               : null;
           const remainingMinutes =
-            positionMs !== null && durationMs !== null ? Math.max(0, Math.round((durationMs - positionMs) / 60_000)) : null;
+            positionMs !== null && durationMs !== null
+              ? Math.max(0, Math.round((durationMs - positionMs) / 60_000))
+              : null;
 
           return (
             <Stack gap={4} style={{ minWidth: 0 }}>
@@ -112,42 +126,46 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
             </Stack>
           );
         },
-      },
-      {
-        id: "status",
-        header: t("items.status"),
-        size: 110,
+      } satisfies MRT_ColumnDef<StreamSession>,
+      ...(width >= 420 || isAdvanced
+        ? [
+            {
+              id: "status",
+              header: t("items.status"),
+              size: 110,
 
-        Cell: ({ row }) => {
-          const currentlyPlaying = row.original.currentlyPlaying;
-          if (!currentlyPlaying) return null;
+              Cell: ({ row }) => {
+                const currentlyPlaying = row.original.currentlyPlaying;
+                if (!currentlyPlaying) return null;
 
-          const isTranscoding = Boolean(
-            currentlyPlaying.metadata?.transcoding.target.videoCodec ??
-              currentlyPlaying.metadata?.transcoding.target.audioCodec ??
-              currentlyPlaying.metadata?.transcoding.container,
-          );
+                const isTranscoding = Boolean(
+                  currentlyPlaying.metadata?.transcoding.target.videoCodec ??
+                  currentlyPlaying.metadata?.transcoding.target.audioCodec ??
+                  currentlyPlaying.metadata?.transcoding.container,
+                );
 
-          return (
-            <Stack gap={4} align="flex-start">
-              <Badge size="xs" variant="light" color={isTranscoding ? "orange" : "green"}>
-                {isTranscoding ? t("items.transcoding") : t("items.directPlay")}
-              </Badge>
-              {currentlyPlaying.location && (
-                <Group gap={4} align="center">
-                  {currentlyPlaying.location === "lan" ? <IconWifi size={12} /> : <IconWorld size={12} />}
-                  <Text size="10px" c="dimmed" tt="uppercase">
-                    {currentlyPlaying.location}
-                  </Text>
-                </Group>
-              )}
-            </Stack>
-          );
-        },
-      },
-    ],
-    [t],
-  );
+                return (
+                  <Stack gap={4} align="flex-start">
+                    <Badge size="xs" variant="light" color={isTranscoding ? "orange" : "green"}>
+                      {isTranscoding ? t("items.transcoding") : t("items.directPlay")}
+                    </Badge>
+                    {currentlyPlaying.location && (
+                      <Group gap={4} align="center">
+                        {currentlyPlaying.location === "lan" ? <IconWifi size={12} /> : <IconWorld size={12} />}
+                        <Text size="10px" c="dimmed" tt="uppercase">
+                          {currentlyPlaying.location}
+                        </Text>
+                      </Group>
+                    )}
+                  </Stack>
+                );
+              },
+            } satisfies MRT_ColumnDef<StreamSession>,
+          ]
+        : []),
+    ];
+    return result;
+  }, [isAdvanced, t, width]);
 
   // Only render the flat list of sessions when the currentStreams change
   // Otherwise it will always create a new array reference and cause the table to re-render
@@ -156,8 +174,9 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
       currentStreams.flatMap((pair) =>
         pair.sessions.map((session) => ({
           ...session,
+          integrationId: pair.integrationId,
           integrationKind: pair.integrationKind,
-          integrationName: integrationDefs[pair.integrationKind].name,
+          integrationName: pair.integrationName,
           integrationIcon: getIconUrl(pair.integrationKind),
         })),
       ),
@@ -169,15 +188,15 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
     columns,
     data: flatSessions,
     enablePagination: false,
-    enableTopToolbar: false,
+    enableTopToolbar: isAdvanced,
     enableBottomToolbar: false,
-    enableSorting: false,
+    enableSorting: isAdvanced,
     enableColumnActions: false,
     enableStickyHeader: false,
     enableColumnOrdering: false,
     enableRowSelection: false,
     enableFullScreenToggle: false,
-    enableGlobalFilter: false,
+    enableGlobalFilter: isAdvanced,
     enableDensityToggle: false,
     enableFilters: false,
     enableHiding: false,
@@ -208,6 +227,7 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
     mantineTableContainerProps: {
       style: {
         height: "100%",
+        pointerEvents: isEditMode ? "none" : undefined,
       },
     },
     mantineTableBodyCellProps: ({ row }) => ({
@@ -229,37 +249,59 @@ export default function MediaServerWidget({ options, integrationIds }: WidgetCom
     }),
   });
 
-  const uniqueIntegrations = Array.from(new Set(flatSessions.map((session) => session.integrationKind))).map((kind) => {
-    const session = flatSessions.find((session) => session.integrationKind === kind);
-    return {
-      integrationKind: kind,
-      integrationIcon: session?.integrationIcon,
-      integrationName: session?.integrationName,
-    };
-  });
+  const uniqueIntegrations = currentStreams.map((stream) => ({
+    integrationId: stream.integrationId,
+    integrationKind: stream.integrationKind,
+    integrationIcon: getIconUrl(stream.integrationKind),
+    integrationName: stream.integrationName,
+  }));
+
+  const playingCount = flatSessions.filter(
+    (session) => session.currentlyPlaying && session.currentlyPlaying.playback?.state !== "paused",
+  ).length;
+  const transcodingCount = flatSessions.filter((session) =>
+    Boolean(
+      session.currentlyPlaying?.metadata?.transcoding.target.videoCodec ??
+      session.currentlyPlaying?.metadata?.transcoding.target.audioCodec ??
+      session.currentlyPlaying?.metadata?.transcoding.container,
+    ),
+  ).length;
 
   return (
     <Stack gap={0} h="100%" display="flex">
+      {isAdvanced && (
+        <Group px="xs" py={4} gap="xs">
+          <Badge variant="light">{t("summary.sessions", { count: flatSessions.length })}</Badge>
+          <Badge variant="light" color="green">
+            {t("summary.playing", { count: playingCount })}
+          </Badge>
+          <Badge variant="light" color="orange">
+            {t("summary.transcoding", { count: transcodingCount })}
+          </Badge>
+        </Group>
+      )}
       <MantineReactTable table={table} />
-      <Group
-        gap="xs"
-        h={30}
-        px="xs"
-        pr="md"
-        justify="flex-end"
-        style={{
-          borderTop: "1px solid var(--border-color)",
-        }}
-      >
-        {uniqueIntegrations.map((integration) => (
-          <Group key={integration.integrationKind} gap="xs" align="center">
-            <Avatar className="media-server-icon" src={integration.integrationIcon} radius={"xs"} size="xs" />
-            <Text className="media-server-name" size="sm">
-              {integration.integrationName}
-            </Text>
-          </Group>
-        ))}
-      </Group>
+      {(isAdvanced || height >= 96) && (
+        <Group
+          gap="xs"
+          h={30}
+          px="xs"
+          pr="md"
+          justify="flex-end"
+          style={{
+            borderTop: "1px solid var(--border-color)",
+          }}
+        >
+          {uniqueIntegrations.map((integration) => (
+            <Group key={integration.integrationId} gap="xs" align="center">
+              <Avatar className="media-server-icon" src={integration.integrationIcon} radius={"xs"} size="xs" />
+              <Text className="media-server-name" size="sm">
+                {integration.integrationName}
+              </Text>
+            </Group>
+          ))}
+        </Group>
+      )}
     </Stack>
   );
 }
diff --git a/packages/widgets/src/media-server/index.ts b/packages/widgets/src/media-server/index.ts
index 54f00476c..3d6679688 100644
--- a/packages/widgets/src/media-server/index.ts
+++ b/packages/widgets/src/media-server/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaServer", {
   icon: IconVideo,
+  queryKey: [["widget", "mediaServer"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/media-transcoding/component.tsx b/packages/widgets/src/media-transcoding/component.tsx
index fe4873e45..765c3cdcd 100644
--- a/packages/widgets/src/media-transcoding/component.tsx
+++ b/packages/widgets/src/media-transcoding/component.tsx
@@ -1,7 +1,19 @@
 "use client";
 
-import { useState } from "react";
-import { Center, Divider, Group, Pagination, SegmentedControl, Stack, Text } from "@mantine/core";
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import {
+  Center,
+  Divider,
+  Group,
+  Pagination,
+  Paper,
+  ScrollArea,
+  SegmentedControl,
+  SimpleGrid,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { IconClipboardList, IconCpu2, IconReportAnalytics } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -30,23 +42,73 @@ export default function MediaTranscodingWidget({
   integrationIds,
   options,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"mediaTranscoding">) {
-  const [queuePage, setQueuePage] = useState(1);
-  const queuePageSize = 10;
+  const isAdvanced = displayMode === "advanced";
+  const queuePageSize = getQueuePageSize(height, isAdvanced);
+  const [queuePagination, setQueuePagination] = useState<QueuePaginationState>(() => ({
+    page: 1,
+    pageSize: queuePageSize,
+    isAdvanced,
+  }));
+  const requestPagination = resolveQueuePagination(queuePagination, queuePageSize, isAdvanced, null);
   const input = {
     integrationId: integrationIds[0] ?? "",
     pageSize: queuePageSize,
-    page: queuePage,
+    page: requestPagination.page,
   };
   const { data: transcodingData } = clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input);
 
   const [view, setView] = useState<View>(options.defaultView);
   const t = useI18n("widget.mediaTranscoding");
+  const totalQueuePages = transcodingData
+    ? Math.max(1, Math.ceil(transcodingData.data.queue.totalCount / queuePageSize))
+    : null;
+  const resolvedPagination = resolveQueuePagination(queuePagination, queuePageSize, isAdvanced, totalQueuePages);
+  const queuePage = resolvedPagination.page;
+
+  useEffect(() => {
+    setQueuePagination((current) => {
+      const next = resolveQueuePagination(current, queuePageSize, isAdvanced, totalQueuePages);
+      return current.page === next.page && current.pageSize === next.pageSize && current.isAdvanced === next.isAdvanced
+        ? current
+        : next;
+    });
+  }, [isAdvanced, queuePageSize, totalQueuePages]);
+
+  const handleQueuePageChange = (page: number) => {
+    setQueuePagination({ page, pageSize: queuePageSize, isAdvanced });
+  };
 
   if (!transcodingData) return <WidgetEmptyState />;
 
-  const totalQueuePages = Math.ceil((transcodingData.data.queue.totalCount || 1) / queuePageSize);
-  const isTiny = width < 256;
+  const queuePageCount = totalQueuePages ?? 1;
+  const isTiny = !isAdvanced && width < 256;
+
+  if (isAdvanced) {
+    return (
+      <Stack gap="xs" h="100%" p="xs">
+        <ScrollArea h="100%" style={{ flex: 1 }}>
+          <SimpleGrid cols={width >= 1100 ? 3 : width >= 700 ? 2 : 1} spacing="sm">
+            <AdvancedPanel title={t("tab.workers")} icon={IconCpu2}>
+              <WorkersPanel workers={transcodingData.data.workers} isTiny={false} />
+            </AdvancedPanel>
+            <AdvancedPanel title={t("tab.queue")} icon={IconClipboardList}>
+              <QueuePanel queue={transcodingData.data.queue} />
+            </AdvancedPanel>
+            <AdvancedPanel title={t("tab.statistics")} icon={IconReportAnalytics}>
+              <StatisticsPanel statistics={transcodingData.data.statistics} />
+            </AdvancedPanel>
+          </SimpleGrid>
+        </ScrollArea>
+        <Group gap="xs" justify="space-between" wrap="nowrap">
+          <Pagination total={queuePageCount} value={queuePage} onChange={handleQueuePageChange} size="xs" />
+          <HealthCheckStatus statistics={transcodingData.data.statistics} />
+        </Group>
+      </Stack>
+    );
+  }
 
   return (
     <Stack gap={4} h="100%">
@@ -89,12 +151,12 @@ export default function MediaTranscodingWidget({
         <Group gap="xs" ml="auto">
           {view === "queue" && (
             <>
-              <Pagination.Root total={totalQueuePages} value={queuePage} onChange={setQueuePage} size="xs">
+              <Pagination.Root total={queuePageCount} value={queuePage} onChange={handleQueuePageChange} size="xs">
                 <Group gap={2} justify="center">
-                  {!isTiny && <Pagination.First disabled={transcodingData.data.queue.startIndex === 1} />}
-                  <Pagination.Previous disabled={transcodingData.data.queue.startIndex === 1} />
-                  <Pagination.Next disabled={transcodingData.data.queue.startIndex === totalQueuePages} />
-                  {!isTiny && <Pagination.Last disabled={transcodingData.data.queue.startIndex === totalQueuePages} />}
+                  {!isTiny && <Pagination.First disabled={queuePage === 1} />}
+                  <Pagination.Previous disabled={queuePage === 1} />
+                  <Pagination.Next disabled={queuePage === queuePageCount} />
+                  {!isTiny && <Pagination.Last disabled={queuePage === queuePageCount} />}
                 </Group>
               </Pagination.Root>
               <Text size="xs">
@@ -113,3 +175,40 @@ export default function MediaTranscodingWidget({
     </Stack>
   );
 }
+
+export const getQueuePageSize = (height: number, isAdvanced: boolean): number => {
+  if (isAdvanced) return 25;
+  return Math.max(3, Math.min(15, Math.floor((height - 84) / 28)));
+};
+
+interface QueuePaginationState {
+  page: number;
+  pageSize: number;
+  isAdvanced: boolean;
+}
+
+export const resolveQueuePagination = (
+  state: QueuePaginationState,
+  pageSize: number,
+  isAdvanced: boolean,
+  totalPages: number | null,
+): QueuePaginationState => ({
+  page:
+    state.pageSize !== pageSize || state.isAdvanced !== isAdvanced
+      ? 1
+      : Math.max(1, totalPages === null ? state.page : Math.min(state.page, totalPages)),
+  pageSize,
+  isAdvanced,
+});
+
+const AdvancedPanel = ({ title, icon: Icon, children }: { title: string; icon: TablerIcon; children: ReactNode }) => (
+  <Paper withBorder radius="sm" p="xs" mih={280} style={{ display: "flex", flexDirection: "column" }}>
+    <Group gap="xs" mb="xs">
+      <Icon size={16} />
+      <Text size="sm" fw={600}>
+        {title}
+      </Text>
+    </Group>
+    {children}
+  </Paper>
+);
diff --git a/packages/widgets/src/media-transcoding/index.ts b/packages/widgets/src/media-transcoding/index.ts
index ff4922dad..de92a46ca 100644
--- a/packages/widgets/src/media-transcoding/index.ts
+++ b/packages/widgets/src/media-transcoding/index.ts
@@ -11,6 +11,8 @@ export const views = ["workers", "queue", "statistics"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaTranscoding", {
   icon: IconTransform,
+  queryKey: [["widget", "mediaTranscoding"]],
+  maxIntegrations: 1,
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/media-transcoding/layout.spec.ts b/packages/widgets/src/media-transcoding/layout.spec.ts
new file mode 100644
index 000000000..44f2d2306
--- /dev/null
+++ b/packages/widgets/src/media-transcoding/layout.spec.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from "vitest";
+
+import { getQueuePageSize, resolveQueuePagination } from "./component";
+import { toRingProgressSections } from "./panels/statistics.panel";
+
+describe("media transcoding layout", () => {
+  test("keeps compact queues bounded to the available height", () => {
+    expect(getQueuePageSize(140, false)).toBe(3);
+    expect(getQueuePageSize(500, false)).toBe(14);
+    expect(getQueuePageSize(2000, false)).toBe(15);
+  });
+
+  test("loads a bounded deeper queue in advanced mode", () => {
+    expect(getQueuePageSize(200, true)).toBe(25);
+  });
+
+  test("resets the queue when display mode or page size changes", () => {
+    const compact = { page: 7, pageSize: 10, isAdvanced: false };
+
+    expect(resolveQueuePagination(compact, 25, true, 8)).toEqual({ page: 1, pageSize: 25, isAdvanced: true });
+    expect(resolveQueuePagination(compact, 12, false, 8)).toEqual({ page: 1, pageSize: 12, isAdvanced: false });
+  });
+
+  test("clamps the queue page when the result count shrinks", () => {
+    expect(resolveQueuePagination({ page: 7, pageSize: 10, isAdvanced: false }, 10, false, 3)).toEqual({
+      page: 3,
+      pageSize: 10,
+      isAdvanced: false,
+    });
+  });
+
+  test("does not create NaN chart sections for empty statistics", () => {
+    expect(toRingProgressSections([{ name: "none", value: 0 }])).toEqual([]);
+  });
+});
diff --git a/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx b/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx
index c09647138..e31f51de1 100644
--- a/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx
+++ b/packages/widgets/src/media-transcoding/panels/statistics.panel.tsx
@@ -71,8 +71,9 @@ const StatisticRingProgress = ({ items, label }: StatisticRingProgressProps) =>
   );
 };
 
-function toRingProgressSections(segments: TdarrPieSegment[]): RingProgressProps["sections"] {
+export function toRingProgressSections(segments: TdarrPieSegment[]): RingProgressProps["sections"] {
   const total = segments.reduce((prev, curr) => prev + curr.value, 0);
+  if (total <= 0) return [];
   return segments.map((segment, index) => ({
     value: (segment.value * 100) / total,
     tooltip: `${segment.name}: ${segment.value}`,
diff --git a/packages/widgets/src/minecraft/server-status/component.tsx b/packages/widgets/src/minecraft/server-status/component.tsx
index 20214e3ac..2f33ebb19 100644
--- a/packages/widgets/src/minecraft/server-status/component.tsx
+++ b/packages/widgets/src/minecraft/server-status/component.tsx
@@ -1,23 +1,31 @@
 "use client";
 
-import { Box, Flex, Group, Text, Tooltip } from "@mantine/core";
+import { Badge, Box, Flex, Group, Progress, Stack, Text, Tooltip } from "@mantine/core";
 import { IconCube, IconUsersGroup } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { formatNumber } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
 
-export default function MinecraftServerStatusWidget({ options }: WidgetComponentProps<"minecraftServerStatus">) {
+export default function MinecraftServerStatusWidget({
+  options,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"minecraftServerStatus">) {
   const { data: result } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
-  const tStatus = useScopedI18n("widget.minecraftServerStatus.status");
+  const t = useI18n();
 
   if (!result) return <WidgetEmptyState />;
   const { data } = result;
 
   const title = options.title.trim().length > 0 ? options.title : options.domain;
+  const isAdvanced = displayMode === "advanced";
+  const iconSize = Math.max(40, Math.min(isAdvanced ? 128 : 80, width * 0.45, height * 0.45));
+  const playerPercent = data.online && data.players.max > 0 ? (data.players.online / data.players.max) * 100 : 0;
 
   return (
     <Flex
@@ -25,24 +33,38 @@ export default function MinecraftServerStatusWidget({ options }: WidgetComponent
       h="100%"
       w="100%"
       direction="column"
-      p="sm"
+      p={isAdvanced ? "lg" : "sm"}
       justify="center"
       align="center"
     >
       <Group gap="xs" wrap="nowrap" align="center">
-        <Tooltip label={data.online ? tStatus("online") : tStatus("offline")}>
+        <Tooltip
+          label={
+            data.online
+              ? t("widget.minecraftServerStatus.status.online")
+              : t("widget.minecraftServerStatus.status.offline")
+          }
+        >
           <Box miw="md" h="md" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }}></Box>
         </Tooltip>
-        <Text size="md" fw="bold">
+        <Text size={isAdvanced ? "xl" : "md"} fw="bold" truncate="end">
           {title}
         </Text>
       </Group>
+      {isAdvanced && (
+        <Group gap="xs" mt="xs" wrap="wrap" justify="center">
+          <Badge variant="light">{options.domain}</Badge>
+          {options.isBedrockServer && (
+            <Badge variant="outline">{t("widget.minecraftServerStatus.option.isBedrockServer.label")}</Badge>
+          )}
+        </Group>
+      )}
       {data.online && (
         <>
           {!options.isBedrockServer &&
             (data.icon ? (
               <img
-                style={{ flex: 1, transform: "scale(0.8)", objectFit: "contain" }}
+                style={{ flex: 1, width: iconSize, maxHeight: iconSize, objectFit: "contain" }}
                 alt={`minecraft icon ${options.domain}`}
                 src={data.icon}
               />
@@ -55,17 +77,25 @@ export default function MinecraftServerStatusWidget({ options }: WidgetComponent
                   justifyContent: "center",
                 }}
               >
-                <IconCube size="3rem" color="var(--mantine-color-gray-5)" />
+                <IconCube size={iconSize} color="var(--mantine-color-gray-5)" />
               </Box>
             ))}
-          <Group gap={5} c="gray.6" align="center">
-            <IconUsersGroup size="1rem" />
-            <Text size="md">
-              {formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
-            </Text>
-          </Group>
+          <Stack gap={4} w={isAdvanced ? "min(100%, 420px)" : "auto"} align="stretch">
+            <Group gap={5} c="dimmed" align="center" justify="center">
+              <IconUsersGroup size={isAdvanced ? "1.25rem" : "1rem"} />
+              <Text size={isAdvanced ? "lg" : "md"}>
+                {formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
+              </Text>
+            </Group>
+            {isAdvanced && <Progress value={playerPercent} color={playerPercent >= 90 ? "orange" : "teal"} />}
+          </Stack>
         </>
       )}
+      {isAdvanced && !data.online && (
+        <Text mt="md" c="dimmed" size="sm">
+          {options.domain}
+        </Text>
+      )}
     </Flex>
   );
 }
diff --git a/packages/widgets/src/modals/widget-edit-modal.tsx b/packages/widgets/src/modals/widget-edit-modal.tsx
index 3edb6ffe5..3e745484e 100644
--- a/packages/widgets/src/modals/widget-edit-modal.tsx
+++ b/packages/widgets/src/modals/widget-edit-modal.tsx
@@ -8,6 +8,7 @@ import { z } from "zod/v4";
 
 import { objectEntries } from "@homarr/common";
 import { useSession } from "@homarr/auth/client";
+import { useOptionalBoard } from "@homarr/boards/context";
 import type { WidgetKind } from "@homarr/definitions";
 import { createModal, ModalFormFooter, modalSizeForm, useModalAction } from "@homarr/modals";
 import type { SettingsContextProps } from "@homarr/settings/creator";
@@ -40,11 +41,13 @@ interface ModalProps<TSort extends WidgetKind> {
   integrationSupport: boolean;
   settings: SettingsContextProps;
   itemId?: string;
+  boardId?: string;
   appId?: string;
 }
 
 export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, innerProps }) => {
   const t = useI18n();
+  const board = useOptionalBoard();
   const { data: session } = useSession();
   const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
   const appEditRef = useRef<EmbeddedAppEditFormHandle>(null);
@@ -154,6 +157,7 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
             options={value as never}
             initialOptions={innerProps.value.options}
             itemId={innerProps.itemId}
+            boardId={innerProps.boardId ?? board?.id}
           />
         );
       })}
diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx
index c4e892dba..7472d5007 100644
--- a/packages/widgets/src/network-controller/network-status/component.tsx
+++ b/packages/widgets/src/network-controller/network-status/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { Box } from "@mantine/core";
+import { Box, Card, SimpleGrid } from "@mantine/core";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import objectSupport from "dayjs/plugin/objectSupport";
@@ -20,26 +20,33 @@ dayjs.extend(duration);
 export default function NetworkControllerNetworkStatusWidget({
   options,
   integrationIds,
+  displayMode,
 }: WidgetComponentProps<"networkControllerStatus">) {
   const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
 
   const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const isAdvanced = displayMode === "advanced";
+  const countWifiGuests = data.reduce((sum, summary) => sum + summary.wifi.guests, 0);
+  const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
+  const countLanGuests = data.reduce((sum, summary) => sum + summary.lan.guests, 0);
+  const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
 
   return (
-    <Box p={"sm"}>
-      {options.content === "wifi" ? (
-        <WifiVariant
-          countGuests={data.reduce((sum, summary) => sum + summary.wifi.guests, 0)}
-          countUsers={data.reduce((sum, summary) => sum + summary.wifi.users, 0)}
-        />
-      ) : (
-        <WiredVariant
-          countGuests={data.reduce((sum, summary) => sum + summary.lan.guests, 0)}
-          countUsers={data.reduce((sum, summary) => sum + summary.lan.users, 0)}
-        />
-      )}
+    <Box p={isAdvanced ? "md" : "sm"} h="100%">
+      <SimpleGrid cols={isAdvanced ? 2 : 1} h="100%" spacing="sm">
+        {(isAdvanced || options.content === "wifi") && (
+          <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
+            <WifiVariant countGuests={countWifiGuests} countUsers={countWifiUsers} compact={!isAdvanced} />
+          </Card>
+        )}
+        {(isAdvanced || options.content === "wired") && (
+          <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
+            <WiredVariant countGuests={countLanGuests} countUsers={countLanUsers} compact={!isAdvanced} />
+          </Card>
+        )}
+      </SimpleGrid>
     </Box>
   );
 }
diff --git a/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx b/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx
index aa6c1998b..de9be70d3 100644
--- a/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/stat-row.tsx
@@ -1,12 +1,20 @@
 import { Stack, Text } from "@mantine/core";
 
-export const StatRow = ({ label, value }: { label: string; value: string | number }) => {
+export const StatRow = ({
+  label,
+  value,
+  compact = false,
+}: {
+  label: string;
+  value: string | number;
+  compact?: boolean;
+}) => {
   return (
     <Stack gap={0}>
-      <Text size={"2xl"} fw={900} lh={1}>
+      <Text size={compact ? "xl" : "2xl"} fw={800} lh={1}>
         {value}
       </Text>
-      <Text size={"md"} c={"dimmed"}>
+      <Text size={compact ? "sm" : "md"} c="dimmed">
         {label}
       </Text>
     </Stack>
diff --git a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
index 85b7e2355..9560c984a 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
@@ -5,19 +5,27 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
-export const WifiVariant = ({ countGuests, countUsers }: { countUsers: number; countGuests: number }) => {
+export const WifiVariant = ({
+  countGuests,
+  countUsers,
+  compact = false,
+}: {
+  countUsers: number;
+  countGuests: number;
+  compact?: boolean;
+}) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
     <>
-      <Group gap={"xs"} wrap={"nowrap"} mb={"md"}>
+      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
         <IconWifi size={24} />
         <Text size={"md"} fw={"bold"}>
           {t("variants.wifi.name")}
         </Text>
       </Group>
-      <Stack gap={"lg"}>
-        <StatRow label={t("users.label")} value={countUsers} />
-        <StatRow label={t("guests.label")} value={countGuests} />
+      <Stack gap={compact ? "sm" : "lg"}>
+        <StatRow label={t("users.label")} value={countUsers} compact={compact} />
+        <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
       </Stack>
     </>
   );
diff --git a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
index f635dd897..46ca76a83 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
@@ -5,19 +5,27 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { StatRow } from "./stat-row";
 
-export const WiredVariant = ({ countGuests, countUsers }: { countUsers: number; countGuests: number }) => {
+export const WiredVariant = ({
+  countGuests,
+  countUsers,
+  compact = false,
+}: {
+  countUsers: number;
+  countGuests: number;
+  compact?: boolean;
+}) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
     <>
-      <Group gap={"xs"} wrap={"nowrap"} mb={"md"}>
+      <Group gap="xs" wrap="nowrap" mb={compact ? "xs" : "md"}>
         <IconNetwork size={24} />
         <Text size={"md"} fw={"bold"}>
           {t("variants.wired.name")}
         </Text>
       </Group>
-      <Stack gap={"lg"}>
-        <StatRow label={t("users.label")} value={countUsers} />
-        <StatRow label={t("guests.label")} value={countGuests} />
+      <Stack gap={compact ? "sm" : "lg"}>
+        <StatRow label={t("users.label")} value={countUsers} compact={compact} />
+        <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
       </Stack>
     </>
   );
diff --git a/packages/widgets/src/network-controller/summary/component.tsx b/packages/widgets/src/network-controller/summary/component.tsx
index cb5dc7545..86075dc0b 100644
--- a/packages/widgets/src/network-controller/summary/component.tsx
+++ b/packages/widgets/src/network-controller/summary/component.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
-import { Box, Center, List, Text, useMantineTheme } from "@mantine/core";
+import { Badge, Card, Group, List, ScrollArea, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
 import { IconCircleCheckFilled, IconCircleXFilled } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
@@ -19,6 +18,8 @@ dayjs.extend(duration);
 
 export default function NetworkControllerSummaryWidget({
   integrationIds,
+  width,
+  displayMode,
 }: WidgetComponentProps<"networkControllerSummary">) {
   const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
@@ -26,33 +27,57 @@ export default function NetworkControllerSummaryWidget({
 
   const t = useI18n();
 
-  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const isAdvanced = displayMode === "advanced";
+  const columns = isAdvanced && width >= 720 ? 2 : 1;
 
   return (
-    <Box h="100%" p="sm">
-      <Center h={"100%"}>
-        <List spacing={"xs"} center>
-          <List.Item icon={<StatusIcon status={data[0]?.wanStatus} />}>WAN</List.Item>
-          <List.Item icon={<StatusIcon status={data[0]?.www.status} />}>
-            <Text>
-              WWW
-              <Text c={"dimmed"} size={"md"} ms={"xs"} span>
-                {data[0]?.www.latency}ms
-              </Text>
-            </Text>
-          </List.Item>
-          <List.Item icon={<StatusIcon status={data[0]?.wifi.status} />}>Wi-Fi</List.Item>
-          <List.Item icon={<StatusIcon status={data[0]?.vpn.status} />}>
-            <Text>
-              VPN
-              <Text c={"dimmed"} size={"md"} ms={"xs"} span>
-                {t("widget.networkControllerSummary.card.vpn.countConnected", { count: `${data[0]?.vpn.users}` })}
-              </Text>
-            </Text>
-          </List.Item>
-        </List>
-      </Center>
-    </Box>
+    <ScrollArea h="100%" p={isAdvanced ? "md" : "sm"}>
+      <SimpleGrid cols={columns} spacing="sm">
+        {summaries.map(({ integration, summary }) => (
+          <Card key={integration.id} p={isAdvanced ? "md" : "xs"} withBorder={summaries.length > 1 || isAdvanced}>
+            <Stack gap="xs">
+              {(isAdvanced || summaries.length > 1) && (
+                <Group justify="space-between" wrap="nowrap">
+                  <Text fw={600} size="sm" truncate="end">
+                    {integration.name}
+                  </Text>
+                  <Badge size="xs" variant="light">
+                    {integration.kind}
+                  </Badge>
+                </Group>
+              )}
+              <List spacing="xs" center>
+                <List.Item icon={<StatusIcon status={summary.wanStatus} />}>WAN</List.Item>
+                <List.Item icon={<StatusIcon status={summary.www.status} />}>
+                  <Text>
+                    WWW
+                    <Text c="dimmed" size="sm" ms="xs" span>
+                      {summary.www.latency}ms{isAdvanced ? ` · ${summary.www.ping}ms` : ""}
+                    </Text>
+                  </Text>
+                </List.Item>
+                <List.Item icon={<StatusIcon status={summary.wifi.status} />}>
+                  Wi-Fi{isAdvanced ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
+                </List.Item>
+                {isAdvanced && (
+                  <List.Item icon={<StatusIcon status={summary.lan.status} />}>
+                    LAN · {summary.lan.users + summary.lan.guests}
+                  </List.Item>
+                )}
+                <List.Item icon={<StatusIcon status={summary.vpn.status} />}>
+                  <Text>
+                    VPN
+                    <Text c="dimmed" size="sm" ms="xs" span>
+                      {t("widget.networkControllerSummary.card.vpn.countConnected", { count: `${summary.vpn.users}` })}
+                    </Text>
+                  </Text>
+                </List.Item>
+              </List>
+            </Stack>
+          </Card>
+        ))}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
 
@@ -61,5 +86,6 @@ const StatusIcon = ({ status }: { status?: "enabled" | "disabled" }) => {
   if (status === "enabled") {
     return <IconCircleCheckFilled size={20} color={mantineTheme.colors.green[6]} />;
   }
-  return <IconCircleXFilled size={20} color={mantineTheme.colors.red[6]} />;
+  if (status === "disabled") return <IconCircleXFilled size={20} color={mantineTheme.colors.red[6]} />;
+  return <IconCircleXFilled size={20} color={mantineTheme.colors.gray[6]} />;
 };
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 9fdd692fb..e9bed344e 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { MouseEvent as ReactMouseEvent } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import {
   ActionIcon,
   Box,
@@ -13,7 +13,9 @@ import {
   Popover,
   ScrollArea,
   Stack,
+  Text,
   TextInput,
+  Tooltip,
   useMantineColorScheme,
   useMantineTheme,
 } from "@mantine/core";
@@ -89,16 +91,63 @@ const controlIconProps = {
   stroke: 1.5,
 };
 
-export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: WidgetComponentProps<"notebook">) {
-  const [content, setContent] = useState(options.content);
-  const previousContentRef = useRef(content);
+interface NotebookPersistedState {
+  itemId: string | undefined;
+  content: string;
+  previousContent: string;
+  isEditing: boolean;
+  saveError: string | null;
+}
+
+export function Notebook({
+  options,
+  setOptions,
+  isEditMode,
+  boardId,
+  itemId,
+  displayMode,
+  height,
+  widgetStateRef,
+}: WidgetComponentProps<"notebook">) {
+  const persistedState = widgetStateRef?.current?.notebook as NotebookPersistedState | undefined;
+  const canHydratePersistedState = persistedState?.itemId === itemId;
+  const initialContent = canHydratePersistedState ? (persistedState?.content ?? options.content) : options.content;
+  const [content, setContent] = useState(initialContent);
+  const previousContentRef = useRef(
+    canHydratePersistedState ? (persistedState?.previousContent ?? initialContent) : initialContent,
+  );
+  const [saveError, setSaveError] = useState<string | null>(
+    canHydratePersistedState ? (persistedState?.saveError ?? null) : null,
+  );
 
   const board = useRequiredBoard();
   const { data: session } = useSession();
   const { hasChangeAccess } = constructBoardPermissions(board, session);
 
   const canChange = !isEditMode && hasChangeAccess;
-  const [isEditing, setIsEditing] = useState(false);
+  const [isEditing, setIsEditing] = useState(canHydratePersistedState ? (persistedState?.isEditing ?? false) : false);
+  const canChangeRef = useRef(canChange);
+  const allowReadOnlyCheckRef = useRef(options.allowReadOnlyCheck);
+  const readOnlyCheckEventName = `homarr:notebook-read-only-check:${useId()}`;
+
+  useEffect(() => {
+    canChangeRef.current = canChange;
+    allowReadOnlyCheckRef.current = options.allowReadOnlyCheck;
+  }, [canChange, options.allowReadOnlyCheck]);
+
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      notebook: {
+        itemId,
+        content,
+        previousContent: previousContentRef.current,
+        isEditing,
+        saveError,
+      },
+    };
+  }, [content, isEditing, itemId, saveError, widgetStateRef]);
 
   const { primaryColor } = useMantineTheme();
   const { colorScheme } = useMantineColorScheme();
@@ -108,6 +157,37 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
   const tControls = useScopedI18n("widget.notebook.controls");
   const t = useI18n();
 
+  const handleContentUpdate = useCallback(
+    async (contentUpdate: string) => {
+      setSaveError(null);
+
+      try {
+        if (boardId && itemId) {
+          await mutateAsync({ boardId, itemId, content: contentUpdate });
+        }
+        previousContentRef.current = contentUpdate;
+        if (widgetStateRef) {
+          widgetStateRef.current = {
+            ...widgetStateRef.current,
+            notebook: {
+              itemId,
+              content: contentUpdate,
+              previousContent: contentUpdate,
+              isEditing,
+              saveError: null,
+            },
+          };
+        }
+        setOptions({ newOptions: { content: contentUpdate } });
+        return true;
+      } catch (error) {
+        setSaveError(error instanceof Error ? error.message : t("widget.notebook.saveFailed"));
+        return false;
+      }
+    },
+    [boardId, isEditing, itemId, mutateAsync, setOptions, t, widgetStateRef],
+  );
+
   const editor = useEditor(
     {
       extensions: [
@@ -162,10 +242,10 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
         TaskItem.configure({
           nested: true,
           onReadOnlyChecked: (node, checked) => {
-            if (!options.allowReadOnlyCheck) return false;
-            if (!canChange) return false;
+            if (!allowReadOnlyCheckRef.current) return false;
+            if (!canChangeRef.current) return false;
 
-            const event = new CustomEvent("onReadOnlyCheck", {
+            const event = new CustomEvent(readOnlyCheckEventName, {
               detail: { node, checked },
             });
             dispatchEvent(event);
@@ -184,60 +264,51 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
         setContent(editor.getHTML());
       },
       onCreate: ({ editor }) => {
-        editor.setEditable(false);
+        editor.setEditable(isEditing);
       },
     },
     [],
   );
 
-  const handleOnReadOnlyCheck = (event: CustomEventInit<{ node: Node; checked: boolean }>) => {
-    if (!options.allowReadOnlyCheck) return;
-    if (!editor) return;
+  const handleOnReadOnlyCheck = useCallback(
+    (event: Event) => {
+      if (!allowReadOnlyCheckRef.current) return;
+      if (!editor) return;
+      const { detail } = event as CustomEvent<{ node: Node; checked: boolean }>;
 
-    editor.state.doc.descendants((subnode, pos) => {
-      if (!event.detail) return;
-      if (!subnode.eq(event.detail.node)) return;
+      editor.state.doc.descendants((subnode, pos) => {
+        if (!detail) return;
+        if (!subnode.eq(detail.node)) return;
 
-      const { tr } = editor.state;
-      tr.setNodeMarkup(pos, undefined, {
-        ...event.detail.node.attrs,
-        checked: event.detail.checked,
+        const { tr } = editor.state;
+        tr.setNodeMarkup(pos, undefined, {
+          ...detail.node.attrs,
+          checked: detail.checked,
+        });
+        editor.view.dispatch(tr);
+        const nextContent = editor.getHTML();
+        setContent(nextContent);
+        void handleContentUpdate(nextContent).then((wasSaved) => {
+          if (wasSaved) return;
+          setContent(previousContentRef.current);
+          editor.commands.setContent(previousContentRef.current);
+        });
       });
-      editor.view.dispatch(tr);
-      setContent(editor.getHTML());
-      handleContentUpdate(editor.getHTML());
-    });
-  };
-
-  addEventListener("onReadOnlyCheck", handleOnReadOnlyCheck);
-
-  const handleContentUpdate = useCallback(
-    (contentUpdate: string) => {
-      previousContentRef.current = contentUpdate;
-      setOptions({ newOptions: { content: contentUpdate } });
-
-      // This is not available in preview mode
-      if (boardId && itemId) {
-        void mutateAsync({ boardId, itemId, content: contentUpdate });
-      }
     },
-    [boardId, itemId, mutateAsync, setOptions],
+    [editor, handleContentUpdate],
   );
 
-  const handleEditToggleCallback = useCallback(
-    (previous: boolean) => {
-      const current = !previous;
-      if (!editor) return current;
-      editor.setEditable(current);
+  useEffect(() => {
+    addEventListener(readOnlyCheckEventName, handleOnReadOnlyCheck);
+    return () => removeEventListener(readOnlyCheckEventName, handleOnReadOnlyCheck);
+  }, [handleOnReadOnlyCheck, readOnlyCheckEventName]);
 
-      if (previous) {
-        handleContentUpdate(content);
-      }
-
-      return current;
-    },
-    [content, editor, handleContentUpdate],
-  );
+  useEffect(() => {
+    if (isEditing || !editor || options.content === previousContentRef.current) return;
+    previousContentRef.current = options.content;
+    setContent(options.content);
+    editor.commands.setContent(options.content);
+  }, [editor, isEditing, options.content]);
 
   const handleEditCancelCallback = useCallback(() => {
     if (!editor) return false;
@@ -264,9 +335,20 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
     });
   }, [setIsEditing, handleEditCancelCallback, openConfirmModal, t]);
 
-  const handleEditToggle = useCallback(() => {
-    setIsEditing(handleEditToggleCallback);
-  }, [setIsEditing, handleEditToggleCallback]);
+  const handleEditToggle = useCallback(async () => {
+    if (!editor) return;
+    if (!isEditing) {
+      setSaveError(null);
+      editor.setEditable(true);
+      setIsEditing(true);
+      return;
+    }
+
+    const wasSaved = await handleContentUpdate(content);
+    if (!wasSaved) return;
+    editor.setEditable(false);
+    setIsEditing(false);
+  }, [content, editor, handleContentUpdate, isEditing]);
 
   const handleDoubleClick = useCallback(
     (event: ReactMouseEvent<HTMLDivElement>) => {
@@ -276,18 +358,26 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
       if (event.target instanceof Element && event.target.closest("button, a")) {
         return;
       }
-      setIsEditing(handleEditToggleCallback);
+      setSaveError(null);
+      editor?.setEditable(true);
+      setIsEditing(true);
     },
-    [canChange, isEditing, setIsEditing, handleEditToggleCallback],
+    [canChange, editor, isEditing],
   );
 
+  const documentText = editor?.getText().trim() ?? "";
+  const documentStats = {
+    characters: documentText.length,
+    words: documentText.length === 0 ? 0 : documentText.split(/\s+/).length,
+  };
+
   return (
     <Box h="100%" onDoubleClick={handleDoubleClick}>
       <RichTextEditor
         p={0}
         mt={0}
         h="100%"
-        onKeyDown={isEditing ? getHotkeyHandler([[hotkeys.saveNotebook, handleEditToggle]]) : undefined}
+        onKeyDown={isEditing ? getHotkeyHandler([[hotkeys.saveNotebook, () => void handleEditToggle()]]) : undefined}
         editor={editor}
         styles={(theme) => ({
           root: {
@@ -304,7 +394,7 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
           },
           content: {
             backgroundColor: "transparent",
-            padding: "0.5rem",
+            padding: height < 120 && displayMode !== "advanced" ? "0.25rem" : "0.5rem",
             height: "100%",
           },
           typographyStylesProvider: {
@@ -314,7 +404,7 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
       >
         <RichTextEditor.Toolbar
           style={{
-            display: isEditing && options.showToolbar === true ? "flex" : "none",
+            display: isEditing && options.showToolbar === true && displayMode === "advanced" ? "flex" : "none",
           }}
         >
           <RichTextEditor.ControlsGroup>
@@ -442,6 +532,27 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
           <RichTextEditor.Content />
         </ScrollArea>
       </RichTextEditor>
+      {displayMode === "advanced" && (
+        <Group pos="absolute" bottom={4} right={8} gap="xs">
+          {saveError && (
+            <Tooltip label={saveError} multiline>
+              <Text
+                size="xs"
+                c="red"
+                lineClamp={1}
+                maw={320}
+                tabIndex={0}
+                aria-label={`${t("widget.notebook.saveFailed")}. ${saveError}`}
+              >
+                {t("widget.notebook.saveFailed")}
+              </Text>
+            </Tooltip>
+          )}
+          <Text size="xs" c="dimmed">
+            {t("widget.notebook.documentStats", documentStats)}
+          </Text>
+        </Group>
+      )}
       {canChange && (
         <>
           <ActionIcon
@@ -455,7 +566,7 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W
             color={primaryColor}
             variant="light"
             size={30}
-            onClick={handleEditToggle}
+            onClick={() => void handleEditToggle()}
           >
             {isEditing ? <IconDeviceFloppy {...iconProps} /> : <IconEdit {...iconProps} />}
           </ActionIcon>
diff --git a/packages/widgets/src/notifications/component.tsx b/packages/widgets/src/notifications/component.tsx
index 3b04393d0..421471956 100644
--- a/packages/widgets/src/notifications/component.tsx
+++ b/packages/widgets/src/notifications/component.tsx
@@ -1,78 +1,110 @@
 "use client";
 
 import { useMemo } from "react";
-import { Avatar, Card, Flex, Group, ScrollArea, Stack, Text } from "@mantine/core";
+import { Avatar, Badge, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
 import { IconClock } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import { useTimeAgo } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 
-export default function NotificationsWidget({ options, integrationIds }: WidgetComponentProps<"notifications">) {
+export default function NotificationsWidget({
+  options,
+  integrationIds,
+  width,
+  displayMode,
+}: WidgetComponentProps<"notifications">) {
   const { data: notificationIntegrations = [] } = clientApi.widget.notifications.getNotifications.useQuery({
     ...options,
     integrationIds,
   });
 
-  const t = useScopedI18n("widget.notifications");
+  const t = useI18n();
 
   const board = useRequiredBoard();
 
   const sortedNotifications = useMemo(
     () =>
       notificationIntegrations
-        .flatMap((integration) => integration.data)
+        .flatMap((integration) =>
+          integration.data.map((notification) => ({
+            ...notification,
+            compositeKey: `${integration.integration.id}:${notification.id}`,
+            integrationName: integration.integration.name,
+          })),
+        )
         .sort((entryA, entryB) => entryB.time.getTime() - entryA.time.getTime()),
     [notificationIntegrations],
   );
+  const failedIntegrations = notificationIntegrations.filter(
+    (integration): integration is typeof integration & { error: string } => Boolean(integration.error),
+  );
+  const isAdvanced = displayMode === "advanced";
+  const columns = isAdvanced && width >= 720 ? 2 : 1;
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" p="sm">
-      <Stack w={"100%"} gap="sm">
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
+      <Stack w="100%" gap="xs">
+        {failedIntegrations.length > 0 && (
+          <Group gap={4} wrap="wrap">
+            {failedIntegrations.map((integration) => (
+              <Tooltip key={integration.integration.id} label={integration.error} multiline maw={360}>
+                <Badge color="red" variant="light" size="xs">
+                  {integration.integration.name}: {t("common.error")}
+                </Badge>
+              </Tooltip>
+            ))}
+          </Group>
+        )}
         {sortedNotifications.length > 0 ? (
-          sortedNotifications.map((notification) => (
-            <Card
-              key={notification.id}
-              component={notification.href ? "a" : "div"}
-              href={notification.href}
-              target={notification.href ? "_blank" : undefined}
-              rel={notification.href ? "noopener noreferrer" : undefined}
-              radius={board.itemRadius}
-              w="100%"
-              p="sm"
-              style={{ color: "inherit", textDecoration: "none" }}
-            >
-              <Flex gap="sm" align="flex-start" w="100%">
-                {!options.hideLogos && notification.source?.iconUrl && (
-                  <Avatar
-                    src={notification.source.iconUrl}
-                    alt={notification.source.name}
-                    size="sm"
-                    radius={board.itemRadius}
-                  />
-                )}
-
-                <Flex gap="sm" direction="column" w="100%">
-                  {notification.title && (
-                    <Text fz="sm" lh="sm" lineClamp={2}>
-                      {notification.title}
-                    </Text>
+          <SimpleGrid cols={columns} spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
+            {sortedNotifications.map((notification) => (
+              <Card
+                key={notification.compositeKey}
+                component={notification.href ? "a" : "div"}
+                href={notification.href}
+                target={notification.href ? "_blank" : undefined}
+                rel={notification.href ? "noopener noreferrer" : undefined}
+                radius={board.itemRadius}
+                w="100%"
+                p={isAdvanced ? "md" : "xs"}
+                style={{ color: "inherit", textDecoration: "none" }}
+              >
+                <Flex gap="sm" align="flex-start" w="100%">
+                  {!options.hideLogos && notification.source?.iconUrl && (
+                    <Avatar
+                      src={notification.source.iconUrl}
+                      alt={notification.source.name}
+                      size="sm"
+                      radius={board.itemRadius}
+                    />
                   )}
-                  <Text c="dimmed" size="sm" lineClamp={4} style={{ whiteSpace: "pre-line" }}>
-                    {notification.body}
-                  </Text>
 
-                  <InfoDisplay date={notification.time} />
+                  <Flex gap={isAdvanced ? "sm" : 6} direction="column" w="100%" miw={0}>
+                    {notification.title && (
+                      <Text fz={isAdvanced ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
+                        {notification.title}
+                      </Text>
+                    )}
+                    <Text c="dimmed" size="sm" lineClamp={isAdvanced ? 12 : 4} style={{ whiteSpace: "pre-line" }}>
+                      {notification.body}
+                    </Text>
+
+                    <InfoDisplay
+                      date={notification.time}
+                      source={isAdvanced ? (notification.source?.name ?? notification.integrationName) : undefined}
+                    />
+                  </Flex>
                 </Flex>
-              </Flex>
-            </Card>
-          ))
+              </Card>
+            ))}
+          </SimpleGrid>
         ) : (
           <Text size="sm" c="dimmed">
-            {t("noItems")}
+            {t("widget.notifications.noItems")}
           </Text>
         )}
       </Stack>
@@ -80,15 +112,21 @@ export default function NotificationsWidget({ options, integrationIds }: WidgetC
   );
 }
 
-const InfoDisplay = ({ date }: { date: Date }) => {
+const InfoDisplay = ({ date, source }: { date: Date; source?: string }) => {
   const timeAgo = useTimeAgo(date, 30000); // update every 30sec
 
   return (
-    <Group gap={5} align={"center"}>
+    <Group gap={5} align="center" wrap="nowrap">
       <IconClock size={"1rem"} color={"var(--mantine-color-dimmed)"} />
       <Text size="sm" c="dimmed">
         {timeAgo}
       </Text>
+      {source && <Text c="dimmed">•</Text>}
+      {source && (
+        <Text size="xs" c="dimmed" truncate="end">
+          {source}
+        </Text>
+      )}
     </Group>
   );
 };
diff --git a/packages/widgets/src/notifications/index.ts b/packages/widgets/src/notifications/index.ts
index 17fd13393..27273c343 100644
--- a/packages/widgets/src/notifications/index.ts
+++ b/packages/widgets/src/notifications/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
   icon: IconMessage,
+  queryKey: [["widget", "notifications"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/options.ts b/packages/widgets/src/options.ts
index c699e68da..85ef192b9 100644
--- a/packages/widgets/src/options.ts
+++ b/packages/widgets/src/options.ts
@@ -56,6 +56,8 @@ interface DynamicSelectInput extends CommonInput<DynamicSelectOption | null> {
     query: string,
     integrationIds: string[],
     options: Record<string, unknown>,
+    itemId?: string,
+    boardId?: string,
   ) => {
     isPending: boolean;
     options: DynamicSelectOption[];
diff --git a/packages/widgets/src/paperless-ngx/component.tsx b/packages/widgets/src/paperless-ngx/component.tsx
index 08bcee3fb..4744c1bec 100644
--- a/packages/widgets/src/paperless-ngx/component.tsx
+++ b/packages/widgets/src/paperless-ngx/component.tsx
@@ -70,7 +70,13 @@ const heroPartVisibility = {
   ring: "showInboxRing",
 } as const;
 
-export default function PaperlessNgxWidget({ integrationIds, options, width }: WidgetComponentProps<"paperlessNgx">) {
+export default function PaperlessNgxWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"paperlessNgx">) {
   const t = useScopedI18n("widget.paperlessNgx");
   const { data: stats } = clientApi.widget.paperlessNgx.getStats.useQuery({
     integrationId: integrationIds[0] ?? "",
@@ -95,18 +101,20 @@ export default function PaperlessNgxWidget({ integrationIds, options, width }: W
     .map(([, statKey]) => statKey)
     .filter((statKey) => !(showHero && gridHiddenWhenHeroShown.has(statKey)));
 
-  const gridCols = getGridCols(width);
-  const ringSize = getRingSize(width);
+  const advanced = displayMode === "advanced";
+  const gridCols = advanced ? Math.max(1, Math.min(5, visibleStatKeys.length)) : getGridCols(width);
+  const ringSize = advanced ? 112 : getRingSize(width);
   const iconSize = getIconSize(width);
   const ringLabelSize = getRingLabelSize(ringSize);
   const hasContent = showHero || visibleStatKeys.length > 0;
 
   const heroLayoutClass =
     heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
-  const heroRingClass = heroVariantByRing[String(options.showInboxRing) as keyof typeof heroVariantByRing];
+  const showInboxRing = options.showInboxRing && (advanced || height >= 120);
+  const heroRingClass = heroVariantByRing[String(showInboxRing) as keyof typeof heroVariantByRing];
 
   const visibleHeroParts = Object.entries(heroPartVisibility).filter(
-    ([, optionKey]) => options[optionKey as keyof typeof options],
+    ([partKey, optionKey]) => options[optionKey as keyof typeof options] && (partKey !== "ring" || showInboxRing),
   );
 
   const heroPartRenderers = {
@@ -140,7 +148,11 @@ export default function PaperlessNgxWidget({ integrationIds, options, width }: W
   } as const;
 
   return (
-    <div className={classes.root}>
+    <div
+      className={classes.root}
+      data-display-mode={displayMode}
+      style={advanced ? { padding: 16, gap: 16 } : undefined}
+    >
       {showHero && (
         <div className={`${classes.hero} ${heroLayoutClass} ${heroRingClass}`}>
           {visibleHeroParts.map(([partKey]) => (
diff --git a/packages/widgets/src/paperless-ngx/index.ts b/packages/widgets/src/paperless-ngx/index.ts
index ef6fd2e5a..af88489ab 100644
--- a/packages/widgets/src/paperless-ngx/index.ts
+++ b/packages/widgets/src/paperless-ngx/index.ts
@@ -5,9 +5,11 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("paperlessNgx", {
   icon: IconFileText,
+  queryKey: [["widget", "paperlessNgx"]],
   refetchInterval: null,
   supportedIntegrations: ["paperlessNgx"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showInboxRatio: factory.switch({
diff --git a/packages/widgets/src/patchmon/component.tsx b/packages/widgets/src/patchmon/component.tsx
index f1dae3e29..951412254 100644
--- a/packages/widgets/src/patchmon/component.tsx
+++ b/packages/widgets/src/patchmon/component.tsx
@@ -75,7 +75,13 @@ const getLayoutMode = (width: number, height: number): LayoutMode => {
   return "comfortable";
 };
 
-export default function PatchMonWidget({ integrationIds, options, width, height }: WidgetComponentProps<"patchmon">) {
+export default function PatchMonWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"patchmon">) {
   const t = useScopedI18n("widget.patchmon");
   const integrationId = integrationIds[0] ?? "";
   const { data: stats } = clientApi.widget.patchmon.getStats.useQuery({ integrationId }, { staleTime: 60 * 1000 });
@@ -98,18 +104,20 @@ export default function PatchMonWidget({ integrationIds, options, width, height
     .map(([, statKey]) => statKey);
 
   const colorContext = { totalHosts: stats.totalHosts };
-  const layout = getLayoutMode(width, height);
-  const isLandscape = width / height > 2.5;
+  const advanced = displayMode === "advanced";
+  const layout = advanced ? "spacious" : getLayoutMode(width, height);
+  const isLandscape = !advanced && width / height > 2.5;
   const isTinySquare = width < 160 && height < 160;
   const isShortLandscape = width >= 160 && height < 160;
-  const isCompactSurface = isTinySquare || isShortLandscape;
+  const isCompactSurface = !advanced && (isTinySquare || isShortLandscape);
   const isNarrow = width < 180;
   const osDisplayMode = options.osDisplayMode as "bars" | "donut";
   const showOsData = options.showOsDistribution && stats.osDistribution.length > 0;
 
   const showIcons = layout !== "mini";
   const showLabels = layout !== "mini";
-  const showHero = options.showComplianceHero && (!isLandscape || isCompactSurface) && width >= 90 && height >= 90;
+  const showHero =
+    options.showComplianceHero && (advanced || !isLandscape || isCompactSurface) && width >= 90 && height >= 90;
   const showHeroText = showHero && shouldShowComplianceHeroText(width);
   const showHeroRingOnly = showHero && !showHeroText;
   const compactPrimaryContent = isCompactSurface
@@ -120,10 +128,10 @@ export default function PatchMonWidget({ integrationIds, options, width, height
       })
     : null;
   const showStats = visibleStatKeys.length > 0 && !isCompactSurface;
-  const showOsSection = showOsData && !isCompactSurface && height > 200;
+  const showOsSection = showOsData && !isCompactSurface && (advanced || height > 200);
   const showCompactFooter = isCompactSurface && height >= 110;
-  const showFooter = isCompactSurface ? showCompactFooter : !isLandscape && height > 220;
-  const showOsLegend = osDisplayMode === "donut" && width >= 380 && height >= 300;
+  const showFooter = advanced || (isCompactSurface ? showCompactFooter : !isLandscape && height > 220);
+  const showOsLegend = osDisplayMode === "donut" && (advanced || (width >= 380 && height >= 300));
 
   const hasContent = compactPrimaryContent !== null || showStats || showOsSection || showHero;
 
@@ -272,10 +280,10 @@ export default function PatchMonWidget({ integrationIds, options, width, height
     </div>
   );
 
-  const needsScroll = layout === "mini" || layout === "compact";
+  const needsScroll = !advanced && (layout === "mini" || layout === "compact");
 
   return (
-    <div className={classes.root}>
+    <div className={classes.root} data-display-mode={displayMode}>
       {showHero && (
         <ComplianceHero
           compliancePercent={compliancePercent}
diff --git a/packages/widgets/src/patchmon/index.ts b/packages/widgets/src/patchmon/index.ts
index 6f97be83f..6b0503844 100644
--- a/packages/widgets/src/patchmon/index.ts
+++ b/packages/widgets/src/patchmon/index.ts
@@ -8,8 +8,10 @@ import { patchmonOptionsSuperRefine } from "./threshold-validation";
 
 export const { definition, componentLoader } = createWidgetDefinition("patchmon", {
   icon: IconShieldCheck,
+  queryKey: [["widget", "patchmon"]],
   supportedIntegrations: ["patchmon"],
   integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
@@ -188,18 +190,42 @@ export const { definition, componentLoader } = createWidgetDefinition("patchmon"
         useCustomThresholds: {
           shouldHide: (options) => !options.enableThresholdColors,
         },
-        hostsNeedingUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsNeedingUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        securityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        hostsWithSecurityUpdatesCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsThresholdMode: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsWarningAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
-        upToDateHostsCriticalAt: { shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds },
+        hostsNeedingUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsNeedingUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        securityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        hostsWithSecurityUpdatesCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsThresholdMode: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsWarningAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
+        upToDateHostsCriticalAt: {
+          shouldHide: (options) => !options.enableThresholdColors || !options.useCustomThresholds,
+        },
         totalOutdatedPackagesThresholdMode: {
           shouldHide: (options) =>
             !options.enableThresholdColors || !options.useCustomThresholds || !options.showTotalOutdatedPackages,
diff --git a/packages/widgets/src/patchmon/os-distribution-section.tsx b/packages/widgets/src/patchmon/os-distribution-section.tsx
index cb21cb203..4cb03447c 100644
--- a/packages/widgets/src/patchmon/os-distribution-section.tsx
+++ b/packages/widgets/src/patchmon/os-distribution-section.tsx
@@ -9,16 +9,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./component.module.css";
 
-const OS_COLORS = [
-  "blue.6",
-  "orange.6",
-  "green.6",
-  "grape.6",
-  "cyan.6",
-  "pink.6",
-  "yellow.6",
-  "teal.6",
-] as const;
+const OS_COLORS = ["blue.6", "orange.6", "green.6", "grape.6", "cyan.6", "pink.6", "yellow.6", "teal.6"] as const;
 
 interface OsDistributionSectionProps {
   entries: PatchMonOsDistributionEntry[];
@@ -73,13 +64,7 @@ export function OsDistributionSection({
         )}
         <div className={`${classes.osDonutContent} ${showLegend ? classes.osDonutContentWithLegend : ""}`}>
           <div className={classes.osDonut}>
-            <DonutChart
-              data={chartData}
-              size={donutSize}
-              withTooltip
-              tooltipDataSource="segment"
-              paddingAngle={2}
-            />
+            <DonutChart data={chartData} size={donutSize} withTooltip tooltipDataSource="segment" paddingAngle={2} />
           </div>
           {showLegend && (
             <div className={classes.osLegend}>
@@ -115,7 +100,12 @@ export function OsDistributionSection({
       <div className={classes.compactOsBars}>
         {compactEntries.map((entry, i) => (
           <div key={`${entry.name}-${entry.osVersion ?? ""}`} className={classes.compactOsBar}>
-            <Text size="xs" className={classes.compactOsLabel} truncate="end" title={formatOsLabel(entry, showOsVersion)}>
+            <Text
+              size="xs"
+              className={classes.compactOsLabel}
+              truncate="end"
+              title={formatOsLabel(entry, showOsVersion)}
+            >
               {formatOsLabel(entry, showOsVersion)}
             </Text>
             <Group gap={6} wrap="nowrap" className={classes.osBarGroup}>
diff --git a/packages/widgets/src/patchmon/stat-colors.ts b/packages/widgets/src/patchmon/stat-colors.ts
index 7ecd035ac..1974f73a2 100644
--- a/packages/widgets/src/patchmon/stat-colors.ts
+++ b/packages/widgets/src/patchmon/stat-colors.ts
@@ -13,11 +13,7 @@ export type PatchMonStatKey =
 
 export type ColorablePatchMonStatKey = Extract<
   PatchMonStatKey,
-  | "hostsNeedingUpdates"
-  | "securityUpdates"
-  | "hostsWithSecurityUpdates"
-  | "upToDateHosts"
-  | "totalOutdatedPackages"
+  "hostsNeedingUpdates" | "securityUpdates" | "hostsWithSecurityUpdates" | "upToDateHosts" | "totalOutdatedPackages"
 >;
 
 export type StatSeverity = "green" | "yellow" | "red" | "neutral";
diff --git a/packages/widgets/src/patchmon/test/stat-colors.spec.ts b/packages/widgets/src/patchmon/test/stat-colors.spec.ts
index 12596f499..22d296829 100644
--- a/packages/widgets/src/patchmon/test/stat-colors.spec.ts
+++ b/packages/widgets/src/patchmon/test/stat-colors.spec.ts
@@ -117,11 +117,16 @@ describe("resolveStatColor options", () => {
   test("handles zero total hosts for percent-based stats", () => {
     expect(resolveStatColor("upToDateHosts", 0, { totalHosts: 0 }, defaultOptions)).toBe("green");
     expect(
-      resolveStatColor("hostsNeedingUpdates", 1, { totalHosts: 0 }, {
-        ...defaultOptions,
-        useCustomThresholds: true,
-        hostsNeedingUpdatesThresholdMode: "percent",
-      }),
+      resolveStatColor(
+        "hostsNeedingUpdates",
+        1,
+        { totalHosts: 0 },
+        {
+          ...defaultOptions,
+          useCustomThresholds: true,
+          hostsNeedingUpdatesThresholdMode: "percent",
+        },
+      ),
     ).toBe("red");
   });
 
diff --git a/packages/widgets/src/patchmon/test/threshold-validation.spec.ts b/packages/widgets/src/patchmon/test/threshold-validation.spec.ts
index 00dafba3b..008d9746d 100644
--- a/packages/widgets/src/patchmon/test/threshold-validation.spec.ts
+++ b/packages/widgets/src/patchmon/test/threshold-validation.spec.ts
@@ -23,25 +23,27 @@ const baseOptions = {
   totalOutdatedPackagesCriticalAt: 50,
 };
 
-const optionsSchema = z.object({
-  hostsNeedingUpdatesWarningAt: z.number().int().min(0),
-  hostsNeedingUpdatesCriticalAt: z.number().int().min(0),
-  securityUpdatesWarningAt: z.number().int().min(0),
-  securityUpdatesCriticalAt: z.number().int().min(0),
-  hostsWithSecurityUpdatesWarningAt: z.number().int().min(0),
-  hostsWithSecurityUpdatesCriticalAt: z.number().int().min(0),
-  upToDateHostsWarningAt: z.number().int().min(0),
-  upToDateHostsCriticalAt: z.number().int().min(0),
-  totalOutdatedPackagesWarningAt: z.number().int().min(0),
-  totalOutdatedPackagesCriticalAt: z.number().int().min(0),
-  enableThresholdColors: z.boolean(),
-  useCustomThresholds: z.boolean(),
-  hostsNeedingUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  securityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  hostsWithSecurityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
-  upToDateHostsThresholdMode: z.enum(["absolute", "percent"]),
-  totalOutdatedPackagesThresholdMode: z.enum(["absolute", "percent"]),
-}).superRefine(patchmonOptionsSuperRefine);
+const optionsSchema = z
+  .object({
+    hostsNeedingUpdatesWarningAt: z.number().int().min(0),
+    hostsNeedingUpdatesCriticalAt: z.number().int().min(0),
+    securityUpdatesWarningAt: z.number().int().min(0),
+    securityUpdatesCriticalAt: z.number().int().min(0),
+    hostsWithSecurityUpdatesWarningAt: z.number().int().min(0),
+    hostsWithSecurityUpdatesCriticalAt: z.number().int().min(0),
+    upToDateHostsWarningAt: z.number().int().min(0),
+    upToDateHostsCriticalAt: z.number().int().min(0),
+    totalOutdatedPackagesWarningAt: z.number().int().min(0),
+    totalOutdatedPackagesCriticalAt: z.number().int().min(0),
+    enableThresholdColors: z.boolean(),
+    useCustomThresholds: z.boolean(),
+    hostsNeedingUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    securityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    hostsWithSecurityUpdatesThresholdMode: z.enum(["absolute", "percent"]),
+    upToDateHostsThresholdMode: z.enum(["absolute", "percent"]),
+    totalOutdatedPackagesThresholdMode: z.enum(["absolute", "percent"]),
+  })
+  .superRefine(patchmonOptionsSuperRefine);
 
 describe("patchmonOptionsSuperRefine", () => {
   test("accepts percent thresholds within 0-100", () => {
diff --git a/packages/widgets/src/releases/component.tsx b/packages/widgets/src/releases/component.tsx
index ca61d24c3..c0f89c924 100644
--- a/packages/widgets/src/releases/component.tsx
+++ b/packages/widgets/src/releases/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import { Button, Divider, Group, Stack, Text, Title, Tooltip } from "@mantine/core";
+import { Button, Divider, Group, ScrollArea, SimpleGrid, Stack, Text, Title, Tooltip } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import {
   IconArchive,
@@ -37,7 +37,7 @@ const formatRelativeDate = (value: string): string => {
   return isMonths ? value.toUpperCase() : isOtherUnits ? value.toLowerCase() : value;
 };
 
-export default function ReleasesWidget({ options, itemId }: WidgetComponentProps<"releases">) {
+export default function ReleasesWidget({ options, itemId, width, displayMode }: WidgetComponentProps<"releases">) {
   const t = useScopedI18n("widget.releases");
   const now = useNow();
   const formatter = useFormatter();
@@ -48,6 +48,7 @@ export default function ReleasesWidget({ options, itemId }: WidgetComponentProps
     key: "releases-viewed-versions",
     defaultValue: {},
   });
+  const isAdvanced = displayMode === "advanced";
 
   const relativeDateOptions = useMemo(
     () => ({
@@ -174,137 +175,151 @@ export default function ReleasesWidget({ options, itemId }: WidgetComponentProps
   );
 
   return (
-    <Stack gap={0} className="releases">
-      {repositories.map((repository: ReleasesRepositoryResponse) => {
-        const isActive = expandedRepositoryId === repository.id;
-        const hasError = repository.error !== undefined;
+    <ScrollArea h="100%" className="releases">
+      <SimpleGrid
+        cols={isAdvanced ? Math.max(1, Math.floor(width / 420)) : 1}
+        spacing={isAdvanced ? "sm" : 0}
+        p={isAdvanced ? "xs" : 0}
+      >
+        {repositories.map((repository: ReleasesRepositoryResponse) => {
+          const isActive = expandedRepositoryId === repository.id;
+          const hasError = repository.error !== undefined;
 
-        return (
-          <Stack
-            key={repository.id}
-            className={combineClasses(
-              "releases-repository",
-              // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-              `releases-repository-${repository.providerMetadata?.name ?? "error"}-${repository.name || repository.identifier.replace(/[^a-zA-Z0-9]/g, "_")}`,
-              classes.releasesRepository,
-            )}
-            gap={0}
-          >
-            <Group
-              className={combineClasses("releases-repository-header", classes.releasesRepositoryHeader, {
-                [classes.active ?? ""]: isActive,
-              })}
-              p="xs"
-              onClick={() => toggleExpandedDisplay(repository)}
+          return (
+            <Stack
+              key={repository.id}
+              className={combineClasses(
+                "releases-repository",
+                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                `releases-repository-${repository.providerMetadata?.name ?? "error"}-${repository.name || repository.identifier.replace(/[^a-zA-Z0-9]/g, "_")}`,
+                classes.releasesRepository,
+              )}
+              gap={0}
+              style={
+                isAdvanced
+                  ? {
+                      border: "1px solid var(--mantine-color-default-border)",
+                      borderRadius: "var(--mantine-radius-sm)",
+                    }
+                  : undefined
+              }
             >
-              <MaskedOrNormalImage
-                className="releases-repository-header-icon"
-                imageUrl={repository.iconUrl ?? repository.providerMetadata?.iconUrl}
-                hasColor={hasIconColor}
-                style={{
-                  width: "1em",
-                  aspectRatio: "1/1",
-                }}
-              />
-
               <Group
-                className="releases-repository-header-nameVersion-wrapper"
-                gap={5}
-                justify="space-between"
-                miw={0}
-                style={{ flex: 1 }}
+                className={combineClasses("releases-repository-header", classes.releasesRepositoryHeader, {
+                  [classes.active ?? ""]: isActive,
+                })}
+                p="xs"
+                onClick={() => toggleExpandedDisplay(repository)}
               >
-                {!options.showOnlyIcon && (
-                  <Text className="releases-repository-header-name" size="xs">
-                    {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-                    {repository.name || repository.identifier}
-                  </Text>
-                )}
+                <MaskedOrNormalImage
+                  className="releases-repository-header-icon"
+                  imageUrl={repository.iconUrl ?? repository.providerMetadata?.iconUrl}
+                  hasColor={hasIconColor}
+                  style={{
+                    width: "1em",
+                    aspectRatio: "1/1",
+                  }}
+                />
 
-                <Tooltip
-                  className="releases-repository-header-version-tooltip"
-                  withArrow
-                  arrowSize={5}
-                  label={repository.latestRelease}
-                  events={{ hover: repository.latestRelease !== undefined, focus: false, touch: false }}
+                <Group
+                  className="releases-repository-header-nameVersion-wrapper"
+                  gap={5}
+                  justify="space-between"
+                  miw={0}
+                  style={{ flex: 1 }}
                 >
-                  <Text
-                    className="releases-repository-header-version"
-                    size="xs"
-                    fw={700}
-                    truncate="end"
-                    c={hasError ? "red" : "text"}
-                    style={{ flexShrink: 1 }}
+                  {!options.showOnlyIcon && (
+                    <Text className="releases-repository-header-name" size="xs">
+                      {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                      {repository.name || repository.identifier}
+                    </Text>
+                  )}
+
+                  <Tooltip
+                    className="releases-repository-header-version-tooltip"
+                    withArrow
+                    arrowSize={5}
+                    label={repository.latestRelease}
+                    events={{ hover: repository.latestRelease !== undefined, focus: false, touch: false }}
                   >
-                    {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
-                  </Text>
-                </Tooltip>
-              </Group>
+                    <Text
+                      className="releases-repository-header-version"
+                      size="xs"
+                      fw={700}
+                      truncate="end"
+                      c={hasError ? "red" : "text"}
+                      style={{ flexShrink: 1 }}
+                    >
+                      {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
+                    </Text>
+                  </Tooltip>
+                </Group>
 
-              <Group className="releases-repository-header-releaseDate-wrapper" gap={5} style={{ flex: "0 0 auto" }}>
-                <Text
-                  className="releases-repository-header-releaseDate"
-                  size="xs"
-                  c={
-                    repository.viewed
-                      ? "green"
-                      : repository.isNewRelease
-                        ? "primaryColor"
-                        : repository.isStaleRelease
-                          ? "secondaryColor"
-                          : "dimmed"
-                  }
-                >
-                  {repository.latestReleaseAt &&
-                    !hasError &&
-                    formatter.relativeTime(repository.latestReleaseAt, {
-                      now,
-                      style: "long",
-                    })}
-                </Text>
-                {hasError ? (
-                  <IconTriangleFilled
-                    className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-error"
-                    size={10}
-                    color="var(--mantine-color-red-filled)"
-                  />
-                ) : repository.viewed ? (
-                  <IconCheck
-                    className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-confirmed"
-                    size={10}
-                    color="green"
-                  />
-                ) : (
-                  (repository.isNewRelease || repository.isStaleRelease) && (
-                    <IconCircleFilled
-                      className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-marker"
+                <Group className="releases-repository-header-releaseDate-wrapper" gap={5} style={{ flex: "0 0 auto" }}>
+                  <Text
+                    className="releases-repository-header-releaseDate"
+                    size="xs"
+                    c={
+                      repository.viewed
+                        ? "green"
+                        : repository.isNewRelease
+                          ? "primaryColor"
+                          : repository.isStaleRelease
+                            ? "secondaryColor"
+                            : "dimmed"
+                    }
+                  >
+                    {repository.latestReleaseAt &&
+                      !hasError &&
+                      formatter.relativeTime(repository.latestReleaseAt, {
+                        now,
+                        style: "long",
+                      })}
+                  </Text>
+                  {hasError ? (
+                    <IconTriangleFilled
+                      className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-error"
                       size={10}
-                      color={
-                        repository.isNewRelease
-                          ? "var(--mantine-color-primaryColor-filled)"
-                          : "var(--mantine-color-secondaryColor-filled)"
-                      }
+                      color="var(--mantine-color-red-filled)"
                     />
-                  )
-                )}
+                  ) : repository.viewed ? (
+                    <IconCheck
+                      className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-confirmed"
+                      size={10}
+                      color="green"
+                    />
+                  ) : (
+                    (repository.isNewRelease || repository.isStaleRelease) && (
+                      <IconCircleFilled
+                        className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-marker"
+                        size={10}
+                        color={
+                          repository.isNewRelease
+                            ? "var(--mantine-color-primaryColor-filled)"
+                            : "var(--mantine-color-secondaryColor-filled)"
+                        }
+                      />
+                    )
+                  )}
+                </Group>
               </Group>
-            </Group>
-            {options.showDetails && (
-              <DetailsDisplay repository={repository} toggleExpandedDisplay={toggleExpandedDisplay} />
-            )}
-            {isActive && (
-              <ExpandedDisplay
-                repository={repository}
-                hasIconColor={hasIconColor}
-                markReleaseViewed={markReleaseViewed}
-                toggleExpandedDisplay={toggleExpandedDisplay}
-              />
-            )}
-            <Divider className="releases-repository-divider" />
-          </Stack>
-        );
-      })}
-    </Stack>
+              {(options.showDetails || isAdvanced) && (
+                <DetailsDisplay repository={repository} toggleExpandedDisplay={toggleExpandedDisplay} />
+              )}
+              {isActive && (
+                <ExpandedDisplay
+                  repository={repository}
+                  hasIconColor={hasIconColor}
+                  markReleaseViewed={markReleaseViewed}
+                  toggleExpandedDisplay={toggleExpandedDisplay}
+                />
+              )}
+              <Divider className="releases-repository-divider" />
+            </Stack>
+          );
+        })}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
 
diff --git a/packages/widgets/src/releases/index.ts b/packages/widgets/src/releases/index.ts
index 62fa7ebab..88ae80cda 100644
--- a/packages/widgets/src/releases/index.ts
+++ b/packages/widgets/src/releases/index.ts
@@ -14,6 +14,7 @@ const relativeDateSchema = z
 
 export const { definition, componentLoader } = createWidgetDefinition("releases", {
   icon: IconRocket,
+  queryKey: [["widget", "releases"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 626f87328..a3d9dd3a2 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, Flex, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
+import { Card, Flex, Group, Image, ScrollArea, SimpleGrid, Text } from "@mantine/core";
 import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
@@ -17,7 +17,7 @@ const useLiveFeedEntries = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]
   return feedEntries;
 };
 
-export default function RssFeed({ options, width }: WidgetComponentProps<"rssFeed">) {
+export default function RssFeed({ options, width, displayMode }: WidgetComponentProps<"rssFeed">) {
   const feedEntries = useLiveFeedEntries({
     urls: options.feedUrls,
     maximumAmountPosts: typeof options.maximumAmountPosts === "number" ? options.maximumAmountPosts : 100,
@@ -27,60 +27,109 @@ export default function RssFeed({ options, width }: WidgetComponentProps<"rssFee
 
   const languageDir = options.enableRtl ? "RTL" : "LTR";
 
-  const isNarrow = width < 128 * 3;
+  const isAdvanced = displayMode === "advanced";
+  const isNarrow = !isAdvanced && width < 128 * 3;
+  const columns = isAdvanced && width >= 720 ? 2 : 1;
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" p="sm">
-      <Stack w={"100%"} gap="sm">
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
+      <SimpleGrid cols={columns} w="100%" spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
         {feedEntries.map((feedEntry) => (
           <Card
             key={feedEntry.id}
             component={"a"}
-            href={feedEntry.link}
+            href={getSafeExternalUrl(feedEntry.link, feedEntry.feedUrl) ?? getSafeExternalUrl(feedEntry.feedUrl)}
             radius={board.itemRadius}
             target="_blank"
+            rel="noopener noreferrer"
             w="100%"
-            p="sm"
+            p={isAdvanced ? "md" : "xs"}
           >
             {feedEntry.enclosure !== undefined && (
               <Image className={classes.backgroundImage} src={feedEntry.enclosure} alt="backdrop" />
             )}
 
-            <Group wrap="nowrap">
+            <Group wrap="nowrap" align="flex-start">
               {feedEntry.enclosure !== undefined && options.showPosterImage && !isNarrow && (
-                <Image src={feedEntry.enclosure} alt={feedEntry.title} w={140} h={140} radius="sm" />
+                <Image
+                  src={feedEntry.enclosure}
+                  alt={feedEntry.title}
+                  w={isAdvanced ? 180 : 112}
+                  h={isAdvanced ? 120 : 112}
+                  radius="sm"
+                  fit="cover"
+                />
               )}
 
-              <Flex gap="sm" direction="column" w="100%">
-                <Text dir={languageDir} fz="sm" lh="sm" lineClamp={2}>
+              <Flex gap={isAdvanced ? "sm" : 6} direction="column" w="100%" miw={0}>
+                <Text dir={languageDir} fz={isAdvanced ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
                   {feedEntry.title}
                 </Text>
                 {!options.hideDescription && feedEntry.description && (
                   <Text
-                    className={feedEntry.description}
                     dir={languageDir}
                     c="dimmed"
                     size="sm"
-                    lineClamp={options.textLinesClamp}
-                    dangerouslySetInnerHTML={{ __html: feedEntry.description }}
-                  />
+                    lineClamp={isAdvanced ? Math.max(options.textLinesClamp, 8) : options.textLinesClamp}
+                  >
+                    {feedDescriptionToText(feedEntry.description)}
+                  </Text>
                 )}
 
-                {feedEntry.published && <InfoDisplay date={dayjs(feedEntry.published).fromNow()} />}
+                <InfoDisplay
+                  source={isAdvanced ? getHostname(feedEntry.feedUrl) : undefined}
+                  date={feedEntry.published ? dayjs(feedEntry.published).fromNow() : undefined}
+                />
               </Flex>
             </Group>
           </Card>
         ))}
-      </Stack>
+      </SimpleGrid>
     </ScrollArea>
   );
 }
 
-const InfoDisplay = ({ date }: { date: string }) => (
-  <Group gap={5} align={"center"}>
-    <IconClock size={"1rem"} color={"var(--mantine-color-dimmed)"} />
-    <Text size="sm" c="dimmed">
-      {date}
-    </Text>
+export const feedDescriptionToText = (description: string): string => {
+  if (typeof DOMParser !== "undefined") {
+    return new DOMParser().parseFromString(description, "text/html").body.textContent?.trim() ?? "";
+  }
+  return description
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+};
+
+export const getHostname = (url: string): string => {
+  try {
+    return new URL(url).hostname;
+  } catch {
+    return url;
+  }
+};
+
+export const getSafeExternalUrl = (value: unknown, baseUrl?: string): string | undefined => {
+  if (typeof value !== "string") return undefined;
+  try {
+    const url = new URL(value, baseUrl);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+const InfoDisplay = ({ date, source }: { date?: string; source?: string }) => (
+  <Group gap={5} align="center" wrap="nowrap">
+    {date && <IconClock size="1rem" color="var(--mantine-color-dimmed)" />}
+    {date && (
+      <Text size="xs" c="dimmed">
+        {date}
+      </Text>
+    )}
+    {date && source && <Text c="dimmed">•</Text>}
+    {source && (
+      <Text size="xs" c="dimmed" truncate="end">
+        {source}
+      </Text>
+    )}
   </Group>
 );
diff --git a/packages/widgets/src/rssFeed/feed-display.spec.ts b/packages/widgets/src/rssFeed/feed-display.spec.ts
new file mode 100644
index 000000000..3b0b460b9
--- /dev/null
+++ b/packages/widgets/src/rssFeed/feed-display.spec.ts
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+
+import { feedDescriptionToText, getHostname, getSafeExternalUrl } from "./component";
+
+describe("RSS feed display helpers", () => {
+  test("renders feed markup as inert text", () => {
+    expect(feedDescriptionToText('<p>Hello <strong>world</strong><img src=x onerror="alert(1)"></p>')).toBe(
+      "Hello world",
+    );
+  });
+
+  test("handles malformed feed URLs without crashing the widget", () => {
+    expect(getHostname("not a URL")).toBe("not a URL");
+    expect(getHostname("https://example.com/feed.xml")).toBe("example.com");
+  });
+
+  test("only exposes HTTP links from untrusted feed entries", () => {
+    expect(getSafeExternalUrl("https://example.com/story")).toBe("https://example.com/story");
+    expect(getSafeExternalUrl("/story", "https://example.com/feed.xml")).toBe("https://example.com/story");
+    expect(getSafeExternalUrl("javascript:alert(1)")).toBeUndefined();
+    expect(getSafeExternalUrl("not a URL")).toBeUndefined();
+  });
+});
diff --git a/packages/widgets/src/rssFeed/index.ts b/packages/widgets/src/rssFeed/index.ts
index eee7028cb..ec41fd69e 100644
--- a/packages/widgets/src/rssFeed/index.ts
+++ b/packages/widgets/src/rssFeed/index.ts
@@ -12,6 +12,7 @@ import { optionsBuilder } from "../options";
  */
 export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
   icon: IconRss,
+  queryKey: [["widget", "rssFeed"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index f1d6b6e18..e0f90bd52 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -1,11 +1,13 @@
 "use client";
 
 import { useCallback } from "react";
-import { Center, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Badge, Center, Group, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconBinaryTree } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
+import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 
@@ -14,7 +16,10 @@ export default function SmartHomeEntityStateWidget({
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"smartHome-entityState">) {
+  const t = useI18n();
   // It will always have at least one integration as otherwise the NoIntegrationSelectedError would be thrown in item-content.tsx
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const integrationId = integrationIds[0]!;
@@ -23,21 +28,25 @@ export default function SmartHomeEntityStateWidget({
     entityId: options.entityId,
     integrationId,
   };
-  const { data: entityState } = clientApi.widget.smartHome.entityState.useQuery(input);
+  const { data: entity } = clientApi.widget.smartHome.entityDetails.useQuery(input);
+  const canInteract = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
 
   const utils = clientApi.useUtils();
-  const { mutate } = clientApi.widget.smartHome.switchEntity.useMutation({
-    onSettled: () => void utils.widget.smartHome.entityState.invalidate(input),
+  const { mutate, isPending, error } = clientApi.widget.smartHome.switchEntity.useMutation({
+    onSettled: () => void utils.widget.smartHome.entityDetails.invalidate(input),
   });
 
-  const attribute = options.entityUnit.length > 0 ? " " + options.entityUnit : "";
+  const apiUnit = entity?.attributes.unit_of_measurement;
+  const unit = options.entityUnit || (typeof apiUnit === "string" ? apiUnit : "");
+  const attribute = unit.length > 0 ? ` ${unit}` : "";
+  const isActionable = options.clickable && canInteract && !isPending;
 
   const handleClick = useCallback(() => {
     if (isEditMode) {
       return;
     }
 
-    if (!options.clickable) {
+    if (!isActionable) {
       return;
     }
 
@@ -45,7 +54,7 @@ export default function SmartHomeEntityStateWidget({
       entityId: options.entityId,
       integrationId,
     });
-  }, [integrationId, isEditMode, mutate, options.clickable, options.entityId]);
+  }, [integrationId, isActionable, isEditMode, mutate, options.entityId]);
 
   useRegisterSpotlightContextActions(
     `smartHome-entityState-${options.entityId}`,
@@ -62,35 +71,70 @@ export default function SmartHomeEntityStateWidget({
             },
           };
         },
-        disabled: !options.clickable,
+        disabled: !isActionable,
       },
     ],
-    [handleClick, options.clickable, options.displayName, options.entityId],
+    [handleClick, isActionable, options.displayName, options.entityId],
   );
-  const isTiny = width < 128;
+  const isTiny = width < 128 || height < 96;
+  const advancedAttributes = [
+    { key: "unit" as const, value: entity?.attributes.unit_of_measurement },
+    { key: "deviceClass" as const, value: entity?.attributes.device_class },
+    { key: "icon" as const, value: entity?.attributes.icon },
+  ].filter(({ value }) => typeof value === "string" && value.length > 0);
 
   return (
     <UnstyledButton
-      mod={{ "entity-state": entityState, "entity-id": options.entityId }}
+      mod={{ "entity-state": entity?.state, "entity-id": options.entityId }}
       onClick={handleClick}
+      disabled={!isActionable}
+      aria-description={error?.message}
       w="100%"
       h="100%"
       styles={{
         root: {
-          cursor: options.clickable && !isEditMode ? "pointer" : "initial",
+          cursor: isActionable && !isEditMode ? "pointer" : "initial",
           pointerEvents: isEditMode ? "none" : undefined,
         },
       }}
     >
       <Center h="100%" w="100%">
-        <Stack align="center" gap="md">
+        <Stack align="center" gap={isTiny ? 4 : "md"} p="xs" maw="100%">
           <Text ta="center" fw="bold" size={isTiny ? "sm" : "lg"}>
-            {options.displayName}
+            {displayMode === "advanced" && typeof entity?.attributes.friendly_name === "string"
+              ? entity.attributes.friendly_name
+              : options.displayName}
           </Text>
           <Text ta="center" size={isTiny ? "xs" : "lg"}>
-            {entityState}
+            {entity?.state ?? "—"}
             {attribute}
           </Text>
+          {displayMode === "advanced" && entity && (
+            <>
+              <Group justify="center" gap={4}>
+                {advancedAttributes.map(({ key, value }) => (
+                  <Badge key={key} size="xs" variant="light" tt="none">
+                    {t(`widget.smartHome-entityState.advanced.attribute.${key}`)}: {String(value)}
+                  </Badge>
+                ))}
+              </Group>
+              <Text size="xs" c="dimmed">
+                {t("widget.smartHome-entityState.advanced.entityId", { id: entity.entity_id })}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t("widget.smartHome-entityState.advanced.lastUpdated", {
+                  date: new Date(entity.last_updated).toLocaleString(),
+                })}
+              </Text>
+            </>
+          )}
+          {error && (
+            <Tooltip label={error.message} multiline>
+              <Text size="xs" c="red" lineClamp={2}>
+                {t("widget.smartHome-entityState.error.toggleFailed")}
+              </Text>
+            </Tooltip>
+          )}
         </Stack>
       </Center>
     </UnstyledButton>
diff --git a/packages/widgets/src/smart-home/entity-state/index.ts b/packages/widgets/src/smart-home/entity-state/index.ts
index a4dd32921..649116bce 100644
--- a/packages/widgets/src/smart-home/entity-state/index.ts
+++ b/packages/widgets/src/smart-home/entity-state/index.ts
@@ -7,6 +7,8 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("smartHome-entityState", {
   icon: IconBinaryTree,
+  queryKey: [["widget", "smartHome"]],
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       entityId: factory.text({
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index f61ea1cfc..671502fb3 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import React from "react";
-import { Center, LoadingOverlay, Overlay, Stack, Text, ThemeIcon, UnstyledButton } from "@mantine/core";
+import { Center, LoadingOverlay, Overlay, Stack, Text, ThemeIcon, Tooltip, UnstyledButton } from "@mantine/core";
 import { useDisclosure, useTimeout } from "@mantine/hooks";
 import { IconAutomation, IconCheck } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
+import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
 import { useI18n } from "@homarr/translation/client";
 
@@ -16,27 +17,37 @@ export default function SmartHomeTriggerAutomationWidget({
   integrationIds,
   isEditMode,
   width,
+  height,
+  displayMode,
 }: WidgetComponentProps<"smartHome-executeAutomation">) {
+  const integrationId = integrationIds[0];
+  const canInteract = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
+  const [lastExecutedAt, setLastExecutedAt] = React.useState<Date | null>(null);
   const [isShowSuccess, { open: showSuccess, close: closeSuccess }] = useDisclosure();
   const { start } = useTimeout(() => {
     closeSuccess();
   }, 1000);
 
-  const { mutateAsync, isPending } = clientApi.widget.smartHome.executeAutomation.useMutation({
+  const { mutateAsync, isPending, error } = clientApi.widget.smartHome.executeAutomation.useMutation({
     onSuccess: () => {
+      setLastExecutedAt(new Date());
       showSuccess();
       start();
     },
   });
   const handleClick = React.useCallback(async () => {
-    if (isEditMode) {
+    if (isEditMode || isPending || !integrationId || !canInteract) {
       return;
     }
-    await mutateAsync({
-      automationId: options.automationId,
-      integrationId: integrationIds[0] ?? "",
-    });
-  }, [integrationIds, isEditMode, mutateAsync, options.automationId]);
+    try {
+      await mutateAsync({
+        automationId: options.automationId,
+        integrationId,
+      });
+    } catch {
+      // The mutation exposes the error below and remains retryable.
+    }
+  }, [canInteract, integrationId, isEditMode, isPending, mutateAsync, options.automationId]);
 
   const t = useI18n();
   useRegisterSpotlightContextActions(
@@ -55,17 +66,23 @@ export default function SmartHomeTriggerAutomationWidget({
             },
           };
         },
+        disabled: !integrationId || !canInteract || isPending,
       },
     ],
-    [handleClick, options.automationId, options.displayName],
+    [canInteract, handleClick, integrationId, isPending, options.automationId, options.displayName],
   );
 
-  const isTiny = width < 128;
+  const isTiny = width < 128 || height < 96;
 
   return (
     <UnstyledButton
       onClick={handleClick}
-      style={{ cursor: !isEditMode ? "pointer" : "initial", pointerEvents: isEditMode ? "none" : undefined }}
+      disabled={!integrationId || !canInteract || isPending}
+      style={{
+        cursor: !isEditMode && integrationId && canInteract ? "pointer" : "initial",
+        pointerEvents: isEditMode ? "none" : undefined,
+      }}
+      aria-description={error?.message}
       w="100%"
       h="100%"
     >
@@ -79,12 +96,44 @@ export default function SmartHomeTriggerAutomationWidget({
         </Overlay>
       )}
       <LoadingOverlay visible={isPending} />
+      {error && displayMode !== "advanced" && (
+        <Overlay>
+          <Center w="100%" h="100%" p="xs">
+            <Tooltip label={error.message} multiline>
+              <Text size="xs" c="red" ta="center" lineClamp={3}>
+                {t("widget.smartHome-executeAutomation.error.executeFailed")}
+              </Text>
+            </Tooltip>
+          </Center>
+        </Overlay>
+      )}
       <Center w="100%" h="100%">
         <Stack align="center" gap="md">
           <IconAutomation size={isTiny ? 16 : undefined} />
           <Text ta="center" fw="bold" fz={isTiny ? "xs" : undefined}>
             {options.displayName}
           </Text>
+          {displayMode === "advanced" && (
+            <>
+              {error ? (
+                <Tooltip label={error.message} multiline>
+                  <Text ta="center" size="xs" c="red">
+                    {t("widget.smartHome-executeAutomation.error.executeFailed")}
+                  </Text>
+                </Tooltip>
+              ) : (
+                <Text ta="center" size="xs" c="dimmed">
+                  {lastExecutedAt
+                    ? t("widget.smartHome-executeAutomation.advanced.lastExecuted", {
+                        time: lastExecutedAt.toLocaleTimeString(),
+                      })
+                    : t("widget.smartHome-executeAutomation.advanced.automationId", {
+                        id: options.automationId,
+                      })}
+                </Text>
+              )}
+            </>
+          )}
         </Stack>
       </Center>
     </UnstyledButton>
diff --git a/packages/widgets/src/smart-home/execute-automation/index.ts b/packages/widgets/src/smart-home/execute-automation/index.ts
index ea957fab9..e4435f892 100644
--- a/packages/widgets/src/smart-home/execute-automation/index.ts
+++ b/packages/widgets/src/smart-home/execute-automation/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("smartHome-executeAutomation", {
   icon: IconBinaryTree,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       displayName: factory.text(),
diff --git a/packages/widgets/src/speedtest-tracker/averages.tsx b/packages/widgets/src/speedtest-tracker/averages.tsx
index 41b116d56..ea4404c4d 100644
--- a/packages/widgets/src/speedtest-tracker/averages.tsx
+++ b/packages/widgets/src/speedtest-tracker/averages.tsx
@@ -10,7 +10,7 @@ import { formatStatsSpeed } from "./helpers";
 import { SectionLabel } from "./section-label";
 import { SpeedStatCard } from "./speed-stat-card";
 
-export function AveragesSection({ stats }: { stats: SpeedtestTrackerStats }) {
+export function AveragesSection({ stats, width = 500 }: { stats: SpeedtestTrackerStats; width?: number }) {
   const t = useScopedI18n("widget.speedtestTracker");
 
   return (
@@ -18,7 +18,7 @@ export function AveragesSection({ stats }: { stats: SpeedtestTrackerStats }) {
       <SectionLabel>
         {t("averages")} · {t("tests", { count: stats.total_results.toString() })}
       </SectionLabel>
-      <SimpleGrid cols={3} spacing="xs" style={{ flex: 1, gridTemplateRows: "1fr" }}>
+      <SimpleGrid cols={width < 220 ? 1 : 3} spacing="xs" style={{ flex: 1, gridTemplateRows: "1fr" }}>
         <SpeedStatCard
           icon={IconArrowDown}
           color="blue"
diff --git a/packages/widgets/src/speedtest-tracker/component.tsx b/packages/widgets/src/speedtest-tracker/component.tsx
index 4b2b83dbb..c243d1fef 100644
--- a/packages/widgets/src/speedtest-tracker/component.tsx
+++ b/packages/widgets/src/speedtest-tracker/component.tsx
@@ -1,58 +1,84 @@
 "use client";
 
-import { useMemo } from "react";
-import { Stack, Text } from "@mantine/core";
+import { useMemo, useState } from "react";
+import { SegmentedControl, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import type { SpeedtestTrackerDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { WidgetEmptyState } from "../common/empty-state";
 import { AveragesSection } from "./averages";
-import { mergeStats } from "./helpers";
+import { combineSpeedtestDashboards } from "./helpers";
 import { LatestResultSection } from "./latest-result";
 import { RecentResultsSection } from "./recent-results";
 
-export default function SpeedtestTrackerWidget({ options, integrationIds }: WidgetComponentProps<"speedtestTracker">) {
+export default function SpeedtestTrackerWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"speedtestTracker">) {
   const t = useScopedI18n("widget.speedtestTracker");
   const { data: dashboardData = [] } = clientApi.widget.speedtestTracker.getDashboard.useQuery({ integrationIds });
+  const [advancedRange, setAdvancedRange] = useState("24");
 
   const combined = useMemo(
-    () =>
-      dashboardData.reduce<SpeedtestTrackerDashboardData>(
-        (acc, item) => ({
-          latestResult: item.dashboard.latestResult ?? acc.latestResult,
-          stats: mergeStats(acc.stats, item.dashboard.stats),
-          recentResults: [...acc.recentResults, ...item.dashboard.recentResults],
-        }),
-        { latestResult: null, stats: null, recentResults: [] },
-      ),
+    () => combineSpeedtestDashboards(dashboardData.map((item) => item.dashboard)),
     [dashboardData],
   );
 
-  const twelveHoursAgo = Date.now() - 12 * 60 * 60 * 1000;
-  const recentFiltered = combined.recentResults.filter((result) => result.created_at.getTime() > twelveHoursAgo);
+  const rangeHours = displayMode === "advanced" ? Number(advancedRange) : 12;
+  const cutoff = rangeHours > 0 ? Date.now() - rangeHours * 60 * 60 * 1000 : 0;
+  const recentFiltered = combined.recentResults.filter((result) => result.created_at.getTime() > cutoff);
 
   const hasStatSection =
     (options.showLatestResult && combined.latestResult !== null) || (options.showStats && combined.stats !== null);
   const hasChart = options.showRecentResults && recentFiltered.length > 0;
   const noSectionsEnabled = !options.showLatestResult && !options.showStats && !options.showRecentResults;
 
+  const latest = options.showLatestResult && combined.latestResult && (
+    <LatestResultSection result={combined.latestResult} width={displayMode === "advanced" ? width / 2 : width} />
+  );
+  const averages = options.showStats && combined.stats && (
+    <AveragesSection stats={combined.stats} width={displayMode === "advanced" ? width / 2 : width} />
+  );
+
+  if (displayMode === "advanced") {
+    return (
+      <Stack h="100%" gap="md" p="md" style={{ overflow: "hidden" }}>
+        <SegmentedControl
+          size="xs"
+          value={advancedRange}
+          onChange={setAdvancedRange}
+          data={[
+            { value: "12", label: t("range.twelveHours") },
+            { value: "24", label: t("range.oneDay") },
+            { value: "0", label: t("range.all") },
+          ]}
+        />
+        {hasStatSection && (
+          <SimpleGrid cols={width >= 720 ? 2 : 1} spacing="md">
+            {latest}
+            {averages}
+          </SimpleGrid>
+        )}
+        {hasChart && (
+          <div style={{ flex: 1, minHeight: Math.max(220, height / 2) }}>
+            <RecentResultsSection results={recentFiltered} showPingGraph={options.showPingGraph} />
+          </div>
+        )}
+      </Stack>
+    );
+  }
+
   return (
     <Stack h="100%" gap="sm" p="xs" style={{ overflow: "hidden" }}>
       {hasStatSection && (
         <Stack gap="sm" style={{ flex: 1, minHeight: 0 }}>
-          {options.showLatestResult && combined.latestResult && (
-            <div style={{ flex: 1, minHeight: 0 }}>
-              <LatestResultSection result={combined.latestResult} />
-            </div>
-          )}
-          {options.showStats && combined.stats && (
-            <div style={{ flex: 1, minHeight: 0 }}>
-              <AveragesSection stats={combined.stats} />
-            </div>
-          )}
+          {latest && <div style={{ flex: 1, minHeight: 0 }}>{latest}</div>}
+          {averages && height >= 170 && <div style={{ flex: 1, minHeight: 0 }}>{averages}</div>}
         </Stack>
       )}
       {hasChart && (
diff --git a/packages/widgets/src/speedtest-tracker/helpers.spec.ts b/packages/widgets/src/speedtest-tracker/helpers.spec.ts
new file mode 100644
index 000000000..ab2cd8564
--- /dev/null
+++ b/packages/widgets/src/speedtest-tracker/helpers.spec.ts
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+
+import type { SpeedtestTrackerDashboardData, SpeedtestTrackerStats } from "@homarr/integrations/types";
+
+import { combineSpeedtestDashboards, mergeStats } from "./helpers";
+
+const stats = (average: number, totalResults: number): SpeedtestTrackerStats => ({
+  ping: { avg: average, min: average, max: average },
+  download: { avg: average, avg_bits: average, min: average, max: average },
+  upload: { avg: average, avg_bits: average, min: average, max: average },
+  total_results: totalResults,
+});
+
+describe("speedtest dashboard aggregation", () => {
+  it("weights averages by result count", () => {
+    expect(mergeStats(stats(10, 1), stats(20, 3))?.ping.avg).toBe(17.5);
+  });
+
+  it("selects the newest latest result independent of integration order", () => {
+    const older = { id: 1, ping: 1, download_bits: 1, upload_bits: 1, healthy: true, created_at: new Date(1) };
+    const newer = { ...older, id: 2, created_at: new Date(2) };
+    const dashboards: SpeedtestTrackerDashboardData[] = [
+      { latestResult: newer, stats: null, recentResults: [] },
+      { latestResult: older, stats: null, recentResults: [] },
+    ];
+    expect(combineSpeedtestDashboards(dashboards).latestResult?.id).toBe(2);
+  });
+});
diff --git a/packages/widgets/src/speedtest-tracker/helpers.ts b/packages/widgets/src/speedtest-tracker/helpers.ts
index 075fdb90c..e438a4fa4 100644
--- a/packages/widgets/src/speedtest-tracker/helpers.ts
+++ b/packages/widgets/src/speedtest-tracker/helpers.ts
@@ -11,34 +11,58 @@ export const mergeStats = (
 ): SpeedtestTrackerDashboardData["stats"] => {
   if (!statsB) return statsA;
   if (!statsA) return statsB;
+  const totalResults = statsA.total_results + statsB.total_results;
+  const weightedAverage = (left: number, right: number) =>
+    totalResults > 0 ? (left * statsA.total_results + right * statsB.total_results) / totalResults : (left + right) / 2;
   return {
     ping: {
-      avg: (statsA.ping.avg + statsB.ping.avg) / 2,
+      avg: weightedAverage(statsA.ping.avg, statsB.ping.avg),
       min: Math.min(statsA.ping.min, statsB.ping.min),
       max: Math.max(statsA.ping.max, statsB.ping.max),
     },
     download: {
-      avg: (statsA.download.avg + statsB.download.avg) / 2,
+      avg: weightedAverage(statsA.download.avg, statsB.download.avg),
       avg_bits:
         statsA.download.avg_bits !== undefined && statsB.download.avg_bits !== undefined
-          ? (statsA.download.avg_bits + statsB.download.avg_bits) / 2
+          ? weightedAverage(statsA.download.avg_bits, statsB.download.avg_bits)
           : (statsA.download.avg_bits ?? statsB.download.avg_bits),
       min: Math.min(statsA.download.min, statsB.download.min),
       max: Math.max(statsA.download.max, statsB.download.max),
     },
     upload: {
-      avg: (statsA.upload.avg + statsB.upload.avg) / 2,
+      avg: weightedAverage(statsA.upload.avg, statsB.upload.avg),
       avg_bits:
         statsA.upload.avg_bits !== undefined && statsB.upload.avg_bits !== undefined
-          ? (statsA.upload.avg_bits + statsB.upload.avg_bits) / 2
+          ? weightedAverage(statsA.upload.avg_bits, statsB.upload.avg_bits)
           : (statsA.upload.avg_bits ?? statsB.upload.avg_bits),
       min: Math.min(statsA.upload.min, statsB.upload.min),
       max: Math.max(statsA.upload.max, statsB.upload.max),
     },
-    total_results: statsA.total_results + statsB.total_results,
+    total_results: totalResults,
   };
 };
 
+export const selectLatestResult = (
+  current: SpeedtestTrackerResult | null,
+  candidate: SpeedtestTrackerResult | null,
+): SpeedtestTrackerResult | null => {
+  if (!candidate) return current;
+  if (!current) return candidate;
+  return candidate.created_at.getTime() > current.created_at.getTime() ? candidate : current;
+};
+
+export const combineSpeedtestDashboards = (
+  dashboards: SpeedtestTrackerDashboardData[],
+): SpeedtestTrackerDashboardData =>
+  dashboards.reduce<SpeedtestTrackerDashboardData>(
+    (combined, dashboard) => ({
+      latestResult: selectLatestResult(combined.latestResult, dashboard.latestResult),
+      stats: mergeStats(combined.stats, dashboard.stats),
+      recentResults: [...combined.recentResults, ...dashboard.recentResults],
+    }),
+    { latestResult: null, stats: null, recentResults: [] },
+  );
+
 export const formatBitsPerSec = (bps: number): string => `${formatNumber(bps, 2)}bps`;
 
 export const formatResultSpeed = (result: SpeedtestTrackerResult, dir: "download" | "upload"): string => {
diff --git a/packages/widgets/src/speedtest-tracker/index.ts b/packages/widgets/src/speedtest-tracker/index.ts
index 14cc5d118..943ef7fdb 100644
--- a/packages/widgets/src/speedtest-tracker/index.ts
+++ b/packages/widgets/src/speedtest-tracker/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("speedtestTracker", {
   icon: IconSpeedboat,
+  queryKey: [["widget", "speedtestTracker"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/speedtest-tracker/latest-result.tsx b/packages/widgets/src/speedtest-tracker/latest-result.tsx
index fcc6136cf..20b792196 100644
--- a/packages/widgets/src/speedtest-tracker/latest-result.tsx
+++ b/packages/widgets/src/speedtest-tracker/latest-result.tsx
@@ -10,7 +10,7 @@ import { formatResultSpeed } from "./helpers";
 import { SectionLabel } from "./section-label";
 import { SpeedStatCard } from "./speed-stat-card";
 
-export function LatestResultSection({ result }: { result: SpeedtestTrackerResult }) {
+export function LatestResultSection({ result, width = 500 }: { result: SpeedtestTrackerResult; width?: number }) {
   const t = useScopedI18n("widget.speedtestTracker");
   const locale = useCurrentLocale();
   const timestamp = Intl.DateTimeFormat(locale, {
@@ -19,7 +19,8 @@ export function LatestResultSection({ result }: { result: SpeedtestTrackerResult
     hour: "2-digit",
     minute: "2-digit",
   }).format(result.created_at);
-  const cols = result.healthy !== null ? 4 : 3;
+  const metricCount = result.healthy !== null ? 4 : 3;
+  const cols = width < 230 ? 2 : metricCount;
 
   return (
     <Stack gap={6} h="100%">
diff --git a/packages/widgets/src/stocks/component.spec.ts b/packages/widgets/src/stocks/component.spec.ts
new file mode 100644
index 000000000..56ad94954
--- /dev/null
+++ b/packages/widgets/src/stocks/component.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vitest";
+
+import { getStockSummary } from "./component";
+
+describe("stock summary", () => {
+  it("returns no summary for an empty series", () => {
+    expect(getStockSummary([], 10)).toBeNull();
+  });
+
+  it("does not divide by a zero previous close", () => {
+    expect(getStockSummary([0, 5], 0)).toMatchObject({
+      currentPrice: 5,
+      change: 5,
+      changePercentage: null,
+      graphValues: [50, 55],
+    });
+  });
+});
diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx
index 918851ce8..aacd9c16c 100644
--- a/packages/widgets/src/stocks/component.tsx
+++ b/packages/widgets/src/stocks/component.tsx
@@ -19,10 +19,31 @@ function calculateChange(currentPrice: number, previousClose: number) {
 }
 
 function calculateChangePercentage(currentPrice: number, previousClose: number) {
+  if (previousClose === 0) return null;
   return 100 * ((currentPrice - previousClose) / previousClose);
 }
 
-export default function StockPriceWidget({ options, width, height }: WidgetComponentProps<"stockPrice">) {
+export interface StockSummary {
+  currentPrice: number;
+  change: number;
+  changePercentage: number | null;
+  graphValues: number[];
+}
+
+export function getStockSummary(priceHistory: number[], previousClose: number): StockSummary | null {
+  const currentPrice = priceHistory.at(-1);
+  if (currentPrice === undefined) return null;
+
+  const minimum = Math.min(...priceHistory);
+  return {
+    currentPrice,
+    change: round(calculateChange(currentPrice, previousClose)),
+    changePercentage: calculateChangePercentage(currentPrice, previousClose),
+    graphValues: priceHistory.map((value) => value - minimum + 50),
+  };
+}
+
+export default function StockPriceWidget({ options, width, height, displayMode }: WidgetComponentProps<"stockPrice">) {
   const t = useScopedI18n("widget.stockPrice");
   const theme = useMantineTheme();
   const { data: result } = clientApi.widget.stockPrice.getPriceHistory.useQuery(options);
@@ -30,13 +51,11 @@ export default function StockPriceWidget({ options, width, height }: WidgetCompo
   if (!result) return <WidgetEmptyState />;
   const { data } = result;
 
-  const stockValuesChange = round(calculateChange(data.priceHistory.at(-1) ?? 0, data.previousClose));
-  const stockValuesChangePercentage = round(
-    calculateChangePercentage(data.priceHistory.at(-1) ?? 0, data.previousClose),
-  );
-
-  const stockValuesMin = Math.min(...data.priceHistory);
-  const stockGraphValues = data.priceHistory.map((value) => value - stockValuesMin + 50);
+  const summary = getStockSummary(data.priceHistory, data.previousClose);
+  if (!summary) return <WidgetEmptyState />;
+  const stockValuesChange = summary.change;
+  const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
+  const stockGraphValues = summary.graphValues;
   const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
 
   return (
@@ -45,7 +64,7 @@ export default function StockPriceWidget({ options, width, height }: WidgetCompo
         pos="absolute"
         bottom={10}
         w="100%"
-        h={height > 280 ? "75%" : "50%"}
+        h={displayMode === "advanced" || height > 280 ? "75%" : "50%"}
         data={stockGraphValues}
         curveType="linear"
         color={trendColor}
@@ -62,7 +81,7 @@ export default function StockPriceWidget({ options, width, height }: WidgetCompo
           )}
           {data.symbol}
         </Text>
-        {width > 280 && height > 280 && (
+        {(displayMode === "advanced" || (width > 280 && height > 280)) && (
           <Text size="md" lh="1">
             {data.shortName}
           </Text>
@@ -70,37 +89,23 @@ export default function StockPriceWidget({ options, width, height }: WidgetCompo
       </Stack>
 
       <Title pos="absolute" bottom={10} right={10} order={width > 280 ? 1 : 2} fw={700}>
-        {new Intl.NumberFormat().format(round(data.priceHistory.at(-1) ?? 0))}
+        {new Intl.NumberFormat().format(round(summary.currentPrice))}
       </Title>
 
-      {width > 280 && (
+      {(displayMode === "advanced" || width > 280) && (
         <Text pos="absolute" top={10} right={10} size="xl" fw={700}>
-          {new Intl.NumberFormat().format(stockValuesChange)} ({stockValuesChange > 0 ? "+" : ""}
-          {new Intl.NumberFormat().format(stockValuesChangePercentage)}%)
+          {new Intl.NumberFormat().format(stockValuesChange)}
+          {stockValuesChangePercentage === null
+            ? null
+            : ` (${stockValuesChange > 0 ? "+" : ""}${new Intl.NumberFormat().format(stockValuesChangePercentage)}%)`}
         </Text>
       )}
 
-      {width > 280 && (
+      {(displayMode === "advanced" || width > 280) && (
         <Text pos="absolute" bottom={10} left={10} fw={700}>
           {t(`option.timeRange.option.${options.timeRange}.label`)}
         </Text>
       )}
-
-      <Stack pos="absolute" top={10} left={10}>
-        <Text size="xl" fw={700} lh="0.715">
-          {stockValuesChange > 0 ? (
-            <IconTrendingUp size="1.5rem" color={theme.colors.green[7]} />
-          ) : (
-            <IconTrendingDown size="1.5rem" color={theme.colors.red[7]} />
-          )}
-          {data.symbol}
-        </Text>
-        {width > 280 && height > 280 && (
-          <Text size="md" lh="1">
-            {data.shortName}
-          </Text>
-        )}
-      </Stack>
     </Flex>
   );
 }
diff --git a/packages/widgets/src/stocks/index.ts b/packages/widgets/src/stocks/index.ts
index ba44f481e..1174a9caa 100644
--- a/packages/widgets/src/stocks/index.ts
+++ b/packages/widgets/src/stocks/index.ts
@@ -13,6 +13,7 @@ const timeIntervalOptions = stockPriceTimeFrames.interval;
 
 export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
   icon: IconBuildingBank,
+  queryKey: [["widget", "stockPrice"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index 5f84dd0b4..73a21fdb2 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { Box, Card, Group, Stack, Tooltip, useMantineColorScheme } from "@mantine/core";
+import { Box, Card, Group, ScrollArea, SimpleGrid, Text, Tooltip, useMantineColorScheme } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -10,12 +10,15 @@ import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
-import { filterStorageVolumes } from "../filter-storage-volumes";
+import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 
 type DisplayMode = WidgetComponentProps<"systemDisks">["options"]["displayMode"];
 
-const getDisplayText = (item: { used: string; available: string; percentage: number }, displayMode: DisplayMode) => {
+export const getDisplayText = (
+  item: { used: string; available: string; percentage: number },
+  displayMode: DisplayMode,
+) => {
   switch (displayMode) {
     case "percentage":
       return `${Math.round(item.percentage)}%`;
@@ -35,6 +38,16 @@ const getDisplayText = (item: { used: string; available: string; percentage: num
   }
 };
 
+export const clampPercentage = (percentage: number): number => Math.min(100, Math.max(0, percentage));
+
+const getAbsoluteText = (item: { used: string; available: string }) => {
+  const usedInBytes = Number(item.used);
+  const availableInBytes = Number(item.available);
+  if (!Number.isFinite(usedInBytes) || !Number.isFinite(availableInBytes)) return `${item.used} / ${item.available}`;
+  const { used, available } = formatBytesPair(usedInBytes, availableInBytes);
+  return `${used} / ${available}`;
+};
+
 interface SystemDiskCardProps {
   deviceName: string;
   percentage: number;
@@ -42,6 +55,9 @@ interface SystemDiskCardProps {
   temperature: number | null | undefined;
   healthy: boolean;
   showBackgroundBar: boolean;
+  integrationName?: string;
+  secondaryText?: string;
+  isAdvanced: boolean;
 }
 
 const SystemDiskCard = ({
@@ -51,6 +67,9 @@ const SystemDiskCard = ({
   temperature,
   healthy,
   showBackgroundBar,
+  integrationName,
+  secondaryText,
+  isAdvanced,
 }: SystemDiskCardProps) => {
   const board = useRequiredBoard();
   const scheme = useMantineColorScheme();
@@ -80,27 +99,39 @@ const SystemDiskCard = ({
   return (
     <Tooltip
       label={healthy ? displayText : `${displayText} (${unhealthyLabel})`}
-      disabled={valueFits}
+      disabled={valueFits || isAdvanced}
       position="top"
       withinPortal
     >
       <Card
         radius={board.itemRadius}
-        py={"xs"}
+        py="xs"
         bg={scheme.colorScheme === "dark" ? "dark.7" : "gray.1"}
         style={{ overflow: "hidden", position: "relative" }}
       >
         <Group justify="space-between" style={{ zIndex: 1 }}>
           <div>
-            <p style={{ margin: 0 }}>
-              <b>{deviceName}</b>
-            </p>
+            <Text fw={700} size={isAdvanced ? "sm" : undefined} truncate="end">
+              {deviceName}
+            </Text>
+            {integrationName && (
+              <Text size="xs" c="dimmed" truncate="end">
+                {integrationName}
+              </Text>
+            )}
             <p ref={valueRef} style={{ margin: 0, visibility: valueFits ? "visible" : "hidden" }}>
               <span>{displayText}</span>
               {!healthy && <span style={{ marginLeft: 5 }}>{unhealthyLabel}</span>}
             </p>
+            {isAdvanced && secondaryText && (
+              <Text size="xs" c="dimmed">
+                {secondaryText}
+              </Text>
+            )}
+          </div>
+          <div>
+            {temperature !== null && temperature !== undefined ? <p style={{ margin: 0 }}>{temperature}°C</p> : null}
           </div>
-          <div>{temperature ? <p style={{ margin: 0 }}>{temperature}°C</p> : null}</div>
         </Group>
         <Box
           bg={healthy ? "green" : "red"}
@@ -108,7 +139,7 @@ const SystemDiskCard = ({
             position: "absolute",
             top: 0,
             left: 0,
-            width: `${percentage}%`,
+            width: `${clampPercentage(percentage)}%`,
             height: "100%",
             zIndex: 0,
             display: showBackgroundBar ? "block" : "none",
@@ -119,41 +150,58 @@ const SystemDiskCard = ({
   );
 };
 
-export default function SystemResources({ integrationIds, options }: WidgetComponentProps<"systemDisks">) {
+export default function SystemResources({
+  integrationIds,
+  options,
+  width,
+  displayMode: surfaceMode,
+}: WidgetComponentProps<"systemDisks">) {
   const queryInput = { integrationIds };
   const { data = [] } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery(queryInput);
 
-  const lastItem = data.at(-1);
+  if (data.length === 0) return <WidgetEmptyState />;
 
-  if (!lastItem) return <WidgetEmptyState />;
+  const disks = data.flatMap((entry) => {
+    const fileSystem = filterStorageVolumes(
+      entry.healthInfo.fileSystem,
+      options.visibleStorageVolumes,
+      entry.integrationId,
+    );
+    const smart = filterStorageVolumes(entry.healthInfo.smart, options.visibleStorageVolumes, entry.integrationId);
+    return fileSystem.map((item) => ({
+      integrationId: entry.integrationId,
+      integrationName: entry.integrationName,
+      item,
+      smartItem: smart.find(
+        (candidate) => normalizeStorageDeviceName(candidate.deviceName) === normalizeStorageDeviceName(item.deviceName),
+      ),
+    }));
+  });
 
-  const rawFileSystem = lastItem.healthInfo.fileSystem;
-  if (rawFileSystem.length === 0) {
-    throw new NoIntegrationDataError();
-  }
+  if (data.every((entry) => entry.healthInfo.fileSystem.length === 0)) throw new NoIntegrationDataError();
+  if (disks.length === 0) return <WidgetEmptyState />;
 
-  const fileSystem = filterStorageVolumes(rawFileSystem, options.visibleStorageVolumes, lastItem.integrationId);
-  const smart = filterStorageVolumes(lastItem.healthInfo.smart, options.visibleStorageVolumes, lastItem.integrationId);
-
-  if (fileSystem.length === 0) return <WidgetEmptyState />;
+  const isAdvanced = surfaceMode === "advanced";
+  const columns = isAdvanced ? Math.max(1, Math.min(disks.length, Math.floor(width / 320))) : 1;
 
   return (
-    <Stack gap="xs" p="xs" h="100%">
-      {fileSystem.map((item) => {
-        const smartItem = smart.find((smart) => smart.deviceName === item.deviceName);
-
-        return (
+    <ScrollArea h="100%">
+      <SimpleGrid cols={columns} spacing="xs" p="xs">
+        {disks.map(({ integrationId, integrationName, item, smartItem }) => (
           <SystemDiskCard
-            key={`disk-${item.deviceName}`}
+            key={`${integrationId}:${item.deviceName}`}
             deviceName={item.deviceName}
             percentage={item.percentage}
             displayText={getDisplayText(item, options.displayMode)}
             temperature={options.showTemperatureIfAvailable ? smartItem?.temperature : undefined}
             healthy={smartItem?.healthy ?? true} // fall back to healthy if no information is available
             showBackgroundBar={options.showBackgroundBar}
+            integrationName={isAdvanced || data.length > 1 ? integrationName : undefined}
+            secondaryText={getAbsoluteText(item)}
+            isAdvanced={isAdvanced}
           />
-        );
-      })}
-    </Stack>
+        ))}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
diff --git a/packages/widgets/src/system-disks/display.spec.ts b/packages/widgets/src/system-disks/display.spec.ts
new file mode 100644
index 000000000..1ed6e3eac
--- /dev/null
+++ b/packages/widgets/src/system-disks/display.spec.ts
@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest";
+
+import { clampPercentage, getDisplayText } from "./component";
+
+describe("system disk display", () => {
+  test("clamps malformed utilization before sizing the background", () => {
+    expect(clampPercentage(-4)).toBe(0);
+    expect(clampPercentage(108)).toBe(100);
+  });
+
+  test("falls back to provider values when sizes are already formatted", () => {
+    expect(getDisplayText({ used: "5 GiB", available: "10 GiB", percentage: 50 }, "absolute")).toBe("5 GiB / 10 GiB");
+  });
+});
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index 1d3854c89..5de42f5b3 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
-import { Box, Group, Stack } from "@mantine/core";
-import { useElementSize } from "@mantine/hooks";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Box, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 
@@ -13,115 +12,226 @@ import { SystemResourceGPUChart } from "./chart/gpu-chart";
 import { SystemResourceMemoryChart } from "./chart/memory-chart";
 import { NetworkTrafficChart } from "./chart/network-traffic";
 
-const MAX_QUEUE_SIZE = 15;
+const COMPACT_HISTORY_SIZE = 15;
+const ADVANCED_HISTORY_SIZE = 60;
 
-const toChartItem = (healthInfo: {
+type ChartItem = {
+  cpu: number;
+  memory: number;
+  gpu: number;
+  network: { up: number; down: number } | null;
+};
+
+export const toChartItem = (healthInfo: {
   cpuUtilization: number;
   memUsedInBytes: number;
   gpu: { processorUtilization: number }[];
   network: { up: number; down: number } | null;
-}) => ({
+}): ChartItem => ({
   cpu: healthInfo.cpuUtilization,
   memory: healthInfo.memUsedInBytes,
   gpu:
     healthInfo.gpu.length > 0
-      ? healthInfo.gpu.reduce((acc, g) => acc + g.processorUtilization, 0) / healthInfo.gpu.length
+      ? healthInfo.gpu.reduce((acc, gpu) => acc + gpu.processorUtilization, 0) / healthInfo.gpu.length
       : 0,
   network: healthInfo.network,
 });
 
-export default function SystemResources({ integrationIds, options }: WidgetComponentProps<"systemResources">) {
-  const { ref, width } = useElementSize();
+export const appendBoundedHistory = (history: ChartItem[], item: ChartItem, limit: number): ChartItem[] =>
+  [...history, item].slice(-limit);
 
+export const boundHistoryByIntegration = (
+  historyByIntegration: Record<string, ChartItem[]>,
+  limit: number,
+): Record<string, ChartItem[]> =>
+  Object.fromEntries(
+    Object.entries(historyByIntegration).map(([integrationId, history]) => [integrationId, history.slice(-limit)]),
+  );
+
+export default function SystemResources({
+  integrationIds,
+  options,
+  width,
+  displayMode,
+  widgetStateRef,
+}: WidgetComponentProps<"systemResources">) {
   const { data = [], dataUpdatedAt } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
     integrationIds,
   });
-  const memoryCapacityInBytes =
-    (data[0]?.healthInfo.memAvailableInBytes ?? 0) + (data[0]?.healthInfo.memUsedInBytes ?? 0);
+  const isAdvanced = displayMode === "advanced";
+  const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
+  const persistedState = widgetStateRef?.current?.systemResources as
+    | { integrationKey?: string; historyByIntegration?: Record<string, ChartItem[]> }
+    | undefined;
+  const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>(() =>
+    persistedState?.integrationKey === integrationKey && persistedState.historyByIntegration
+      ? boundHistoryByIntegration(persistedState.historyByIntegration, ADVANCED_HISTORY_SIZE)
+      : {},
+  );
+  const previousIntegrationKey = useRef(integrationKey);
 
-  const [items, setItems] = useState<
-    { cpu: number; memory: number; gpu: number; network: { up: number; down: number } | null }[]
-  >(() => (data[0] ? [toChartItem(data[0].healthInfo)] : []));
-
-  const prevIntegrationIds = useRef(integrationIds);
   useEffect(() => {
-    if (prevIntegrationIds.current === integrationIds) return;
-    prevIntegrationIds.current = integrationIds;
-    setItems([]);
-  }, [integrationIds]);
+    if (previousIntegrationKey.current === integrationKey) return;
+    previousIntegrationKey.current = integrationKey;
+    setHistoryByIntegration({});
+  }, [integrationKey]);
 
   const lastUpdatedAt = useRef(dataUpdatedAt);
   useEffect(() => {
     if (dataUpdatedAt === lastUpdatedAt.current) return;
     lastUpdatedAt.current = dataUpdatedAt;
-    const firstItem = data[0];
-    if (!firstItem) return;
-    setItems((prev) => [...prev, toChartItem(firstItem.healthInfo)].slice(-MAX_QUEUE_SIZE));
+    setHistoryByIntegration((previous) =>
+      Object.fromEntries(
+        data.map((entry) => [
+          entry.integrationId,
+          appendBoundedHistory(
+            previous[entry.integrationId] ?? [],
+            toChartItem(entry.healthInfo),
+            ADVANCED_HISTORY_SIZE,
+          ),
+        ]),
+      ),
+    );
   }, [dataUpdatedAt, data]);
 
-  const showNetwork =
-    items.length === 0 || (items.every((item) => item.network !== null) && options.visibleCharts.includes("network"));
-  const rowHeight = `calc((100% - ${(options.visibleCharts.length - 1) * 8}px) / ${options.visibleCharts.length})`;
+  useEffect(() => {
+    if (!widgetStateRef) return;
+    widgetStateRef.current = {
+      ...widgetStateRef.current,
+      systemResources: {
+        integrationKey,
+        historyByIntegration: boundHistoryByIntegration(historyByIntegration, ADVANCED_HISTORY_SIZE),
+      },
+    };
+  }, [historyByIntegration, integrationKey, widgetStateRef]);
+
+  const panelColumns = isAdvanced && width >= 960 && data.length > 1 ? 2 : 1;
+  const panelWidth = width / panelColumns;
+  const renderCharts = (entry: (typeof data)[number], availableWidth: number) => {
+    const currentItem = toChartItem(entry.healthInfo);
+    const fullHistory = historyByIntegration[entry.integrationId] ?? [currentItem];
+    const history = isAdvanced ? fullHistory : fullHistory.slice(-COMPACT_HISTORY_SIZE);
+
+    return (
+      <SystemCharts
+        key={entry.integrationId}
+        integrationName={entry.integrationName}
+        items={history}
+        memoryCapacityInBytes={entry.healthInfo.memAvailableInBytes + entry.healthInfo.memUsedInBytes}
+        options={options}
+        width={availableWidth}
+        isAdvanced={isAdvanced}
+        showTitle={isAdvanced || data.length > 1}
+      />
+    );
+  };
+
+  if (!isAdvanced && data.length === 1 && data[0]) {
+    return (
+      <Box h="100%" p="xs">
+        {renderCharts(data[0], width)}
+      </Box>
+    );
+  }
 
   return (
-    <Stack gap="xs" p="xs" ref={ref} h="100%">
-      {options.visibleCharts.includes("cpu") && (
-        <Box h={rowHeight}>
-          <SystemResourceCPUChart
-            cpuUsageOverTime={items.map((item) => item.cpu)}
-            hasShadow={options.hasShadow}
-            labelDisplayMode={options.labelDisplayMode}
-          />
-        </Box>
-      )}
-      {options.visibleCharts.includes("memory") && (
-        <Box h={rowHeight}>
-          <SystemResourceMemoryChart
-            memoryUsageOverTime={items.map((item) => item.memory)}
-            totalCapacityInBytes={memoryCapacityInBytes}
-            hasShadow={options.hasShadow}
-            labelDisplayMode={options.labelDisplayMode}
-          />
-        </Box>
-      )}
-      {options.visibleCharts.includes("gpu") && (
-        <Box h={rowHeight}>
-          <SystemResourceGPUChart
-            gpuUsageOverTime={items.map((item) => item.gpu)}
-            hasShadow={options.hasShadow}
-            labelDisplayMode={options.labelDisplayMode}
-          />
-        </Box>
-      )}
-      {showNetwork &&
-        (width > 256 ? (
-          <Group h={rowHeight} gap="xs" grow>
-            <NetworkTrafficChart
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              usageOverTime={items.map((item) => item.network!.down)}
-              isUp={false}
-              hasShadow={options.hasShadow}
-              labelDisplayMode={options.labelDisplayMode}
-            />
+    <ScrollArea h="100%">
+      <SimpleGrid cols={panelColumns} spacing="xs" p="xs">
+        {data.map((entry) => renderCharts(entry, panelWidth))}
+      </SimpleGrid>
+    </ScrollArea>
+  );
+}
 
-            <NetworkTrafficChart
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              usageOverTime={items.map((item) => item.network!.up)}
-              isUp
-              hasShadow={options.hasShadow}
-              labelDisplayMode={options.labelDisplayMode}
-            />
-          </Group>
-        ) : (
-          <Box h={rowHeight}>
-            <CombinedNetworkTrafficChart
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              usageOverTime={items.map((item) => item.network!)}
+interface SystemChartsProps {
+  integrationName: string;
+  items: ChartItem[];
+  memoryCapacityInBytes: number;
+  options: WidgetComponentProps<"systemResources">["options"];
+  width: number;
+  isAdvanced: boolean;
+  showTitle: boolean;
+}
+
+const SystemCharts = ({
+  integrationName,
+  items,
+  memoryCapacityInBytes,
+  options,
+  width,
+  isAdvanced,
+  showTitle,
+}: SystemChartsProps) => {
+  const showNetwork =
+    items.length > 0 && items.every((item) => item.network !== null) && options.visibleCharts.includes("network");
+  const chartCount = options.visibleCharts.filter((chart) => chart !== "network").length + Number(showNetwork);
+  const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
+  const chartHeight = isAdvanced
+    ? 180
+    : `calc((100% - ${Math.max(0, chartCount - 1) * 8}px) / ${Math.max(1, chartCount)})`;
+
+  return (
+    <Stack gap="xs" h={isAdvanced ? "auto" : "100%"} miw={0}>
+      {showTitle && (
+        <Text size="sm" fw={600} truncate="end">
+          {integrationName}
+        </Text>
+      )}
+      <SimpleGrid cols={chartColumns} spacing="xs" style={{ flex: 1 }}>
+        {options.visibleCharts.includes("cpu") && (
+          <Box h={chartHeight}>
+            <SystemResourceCPUChart
+              cpuUsageOverTime={items.map((item) => item.cpu)}
               hasShadow={options.hasShadow}
               labelDisplayMode={options.labelDisplayMode}
             />
           </Box>
-        ))}
+        )}
+        {options.visibleCharts.includes("memory") && (
+          <Box h={chartHeight}>
+            <SystemResourceMemoryChart
+              memoryUsageOverTime={items.map((item) => item.memory)}
+              totalCapacityInBytes={memoryCapacityInBytes}
+              hasShadow={options.hasShadow}
+              labelDisplayMode={options.labelDisplayMode}
+            />
+          </Box>
+        )}
+        {options.visibleCharts.includes("gpu") && (
+          <Box h={chartHeight}>
+            <SystemResourceGPUChart
+              gpuUsageOverTime={items.map((item) => item.gpu)}
+              hasShadow={options.hasShadow}
+              labelDisplayMode={options.labelDisplayMode}
+            />
+          </Box>
+        )}
+        {showNetwork &&
+          (width >= 300 ? (
+            <Group h={chartHeight} gap="xs" grow wrap="nowrap">
+              <NetworkTrafficChart
+                usageOverTime={items.map((item) => item.network?.down ?? 0)}
+                isUp={false}
+                hasShadow={options.hasShadow}
+                labelDisplayMode={options.labelDisplayMode}
+              />
+              <NetworkTrafficChart
+                usageOverTime={items.map((item) => item.network?.up ?? 0)}
+                isUp
+                hasShadow={options.hasShadow}
+                labelDisplayMode={options.labelDisplayMode}
+              />
+            </Group>
+          ) : (
+            <Box h={chartHeight}>
+              <CombinedNetworkTrafficChart
+                usageOverTime={items.map((item) => item.network ?? { up: 0, down: 0 })}
+                hasShadow={options.hasShadow}
+                labelDisplayMode={options.labelDisplayMode}
+              />
+            </Box>
+          ))}
+      </SimpleGrid>
     </Stack>
   );
-}
+};
diff --git a/packages/widgets/src/system-resources/history.spec.ts b/packages/widgets/src/system-resources/history.spec.ts
new file mode 100644
index 000000000..539bd2296
--- /dev/null
+++ b/packages/widgets/src/system-resources/history.spec.ts
@@ -0,0 +1,29 @@
+import { describe, expect, test } from "vitest";
+
+import { appendBoundedHistory, boundHistoryByIntegration, toChartItem } from "./component";
+
+describe("system resource history", () => {
+  test("averages all GPU values", () => {
+    expect(
+      toChartItem({
+        cpuUtilization: 10,
+        memUsedInBytes: 20,
+        gpu: [{ processorUtilization: 20 }, { processorUtilization: 60 }],
+        network: null,
+      }).gpu,
+    ).toBe(40);
+  });
+
+  test("keeps a bounded rolling history", () => {
+    const item = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
+    expect(appendBoundedHistory([item, item], item, 2)).toHaveLength(2);
+  });
+
+  test("bounds restored history for every integration", () => {
+    const item = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
+    expect(boundHistoryByIntegration({ first: [item, item, item], second: [item, item] }, 2)).toEqual({
+      first: [item, item],
+      second: [item, item],
+    });
+  });
+});
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index 47751a751..957b044d6 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -1,4 +1,4 @@
-import { Badge, Center, Group, Stack, Text } from "@mantine/core";
+import { Badge, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -7,66 +7,109 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type { DynamicSelectOption } from "../_inputs/widget-dynamic-select-input";
 import type { WidgetComponentProps } from "../definition";
 
-export default function TimetableWidget({ options }: WidgetComponentProps<"timetable">) {
+export default function TimetableWidget({
+  options,
+  displayMode = "compact",
+  width,
+  itemId,
+}: WidgetComponentProps<"timetable">) {
   const t = useScopedI18n("widget.timetable");
 
   if (!options.station) {
     return <Center h="100%">{t("noStation")}</Center>;
   }
 
-  return <TimetableWidgetInner station={options.station} baseUrl={options.baseUrl} />;
+  return (
+    <TimetableWidgetInner
+      station={options.station}
+      baseUrl={options.baseUrl}
+      itemId={itemId}
+      displayMode={displayMode}
+      width={width}
+    />
+  );
 }
 
 interface TimetableWidgetInnerProps {
   station: DynamicSelectOption;
   baseUrl: string;
+  itemId?: string;
+  displayMode: "compact" | "advanced";
+  width: number;
 }
 
-const TimetableWidgetInner = ({ station, baseUrl }: TimetableWidgetInnerProps) => {
+const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }: TimetableWidgetInnerProps) => {
   const { data: timetable } = clientApi.widget.timetable.getTimetable.useQuery({
     baseUrl,
+    itemId,
     stationId: station.value,
-    limit: 10,
+    limit: displayMode === "advanced" ? 50 : 10,
   });
   const t = useScopedI18n("widget.timetable");
 
+  const entries = timetable?.entries ?? [];
+
   return (
-    <Stack w="100%" gap="xs" p="sm">
+    <Stack w="100%" h="100%" gap="xs" p="sm">
       <Text fw="bold">{t("title", { station: station.label })}</Text>
-      {(timetable?.entries ?? []).map((entry) => (
-        <Group key={`${entry.timestamp.toISOString()}-${entry.location}`} justify="space-between" w="100%">
-          <Group gap="sm">
-            {entry.line && (
-              <Badge
-                size="sm"
-                color={entry.line.color ?? undefined}
-                variant={entry.line.color ? "filled" : "default"}
-                w={32}
-                p={0}
-                radius={0}
-              >
-                {entry.line.name}
-              </Badge>
-            )}
-            <Text size="sm">
-              {dayjs(entry.timestamp).format("HH:mm")}{" "}
-              {entry.delay >= 1 && (
-                <Text size="sm" span c="red">
-                  +{entry.delay}&apos;
-                </Text>
-              )}
-            </Text>
-
-            <Text size="sm">{entry.location}</Text>
-          </Group>
-
-          {entry.platform && (
-            <Text size="sm" c={entry.platform.hasChanged ? "red" : undefined}>
-              {entry.platform.name}
-            </Text>
-          )}
-        </Group>
-      ))}
+      <ScrollArea style={{ flex: 1, minHeight: 0 }}>
+        <SimpleGrid cols={displayMode === "advanced" && width >= 760 ? 2 : 1} spacing="xs">
+          {entries.map((entry) => (
+            <DepartureRow key={`${entry.timestamp.toISOString()}-${entry.location}`} entry={entry} />
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
+      {displayMode === "advanced" && timetable && (
+        <Text size="xs" c="dimmed" ta="right">
+          {dayjs(timetable.timestamp).format("HH:mm:ss")}
+        </Text>
+      )}
     </Stack>
   );
 };
+
+interface TimetableEntryView {
+  timestamp: Date;
+  delay: number;
+  line: { name: string; color: string | null } | null;
+  location: string;
+  platform: { name: string; hasChanged: boolean } | null;
+}
+
+function DepartureRow({ entry }: { entry: TimetableEntryView }) {
+  return (
+    <Group justify="space-between" w="100%" wrap="nowrap">
+      <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
+        {entry.line && (
+          <Badge
+            size="sm"
+            color={entry.line.color ?? undefined}
+            variant={entry.line.color ? "filled" : "default"}
+            w={32}
+            p={0}
+            radius={0}
+          >
+            {entry.line.name}
+          </Badge>
+        )}
+        <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+          {dayjs(entry.timestamp).format("HH:mm")}{" "}
+          {entry.delay >= 1 && (
+            <Text size="sm" span c="red">
+              +{entry.delay}&apos;
+            </Text>
+          )}
+        </Text>
+        <Text size="sm" truncate>
+          {entry.location}
+        </Text>
+      </Group>
+
+      {entry.platform && (
+        <Text size="sm" c={entry.platform.hasChanged ? "red" : undefined} style={{ flexShrink: 0 }}>
+          {entry.platform.name}
+        </Text>
+      )}
+    </Group>
+  );
+}
diff --git a/packages/widgets/src/timetable/index.ts b/packages/widgets/src/timetable/index.ts
index cee44323c..634ad20c4 100644
--- a/packages/widgets/src/timetable/index.ts
+++ b/packages/widgets/src/timetable/index.ts
@@ -15,9 +15,11 @@ export const { componentLoader, definition } = createWidgetDefinition("timetable
         validate: z.string().url(),
       }),
       station: factory.dynamicSelect({
-        useOptions(query, _integrationIds, options) {
+        useOptions(query, _integrationIds, options, itemId, boardId) {
           const { data: stations, isPending } = clientApi.widget.timetable.searchStations.useQuery({
             baseUrl: typeof options.baseUrl === "string" ? options.baseUrl : "https://search.ch",
+            itemId,
+            boardId,
             query,
           });
 
diff --git a/packages/widgets/src/tracearr/bitrate.spec.ts b/packages/widgets/src/tracearr/bitrate.spec.ts
new file mode 100644
index 000000000..cbac63553
--- /dev/null
+++ b/packages/widgets/src/tracearr/bitrate.spec.ts
@@ -0,0 +1,18 @@
+import { describe, expect, test } from "vitest";
+
+import { formatTotalTracearrBitrate, formatTracearrBitrate } from "./bitrate";
+
+describe("Tracearr bitrate formatting", () => {
+  test("sums raw Kbps before choosing the display unit", () => {
+    expect(formatTotalTracearrBitrate([{ bitrate: 800 }, { bitrate: 1200 }])).toBe("2 Mbps");
+  });
+
+  test("formats Gbps after aggregation", () => {
+    expect(formatTotalTracearrBitrate([{ bitrate: 1_500_000 }, { bitrate: 500_000 }])).toBe("2 Gbps");
+  });
+
+  test("ignores missing and invalid bitrate values", () => {
+    expect(formatTotalTracearrBitrate([{ bitrate: null }, { bitrate: Number.NaN }, { bitrate: 500 }])).toBe("500 kbps");
+    expect(formatTracearrBitrate(0)).toBe("—");
+  });
+});
diff --git a/packages/widgets/src/tracearr/bitrate.ts b/packages/widgets/src/tracearr/bitrate.ts
new file mode 100644
index 000000000..203dcdbdc
--- /dev/null
+++ b/packages/widgets/src/tracearr/bitrate.ts
@@ -0,0 +1,20 @@
+import type { TracearrStream } from "@homarr/integrations/types";
+
+export function formatTracearrBitrate(kbps: number): string {
+  if (!Number.isFinite(kbps) || kbps <= 0) return "—";
+  if (kbps >= 1_000_000) return `${formatScaledBitrate(kbps / 1_000_000)} Gbps`;
+  if (kbps >= 1000) return `${formatScaledBitrate(kbps / 1000)} Mbps`;
+  return `${kbps} kbps`;
+}
+
+export function formatTotalTracearrBitrate(streams: readonly Pick<TracearrStream, "bitrate">[]): string {
+  const totalKbps = streams.reduce((sum, { bitrate }) => {
+    if (bitrate === null || !Number.isFinite(bitrate) || bitrate <= 0) return sum;
+    return sum + bitrate;
+  }, 0);
+  return formatTracearrBitrate(totalKbps);
+}
+
+function formatScaledBitrate(value: number): string {
+  return value % 1 === 0 ? value.toFixed(0) : value.toFixed(1);
+}
diff --git a/packages/widgets/src/tracearr/component.tsx b/packages/widgets/src/tracearr/component.tsx
index f3b70192a..f026b5710 100644
--- a/packages/widgets/src/tracearr/component.tsx
+++ b/packages/widgets/src/tracearr/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ScrollArea, Stack, Text } from "@mantine/core";
+import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { TracearrDashboardData } from "@homarr/integrations/types";
@@ -8,31 +8,48 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
+import { formatTotalTracearrBitrate } from "./bitrate";
 import { RecentActivityList } from "./recent-activity-section";
 import { StatsBar } from "./stats-section";
 import { StreamsList } from "./streams-section";
 import { ViolationsList } from "./violations-section";
 
-export default function TracearrWidget({ options, integrationIds, width }: WidgetComponentProps<"tracearr">) {
+export default function TracearrWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"tracearr">) {
   if (integrationIds.length === 0) {
     throw new NoIntegrationDataError();
   }
 
-  return <TracearrContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <TracearrContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      height={height}
+      displayMode={displayMode}
+    />
+  );
 }
 
 interface TracearrContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"tracearr">["options"];
   width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
 }
 
-function TracearrContent({ integrationIds, options, width }: TracearrContentProps) {
+function TracearrContent({ integrationIds, options, width, height, displayMode }: TracearrContentProps) {
   const t = useScopedI18n("widget.tracearr");
   const { data: dashboardData = [] } = clientApi.widget.tracearr.getDashboard.useQuery({ integrationIds });
 
   // Merge data from all integrations
-  const combined = dashboardData.reduce<TracearrDashboardData>(
+  const combinedData = dashboardData.reduce<TracearrDashboardData>(
     (acc, item) => {
       const { stats, streams, violations, recentActivity } = item.dashboard;
       const vData = violations ?? { data: [], meta: { total: 0, page: 1, pageSize: 5 } };
@@ -53,7 +70,7 @@ function TracearrContent({ integrationIds, options, width }: TracearrContentProp
             transcodes: acc.streams.summary.transcodes + streams.summary.transcodes,
             directStreams: acc.streams.summary.directStreams + streams.summary.directStreams,
             directPlays: acc.streams.summary.directPlays + streams.summary.directPlays,
-            totalBitrate: streams.summary.totalBitrate,
+            totalBitrate: "—",
             byServer: [...acc.streams.summary.byServer, ...streams.summary.byServer],
           },
         },
@@ -85,17 +102,51 @@ function TracearrContent({ integrationIds, options, width }: TracearrContentProp
       recentActivity: null,
     },
   );
+  const combined: TracearrDashboardData = {
+    ...combinedData,
+    streams: {
+      ...combinedData.streams,
+      summary: {
+        ...combinedData.streams.summary,
+        totalBitrate: formatTotalTracearrBitrate(combinedData.streams.data),
+      },
+    },
+  };
 
   const noSectionsEnabled =
     !options.showStats && !options.showStreams && !options.showRecentActivity && !options.showViolations;
 
+  const compactLimit = height < 220 ? 2 : height < 360 ? 4 : 8;
+  const streams = displayMode === "advanced" ? combined.streams.data : combined.streams.data.slice(0, compactLimit);
+  const violations = combined.violations?.data ?? [];
+  const recentActivity = combined.recentActivity?.data ?? [];
+
+  if (displayMode === "advanced") {
+    return (
+      <ScrollArea h="100%">
+        <SimpleGrid cols={width >= 800 ? 2 : 1} spacing="md" p="md">
+          <Stack gap="sm">
+            {options.showStats && (
+              <StatsBar stats={combined.stats} summary={combined.streams.summary} width={width / 2} />
+            )}
+            {options.showStreams && <StreamsList streams={streams} width={width / 2} />}
+          </Stack>
+          <Stack gap="sm">
+            {options.showViolations && <ViolationsList violations={violations} />}
+            {options.showRecentActivity && <RecentActivityList sessions={recentActivity} />}
+          </Stack>
+        </SimpleGrid>
+      </ScrollArea>
+    );
+  }
+
   return (
     <ScrollArea h="100%">
       <Stack gap="xs" p="xs">
         {options.showStats && <StatsBar stats={combined.stats} summary={combined.streams.summary} width={width} />}
-        {options.showStreams && <StreamsList streams={combined.streams.data} width={width} />}
-        {options.showViolations && <ViolationsList violations={combined.violations?.data ?? []} />}
-        {options.showRecentActivity && <RecentActivityList sessions={combined.recentActivity?.data ?? []} />}
+        {options.showStreams && <StreamsList streams={streams} width={width} />}
+        {options.showViolations && <ViolationsList violations={violations.slice(0, compactLimit)} />}
+        {options.showRecentActivity && <RecentActivityList sessions={recentActivity.slice(0, compactLimit)} />}
         {noSectionsEnabled && (
           <Text c="dimmed" ta="center">
             {t("noSectionsEnabled")}
diff --git a/packages/widgets/src/tracearr/index.ts b/packages/widgets/src/tracearr/index.ts
index 9c34eb548..8567197bb 100644
--- a/packages/widgets/src/tracearr/index.ts
+++ b/packages/widgets/src/tracearr/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("tracearr", {
   icon: IconActivityHeartbeat,
+  queryKey: [["widget", "tracearr"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/traefik/component.tsx b/packages/widgets/src/traefik/component.tsx
index 69ec3e811..e73de954c 100644
--- a/packages/widgets/src/traefik/component.tsx
+++ b/packages/widgets/src/traefik/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
-import { Badge, Group, ScrollArea, Text } from "@mantine/core";
+import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCircleCheck,
@@ -36,6 +36,8 @@ const emptyProtocol: TraefikProtocolSummary = {
 const emptyDashboard: TraefikDashboardData = {
   version: null,
   entryPoints: [],
+  resources: [],
+  failedEndpoints: [],
   http: emptyProtocol,
   tcp: emptyProtocol,
   udp: {
@@ -47,11 +49,21 @@ const emptyDashboard: TraefikDashboardData = {
 type ProtocolKey = "http" | "tcp" | "udp";
 type ResourceKey = "routers" | "services" | "middlewares";
 
-export default function TraefikWidget({ integrationIds, options, width }: WidgetComponentProps<"traefik">) {
-  if (integrationIds.length === 0) {
+export default function TraefikWidget(props: WidgetComponentProps<"traefik">) {
+  if (props.integrationIds.length === 0) {
     throw new NoIntegrationDataError();
   }
 
+  return <TraefikWidgetContent {...props} />;
+}
+
+function TraefikWidgetContent({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"traefik">) {
   const t = useScopedI18n("widget.traefik");
   const { data } = clientApi.widget.traefik.getDashboard.useQuery({ integrationIds });
 
@@ -61,6 +73,8 @@ export default function TraefikWidget({ integrationIds, options, width }: Widget
     (acc, item) => ({
       version: acc.version ?? item.dashboard.version,
       entryPoints: [...acc.entryPoints, ...item.dashboard.entryPoints],
+      resources: [...acc.resources, ...item.dashboard.resources],
+      failedEndpoints: [...acc.failedEndpoints, ...item.dashboard.failedEndpoints],
       http: combineProtocol(acc.http, item.dashboard.http),
       tcp: combineProtocol(acc.tcp, item.dashboard.tcp),
       udp: {
@@ -72,59 +86,114 @@ export default function TraefikWidget({ integrationIds, options, width }: Widget
   );
 
   const totalRouters = combined.http.routers.total + combined.tcp.routers.total + combined.udp.routers.total;
-  const totalErrors = getProtocolErrors(combined.http) + getProtocolErrors(combined.tcp) + getUdpErrors(combined.udp);
+  const totalErrors =
+    getProtocolErrors(combined.http) +
+    getProtocolErrors(combined.tcp) +
+    getUdpErrors(combined.udp) +
+    combined.failedEndpoints.length;
   const totalWarnings =
     getProtocolWarnings(combined.http) + getProtocolWarnings(combined.tcp) + getUdpWarnings(combined.udp);
   const protocolKeys: ProtocolKey[] = ["http"];
-  if (options.showTcp) protocolKeys.push("tcp");
-  if (options.showUdp) protocolKeys.push("udp");
+  if (options.showTcp && (displayMode === "advanced" || height >= 220)) protocolKeys.push("tcp");
+  if (options.showUdp && (displayMode === "advanced" || height >= 300)) protocolKeys.push("udp");
 
-  return (
-    <ScrollArea h="100%">
-      <div className={classes.root}>
-        <Group justify="space-between" gap="xs" wrap="nowrap">
-          <div className={classes.titleBlock}>
-            <Text className={classes.title}>{data.length === 1 ? data[0]?.integrationName : t("instances")}</Text>
-            <Text className={classes.subtitle}>{combined.version ? `v${combined.version}` : t("versionUnknown")}</Text>
-          </div>
-          <HealthBadge errors={totalErrors} warnings={totalWarnings} />
-        </Group>
-
-        <div className={classes.hero}>
-          <SummaryMetric
-            icon={<IconRoute size={getHeroIconSize(width)} />}
-            label={t("summary.routers")}
-            value={totalRouters}
-          />
-          <SummaryMetric
-            icon={<IconDoorEnter size={getHeroIconSize(width)} />}
-            label={t("summary.entryPoints")}
-            value={dedupe(combined.entryPoints).length}
-          />
+  const summary = (
+    <div className={classes.root}>
+      <Group justify="space-between" gap="xs" wrap="nowrap">
+        <div className={classes.titleBlock}>
+          <Text className={classes.title}>{data.length === 1 ? data[0]?.integrationName : t("instances")}</Text>
+          <Text className={classes.subtitle}>{combined.version ? `v${combined.version}` : t("versionUnknown")}</Text>
         </div>
+        <HealthBadge errors={totalErrors} warnings={totalWarnings} />
+      </Group>
 
-        <div className={classes.protocolGrid}>
-          {protocolKeys.map((protocol) => (
-            <ProtocolCard key={protocol} protocol={protocol} data={combined[protocol]} />
-          ))}
-        </div>
-
-        {options.showEntryPoints && combined.entryPoints.length > 0 && (
-          <div className={classes.entryPoints}>
-            {dedupe(combined.entryPoints)
-              .slice(0, getEntryPointLimit(width))
-              .map((entryPoint) => (
-                <Badge key={entryPoint} variant="light" size="sm" radius="sm">
-                  {entryPoint}
-                </Badge>
-              ))}
-          </div>
-        )}
+      <div className={classes.hero}>
+        <SummaryMetric
+          icon={<IconRoute size={getHeroIconSize(width)} />}
+          label={t("summary.routers")}
+          value={totalRouters}
+        />
+        <SummaryMetric
+          icon={<IconDoorEnter size={getHeroIconSize(width)} />}
+          label={t("summary.entryPoints")}
+          value={dedupe(combined.entryPoints).length}
+        />
       </div>
-    </ScrollArea>
+
+      <div className={classes.protocolGrid}>
+        {protocolKeys.map((protocol) => (
+          <ProtocolCard key={protocol} protocol={protocol} data={combined[protocol]} />
+        ))}
+      </div>
+
+      {options.showEntryPoints && combined.entryPoints.length > 0 && (
+        <div className={classes.entryPoints}>
+          {dedupe(combined.entryPoints)
+            .slice(0, getEntryPointLimit(width))
+            .map((entryPoint) => (
+              <Badge key={entryPoint} variant="light" size="sm" radius="sm">
+                {entryPoint}
+              </Badge>
+            ))}
+        </div>
+      )}
+    </div>
+  );
+
+  if (displayMode === "compact") return <ScrollArea h="100%">{summary}</ScrollArea>;
+
+  const resources = [...combined.resources].toSorted(
+    (left, right) =>
+      resourceStatusOrder[left.status] - resourceStatusOrder[right.status] || left.name.localeCompare(right.name),
+  );
+  return (
+    <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="md" h="100%" p="md">
+      <ScrollArea h="100%">{summary}</ScrollArea>
+      <ScrollArea h="100%">
+        <Stack gap="xs">
+          {combined.failedEndpoints.map((endpoint) => (
+            <Badge key={endpoint} color="red" variant="light">
+              {t("failedEndpoint", { endpoint })}
+            </Badge>
+          ))}
+          {resources.map((resource, index) => (
+            <Group
+              key={`${resource.protocol}:${resource.type}:${resource.name}:${index}`}
+              justify="space-between"
+              wrap="nowrap"
+              p="xs"
+            >
+              <Stack gap={0} style={{ minWidth: 0 }}>
+                <Text size="sm" fw={600} truncate>
+                  {resource.name}
+                </Text>
+                <Text size="xs" c="dimmed">
+                  {resource.protocol.toUpperCase()} · {t(`resourceType.${resource.type}`)} · {resource.provider ?? "—"}
+                </Text>
+              </Stack>
+              <Badge
+                color={
+                  resource.status === "error"
+                    ? "red"
+                    : resource.status === "warning"
+                      ? "yellow"
+                      : resource.status === "enabled"
+                        ? "green"
+                        : "gray"
+                }
+              >
+                {t(`resourceStatus.${resource.status}`)}
+              </Badge>
+            </Group>
+          ))}
+        </Stack>
+      </ScrollArea>
+    </SimpleGrid>
   );
 }
 
+const resourceStatusOrder = { error: 0, warning: 1, disabled: 2, unknown: 3, enabled: 4 } as const;
+
 function ProtocolCard({ protocol, data }: { protocol: ProtocolKey; data: TraefikDashboardData[ProtocolKey] }) {
   const t = useScopedI18n("widget.traefik");
   const rows: { key: ResourceKey; icon: typeof IconRoute; summary: TraefikResourceSummary }[] = [
diff --git a/packages/widgets/src/traefik/index.ts b/packages/widgets/src/traefik/index.ts
index 854075121..a45686578 100644
--- a/packages/widgets/src/traefik/index.ts
+++ b/packages/widgets/src/traefik/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("traefik", {
   icon: IconRoute,
+  queryKey: [["widget", "traefik"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showTcp: factory.switch({
diff --git a/packages/widgets/src/umami/component.tsx b/packages/widgets/src/umami/component.tsx
index 2aec3b46e..73ccaf679 100644
--- a/packages/widgets/src/umami/component.tsx
+++ b/packages/widgets/src/umami/component.tsx
@@ -7,7 +7,12 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import { UmamiContent } from "./umami-content";
 
-export default function UmamiWidget({ options, integrationIds }: WidgetComponentProps<"umami">) {
+export default function UmamiWidget({
+  options,
+  integrationIds,
+  width,
+  displayMode = "compact",
+}: WidgetComponentProps<"umami">) {
   if (!options.websiteId || options.websiteId.trim() === "") {
     return <NoWebsiteConfigured />;
   }
@@ -23,6 +28,8 @@ export default function UmamiWidget({ options, integrationIds }: WidgetComponent
       chartType={options.chartType}
       viewMode={options.viewMode}
       topCount={options.topCount}
+      width={width}
+      displayMode={displayMode}
     />
   );
 }
diff --git a/packages/widgets/src/umami/index.ts b/packages/widgets/src/umami/index.ts
index badbef369..90861eab1 100644
--- a/packages/widgets/src/umami/index.ts
+++ b/packages/widgets/src/umami/index.ts
@@ -8,8 +8,11 @@ export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth
 
 export const { definition, componentLoader } = createWidgetDefinition("umami", {
   icon: IconChartBar,
+  queryKey: [["widget", "umami"]],
   refetchInterval: null,
   supportedIntegrations: ["umami"],
+  integrationsRequired: true,
+  maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 2a187c3d5..17422a3a1 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { BarChart, LineChart } from "@mantine/charts";
-import { Box, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
+import { Box, Group, SimpleGrid, Stack, Text, useMantineColorScheme } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
@@ -23,6 +23,8 @@ interface UmamiContentProps {
   chartType: string;
   viewMode: string;
   topCount: number;
+  width: number;
+  displayMode: "compact" | "advanced";
 }
 
 export function UmamiContent({
@@ -35,6 +37,8 @@ export function UmamiContent({
   chartType,
   viewMode,
   topCount,
+  width,
+  displayMode,
 }: UmamiContentProps) {
   const t = useScopedI18n("widget.umami");
   const { colorScheme } = useMantineColorScheme();
@@ -88,6 +92,63 @@ export function UmamiContent({
   const isOverlay = chartStyle === "overlay" && hasEventSeries;
   const overlayBarSize = 16;
 
+  const selectedView =
+    viewMode === "events" ? (
+      <UmamiEventsContent
+        integrationIds={integrationIds}
+        websiteId={websiteId}
+        timeFrame={timeFrame}
+        eventNames={eventNames}
+        chartType={chartType}
+      />
+    ) : viewMode === "topPages" ? (
+      <UmamiTopPagesContent
+        integrationIds={integrationIds}
+        websiteId={websiteId}
+        timeFrame={timeFrame}
+        limit={topCount}
+      />
+    ) : viewMode === "topReferrers" ? (
+      <UmamiTopReferrersContent
+        integrationIds={integrationIds}
+        websiteId={websiteId}
+        timeFrame={timeFrame}
+        limit={topCount}
+      />
+    ) : chartType === "sparkline" ? (
+      <LineChart
+        h="100%"
+        data={chartData}
+        dataKey="label"
+        series={series}
+        withDots={false}
+        curveType="monotone"
+        tickLine="none"
+        gridAxis="none"
+        withLegend={false}
+        withTooltip
+        withXAxis
+        withYAxis={false}
+        xAxisProps={{ tick: { fontSize: 9, fill: tickColor }, interval: "preserveStartEnd" }}
+      />
+    ) : (
+      <BarChart
+        h="100%"
+        data={chartData}
+        dataKey="label"
+        series={series}
+        tickLine="none"
+        gridAxis="none"
+        withLegend={false}
+        withTooltip
+        withXAxis
+        withYAxis={false}
+        barProps={isOverlay ? { barSize: overlayBarSize, radius: 2 } : { radius: 2 }}
+        barChartProps={isOverlay ? { barGap: -overlayBarSize } : undefined}
+        xAxisProps={{ tick: { fontSize: 9, fill: tickColor }, interval: "preserveStartEnd" }}
+      />
+    );
+
   return (
     <Stack gap={4} p="xs" h="100%">
       <Group justify="space-between" align="baseline" wrap="nowrap">
@@ -140,74 +201,38 @@ export function UmamiContent({
         <Text size="xs" c="dimmed">
           {visitorStats.totalVisits.toLocaleString()} {t("visits")}
         </Text>
-        <Text size="xs" c="dimmed">
-          {visitorStats.bounceRate}% {t("bounceRate")}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
-        </Text>
+        {(displayMode === "advanced" || width >= 260) && (
+          <>
+            <Text size="xs" c="dimmed">
+              {visitorStats.bounceRate}% {t("bounceRate")}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
+            </Text>
+          </>
+        )}
       </Group>
       <Box mt={4} style={{ flex: 1, minHeight: 0 }}>
-        {viewMode === "events" ? (
-          <UmamiEventsContent
-            integrationIds={integrationIds}
-            websiteId={websiteId}
-            timeFrame={timeFrame}
-            eventNames={eventNames}
-            chartType={chartType}
-          />
-        ) : viewMode === "topPages" ? (
-          <UmamiTopPagesContent
-            integrationIds={integrationIds}
-            websiteId={websiteId}
-            timeFrame={timeFrame}
-            limit={topCount}
-          />
-        ) : viewMode === "topReferrers" ? (
-          <UmamiTopReferrersContent
-            integrationIds={integrationIds}
-            websiteId={websiteId}
-            timeFrame={timeFrame}
-            limit={topCount}
-          />
-        ) : chartType === "sparkline" ? (
-          <LineChart
-            h="100%"
-            data={chartData}
-            dataKey="label"
-            series={series}
-            withDots={false}
-            curveType="monotone"
-            tickLine="none"
-            gridAxis="none"
-            withLegend={false}
-            withTooltip
-            withXAxis
-            withYAxis={false}
-            xAxisProps={{
-              tick: { fontSize: 9, fill: tickColor },
-              interval: "preserveStartEnd",
-            }}
-          />
+        {displayMode === "advanced" ? (
+          <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="md" h="100%">
+            <Box mih={260}>{selectedView}</Box>
+            <SimpleGrid cols={2} spacing="md" mih={260}>
+              <UmamiTopPagesContent
+                integrationIds={integrationIds}
+                websiteId={websiteId}
+                timeFrame={timeFrame}
+                limit={topCount}
+              />
+              <UmamiTopReferrersContent
+                integrationIds={integrationIds}
+                websiteId={websiteId}
+                timeFrame={timeFrame}
+                limit={topCount}
+              />
+            </SimpleGrid>
+          </SimpleGrid>
         ) : (
-          <BarChart
-            h="100%"
-            data={chartData}
-            dataKey="label"
-            series={series}
-            tickLine="none"
-            gridAxis="none"
-            withLegend={false}
-            withTooltip
-            withXAxis
-            withYAxis={false}
-            barProps={isOverlay ? { barSize: overlayBarSize, radius: 2 } : { radius: 2 }}
-            barChartProps={isOverlay ? { barGap: -overlayBarSize } : undefined}
-            xAxisProps={{
-              tick: { fontSize: 9, fill: tickColor },
-              interval: "preserveStartEnd",
-            }}
-          />
+          selectedView
         )}
       </Box>
     </Stack>
diff --git a/packages/widgets/src/ups/component.tsx b/packages/widgets/src/ups/component.tsx
index 2b3d93bd9..a7d140ce7 100644
--- a/packages/widgets/src/ups/component.tsx
+++ b/packages/widgets/src/ups/component.tsx
@@ -1,6 +1,18 @@
 "use client";
 
-import { Badge, Box, Card, Group, Progress, RingProgress, ScrollArea, Stack, Text } from "@mantine/core";
+import {
+  Badge,
+  Box,
+  Card,
+  Group,
+  Progress,
+  RingProgress,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  VisuallyHidden,
+} from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
@@ -22,29 +34,47 @@ const statusColors: Record<UpsStatus, string> = {
 
 type UpsLayout = "mini" | "compact" | "full";
 
-export default function UpsWidget({ options, integrationIds, width }: WidgetComponentProps<"ups">) {
+export default function UpsWidget({
+  options,
+  integrationIds,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"ups">) {
   if (integrationIds.length === 0) {
     throw new NoIntegrationSelectedError();
   }
 
-  return <UpsContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <UpsContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      height={height}
+      displayMode={displayMode}
+    />
+  );
 }
 
 interface UpsContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"ups">["options"];
   width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
 }
 
-function UpsContent({ integrationIds, options, width }: UpsContentProps) {
+function UpsContent({ integrationIds, options, width, height, displayMode }: UpsContentProps) {
   const t = useScopedI18n("widget.ups");
   const { data } = clientApi.widget.ups.getSummaries.useQuery({ integrationIds });
 
   if (!data) return <WidgetEmptyState />;
 
-  const devices = data.flatMap((instance) =>
-    instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
-  );
+  const devices = data
+    .flatMap((instance) =>
+      instance.summaries.map((summary) => ({ key: `${instance.integrationId}:${summary.id}`, summary })),
+    )
+    .toSorted((left, right) => statusPriority[left.summary.status] - statusPriority[right.summary.status]);
 
   if (devices.length === 0) {
     return <WidgetEmptyState />;
@@ -55,27 +85,52 @@ function UpsContent({ integrationIds, options, width }: UpsContentProps) {
   // - full: ring beside a column of stats (runtime, load, voltage)
   // - compact (~2 columns): ring beside the name and a status badge
   // - mini (~1 column): a text badge no longer fits, so status becomes a colour dot next to the name
-  const layout: UpsLayout = width < 150 ? "mini" : width < 256 ? "compact" : "full";
+  const layout: UpsLayout =
+    displayMode === "advanced" ? "full" : width < 150 || height < 110 ? "mini" : width < 256 ? "compact" : "full";
+
+  const cards = devices.map(({ key, summary }) => (
+    <UpsDeviceCard
+      key={key}
+      summary={summary}
+      options={options}
+      layout={layout}
+      advanced={displayMode === "advanced"}
+      t={t}
+    />
+  ));
 
   return (
     <ScrollArea h="100%">
-      <Stack gap="xs" p="xs">
-        {devices.map(({ key, summary }) => (
-          <UpsDeviceCard key={key} summary={summary} options={options} layout={layout} t={t} />
-        ))}
-      </Stack>
+      {displayMode === "advanced" ? (
+        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="md" p="md">
+          {cards}
+        </SimpleGrid>
+      ) : (
+        <Stack gap="xs" p="xs">
+          {cards}
+        </Stack>
+      )}
     </ScrollArea>
   );
 }
 
+const statusPriority: Record<UpsStatus, number> = {
+  lowBattery: 0,
+  onBattery: 1,
+  charging: 2,
+  unknown: 3,
+  online: 4,
+};
+
 interface UpsDeviceCardProps {
   summary: UpsSummary;
   options: WidgetComponentProps<"ups">["options"];
   layout: UpsLayout;
+  advanced: boolean;
   t: ScopedTranslationFunction<"widget.ups">;
 }
 
-function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
+function UpsDeviceCard({ summary, options, layout, advanced, t }: UpsDeviceCardProps) {
   const showRing = options.showBattery && summary.batteryCharge !== null;
   const statusBadge = (
     <Badge
@@ -95,12 +150,14 @@ function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
           <Box
             w={8}
             h={8}
+            aria-hidden="true"
             style={{
               borderRadius: "50%",
               backgroundColor: `var(--mantine-color-${statusColors[summary.status]}-6)`,
               flexShrink: 0,
             }}
           />
+          <VisuallyHidden>{t(`status.${summary.status}`)}</VisuallyHidden>
           <Text fw={600} size="xs" truncate>
             {summary.name}
           </Text>
@@ -205,6 +262,20 @@ function UpsDeviceCard({ summary, options, layout, t }: UpsDeviceCardProps) {
           )}
         </Stack>
       </Group>
+      {advanced && (
+        <SimpleGrid cols={2} spacing={4} mt="sm">
+          {summary.batteryVoltage !== null && (
+            <StatRow label={t("field.batteryVoltage")} value={`${summary.batteryVoltage} V`} />
+          )}
+          {summary.power !== null && <StatRow label={t("field.power")} value={`${summary.power} W`} />}
+          {summary.temperature !== null && (
+            <StatRow label={t("field.temperature")} value={`${summary.temperature} °C`} />
+          )}
+          {summary.manufacturer && <StatRow label={t("field.manufacturer")} value={summary.manufacturer} />}
+          {summary.model && <StatRow label={t("field.model")} value={summary.model} />}
+          {summary.serial && <StatRow label={t("field.serial")} value={summary.serial} />}
+        </SimpleGrid>
+      )}
     </Card>
   );
 }
diff --git a/packages/widgets/src/ups/index.ts b/packages/widgets/src/ups/index.ts
index 681daf417..c9d535dd0 100644
--- a/packages/widgets/src/ups/index.ts
+++ b/packages/widgets/src/ups/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("ups", {
   icon: IconBatteryCharging,
+  queryKey: [["widget", "ups"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showBattery: factory.switch({
diff --git a/packages/widgets/src/uptime-kuma/aggregate.spec.ts b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
new file mode 100644
index 000000000..c4aaf9f18
--- /dev/null
+++ b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+
+import { aggregateUptimeKumaDashboards } from "./aggregate";
+
+describe("aggregateUptimeKumaDashboards", () => {
+  it("weights uptime by monitors instead of integrations", () => {
+    const combined = aggregateUptimeKumaDashboards([
+      {
+        totalMonitors: 1,
+        upCount: 1,
+        downCount: 0,
+        pausedCount: 0,
+        averageUptimePercent: 100,
+        monitors: [{ id: 1, name: "one", status: "up", uptimePercent24h: 100 }],
+      },
+      {
+        totalMonitors: 3,
+        upCount: 0,
+        downCount: 3,
+        pausedCount: 0,
+        averageUptimePercent: 0,
+        monitors: [
+          { id: 2, name: "two", status: "down", uptimePercent24h: 0 },
+          { id: 3, name: "three", status: "down", uptimePercent24h: 0 },
+          { id: 4, name: "four", status: "down", uptimePercent24h: 0 },
+        ],
+      },
+    ]);
+    expect(combined.averageUptimePercent).toBe(25);
+  });
+});
diff --git a/packages/widgets/src/uptime-kuma/aggregate.ts b/packages/widgets/src/uptime-kuma/aggregate.ts
new file mode 100644
index 000000000..f7e6650be
--- /dev/null
+++ b/packages/widgets/src/uptime-kuma/aggregate.ts
@@ -0,0 +1,30 @@
+import type { UptimeKumaDashboardData } from "@homarr/integrations/types";
+
+const emptyDashboard: UptimeKumaDashboardData = {
+  totalMonitors: 0,
+  upCount: 0,
+  downCount: 0,
+  pausedCount: 0,
+  averageUptimePercent: 0,
+  monitors: [],
+};
+
+export function aggregateUptimeKumaDashboards(dashboards: UptimeKumaDashboardData[]): UptimeKumaDashboardData {
+  const combined = dashboards.reduce<UptimeKumaDashboardData>(
+    (acc, dashboard) => ({
+      totalMonitors: acc.totalMonitors + dashboard.totalMonitors,
+      upCount: acc.upCount + dashboard.upCount,
+      downCount: acc.downCount + dashboard.downCount,
+      pausedCount: acc.pausedCount + dashboard.pausedCount,
+      averageUptimePercent: 0,
+      monitors: [...acc.monitors, ...dashboard.monitors],
+    }),
+    emptyDashboard,
+  );
+  const uptimeValues = combined.monitors
+    .map((monitor) => monitor.uptimePercent24h)
+    .filter((value): value is number => value !== null);
+  combined.averageUptimePercent =
+    uptimeValues.reduce((total, value) => total + value, 0) / Math.max(uptimeValues.length, 1);
+  return combined;
+}
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index 5719f2f13..b77d66afb 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -1,27 +1,18 @@
 "use client";
 
 import type { CSSProperties } from "react";
-import { RingProgress, Text } from "@mantine/core";
+import { Badge, Group, RingProgress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp, IconClockPause, IconServer } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { formatNumber } from "@homarr/common";
-import type { UptimeKumaDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
-
-const emptyDashboard: UptimeKumaDashboardData = {
-  totalMonitors: 0,
-  upCount: 0,
-  downCount: 0,
-  pausedCount: 0,
-  averageUptimePercent: 0,
-  monitors: [],
-};
+import { aggregateUptimeKumaDashboards } from "./aggregate";
 
 const statVisibilityByOption = {
   showTotalMonitors: "totalMonitors",
@@ -85,41 +76,51 @@ const heroVariantByRing = {
   false: classes.heroTextOnly,
 } as const;
 
-export default function UptimeKumaWidget({ integrationIds, options, width }: WidgetComponentProps<"uptimeKuma">) {
+export default function UptimeKumaWidget({
+  integrationIds,
+  options,
+  width,
+  height,
+  displayMode = "compact",
+}: WidgetComponentProps<"uptimeKuma">) {
   if (integrationIds.length === 0) {
     throw new NoIntegrationDataError();
   }
 
-  return <UptimeKumaContent integrationIds={integrationIds} options={options} width={width} />;
+  return (
+    <UptimeKumaContent
+      integrationIds={integrationIds}
+      options={options}
+      width={width}
+      height={height}
+      displayMode={displayMode}
+    />
+  );
 }
 
 interface UptimeKumaContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"uptimeKuma">["options"];
   width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
 }
 
-function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContentProps) {
+function UptimeKumaContent({ integrationIds, options, width, height, displayMode }: UptimeKumaContentProps) {
   const t = useScopedI18n("widget.uptimeKuma");
   const { data: dashboardData } = clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds });
 
   if (!dashboardData) return <WidgetEmptyState />;
 
-  const combined = dashboardData.reduce<UptimeKumaDashboardData>(
-    (acc, item) => ({
-      totalMonitors: acc.totalMonitors + item.dashboard.totalMonitors,
-      upCount: acc.upCount + item.dashboard.upCount,
-      downCount: acc.downCount + item.dashboard.downCount,
-      pausedCount: acc.pausedCount + item.dashboard.pausedCount,
-      averageUptimePercent: acc.averageUptimePercent + item.dashboard.averageUptimePercent,
-      monitors: [...acc.monitors, ...item.dashboard.monitors],
-    }),
-    emptyDashboard,
+  const combined = aggregateUptimeKumaDashboards(dashboardData.map((item) => item.dashboard));
+  const monitors = dashboardData.flatMap((result) =>
+    result.dashboard.monitors.map((monitor) => ({
+      ...monitor,
+      key: `${result.integrationId}:${monitor.id}`,
+      integrationName: result.integrationName,
+    })),
   );
-
-  const instanceCount = dashboardData.length;
-  const averageUptime = combined.averageUptimePercent / Math.max(instanceCount, 1);
-  const uptimeValue = clampPercent(averageUptime);
+  const uptimeValue = clampPercent(combined.averageUptimePercent);
   const uptimeColor = getUptimeColor(uptimeValue);
   const ringSize = getRingSize(width);
   const iconSize = getIconSize(width);
@@ -136,7 +137,7 @@ function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContent
     heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
   const heroRingClass = heroVariantByRing[String(options.showUptimeRing) as keyof typeof heroVariantByRing];
 
-  return (
+  const summaryContent = (
     <div className={classes.root}>
       {showHero && (
         <div className={`${classes.hero} ${heroLayoutClass} ${heroRingClass}`}>
@@ -189,10 +190,61 @@ function UptimeKumaContent({ integrationIds, options, width }: UptimeKumaContent
           })}
         </div>
       )}
+      {displayMode === "compact" && height >= 240 && combined.downCount > 0 && (
+        <Stack gap={2} px="sm">
+          {monitors
+            .filter((monitor) => monitor.status === "down")
+            .slice(0, 3)
+            .map((monitor) => (
+              <Group key={monitor.key} justify="space-between" wrap="nowrap">
+                <Text size="xs" truncate>
+                  {monitor.name}
+                </Text>
+                <Badge size="xs" color="red">
+                  {t("status.down")} · {formatNumber(monitor.uptimePercent24h ?? 0, 1)}%
+                </Badge>
+              </Group>
+            ))}
+        </Stack>
+      )}
     </div>
   );
+
+  if (displayMode === "compact") return summaryContent;
+
+  return (
+    <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="lg" h="100%" p="md">
+      {summaryContent}
+      <ScrollArea h="100%">
+        <Stack gap="xs">
+          {monitors
+            .toSorted((left, right) => statusOrder[left.status] - statusOrder[right.status])
+            .map((monitor) => (
+              <Group key={monitor.key} justify="space-between" wrap="nowrap" p="xs">
+                <Stack gap={0} style={{ minWidth: 0 }}>
+                  <Text size="sm" fw={600} truncate>
+                    {monitor.name}
+                  </Text>
+                  {dashboardData.length > 1 && (
+                    <Text size="xs" c="dimmed">
+                      {monitor.integrationName}
+                    </Text>
+                  )}
+                </Stack>
+                <Badge color={monitor.status === "up" ? "green" : monitor.status === "down" ? "red" : "yellow"}>
+                  {t(`status.${monitor.status}`)} ·{" "}
+                  {monitor.uptimePercent24h === null ? "—" : `${formatNumber(monitor.uptimePercent24h, 1)}%`}
+                </Badge>
+              </Group>
+            ))}
+        </Stack>
+      </ScrollArea>
+    </SimpleGrid>
+  );
 }
 
+const statusOrder = { down: 0, paused: 1, up: 2 } as const;
+
 function clampPercent(value: number): number {
   return Math.min(100, Math.max(0, value));
 }
diff --git a/packages/widgets/src/uptime-kuma/index.ts b/packages/widgets/src/uptime-kuma/index.ts
index b9eebcd8c..cb0d4b0ea 100644
--- a/packages/widgets/src/uptime-kuma/index.ts
+++ b/packages/widgets/src/uptime-kuma/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("uptimeKuma", {
   icon: IconHeartbeat,
+  queryKey: [["widget", "uptimeKuma"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showAverageUptime: factory.switch({
diff --git a/packages/widgets/src/video/component.tsx b/packages/widgets/src/video/component.tsx
index 12b6bbde0..954065e01 100644
--- a/packages/widgets/src/video/component.tsx
+++ b/packages/widgets/src/video/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { Anchor, Box, Center, Group, Stack, Title } from "@mantine/core";
+import { Anchor, Badge, Box, Center, Group, Stack, Title } from "@mantine/core";
 import { IconBrandYoutube, IconDeviceCctvOff } from "@tabler/icons-react";
 import videojs from "video.js";
 
@@ -16,18 +16,27 @@ import type Player from "video.js/dist/types/player";
 
 import { createDocumentationLink } from "@homarr/definitions";
 
-export default function VideoWidget({ options }: WidgetComponentProps<"video">) {
+export default function VideoWidget({ options, isEditMode, displayMode }: WidgetComponentProps<"video">) {
   if (options.feedUrl.trim() === "") {
     return <NoUrl />;
   }
 
-  if (options.feedUrl.trim().startsWith("https://www.youtube.com/watch")) {
+  if (isYouTubeUrl(options.feedUrl)) {
     return <ForYoutubeUseIframe />;
   }
 
-  return <Feed options={options} />;
+  return <Feed options={options} isEditMode={isEditMode} isAdvanced={displayMode === "advanced"} />;
 }
 
+export const isYouTubeUrl = (value: string): boolean => {
+  try {
+    const url = new URL(value);
+    return url.hostname === "youtu.be" || url.hostname === "youtube.com" || url.hostname.endsWith(".youtube.com");
+  } catch {
+    return false;
+  }
+};
+
 const NoUrl = () => {
   const t = useI18n();
 
@@ -55,7 +64,11 @@ const ForYoutubeUseIframe = () => {
   );
 };
 
-const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
+const Feed = ({
+  options,
+  isEditMode,
+  isAdvanced,
+}: Pick<WidgetComponentProps<"video">, "options"> & { isEditMode: boolean; isAdvanced: boolean }) => {
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Player>(null);
 
@@ -98,8 +111,8 @@ const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
 
   useEffect(() => {
     if (!playerRef.current) return;
-    playerRef.current.controls(options.hasControls);
-  }, [options.hasControls]);
+    playerRef.current.controls(!isEditMode && (options.hasControls || isAdvanced));
+  }, [isAdvanced, isEditMode, options.hasControls]);
 
   useEffect(() => {
     const player = playerRef.current;
@@ -113,8 +126,21 @@ const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
   }, [playerRef]);
 
   return (
-    <Group justify="center" w="100%" h="100%" pos="relative">
+    <Group justify="center" w="100%" h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
       <Box w="100%" h="100%" ref={videoRef} />
+      {isAdvanced && (
+        <Badge pos="absolute" top={8} left={8} variant="filled" color="dark" maw="calc(100% - 16px)">
+          {getVideoHost(options.feedUrl)}
+        </Badge>
+      )}
     </Group>
   );
 };
+
+const getVideoHost = (value: string) => {
+  try {
+    return new URL(value).host;
+  } catch {
+    return value;
+  }
+};
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index 79ed5d695..4d43bc302 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -1,35 +1,63 @@
 "use client";
 
-import { Flex, ScrollArea, Stack } from "@mantine/core";
+import { Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { VpnIntegrationCard } from "./vpn-card";
 
-export default function VpnWidget({ options, integrationIds }: WidgetComponentProps<"vpn">) {
+export default function VpnWidget({
+  options,
+  integrationIds,
+  width,
+  displayMode = "compact",
+}: WidgetComponentProps<"vpn">) {
   const { data: integrations = [] } = clientApi.widget.vpn.getSummaries.useQuery({
     ...options,
     integrationIds,
   });
 
   const [vpn] = integrations;
-  if (integrations.length === 1 && vpn) {
+  if (displayMode === "compact" && integrations.length === 1 && vpn) {
     return (
       <Flex align="center" justify="center" w="100%" h="100%" px="xs" py="sm">
-        <VpnIntegrationCard vpn={vpn.summary} integrationName={vpn.integration.name} />
+        <VpnIntegrationCard
+          vpn={vpn.summary}
+          integrationName={vpn.integration.name}
+          variant={width < 240 ? "list" : "single"}
+        />
       </Flex>
     );
   }
 
+  if (displayMode === "advanced") {
+    return (
+      <ScrollArea h="100%" p="md">
+        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="md">
+          {integrations.map((result) => (
+            <Stack key={result.integration.id} gap={4} p="sm">
+              <VpnIntegrationCard vpn={result.summary} integrationName={result.integration.name} variant="list" />
+              {!result.error && new Date(result.integration.updatedAt).getTime() > 0 && (
+                <Text size="xs" c="dimmed" ta="right">
+                  {new Date(result.integration.updatedAt).toLocaleString()}
+                </Text>
+              )}
+            </Stack>
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
+    );
+  }
+
   return (
     <ScrollArea className="scroll-area-w100" w="100%" h="100%" offsetScrollbars>
       <Stack w="100%" gap="sm" py="xs" px="xs">
-        {integrations.map((vpn) => (
+        {integrations.map((result) => (
           <VpnIntegrationCard
-            key={vpn.integration.id}
-            vpn={vpn.summary}
-            integrationName={vpn.integration.name}
+            key={result.integration.id}
+            vpn={result.summary}
+            integrationName={result.integration.name}
             variant="list"
           />
         ))}
diff --git a/packages/widgets/src/vpn/index.ts b/packages/widgets/src/vpn/index.ts
index b3cbe8c73..e63b55455 100644
--- a/packages/widgets/src/vpn/index.ts
+++ b/packages/widgets/src/vpn/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("vpn", {
   icon: IconShieldLock,
+  queryKey: [["widget", "vpn"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from(() => ({}));
diff --git a/packages/widgets/src/weather/animated-icon.tsx b/packages/widgets/src/weather/animated-icon.tsx
index 70145b4b1..e95fa2f47 100644
--- a/packages/widgets/src/weather/animated-icon.tsx
+++ b/packages/widgets/src/weather/animated-icon.tsx
@@ -7,7 +7,6 @@ interface AnimatedWeatherIconProps {
   size?: string | number;
 }
 
-
 const getAnimationClass = (code: number): string => {
   if (code === 0) return "weather-anim-sun";
   if ([1, 2, 3].includes(code)) return "weather-anim-cloud";
@@ -18,7 +17,6 @@ const getAnimationClass = (code: number): string => {
   return "";
 };
 
-
 export const AnimatedWeatherIcon = ({ code, size = 26 }: AnimatedWeatherIconProps) => {
   return (
     <span className={`weather-anim-wrapper ${getAnimationClass(code)}`}>
diff --git a/packages/widgets/src/weather/component.spec.ts b/packages/widgets/src/weather/component.spec.ts
new file mode 100644
index 000000000..54f8f6a56
--- /dev/null
+++ b/packages/widgets/src/weather/component.spec.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+
+import { getPreferredUnit, getVisibleForecastDays } from "./component";
+
+describe("weather formatting", () => {
+  it("preserves valid zero temperatures", () => {
+    expect(getPreferredUnit(0)).toBe("0.0°C");
+    expect(getPreferredUnit(0, true, true)).toBe("32°F");
+  });
+
+  it("limits compact forecasts by both axes", () => {
+    expect(getVisibleForecastDays(7, 120, 100, false)).toBe(2);
+    expect(getVisibleForecastDays(7, 600, 100, false)).toBe(3);
+    expect(getVisibleForecastDays(7, 120, 100, true)).toBe(7);
+  });
+});
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index 0329597b1..d2346e6ae 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -15,7 +15,13 @@ import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "./animated-icon";
 import { WeatherDescription } from "./icon";
 
-export default function WeatherWidget({ isEditMode, options }: WidgetComponentProps<"weather">) {
+export default function WeatherWidget({
+  isEditMode,
+  options,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"weather">) {
   const input = {
     latitude: options.location.latitude,
     longitude: options.location.longitude,
@@ -34,9 +40,14 @@ export default function WeatherWidget({ isEditMode, options }: WidgetComponentPr
       style={{ pointerEvents: isEditMode ? "none" : undefined }}
     >
       {options.hasForecast ? (
-        <WeeklyForecast weather={weather} options={options} />
+        <WeeklyForecast
+          weather={weather}
+          options={options}
+          maxDays={getVisibleForecastDays(options.forecastDayCount, width, height, displayMode === "advanced")}
+          showDetails={displayMode === "advanced"}
+        />
       ) : (
-        <DailyWeather weather={weather} options={options} />
+        <DailyWeather weather={weather} options={options} showDetails={displayMode === "advanced"} />
       )}
     </Stack>
   );
@@ -46,7 +57,7 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
-const DailyWeather = ({ options, weather }: WeatherProps) => {
+const DailyWeather = ({ options, weather, showDetails = false }: WeatherProps & { showDetails?: boolean }) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
 
@@ -127,11 +138,39 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
           </Group>
         </>
       )}
+      {showDetails && weather.daily[0] && (
+        <WeatherDescription
+          useImperialSpeed={options.useImperialSpeed}
+          dateFormat={options.dateFormat}
+          time={weather.daily[0].time}
+          weatherCode={weather.daily[0].weatherCode}
+          maxTemp={getPreferredUnit(
+            weather.daily[0].maxTemp,
+            options.isFormatFahrenheit,
+            options.disableTemperatureDecimals,
+          )}
+          minTemp={getPreferredUnit(
+            weather.daily[0].minTemp,
+            options.isFormatFahrenheit,
+            options.disableTemperatureDecimals,
+          )}
+          sunrise={dayjs(weather.daily[0].sunrise).format("HH:mm")}
+          sunset={dayjs(weather.daily[0].sunset).format("HH:mm")}
+          maxWindSpeed={weather.daily[0].maxWindSpeed}
+          maxWindGusts={weather.daily[0].maxWindGusts}
+          humidity={weather.daily[0].humidity}
+        />
+      )}
     </>
   );
 };
 
-const WeeklyForecast = ({ options, weather }: WeatherProps) => {
+const WeeklyForecast = ({
+  options,
+  weather,
+  maxDays,
+  showDetails,
+}: WeatherProps & { maxDays: number; showDetails: boolean }) => {
   return (
     <>
       <Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="md">
@@ -163,16 +202,21 @@ const WeeklyForecast = ({ options, weather }: WeatherProps) => {
           </Text>
         </Group>
       </Group>
-      <Forecast weather={weather} options={options} />
+      <Forecast weather={weather} options={options} maxDays={maxDays} showDetails={showDetails} />
     </>
   );
 };
 
-function Forecast({ weather, options }: WeatherProps) {
+function Forecast({
+  weather,
+  options,
+  maxDays,
+  showDetails,
+}: WeatherProps & { maxDays: number; showDetails: boolean }) {
   const dateFormat = options.dateFormat;
   return (
     <Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="sm">
-      {weather.daily.slice(0, options.forecastDayCount).map((dayWeather, index) => (
+      {weather.daily.slice(0, maxDays).map((dayWeather, index) => (
         <HoverCard key={dayWeather.time} withArrow shadow="md">
           <HoverCard.Target>
             <Stack
@@ -189,6 +233,11 @@ function Forecast({ weather, options }: WeatherProps) {
               <Text fz={16}>
                 {getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
               </Text>
+              {showDetails && (
+                <Text fz="xs" c="dimmed">
+                  {getPreferredUnit(dayWeather.minTemp, options.isFormatFahrenheit, true)}
+                </Text>
+              )}
             </Stack>
           </HoverCard.Target>
           <HoverCard.Dropdown>
@@ -220,9 +269,21 @@ function Forecast({ weather, options }: WeatherProps) {
   );
 }
 
-const getPreferredUnit = (value?: number, isFahrenheit = false, disableTemperatureDecimals = false): string =>
-  value
+export const getPreferredUnit = (value?: number, isFahrenheit = false, disableTemperatureDecimals = false): string =>
+  value !== undefined
     ? isFahrenheit
       ? `${(value * (9 / 5) + 32).toFixed(disableTemperatureDecimals ? 0 : 1)}°F`
       : `${value.toFixed(disableTemperatureDecimals ? 0 : 1)}°C`
     : "?";
+
+export const getVisibleForecastDays = (
+  configuredDays: number,
+  width: number,
+  height: number,
+  isAdvanced: boolean,
+): number => {
+  if (isAdvanced) return configuredDays;
+  const widthBudget = Math.max(1, Math.floor(width / 58));
+  const heightBudget = height < 120 ? 3 : configuredDays;
+  return Math.min(configuredDays, widthBudget, heightBudget);
+};
diff --git a/packages/widgets/src/weather/index.ts b/packages/widgets/src/weather/index.ts
index 6c30b6df8..f775d15b7 100644
--- a/packages/widgets/src/weather/index.ts
+++ b/packages/widgets/src/weather/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("weather", {
   icon: IconCloud,
+  queryKey: [["widget", "weather"]],
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({

From b28beec2c6c385b353c68085303fda514c6c712d Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 1 Aug 2026 21:45:01 +0200
Subject: [PATCH 02/75] fix: refine widget modernization

---
 .../advanced-focus/advanced-focus.module.css  |  20 ++-
 .../board/advanced-focus/geometry.spec.ts     |  12 +-
 .../board/advanced-focus/geometry.ts          |   6 +-
 .../components/board/items/item-actions.tsx   |  13 +-
 .../components/board/items/item-content.tsx   |  29 +++-
 .../board/items/widget-context-menu.tsx       |  11 +-
 e2e/board-advanced-interactions.spec.ts       |   9 ++
 packages/api/src/router/widgets/firewall.ts   |   1 -
 packages/boards/src/updater.spec.ts           |  18 ---
 packages/boards/src/updater.ts                |  13 +-
 packages/translation/src/lang/en.json         |   4 +
 .../widgets/src/anchor-note/component.tsx     |  37 +----
 .../widgets/src/archive-team-warrior/index.ts |   1 -
 packages/widgets/src/bazarr/index.ts          |   1 -
 packages/widgets/src/calendar/component.tsx   |  16 +-
 packages/widgets/src/calendar/index.ts        |   1 -
 packages/widgets/src/coolify/index.ts         |   1 -
 packages/widgets/src/custom-api/component.tsx |  11 +-
 packages/widgets/src/custom-api/index.ts      |   1 -
 packages/widgets/src/downloads/component.tsx  |  46 +-----
 packages/widgets/src/downloads/index.ts       |   1 -
 packages/widgets/src/firewall/component.tsx   |  71 ++++++---
 .../src/firewall/failure-state.spec.ts        |  25 +++
 .../widgets/src/firewall/firewall-version.tsx |   7 +-
 packages/widgets/src/firewall/index.ts        |   1 -
 .../widgets/src/health-monitoring/index.ts    |   1 -
 .../src/immich/album-carousel/component.tsx   |  17 +-
 .../src/immich/server-stats/component.tsx     |   5 +-
 packages/widgets/src/indexer-manager/index.ts |   1 -
 packages/widgets/src/media-server/index.ts    |   1 -
 .../widgets/src/media-transcoding/index.ts    |   1 -
 .../network-status/component.tsx              |   3 +-
 packages/widgets/src/notebook/notebook.tsx    |  95 +++++-------
 packages/widgets/src/notifications/index.ts   |   1 -
 packages/widgets/src/paperless-ngx/index.ts   |   1 -
 packages/widgets/src/patchmon/index.ts        |   1 -
 packages/widgets/src/releases/index.ts        |   1 -
 packages/widgets/src/rssFeed/index.ts         |   1 -
 .../execute-automation/component.tsx          | 145 ++++++++++--------
 .../widgets/src/speedtest-tracker/index.ts    |   1 -
 packages/widgets/src/stocks/index.ts          |   1 -
 .../src/system-resources/component.tsx        |  29 +---
 .../src/system-resources/history.spec.ts      |  10 +-
 packages/widgets/src/tracearr/index.ts        |   1 -
 packages/widgets/src/traefik/index.ts         |   1 -
 packages/widgets/src/umami/index.ts           |   1 -
 packages/widgets/src/ups/index.ts             |   1 -
 packages/widgets/src/uptime-kuma/index.ts     |   1 -
 packages/widgets/src/vpn/index.ts             |   1 -
 packages/widgets/src/weather/index.ts         |   1 -
 50 files changed, 292 insertions(+), 386 deletions(-)
 delete mode 100644 packages/boards/src/updater.spec.ts
 create mode 100644 packages/widgets/src/firewall/failure-state.spec.ts

diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index d1b045802..6ff513bf5 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -22,6 +22,7 @@
   overscroll-behavior: contain;
   animation: focus-surface-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top left;
+  padding-top: 60px;
 }
 
 .backdropClosing {
@@ -57,6 +58,21 @@
   pointer-events: none;
 }
 
+.surfaceControlsAdvanced {
+  right: 0;
+  bottom: auto;
+  height: 60px;
+  background: color-mix(in srgb, var(--mantine-color-body) 92%, transparent);
+  border-bottom: 1px solid var(--mantine-color-default-border);
+}
+
+.surfaceTitle {
+  position: absolute;
+  top: 20px;
+  right: 120px;
+  left: 16px;
+}
+
 .closeButton {
   position: absolute;
   top: 8px;
@@ -68,7 +84,7 @@
 .pinButton {
   position: absolute;
   top: 8px;
-  right: 52px;
+  right: 60px;
   z-index: 2;
   pointer-events: auto;
 }
@@ -82,7 +98,7 @@
   pointer-events: auto;
 }
 
-@media (pointer: coarse) {
+@media (any-pointer: coarse) {
   .touchButton {
     display: inline-flex;
   }
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
index 4b5ee0b89..c769e7fbc 100644
--- a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
@@ -4,12 +4,12 @@ import { getAdvancedFocusRect } from "./geometry";
 
 describe("getAdvancedFocusRect", () => {
   it("expands a widget and keeps it inside the viewport", () => {
-    expect(getAdvancedFocusRect({ left: 10, top: 10, width: 300, height: 200 }, { width: 1200, height: 800 })).toEqual({
-      left: 240,
-      top: 190,
-      width: 720,
-      height: 480,
-    });
+    const rect = getAdvancedFocusRect({ left: 10, top: 10, width: 300, height: 200 }, { width: 1200, height: 800 });
+
+    expect(rect.left).toBe(120);
+    expect(rect.top).toBeCloseTo(118.6);
+    expect(rect.width).toBe(960);
+    expect(rect.height).toBeCloseTo(622.8);
   });
 
   it("uses the available viewport on small screens", () => {
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
index 78bdda016..086cfd622 100644
--- a/apps/nextjs/src/components/board/advanced-focus/geometry.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
@@ -11,8 +11,10 @@ export const getAdvancedFocusRect = (source: FocusRect, viewport: { width: numbe
   const margin = viewport.width < 640 ? 8 : 24;
   const availableWidth = Math.max(0, viewport.width - margin * 2);
   const availableHeight = Math.max(0, viewport.height - appShellHeaderHeight - margin * 2);
-  const width = Math.min(availableWidth, Math.max(source.width, Math.min(960, source.width * 2.4)));
-  const height = Math.min(availableHeight, Math.max(source.height, Math.min(720, source.height * 2.4)));
+  const preferredWidth = viewport.width < 640 ? availableWidth : Math.min(960, availableWidth * 0.9);
+  const preferredHeight = viewport.width < 640 ? availableHeight : Math.min(720, availableHeight * 0.9);
+  const width = Math.min(availableWidth, Math.max(source.width, preferredWidth));
+  const height = Math.min(availableHeight, Math.max(source.height, preferredHeight));
 
   return {
     left: Math.max(margin, (viewport.width - width) / 2),
diff --git a/apps/nextjs/src/components/board/items/item-actions.tsx b/apps/nextjs/src/components/board/items/item-actions.tsx
index 5344a2289..cc7b637b4 100644
--- a/apps/nextjs/src/components/board/items/item-actions.tsx
+++ b/apps/nextjs/src/components/board/items/item-actions.tsx
@@ -3,7 +3,6 @@ import { useCallback } from "react";
 import { useUpdateBoard } from "@homarr/boards/updater";
 import type { BoardItemAdvancedOptions } from "@homarr/validation/shared";
 
-import type { Board } from "~/app/[locale]/boards/_types";
 import type { CreateItemInput } from "./actions/create-item";
 import { createItemCallback } from "./actions/create-item";
 import type { DuplicateItemInput } from "./actions/duplicate-item";
@@ -33,17 +32,7 @@ interface UpdateItemIntegrations {
 export const useItemActions = () => {
   const { updateBoard } = useUpdateBoard();
 
-  const createItem = useCallback(
-    (input: CreateItemInput) => {
-      let nextBoard: Board | undefined;
-      updateBoard((previous) => {
-        nextBoard = createItemCallback(input)(previous);
-        return nextBoard;
-      });
-      return nextBoard;
-    },
-    [updateBoard],
-  );
+  const createItem = useCallback((input: CreateItemInput) => updateBoard(createItemCallback(input)), [updateBoard]);
 
   const duplicateItem = useCallback(
     ({ itemId }: DuplicateItemInput) => {
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 5ddd9b613..7985c8749 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,6 +1,6 @@
 import type { CSSProperties, KeyboardEvent, MutableRefObject, PointerEvent } from "react";
 import { useEffect, useRef } from "react";
-import { ActionIcon, Badge, Box, Card, FocusTrap } from "@mantine/core";
+import { ActionIcon, Badge, Box, Card, FocusTrap, Text } from "@mantine/core";
 import { useElementSize, useMergedRef, useViewportSize } from "@mantine/hooks";
 import { IconMaximize, IconPin, IconX } from "@tabler/icons-react";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
@@ -43,6 +43,8 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   const { width: viewportWidth, height: viewportHeight } = useViewportSize();
   const board = useRequiredBoard();
   const t = useI18n();
+  const widgetName = t(`widget.${item.kind}.name`);
+  const advancedDialogLabel = t("item.advancedFocus.dialog", { widget: widgetName });
   const [isEditMode] = useEditMode();
   const widgetStateRef = useRef<Record<string, unknown> | null>(null);
   const { active, open, close, dismiss, pin, hover, leave } = useAdvancedFocus();
@@ -86,6 +88,8 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
         <Box
           ref={mergedRef}
           tabIndex={isEditMode ? undefined : 0}
+          role={isEditMode ? undefined : "group"}
+          aria-label={isEditMode ? undefined : `${widgetName}: ${t("item.advancedFocus.open")}`}
           aria-haspopup="dialog"
           aria-expanded={isAdvanced}
           aria-keyshortcuts="Shift+Enter"
@@ -104,11 +108,9 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
               <Card
                 role={isAdvanced ? "dialog" : undefined}
                 aria-modal={activeFocus?.pinned || undefined}
-                aria-label={
-                  isAdvanced ? t("item.advancedFocus.dialog", { widget: t(`widget.${item.kind}.name`) }) : undefined
-                }
+                aria-label={isAdvanced ? advancedDialogLabel : undefined}
                 radius={board.itemRadius}
-                p={0}
+                p={isAdvanced ? undefined : 0}
                 h={isAdvanced ? undefined : "100%"}
                 w={isAdvanced ? undefined : "100%"}
                 className={combineClasses(
@@ -143,13 +145,23 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
                     : undefined
                 }
               >
-                <div className={advancedFocusClasses.surfaceControls}>
+                <div
+                  className={combineClasses(
+                    advancedFocusClasses.surfaceControls,
+                    isAdvanced && advancedFocusClasses.surfaceControlsAdvanced,
+                  )}
+                >
+                  {isAdvanced && (
+                    <Text className={advancedFocusClasses.surfaceTitle} size="sm" fw={600} truncate>
+                      {advancedDialogLabel}
+                    </Text>
+                  )}
                   {isAdvanced && (
                     <ActionIcon
                       data-autofocus={activeFocus.pinned && activeFocus.autofocusClose ? true : undefined}
                       className={advancedFocusClasses.closeButton}
                       variant="default"
-                      size="lg"
+                      size={44}
                       aria-label={t("item.advancedFocus.close")}
                       onClick={() => close()}
                     >
@@ -160,6 +172,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
                     <ActionIcon
                       className={advancedFocusClasses.pinButton}
                       variant={activeFocus.pinned ? "filled" : "default"}
+                      size={44}
                       aria-label={activeFocus.pinned ? t("item.advancedFocus.pinned") : t("item.advancedFocus.pin")}
                       aria-pressed={activeFocus.pinned}
                       onClick={(event) => pin(event.detail === 0)}
@@ -171,7 +184,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
                     <ActionIcon
                       className={advancedFocusClasses.touchButton}
                       variant="default"
-                      size="lg"
+                      size={44}
                       aria-label={t("item.advancedFocus.open")}
                       onClick={openPinned}
                     >
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index d57161787..ad3da32e7 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -2,7 +2,7 @@
 
 import type { MutableRefObject, ReactNode, RefObject } from "react";
 import { useCallback, useMemo, useState } from "react";
-import { Group, Loader, Menu, Switch, Text, Tooltip } from "@mantine/core";
+import { Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconCircleCheck,
@@ -242,13 +242,10 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
           <>
             <Menu.Label>{tMenu("options")}</Menu.Label>
             {toggleOptions.map(([key]) => (
-              <Menu.Item key={key} onClick={() => handleToggle(key)(!options[key])}>
+              <Menu.CheckboxItem key={key} checked={Boolean(options[key])} onChange={handleToggle(key)}>
                 {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-                <Group wrap="nowrap">
-                  {String(translateIfNecessary(t, ((fn: any) => fn(`widget.${item.kind}.option.${key}.label`)) as any))}
-                  <Switch size="xs" checked={Boolean(options[key])} readOnly tabIndex={-1} ml="auto" />
-                </Group>
-              </Menu.Item>
+                {String(translateIfNecessary(t, ((fn: any) => fn(`widget.${item.kind}.option.${key}.label`)) as any))}
+              </Menu.CheckboxItem>
             ))}
           </>
         )}
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 898c43d00..bf82259fb 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -76,6 +76,8 @@ describe("Board advanced interactions", () => {
       await page.keyboard.down("Shift");
       await widget.hover();
       await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
+      const advancedBounds = await advancedDialog.boundingBox();
+      expect(advancedBounds?.width).toBeGreaterThanOrEqual(900);
       await expect(advancedDialog).toHaveAttribute("data-lifecycle-probe", "same-instance");
       await expect(widget).toBeFocused();
       await page.keyboard.up("Shift");
@@ -156,8 +158,15 @@ describe("Board advanced interactions", () => {
       if (!bounds) return;
       expect(bounds.x).toBeGreaterThanOrEqual(0);
       expect(bounds.y).toBeGreaterThanOrEqual(60);
+      expect(bounds.width).toBeGreaterThanOrEqual(44);
+      expect(bounds.height).toBeGreaterThanOrEqual(44);
       expect(bounds.x + bounds.width).toBeLessThanOrEqual(1366);
       expect(bounds.y + bounds.height).toBeLessThanOrEqual(768);
+      const dialogBounds = await page.getByRole("dialog", { name: "Date and time advanced view" }).boundingBox();
+      const contentBounds = await page.locator(".clock-widget-container").boundingBox();
+      expect(dialogBounds).not.toBeNull();
+      expect(contentBounds).not.toBeNull();
+      if (dialogBounds && contentBounds) expect(contentBounds.y).toBeGreaterThanOrEqual(dialogBounds.y + 60);
       await closeButton.click();
       await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeHidden();
     } finally {
diff --git a/packages/api/src/router/widgets/firewall.ts b/packages/api/src/router/widgets/firewall.ts
index fdeb77831..dbaa88b4f 100644
--- a/packages/api/src/router/widgets/firewall.ts
+++ b/packages/api/src/router/widgets/firewall.ts
@@ -37,7 +37,6 @@ const queryFirewall = <
           summary: createFallback(),
           error: error instanceof Error ? error.message : "Integration request failed",
         }),
-        throwOnAllFailures: true,
       },
     ),
   );
diff --git a/packages/boards/src/updater.spec.ts b/packages/boards/src/updater.spec.ts
deleted file mode 100644
index 1f78f7e97..000000000
--- a/packages/boards/src/updater.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { getBoardSaveScopeId, shouldRefetchAfterSaveError } from "./updater";
-
-describe("board persistence coordination", () => {
-  it("uses one mutation scope for every save of the same board", () => {
-    expect(getBoardSaveScopeId("board-1")).toBe(getBoardSaveScopeId("board-1"));
-    expect(getBoardSaveScopeId("board-1")).not.toBe(getBoardSaveScopeId("board-2"));
-  });
-
-  it("only refetches after a failed save when no newer local board exists", () => {
-    const failedBoard = { id: "board-1", items: ["first"] };
-    const newerBoard = { id: "board-1", items: ["first", "second"] };
-
-    expect(shouldRefetchAfterSaveError(failedBoard, failedBoard)).toBe(true);
-    expect(shouldRefetchAfterSaveError(newerBoard, failedBoard)).toBe(false);
-  });
-});
diff --git a/packages/boards/src/updater.ts b/packages/boards/src/updater.ts
index 6763c48ce..f11c70db8 100644
--- a/packages/boards/src/updater.ts
+++ b/packages/boards/src/updater.ts
@@ -14,11 +14,6 @@ export const updateBoardName = (name: string | null) => {
   boardName = name;
 };
 
-export const getBoardSaveScopeId = (boardId: string) => `board-save:${boardId}`;
-
-export const shouldRefetchAfterSaveError = <T>(currentBoard: T | undefined, failedBoard: T) =>
-  currentBoard === failedBoard;
-
 export const useUpdateBoard = () => {
   const utils = clientApi.useUtils();
 
@@ -51,19 +46,17 @@ export const usePersistBoard = ({ id, name }: Pick<Board, "id" | "name">) => {
   const utils = clientApi.useUtils();
   const { updateBoard } = useUpdateBoard();
   const { mutateAsync: saveBoardAsync } = clientApi.board.saveBoard.useMutation({
-    scope: { id: getBoardSaveScopeId(id) },
+    scope: { id: `board-save:${id}` },
   });
 
   const updateAndPersistBoard = useCallback(
     (updater: UpdateCallback, options?: PersistBoardOptions) => {
-      const updatedBoard = updateBoard(updater);
-      if (!updatedBoard) return undefined;
-      const persistedBoard = utils.board.getBoardByName.getData({ name });
+      const persistedBoard = updateBoard(updater);
       if (!persistedBoard) return undefined;
 
       void saveBoardAsync(persistedBoard).catch((error: unknown) => {
         const currentBoard = utils.board.getBoardByName.getData({ name });
-        if (shouldRefetchAfterSaveError(currentBoard, persistedBoard)) {
+        if (currentBoard === persistedBoard) {
           void utils.board.getBoardByName.invalidate({ name });
         }
         options?.onError?.(error);
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index e8a9192a7..dc2853b49 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2199,6 +2199,10 @@
         "lastExecuted": "Last run at {time}",
         "automationId": "Automation ID: {id}"
       },
+      "status": {
+        "running": "Running automation",
+        "success": "Automation completed"
+      },
       "error": {
         "executeFailed": "Unable to run automation"
       }
diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 781a09930..6667189b0 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -133,7 +133,6 @@ export default function AnchorNoteWidget({
   width,
   height,
   displayMode,
-  widgetStateRef,
 }: WidgetComponentProps<"anchorNote">) {
   const t = useScopedI18n("widget.anchorNote");
   const noteId = options.noteId.trim();
@@ -157,20 +156,10 @@ export default function AnchorNoteWidget({
       width={width}
       height={height}
       isAdvanced={displayMode === "advanced"}
-      widgetStateRef={widgetStateRef}
     />
   );
 }
 
-interface AnchorNotePersistedState {
-  integrationId: string;
-  noteId: string;
-  isEditing: boolean;
-  draftTitle: string;
-  draftContent: string;
-  saveError: string | null;
-}
-
 interface AnchorNoteWidgetContentProps {
   options: WidgetComponentProps<"anchorNote">["options"];
   integrationId: string;
@@ -178,7 +167,6 @@ interface AnchorNoteWidgetContentProps {
   width: number;
   height: number;
   isAdvanced: boolean;
-  widgetStateRef?: WidgetComponentProps<"anchorNote">["widgetStateRef"];
 }
 
 const AnchorNoteWidgetContent = ({
@@ -188,35 +176,18 @@ const AnchorNoteWidgetContent = ({
   width,
   height,
   isAdvanced,
-  widgetStateRef,
 }: AnchorNoteWidgetContentProps) => {
   const t = useScopedI18n("widget.anchorNote");
-  const persistedState = widgetStateRef?.current?.anchorNote as AnchorNotePersistedState | undefined;
-  const canHydratePersistedState = persistedState?.integrationId === integrationId && persistedState.noteId === noteId;
   const { data: note, refetch } = clientApi.widget.anchorNotes.getNote.useQuery({
     integrationId,
     noteId,
   });
   const { mutateAsync: updateNoteAsync, isPending: isUpdating } = clientApi.widget.anchorNotes.updateNote.useMutation();
 
-  const [isEditing, setIsEditing] = useState(canHydratePersistedState ? (persistedState?.isEditing ?? false) : false);
-  const [draftTitle, setDraftTitle] = useState(
-    canHydratePersistedState ? (persistedState?.draftTitle ?? "") : (note?.title ?? ""),
-  );
-  const [draftContent, setDraftContent] = useState(
-    canHydratePersistedState ? (persistedState?.draftContent ?? "") : (note?.content ?? ""),
-  );
-  const [saveError, setSaveError] = useState<string | null>(
-    canHydratePersistedState ? (persistedState?.saveError ?? null) : null,
-  );
-
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      anchorNote: { integrationId, noteId, isEditing, draftTitle, draftContent, saveError },
-    };
-  }, [draftContent, draftTitle, integrationId, isEditing, noteId, saveError, widgetStateRef]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [draftTitle, setDraftTitle] = useState(note?.title ?? "");
+  const [draftContent, setDraftContent] = useState(note?.content ?? "");
+  const [saveError, setSaveError] = useState<string | null>(null);
 
   useEffect(() => {
     if (isEditing || !note) return;
diff --git a/packages/widgets/src/archive-team-warrior/index.ts b/packages/widgets/src/archive-team-warrior/index.ts
index e639c7e9f..1eaf0a691 100644
--- a/packages/widgets/src/archive-team-warrior/index.ts
+++ b/packages/widgets/src/archive-team-warrior/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("archiveTeamWarrior", {
   icon: IconArchive,
-  queryKey: [["widget", "archiveTeamWarrior"]],
   maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/bazarr/index.ts b/packages/widgets/src/bazarr/index.ts
index 7ac60e0de..a4c10a540 100644
--- a/packages/widgets/src/bazarr/index.ts
+++ b/packages/widgets/src/bazarr/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("bazarr", {
   icon: IconBadgeCc,
-  queryKey: [["widget", "bazarr"]],
   supportedIntegrations: ["bazarr"],
   integrationsRequired: true,
   maxIntegrations: 1,
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 275c913b4..72cb062a0 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useParams } from "next/navigation";
 import { Box, Stack, Text, useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
@@ -19,19 +19,7 @@ import { CalendarEventList } from "./calendar-event-list";
 import classes from "./component.module.css";
 
 export default function CalendarWidget(props: WidgetComponentProps<"calendar">) {
-  const persistedState = props.widgetStateRef?.current?.calendar as { monthTimestamp?: number } | undefined;
-  const [month, setMonth] = useState(() => {
-    const timestamp = persistedState?.monthTimestamp;
-    return typeof timestamp === "number" && Number.isFinite(timestamp) ? new Date(timestamp) : new Date();
-  });
-
-  useEffect(() => {
-    if (!props.widgetStateRef) return;
-    props.widgetStateRef.current = {
-      ...props.widgetStateRef.current,
-      calendar: { monthTimestamp: month.getTime() },
-    };
-  }, [month, props.widgetStateRef]);
+  const [month, setMonth] = useState(() => new Date());
 
   if (props.integrationIds.length === 0) {
     return <CalendarBase {...props} events={[]} month={month} setMonth={setMonth} />;
diff --git a/packages/widgets/src/calendar/index.ts b/packages/widgets/src/calendar/index.ts
index 3f0abfea0..d03b2f610 100644
--- a/packages/widgets/src/calendar/index.ts
+++ b/packages/widgets/src/calendar/index.ts
@@ -9,7 +9,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("calendar", {
   icon: IconCalendar,
-  queryKey: [["widget", "calendar"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       releaseType: factory.multiSelect({
diff --git a/packages/widgets/src/coolify/index.ts b/packages/widgets/src/coolify/index.ts
index e68e4c839..cebf9de05 100644
--- a/packages/widgets/src/coolify/index.ts
+++ b/packages/widgets/src/coolify/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("coolify", {
   icon: IconCloud,
-  queryKey: [["widget", "coolify"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showServers: factory.switch({
diff --git a/packages/widgets/src/custom-api/component.tsx b/packages/widgets/src/custom-api/component.tsx
index 9050035bc..580cfb455 100644
--- a/packages/widgets/src/custom-api/component.tsx
+++ b/packages/widgets/src/custom-api/component.tsx
@@ -484,8 +484,7 @@ function CustomApiWidgetInner({
   const tCustomWidget = useScopedI18n("customWidget");
   const safeInterval = Number.isFinite(refreshInterval) ? refreshInterval : 30;
   const intervalMs = Math.max(1000, safeInterval * 1000);
-  const persistedState = widgetStateRef?.current?.customApi as { pollingPaused?: boolean } | undefined;
-  const [pollingPaused, setPollingPaused] = useState(persistedState?.pollingPaused === true);
+  const [pollingPaused, setPollingPaused] = useState(false);
   const { data, isLoading, error, refetch, isFetching } = clientApi.widget.customApi.getData.useQuery(
     { definitionId },
     {
@@ -506,14 +505,6 @@ function CustomApiWidgetInner({
   const canTogglePolling = Boolean(data) && dataType !== "actionButton" && dataType !== "disabled";
   const togglePolling = useCallback(() => setPollingPaused((value) => !value), []);
 
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      customApi: { pollingPaused },
-    };
-  }, [pollingPaused, widgetStateRef]);
-
   useEffect(() => {
     if (!widgetStateRef) return;
     if (canTogglePolling) {
diff --git a/packages/widgets/src/custom-api/index.ts b/packages/widgets/src/custom-api/index.ts
index ed8242cab..4c6ae6654 100644
--- a/packages/widgets/src/custom-api/index.ts
+++ b/packages/widgets/src/custom-api/index.ts
@@ -6,7 +6,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("customApi", {
   icon: IconApi,
-  queryKey: [["widget", "customApi"]],
   contextActions({ options, widgetStateRef }) {
     return [
       {
diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx
index 967288fc4..85b7ac9a0 100644
--- a/packages/widgets/src/downloads/component.tsx
+++ b/packages/widgets/src/downloads/component.tsx
@@ -78,14 +78,6 @@ interface ContextMenuState {
   item: ExtendedDownloadClientItem;
 }
 
-interface DownloadsWidgetState {
-  integrationKey: string;
-  clientFilter: string[];
-  statusFilter: string[];
-  sortStatus: DataTableSortStatus<ExtendedDownloadClientItem>;
-  showStats: boolean;
-}
-
 interface ColumnContext {
   optionsColumnSet: Set<string>;
   hasTorrents: boolean;
@@ -304,7 +296,6 @@ export default function DownloadClientsWidget({
   width,
   height,
   displayMode,
-  widgetStateRef,
 }: WidgetComponentProps<"downloads">) {
   const board = useOptionalBoard();
   const { data: session } = useSession();
@@ -326,18 +317,10 @@ export default function DownloadClientsWidget({
 
   const t = useScopedI18n("widget.downloads");
 
-  const integrationKey = integrationIds.join("\u0000");
-  const storedWidgetState = widgetStateRef?.current?.downloads as Partial<DownloadsWidgetState> | undefined;
-  const persistedWidgetState = storedWidgetState?.integrationKey === integrationKey ? storedWidgetState : undefined;
-
-  const [clientFilter, setClientFilter] = useState<string[]>(() =>
-    Array.isArray(persistedWidgetState?.clientFilter) ? [...persistedWidgetState.clientFilter] : [],
-  );
-  const [statusFilter, setStatusFilter] = useState<string[]>(() =>
-    Array.isArray(persistedWidgetState?.statusFilter) ? [...persistedWidgetState.statusFilter] : [],
-  );
+  const [clientFilter, setClientFilter] = useState<string[]>([]);
+  const [statusFilter, setStatusFilter] = useState<string[]>([]);
   const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
-  const [showStats, { toggle: toggleStats }] = useDisclosure(persistedWidgetState?.showStats === true);
+  const [showStats, { toggle: toggleStats }] = useDisclosure(false);
   const isAdvanced = displayMode === "advanced";
 
   const utils = clientApi.useUtils();
@@ -377,11 +360,10 @@ export default function DownloadClientsWidget({
 
   let defaultSortDirection: DataTableSortStatus<ExtendedDownloadClientItem>["direction"] = "asc";
   if (options.descendingDefaultSort) defaultSortDirection = "desc";
-  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<ExtendedDownloadClientItem>>(() =>
-    persistedWidgetState?.sortStatus
-      ? { ...persistedWidgetState.sortStatus }
-      : { columnAccessor: options.defaultSort, direction: defaultSortDirection },
-  );
+  const [sortStatus, setSortStatus] = useState<DataTableSortStatus<ExtendedDownloadClientItem>>(() => ({
+    columnAccessor: options.defaultSort,
+    direction: defaultSortDirection,
+  }));
   const hasMountedSortDefaults = useRef(false);
   useEffect(() => {
     if (!hasMountedSortDefaults.current) {
@@ -804,20 +786,6 @@ export default function DownloadClientsWidget({
     return { stateCounts, totalSize, completedSize, totalItems: data.length };
   }, [data]);
 
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      downloads: {
-        integrationKey,
-        clientFilter,
-        statusFilter,
-        sortStatus,
-        showStats,
-      } satisfies DownloadsWidgetState,
-    };
-  }, [clientFilter, integrationKey, showStats, sortStatus, statusFilter, widgetStateRef]);
-
   if (options.columns.length === 0) {
     return (
       <Center h="100%">
diff --git a/packages/widgets/src/downloads/index.ts b/packages/widgets/src/downloads/index.ts
index 3f051110b..cc8f9a5b0 100644
--- a/packages/widgets/src/downloads/index.ts
+++ b/packages/widgets/src/downloads/index.ts
@@ -42,7 +42,6 @@ const sortColumns = [
 
 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
   icon: IconDownload,
-  queryKey: [["widget", "downloads"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/firewall/component.tsx b/packages/widgets/src/firewall/component.tsx
index 66a65b6d1..a3bd86064 100644
--- a/packages/widgets/src/firewall/component.tsx
+++ b/packages/widgets/src/firewall/component.tsx
@@ -33,6 +33,20 @@ export interface Firewall {
   value: string;
 }
 
+interface FirewallQueryState {
+  isPending: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  data?: readonly { error?: string }[];
+}
+
+export const hasTotalFirewallFailure = (queries: readonly FirewallQueryState[]) =>
+  queries.every((query) => !query.isPending && !query.isFetching) &&
+  queries.every(
+    (query) =>
+      query.isError || (query.data !== undefined && query.data.length > 0 && query.data.every(({ error }) => error)),
+  );
+
 export default function FirewallWidget({
   integrationIds,
   width,
@@ -48,34 +62,44 @@ export default function FirewallWidget({
     setSelectedFirewall(value ?? "");
   }, []);
 
-  const { data: firewallsCpuData = [] } = clientApi.widget.firewall.getFirewallCpuStatus.useQuery({ integrationIds });
-  const { data: firewallsMemoryData = [] } = clientApi.widget.firewall.getFirewallMemoryStatus.useQuery({
+  const cpuQuery = clientApi.widget.firewall.getFirewallCpuStatus.useQuery({ integrationIds });
+  const memoryQuery = clientApi.widget.firewall.getFirewallMemoryStatus.useQuery({
     integrationIds,
   });
-  const { data: firewallsVersionData = [] } = clientApi.widget.firewall.getFirewallVersionStatus.useQuery({
+  const versionQuery = clientApi.widget.firewall.getFirewallVersionStatus.useQuery({
     integrationIds,
   });
-  const { data: firewallsInterfacesData = [] } = clientApi.widget.firewall.getFirewallInterfacesStatus.useQuery({
+  const interfacesQuery = clientApi.widget.firewall.getFirewallInterfacesStatus.useQuery({
     integrationIds,
   });
+  const firewallsCpuData = cpuQuery.data ?? [];
+  const firewallsMemoryData = memoryQuery.data ?? [];
+  const firewallsVersionData = versionQuery.data ?? [];
+  const firewallsInterfacesData = interfacesQuery.data ?? [];
+  const queries = [cpuQuery, memoryQuery, versionQuery, interfacesQuery];
+  const hasTotalFailure = hasTotalFirewallFailure(queries);
 
   const [accordionValue, setAccordionValue] = useLocalStorage<string | null>({
     key: `homarr-${itemId}-firewall`,
     defaultValue: "interfaces",
   });
 
-  const initialSelectedFirewall = firewallsVersionData[0]?.integration.id ?? "";
-  const activeFirewall = firewallsVersionData.some(({ integration }) => integration.id === selectedFirewall)
-    ? selectedFirewall
-    : initialSelectedFirewall;
-  const displayedFirewallIds = isAdvanced
-    ? firewallsVersionData.map(({ integration }) => integration.id)
-    : activeFirewall
-      ? [activeFirewall]
-      : [];
-  const dropdownItems = firewallsVersionData.map((firewall) => ({
-    label: firewall.integration.name,
-    value: firewall.integration.id,
+  if (hasTotalFailure) {
+    throw new Error(t("widget.firewall.error.internalServerError"));
+  }
+
+  const firewallMetadata = new Map(
+    [...firewallsVersionData, ...firewallsCpuData, ...firewallsMemoryData, ...firewallsInterfacesData].map(
+      ({ integration }) => [integration.id, integration] as const,
+    ),
+  );
+  const firewallIds = [...firewallMetadata.keys()];
+  const initialSelectedFirewall = firewallIds[0] ?? "";
+  const activeFirewall = firewallMetadata.has(selectedFirewall) ? selectedFirewall : initialSelectedFirewall;
+  const displayedFirewallIds = isAdvanced ? firewallIds : activeFirewall ? [activeFirewall] : [];
+  const dropdownItems = firewallIds.map((firewallId) => ({
+    label: firewallMetadata.get(firewallId)?.name ?? firewallId,
+    value: firewallId,
   }));
 
   return (
@@ -90,7 +114,7 @@ export default function FirewallWidget({
               isTiny={isTiny}
             />
             <FirewallVersion
-              firewallsVersionData={firewallsVersionData}
+              firewallsVersionData={firewallsVersionData.filter(({ error }) => !error)}
               selectedFirewall={activeFirewall}
               isTiny={isTiny}
             />
@@ -104,16 +128,17 @@ export default function FirewallWidget({
             const version = firewallsVersionData.find(({ integration }) => integration.id === firewallId);
             const interfaces = firewallsInterfacesData.find(({ integration }) => integration.id === firewallId);
             const hasError = Boolean(cpu?.error || memory?.error || version?.error || interfaces?.error);
+            const metadata = firewallMetadata.get(firewallId);
 
             return (
               <FirewallPanel
                 key={firewallId}
-                name={version?.integration.name ?? cpu?.integration.name ?? firewallId}
-                kind={version?.integration.kind}
-                version={version?.summary.version}
-                cpu={cpu?.summary.total}
-                memory={memory?.summary.percent}
-                interfaces={interfaces?.summary}
+                name={metadata?.name ?? firewallId}
+                kind={metadata?.kind}
+                version={version?.error ? undefined : version?.summary.version}
+                cpu={cpu?.error ? undefined : cpu?.summary.total}
+                memory={memory?.error ? undefined : memory?.summary.percent}
+                interfaces={interfaces?.error ? undefined : interfaces?.summary}
                 hasError={hasError}
                 isAdvanced={isAdvanced}
                 isTiny={isTiny}
diff --git a/packages/widgets/src/firewall/failure-state.spec.ts b/packages/widgets/src/firewall/failure-state.spec.ts
new file mode 100644
index 000000000..43e6d7b5e
--- /dev/null
+++ b/packages/widgets/src/firewall/failure-state.spec.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+
+import { hasTotalFirewallFailure } from "./component";
+
+const failedQuery = {
+  isPending: false,
+  isFetching: false,
+  isError: false,
+  data: [{ error: "offline" }],
+};
+
+describe("firewall failure state", () => {
+  it("rejects only after every dimension fails", () => {
+    expect(hasTotalFirewallFailure([failedQuery, failedQuery, failedQuery, failedQuery])).toBe(true);
+    expect(
+      hasTotalFirewallFailure([failedQuery, failedQuery, failedQuery, { ...failedQuery, data: [{ error: undefined }] }]),
+    ).toBe(false);
+  });
+
+  it("lets an error-only persisted cache recover while it refetches", () => {
+    expect(hasTotalFirewallFailure([failedQuery, failedQuery, { ...failedQuery, isFetching: true }, failedQuery])).toBe(
+      false,
+    );
+  });
+});
diff --git a/packages/widgets/src/firewall/firewall-version.tsx b/packages/widgets/src/firewall/firewall-version.tsx
index 3fae1fa2a..df3daa2a9 100644
--- a/packages/widgets/src/firewall/firewall-version.tsx
+++ b/packages/widgets/src/firewall/firewall-version.tsx
@@ -21,6 +21,7 @@ export interface FirewallIntegration {
 
 export const FirewallVersion = ({ firewallsVersionData, selectedFirewall, isTiny }: FirewallVersionProps) => {
   const t = useI18n();
+  const version = firewallsVersionData.find(({ integration }) => integration.id === selectedFirewall)?.summary.version;
 
   return (
     <Box>
@@ -31,11 +32,7 @@ export const FirewallVersion = ({ firewallsVersionData, selectedFirewall, isTiny
         size={isTiny ? "8px" : "xs"}
         style={{ minHeight: "24px" }}
       >
-        {firewallsVersionData
-          .filter(({ integration }) => integration.id === selectedFirewall)
-          .map(({ summary, integration }) => (
-            <span key={integration.id}>{formatVersion(summary.version, t("widget.firewall.versionUnknown"))}</span>
-          ))}
+        {formatVersion(version ?? "", t("widget.firewall.versionUnknown"))}
       </Badge>
     </Box>
   );
diff --git a/packages/widgets/src/firewall/index.ts b/packages/widgets/src/firewall/index.ts
index 800874812..e154fd3ac 100644
--- a/packages/widgets/src/firewall/index.ts
+++ b/packages/widgets/src/firewall/index.ts
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("firewall", {
   icon: IconWall,
-  queryKey: [["widget", "firewall"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(() => ({}));
diff --git a/packages/widgets/src/health-monitoring/index.ts b/packages/widgets/src/health-monitoring/index.ts
index b63603468..c322e322a 100644
--- a/packages/widgets/src/health-monitoring/index.ts
+++ b/packages/widgets/src/health-monitoring/index.ts
@@ -8,7 +8,6 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options
 
 export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
   icon: IconHeartRateMonitor,
-  queryKey: [["widget", "healthMonitoring"]],
   queryKeys: [[["integration", "byIds"]], [["widget", "healthMonitoring"]]],
   refetchInterval: 5,
   createOptions() {
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index f219e9eb1..32493288f 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -27,13 +27,8 @@ export default function ImmichAlbumCarouselWidget({
   displayMode = "compact",
   widgetStateRef,
 }: WidgetComponentProps<"immich-albumCarousel">) {
-  const persistedState = widgetStateRef?.current?.immichAlbumCarousel as
-    | { currentPhotoIndex?: number; paused?: boolean }
-    | undefined;
-  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(() =>
-    typeof persistedState?.currentPhotoIndex === "number" ? persistedState.currentPhotoIndex : 0,
-  );
-  const [paused, setPaused] = useState(persistedState?.paused === true);
+  const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
 
   const { data: album } = clientApi.widget.immich.getAlbum.useQuery(
     {
@@ -53,14 +48,6 @@ export default function ImmichAlbumCarouselWidget({
     setCurrentPhotoIndex((current) => Math.min(current, photoAssets.length - 1));
   }, [photoAssets.length]);
 
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      immichAlbumCarousel: { currentPhotoIndex, paused },
-    };
-  }, [currentPhotoIndex, paused, widgetStateRef]);
-
   useEffect(() => {
     if (!widgetStateRef) return;
     const clearActions = () => {
diff --git a/packages/widgets/src/immich/server-stats/component.tsx b/packages/widgets/src/immich/server-stats/component.tsx
index 308e803a7..71c78657d 100644
--- a/packages/widgets/src/immich/server-stats/component.tsx
+++ b/packages/widgets/src/immich/server-stats/component.tsx
@@ -30,7 +30,10 @@ export default function ImmichServerStatsWidget({
   if (!stats) return <WidgetEmptyState />;
 
   const statsContent = (
-    <SimpleGrid cols={displayMode === "advanced" ? 4 : width >= 320 ? 2 : 1} spacing="sm">
+    <SimpleGrid
+      cols={displayMode === "advanced" ? (width >= 720 ? 4 : width >= 360 ? 2 : 1) : width >= 320 ? 2 : 1}
+      spacing="sm"
+    >
       {options.showUsers && (
         <StatItem icon={<IconUsers size={20} />} label={t("widget.immich-serverStats.users")} value={stats.userCount} />
       )}
diff --git a/packages/widgets/src/indexer-manager/index.ts b/packages/widgets/src/indexer-manager/index.ts
index a7fc8a0cd..b48ef301a 100644
--- a/packages/widgets/src/indexer-manager/index.ts
+++ b/packages/widgets/src/indexer-manager/index.ts
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
   icon: IconReportSearch,
-  queryKey: [["widget", "indexerManager"]],
   contextActions: ({ widgetStateRef, context }) => [
     {
       key: "test-all-indexers",
diff --git a/packages/widgets/src/media-server/index.ts b/packages/widgets/src/media-server/index.ts
index 3d6679688..54f00476c 100644
--- a/packages/widgets/src/media-server/index.ts
+++ b/packages/widgets/src/media-server/index.ts
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaServer", {
   icon: IconVideo,
-  queryKey: [["widget", "mediaServer"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/media-transcoding/index.ts b/packages/widgets/src/media-transcoding/index.ts
index de92a46ca..f333f3168 100644
--- a/packages/widgets/src/media-transcoding/index.ts
+++ b/packages/widgets/src/media-transcoding/index.ts
@@ -11,7 +11,6 @@ export const views = ["workers", "queue", "statistics"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaTranscoding", {
   icon: IconTransform,
-  queryKey: [["widget", "mediaTranscoding"]],
   maxIntegrations: 1,
   refetchInterval: null,
   createOptions() {
diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx
index 7472d5007..6bfa59407 100644
--- a/packages/widgets/src/network-controller/network-status/component.tsx
+++ b/packages/widgets/src/network-controller/network-status/component.tsx
@@ -21,6 +21,7 @@ export default function NetworkControllerNetworkStatusWidget({
   options,
   integrationIds,
   displayMode,
+  width,
 }: WidgetComponentProps<"networkControllerStatus">) {
   const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
@@ -35,7 +36,7 @@ export default function NetworkControllerNetworkStatusWidget({
 
   return (
     <Box p={isAdvanced ? "md" : "sm"} h="100%">
-      <SimpleGrid cols={isAdvanced ? 2 : 1} h="100%" spacing="sm">
+      <SimpleGrid cols={isAdvanced && width >= 560 ? 2 : 1} h="100%" spacing="sm">
         {(isAdvanced || options.content === "wifi") && (
           <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
             <WifiVariant countGuests={countWifiGuests} countUsers={countWifiUsers} compact={!isAdvanced} />
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index e9bed344e..42c346dbc 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -91,14 +91,6 @@ const controlIconProps = {
   stroke: 1.5,
 };
 
-interface NotebookPersistedState {
-  itemId: string | undefined;
-  content: string;
-  previousContent: string;
-  isEditing: boolean;
-  saveError: string | null;
-}
-
 export function Notebook({
   options,
   setOptions,
@@ -107,58 +99,44 @@ export function Notebook({
   itemId,
   displayMode,
   height,
-  widgetStateRef,
 }: WidgetComponentProps<"notebook">) {
-  const persistedState = widgetStateRef?.current?.notebook as NotebookPersistedState | undefined;
-  const canHydratePersistedState = persistedState?.itemId === itemId;
-  const initialContent = canHydratePersistedState ? (persistedState?.content ?? options.content) : options.content;
-  const [content, setContent] = useState(initialContent);
-  const previousContentRef = useRef(
-    canHydratePersistedState ? (persistedState?.previousContent ?? initialContent) : initialContent,
-  );
-  const [saveError, setSaveError] = useState<string | null>(
-    canHydratePersistedState ? (persistedState?.saveError ?? null) : null,
-  );
+  const [content, setContent] = useState(options.content);
+  const previousContentRef = useRef(options.content);
+  const [saveError, setSaveError] = useState<string | null>(null);
 
   const board = useRequiredBoard();
   const { data: session } = useSession();
   const { hasChangeAccess } = constructBoardPermissions(board, session);
 
   const canChange = !isEditMode && hasChangeAccess;
-  const [isEditing, setIsEditing] = useState(canHydratePersistedState ? (persistedState?.isEditing ?? false) : false);
+  const [isEditing, setIsEditing] = useState(false);
   const canChangeRef = useRef(canChange);
   const allowReadOnlyCheckRef = useRef(options.allowReadOnlyCheck);
+  const savingRef = useRef(false);
   const readOnlyCheckEventName = `homarr:notebook-read-only-check:${useId()}`;
 
   useEffect(() => {
-    canChangeRef.current = canChange;
     allowReadOnlyCheckRef.current = options.allowReadOnlyCheck;
-  }, [canChange, options.allowReadOnlyCheck]);
-
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      notebook: {
-        itemId,
-        content,
-        previousContent: previousContentRef.current,
-        isEditing,
-        saveError,
-      },
-    };
-  }, [content, isEditing, itemId, saveError, widgetStateRef]);
+  }, [options.allowReadOnlyCheck]);
 
   const { primaryColor } = useMantineTheme();
   const { colorScheme } = useMantineColorScheme();
 
-  const { mutateAsync } = clientApi.widget.notebook.updateContent.useMutation();
+  const { mutateAsync, isPending: isSaving } = clientApi.widget.notebook.updateContent.useMutation({
+    scope: { id: `notebook-content:${boardId ?? "preview"}:${itemId ?? "preview"}` },
+  });
+
+  useEffect(() => {
+    canChangeRef.current = canChange && !isSaving;
+  }, [canChange, isSaving]);
 
   const tControls = useScopedI18n("widget.notebook.controls");
   const t = useI18n();
 
   const handleContentUpdate = useCallback(
     async (contentUpdate: string) => {
+      savingRef.current = true;
+      canChangeRef.current = false;
       setSaveError(null);
 
       try {
@@ -166,26 +144,17 @@ export function Notebook({
           await mutateAsync({ boardId, itemId, content: contentUpdate });
         }
         previousContentRef.current = contentUpdate;
-        if (widgetStateRef) {
-          widgetStateRef.current = {
-            ...widgetStateRef.current,
-            notebook: {
-              itemId,
-              content: contentUpdate,
-              previousContent: contentUpdate,
-              isEditing,
-              saveError: null,
-            },
-          };
-        }
         setOptions({ newOptions: { content: contentUpdate } });
         return true;
       } catch (error) {
         setSaveError(error instanceof Error ? error.message : t("widget.notebook.saveFailed"));
         return false;
+      } finally {
+        savingRef.current = false;
+        canChangeRef.current = canChange;
       }
     },
-    [boardId, isEditing, itemId, mutateAsync, setOptions, t, widgetStateRef],
+    [boardId, canChange, itemId, mutateAsync, setOptions, t],
   );
 
   const editor = useEditor(
@@ -311,6 +280,7 @@ export function Notebook({
   }, [editor, isEditing, options.content]);
 
   const handleEditCancelCallback = useCallback(() => {
+    if (savingRef.current) return true;
     if (!editor) return false;
     editor.setEditable(false);
 
@@ -322,6 +292,7 @@ export function Notebook({
 
   const { openConfirmModal } = useConfirmModal();
   const handleEditCancel = useCallback(() => {
+    if (savingRef.current) return;
     openConfirmModal({
       title: t("widget.notebook.dismiss.title"),
       children: t("widget.notebook.dismiss.message"),
@@ -336,7 +307,7 @@ export function Notebook({
   }, [setIsEditing, handleEditCancelCallback, openConfirmModal, t]);
 
   const handleEditToggle = useCallback(async () => {
-    if (!editor) return;
+    if (!editor || savingRef.current) return;
     if (!isEditing) {
       setSaveError(null);
       editor.setEditable(true);
@@ -344,15 +315,19 @@ export function Notebook({
       return;
     }
 
+    editor.setEditable(false);
     const wasSaved = await handleContentUpdate(content);
-    if (!wasSaved) return;
+    if (!wasSaved) {
+      editor.setEditable(true);
+      return;
+    }
     editor.setEditable(false);
     setIsEditing(false);
   }, [content, editor, handleContentUpdate, isEditing]);
 
   const handleDoubleClick = useCallback(
     (event: ReactMouseEvent<HTMLDivElement>) => {
-      if (!canChange || isEditing) return;
+      if (!canChange || isEditing || savingRef.current) return;
       // Ignore double-clicks bubbling up from interactive controls (e.g. the
       // edit/save ActionIcon), which would otherwise toggle edit mode twice.
       if (event.target instanceof Element && event.target.closest("button, a")) {
@@ -377,7 +352,9 @@ export function Notebook({
         p={0}
         mt={0}
         h="100%"
-        onKeyDown={isEditing ? getHotkeyHandler([[hotkeys.saveNotebook, () => void handleEditToggle()]]) : undefined}
+        onKeyDown={
+          isEditing && !isSaving ? getHotkeyHandler([[hotkeys.saveNotebook, () => void handleEditToggle()]]) : undefined
+        }
         editor={editor}
         styles={(theme) => ({
           root: {
@@ -404,7 +381,8 @@ export function Notebook({
       >
         <RichTextEditor.Toolbar
           style={{
-            display: isEditing && options.showToolbar === true && displayMode === "advanced" ? "flex" : "none",
+            display:
+              isEditing && !isSaving && options.showToolbar === true && displayMode === "advanced" ? "flex" : "none",
           }}
         >
           <RichTextEditor.ControlsGroup>
@@ -505,7 +483,7 @@ export function Notebook({
             <RichTextEditor.Redo />
           </RichTextEditor.ControlsGroup>
         </RichTextEditor.Toolbar>
-        {editor && (
+        {editor && isEditing && !isSaving && (
           <BubbleMenu editor={editor}>
             <RichTextEditor.ControlsGroup>
               <RichTextEditor.Bold title={tControls("bold")} />
@@ -557,6 +535,7 @@ export function Notebook({
         <>
           <ActionIcon
             title={isEditing ? t("common.action.save") : t("common.action.edit")}
+            aria-label={isEditing ? t("common.action.save") : t("common.action.edit")}
             style={{
               zIndex: 1,
             }}
@@ -566,6 +545,8 @@ export function Notebook({
             color={primaryColor}
             variant="light"
             size={30}
+            loading={isSaving}
+            disabled={isSaving}
             onClick={() => void handleEditToggle()}
           >
             {isEditing ? <IconDeviceFloppy {...iconProps} /> : <IconEdit {...iconProps} />}
@@ -573,6 +554,7 @@ export function Notebook({
           {isEditing && (
             <ActionIcon
               title={t("common.action.cancel")}
+              aria-label={t("common.action.cancel")}
               style={{
                 zIndex: 1,
               }}
@@ -582,6 +564,7 @@ export function Notebook({
               color={primaryColor}
               variant="light"
               size={30}
+              disabled={isSaving}
               onClick={handleEditCancel}
             >
               <IconX {...iconProps} />
diff --git a/packages/widgets/src/notifications/index.ts b/packages/widgets/src/notifications/index.ts
index 27273c343..17fd13393 100644
--- a/packages/widgets/src/notifications/index.ts
+++ b/packages/widgets/src/notifications/index.ts
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
   icon: IconMessage,
-  queryKey: [["widget", "notifications"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/paperless-ngx/index.ts b/packages/widgets/src/paperless-ngx/index.ts
index af88489ab..bd13d28ec 100644
--- a/packages/widgets/src/paperless-ngx/index.ts
+++ b/packages/widgets/src/paperless-ngx/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("paperlessNgx", {
   icon: IconFileText,
-  queryKey: [["widget", "paperlessNgx"]],
   refetchInterval: null,
   supportedIntegrations: ["paperlessNgx"],
   integrationsRequired: true,
diff --git a/packages/widgets/src/patchmon/index.ts b/packages/widgets/src/patchmon/index.ts
index 6b0503844..49fd32629 100644
--- a/packages/widgets/src/patchmon/index.ts
+++ b/packages/widgets/src/patchmon/index.ts
@@ -8,7 +8,6 @@ import { patchmonOptionsSuperRefine } from "./threshold-validation";
 
 export const { definition, componentLoader } = createWidgetDefinition("patchmon", {
   icon: IconShieldCheck,
-  queryKey: [["widget", "patchmon"]],
   supportedIntegrations: ["patchmon"],
   integrationsRequired: true,
   maxIntegrations: 1,
diff --git a/packages/widgets/src/releases/index.ts b/packages/widgets/src/releases/index.ts
index 88ae80cda..62fa7ebab 100644
--- a/packages/widgets/src/releases/index.ts
+++ b/packages/widgets/src/releases/index.ts
@@ -14,7 +14,6 @@ const relativeDateSchema = z
 
 export const { definition, componentLoader } = createWidgetDefinition("releases", {
   icon: IconRocket,
-  queryKey: [["widget", "releases"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/rssFeed/index.ts b/packages/widgets/src/rssFeed/index.ts
index ec41fd69e..eee7028cb 100644
--- a/packages/widgets/src/rssFeed/index.ts
+++ b/packages/widgets/src/rssFeed/index.ts
@@ -12,7 +12,6 @@ import { optionsBuilder } from "../options";
  */
 export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
   icon: IconRss,
-  queryKey: [["widget", "rssFeed"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index 671502fb3..5d57d2c62 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -1,7 +1,18 @@
 "use client";
 
 import React from "react";
-import { Center, LoadingOverlay, Overlay, Stack, Text, ThemeIcon, Tooltip, UnstyledButton } from "@mantine/core";
+import {
+  Box,
+  Center,
+  LoadingOverlay,
+  Overlay,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+  UnstyledButton,
+  VisuallyHidden,
+} from "@mantine/core";
 import { useDisclosure, useTimeout } from "@mantine/hooks";
 import { IconAutomation, IconCheck } from "@tabler/icons-react";
 
@@ -75,67 +86,79 @@ export default function SmartHomeTriggerAutomationWidget({
   const isTiny = width < 128 || height < 96;
 
   return (
-    <UnstyledButton
-      onClick={handleClick}
-      disabled={!integrationId || !canInteract || isPending}
-      style={{
-        cursor: !isEditMode && integrationId && canInteract ? "pointer" : "initial",
-        pointerEvents: isEditMode ? "none" : undefined,
-      }}
-      aria-description={error?.message}
-      w="100%"
-      h="100%"
-    >
-      {isShowSuccess && (
-        <Overlay>
-          <Center w="100%" h="100%">
-            <ThemeIcon variant="filled" color="green" size="xl" radius="xl">
-              <IconCheck style={{ width: "70%", height: "70%" }} stroke={1.5} />
-            </ThemeIcon>
-          </Center>
-        </Overlay>
+    <Box pos="relative" w="100%" h="100%">
+      <VisuallyHidden role="status">
+        {isPending
+          ? t("widget.smartHome-executeAutomation.status.running")
+          : isShowSuccess
+            ? t("widget.smartHome-executeAutomation.status.success")
+            : ""}
+      </VisuallyHidden>
+      {error && (
+        <VisuallyHidden role="alert">{t("widget.smartHome-executeAutomation.error.executeFailed")}</VisuallyHidden>
       )}
-      <LoadingOverlay visible={isPending} />
-      {error && displayMode !== "advanced" && (
-        <Overlay>
-          <Center w="100%" h="100%" p="xs">
-            <Tooltip label={error.message} multiline>
-              <Text size="xs" c="red" ta="center" lineClamp={3}>
-                {t("widget.smartHome-executeAutomation.error.executeFailed")}
-              </Text>
-            </Tooltip>
-          </Center>
-        </Overlay>
-      )}
-      <Center w="100%" h="100%">
-        <Stack align="center" gap="md">
-          <IconAutomation size={isTiny ? 16 : undefined} />
-          <Text ta="center" fw="bold" fz={isTiny ? "xs" : undefined}>
-            {options.displayName}
-          </Text>
-          {displayMode === "advanced" && (
-            <>
-              {error ? (
-                <Tooltip label={error.message} multiline>
-                  <Text ta="center" size="xs" c="red">
-                    {t("widget.smartHome-executeAutomation.error.executeFailed")}
-                  </Text>
-                </Tooltip>
-              ) : (
-                <Text ta="center" size="xs" c="dimmed">
-                  {lastExecutedAt
-                    ? t("widget.smartHome-executeAutomation.advanced.lastExecuted", {
-                        time: lastExecutedAt.toLocaleTimeString(),
-                      })
-                    : t("widget.smartHome-executeAutomation.advanced.automationId", {
-                        id: options.automationId,
-                      })}
+      <UnstyledButton
+        onClick={handleClick}
+        disabled={!integrationId || !canInteract || isPending}
+        style={{
+          cursor: !isEditMode && integrationId && canInteract ? "pointer" : "initial",
+          pointerEvents: isEditMode ? "none" : undefined,
+        }}
+        aria-description={error?.message}
+        w="100%"
+        h="100%"
+      >
+        {isShowSuccess && (
+          <Overlay>
+            <Center w="100%" h="100%">
+              <ThemeIcon variant="filled" color="green" size="xl" radius="xl">
+                <IconCheck style={{ width: "70%", height: "70%" }} stroke={1.5} />
+              </ThemeIcon>
+            </Center>
+          </Overlay>
+        )}
+        <LoadingOverlay visible={isPending} />
+        {error && displayMode !== "advanced" && (
+          <Overlay>
+            <Center w="100%" h="100%" p="xs">
+              <Tooltip label={error.message} multiline>
+                <Text size="xs" c="red" ta="center" lineClamp={3}>
+                  {t("widget.smartHome-executeAutomation.error.executeFailed")}
                 </Text>
-              )}
-            </>
-          )}
-        </Stack>
-      </Center>
-    </UnstyledButton>
+              </Tooltip>
+            </Center>
+          </Overlay>
+        )}
+        <Center w="100%" h="100%">
+          <Stack align="center" gap="md">
+            <IconAutomation size={isTiny ? 16 : undefined} />
+            <Text ta="center" fw="bold" fz={isTiny ? "xs" : undefined}>
+              {options.displayName}
+            </Text>
+            {displayMode === "advanced" && (
+              <>
+                {error ? (
+                  <Tooltip label={error.message} multiline>
+                    <Text ta="center" size="xs" c="red">
+                      {t("widget.smartHome-executeAutomation.error.executeFailed")}
+                    </Text>
+                  </Tooltip>
+                ) : (
+                  <Text ta="center" size="xs" c="dimmed">
+                    {lastExecutedAt
+                      ? t("widget.smartHome-executeAutomation.advanced.lastExecuted", {
+                          time: lastExecutedAt.toLocaleTimeString(),
+                        })
+                      : t("widget.smartHome-executeAutomation.advanced.automationId", {
+                          id: options.automationId,
+                        })}
+                  </Text>
+                )}
+              </>
+            )}
+          </Stack>
+        </Center>
+      </UnstyledButton>
+    </Box>
   );
 }
diff --git a/packages/widgets/src/speedtest-tracker/index.ts b/packages/widgets/src/speedtest-tracker/index.ts
index 943ef7fdb..14cc5d118 100644
--- a/packages/widgets/src/speedtest-tracker/index.ts
+++ b/packages/widgets/src/speedtest-tracker/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("speedtestTracker", {
   icon: IconSpeedboat,
-  queryKey: [["widget", "speedtestTracker"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/stocks/index.ts b/packages/widgets/src/stocks/index.ts
index 1174a9caa..ba44f481e 100644
--- a/packages/widgets/src/stocks/index.ts
+++ b/packages/widgets/src/stocks/index.ts
@@ -13,7 +13,6 @@ const timeIntervalOptions = stockPriceTimeFrames.interval;
 
 export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
   icon: IconBuildingBank,
-  queryKey: [["widget", "stockPrice"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index 5de42f5b3..be74352de 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -40,34 +40,18 @@ export const toChartItem = (healthInfo: {
 export const appendBoundedHistory = (history: ChartItem[], item: ChartItem, limit: number): ChartItem[] =>
   [...history, item].slice(-limit);
 
-export const boundHistoryByIntegration = (
-  historyByIntegration: Record<string, ChartItem[]>,
-  limit: number,
-): Record<string, ChartItem[]> =>
-  Object.fromEntries(
-    Object.entries(historyByIntegration).map(([integrationId, history]) => [integrationId, history.slice(-limit)]),
-  );
-
 export default function SystemResources({
   integrationIds,
   options,
   width,
   displayMode,
-  widgetStateRef,
 }: WidgetComponentProps<"systemResources">) {
   const { data = [], dataUpdatedAt } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
     integrationIds,
   });
   const isAdvanced = displayMode === "advanced";
   const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
-  const persistedState = widgetStateRef?.current?.systemResources as
-    | { integrationKey?: string; historyByIntegration?: Record<string, ChartItem[]> }
-    | undefined;
-  const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>(() =>
-    persistedState?.integrationKey === integrationKey && persistedState.historyByIntegration
-      ? boundHistoryByIntegration(persistedState.historyByIntegration, ADVANCED_HISTORY_SIZE)
-      : {},
-  );
+  const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>({});
   const previousIntegrationKey = useRef(integrationKey);
 
   useEffect(() => {
@@ -94,17 +78,6 @@ export default function SystemResources({
     );
   }, [dataUpdatedAt, data]);
 
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      systemResources: {
-        integrationKey,
-        historyByIntegration: boundHistoryByIntegration(historyByIntegration, ADVANCED_HISTORY_SIZE),
-      },
-    };
-  }, [historyByIntegration, integrationKey, widgetStateRef]);
-
   const panelColumns = isAdvanced && width >= 960 && data.length > 1 ? 2 : 1;
   const panelWidth = width / panelColumns;
   const renderCharts = (entry: (typeof data)[number], availableWidth: number) => {
diff --git a/packages/widgets/src/system-resources/history.spec.ts b/packages/widgets/src/system-resources/history.spec.ts
index 539bd2296..421f74035 100644
--- a/packages/widgets/src/system-resources/history.spec.ts
+++ b/packages/widgets/src/system-resources/history.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { appendBoundedHistory, boundHistoryByIntegration, toChartItem } from "./component";
+import { appendBoundedHistory, toChartItem } from "./component";
 
 describe("system resource history", () => {
   test("averages all GPU values", () => {
@@ -18,12 +18,4 @@ describe("system resource history", () => {
     const item = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
     expect(appendBoundedHistory([item, item], item, 2)).toHaveLength(2);
   });
-
-  test("bounds restored history for every integration", () => {
-    const item = toChartItem({ cpuUtilization: 1, memUsedInBytes: 2, gpu: [], network: null });
-    expect(boundHistoryByIntegration({ first: [item, item, item], second: [item, item] }, 2)).toEqual({
-      first: [item, item],
-      second: [item, item],
-    });
-  });
 });
diff --git a/packages/widgets/src/tracearr/index.ts b/packages/widgets/src/tracearr/index.ts
index 8567197bb..9c34eb548 100644
--- a/packages/widgets/src/tracearr/index.ts
+++ b/packages/widgets/src/tracearr/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("tracearr", {
   icon: IconActivityHeartbeat,
-  queryKey: [["widget", "tracearr"]],
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/traefik/index.ts b/packages/widgets/src/traefik/index.ts
index a45686578..854075121 100644
--- a/packages/widgets/src/traefik/index.ts
+++ b/packages/widgets/src/traefik/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("traefik", {
   icon: IconRoute,
-  queryKey: [["widget", "traefik"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showTcp: factory.switch({
diff --git a/packages/widgets/src/umami/index.ts b/packages/widgets/src/umami/index.ts
index 90861eab1..eb844575b 100644
--- a/packages/widgets/src/umami/index.ts
+++ b/packages/widgets/src/umami/index.ts
@@ -8,7 +8,6 @@ export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth
 
 export const { definition, componentLoader } = createWidgetDefinition("umami", {
   icon: IconChartBar,
-  queryKey: [["widget", "umami"]],
   refetchInterval: null,
   supportedIntegrations: ["umami"],
   integrationsRequired: true,
diff --git a/packages/widgets/src/ups/index.ts b/packages/widgets/src/ups/index.ts
index c9d535dd0..681daf417 100644
--- a/packages/widgets/src/ups/index.ts
+++ b/packages/widgets/src/ups/index.ts
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("ups", {
   icon: IconBatteryCharging,
-  queryKey: [["widget", "ups"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showBattery: factory.switch({
diff --git a/packages/widgets/src/uptime-kuma/index.ts b/packages/widgets/src/uptime-kuma/index.ts
index cb0d4b0ea..b9eebcd8c 100644
--- a/packages/widgets/src/uptime-kuma/index.ts
+++ b/packages/widgets/src/uptime-kuma/index.ts
@@ -5,7 +5,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("uptimeKuma", {
   icon: IconHeartbeat,
-  queryKey: [["widget", "uptimeKuma"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showAverageUptime: factory.switch({
diff --git a/packages/widgets/src/vpn/index.ts b/packages/widgets/src/vpn/index.ts
index e63b55455..b3cbe8c73 100644
--- a/packages/widgets/src/vpn/index.ts
+++ b/packages/widgets/src/vpn/index.ts
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("vpn", {
   icon: IconShieldLock,
-  queryKey: [["widget", "vpn"]],
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from(() => ({}));
diff --git a/packages/widgets/src/weather/index.ts b/packages/widgets/src/weather/index.ts
index f775d15b7..6c30b6df8 100644
--- a/packages/widgets/src/weather/index.ts
+++ b/packages/widgets/src/weather/index.ts
@@ -7,7 +7,6 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("weather", {
   icon: IconCloud,
-  queryKey: [["widget", "weather"]],
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({

From cce3e455fac848a2937febad00693f70509a862e Mon Sep 17 00:00:00 2001
From: ajnart <49837342+ajnart@users.noreply.github.com>
Date: Sat, 1 Aug 2026 19:47:19 +0000
Subject: [PATCH 03/75] style: auto-fix lint and format

---
 apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx | 2 +-
 packages/integrations/src/patchmon/patchmon-types.ts      | 2 +-
 packages/widgets/src/firewall/failure-state.spec.ts       | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
index 292a2ed05..14004d960 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
@@ -15,7 +15,7 @@ export const ClientBoard = () => {
 
   const fullWidthSortedSections = board.sections
     .filter((section) => section.kind === "empty" || section.kind === "category")
-    .sort((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
+    .toSorted((sectionA, sectionB) => sectionA.yOffset - sectionB.yOffset);
 
   return (
     <BoardAdvancedFocusProvider>
diff --git a/packages/integrations/src/patchmon/patchmon-types.ts b/packages/integrations/src/patchmon/patchmon-types.ts
index 96c3db293..87017acdf 100644
--- a/packages/integrations/src/patchmon/patchmon-types.ts
+++ b/packages/integrations/src/patchmon/patchmon-types.ts
@@ -82,5 +82,5 @@ export const mapPatchMonStats = (data: z.infer<typeof patchmonStatsResponseSchem
   totalOutdatedPackages: data.total_outdated_packages,
   totalRepos: data.total_repos,
   lastUpdated: data.last_updated,
-  osDistribution: [...data.os_distribution].map(mapOsDistributionEntry).sort((a, b) => b.count - a.count),
+  osDistribution: [...data.os_distribution].map(mapOsDistributionEntry).toSorted((a, b) => b.count - a.count),
 });
diff --git a/packages/widgets/src/firewall/failure-state.spec.ts b/packages/widgets/src/firewall/failure-state.spec.ts
index 43e6d7b5e..d974d8371 100644
--- a/packages/widgets/src/firewall/failure-state.spec.ts
+++ b/packages/widgets/src/firewall/failure-state.spec.ts
@@ -13,7 +13,12 @@ describe("firewall failure state", () => {
   it("rejects only after every dimension fails", () => {
     expect(hasTotalFirewallFailure([failedQuery, failedQuery, failedQuery, failedQuery])).toBe(true);
     expect(
-      hasTotalFirewallFailure([failedQuery, failedQuery, failedQuery, { ...failedQuery, data: [{ error: undefined }] }]),
+      hasTotalFirewallFailure([
+        failedQuery,
+        failedQuery,
+        failedQuery,
+        { ...failedQuery, data: [{ error: undefined }] },
+      ]),
     ).toBe(false);
   });
 

From c754946089da15ccf5fb2f8121dbe6c5c80cf28b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 1 Aug 2026 23:44:17 +0200
Subject: [PATCH 04/75] fix: address widget review feedback

---
 apps/docs/docs/management/boards/index.mdx    |   6 +-
 apps/docs/docs/widgets/bookmarks/index.mdx    |   4 +-
 .../docs/widgets/dns-hole-controls/index.mdx  |   2 +-
 apps/docs/docs/widgets/iframe/index.mdx       |  13 +-
 .../docs/widgets/media-releases/index.mdx     |   2 +-
 .../widgets/media-request-stats/index.mdx     |   2 +-
 apps/docs/docs/widgets/media-server/index.mdx |   4 +-
 .../widgets/minecraft-server-status/index.mdx |   4 +-
 .../app/[locale]/_client-providers/trpc.tsx   |   9 +-
 .../advanced-focus/advanced-focus.module.css  |   2 +-
 .../board/items/widget-context-menu.tsx       | 111 +++--
 .../board/items/widget-query-scope.spec.ts    | 439 ++++++++++++++++++
 .../board/items/widget-query-scope.ts         |  94 ++++
 .../board-empty-space-context-menu.module.css |   4 +
 .../board-empty-space-context-menu.tsx        |  44 +-
 .../sections/gridstack/long-press.spec.ts     |  17 +
 .../board/sections/gridstack/long-press.ts    |   7 +
 e2e/board-advanced-interactions.spec.ts       |   5 +-
 .../src/router/test/widgets/immich.spec.ts    |  76 +++
 .../src/router/test/widgets/rssFeed.spec.ts   |  41 +-
 .../src/router/test/widgets/timetable.spec.ts | 173 ++++++-
 packages/api/src/router/widgets/firewall.ts   |   1 +
 packages/api/src/router/widgets/immich.ts     |  17 +-
 packages/api/src/router/widgets/rssFeed.ts    |  25 +-
 packages/api/src/router/widgets/timetable.ts  | 184 +++++++-
 packages/api/src/settle-integrations.ts       |   8 +-
 .../api/src/test/settle-integrations.spec.ts  |  19 +-
 .../core/src/infrastructure/http/request.ts   |  23 +-
 .../overseerr/overseerr-integration.spec.ts   |  11 +-
 packages/request-handler/src/immich.spec.ts   |  50 ++
 packages/request-handler/src/immich.ts        |  19 +-
 .../request-handler/src/timetable.spec.ts     |  67 ++-
 packages/request-handler/src/timetable.ts     |  90 +++-
 packages/translation/src/lang/en.json         |   3 +
 packages/widgets/src/app/component.tsx        |   2 +-
 packages/widgets/src/app/index.ts             |   2 +-
 .../src/archive-team-warrior/component.tsx    |   5 +-
 .../widgets/src/audio-stats/component.tsx     |  18 +-
 packages/widgets/src/audio-stats/index.ts     |   5 +-
 packages/widgets/src/beszel-alerts/index.ts   |  10 +-
 .../src/beszel-system-grid/component.tsx      |   4 +-
 .../widgets/src/beszel-system-grid/index.ts   |   2 +-
 .../src/beszel-system-stats/component.tsx     |  23 +-
 .../widgets/src/beszel-system-stats/index.ts  |  28 +-
 .../src/beszel-system-stats/selection.spec.ts |  33 +-
 .../src/beszel-system-stats/selection.ts      |  26 +-
 .../src/beszel-system-table/component.tsx     |  39 +-
 .../widgets/src/beszel-system-table/index.ts  |   8 +-
 packages/widgets/src/calendar/component.tsx   |  16 +-
 packages/widgets/src/calendar/index.ts        |   4 +-
 packages/widgets/src/clock/component.tsx      |   6 +-
 packages/widgets/src/clock/index.ts           |  20 +-
 .../widgets/src/coolify/instance-card.tsx     |  27 +-
 .../src/coolify/single-instance-layout.tsx    |  27 +-
 packages/widgets/src/custom-api/index.ts      |   8 +-
 packages/widgets/src/definition.spec.ts       |  19 +-
 packages/widgets/src/definition.ts            |  50 ++
 packages/widgets/src/downloads/index.ts       |   8 +-
 packages/widgets/src/firewall/component.tsx   |  96 ++--
 packages/widgets/src/iframe/component.spec.ts |  10 +-
 packages/widgets/src/iframe/component.tsx     |   6 +-
 .../src/immich/album-carousel/index.ts        |  16 +-
 .../widgets/src/immich/albums-query.spec.ts   |  59 +++
 .../src/immich/server-stats/component.tsx     |  31 +-
 .../widgets/src/immich/server-stats/index.ts  |   5 +-
 packages/widgets/src/index.tsx                |   5 +-
 .../widgets/src/indexer-manager/component.tsx |   4 +-
 packages/widgets/src/indexer-manager/index.ts |   4 +-
 .../widgets/src/media-missing/component.tsx   |  13 +-
 packages/widgets/src/media-missing/index.ts   |   5 +-
 .../widgets/src/media-requests/list/index.ts  |  13 +-
 .../widgets/src/media-requests/stats/index.ts |   2 +-
 packages/widgets/src/media-server/index.ts    |   8 +-
 .../src/media-transcoding/component.tsx       |   3 +
 .../widgets/src/media-transcoding/index.ts    |   4 +-
 .../src/minecraft/server-status/index.ts      |  10 +-
 packages/widgets/src/notebook/notebook.tsx    |  44 +-
 .../src/notebook/read-only-task-item.spec.ts  |  96 ++++
 .../src/notebook/read-only-task-item.ts       |  66 +++
 packages/widgets/src/notifications/index.ts   |   8 +-
 packages/widgets/src/releases/index.ts        |   4 +-
 packages/widgets/src/rssFeed/index.ts         |   8 +-
 .../src/smart-home/entity-state/component.tsx |   5 +-
 .../src/speedtest-tracker/component.tsx       |  14 +-
 packages/widgets/src/stocks/index.ts          |   9 +-
 .../src/system-resources/component.tsx        |   2 +-
 .../widgets/src/tracearr/component.spec.ts    |  14 +
 packages/widgets/src/tracearr/component.tsx   |  21 +-
 packages/widgets/src/umami/component.tsx      |  45 ++
 packages/widgets/src/umami/index.ts           |  10 +-
 packages/widgets/src/umami/umami-content.tsx  |  30 +-
 .../widgets/src/uptime-kuma/component.tsx     |   3 +-
 packages/widgets/src/weather/component.tsx    |   2 +-
 packages/widgets/src/weather/index.ts         |  13 +-
 94 files changed, 2332 insertions(+), 322 deletions(-)
 create mode 100644 apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
 create mode 100644 apps/nextjs/src/components/board/items/widget-query-scope.ts
 create mode 100644 apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.module.css
 create mode 100644 apps/nextjs/src/components/board/sections/gridstack/long-press.spec.ts
 create mode 100644 apps/nextjs/src/components/board/sections/gridstack/long-press.ts
 create mode 100644 packages/api/src/router/test/widgets/immich.spec.ts
 create mode 100644 packages/request-handler/src/immich.spec.ts
 create mode 100644 packages/widgets/src/immich/albums-query.spec.ts
 create mode 100644 packages/widgets/src/notebook/read-only-task-item.spec.ts
 create mode 100644 packages/widgets/src/notebook/read-only-task-item.ts
 create mode 100644 packages/widgets/src/tracearr/component.spec.ts

diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 75c8c6e6f..02ca0e6c9 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -36,13 +36,13 @@ Underscores and hyphen-minus are allowed.
 
 ### Column count
 
-Homarr has a complex drag and drop system that can be used from the browser.
+Homarr has a complex drag-and-drop system that can be used from the browser.
 The column count defines how many horizontal columns are available to drag and drop elements to.
 
 ### Public
 
 This will enable public access for everyone - regardless of whether they are logged in or not.
-This can be really useful if you want to have public boards in your company or for family and fiends.
+This can be really useful if you want to have public boards in your company or for family and friends.
 Modifications for public boards must be allowed explicitly using user groups and their permissions.
 
 ## Board settings
@@ -106,7 +106,7 @@ Amount of columns for this layout. Defines how many items can be placed in a row
 #### Breakpoint
 
 Minimum width of the screen where the layout will be used.
-Once the minmum of the next layout is reached the layout will change.
+Once the minimum width of the next layout is reached, the layout will change.
 
 #### Preview
 
diff --git a/apps/docs/docs/widgets/bookmarks/index.mdx b/apps/docs/docs/widgets/bookmarks/index.mdx
index 5ef772034..02de33b5a 100644
--- a/apps/docs/docs/widgets/bookmarks/index.mdx
+++ b/apps/docs/docs/widgets/bookmarks/index.mdx
@@ -21,12 +21,12 @@ You can add links to your favorite applications, websites, or any other resource
 import gridIconsOnly from "./img/grid-icons-only.png";
 import gridWithTitle from "./img/grid-with-title.png";
 import verticalListAll from "./img/vertical-list-all.png";
-import vericalListSimple from "./img/vertical-list-simple.png";
+import verticalListSimple from "./img/vertical-list-simple.png";
 
 <div className='flex gap-1'>
     <div className='flex flex-col gap-1'>
         <img src={gridIconsOnly} alt="bookmarks grid icons-only" width={128} height={128} />
-        <img src={vericalListSimple} alt="bookmarks vertical-list no-domain" width={128} height={128} />
+        <img src={verticalListSimple} alt="bookmarks vertical-list no-domain" width={128} height={128} />
     </div>
 
     <img src={gridWithTitle} alt="bookmarks grid with-title" width={256 + 4} height={256 + 4} />
diff --git a/apps/docs/docs/widgets/dns-hole-controls/index.mdx b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
index e6fd43e15..c20ba99f9 100644
--- a/apps/docs/docs/widgets/dns-hole-controls/index.mdx
+++ b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: "DNS Hole Controls"
-description: "Control PiHole or AdGuard from your dashboard."
+description: "Control Pi-hole, AdGuard Home, or Technitium DNS from your dashboard."
 hide_title: true
 ---
 
diff --git a/apps/docs/docs/widgets/iframe/index.mdx b/apps/docs/docs/widgets/iframe/index.mdx
index 7d983342a..c988e0876 100644
--- a/apps/docs/docs/widgets/iframe/index.mdx
+++ b/apps/docs/docs/widgets/iframe/index.mdx
@@ -39,13 +39,14 @@ import youtubeStream from "./img/nasa-iss-stream.png";
 Although you can integrate many websites, some may not work.
 This is because the administrators of those sites disallow iframes
 for security reasons, as users could easily be tricked
-by embeding the original site on a malicious page.
+by embedding the original site on a malicious page.
 
 Some proxies disallow iframes by default for this reason.
-You can use https://iframetest.com to check, if the site is allowing iframes.
+You can use https://iframetest.com to check whether the site allows iframes.
 
 If you manage all of your own applications, you can usually change that by configuring
-the appropriate headers (such as `X-Frame-Options` or `Content-Security-Policy`) to allow iframes.
+the `Content-Security-Policy` header and its `frame-ancestors` directive. The obsolete
+`X-Frame-Options: ALLOW-FROM` directive is not supported by modern browsers.
 
 For example, to allow your site to be embedded in iframes from specific domains:
 
@@ -53,14 +54,12 @@ For example, to allow your site to be embedded in iframes from specific domains:
 
 ```apache
 Header set Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com"
-Header set X-Frame-Options "ALLOW-FROM https://trusted-domain.com"
 ```
 
 **Nginx:**
 
 ```nginx
 add_header Content-Security-Policy "frame-ancestors 'self' https://trusted-domain.com";
-add_header X-Frame-Options "ALLOW-FROM https://trusted-domain.com";
 ```
 
 ### Example URLs
@@ -86,11 +85,11 @@ To create a transparent iframe like below you can use the following html code an
 
 ![transparent iframe](./img/transparent-iframe.png)
 
-### Third party content
+### Third-party content
 
 :::warning
 
-The content below is an overview of third party projects. All support requests/problems must be redirected to the appropriate repository.
+The content below is an overview of third-party projects. All support requests/problems must be redirected to the appropriate repository.
 We cannot guarantee the functionality nor security of these tools.
 
 :::
diff --git a/apps/docs/docs/widgets/media-releases/index.mdx b/apps/docs/docs/widgets/media-releases/index.mdx
index 7142ccfc5..14695f0fe 100644
--- a/apps/docs/docs/widgets/media-releases/index.mdx
+++ b/apps/docs/docs/widgets/media-releases/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: "Media releases"
-description: "Display newly added medias or upcoming releases from different integrations"
+description: "Display newly added media or upcoming releases from different integrations"
 hide_title: true
 ---
 
diff --git a/apps/docs/docs/widgets/media-request-stats/index.mdx b/apps/docs/docs/widgets/media-request-stats/index.mdx
index b381f177b..b659f9e27 100644
--- a/apps/docs/docs/widgets/media-request-stats/index.mdx
+++ b/apps/docs/docs/widgets/media-request-stats/index.mdx
@@ -19,7 +19,7 @@ import { overseerrIntegration } from "@site/docs/integrations/overseerr";
 
 <WidgetHeader widget={mediaRequestStatsWidget} categories={["Media requests"]} />
 
-Provide a statistics overview of your media requests, such as mount of requests, open requests, approvement and rejections.
+Provide an overview of your media requests, including total requests, open requests, approvals, and rejections.
 
 ### Supported Integrations
 
diff --git a/apps/docs/docs/widgets/media-server/index.mdx b/apps/docs/docs/widgets/media-server/index.mdx
index f76ce050b..69b565ad8 100644
--- a/apps/docs/docs/widgets/media-server/index.mdx
+++ b/apps/docs/docs/widgets/media-server/index.mdx
@@ -21,8 +21,8 @@ import { plexIntegration } from "@site/docs/integrations/plex";
 
 <WidgetHeader widget={mediaServerWidget} categories={["Media server"]} />
 
-The media server widget enables you to watch and view current active sessions over all your media servers.
-It also displays useful information, that you can use when providing support to users or debugging a problem.
+The media server widget shows active sessions across your media servers.
+It also displays useful information for user support and troubleshooting.
 
 ### Screenshots
 
diff --git a/apps/docs/docs/widgets/minecraft-server-status/index.mdx b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
index 8a99cf8cf..bcc6e281e 100644
--- a/apps/docs/docs/widgets/minecraft-server-status/index.mdx
+++ b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
@@ -26,7 +26,7 @@ import bedrockItem from "./img/bedrock.png";
 
 <div className="flex gap-1">
   <img src={javaItem} alt="minecraft-server-status java-edition" width={128 * 1.5} height={128 * 1.5} />
-  <img src={bedrockItem} alt="minecraft-server-status bedrock-editon" width={128 * 1.5} height={128 * 1.5} />
+  <img src={bedrockItem} alt="minecraft-server-status bedrock-edition" width={128 * 1.5} height={128 * 1.5} />
 </div>
 
 <WidgetInteractionGuide />
@@ -42,4 +42,4 @@ import bedrockItem from "./img/bedrock.png";
 ### Data source
 
 We use the Minecraft Server Status API to fetch the server status.
-If you need to whitelist the api, please use the following URL: `hhttps://api.mcsrvstat.us`
+If you need to whitelist the API, use the following URL: `https://api.mcsrvstat.us`.
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
index 9f2c2b3d8..b52bf974b 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
@@ -34,7 +34,7 @@ import { createHeadersCallbackForSource, getTrpcUrl } from "@homarr/api/shared";
 import { env } from "@homarr/common/env";
 import { showWarningNotification } from "@homarr/notifications";
 import type { WidgetDefinition } from "@homarr/widgets";
-import { widgetImports } from "@homarr/widgets";
+import { getWidgetQueryKeys, widgetImports } from "@homarr/widgets";
 
 import { createWidgetQueryPersister } from "./query-cache-persister";
 
@@ -96,8 +96,11 @@ export function TRPCReactProvider(props: PropsWithChildren) {
       const def = definition as WidgetDefinition & { kind: string };
       if (def.refetchInterval === undefined) continue;
       const interval = def.refetchInterval === null ? false : def.refetchInterval * 1000;
-      const primaryQueryKey = def.queryKey ?? [["widget", def.kind]];
-      client.setQueryDefaults(primaryQueryKey, { refetchInterval: interval });
+      for (const queryKey of getWidgetQueryKeys(def)) {
+        const path = queryKey[0];
+        if (!Array.isArray(path) || path[0] !== "widget") continue;
+        client.setQueryDefaults(queryKey, { refetchInterval: interval });
+      }
     }
     return client;
   });
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index 6ff513bf5..39965dbdf 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -135,7 +135,7 @@
 @media (prefers-reduced-motion: reduce) {
   .backdrop,
   .surface {
-    animation-duration: 1ms;
+    animation: none;
   }
 }
 
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index ad3da32e7..2c89b14b9 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -14,7 +14,7 @@ import {
   IconTrash,
 } from "@tabler/icons-react";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
-import { partialMatchKey, useIsFetching, useQueryClient } from "@tanstack/react-query";
+import { useIsFetching, useQueryClient } from "@tanstack/react-query";
 
 import { clientApi } from "@homarr/api/client";
 import { useIntegrationsWithInteractAccess, useSession } from "@homarr/auth/client";
@@ -28,8 +28,13 @@ import { useSettings } from "@homarr/settings";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TranslationFunction } from "@homarr/translation";
-import type { WidgetContextMenuAction } from "@homarr/widgets";
-import { getWidgetQueryKeys, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
+import type { WidgetContextMenuAction, WidgetDefinition } from "@homarr/widgets";
+import {
+  getWidgetQueryKeys,
+  getWidgetRuntimeQueries,
+  reduceWidgetOptionsWithDefaultValues,
+  widgetImports,
+} from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
@@ -38,6 +43,7 @@ import { useBoardPermissions } from "../permissions/client";
 import { useSectionContext } from "../sections/section-context";
 import { useItemActions } from "./item-actions";
 import { ItemMoveModal } from "./item-move-modal";
+import { matchesWidgetItemQuery } from "./widget-query-scope";
 
 interface WidgetContextMenuProps {
   item: SectionItem;
@@ -70,13 +76,45 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
   const integrationsWithInteractAccess = useIntegrationsWithInteractAccess();
   const [menuOpened, setMenuOpened] = useState(false);
 
+  const persistBoard = useCallback(
+    (updater: (previous: typeof board) => typeof board) => {
+      updateAndPersistBoard(updater, {
+        onError: () => {
+          showErrorNotification({
+            title: t("item.menu.notification.saveError.title"),
+            message: t("item.menu.notification.saveError.message"),
+          });
+        },
+      });
+    },
+    [t, updateAndPersistBoard],
+  );
+
+  const options = useMemo(
+    () => reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options) as Record<string, unknown>,
+    [item.kind, settings, item.options],
+  );
+
   const widgetQueryKeys = useMemo(
     () => getWidgetQueryKeys(currentDefinition as Parameters<typeof getWidgetQueryKeys>[0]),
     [currentDefinition],
   );
+  const widgetQueryMatcher = (currentDefinition as WidgetDefinition).queryMatcher;
   const matchesWidgetQuery = useCallback(
-    (queryKey: QueryKey) => widgetQueryKeys.some((candidate) => partialMatchKey(queryKey, candidate)),
-    [widgetQueryKeys],
+    (queryKey: QueryKey) =>
+      matchesWidgetItemQuery(
+        queryKey,
+        widgetQueryKeys,
+        {
+          itemId: item.id,
+          boardId: board.id,
+          integrationIds: item.integrationIds,
+          options,
+          runtimeQueries: getWidgetRuntimeQueries(widgetStateRef),
+        },
+        widgetQueryMatcher,
+      ),
+    [board.id, item.id, item.integrationIds, options, widgetQueryKeys, widgetQueryMatcher, widgetStateRef],
   );
   const isWidgetFetching =
     useIsFetching({
@@ -84,17 +122,29 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
       predicate: (query) => matchesWidgetQuery(query.queryKey),
     }) > 0;
   const handleRefetch = useCallback(() => {
-    void Promise.all(widgetQueryKeys.map((queryKey) => queryClient.refetchQueries({ queryKey, type: "active" })));
-  }, [queryClient, widgetQueryKeys]);
+    void queryClient.refetchQueries({ type: "active", predicate: (query) => matchesWidgetQuery(query.queryKey) });
+  }, [matchesWidgetQuery, queryClient]);
 
   const canInteractWithSelectedIntegrations = useMemo(() => {
     const allowedIds = new Set(integrationsWithInteractAccess.map(({ id }) => id));
     return item.integrationIds.length > 0 && item.integrationIds.every((id) => allowedIds.has(id));
   }, [integrationsWithInteractAccess, item.integrationIds]);
 
-  const options = useMemo(
-    () => reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options) as Record<string, unknown>,
-    [item.kind, settings, item.options],
+  const setItemOptions = useCallback(
+    (partial: Record<string, unknown>) => {
+      if (isEditMode) {
+        updateItemOptions({ itemId: item.id, newOptions: { ...options, ...partial } });
+        return;
+      }
+
+      persistBoard((previous) => ({
+        ...previous,
+        items: previous.items.map((boardItem) =>
+          boardItem.id === item.id ? { ...boardItem, options: { ...boardItem.options, ...partial } } : boardItem,
+        ),
+      }));
+    },
+    [isEditMode, item.id, options, persistBoard, updateItemOptions],
   );
 
   type OptionDef = { type: string; skipContextMenu?: boolean };
@@ -110,9 +160,7 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const actions = (def.contextActions as any)({
       options,
-      setOptions: (partial: Record<string, unknown>) => {
-        updateItemOptions({ itemId: item.id, newOptions: { ...options, ...partial } });
-      },
+      setOptions: setItemOptions,
       integrationIds: item.integrationIds,
       context: {
         isEditMode,
@@ -125,20 +173,6 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
     return (Array.isArray(actions) ? actions : []) as WidgetContextMenuAction[];
   })();
 
-  const persistBoard = useCallback(
-    (updater: (previous: typeof board) => typeof board) => {
-      updateAndPersistBoard(updater, {
-        onError: () => {
-          showErrorNotification({
-            title: t("item.menu.notification.saveError.title"),
-            message: t("item.menu.notification.saveError.message"),
-          });
-        },
-      });
-    },
-    [t, updateAndPersistBoard],
-  );
-
   const openEditModal = useCallback(() => {
     openModal(
       {
@@ -195,19 +229,8 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
   ]);
 
   const handleToggle = useCallback(
-    (key: string) => (checked: boolean) => {
-      if (isEditMode) {
-        updateItemOptions({ itemId: item.id, newOptions: { ...options, [key]: checked } });
-      } else {
-        persistBoard((previous) => ({
-          ...previous,
-          items: previous.items.map((boardItem) =>
-            boardItem.id !== item.id ? boardItem : { ...boardItem, options: { ...boardItem.options, [key]: checked } },
-          ),
-        }));
-      }
-    },
-    [options, item.id, updateItemOptions, isEditMode, persistBoard],
+    (key: string) => (checked: boolean) => setItemOptions({ [key]: checked }),
+    [setItemOptions],
   );
 
   if (!session) return <>{children}</>;
@@ -306,7 +329,7 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
               {tMenu("refresh")}
               <WidgetQueryStatus
                 queryClient={queryClient}
-                queryKeys={widgetQueryKeys}
+                matchesQuery={matchesWidgetQuery}
                 isFetching={isWidgetFetching}
                 t={t}
               />
@@ -350,15 +373,15 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
 
 interface WidgetQueryStatusProps {
   queryClient: QueryClient;
-  queryKeys: readonly QueryKey[];
+  matchesQuery: (queryKey: QueryKey) => boolean;
   isFetching: boolean;
   t: TranslationFunction;
 }
 
-const WidgetQueryStatus = ({ queryClient, queryKeys, isFetching, t }: WidgetQueryStatusProps) => {
+const WidgetQueryStatus = ({ queryClient, matchesQuery, isFetching, t }: WidgetQueryStatusProps) => {
   const queries = queryClient.getQueryCache().findAll({
     type: "active",
-    predicate: (query) => queryKeys.some((queryKey) => partialMatchKey(query.queryKey, queryKey)),
+    predicate: (query) => matchesQuery(query.queryKey),
   });
   const timestamps = queries.map((query) => query.state.dataUpdatedAt).filter(Boolean);
   const latest = timestamps.length > 0 ? Math.max(...timestamps) : 0;
diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
new file mode 100644
index 000000000..ae135ea57
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
@@ -0,0 +1,439 @@
+import type { QueryKey } from "@tanstack/react-query";
+import { describe, expect, test } from "vitest";
+
+import type { NormalizedWidgetQuery, WidgetDefinition, WidgetQueryMatcherScope } from "@homarr/widgets";
+import { getWidgetQueryKeys, widgetImports } from "@homarr/widgets";
+
+import { matchesWidgetItemQuery } from "./widget-query-scope";
+
+type WidgetKind = keyof typeof widgetImports;
+const allPhotosAlbumId = "all";
+
+const createScope = (overrides: Partial<WidgetQueryMatcherScope> = {}): WidgetQueryMatcherScope => ({
+  itemId: "item-1",
+  boardId: "board-1",
+  integrationIds: ["integration-1"],
+  options: {},
+  runtimeQueries: [],
+  ...overrides,
+});
+
+const matches = (kind: WidgetKind, path: readonly string[], input: unknown, scope: WidgetQueryMatcherScope) => {
+  const definition = widgetImports[kind].definition as WidgetDefinition & { kind: string };
+  const queryKey: QueryKey = [path, { input, type: "query" }];
+  return matchesWidgetItemQuery(queryKey, getWidgetQueryKeys(definition), scope, definition.queryMatcher);
+};
+
+describe("matchesWidgetItemQuery", () => {
+  test("matches only the current Custom API definition", () => {
+    const scope = createScope({ options: { definitionId: "definition-1" } });
+
+    expect(matches("customApi", ["widget", "customApi", "getData"], { definitionId: "definition-1" }, scope)).toBe(
+      true,
+    );
+    expect(matches("customApi", ["widget", "customApi", "getData"], { definitionId: "definition-2" }, scope)).toBe(
+      false,
+    );
+  });
+
+  test("owns only the active compact or advanced Media Missing page size", () => {
+    const path = ["widget", "mediaOrganizer", "getData"];
+    const compactInput = { integrationIds: ["radarr-1"], pageSize: 20 };
+    const advancedInput = { integrationIds: ["radarr-1"], pageSize: 50 };
+    const compactScope = createScope({
+      integrationIds: ["radarr-1"],
+      runtimeQueries: [{ path, input: compactInput }],
+    });
+    const advancedScope = createScope({
+      integrationIds: ["radarr-1"],
+      runtimeQueries: [{ path, input: advancedInput }],
+    });
+
+    expect(matches("mediaMissing", path, compactInput, compactScope)).toBe(true);
+    expect(matches("mediaMissing", path, advancedInput, compactScope)).toBe(false);
+    expect(matches("mediaMissing", path, advancedInput, advancedScope)).toBe(true);
+    expect(matches("mediaMissing", path, compactInput, advancedScope)).toBe(false);
+  });
+
+  test("owns every Releases batch by item id", () => {
+    const scope = createScope({ itemId: "release-item" });
+    const path = ["widget", "releases", "getLatest"];
+
+    expect(matches("releases", path, { itemId: "release-item", repositories: [{ id: "one" }] }, scope)).toBe(true);
+    expect(matches("releases", path, { itemId: "sibling-item", repositories: [{ id: "one" }] }, scope)).toBe(false);
+  });
+
+  test("normalizes Immich's all-photos sentinel and separates Immich widget kinds", () => {
+    const carouselScope = createScope({
+      integrationIds: ["immich-1"],
+      options: { albumId: allPhotosAlbumId },
+    });
+    const serverStatsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "immich", "getServerStats"],
+      input: { integrationId: "immich-1" },
+    };
+    const albumsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "immich", "getAlbums"],
+      input: { integrationId: "immich-1" },
+    };
+    const compactServerScope = createScope({
+      integrationIds: ["immich-1"],
+      runtimeQueries: [serverStatsQuery],
+    });
+    const advancedServerScope = createScope({
+      integrationIds: ["immich-1"],
+      runtimeQueries: [serverStatsQuery, albumsQuery],
+    });
+
+    expect(
+      matches("immich-albumCarousel", ["widget", "immich", "getAlbum"], { integrationId: "immich-1" }, carouselScope),
+    ).toBe(true);
+    expect(
+      matches(
+        "immich-albumCarousel",
+        ["widget", "immich", "getAlbum"],
+        { integrationId: "immich-1", albumId: "album-2" },
+        carouselScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "immich-albumCarousel",
+        ["widget", "immich", "getServerStats"],
+        { integrationId: "immich-1" },
+        carouselScope,
+      ),
+    ).toBe(false);
+    expect(matches("immich-serverStats", serverStatsQuery.path, serverStatsQuery.input, compactServerScope)).toBe(true);
+    expect(matches("immich-serverStats", albumsQuery.path, albumsQuery.input, compactServerScope)).toBe(false);
+    expect(matches("immich-serverStats", albumsQuery.path, albumsQuery.input, advancedServerScope)).toBe(true);
+    expect(
+      matches("immich-serverStats", ["widget", "immich", "getAlbum"], albumsQuery.input, advancedServerScope),
+    ).toBe(false);
+  });
+
+  test("uses the resolved Beszel integration, system, and includeDocker input", () => {
+    const runtimeQuery: NormalizedWidgetQuery = {
+      path: ["widget", "beszel", "getSystemStats"],
+      input: {
+        integrationIds: ["beszel-2"],
+        systemId: "system-2",
+        timePeriod: "1h",
+        includeDocker: true,
+      },
+    };
+    const scope = createScope({
+      integrationIds: ["beszel-1", "beszel-2"],
+      options: { systemId: "beszel-2:system-2", timePeriod: "1h", showDockerCpu: true },
+      runtimeQueries: [runtimeQuery],
+    });
+
+    expect(matches("beszelSystemStats", runtimeQuery.path, runtimeQuery.input, scope)).toBe(true);
+    expect(
+      matches(
+        "beszelSystemStats",
+        runtimeQuery.path,
+        { ...(runtimeQuery.input as Record<string, unknown>), includeDocker: false },
+        scope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "beszelSystemStats",
+        runtimeQuery.path,
+        { ...(runtimeQuery.input as Record<string, unknown>), systemId: "system-1" },
+        scope,
+      ),
+    ).toBe(false);
+  });
+
+  test("separates Beszel procedure families while retaining shared getSystems ownership", () => {
+    const scope = createScope({
+      integrationIds: ["beszel-1"],
+      options: { showHistory: true, maxHistoryItems: 10 },
+    });
+    const systemsInput = { integrationIds: ["beszel-1"] };
+    const alertsInput = { integrationIds: ["beszel-1"], includeHistory: true, maxHistoryItems: 10 };
+
+    expect(matches("beszelSystemGrid", ["widget", "beszel", "getSystems"], systemsInput, scope)).toBe(true);
+    expect(matches("beszelSystemTable", ["widget", "beszel", "getSystems"], systemsInput, scope)).toBe(true);
+    expect(matches("beszelAlerts", ["widget", "beszel", "getSystems"], systemsInput, scope)).toBe(false);
+    expect(matches("beszelAlerts", ["widget", "beszel", "getAlerts"], alertsInput, scope)).toBe(true);
+    expect(matches("beszelSystemGrid", ["widget", "beszel", "getAlerts"], alertsInput, scope)).toBe(false);
+  });
+
+  test("owns only the active Beszel table detail query", () => {
+    const activeQuery: NormalizedWidgetQuery = {
+      path: ["widget", "beszel", "getSystemStats"],
+      input: {
+        integrationIds: ["beszel-1"],
+        systemId: "system-1",
+        timePeriod: "1h",
+        includeDocker: false,
+      },
+    };
+    const scope = createScope({ integrationIds: ["beszel-1"], runtimeQueries: [activeQuery] });
+
+    expect(matches("beszelSystemTable", activeQuery.path, activeQuery.input, scope)).toBe(true);
+    expect(
+      matches(
+        "beszelSystemTable",
+        activeQuery.path,
+        { ...(activeQuery.input as Record<string, unknown>), systemId: "system-2" },
+        scope,
+      ),
+    ).toBe(false);
+    expect(matches("beszelSystemGrid", activeQuery.path, activeQuery.input, scope)).toBe(false);
+  });
+
+  test("owns only Umami queries registered for the active view and layout", () => {
+    const eventQuery: NormalizedWidgetQuery = {
+      path: ["widget", "umami", "getMultiEventTimeSeries"],
+      input: { integrationId: "umami-1", websiteId: "site-1", timeFrame: "24h", eventNames: ["signup", "view"] },
+    };
+    const topPagesQuery: NormalizedWidgetQuery = {
+      path: ["widget", "umami", "getTopPages"],
+      input: { integrationId: "umami-1", websiteId: "site-1", timeFrame: "24h", limit: 5 },
+    };
+    const eventsScope = createScope({ runtimeQueries: [eventQuery] });
+    const advancedScope = createScope({ runtimeQueries: [eventQuery, topPagesQuery] });
+
+    expect(matches("umami", eventQuery.path, eventQuery.input, eventsScope)).toBe(true);
+    expect(
+      matches(
+        "umami",
+        eventQuery.path,
+        { integrationId: "umami-1", websiteId: "site-1", timeFrame: "24h", eventNames: ["view", "signup"] },
+        eventsScope,
+      ),
+    ).toBe(false);
+    expect(matches("umami", topPagesQuery.path, topPagesQuery.input, eventsScope)).toBe(false);
+    expect(matches("umami", topPagesQuery.path, topPagesQuery.input, advancedScope)).toBe(true);
+  });
+
+  test("maps Media Request status filters and separates list from stats", () => {
+    const listScope = createScope({
+      integrationIds: ["request-1"],
+      options: { statusFilter: [], recentDays: 30, linksTargetNewTab: true },
+    });
+    const allStatuses = ["pending", "approved", "declined", "failed", "completed"];
+
+    expect(
+      matches(
+        "mediaRequests-requestList",
+        ["widget", "mediaRequests", "getLatestRequests"],
+        { integrationIds: ["request-1"], statuses: allStatuses, recentDays: 30 },
+        listScope,
+      ),
+    ).toBe(true);
+    expect(
+      matches(
+        "mediaRequests-requestList",
+        ["widget", "mediaRequests", "getLatestRequests"],
+        { integrationIds: ["request-1"], statuses: ["pending"], recentDays: 30 },
+        listScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "mediaRequests-requestList",
+        ["widget", "mediaRequests", "getStats"],
+        { integrationIds: ["request-1"] },
+        listScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "mediaRequests-requestStats",
+        ["widget", "mediaRequests", "getStats"],
+        { integrationIds: ["request-1"] },
+        listScope,
+      ),
+    ).toBe(true);
+  });
+
+  test("separates Audio Stats stream details from Media Server filters", () => {
+    const statsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "audioStats", "getStats"],
+      input: { integrationId: "audio-1" },
+    };
+    const streamsQuery: NormalizedWidgetQuery = {
+      path: ["widget", "mediaServer", "getCurrentStreams"],
+      input: { integrationIds: ["audio-1"], showOnlyPlaying: false },
+    };
+    const compactAudioScope = createScope({ integrationIds: ["audio-1"], runtimeQueries: [statsQuery] });
+    const advancedAudioScope = createScope({
+      integrationIds: ["audio-1"],
+      runtimeQueries: [statsQuery, streamsQuery],
+    });
+    const mediaScope = createScope({ integrationIds: ["audio-1"], options: { showOnlyPlaying: true } });
+
+    expect(matches("audioStats", statsQuery.path, statsQuery.input, compactAudioScope)).toBe(true);
+    expect(matches("audioStats", streamsQuery.path, streamsQuery.input, compactAudioScope)).toBe(false);
+    expect(matches("audioStats", streamsQuery.path, streamsQuery.input, advancedAudioScope)).toBe(true);
+    expect(
+      matches(
+        "audioStats",
+        streamsQuery.path,
+        { integrationIds: ["audio-1"], showOnlyPlaying: true },
+        advancedAudioScope,
+      ),
+    ).toBe(false);
+    expect(
+      matches("mediaServer", streamsQuery.path, { integrationIds: ["audio-1"], showOnlyPlaying: true }, mediaScope),
+    ).toBe(true);
+    expect(matches("mediaServer", streamsQuery.path, streamsQuery.input, mediaScope)).toBe(false);
+  });
+
+  test("uses each Calendar instance's registered month", () => {
+    const path = ["widget", "calendar", "findAllEvents"];
+    const januaryInput = {
+      integrationIds: ["calendar-1"],
+      month: 0,
+      year: 2026,
+      releaseType: [],
+      showUnmonitored: false,
+    };
+    const februaryInput = { ...januaryInput, month: 1 };
+    const januaryScope = createScope({ runtimeQueries: [{ path, input: januaryInput }] });
+    const februaryScope = createScope({ runtimeQueries: [{ path, input: februaryInput }] });
+
+    expect(matches("calendar", path, januaryInput, januaryScope)).toBe(true);
+    expect(matches("calendar", path, februaryInput, januaryScope)).toBe(false);
+    expect(matches("calendar", path, februaryInput, februaryScope)).toBe(true);
+  });
+
+  test("uses each Media Transcoding instance's registered page and geometry-derived page size", () => {
+    const path = ["widget", "mediaTranscoding", "getDataAsync"];
+    const firstPage = { integrationId: "transcode-1", pageSize: 8, page: 1 };
+    const secondPage = { integrationId: "transcode-1", pageSize: 12, page: 2 };
+    const firstScope = createScope({ runtimeQueries: [{ path, input: firstPage }] });
+    const secondScope = createScope({ runtimeQueries: [{ path, input: secondPage }] });
+
+    expect(matches("mediaTranscoding", path, firstPage, firstScope)).toBe(true);
+    expect(matches("mediaTranscoding", path, secondPage, firstScope)).toBe(false);
+    expect(matches("mediaTranscoding", path, secondPage, secondScope)).toBe(true);
+  });
+
+  test("matches only the Downloads query with the current integrations and limit", () => {
+    const scope = createScope({
+      integrationIds: ["sabnzbd-1", "qbittorrent-1"],
+      options: { limitPerIntegration: 25 },
+    });
+    const path = ["widget", "downloads", "getJobsAndStatuses"];
+
+    expect(
+      matches("downloads", path, { integrationIds: ["sabnzbd-1", "qbittorrent-1"], limitPerIntegration: 25 }, scope),
+    ).toBe(true);
+    expect(matches("downloads", path, { integrationIds: ["sabnzbd-1"], limitPerIntegration: 25 }, scope)).toBe(false);
+    expect(
+      matches("downloads", path, { integrationIds: ["sabnzbd-1", "qbittorrent-1"], limitPerIntegration: 50 }, scope),
+    ).toBe(false);
+    expect(
+      matches("downloads", ["widget", "downloads", "pause"], { integrationIds: ["sabnzbd-1", "qbittorrent-1"] }, scope),
+    ).toBe(false);
+  });
+
+  test("matches only the active Stock Price symbol and time frame", () => {
+    const scope = createScope({ options: { stock: "AAPL", timeRange: "1mo", timeInterval: "1d" } });
+    const path = ["widget", "stockPrice", "getPriceHistory"];
+
+    expect(matches("stockPrice", path, { stock: "AAPL", timeRange: "1mo", timeInterval: "1d" }, scope)).toBe(true);
+    expect(matches("stockPrice", path, { stock: "MSFT", timeRange: "1mo", timeInterval: "1d" }, scope)).toBe(false);
+    expect(matches("stockPrice", path, { stock: "AAPL", timeRange: "5d", timeInterval: "1d" }, scope)).toBe(false);
+  });
+
+  test("matches Weather by the coordinates sent to the location procedure", () => {
+    const scope = createScope({
+      options: { location: { name: "Paris", latitude: 48.85341, longitude: 2.3488 } },
+    });
+    const path = ["widget", "weather", "atLocation"];
+
+    expect(matches("weather", path, { latitude: 48.85341, longitude: 2.3488 }, scope)).toBe(true);
+    expect(matches("weather", path, { latitude: 51.5072, longitude: -0.1276 }, scope)).toBe(false);
+    expect(
+      matches("weather", ["widget", "weather", "forecast"], { latitude: 48.85341, longitude: 2.3488 }, scope),
+    ).toBe(false);
+  });
+
+  test("matches Clock weather only when enabled and at its configured coordinates", () => {
+    const path = ["widget", "weather", "atLocation"];
+    const location = { name: "Brisbane", latitude: -27.4698, longitude: 153.0251 };
+    const enabledScope = createScope({ options: { showWeather: true, weatherLocation: location } });
+    const disabledScope = createScope({ options: { showWeather: false, weatherLocation: location } });
+
+    expect(matches("clock", path, { latitude: -27.4698, longitude: 153.0251 }, enabledScope)).toBe(true);
+    expect(matches("clock", path, { latitude: 48.85341, longitude: 2.3488 }, enabledScope)).toBe(false);
+    expect(matches("clock", path, { latitude: -27.4698, longitude: 153.0251 }, disabledScope)).toBe(false);
+  });
+
+  test("matches Minecraft Server Status by the full input passed to useQuery", () => {
+    const scope = createScope({
+      options: { title: "Survival", domain: "play.example.com", isBedrockServer: false },
+    });
+    const path = ["widget", "minecraft", "getServerStatus"];
+
+    expect(
+      matches(
+        "minecraftServerStatus",
+        path,
+        { title: "Survival", domain: "play.example.com", isBedrockServer: false },
+        scope,
+      ),
+    ).toBe(true);
+    expect(
+      matches(
+        "minecraftServerStatus",
+        path,
+        { title: "Creative", domain: "play.example.com", isBedrockServer: false },
+        scope,
+      ),
+    ).toBe(false);
+    expect(
+      matches(
+        "minecraftServerStatus",
+        path,
+        { title: "Survival", domain: "bedrock.example.com", isBedrockServer: true },
+        scope,
+      ),
+    ).toBe(false);
+  });
+
+  test("matches Notifications by integrations and the full input passed to useQuery", () => {
+    const scope = createScope({ integrationIds: ["ntfy-1"], options: { hideLogos: true } });
+    const path = ["widget", "notifications", "getNotifications"];
+
+    expect(matches("notifications", path, { hideLogos: true, integrationIds: ["ntfy-1"] }, scope)).toBe(true);
+    expect(matches("notifications", path, { hideLogos: false, integrationIds: ["ntfy-1"] }, scope)).toBe(false);
+    expect(matches("notifications", path, { hideLogos: true, integrationIds: ["gotify-1"] }, scope)).toBe(false);
+    expect(
+      matches("notifications", ["widget", "notifications", "dismiss"], { integrationIds: ["ntfy-1"] }, scope),
+    ).toBe(false);
+  });
+
+  test("keeps renamed RSS input fields item-specific", () => {
+    const scope = createScope({
+      integrationIds: [],
+      options: { feedUrls: ["https://feed.example/rss"], maximumAmountPosts: 100 },
+    });
+    const path = ["widget", "rssFeed", "getFeeds"];
+
+    expect(matches("rssFeed", path, { urls: ["https://feed.example/rss"], maximumAmountPosts: 100 }, scope)).toBe(true);
+    expect(matches("rssFeed", path, { urls: ["https://other.example/rss"], maximumAmountPosts: 100 }, scope)).toBe(
+      false,
+    );
+  });
+
+  test("generic fallback ignores transformed non-identity inputs", () => {
+    const scope = createScope({ integrationIds: ["integration-1"], options: { pageSize: 10 } });
+    const definitionKeys = [[["widget", "example"]]] as const;
+
+    expect(
+      matchesWidgetItemQuery(
+        [["widget", "example", "getData"], { input: { integrationIds: ["integration-1"], pageSize: 50 } }],
+        definitionKeys,
+        scope,
+      ),
+    ).toBe(true);
+  });
+});
diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.ts b/apps/nextjs/src/components/board/items/widget-query-scope.ts
new file mode 100644
index 000000000..03ae7a1d3
--- /dev/null
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.ts
@@ -0,0 +1,94 @@
+import type { QueryKey } from "@tanstack/react-query";
+import { hashKey } from "@tanstack/react-query";
+
+import type { NormalizedWidgetQuery, WidgetQueryMatcher, WidgetQueryMatcherScope } from "@homarr/widgets";
+
+export const matchesWidgetItemQuery = (
+  queryKey: QueryKey,
+  widgetQueryKeys: readonly QueryKey[],
+  scope: WidgetQueryMatcherScope,
+  queryMatcher?: WidgetQueryMatcher,
+) => {
+  const query = normalizeWidgetQuery(queryKey);
+  if (!query || !widgetQueryKeys.some((candidate) => matchesDefinitionPath(query.path, candidate))) return false;
+  if (queryMatcher) return queryMatcher(query, scope);
+
+  return matchesQueryInput(query.input, scope);
+};
+
+const normalizeWidgetQuery = (queryKey: QueryKey): NormalizedWidgetQuery | null => {
+  const path = queryKey[0];
+  if (!Array.isArray(path) || !path.every((part): part is string => typeof part === "string")) return null;
+
+  const queryKeyOptions = queryKey[1];
+  const input = isRecord(queryKeyOptions) && "input" in queryKeyOptions ? queryKeyOptions.input : undefined;
+  return { path, input };
+};
+
+const matchesDefinitionPath = (path: readonly string[], candidate: QueryKey) => {
+  const candidatePath = candidate[0];
+  return (
+    Array.isArray(candidatePath) &&
+    candidatePath.every((part, index) => typeof part === "string" && path[index] === part)
+  );
+};
+
+const matchesQueryInput = (input: unknown, scope: WidgetQueryMatcherScope) => {
+  if (input == null) return true;
+  if (Array.isArray(input)) {
+    return isEqual(input, scope.integrationIds) || containsValue(scope.options, input);
+  }
+
+  if (!isRecord(input)) {
+    return (
+      input === scope.itemId ||
+      input === scope.boardId ||
+      scope.integrationIds.includes(String(input)) ||
+      containsValue(scope.options, input)
+    );
+  }
+
+  for (const [key, value] of Object.entries(input)) {
+    if (key === "itemId") {
+      if (value !== scope.itemId) return false;
+      continue;
+    }
+    if (key === "boardId") {
+      if (value !== scope.boardId) return false;
+      continue;
+    }
+    if (key === "integrationId") {
+      if (!scope.integrationIds.includes(String(value))) return false;
+      continue;
+    }
+    if (key === "integrationIds") {
+      if (!isEqual(value, scope.integrationIds)) return false;
+      continue;
+    }
+
+    if (isIdentityKey(key) && !matchesAnyScopedValue(value, scope)) return false;
+  }
+
+  return true;
+};
+
+const matchesAnyScopedValue = (value: unknown, scope: WidgetQueryMatcherScope) =>
+  value === scope.itemId ||
+  value === scope.boardId ||
+  scope.integrationIds.includes(String(value)) ||
+  containsValue(scope.options, value);
+
+const isIdentityKey = (key: string) => key === "id" || key.endsWith("Id") || key.endsWith("Ids");
+
+const containsValue = (container: unknown, expected: unknown, seen = new WeakSet<object>()): boolean => {
+  if (isEqual(container, expected)) return true;
+  if (container === null || typeof container !== "object" || seen.has(container)) return false;
+  seen.add(container);
+
+  return Object.values(container).some((value) => containsValue(value, expected, seen));
+};
+
+const isEqual = (left: unknown, right: unknown) => hashKey([left]) === hashKey([right]);
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
diff --git a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.module.css b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.module.css
new file mode 100644
index 000000000..fe141c3f7
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.module.css
@@ -0,0 +1,4 @@
+.suppressTouchCallout {
+  user-select: none;
+  -webkit-touch-callout: none;
+}
diff --git a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
index 606bc5ece..cfd98717c 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
+++ b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
@@ -17,6 +17,10 @@ import { ItemSelectModal } from "../../items/item-select-modal";
 import { useBoardPermissions } from "../../permissions/client";
 import type { BoardPlacementHint } from "../../items/actions/create-item";
 import type { UseGridstackRefs } from "./use-gridstack";
+import classes from "./board-empty-space-context-menu.module.css";
+import { hasExceededLongPressMoveTolerance } from "./long-press";
+
+const suppressTouchCalloutClass = classes.suppressTouchCallout as string;
 
 interface MenuState {
   x: number;
@@ -39,18 +43,25 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
   const [isEditMode] = useEditMode();
   const [menu, setMenu] = useState<MenuState | null>(null);
   const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const longPressPointer = useRef<{ pointerId: number; x: number; y: number } | null>(null);
+  const touchGuardElement = useRef<HTMLDivElement | null>(null);
   const returnFocusRef = useRef<HTMLElement | null>(null);
 
   const enabled = hasChangeAccess && settings.enableRightClickOnWidgets;
   const clearLongPress = () => {
-    if (longPressTimer.current === null) return;
-    clearTimeout(longPressTimer.current);
-    longPressTimer.current = null;
+    if (longPressTimer.current !== null) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+    touchGuardElement.current?.classList.remove(suppressTouchCalloutClass);
+    touchGuardElement.current = null;
+    longPressPointer.current = null;
   };
 
   useEffect(
     () => () => {
       if (longPressTimer.current !== null) clearTimeout(longPressTimer.current);
+      touchGuardElement.current?.classList.remove(suppressTouchCalloutClass);
     },
     [],
   );
@@ -89,12 +100,31 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
     const placement = resolvePlacement(event.target, event.pageX, event.pageY);
     if (!placement) return;
     clearLongPress();
+    longPressPointer.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
+    touchGuardElement.current = event.currentTarget;
+    touchGuardElement.current.classList.add(suppressTouchCalloutClass);
     longPressTimer.current = setTimeout(() => {
       setMenu({ x: event.clientX, y: event.clientY, placement });
       navigator.vibrate?.(20);
     }, 500);
   };
 
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const pointer = longPressPointer.current;
+    if (
+      !pointer ||
+      pointer.pointerId !== event.pointerId ||
+      !hasExceededLongPressMoveTolerance(pointer, { x: event.clientX, y: event.clientY })
+    ) {
+      return;
+    }
+    clearLongPress();
+  };
+
+  const handlePointerEnd = (event: PointerEvent<HTMLDivElement>) => {
+    if (longPressPointer.current?.pointerId === event.pointerId) clearLongPress();
+  };
+
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (
       !enabled ||
@@ -134,10 +164,10 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
         onContextMenu={handleContextMenu}
         onKeyDown={handleKeyDown}
         onPointerDown={handlePointerDown}
-        onPointerMove={clearLongPress}
-        onPointerUp={clearLongPress}
-        onPointerCancel={clearLongPress}
-        onPointerLeave={clearLongPress}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerEnd}
+        onPointerCancel={handlePointerEnd}
+        onPointerLeave={handlePointerEnd}
       >
         {children}
       </Box>
diff --git a/apps/nextjs/src/components/board/sections/gridstack/long-press.spec.ts b/apps/nextjs/src/components/board/sections/gridstack/long-press.spec.ts
new file mode 100644
index 000000000..9ab4461e3
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/gridstack/long-press.spec.ts
@@ -0,0 +1,17 @@
+import { describe, expect, test } from "vitest";
+
+import { hasExceededLongPressMoveTolerance } from "./long-press";
+
+describe("hasExceededLongPressMoveTolerance", () => {
+  test("allows small touch jitter", () => {
+    expect(hasExceededLongPressMoveTolerance({ x: 100, y: 100 }, { x: 106, y: 106 })).toBe(false);
+  });
+
+  test("allows movement exactly at the threshold", () => {
+    expect(hasExceededLongPressMoveTolerance({ x: 100, y: 100 }, { x: 106, y: 108 })).toBe(false);
+  });
+
+  test("cancels a deliberate scroll gesture", () => {
+    expect(hasExceededLongPressMoveTolerance({ x: 100, y: 100 }, { x: 100, y: 116 })).toBe(true);
+  });
+});
diff --git a/apps/nextjs/src/components/board/sections/gridstack/long-press.ts b/apps/nextjs/src/components/board/sections/gridstack/long-press.ts
new file mode 100644
index 000000000..d7b94ad01
--- /dev/null
+++ b/apps/nextjs/src/components/board/sections/gridstack/long-press.ts
@@ -0,0 +1,7 @@
+export const longPressMoveTolerancePx = 10;
+
+export const hasExceededLongPressMoveTolerance = (
+  start: { x: number; y: number },
+  current: { x: number; y: number },
+  tolerance = longPressMoveTolerancePx,
+) => Math.hypot(current.x - start.x, current.y - start.y) > tolerance;
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index bf82259fb..4eaa687db 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -76,6 +76,7 @@ describe("Board advanced interactions", () => {
       await page.keyboard.down("Shift");
       await widget.hover();
       await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
+      await expect(advancedDialog).toHaveCSS("animation-name", "none");
       const advancedBounds = await advancedDialog.boundingBox();
       expect(advancedBounds?.width).toBeGreaterThanOrEqual(900);
       await expect(advancedDialog).toHaveAttribute("data-lifecycle-probe", "same-instance");
@@ -280,7 +281,7 @@ const touchAndHoldEmptyGridSpaceAsync = async (grid: Locator) => {
   const clientX = bounds.x + bounds.width - 16;
   const clientY = bounds.y + Math.min(24, bounds.height / 2);
   await grid.dispatchEvent("pointerdown", { pointerType: "touch", clientX, clientY });
-  await new Promise((resolve) => setTimeout(resolve, 550));
+  await new Promise((resolve) => setTimeout(resolve, 800));
   await grid.dispatchEvent("pointerup", { pointerType: "touch", clientX, clientY });
 };
 
@@ -310,7 +311,7 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
       id: iframeItemId,
       kind: "iframe",
       boardId,
-      options: stringify({ embedUrl: "https://example.com", allowScrolling: true }),
+      options: stringify({ embedUrl: "http://127.0.0.1:9", allowScrolling: true }),
       advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
     },
   ]);
diff --git a/packages/api/src/router/test/widgets/immich.spec.ts b/packages/api/src/router/test/widgets/immich.spec.ts
new file mode 100644
index 000000000..eec383aaa
--- /dev/null
+++ b/packages/api/src/router/test/widgets/immich.spec.ts
@@ -0,0 +1,76 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { integrations, integrationUserPermissions, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+
+import { immichRouter } from "../../widgets/immich";
+
+vi.hoisted(() => {
+  process.env.SKIP_ENV_VALIDATION = "true";
+});
+
+const mocks = vi.hoisted(() => ({
+  albumsHandler: vi.fn(),
+}));
+
+vi.mock("@homarr/request-handler/immich", () => ({
+  immichAlbumRequestHandler: { handler: vi.fn() },
+  immichStatsRequestHandler: { handler: vi.fn() },
+  immichAlbumsRequestHandler: {
+    handler: (_integration: unknown, input: unknown) => {
+      mocks.albumsHandler(input);
+      return { getDataAsync: async () => ({ data: [], timestamp: new Date() }) };
+    },
+  },
+}));
+
+const createSession = (userId: string): Session => ({
+  user: { id: userId, permissions: [], colorScheme: "light" },
+  expires: new Date().toISOString(),
+});
+
+const createCallerAsync = async () => {
+  const db = createDb();
+  const userId = createId();
+  const integrationId = createId();
+  await db.insert(users).values({ id: userId });
+  await db.insert(integrations).values({
+    id: integrationId,
+    kind: "immich",
+    name: "Immich",
+    url: "https://immich.example.com",
+  });
+  await db.insert(integrationUserPermissions).values({ integrationId, userId, permission: "use" });
+
+  return {
+    integrationId,
+    caller: immichRouter.createCaller({ db: db as Database, deviceType: undefined, session: createSession(userId) }),
+  };
+};
+
+describe("immichRouter.getAlbums", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  test("passes a validated limit to the cached request handler", async () => {
+    const { caller, integrationId } = await createCallerAsync();
+
+    await caller.getAlbums({ integrationId, limit: 50 });
+
+    expect(mocks.albumsHandler).toHaveBeenCalledWith({ limit: 50 });
+    await expect(caller.getAlbums({ integrationId, limit: 0 })).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    await expect(caller.getAlbums({ integrationId, limit: 501 })).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  test("keeps the limit optional for unbounded callers", async () => {
+    const { caller, integrationId } = await createCallerAsync();
+
+    await caller.getAlbums({ integrationId });
+
+    expect(mocks.albumsHandler).toHaveBeenCalledWith({ limit: undefined });
+  });
+});
diff --git a/packages/api/src/router/test/widgets/rssFeed.spec.ts b/packages/api/src/router/test/widgets/rssFeed.spec.ts
index 4773fa149..9e445a910 100644
--- a/packages/api/src/router/test/widgets/rssFeed.spec.ts
+++ b/packages/api/src/router/test/widgets/rssFeed.spec.ts
@@ -1,5 +1,5 @@
 import SuperJSON from "superjson";
-import { describe, expect, test } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import type { Session } from "@homarr/auth";
 import { createId } from "@homarr/common";
@@ -17,7 +17,18 @@ import { createDb } from "@homarr/db/test";
 import type { GroupPermissionKey } from "@homarr/definitions";
 
 import type { WidgetComponentProps } from "../../../../../widgets/src/definition";
-import { canAccessAllFeedsAsync, restrictUrlsAsync } from "../../widgets/rssFeed";
+import { canAccessAllFeedsAsync, restrictUrlsAsync, rssFeedRouter } from "../../widgets/rssFeed";
+
+const mocks = vi.hoisted(() => ({ logger: { warn: vi.fn() }, getFeed: vi.fn() }));
+
+vi.mock("@homarr/core/infrastructure/logs", () => ({ createLogger: () => mocks.logger }));
+vi.mock("@homarr/request-handler/rss-feeds", () => ({
+  rssFeedsRequestHandler: {
+    handler: (input: unknown) => ({ getDataAsync: async () => await mocks.getFeed(input) }),
+  },
+}));
+
+beforeEach(() => vi.clearAllMocks());
 
 const createSession = (permissions: GroupPermissionKey[] = []): Session => ({
   user: {
@@ -29,6 +40,32 @@ const createSession = (permissions: GroupPermissionKey[] = []): Session => ({
 });
 
 describe("rssFeedRouter", () => {
+  describe("getFeeds", () => {
+    test("redacts feed secrets from logs and returns a generic error when every feed fails", async () => {
+      const feedUrl = "https://user:password@example.com/feed?token=secret";
+      mocks.getFeed.mockRejectedValue(new Error(`Failed to fetch ${feedUrl}`));
+      const caller = rssFeedRouter.createCaller({
+        db: createDb(),
+        deviceType: undefined,
+        session: createSession(["board-create"]),
+      });
+
+      await expect(caller.getFeeds({ urls: [feedUrl], maximumAmountPosts: 5 })).rejects.toMatchObject({
+        code: "BAD_GATEWAY",
+        message: "All RSS feed requests failed",
+      });
+      expect(mocks.logger.warn).toHaveBeenCalledWith("RSS feed fetch failed", {
+        feedIndex: 0,
+        origin: "https://example.com",
+        errorType: "Error",
+      });
+      const logged = JSON.stringify(mocks.logger.warn.mock.calls);
+      expect(logged).not.toContain("password");
+      expect(logged).not.toContain("token");
+      expect(logged).not.toContain("secret");
+    });
+  });
+
   describe("canAccessAllFeedsAsync", () => {
     test("should return false for unauthenticated users", async () => {
       // Arrange
diff --git a/packages/api/src/router/test/widgets/timetable.spec.ts b/packages/api/src/router/test/widgets/timetable.spec.ts
index 7933b0d16..e51ca1bef 100644
--- a/packages/api/src/router/test/widgets/timetable.spec.ts
+++ b/packages/api/src/router/test/widgets/timetable.spec.ts
@@ -1,15 +1,18 @@
 import { stringify } from "superjson";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import type { Session } from "@homarr/auth";
 import { createId } from "@homarr/common";
 import type { Database } from "@homarr/db";
+import { eq } from "@homarr/db";
 import { boards, items, users } from "@homarr/db/schema";
 import { createDb } from "@homarr/db/test";
 
 import { timetableRouter } from "../../widgets/timetable";
 
-const mocks = vi.hoisted(() => ({ getTimetable: vi.fn(), searchStations: vi.fn() }));
+const mocks = vi.hoisted(() => ({ getTimetable: vi.fn(), searchStations: vi.fn(), lookup: vi.fn() }));
+
+vi.mock("node:dns/promises", () => ({ default: { lookup: mocks.lookup }, lookup: mocks.lookup }));
 
 vi.mock("@homarr/request-handler/timetable", () => ({
   timetableGetTimetableRequestHandler: {
@@ -30,6 +33,11 @@ vi.mock("@homarr/request-handler/timetable", () => ({
   },
 }));
 
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.lookup.mockResolvedValue([{ address: "8.8.8.8", family: 4 }]);
+});
+
 const createSession = (userId: string): Session => ({
   user: { id: userId, permissions: [], colorScheme: "light" },
   expires: new Date().toISOString(),
@@ -66,6 +74,14 @@ describe("timetableRouter source authorization", () => {
     });
   });
 
+  it("reports invalid timetable URLs as bad requests", async () => {
+    const caller = createCaller(createDb(), null);
+
+    await expect(
+      caller.searchStations({ baseUrl: "https://search.ch?redirect=/admin", query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
   it("loads a persisted private endpoint only through a viewable timetable item", async () => {
     const db = createDb();
     const baseUrl = "http://timetable.internal:8080";
@@ -89,14 +105,161 @@ describe("timetableRouter source authorization", () => {
     ).rejects.toMatchObject({ code: "NOT_FOUND" });
   });
 
-  it("allows board modifiers to search an unsaved self-hosted endpoint", async () => {
+  it("allows board modifiers to search an unsaved public endpoint", async () => {
     const db = createDb();
-    const baseUrl = "http://timetable.internal:8080";
+    const baseUrl = "https://timetable.example.com";
     const { boardId, ownerId } = await createTimetableItemAsync(db, { baseUrl: "https://search.ch", isPublic: false });
     const caller = createCaller(db, createSession(ownerId));
 
     await caller.searchStations({ baseUrl, boardId, query: "Bern" });
-    expect(mocks.searchStations).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl }));
+    expect(mocks.lookup).toHaveBeenCalledWith("timetable.example.com", { all: true, verbatim: true });
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(
+      expect.objectContaining({ baseUrl, pinnedAddresses: [{ address: "8.8.8.8", family: 4 }] }),
+    );
+  });
+
+  it.each([
+    "http://127.0.0.1:8080",
+    "http://timetable.internal:8080",
+    "http://[::1]:8080",
+    "http://[::ffff:127.0.0.1]:8080",
+    "http://[fd00::1]:8080",
+    "http://[64:ff9b::7f00:1]:8080",
+    "http://[2002:7f00:1::]:8080",
+  ])("blocks an unsaved private endpoint %s even for board modifiers", async (baseUrl) => {
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(caller.searchStations({ baseUrl, boardId, query: "Bern" })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("blocks an RFC 2765 IPv4-translated loopback address", async () => {
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(
+      caller.searchStations({ baseUrl: "http://[::ffff:0:7f00:1]:8080", boardId, query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("blocks an unsaved public hostname that resolves to a private address", async () => {
+    mocks.lookup.mockResolvedValueOnce([{ address: "10.0.0.8", family: 4 }]);
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(
+      caller.searchStations({ baseUrl: "https://timetable.example.com", boardId, query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("allows the exact saved private endpoint when item and board IDs match", async () => {
+    const db = createDb();
+    const baseUrl = "http://timetable.internal:8080";
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+
+    await createCaller(db, createSession(ownerId)).searchStations({ baseUrl, boardId, itemId, query: "Bern" });
+
+    expect(mocks.lookup).not.toHaveBeenCalled();
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(
+      expect.objectContaining({ baseUrl, pinnedAddresses: undefined }),
+    );
+  });
+
+  it("rejects an item ID that does not belong to the requested board", async () => {
+    const db = createDb();
+    const first = await createTimetableItemAsync(db, { baseUrl: "http://timetable.internal:8080", isPublic: false });
+    const second = await createTimetableItemAsync(db, { baseUrl: "https://search.ch", isPublic: false });
+
+    await expect(
+      createCaller(db, createSession(second.ownerId)).searchStations({
+        baseUrl: "http://timetable.internal:8080",
+        boardId: second.boardId,
+        itemId: first.itemId,
+        query: "Bern",
+      }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("blocks a changed private endpoint for an existing item", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "http://timetable.internal:8080",
+      isPublic: false,
+    });
+
+    await expect(
+      createCaller(db, createSession(ownerId)).searchStations({
+        baseUrl: "http://127.0.0.1:8080",
+        boardId,
+        itemId,
+        query: "Bern",
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("allows a changed public endpoint for an existing item and pins its address", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "http://timetable.internal:8080",
+      isPublic: false,
+    });
+    const baseUrl = "https://timetable.example.com";
+
+    await createCaller(db, createSession(ownerId)).searchStations({ baseUrl, boardId, itemId, query: "Bern" });
+
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(
+      expect.objectContaining({ baseUrl, pinnedAddresses: [{ address: "8.8.8.8", family: 4 }] }),
+    );
+  });
+
+  it("reports malformed saved widget options as server data corruption", async () => {
+    const db = createDb();
+    const { itemId } = await createTimetableItemAsync(db, { baseUrl: "https://search.ch" });
+    await db.update(items).set({ options: "{" }).where(eq(items.id, itemId));
+
+    await expect(
+      createCaller(db, null).getTimetable({
+        baseUrl: "https://search.ch",
+        itemId,
+        stationId: "station",
+        limit: 10,
+      }),
+    ).rejects.toMatchObject({ code: "INTERNAL_SERVER_ERROR", message: "Timetable widget configuration is invalid" });
+  });
+
+  it("reports an invalid saved timetable URL as server data corruption", async () => {
+    const db = createDb();
+    const { itemId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch?redirect=/admin",
+    });
+
+    await expect(
+      createCaller(db, null).getTimetable({
+        baseUrl: "https://search.ch",
+        itemId,
+        stationId: "station",
+        limit: 10,
+      }),
+    ).rejects.toMatchObject({ code: "INTERNAL_SERVER_ERROR", message: "Timetable widget configuration is invalid" });
   });
 
   it("does not treat public board view access as configuration access", async () => {
diff --git a/packages/api/src/router/widgets/firewall.ts b/packages/api/src/router/widgets/firewall.ts
index dbaa88b4f..fdeb77831 100644
--- a/packages/api/src/router/widgets/firewall.ts
+++ b/packages/api/src/router/widgets/firewall.ts
@@ -37,6 +37,7 @@ const queryFirewall = <
           summary: createFallback(),
           error: error instanceof Error ? error.message : "Integration request failed",
         }),
+        throwOnAllFailures: true,
       },
     ),
   );
diff --git a/packages/api/src/router/widgets/immich.ts b/packages/api/src/router/widgets/immich.ts
index aa917271f..136d0e111 100644
--- a/packages/api/src/router/widgets/immich.ts
+++ b/packages/api/src/router/widgets/immich.ts
@@ -34,9 +34,16 @@ export const immichRouter = createTRPCRouter({
       return data.data;
     }),
 
-  getAlbums: publicProcedure.concat(createImmichIntegrationMiddleware("query")).query(async ({ ctx }) => {
-    const innerHandler = immichAlbumsRequestHandler.handler(ctx.integration, {});
-    const data = await innerHandler.getDataAsync();
-    return data.data;
-  }),
+  getAlbums: publicProcedure
+    .input(
+      z.object({
+        limit: z.number().int().min(1).max(500).optional(),
+      }),
+    )
+    .concat(createImmichIntegrationMiddleware("query"))
+    .query(async ({ ctx, input }) => {
+      const innerHandler = immichAlbumsRequestHandler.handler(ctx.integration, { limit: input.limit });
+      const data = await innerHandler.getDataAsync();
+      return data.data;
+    }),
 });
diff --git a/packages/api/src/router/widgets/rssFeed.ts b/packages/api/src/router/widgets/rssFeed.ts
index 56fa10fd1..60250fe5d 100644
--- a/packages/api/src/router/widgets/rssFeed.ts
+++ b/packages/api/src/router/widgets/rssFeed.ts
@@ -1,3 +1,4 @@
+import { TRPCError } from "@trpc/server";
 import SuperJSON from "superjson";
 import { z } from "zod/v4";
 
@@ -13,6 +14,14 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const logger = createLogger({ module: "rssFeed" });
 
+const safeFeedLogContext = (url: string, feedIndex: number) => {
+  try {
+    return { feedIndex, origin: new URL(url).origin };
+  } catch {
+    return { feedIndex };
+  }
+};
+
 const feedsInput = z.object({
   urls: z.array(z.string()).max(100),
   maximumAmountPosts: z.number(),
@@ -35,14 +44,24 @@ export const rssFeedRouter = createTRPCRouter({
     );
 
     const failures = settled.filter((result) => result.status === "rejected");
+    settled.forEach((result, index) => {
+      if (result.status === "rejected") {
+        logger.warn("RSS feed fetch failed", {
+          ...safeFeedLogContext(urls[index] ?? "", index),
+          errorType: result.reason instanceof Error ? result.reason.name : typeof result.reason,
+        });
+      }
+    });
     if (settled.length > 0 && failures.length === settled.length) {
-      throw failures[0]?.reason;
+      throw new TRPCError({
+        code: "BAD_GATEWAY",
+        message: "All RSS feed requests failed",
+      });
     }
 
     return settled
-      .flatMap((result, index) => {
+      .flatMap((result) => {
         if (result.status === "fulfilled") return result.value.data.entries;
-        logger.warn("RSS feed fetch failed", { url: urls[index], error: result.reason });
         return [];
       })
       .toSorted((entryA, entryB) => {
diff --git a/packages/api/src/router/widgets/timetable.ts b/packages/api/src/router/widgets/timetable.ts
index 84f680382..e92757fc0 100644
--- a/packages/api/src/router/widgets/timetable.ts
+++ b/packages/api/src/router/widgets/timetable.ts
@@ -1,3 +1,5 @@
+import { lookup } from "node:dns/promises";
+import { BlockList, isIP } from "node:net";
 import { TRPCError } from "@trpc/server";
 import { parse } from "superjson";
 import z from "zod";
@@ -6,6 +8,7 @@ import type { Session } from "@homarr/auth";
 import type { Database } from "@homarr/db";
 import { and, eq } from "@homarr/db";
 import { boards, items } from "@homarr/db/schema";
+import type { TimetableResolvedAddress } from "@homarr/request-handler/timetable";
 import {
   timetableGetTimetableRequestHandler,
   timetableSearchStationsRequestHandler,
@@ -21,28 +24,184 @@ const timetableSourceSchema = z.object({
   itemId: z.string().max(100).optional(),
   boardId: z.string().max(100).optional(),
 });
+const timetableOptionsSchema = z.object({ baseUrl: z.string().optional() }).passthrough();
+
+const blockedTimetableIpv4Addresses = new BlockList();
+const blockedTimetableIpv6Addresses = new BlockList();
+const blockedTimetableSubnets = [
+  ["0.0.0.0", 8, "ipv4"],
+  ["10.0.0.0", 8, "ipv4"],
+  ["100.64.0.0", 10, "ipv4"],
+  ["127.0.0.0", 8, "ipv4"],
+  ["169.254.0.0", 16, "ipv4"],
+  ["172.16.0.0", 12, "ipv4"],
+  ["192.0.0.0", 24, "ipv4"],
+  ["192.0.2.0", 24, "ipv4"],
+  ["192.168.0.0", 16, "ipv4"],
+  ["198.18.0.0", 15, "ipv4"],
+  ["198.51.100.0", 24, "ipv4"],
+  ["203.0.113.0", 24, "ipv4"],
+  ["224.0.0.0", 4, "ipv4"],
+  ["240.0.0.0", 4, "ipv4"],
+  ["::", 96, "ipv6"],
+  ["::ffff:0:0", 96, "ipv6"],
+  ["::ffff:0:0:0", 96, "ipv6"],
+  ["64:ff9b::", 96, "ipv6"],
+  ["64:ff9b:1::", 48, "ipv6"],
+  ["100::", 64, "ipv6"],
+  ["2001::", 32, "ipv6"],
+  ["2001:2::", 48, "ipv6"],
+  ["2001:10::", 28, "ipv6"],
+  ["2001:db8::", 32, "ipv6"],
+  ["2002::", 16, "ipv6"],
+  ["fc00::", 7, "ipv6"],
+  ["fe80::", 10, "ipv6"],
+  ["fec0::", 10, "ipv6"],
+  ["ff00::", 8, "ipv6"],
+] as const;
+
+for (const [network, prefix, family] of blockedTimetableSubnets) {
+  const blockList = family === "ipv4" ? blockedTimetableIpv4Addresses : blockedTimetableIpv6Addresses;
+  blockList.addSubnet(network, prefix, family);
+}
+
+const normalizeBaseUrlOrThrowBadRequest = (baseUrl: string) => {
+  try {
+    return normalizeTimetableBaseUrl(baseUrl);
+  } catch (cause) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: cause instanceof Error ? cause.message : "Invalid timetable base URL",
+      cause,
+    });
+  }
+};
+
+const throwInvalidSavedTimetableConfiguration = (cause: unknown): never => {
+  throw new TRPCError({
+    code: "INTERNAL_SERVER_ERROR",
+    message: "Timetable widget configuration is invalid",
+    cause,
+  });
+};
+
+const parseSavedTimetableOptions = (serializedOptions: string) => {
+  try {
+    return timetableOptionsSchema.parse(parse<unknown>(serializedOptions));
+  } catch (cause) {
+    return throwInvalidSavedTimetableConfiguration(cause);
+  }
+};
+
+const normalizeSavedTimetableBaseUrl = (baseUrl: string) => {
+  try {
+    return normalizeTimetableBaseUrl(baseUrl);
+  } catch (cause) {
+    return throwInvalidSavedTimetableConfiguration(cause);
+  }
+};
+
+const normalizeHostname = (hostname: string) => {
+  const withoutBrackets = hostname.startsWith("[") && hostname.endsWith("]") ? hostname.slice(1, -1) : hostname;
+  return withoutBrackets.toLowerCase().replace(/\.$/, "");
+};
+
+const isBlockedTimetableAddress = (address: string, family: number) => {
+  return family === 6
+    ? blockedTimetableIpv6Addresses.check(address, "ipv6")
+    : blockedTimetableIpv4Addresses.check(address, "ipv4");
+};
+
+const resolvePublicTimetableAddressesAsync = async (baseUrl: string): Promise<TimetableResolvedAddress[]> => {
+  const hostname = normalizeHostname(new URL(baseUrl).hostname);
+  const hostnameFamily = isIP(hostname);
+  const isInternalHostname =
+    hostnameFamily === 0 &&
+    (!hostname.includes(".") ||
+      hostname === "localhost" ||
+      hostname.endsWith(".localhost") ||
+      hostname.endsWith(".local") ||
+      hostname.endsWith(".internal") ||
+      hostname.endsWith(".lan") ||
+      hostname.endsWith(".home.arpa"));
+
+  if (isInternalHostname) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "Timetable base URL must use a public host" });
+  }
+
+  let addresses: TimetableResolvedAddress[];
+  try {
+    const resolvedAddresses =
+      hostnameFamily === 0
+        ? await lookup(hostname, { all: true, verbatim: true })
+        : [{ address: hostname, family: hostnameFamily }];
+    addresses = resolvedAddresses.filter(
+      (entry): entry is TimetableResolvedAddress => entry.family === 4 || entry.family === 6,
+    );
+  } catch (cause) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Timetable base URL host could not be resolved",
+      cause,
+    });
+  }
+
+  if (addresses.length === 0 || addresses.some(({ address, family }) => isBlockedTimetableAddress(address, family))) {
+    throw new TRPCError({
+      code: "BAD_REQUEST",
+      message: "Timetable base URL must not target a private or internal address",
+    });
+  }
+
+  return addresses;
+};
+
+const getSavedTimetableBaseUrl = (serializedOptions: string) => {
+  const options = parseSavedTimetableOptions(serializedOptions);
+  return normalizeSavedTimetableBaseUrl(options.baseUrl ?? DEFAULT_TIMETABLE_BASE_URL);
+};
+
+interface ResolvedTimetableSource {
+  baseUrl: string;
+  pinnedAddresses?: TimetableResolvedAddress[];
+}
 
 const resolveTimetableBaseUrlAsync = async (
   ctx: { db: Database; session: Session | null },
   input: z.infer<typeof timetableSourceSchema>,
   allowBoardConfiguration = false,
-) => {
-  const requestedBaseUrl = normalizeTimetableBaseUrl(input.baseUrl);
+): Promise<ResolvedTimetableSource> => {
+  const requestedBaseUrl = normalizeBaseUrlOrThrowBadRequest(input.baseUrl);
   if (allowBoardConfiguration) {
     if (input.boardId) {
+      let savedOptions: string | undefined;
+      if (input.itemId) {
+        const item = await ctx.db.query.items.findFirst({
+          where: and(eq(items.id, input.itemId), eq(items.kind, "timetable"), eq(items.boardId, input.boardId)),
+        });
+        if (!item) throw new TRPCError({ code: "NOT_FOUND", message: "Timetable widget not found" });
+        savedOptions = item.options;
+      }
+
       await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
-      return requestedBaseUrl;
+      const savedBaseUrl = savedOptions === undefined ? undefined : getSavedTimetableBaseUrl(savedOptions);
+      if (requestedBaseUrl === savedBaseUrl || requestedBaseUrl === DEFAULT_TIMETABLE_BASE_URL) {
+        return { baseUrl: requestedBaseUrl };
+      }
+
+      const pinnedAddresses = await resolvePublicTimetableAddressesAsync(requestedBaseUrl);
+      return { baseUrl: requestedBaseUrl, pinnedAddresses };
     }
     if (requestedBaseUrl !== DEFAULT_TIMETABLE_BASE_URL) {
       throw new TRPCError({ code: "FORBIDDEN", message: "Board modify access is required for this endpoint" });
     }
-    return DEFAULT_TIMETABLE_BASE_URL;
+    return { baseUrl: DEFAULT_TIMETABLE_BASE_URL };
   }
   if (!input.itemId) {
     if (requestedBaseUrl !== DEFAULT_TIMETABLE_BASE_URL) {
       throw new TRPCError({ code: "FORBIDDEN", message: "A saved timetable widget is required for this endpoint" });
     }
-    return DEFAULT_TIMETABLE_BASE_URL;
+    return { baseUrl: DEFAULT_TIMETABLE_BASE_URL };
   }
 
   const item = await ctx.db.query.items.findFirst({
@@ -51,14 +210,11 @@ const resolveTimetableBaseUrlAsync = async (
   if (!item) throw new TRPCError({ code: "NOT_FOUND", message: "Timetable widget not found" });
 
   await throwIfActionForbiddenAsync(ctx, eq(boards.id, item.boardId), "view");
-  const options = parse<Record<string, unknown>>(item.options);
-  const savedBaseUrl = normalizeTimetableBaseUrl(
-    typeof options.baseUrl === "string" ? options.baseUrl : DEFAULT_TIMETABLE_BASE_URL,
-  );
+  const savedBaseUrl = getSavedTimetableBaseUrl(item.options);
   if (requestedBaseUrl !== savedBaseUrl) {
     throw new TRPCError({ code: "FORBIDDEN", message: "Timetable URL does not match the saved widget" });
   }
-  return savedBaseUrl;
+  return { baseUrl: savedBaseUrl };
 };
 
 export const timetableRouter = createTRPCRouter({
@@ -70,7 +226,7 @@ export const timetableRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      const baseUrl = await resolveTimetableBaseUrlAsync(ctx, input);
+      const { baseUrl } = await resolveTimetableBaseUrlAsync(ctx, input);
       const { itemId: _itemId, boardId: _boardId, ...handlerInput } = input;
       const { data } = await timetableGetTimetableRequestHandler.handler({ ...handlerInput, baseUrl }).getDataAsync();
       return data;
@@ -82,9 +238,11 @@ export const timetableRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      const baseUrl = await resolveTimetableBaseUrlAsync(ctx, input, true);
+      const { baseUrl, pinnedAddresses } = await resolveTimetableBaseUrlAsync(ctx, input, true);
       const { itemId: _itemId, boardId: _boardId, ...handlerInput } = input;
-      const { data } = await timetableSearchStationsRequestHandler.handler({ ...handlerInput, baseUrl }).getDataAsync();
+      const { data } = await timetableSearchStationsRequestHandler
+        .handler({ ...handlerInput, baseUrl, pinnedAddresses })
+        .getDataAsync();
       return data;
     }),
 });
diff --git a/packages/api/src/settle-integrations.ts b/packages/api/src/settle-integrations.ts
index 773117877..ec16b955d 100644
--- a/packages/api/src/settle-integrations.ts
+++ b/packages/api/src/settle-integrations.ts
@@ -1,3 +1,5 @@
+import { TRPCError } from "@trpc/server";
+
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 
@@ -50,7 +52,11 @@ export async function settleIntegrationQueries<TIntegration extends IntegrationL
     errors.length > 0 &&
     (results.length === 0 || (options?.throwOnAllFailures === true && errors.length === integrations.length))
   ) {
-    throw errors[0];
+    throw new TRPCError({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "All integration queries failed",
+      cause: errors[0],
+    });
   }
 
   return results;
diff --git a/packages/api/src/test/settle-integrations.spec.ts b/packages/api/src/test/settle-integrations.spec.ts
index 70024da7f..372c2889e 100644
--- a/packages/api/src/test/settle-integrations.spec.ts
+++ b/packages/api/src/test/settle-integrations.spec.ts
@@ -1,4 +1,4 @@
-import { describe, expect, test, vi } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
 
 import { settleIntegrationQueries } from "../settle-integrations";
 
@@ -19,6 +19,8 @@ const integrations = [
   { id: "second", name: "Second", kind: "jellyfin" },
 ];
 
+beforeEach(() => vi.clearAllMocks());
+
 describe("settleIntegrationQueries", () => {
   test("returns an empty result when no integrations are configured", async () => {
     await expect(settleIntegrationQueries([], vi.fn())).resolves.toEqual([]);
@@ -35,9 +37,14 @@ describe("settleIntegrationQueries", () => {
   });
 
   test("rejects when every integration fails", async () => {
-    const error = new Error("Integration unavailable");
+    const error = new Error("Integration unavailable with token=secret");
 
-    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error))).rejects.toBe(error);
+    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error))).rejects.toMatchObject({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "All integration queries failed",
+      cause: error,
+    });
+    expect(mocks.logger.warn).toHaveBeenCalledTimes(integrations.length);
   });
 
   test("uses configured fallbacks when every integration fails", async () => {
@@ -62,6 +69,10 @@ describe("settleIntegrationQueries", () => {
         options,
       ),
     ).resolves.toEqual(["First", "Second"]);
-    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error), options)).rejects.toBe(error);
+    await expect(settleIntegrationQueries(integrations, () => Promise.reject(error), options)).rejects.toMatchObject({
+      code: "INTERNAL_SERVER_ERROR",
+      message: "All integration queries failed",
+      cause: error,
+    });
   });
 });
diff --git a/packages/core/src/infrastructure/http/request.ts b/packages/core/src/infrastructure/http/request.ts
index b3c3ea354..ab0fdaf2f 100644
--- a/packages/core/src/infrastructure/http/request.ts
+++ b/packages/core/src/infrastructure/http/request.ts
@@ -1,8 +1,9 @@
 import type { AgentOptions } from "node:https";
 import { Agent as HttpsAgent } from "node:https";
+import type { LookupFunction } from "node:net";
 import { checkServerIdentity } from "node:tls";
 import axios from "axios";
-import type { Agent as UndiciAgent, RequestInfo, RequestInit, Response } from "undici";
+import type { EnvHttpProxyAgent as UndiciEnvHttpProxyAgent, RequestInfo, RequestInit, Response } from "undici";
 import { fetch } from "undici";
 
 import {
@@ -30,17 +31,25 @@ export const createCustomCheckServerIdentity = (
 };
 
 export const createCertificateAgentAsync = async (
-  override?: {
+  override?: Partial<{
     ca: string | string[];
     checkServerIdentity: typeof checkServerIdentity;
-  },
-  agentOptions?: Pick<UndiciAgent.Options, "bodyTimeout">,
+    lookup: LookupFunction;
+  }>,
+  agentOptions?: Pick<
+    UndiciEnvHttpProxyAgent.Options,
+    "autoSelectFamily" | "bodyTimeout" | "httpProxy" | "httpsProxy" | "noProxy"
+  >,
 ) => {
+  const ca = override?.ca ?? (await getAllTrustedCertificatesAsync());
+  const identityCheck =
+    override?.checkServerIdentity ?? createCustomCheckServerIdentity(await getTrustedCertificateHostnamesAsync());
   return new UndiciHttpAgent({
     ...agentOptions,
-    connect: override ?? {
-      ca: await getAllTrustedCertificatesAsync(),
-      checkServerIdentity: createCustomCheckServerIdentity(await getTrustedCertificateHostnamesAsync()),
+    connect: {
+      ca,
+      checkServerIdentity: identityCheck,
+      ...(override?.lookup ? { lookup: override.lookup } : {}),
     },
   });
 };
diff --git a/packages/integrations/src/overseerr/overseerr-integration.spec.ts b/packages/integrations/src/overseerr/overseerr-integration.spec.ts
index 1fc4484d0..2f021f608 100644
--- a/packages/integrations/src/overseerr/overseerr-integration.spec.ts
+++ b/packages/integrations/src/overseerr/overseerr-integration.spec.ts
@@ -25,6 +25,15 @@ describe("Overseerr media request actions", () => {
   ])("rejects %s when Overseerr returns a non-success response", async (_action, run) => {
     mockFetch.mockResolvedValue(new Response(null, { status: 500 }));
 
-    await expect(run()).rejects.toThrow("Response from integration did not indicate success");
+    await expect(run()).rejects.toMatchObject({
+      name: "IntegrationResponseError",
+      message: "Response from integration did not indicate success",
+      cause: {
+        name: "ResponseError",
+        message: "Response did not indicate success",
+        statusCode: 500,
+      },
+    });
+    expect(mockFetch).toHaveBeenCalledOnce();
   });
 });
diff --git a/packages/request-handler/src/immich.spec.ts b/packages/request-handler/src/immich.spec.ts
new file mode 100644
index 000000000..a8739587f
--- /dev/null
+++ b/packages/request-handler/src/immich.spec.ts
@@ -0,0 +1,50 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import { immichAlbumsRequestHandler } from "./immich";
+
+const mocks = vi.hoisted(() => ({
+  createIntegrationAsync: vi.fn(),
+}));
+
+vi.mock("@homarr/integrations", () => ({
+  createIntegrationAsync: mocks.createIntegrationAsync,
+}));
+
+const integration = {
+  id: "immich-integration",
+  kind: "immich",
+} as Parameters<typeof immichAlbumsRequestHandler.handler>[0];
+
+const albums = [
+  { id: "upstream-first", albumName: "Zebra", assetCount: 1 },
+  { id: "second-b", albumName: "Beta", assetCount: 10 },
+  { id: "second-a", albumName: "Alpha", assetCount: 10 },
+];
+
+describe("immichAlbumsRequestHandler", () => {
+  beforeEach(() => {
+    immichAlbumsRequestHandler.invalidateCache();
+    mocks.createIntegrationAsync.mockReset();
+  });
+
+  test("sorts deterministically before caching a limited response", async () => {
+    const getAlbumsAsync = vi.fn().mockResolvedValue(albums);
+    mocks.createIntegrationAsync.mockResolvedValue({ getAlbumsAsync });
+
+    const first = await immichAlbumsRequestHandler.handler(integration, { limit: 2 }).getDataAsync();
+    const cached = await immichAlbumsRequestHandler.handler(integration, { limit: 2 }).getDataAsync();
+
+    expect(first.data.map(({ id }) => id)).toStrictEqual(["second-a", "second-b"]);
+    expect(cached.data).toStrictEqual(first.data);
+    expect(getAlbumsAsync).toHaveBeenCalledOnce();
+  });
+
+  test("preserves upstream order when no limit is requested", async () => {
+    const getAlbumsAsync = vi.fn().mockResolvedValue(albums);
+    mocks.createIntegrationAsync.mockResolvedValue({ getAlbumsAsync });
+
+    const result = await immichAlbumsRequestHandler.handler(integration, {}).getDataAsync();
+
+    expect(result.data).toStrictEqual(albums);
+  });
+});
diff --git a/packages/request-handler/src/immich.ts b/packages/request-handler/src/immich.ts
index a6e2a996c..bc93eb83c 100644
--- a/packages/request-handler/src/immich.ts
+++ b/packages/request-handler/src/immich.ts
@@ -22,14 +22,27 @@ export const immichAlbumsRequestHandler = createIntegrationRequestHandler<
     assetCount: number;
   }[],
   IntegrationKindByCategory<"photoService">,
-  Record<string, never>
+  { limit?: number }
 >({
-  async requestAsync(integration) {
+  async requestAsync(integration, input) {
     const integrationInstance = await createIntegrationAsync(integration);
-    return await integrationInstance.getAlbumsAsync();
+    const albums = await integrationInstance.getAlbumsAsync();
+
+    if (input.limit === undefined) return albums;
+
+    return albums
+      .toSorted(
+        (left, right) =>
+          right.assetCount - left.assetCount ||
+          compareText(left.albumName, right.albumName) ||
+          compareText(left.id, right.id),
+      )
+      .slice(0, input.limit);
   },
 });
 
+const compareText = (left: string, right: string) => (left < right ? -1 : left > right ? 1 : 0);
+
 export const immichAlbumRequestHandler = createIntegrationRequestHandler<
   ImmichAlbum,
   IntegrationKindByCategory<"photoService">,
diff --git a/packages/request-handler/src/timetable.spec.ts b/packages/request-handler/src/timetable.spec.ts
index cb08cb313..b0185b775 100644
--- a/packages/request-handler/src/timetable.spec.ts
+++ b/packages/request-handler/src/timetable.spec.ts
@@ -1,16 +1,25 @@
 import { Response } from "undici";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+import { createCertificateAgentAsync, fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 
 import { timetableGetTimetableRequestHandler, timetableSearchStationsRequestHandler } from "./timetable";
 import { normalizeTimetableBaseUrl, readBoundedTimetableJsonAsync } from "./timetable-url";
 
-vi.mock("@homarr/core/infrastructure/http", () => ({ fetchWithTrustedCertificatesAsync: vi.fn() }));
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  createCertificateAgentAsync: vi.fn(),
+  fetchWithTrustedCertificatesAsync: vi.fn(),
+}));
 
 const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
+const mockCreateCertificateAgent = vi.mocked(createCertificateAgentAsync);
+const mockCloseDispatcher = vi.fn();
+const mockDispatcher = { close: mockCloseDispatcher };
 
-beforeEach(() => vi.clearAllMocks());
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockCreateCertificateAgent.mockResolvedValue(mockDispatcher as never);
+});
 
 describe("normalizeTimetableBaseUrl", () => {
   it("normalizes an HTTP endpoint", () => {
@@ -55,6 +64,58 @@ describe("timetable response bounds", () => {
     );
   });
 
+  it("pins the vetted address into a direct connection without changing the request hostname", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(JSON.stringify([{ id: "station", label: "Station", iconclass: "train" }])),
+    );
+    const pinnedAddresses = [
+      { address: "93.184.216.34", family: 4 as const },
+      { address: "2606:2800:220:1:248:1893:25c8:1946", family: 6 as const },
+    ];
+
+    await timetableSearchStationsRequestHandler
+      .handler({
+        baseUrl: "https://timetable.example.com",
+        query: "pinned-stations",
+        pinnedAddresses,
+      })
+      .getDataAsync();
+
+    expect(mockCreateCertificateAgent).toHaveBeenCalledWith(
+      { lookup: expect.any(Function) },
+      {
+        autoSelectFamily: true,
+        bodyTimeout: 10_000,
+        httpProxy: "",
+        httpsProxy: "",
+        noProxy: "*",
+      },
+    );
+    const requestUrl = mockFetch.mock.calls[0]?.[0];
+    expect(new URL(String(requestUrl)).hostname).toBe("timetable.example.com");
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({ dispatcher: mockDispatcher, redirect: "error" }),
+    );
+
+    const pinnedLookup = mockCreateCertificateAgent.mock.calls[0]?.[0]?.lookup;
+    expect(pinnedLookup).toBeTypeOf("function");
+    if (!pinnedLookup) throw new Error("Expected a pinned lookup function");
+
+    const lookupCallback = vi.fn();
+    pinnedLookup("timetable.example.com", { all: true }, lookupCallback);
+    expect(lookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+
+    const repeatedLookupCallback = vi.fn();
+    pinnedLookup("timetable.example.com", { all: true }, repeatedLookupCallback);
+    expect(repeatedLookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+
+    const unexpectedHostCallback = vi.fn();
+    pinnedLookup("different.example.com", { all: true }, unexpectedHostCallback);
+    expect(unexpectedHostCallback.mock.calls[0]?.[0]).toMatchObject({ code: "ENOTFOUND" });
+    expect(mockCloseDispatcher).toHaveBeenCalledOnce();
+  });
+
   it("never caches more departures than requested", async () => {
     mockFetch.mockResolvedValue(
       new Response(
diff --git a/packages/request-handler/src/timetable.ts b/packages/request-handler/src/timetable.ts
index b55a688f7..e8144d435 100644
--- a/packages/request-handler/src/timetable.ts
+++ b/packages/request-handler/src/timetable.ts
@@ -1,7 +1,8 @@
+import type { LookupFunction } from "node:net";
 import { z } from "zod/v4";
 
 import { ResponseError } from "@homarr/common/server";
-import { fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
+import { createCertificateAgentAsync, fetchWithTrustedCertificatesAsync } from "@homarr/core/infrastructure/http";
 
 import { createRequestHandler } from "./lib/request-handler";
 import { normalizeTimetableBaseUrl, readBoundedTimetableJsonAsync } from "./timetable-url";
@@ -36,12 +37,17 @@ const MAX_STATION_RESULTS = 100;
 const MAX_TIMETABLE_ENTRIES = 100;
 const timetableFetchOptions = { redirect: "error", timeout: 10_000, bodyTimeout: 10_000 } as const;
 
+export interface TimetableResolvedAddress {
+  address: string;
+  family: 4 | 6;
+}
+
 export const timetableSearchStationsRequestHandler = createRequestHandler<
   Station[],
-  { baseUrl: string; query: string }
+  { baseUrl: string; query: string; pinnedAddresses?: TimetableResolvedAddress[] }
 >({
   async requestAsync(input) {
-    return await searchStationsAsync(input.baseUrl, input.query);
+    return await searchStationsAsync(input.baseUrl, input.query, input.pinnedAddresses);
   },
   cacheTtlMs: 24 * 60 * 60 * 1000,
 });
@@ -64,19 +70,73 @@ const buildUrl = (baseUrl: string, path: `/${string}`, queryParams: Record<strin
   return url.toString();
 };
 
-const searchStationsAsync = async (baseUrl: string, query: string): Promise<Station[]> => {
-  const response = await fetchWithTrustedCertificatesAsync(
-    buildUrl(baseUrl, "/timetable/api/completion.json", { term: query, show_ids: 1, nofavorites: 1 }),
-    timetableFetchOptions,
-  );
-  if (!response.ok) throw new ResponseError(response);
+const normalizeLookupHostname = (hostname: string) =>
+  hostname
+    .replace(/^\[(.*)\]$/, "$1")
+    .toLowerCase()
+    .replace(/\.$/, "");
 
-  const body = await readBoundedTimetableJsonAsync(response);
-  const data = await searchSchema.parseAsync(Array.isArray(body) ? body.slice(0, MAX_STATION_RESULTS) : body);
-  return data
-    .filter((item) => supportedStationTypes.some((type) => item.iconclass.endsWith(type)))
-    .map((item) => (item.id !== undefined ? { id: item.id, name: item.label } : null))
-    .filter((item) => item !== null);
+const createPinnedLookup = (baseUrl: string, addresses: TimetableResolvedAddress[]): LookupFunction => {
+  const expectedHostname = normalizeLookupHostname(new URL(baseUrl).hostname);
+
+  return (hostname, options, callback) => {
+    const requestedFamily = options.family === 4 || options.family === 6 ? options.family : undefined;
+    const candidates = requestedFamily ? addresses.filter(({ family }) => family === requestedFamily) : addresses;
+    if (normalizeLookupHostname(hostname) !== expectedHostname || candidates.length === 0) {
+      const error = new Error("Pinned timetable address is unavailable") as NodeJS.ErrnoException;
+      error.code = "ENOTFOUND";
+      callback(error, []);
+      return;
+    }
+
+    if (options.all) {
+      callback(null, candidates);
+      return;
+    }
+
+    const selected = candidates[0];
+    if (!selected) return callback(new Error("Pinned timetable address is unavailable"), []);
+    callback(null, selected.address, selected.family);
+  };
+};
+
+const createPinnedTimetableDispatcherAsync = async (baseUrl: string, addresses: TimetableResolvedAddress[]) => {
+  // Proxies resolve CONNECT targets independently, which would defeat DNS pinning. Force this security-sensitive
+  // configuration request to connect directly. The original URL remains unchanged for the Host header and TLS SNI.
+  return await createCertificateAgentAsync(
+    { lookup: createPinnedLookup(baseUrl, addresses) },
+    {
+      autoSelectFamily: addresses.length > 1,
+      bodyTimeout: timetableFetchOptions.bodyTimeout,
+      httpProxy: "",
+      httpsProxy: "",
+      noProxy: "*",
+    },
+  );
+};
+
+const searchStationsAsync = async (
+  baseUrl: string,
+  query: string,
+  pinnedAddresses?: TimetableResolvedAddress[],
+): Promise<Station[]> => {
+  const dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  try {
+    const response = await fetchWithTrustedCertificatesAsync(
+      buildUrl(baseUrl, "/timetable/api/completion.json", { term: query, show_ids: 1, nofavorites: 1 }),
+      { ...timetableFetchOptions, dispatcher },
+    );
+    if (!response.ok) throw new ResponseError(response);
+
+    const body = await readBoundedTimetableJsonAsync(response);
+    const data = await searchSchema.parseAsync(Array.isArray(body) ? body.slice(0, MAX_STATION_RESULTS) : body);
+    return data
+      .filter((item) => supportedStationTypes.some((type) => item.iconclass.endsWith(type)))
+      .map((item) => (item.id !== undefined ? { id: item.id, name: item.label } : null))
+      .filter((item) => item !== null);
+  } finally {
+    await dispatcher?.close();
+  }
 };
 
 const getTimetableAsync = async (
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index dc2853b49..4ee2e61ae 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -3712,6 +3712,9 @@
       "error": {
         "internalServerError": "Unable to get data from firewall"
       },
+      "empty": {
+        "noInterfaces": "No network interface data yet"
+      },
       "versionUnknown": "Unknown version",
       "metricAccessible": "{metric}: {value}%, {status}",
       "status": {
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index aa3dad356..2e8b192ff 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -69,7 +69,7 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
         ))}
         position="right-start"
         multiline
-        disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode}
+        disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode || isAdvanced}
         styles={{ tooltip: { maxWidth: 300 } }}
       >
         <Flex
diff --git a/packages/widgets/src/app/index.ts b/packages/widgets/src/app/index.ts
index 7755ac105..2b03f0e99 100644
--- a/packages/widgets/src/app/index.ts
+++ b/packages/widgets/src/app/index.ts
@@ -15,7 +15,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("app", {
   icon: IconApps,
-  queryKeys: [[["app", "byId"]], [["widget", "app"]]],
+  queryKeys: [[["app", "byId"]], [["widget", "app", "ping"]]],
   createOptions(settings) {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx
index 50b213257..5dff480dd 100644
--- a/packages/widgets/src/archive-team-warrior/component.tsx
+++ b/packages/widgets/src/archive-team-warrior/component.tsx
@@ -5,7 +5,7 @@ import { Avatar, Badge, Card, Group, ScrollArea, SimpleGrid, Stack, Text } from
 import { clientApi } from "@homarr/api/client";
 import { formatByteRate } from "@homarr/common";
 import { getIconUrl } from "@homarr/definitions";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 
@@ -47,6 +47,7 @@ const ArchiveTeamWarriorWidgetContent = ({
   isAdvanced: boolean;
 }) => {
   const t = useScopedI18n("widget.archiveTeamWarrior");
+  const locale = useCurrentLocale();
   const [data] = clientApi.widget.archiveTeamWarrior.getStatus.useSuspenseQuery({ integrationId });
 
   const status = data.status;
@@ -96,7 +97,7 @@ const ArchiveTeamWarriorWidgetContent = ({
               {t("runnerStatus", { status: t(`status.${getStatusKey(status.runnerStatus ?? status.status)}`) })}
             </Text>
             <Text size="xs" c="dimmed">
-              {t("updatedAt", { date: new Date(status.updatedAt).toLocaleString() })}
+              {t("updatedAt", { date: new Date(status.updatedAt).toLocaleString(locale) })}
             </Text>
           </Group>
           <ScrollArea style={{ flex: 1 }}>
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index d31aca8fe..ad246613f 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -8,6 +8,7 @@ import type { AudiobookshelfDashboardData } from "@homarr/integrations/types";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { setWidgetRuntimeQueries } from "../definition";
 import { AudioStatsContent } from "./audio-stats-content";
 
 export default function AudioStatsWidget({
@@ -16,14 +17,19 @@ export default function AudioStatsWidget({
   width,
   height,
   displayMode = "compact",
+  widgetStateRef,
 }: WidgetComponentProps<"audioStats">) {
-  const { data: response } = clientApi.widget.audioStats.getStats.useQuery({
-    integrationId: integrationIds[0] ?? "",
+  const statsInput = { integrationId: integrationIds[0] ?? "" };
+  const { data: response } = clientApi.widget.audioStats.getStats.useQuery(statsInput);
+  const streamsInput = { integrationIds, showOnlyPlaying: false };
+  const streamsEnabled = displayMode === "advanced" && response?.kind === "navidrome";
+  const { data: streamResults = [] } = clientApi.widget.mediaServer.getCurrentStreams.useQuery(streamsInput, {
+    enabled: streamsEnabled,
   });
-  const { data: streamResults = [] } = clientApi.widget.mediaServer.getCurrentStreams.useQuery(
-    { integrationIds, showOnlyPlaying: false },
-    { enabled: displayMode === "advanced" && response?.kind === "navidrome" },
-  );
+  setWidgetRuntimeQueries(widgetStateRef, [
+    { path: ["widget", "audioStats", "getStats"], input: statsInput },
+    ...(streamsEnabled ? [{ path: ["widget", "mediaServer", "getCurrentStreams"], input: streamsInput }] : []),
+  ]);
 
   if (!response) return <WidgetEmptyState />;
 
diff --git a/packages/widgets/src/audio-stats/index.ts b/packages/widgets/src/audio-stats/index.ts
index c5783fb89..a21e70278 100644
--- a/packages/widgets/src/audio-stats/index.ts
+++ b/packages/widgets/src/audio-stats/index.ts
@@ -1,6 +1,6 @@
 import { IconHeadphones, IconServerOff } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 const hideUnlessNavidrome = {
@@ -13,7 +13,8 @@ const hideUnlessAudiobookshelf = {
 
 export const { definition, componentLoader } = createWidgetDefinition("audioStats", {
   icon: IconHeadphones,
-  queryKeys: [[["widget", "audioStats"]], [["widget", "mediaServer"]]],
+  queryKeys: [[["widget", "audioStats", "getStats"]], [["widget", "mediaServer", "getCurrentStreams"]]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   supportedIntegrations: ["navidrome", "audiobookshelf"],
   integrationsRequired: true,
   maxIntegrations: 1,
diff --git a/packages/widgets/src/beszel-alerts/index.ts b/packages/widgets/src/beszel-alerts/index.ts
index f7dd6dee7..f5fdc9d01 100644
--- a/packages/widgets/src/beszel-alerts/index.ts
+++ b/packages/widgets/src/beszel-alerts/index.ts
@@ -1,12 +1,18 @@
 import { IconBell, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", {
   icon: IconBell,
-  queryKey: [["widget", "beszel"]],
+  queryKey: [["widget", "beszel", "getAlerts"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      includeHistory: scope.options.showHistory,
+      maxHistoryItems: scope.options.maxHistoryItems,
+    }),
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index 8359b2353..9754622c4 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -430,7 +430,9 @@ export default function BeszelSystemGridWidget({
   const effectiveCellHeight = scrollEnabled ? minimumCellHeight : rawCellHeight;
   const cellWidth = width / cols;
   const size = getSizeConfig(cellWidth, effectiveCellHeight);
-  const maxMetrics = advanced ? metricRenderers.length : getMaxVisibleMetrics(effectiveCellHeight, size);
+  const maxMetrics = advanced
+    ? Math.min(metricRenderers.length, getMaxVisibleMetrics(effectiveCellHeight, size))
+    : getMaxVisibleMetrics(effectiveCellHeight, size);
 
   return (
     <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
diff --git a/packages/widgets/src/beszel-system-grid/index.ts b/packages/widgets/src/beszel-system-grid/index.ts
index 69dc7e2ba..9a5444e28 100644
--- a/packages/widgets/src/beszel-system-grid/index.ts
+++ b/packages/widgets/src/beszel-system-grid/index.ts
@@ -6,7 +6,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", {
   icon: IconLayoutGrid,
-  queryKey: [["widget", "beszel"]],
+  queryKey: [["widget", "beszel", "getSystems"]],
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 1b964c409..83cb8b92a 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -13,6 +13,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import classes from "./component.module.css";
 
 import type { WidgetComponentProps } from "../definition";
+import { setWidgetRuntimeQueries } from "../definition";
 import type { BeszelTimePeriod } from "../beszel/_shared/chart";
 import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
@@ -28,6 +29,7 @@ export default function BeszelSystemStatsWidget({
   boardId,
   itemId,
   setOptions,
+  widgetStateRef,
 }: WidgetComponentProps<"beszelSystemStats">) {
   const t = useScopedI18n("widget.beszelSystemStats");
   const board = useOptionalBoard();
@@ -45,6 +47,25 @@ export default function BeszelSystemStatsWidget({
   const selectedValue = selectedSystem?.value ?? "";
   const selectedLabel = selectedSystem?.label;
   const systemExists = selectedSystem !== undefined;
+  const includeDocker =
+    (displayMode === "advanced" || height >= 380) &&
+    (options.showDockerCpu || options.showDockerMemory || options.showDockerNetwork);
+  setWidgetRuntimeQueries(
+    widgetStateRef,
+    selectedSystem && options.timePeriod !== "1m"
+      ? [
+          {
+            path: ["widget", "beszel", "getSystemStats"],
+            input: {
+              integrationIds: [selectedSystem.integrationId],
+              systemId: selectedSystem.systemId,
+              timePeriod: options.timePeriod,
+              includeDocker,
+            },
+          },
+        ]
+      : [],
+  );
 
   const handleSelectSystem = useCallback(
     (value: string) => {
@@ -178,7 +199,7 @@ export default function BeszelSystemStatsWidget({
               dockerMemory: options.showDockerMemory && (displayMode === "advanced" || height >= 380),
               dockerNetwork: options.showDockerNetwork && (displayMode === "advanced" || height >= 380),
             }}
-            onSwitchToHistorical={() => setOptions({ newOptions: { timePeriod: "1h" } })}
+            onSwitchToHistorical={() => handleTimePeriod("1h")}
           />
         </Stack>
       </ScrollArea>
diff --git a/packages/widgets/src/beszel-system-stats/index.ts b/packages/widgets/src/beszel-system-stats/index.ts
index 3a885f563..71a696750 100644
--- a/packages/widgets/src/beszel-system-stats/index.ts
+++ b/packages/widgets/src/beszel-system-stats/index.ts
@@ -2,9 +2,9 @@ import { IconChartAreaLine, IconServerOff } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
-import { createBeszelSystemChoices } from "./selection";
+import { createBeszelSystemChoices, resolveStoredBeszelQuerySelection } from "./selection";
 
 const timePeriodOptions = [
   { value: "1m", label: "Live" },
@@ -17,7 +17,29 @@ const timePeriodOptions = [
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemStats", {
   icon: IconChartAreaLine,
-  queryKey: [["widget", "beszel"]],
+  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
+  queryMatcher(query, scope) {
+    if (query.path.at(-1) === "getSystems") {
+      return widgetQueryInputMatches(query.input, { integrationIds: scope.integrationIds });
+    }
+
+    const hasRuntimeStatsQuery = scope.runtimeQueries.some(({ path }) => path.at(-1) === "getSystemStats");
+    if (hasRuntimeStatsQuery) return matchesWidgetRuntimeQuery(query, scope);
+
+    const selection = resolveStoredBeszelQuerySelection(String(scope.options.systemId ?? ""), scope.integrationIds);
+    if (!selection) return false;
+    const dockerEnabled = ["showDockerCpu", "showDockerMemory", "showDockerNetwork"].some(
+      (key) => scope.options[key] === true,
+    );
+    const expected = {
+      ...selection,
+      timePeriod: scope.options.timePeriod,
+    };
+    return (
+      widgetQueryInputMatches(query.input, { ...expected, includeDocker: false }) ||
+      (dockerEnabled && widgetQueryInputMatches(query.input, { ...expected, includeDocker: true }))
+    );
+  },
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/beszel-system-stats/selection.spec.ts b/packages/widgets/src/beszel-system-stats/selection.spec.ts
index 8280761ad..cc237e947 100644
--- a/packages/widgets/src/beszel-system-stats/selection.spec.ts
+++ b/packages/widgets/src/beszel-system-stats/selection.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";
+import { createBeszelSystemChoices, resolveBeszelSystemChoice, resolveStoredBeszelQuerySelection } from "./selection";
 
 const choices = createBeszelSystemChoices([
   { integrationId: "one", integrationName: "Primary", systems: [{ id: "same", name: "Host A" }] },
@@ -13,7 +13,34 @@ describe("Beszel system selection", () => {
     expect(resolveBeszelSystemChoice(choices, "two:same")?.integrationId).toBe("two");
   });
 
-  it("keeps legacy plain system ids working", () => {
-    expect(resolveBeszelSystemChoice(choices, "same")?.integrationId).toBe("one");
+  it("keeps unique legacy plain system ids working", () => {
+    expect(resolveBeszelSystemChoice(choices.slice(0, 1), "same")?.integrationId).toBe("one");
+  });
+
+  it("defaults an empty selection to the first system", () => {
+    expect(resolveBeszelSystemChoice(choices, "")?.integrationId).toBe("one");
+  });
+
+  it("does not guess when a legacy plain system id is ambiguous", () => {
+    expect(resolveBeszelSystemChoice(choices, "same")).toBeUndefined();
+  });
+
+  it("does not silently replace an unresolved stored system", () => {
+    expect(resolveBeszelSystemChoice(choices, "missing")).toBeUndefined();
+  });
+
+  it("derives the queried integration and system from a composite selection", () => {
+    expect(resolveStoredBeszelQuerySelection("two:same", ["one", "two"])).toEqual({
+      integrationIds: ["two"],
+      systemId: "same",
+    });
+  });
+
+  it("supports a legacy plain system id only when the integration is unambiguous", () => {
+    expect(resolveStoredBeszelQuerySelection("same", ["one"])).toEqual({
+      integrationIds: ["one"],
+      systemId: "same",
+    });
+    expect(resolveStoredBeszelQuerySelection("same", ["one", "two"])).toBeNull();
   });
 });
diff --git a/packages/widgets/src/beszel-system-stats/selection.ts b/packages/widgets/src/beszel-system-stats/selection.ts
index bd7445704..d48ffa45e 100644
--- a/packages/widgets/src/beszel-system-stats/selection.ts
+++ b/packages/widgets/src/beszel-system-stats/selection.ts
@@ -24,9 +24,25 @@ export function createBeszelSystemChoices(results: BeszelSystemsResult[]): Besze
 }
 
 export function resolveBeszelSystemChoice(choices: BeszelSystemChoice[], storedValue: string) {
-  return (
-    choices.find((choice) => choice.value === storedValue) ??
-    choices.find((choice) => choice.systemId === storedValue) ??
-    choices[0]
-  );
+  const exactMatch = choices.find((choice) => choice.value === storedValue);
+  if (exactMatch) return exactMatch;
+  if (storedValue === "") return choices[0];
+
+  const legacyMatches = choices.filter((choice) => choice.systemId === storedValue);
+  return legacyMatches.length === 1 ? legacyMatches[0] : undefined;
+}
+
+export function resolveStoredBeszelQuerySelection(storedValue: string, integrationIds: readonly string[]) {
+  for (const integrationId of integrationIds) {
+    const prefix = `${integrationId}:`;
+    if (storedValue.startsWith(prefix)) {
+      return { integrationIds: [integrationId], systemId: storedValue.slice(prefix.length) };
+    }
+  }
+
+  if (storedValue !== "" && integrationIds.length === 1) {
+    return { integrationIds: [integrationIds[0] as string], systemId: storedValue };
+  }
+
+  return null;
 }
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index 14ac594df..98d9c6634 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -24,6 +24,7 @@ import { useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { setWidgetRuntimeQueries } from "../definition";
 import type { BeszelSystemRow } from "../beszel/_shared/types";
 import { loadAvgColor, statusColorMap, thresholdColor } from "../beszel/_shared/colors";
 import {
@@ -77,6 +78,7 @@ export default function BeszelSystemTableWidget({
   isEditMode,
   width,
   displayMode = "compact",
+  widgetStateRef,
 }: WidgetComponentProps<"beszelSystemTable">) {
   const t = useScopedI18n("widget.beszelSystemTable");
   const { openModal } = useModalAction(BeszelSystemStatsModal);
@@ -319,6 +321,25 @@ export default function BeszelSystemTableWidget({
     openModal({ integrationId, systemId: record.id }, { title: record.name });
   };
 
+  const activeSystem = selectedSystem ?? sortedSystems[0];
+  const activeIntegrationId = activeSystem?._key.split(":")[0] ?? "";
+  setWidgetRuntimeQueries(
+    widgetStateRef,
+    displayMode === "advanced" && activeSystem
+      ? [
+          {
+            path: ["widget", "beszel", "getSystemStats"],
+            input: {
+              integrationIds: [activeIntegrationId],
+              systemId: activeSystem.id,
+              timePeriod: "1h",
+              includeDocker: false,
+            },
+          },
+        ]
+      : [],
+  );
+
   if (systemsError) throw systemsError;
 
   if (isPending) {
@@ -355,8 +376,6 @@ export default function BeszelSystemTableWidget({
 
   if (displayMode === "compact") return table;
 
-  const activeSystem = selectedSystem ?? sortedSystems[0];
-  const activeIntegrationId = activeSystem?._key.split(":")[0] ?? "";
   return (
     <div
       style={{
@@ -378,14 +397,14 @@ export default function BeszelSystemTableWidget({
               timePeriod="1h"
               columns={1}
               visibility={{
-                cpu: true,
-                memory: true,
-                disk: true,
-                diskIO: true,
-                network: true,
-                dockerCpu: true,
-                dockerMemory: true,
-                dockerNetwork: true,
+                cpu: options.showCpu,
+                memory: options.showMemory,
+                disk: options.showDisk,
+                diskIO: options.showDisk,
+                network: options.showNet,
+                dockerCpu: false,
+                dockerMemory: false,
+                dockerNetwork: false,
               }}
             />
           </Stack>
diff --git a/packages/widgets/src/beszel-system-table/index.ts b/packages/widgets/src/beszel-system-table/index.ts
index ba90cb5e9..8570434ff 100644
--- a/packages/widgets/src/beszel-system-table/index.ts
+++ b/packages/widgets/src/beszel-system-table/index.ts
@@ -1,6 +1,6 @@
 import { IconServerOff, IconTable } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery, widgetQueryInputMatches } from "../definition";
 import { statusOptions } from "../beszel/_shared/options";
 import { optionsBuilder } from "../options";
 
@@ -25,7 +25,11 @@ const sortDirectionOptions = [
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", {
   icon: IconTable,
-  queryKey: [["widget", "beszel"]],
+  queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
+  queryMatcher: (query, scope) =>
+    query.path.at(-1) === "getSystems"
+      ? widgetQueryInputMatches(query.input, { integrationIds: scope.integrationIds })
+      : matchesWidgetRuntimeQuery(query, scope),
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
   createOptions() {
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 72cb062a0..4771fc96e 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -13,6 +13,7 @@ import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
 
 import type { WidgetComponentProps } from "../definition";
+import { setWidgetRuntimeQueries } from "../definition";
 import { CalendarDay } from "./calender-day";
 import { getCalendarAgendaEvents, groupEventsByDate, splitEvents, toCalendarDateKey } from "./calendar-events";
 import { CalendarEventList } from "./calendar-event-list";
@@ -22,6 +23,7 @@ export default function CalendarWidget(props: WidgetComponentProps<"calendar">)
   const [month, setMonth] = useState(() => new Date());
 
   if (props.integrationIds.length === 0) {
+    setWidgetRuntimeQueries(props.widgetStateRef, []);
     return <CalendarBase {...props} events={[]} month={month} setMonth={setMonth} />;
   }
 
@@ -33,7 +35,15 @@ interface FetchCalendarProps extends WidgetComponentProps<"calendar"> {
   setMonth: (date: Date) => void;
 }
 
-const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, displayMode }: FetchCalendarProps) => {
+const FetchCalendar = ({
+  month,
+  setMonth,
+  isEditMode,
+  integrationIds,
+  options,
+  displayMode,
+  widgetStateRef,
+}: FetchCalendarProps) => {
   const input = {
     integrationIds,
     month: month.getMonth(),
@@ -41,6 +51,7 @@ const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, d
     releaseType: options.releaseType,
     showUnmonitored: options.showUnmonitored,
   };
+  setWidgetRuntimeQueries(widgetStateRef, [{ path: ["widget", "calendar", "findAllEvents"], input }]);
   const { data } = clientApi.widget.calendar.findAllEvents.useQuery(input);
 
   const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
@@ -75,6 +86,7 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options, displayMod
   const actualItemRadius = mantineTheme.radius[board.itemRadius];
   const { ref, width, height } = useElementSize();
   const isSmall = width < 256;
+  const calendarHeight = displayMode === "advanced" ? height * 0.62 : height;
 
   const normalizedEvents = useMemo(() => splitEvents(events), [events]);
   const visibleEvents = useMemo(
@@ -159,7 +171,7 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options, displayMod
               events={eventsForDate}
               disabled={isEditMode || eventsForDate.length === 0}
               rootWidth={width}
-              rootHeight={height}
+              rootHeight={calendarHeight}
             />
           );
         }}
diff --git a/packages/widgets/src/calendar/index.ts b/packages/widgets/src/calendar/index.ts
index d03b2f610..270981f5d 100644
--- a/packages/widgets/src/calendar/index.ts
+++ b/packages/widgets/src/calendar/index.ts
@@ -4,11 +4,13 @@ import { z } from "zod/v4";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { radarrReleaseTypes } from "@homarr/integrations/types";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("calendar", {
   icon: IconCalendar,
+  queryKey: [["widget", "calendar", "findAllEvents"]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       releaseType: factory.multiSelect({
diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index dad04fe80..091115bd8 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -8,6 +8,8 @@ import timezones from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
 import { clientApi } from "@homarr/api/client";
+import { metricToImperial } from "@homarr/common";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "../weather/animated-icon";
@@ -77,6 +79,7 @@ interface ClockWeatherCornerProps {
 }
 
 const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit, showDetails }: ClockWeatherCornerProps) => {
+  const tCommon = useScopedI18n("common");
   const { data: weather } = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
 
   if (!weather) return null;
@@ -93,7 +96,8 @@ const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit, showDetails }:
       </Text>
       {showDetails && (
         <Text size="xs" c="dimmed">
-          {Math.round(weather.current.windspeed)} km/h
+          {Math.round(isFahrenheit ? metricToImperial(weather.current.windspeed) : weather.current.windspeed)}{" "}
+          {isFahrenheit ? tCommon("unit.speed.milesPerHour") : tCommon("unit.speed.kilometersPerHour")}
         </Text>
       )}
     </Stack>
diff --git a/packages/widgets/src/clock/index.ts b/packages/widgets/src/clock/index.ts
index 3fe152b73..e7657b918 100644
--- a/packages/widgets/src/clock/index.ts
+++ b/packages/widgets/src/clock/index.ts
@@ -1,12 +1,28 @@
 import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("clock", {
   icon: IconClock,
-  queryKey: [["widget", "weather"]],
+  queryKey: [["widget", "weather", "atLocation"]],
+  queryMatcher: ({ input }, scope) => {
+    const location = scope.options.weatherLocation;
+    if (
+      scope.options.showWeather !== true ||
+      location === null ||
+      typeof location !== "object" ||
+      !("latitude" in location) ||
+      !("longitude" in location)
+    ) {
+      return false;
+    }
+    return widgetQueryInputMatches(input, {
+      latitude: location.latitude,
+      longitude: location.longitude,
+    });
+  },
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({
diff --git a/packages/widgets/src/coolify/instance-card.tsx b/packages/widgets/src/coolify/instance-card.tsx
index 2cc694f9c..73faec197 100644
--- a/packages/widgets/src/coolify/instance-card.tsx
+++ b/packages/widgets/src/coolify/instance-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Accordion, Anchor, Badge, Card, Group, Image, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
@@ -33,12 +33,27 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced
     key: `coolify-sections-${cardKey}`,
     defaultValue: ["applications"],
   });
-  const visibleSections = [
-    options.showServers ? "servers" : null,
-    options.showApplications ? "applications" : null,
-    options.showServices ? "services" : null,
-  ].filter((section): section is string => section !== null);
+  const visibleSections = useMemo(
+    () =>
+      [
+        options.showServers ? "servers" : null,
+        options.showApplications ? "applications" : null,
+        options.showServices ? "services" : null,
+      ].filter((section): section is string => section !== null),
+    [options.showApplications, options.showServers, options.showServices],
+  );
   const [advancedOpenSections, setAdvancedOpenSections] = useState(visibleSections);
+  const previousVisibleSectionsRef = useRef(visibleSections);
+
+  useEffect(() => {
+    const newlyVisibleSections = visibleSections.filter(
+      (section) => !previousVisibleSectionsRef.current.includes(section),
+    );
+    previousVisibleSectionsRef.current = visibleSections;
+    if (newlyVisibleSections.length === 0) return;
+
+    setAdvancedOpenSections((current) => [...new Set([...current, ...newlyVisibleSections])]);
+  }, [visibleSections]);
 
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
diff --git a/packages/widgets/src/coolify/single-instance-layout.tsx b/packages/widgets/src/coolify/single-instance-layout.tsx
index 4d05b71d6..2360f8f59 100644
--- a/packages/widgets/src/coolify/single-instance-layout.tsx
+++ b/packages/widgets/src/coolify/single-instance-layout.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Accordion, Anchor, Group, Image, ScrollArea, Stack, Text } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
@@ -32,12 +32,27 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isA
     key: `coolify-sections-${widgetKey}`,
     defaultValue: ["applications"],
   });
-  const visibleSections = [
-    options.showServers ? "servers" : null,
-    options.showApplications ? "applications" : null,
-    options.showServices ? "services" : null,
-  ].filter((section): section is string => section !== null);
+  const visibleSections = useMemo(
+    () =>
+      [
+        options.showServers ? "servers" : null,
+        options.showApplications ? "applications" : null,
+        options.showServices ? "services" : null,
+      ].filter((section): section is string => section !== null),
+    [options.showApplications, options.showServers, options.showServices],
+  );
   const [advancedOpenSections, setAdvancedOpenSections] = useState(visibleSections);
+  const previousVisibleSectionsRef = useRef(visibleSections);
+
+  useEffect(() => {
+    const newlyVisibleSections = visibleSections.filter(
+      (section) => !previousVisibleSectionsRef.current.includes(section),
+    );
+    previousVisibleSectionsRef.current = visibleSections;
+    if (newlyVisibleSections.length === 0) return;
+
+    setAdvancedOpenSections((current) => [...new Set([...current, ...newlyVisibleSections])]);
+  }, [visibleSections]);
 
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
diff --git a/packages/widgets/src/custom-api/index.ts b/packages/widgets/src/custom-api/index.ts
index 4c6ae6654..2fc7e1849 100644
--- a/packages/widgets/src/custom-api/index.ts
+++ b/packages/widgets/src/custom-api/index.ts
@@ -1,11 +1,13 @@
 import { IconApi, IconPlayerPause } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("customApi", {
   icon: IconApi,
+  queryKey: [["widget", "customApi", "getData"]],
+  queryMatcher: ({ input }, scope) => widgetQueryInputMatches(input, { definitionId: scope.options.definitionId }),
   contextActions({ options, widgetStateRef }) {
     return [
       {
@@ -13,9 +15,9 @@ export const { definition, componentLoader } = createWidgetDefinition("customApi
         label: (t) => t("widget.customApi.actions.togglePolling"),
         icon: IconPlayerPause,
         hidden: typeof options.definitionId !== "string" || options.definitionId.trim() === "",
-        disabled: typeof widgetStateRef.current?.togglePolling !== "function",
+        disabled: typeof widgetStateRef?.current?.togglePolling !== "function",
         onClick: () => {
-          const action = widgetStateRef.current?.togglePolling;
+          const action = widgetStateRef?.current?.togglePolling;
           if (typeof action === "function") action();
         },
       },
diff --git a/packages/widgets/src/definition.spec.ts b/packages/widgets/src/definition.spec.ts
index ce08a0ace..3ad2e96ba 100644
--- a/packages/widgets/src/definition.spec.ts
+++ b/packages/widgets/src/definition.spec.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test } from "vitest";
 
-import { getWidgetQueryKeys } from "./definition";
+import { getWidgetQueryKeys, getWidgetRuntimeQueries, setWidgetRuntimeQueries } from "./definition";
+
+const togglePolling = () => undefined;
 
 describe("getWidgetQueryKeys", () => {
   test("falls back to the widget router namespace", () => {
@@ -12,8 +14,21 @@ describe("getWidgetQueryKeys", () => {
   });
 
   test("preserves every explicit key for multi-root widgets", () => {
-    const queryKeys = [[["widget", "audioStats"]], [["widget", "mediaServer"]]] as const;
+    const queryKeys = [
+      [["widget", "audioStats", "getStats"]],
+      [["widget", "mediaServer", "getCurrentStreams"]],
+    ] as const;
 
     expect(getWidgetQueryKeys({ kind: "audioStats", queryKeys })).toBe(queryKeys);
   });
+
+  test("registers runtime queries without replacing imperative widget actions", () => {
+    const widgetStateRef = { current: { togglePolling } };
+    const runtimeQueries = [{ path: ["widget", "calendar", "findAllEvents"], input: { month: 7 } }];
+
+    setWidgetRuntimeQueries(widgetStateRef, runtimeQueries);
+
+    expect(widgetStateRef.current.togglePolling).toBe(togglePolling);
+    expect(getWidgetRuntimeQueries(widgetStateRef)).toEqual(runtimeQueries);
+  });
 });
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index 775963b28..3b1f1129d 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -1,6 +1,7 @@
 import type React from "react";
 import type { LoaderComponent } from "next/dynamic";
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
+import { hashKey } from "@tanstack/react-query";
 import type { DefaultErrorData } from "@trpc/server/unstable-core-do-not-import";
 
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
@@ -29,6 +30,21 @@ export interface WidgetContextMenuContext {
   canInteractWithSelectedIntegrations: boolean;
 }
 
+export interface NormalizedWidgetQuery {
+  path: readonly string[];
+  input: unknown;
+}
+
+export interface WidgetQueryMatcherScope {
+  itemId: string;
+  boardId: string | undefined;
+  integrationIds: readonly string[];
+  options: Record<string, unknown>;
+  runtimeQueries: readonly NormalizedWidgetQuery[];
+}
+
+export type WidgetQueryMatcher = (query: NormalizedWidgetQuery, scope: WidgetQueryMatcherScope) => boolean;
+
 export interface WidgetContextActionProps<
   TKind extends WidgetKind,
   TOptions extends WidgetOptionsRecord = WidgetOptionsRecord,
@@ -72,6 +88,7 @@ export interface WidgetDefinition {
   icon: TablerIcon;
   queryKey?: QueryKey;
   queryKeys?: readonly QueryKey[];
+  queryMatcher?: WidgetQueryMatcher;
   refetchInterval?: number | null;
   supportedIntegrations?: IntegrationKind[];
   integrationsRequired?: boolean;
@@ -101,6 +118,39 @@ export const getWidgetQueryKeys = (definition: {
   return [definition.queryKey ?? [["widget", definition.kind]]];
 };
 
+const runtimeQueriesStateKey = "__homarrRuntimeQueries";
+
+export const setWidgetRuntimeQueries = (
+  widgetStateRef: React.MutableRefObject<Record<string, unknown> | null> | undefined,
+  queries: readonly NormalizedWidgetQuery[],
+) => {
+  if (!widgetStateRef) return;
+  const state = widgetStateRef.current ?? {};
+  state[runtimeQueriesStateKey] = queries;
+  widgetStateRef.current = state;
+};
+
+export const getWidgetRuntimeQueries = (
+  widgetStateRef: React.MutableRefObject<Record<string, unknown> | null>,
+): readonly NormalizedWidgetQuery[] => {
+  const queries = widgetStateRef.current?.[runtimeQueriesStateKey];
+  return Array.isArray(queries) ? (queries as NormalizedWidgetQuery[]) : [];
+};
+
+export const matchesWidgetRuntimeQuery: WidgetQueryMatcher = (query, scope) =>
+  scope.runtimeQueries.some(
+    (runtimeQuery) =>
+      widgetQueryValueEquals(runtimeQuery.path, query.path) && widgetQueryValueEquals(runtimeQuery.input, query.input),
+  );
+
+export const widgetQueryInputMatches = (input: unknown, expected: Record<string, unknown>) =>
+  isRecord(input) && Object.entries(expected).every(([key, value]) => widgetQueryValueEquals(input[key], value));
+
+export const widgetQueryValueEquals = (left: unknown, right: unknown) => hashKey([left]) === hashKey([right]);
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value !== null && typeof value === "object" && !Array.isArray(value);
+
 export interface WidgetProps<TKind extends WidgetKind> {
   options: inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>;
   integrationIds: string[];
diff --git a/packages/widgets/src/downloads/index.ts b/packages/widgets/src/downloads/index.ts
index cc8f9a5b0..60064de9a 100644
--- a/packages/widgets/src/downloads/index.ts
+++ b/packages/widgets/src/downloads/index.ts
@@ -4,7 +4,7 @@ import { z } from "zod/v4";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import type { ExtendedDownloadClientItem } from "@homarr/integrations";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 const columnsList = [
@@ -42,6 +42,12 @@ const sortColumns = [
 
 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
   icon: IconDownload,
+  queryKey: [["widget", "downloads", "getJobsAndStatuses"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      limitPerIntegration: scope.options.limitPerIntegration,
+    }),
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/firewall/component.tsx b/packages/widgets/src/firewall/component.tsx
index a3bd86064..9ab1714c5 100644
--- a/packages/widgets/src/firewall/component.tsx
+++ b/packages/widgets/src/firewall/component.tsx
@@ -127,7 +127,9 @@ export default function FirewallWidget({
             const memory = firewallsMemoryData.find(({ integration }) => integration.id === firewallId);
             const version = firewallsVersionData.find(({ integration }) => integration.id === firewallId);
             const interfaces = firewallsInterfacesData.find(({ integration }) => integration.id === firewallId);
-            const hasError = Boolean(cpu?.error || memory?.error || version?.error || interfaces?.error);
+            const hasError = Boolean(
+              cpu?.error || memory?.error || version?.error || interfacesQuery.isError || interfaces?.error,
+            );
             const metadata = firewallMetadata.get(firewallId);
 
             return (
@@ -138,13 +140,18 @@ export default function FirewallWidget({
                 version={version?.error ? undefined : version?.summary.version}
                 cpu={cpu?.error ? undefined : cpu?.summary.total}
                 memory={memory?.error ? undefined : memory?.summary.percent}
-                interfaces={interfaces?.error ? undefined : interfaces?.summary}
+                interfaces={interfaces?.summary}
+                interfacesLoaded={interfaces !== undefined}
+                interfacesError={interfacesQuery.isError || Boolean(interfaces?.error)}
                 hasError={hasError}
                 isAdvanced={isAdvanced}
                 isTiny={isTiny}
                 accordionValue={accordionValue}
                 setAccordionValue={setAccordionValue}
-                noDataLabel={t("widget.firewall.error.internalServerError")}
+                errorLabel={t("widget.firewall.error.internalServerError")}
+                noDataLabel={t("widget.firewall.empty.noInterfaces")}
+                loadingLabel={t("common.action.loading")}
+                errorBadgeLabel={t("common.error")}
                 interfacesLabel={t("widget.firewall.widget.interfaces.title")}
                 t={t}
               />
@@ -163,12 +170,17 @@ interface FirewallPanelProps {
   cpu?: number;
   memory?: number;
   interfaces?: FirewallInterfacesSummary[];
+  interfacesLoaded: boolean;
+  interfacesError: boolean;
   hasError: boolean;
   isAdvanced: boolean;
   isTiny: boolean;
   accordionValue: string | null;
   setAccordionValue: (value: string | null) => void;
+  errorLabel: string;
   noDataLabel: string;
+  loadingLabel: string;
+  errorBadgeLabel: string;
   interfacesLabel: string;
   t: TranslationFunction;
 }
@@ -180,12 +192,17 @@ const FirewallPanel = ({
   cpu,
   memory,
   interfaces,
+  interfacesLoaded,
+  interfacesError,
   hasError,
   isAdvanced,
   isTiny,
   accordionValue,
   setAccordionValue,
+  errorLabel,
   noDataLabel,
+  loadingLabel,
+  errorBadgeLabel,
   interfacesLabel,
   t,
 }: FirewallPanelProps) => (
@@ -205,7 +222,7 @@ const FirewallPanel = ({
           </Stack>
           <Group gap={4} wrap="nowrap">
             {hasError && (
-              <Tooltip label={noDataLabel}>
+              <Tooltip label={errorLabel}>
                 <Badge color="red" variant="light" size="xs">
                   {t("common.error")}
                 </Badge>
@@ -235,11 +252,16 @@ const FirewallPanel = ({
 
       <InterfacesPanel
         summary={interfaces ?? []}
+        hasResult={interfacesLoaded}
+        hasError={interfacesError}
         isAdvanced={isAdvanced}
         isTiny={isTiny}
         accordionValue={accordionValue}
         setAccordionValue={setAccordionValue}
+        errorLabel={errorLabel}
+        errorBadgeLabel={errorBadgeLabel}
         noDataLabel={noDataLabel}
+        loadingLabel={loadingLabel}
         label={interfacesLabel}
       />
     </Stack>
@@ -294,21 +316,31 @@ const getMetricStatus = (value: number): "normal" | "warning" | "critical" => {
 
 interface InterfacesPanelProps {
   summary: FirewallInterfacesSummary[];
+  hasResult: boolean;
+  hasError: boolean;
   isAdvanced: boolean;
   isTiny: boolean;
   accordionValue: string | null;
   setAccordionValue: (value: string | null) => void;
+  errorLabel: string;
+  errorBadgeLabel: string;
   noDataLabel: string;
+  loadingLabel: string;
   label: string;
 }
 
 const InterfacesPanel = ({
   summary,
+  hasResult,
+  hasError,
   isAdvanced,
   isTiny,
   accordionValue,
   setAccordionValue,
+  errorLabel,
+  errorBadgeLabel,
   noDataLabel,
+  loadingLabel,
   label,
 }: InterfacesPanelProps) => {
   const bandwidth = calculateBandwidth(summary).data;
@@ -321,35 +353,45 @@ const InterfacesPanel = ({
     >
       <Accordion.Item value="interfaces">
         <Accordion.Control icon={isTiny ? null : <IconTopologyBus size={16} />}>
-          <Text size={isTiny ? "8px" : "xs"}>{label}</Text>
+          <Group justify="space-between" wrap="nowrap" gap="xs">
+            <Text size={isTiny ? "8px" : "xs"}>{label}</Text>
+            {hasError && (
+              <Badge color="red" variant="light" size="xs">
+                {errorBadgeLabel}
+              </Badge>
+            )}
+          </Group>
         </Accordion.Control>
         <Accordion.Panel>
           <Stack gap={4}>
-            {bandwidth.length > 0 ? (
-              bandwidth.map(({ name, receive, transmit }) => (
-                <Group key={name} gap="xs" wrap={isTiny ? "wrap" : "nowrap"} justify="space-between">
-                  <Text size={isTiny ? "8px" : "xs"} c="blue.3" truncate="end" style={{ flex: 1 }}>
-                    {name}
+            {bandwidth.map(({ name, receive, transmit }) => (
+              <Group key={name} gap="xs" wrap={isTiny ? "wrap" : "nowrap"} justify="space-between">
+                <Text size={isTiny ? "8px" : "xs"} c="blue.3" truncate="end" style={{ flex: 1 }}>
+                  {name}
+                </Text>
+                <Group gap={4} wrap="nowrap">
+                  <IconArrowBarUp size={isTiny ? 8 : 12} color="lightgreen" />
+                  <Text size={isTiny ? "8px" : "xs"} c="green.3">
+                    {formatBitsPerSec(transmit, 2)}
                   </Text>
-                  <Group gap={4} wrap="nowrap">
-                    <IconArrowBarUp size={isTiny ? 8 : 12} color="lightgreen" />
-                    <Text size={isTiny ? "8px" : "xs"} c="green.3">
-                      {formatBitsPerSec(transmit, 2)}
-                    </Text>
-                  </Group>
-                  <Group gap={4} wrap="nowrap">
-                    <IconArrowBarDown size={isTiny ? 8 : 12} color="yellow" />
-                    <Text size={isTiny ? "8px" : "xs"} c="yellow.3">
-                      {formatBitsPerSec(receive, 2)}
-                    </Text>
-                  </Group>
                 </Group>
-              ))
-            ) : (
-              <Text size="xs" c="dimmed">
-                {noDataLabel}
+                <Group gap={4} wrap="nowrap">
+                  <IconArrowBarDown size={isTiny ? 8 : 12} color="yellow" />
+                  <Text size={isTiny ? "8px" : "xs"} c="yellow.3">
+                    {formatBitsPerSec(receive, 2)}
+                  </Text>
+                </Group>
+              </Group>
+            ))}
+            {hasError ? (
+              <Text size="xs" c="red">
+                {errorLabel}
               </Text>
-            )}
+            ) : bandwidth.length === 0 ? (
+              <Text size="xs" c="dimmed">
+                {hasResult ? noDataLabel : loadingLabel}
+              </Text>
+            ) : null}
           </Stack>
         </Accordion.Panel>
       </Accordion.Item>
diff --git a/packages/widgets/src/iframe/component.spec.ts b/packages/widgets/src/iframe/component.spec.ts
index 97f9abf45..a5f3b5835 100644
--- a/packages/widgets/src/iframe/component.spec.ts
+++ b/packages/widgets/src/iframe/component.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { getAllowedPermissions, getSandboxFlags, isSupportedProtocol } from "./component";
+import { getAllowedPermissions, getFrameTitle, getSandboxFlags, isSupportedProtocol } from "./component";
 
 const permissions = {
   allowFullScreen: true,
@@ -23,4 +23,12 @@ describe("iframe policy", () => {
     expect(isSupportedProtocol("javascript:alert(1)")).toBe(false);
     expect(isSupportedProtocol("not a url")).toBe(false);
   });
+
+  it("creates a display title without credentials, paths, or query parameters", () => {
+    expect(getFrameTitle("https://user:secret@example.com/private?token=sensitive")).toBe("example.com");
+  });
+
+  it("keeps a non-default port in the display title", () => {
+    expect(getFrameTitle("http://user:secret@example.com:8080/private?token=sensitive")).toBe("example.com:8080");
+  });
 });
diff --git a/packages/widgets/src/iframe/component.tsx b/packages/widgets/src/iframe/component.tsx
index 068b5dc45..96cf210b7 100644
--- a/packages/widgets/src/iframe/component.tsx
+++ b/packages/widgets/src/iframe/component.tsx
@@ -28,7 +28,7 @@ export default function IFrameWidget({ options, isEditMode, displayMode }: Widge
             {getFrameTitle(embedUrl)}
           </Text>
           <Anchor href={embedUrl} target="_blank" rel="noreferrer" size="xs">
-            {embedUrl}
+            {t("widget.app.option.openInNewTab.label")}
           </Anchor>
         </Group>
       )}
@@ -138,9 +138,9 @@ const permissionMapping: Partial<
   allowPayment: "payment",
 };
 
-const getFrameTitle = (url: string) => {
+export const getFrameTitle = (url: string) => {
   try {
-    return new URL(url).hostname;
+    return new URL(url).host;
   } catch {
     return "iframe";
   }
diff --git a/packages/widgets/src/immich/album-carousel/index.ts b/packages/widgets/src/immich/album-carousel/index.ts
index ef07d245e..eeb0d611a 100644
--- a/packages/widgets/src/immich/album-carousel/index.ts
+++ b/packages/widgets/src/immich/album-carousel/index.ts
@@ -4,23 +4,31 @@ import z from "zod";
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../../definition";
 import { optionsBuilder } from "../../options";
 import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 
 export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
   icon: IconPhoto,
-  queryKey: [["widget", "immich"]],
+  queryKey: [["widget", "immich", "getAlbum"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationId: scope.integrationIds[0] ?? "",
+      albumId:
+        typeof scope.options.albumId === "string" && scope.options.albumId !== ALL_PHOTOS_ALBUM_ID
+          ? scope.options.albumId
+          : undefined,
+    }),
   refetchInterval: null,
   supportedIntegrations: ["immich"],
   integrationsRequired: true,
   maxIntegrations: 1,
   contextActions({ widgetStateRef }) {
     const call = (key: string) => () => {
-      const action = widgetStateRef.current?.[key];
+      const action = widgetStateRef?.current?.[key];
       if (typeof action === "function") action();
     };
-    const disabled = (key: string) => typeof widgetStateRef.current?.[key] !== "function";
+    const disabled = (key: string) => typeof widgetStateRef?.current?.[key] !== "function";
     return [
       {
         key: "previousPhoto",
diff --git a/packages/widgets/src/immich/albums-query.spec.ts b/packages/widgets/src/immich/albums-query.spec.ts
new file mode 100644
index 000000000..99cef03e9
--- /dev/null
+++ b/packages/widgets/src/immich/albums-query.spec.ts
@@ -0,0 +1,59 @@
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { WidgetComponentProps } from "../definition";
+import ImmichServerStatsWidget from "./server-stats/component";
+import { definition as albumCarouselDefinition } from "./album-carousel";
+
+const mocks = vi.hoisted(() => ({
+  getAlbums: vi.fn(() => ({ data: [], isPending: false, isError: false })),
+}));
+
+vi.mock("@homarr/api/client", () => ({
+  clientApi: {
+    widget: {
+      immich: {
+        getAlbums: { useQuery: mocks.getAlbums },
+        getServerStats: { useQuery: () => ({ data: undefined }) },
+      },
+    },
+  },
+}));
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string) => key,
+  useScopedI18n: () => (key: string) => key,
+}));
+
+describe("Immich album queries", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  test("server stats requests a bounded album response", () => {
+    ImmichServerStatsWidget({
+      integrationIds: ["immich-id"],
+      options: { showUsers: true, showPhotos: true, showVideos: true, showStorage: true },
+      displayMode: "advanced",
+      width: 800,
+      height: 600,
+      isEditMode: false,
+      boardId: "board-id",
+      itemId: "item-id",
+      setOptions: vi.fn(),
+    } satisfies WidgetComponentProps<"immich-serverStats">);
+
+    expect(mocks.getAlbums).toHaveBeenCalledWith(
+      { integrationId: "immich-id", limit: 50 },
+      expect.objectContaining({ enabled: true }),
+    );
+  });
+
+  test("album carousel keeps requesting every album for its selector", () => {
+    const options = albumCarouselDefinition.createOptions();
+
+    options.albumId.useOptions(["immich-id"]);
+
+    expect(mocks.getAlbums).toHaveBeenCalledWith(
+      { integrationId: "immich-id" },
+      expect.objectContaining({ enabled: true }),
+    );
+  });
+});
diff --git a/packages/widgets/src/immich/server-stats/component.tsx b/packages/widgets/src/immich/server-stats/component.tsx
index 71c78657d..9296e2516 100644
--- a/packages/widgets/src/immich/server-stats/component.tsx
+++ b/packages/widgets/src/immich/server-stats/component.tsx
@@ -10,30 +10,37 @@ import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
+import { setWidgetRuntimeQueries } from "../../definition";
 import classes from "./component.module.css";
 
+const MAX_ADVANCED_ALBUMS = 50;
+
 export default function ImmichServerStatsWidget({
   integrationIds,
   options,
   displayMode = "compact",
   width,
+  widgetStateRef,
 }: WidgetComponentProps<"immich-serverStats">) {
   const t = useI18n();
-  const { data: stats } = clientApi.widget.immich.getServerStats.useQuery({
-    integrationId: integrationIds[0] ?? "",
+  const input = { integrationId: integrationIds[0] ?? "" };
+  const albumsInput = { ...input, limit: MAX_ADVANCED_ALBUMS };
+  const isAdvanced = displayMode === "advanced";
+  const albumsEnabled = isAdvanced && integrationIds.length > 0;
+  const { data: stats } = clientApi.widget.immich.getServerStats.useQuery(input);
+  const { data: albums = [] } = clientApi.widget.immich.getAlbums.useQuery(albumsInput, {
+    enabled: albumsEnabled,
+    staleTime: 15 * 60 * 1000,
   });
-  const { data: albums = [] } = clientApi.widget.immich.getAlbums.useQuery(
-    { integrationId: integrationIds[0] ?? "" },
-    { enabled: displayMode === "advanced" && integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
-  );
+  setWidgetRuntimeQueries(widgetStateRef, [
+    { path: ["widget", "immich", "getServerStats"], input },
+    ...(albumsEnabled ? [{ path: ["widget", "immich", "getAlbums"], input: albumsInput }] : []),
+  ]);
 
   if (!stats) return <WidgetEmptyState />;
 
   const statsContent = (
-    <SimpleGrid
-      cols={displayMode === "advanced" ? (width >= 720 ? 4 : width >= 360 ? 2 : 1) : width >= 320 ? 2 : 1}
-      spacing="sm"
-    >
+    <SimpleGrid cols={isAdvanced ? (width >= 720 ? 4 : width >= 360 ? 2 : 1) : width >= 320 ? 2 : 1} spacing="sm">
       {options.showUsers && (
         <StatItem icon={<IconUsers size={20} />} label={t("widget.immich-serverStats.users")} value={stats.userCount} />
       )}
@@ -61,7 +68,7 @@ export default function ImmichServerStatsWidget({
     </SimpleGrid>
   );
 
-  if (displayMode === "compact") {
+  if (!isAdvanced) {
     return (
       <Stack gap="md" h="100%" p="md" justify="center">
         {statsContent}
@@ -69,7 +76,7 @@ export default function ImmichServerStatsWidget({
     );
   }
 
-  const sortedAlbums = [...albums].toSorted((left, right) => right.assetCount - left.assetCount);
+  const sortedAlbums = albums;
   const maxAssets = sortedAlbums[0]?.assetCount ?? 1;
   return (
     <Stack gap="lg" h="100%" p="lg">
diff --git a/packages/widgets/src/immich/server-stats/index.ts b/packages/widgets/src/immich/server-stats/index.ts
index da9b6e1f2..a1c966664 100644
--- a/packages/widgets/src/immich/server-stats/index.ts
+++ b/packages/widgets/src/immich/server-stats/index.ts
@@ -1,11 +1,12 @@
 import { IconGraphFilled } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("immich-serverStats", {
   icon: IconGraphFilled,
-  queryKey: [["widget", "immich"]],
+  queryKeys: [[["widget", "immich", "getServerStats"]], [["widget", "immich", "getAlbums"]]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   refetchInterval: null,
   supportedIntegrations: ["immich"],
   integrationsRequired: true,
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index f0e2e1bcf..fd65be9c2 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -66,12 +66,15 @@ import * as weather from "./weather";
 import * as customApi from "./custom-api";
 
 export type {
+  NormalizedWidgetQuery,
   WidgetDefinition,
   WidgetContextMenuAction,
   WidgetContextActionProps,
   WidgetOptionsSettings,
+  WidgetQueryMatcher,
+  WidgetQueryMatcherScope,
 } from "./definition";
-export { getWidgetQueryKeys } from "./definition";
+export { getWidgetQueryKeys, getWidgetRuntimeQueries } from "./definition";
 export type { WidgetComponentProps };
 export type { WidgetOptionDefinition, WidgetOptionType } from "./options";
 
diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx
index df0298b82..2868c3caf 100644
--- a/packages/widgets/src/indexer-manager/component.tsx
+++ b/packages/widgets/src/indexer-manager/component.tsx
@@ -33,7 +33,9 @@ export default function IndexerManagerWidget({
   const hasSmallWidth = !isAdvanced && width < 256;
   const hasSmallHeight = !isAdvanced && height < 256;
   const allIndexers = useMemo(() => indexersData.flatMap((entry) => entry.indexers), [indexersData]);
-  const unavailableCount = allIndexers.filter((indexer) => !indexer.status || !indexer.enabled).length;
+  const unavailableCount = allIndexers.filter(
+    (indexer) => indexer.status === false || indexer.enabled === false,
+  ).length;
 
   useEffect(() => {
     if (!widgetStateRef) return;
diff --git a/packages/widgets/src/indexer-manager/index.ts b/packages/widgets/src/indexer-manager/index.ts
index b48ef301a..861d1b7f8 100644
--- a/packages/widgets/src/indexer-manager/index.ts
+++ b/packages/widgets/src/indexer-manager/index.ts
@@ -15,9 +15,9 @@ export const { definition, componentLoader } = createWidgetDefinition("indexerMa
       disabled:
         context.isEditMode ||
         !context.canInteractWithSelectedIntegrations ||
-        typeof widgetStateRef.current?.testAllIndexers !== "function",
+        typeof widgetStateRef?.current?.testAllIndexers !== "function",
       onClick: () => {
-        const action = widgetStateRef.current?.testAllIndexers;
+        const action = widgetStateRef?.current?.testAllIndexers;
         if (typeof action === "function") action();
       },
     },
diff --git a/packages/widgets/src/media-missing/component.tsx b/packages/widgets/src/media-missing/component.tsx
index b5bb9d320..3fc2f8684 100644
--- a/packages/widgets/src/media-missing/component.tsx
+++ b/packages/widgets/src/media-missing/component.tsx
@@ -26,6 +26,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { setWidgetRuntimeQueries } from "../definition";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
 import type { MediaMissingTab } from "./tabs";
@@ -37,14 +38,18 @@ export default function MediaMissingWidget({
   width,
   height,
   displayMode,
+  widgetStateRef,
 }: WidgetComponentProps<"mediaMissing">) {
   const t = useScopedI18n("widget.mediaMissing");
   const isAdvanced = displayMode === "advanced";
   const pageSize = isAdvanced ? Math.max(Number(options.pageSize), 50) : Number(options.pageSize);
-  const { data } = clientApi.widget.mediaOrganizer.getData.useQuery(
-    { integrationIds, pageSize },
-    { staleTime: 60 * 1000, refetchOnWindowFocus: false, refetchOnReconnect: false },
-  );
+  const input = { integrationIds, pageSize };
+  setWidgetRuntimeQueries(widgetStateRef, [{ path: ["widget", "mediaOrganizer", "getData"], input }]);
+  const { data } = clientApi.widget.mediaOrganizer.getData.useQuery(input, {
+    staleTime: 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
   const [selectedTab, setSelectedTab] = useState<MediaMissingTab>(options.showMissing ? "missing" : "queued");
   const activeTab = resolveMediaMissingTab(selectedTab, options.showMissing, options.showQueued);
 
diff --git a/packages/widgets/src/media-missing/index.ts b/packages/widgets/src/media-missing/index.ts
index fd325f801..69a6ecf73 100644
--- a/packages/widgets/src/media-missing/index.ts
+++ b/packages/widgets/src/media-missing/index.ts
@@ -2,14 +2,15 @@ import { IconMovie } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 const pageSizeOptions = ["10", "20", "30", "50"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaMissing", {
   icon: IconMovie,
-  queryKey: [["widget", "mediaOrganizer"]],
+  queryKey: [["widget", "mediaOrganizer", "getData"]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showMissing: factory.switch({ defaultValue: true }),
diff --git a/packages/widgets/src/media-requests/list/index.ts b/packages/widgets/src/media-requests/list/index.ts
index bcc5dd4fd..f8f90a10f 100644
--- a/packages/widgets/src/media-requests/list/index.ts
+++ b/packages/widgets/src/media-requests/list/index.ts
@@ -4,14 +4,23 @@ import { z } from "zod/v4";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { openMediaRequestSearch } from "@homarr/spotlight";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 const mediaRequestStatusValues = ["pending", "approved", "declined", "failed", "completed"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
   icon: IconZoomQuestion,
-  queryKey: [["widget", "mediaRequests"]],
+  queryKey: [["widget", "mediaRequests", "getLatestRequests"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      statuses:
+        Array.isArray(scope.options.statusFilter) && scope.options.statusFilter.length > 0
+          ? scope.options.statusFilter
+          : mediaRequestStatusValues,
+      recentDays: scope.options.recentDays,
+    }),
   createOptions() {
     return optionsBuilder.from((factory) => ({
       linksTargetNewTab: factory.switch({
diff --git a/packages/widgets/src/media-requests/stats/index.ts b/packages/widgets/src/media-requests/stats/index.ts
index 5efbd8909..2f3929877 100644
--- a/packages/widgets/src/media-requests/stats/index.ts
+++ b/packages/widgets/src/media-requests/stats/index.ts
@@ -7,7 +7,7 @@ import { createWidgetDefinition } from "../../definition";
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestStats", {
   icon: IconChartBar,
-  queryKey: [["widget", "mediaRequests"]],
+  queryKey: [["widget", "mediaRequests", "getStats"]],
   createOptions() {
     return {};
   },
diff --git a/packages/widgets/src/media-server/index.ts b/packages/widgets/src/media-server/index.ts
index 54f00476c..e77a61c97 100644
--- a/packages/widgets/src/media-server/index.ts
+++ b/packages/widgets/src/media-server/index.ts
@@ -2,11 +2,17 @@ import { IconVideo } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaServer", {
   icon: IconVideo,
+  queryKey: [["widget", "mediaServer", "getCurrentStreams"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      integrationIds: scope.integrationIds,
+      showOnlyPlaying: scope.options.showOnlyPlaying,
+    }),
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/media-transcoding/component.tsx b/packages/widgets/src/media-transcoding/component.tsx
index 765c3cdcd..926ef992a 100644
--- a/packages/widgets/src/media-transcoding/component.tsx
+++ b/packages/widgets/src/media-transcoding/component.tsx
@@ -23,6 +23,7 @@ import type { TablerIcon } from "@homarr/ui";
 import { views } from ".";
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { setWidgetRuntimeQueries } from "../definition";
 import { HealthCheckStatus } from "./health-check-status";
 import { QueuePanel } from "./panels/queue.panel";
 import { StatisticsPanel } from "./panels/statistics.panel";
@@ -44,6 +45,7 @@ export default function MediaTranscodingWidget({
   width,
   height,
   displayMode,
+  widgetStateRef,
 }: WidgetComponentProps<"mediaTranscoding">) {
   const isAdvanced = displayMode === "advanced";
   const queuePageSize = getQueuePageSize(height, isAdvanced);
@@ -58,6 +60,7 @@ export default function MediaTranscodingWidget({
     pageSize: queuePageSize,
     page: requestPagination.page,
   };
+  setWidgetRuntimeQueries(widgetStateRef, [{ path: ["widget", "mediaTranscoding", "getDataAsync"], input }]);
   const { data: transcodingData } = clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input);
 
   const [view, setView] = useState<View>(options.defaultView);
diff --git a/packages/widgets/src/media-transcoding/index.ts b/packages/widgets/src/media-transcoding/index.ts
index f333f3168..fc91622e3 100644
--- a/packages/widgets/src/media-transcoding/index.ts
+++ b/packages/widgets/src/media-transcoding/index.ts
@@ -4,13 +4,15 @@ import { z } from "zod/v4";
 import { capitalize } from "@homarr/common";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const views = ["workers", "queue", "statistics"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaTranscoding", {
   icon: IconTransform,
+  queryKey: [["widget", "mediaTranscoding", "getDataAsync"]],
+  queryMatcher: matchesWidgetRuntimeQuery,
   maxIntegrations: 1,
   refetchInterval: null,
   createOptions() {
diff --git a/packages/widgets/src/minecraft/server-status/index.ts b/packages/widgets/src/minecraft/server-status/index.ts
index 028393955..1215c1731 100644
--- a/packages/widgets/src/minecraft/server-status/index.ts
+++ b/packages/widgets/src/minecraft/server-status/index.ts
@@ -1,12 +1,18 @@
 import { IconBrandMinecraft } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("minecraftServerStatus", {
   icon: IconBrandMinecraft,
-  queryKey: [["widget", "minecraft"]],
+  queryKey: [["widget", "minecraft", "getServerStatus"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      title: scope.options.title,
+      domain: scope.options.domain,
+      isBedrockServer: scope.options.isBedrockServer,
+    }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 42c346dbc..720ded0a0 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -53,7 +53,6 @@ import { Table } from "@tiptap/extension-table";
 import { TableCell } from "@tiptap/extension-table-cell";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableRow } from "@tiptap/extension-table-row";
-import { TaskItem } from "@tiptap/extension-task-item";
 import { TaskList } from "@tiptap/extension-task-list";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { TextStyle } from "@tiptap/extension-text-style";
@@ -61,7 +60,6 @@ import type { Editor } from "@tiptap/react";
 import { useEditor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { StarterKit } from "@tiptap/starter-kit";
-import type { Node } from "prosemirror-model";
 
 import { clientApi } from "@homarr/api/client";
 import { useForm } from "@homarr/form";
@@ -70,6 +68,7 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import { createReadOnlyTaskItemTransaction, ReadOnlyTaskItem } from "./read-only-task-item";
 import { NotebookTextDirection, setTextDirection } from "./text-direction";
 
 import "@mantine/tiptap/styles.css";
@@ -208,17 +207,20 @@ export function Notebook({
         }),
         TableHeader,
         TableRow,
-        TaskItem.configure({
+        ReadOnlyTaskItem.configure({
           nested: true,
-          onReadOnlyChecked: (node, checked) => {
+          onReadOnlyChecked: () => {
             if (!allowReadOnlyCheckRef.current) return false;
             if (!canChangeRef.current) return false;
-
+            return true;
+          },
+          onReadOnlyCheckedAtPosition: (position, checked) => {
+            if (!allowReadOnlyCheckRef.current) return;
+            if (!canChangeRef.current) return;
             const event = new CustomEvent(readOnlyCheckEventName, {
-              detail: { node, checked },
+              detail: { position, checked },
             });
             dispatchEvent(event);
-            return true;
           },
         }),
         TaskList.configure({ itemTypeName: "taskItem" }),
@@ -243,25 +245,17 @@ export function Notebook({
     (event: Event) => {
       if (!allowReadOnlyCheckRef.current) return;
       if (!editor) return;
-      const { detail } = event as CustomEvent<{ node: Node; checked: boolean }>;
+      const { detail } = event as CustomEvent<{ position: number; checked: boolean }>;
+      const transaction = createReadOnlyTaskItemTransaction(editor.state, detail.position, detail.checked);
+      if (!transaction) return;
 
-      editor.state.doc.descendants((subnode, pos) => {
-        if (!detail) return;
-        if (!subnode.eq(detail.node)) return;
-
-        const { tr } = editor.state;
-        tr.setNodeMarkup(pos, undefined, {
-          ...detail.node.attrs,
-          checked: detail.checked,
-        });
-        editor.view.dispatch(tr);
-        const nextContent = editor.getHTML();
-        setContent(nextContent);
-        void handleContentUpdate(nextContent).then((wasSaved) => {
-          if (wasSaved) return;
-          setContent(previousContentRef.current);
-          editor.commands.setContent(previousContentRef.current);
-        });
+      editor.view.dispatch(transaction);
+      const nextContent = editor.getHTML();
+      setContent(nextContent);
+      void handleContentUpdate(nextContent).then((wasSaved) => {
+        if (wasSaved) return;
+        setContent(previousContentRef.current);
+        editor.commands.setContent(previousContentRef.current);
       });
     },
     [editor, handleContentUpdate],
diff --git a/packages/widgets/src/notebook/read-only-task-item.spec.ts b/packages/widgets/src/notebook/read-only-task-item.spec.ts
new file mode 100644
index 000000000..a6f99a368
--- /dev/null
+++ b/packages/widgets/src/notebook/read-only-task-item.spec.ts
@@ -0,0 +1,96 @@
+import { Editor } from "@tiptap/core";
+import { TaskList } from "@tiptap/extension-task-list";
+import { Schema } from "@tiptap/pm/model";
+import { EditorState } from "@tiptap/pm/state";
+import { StarterKit } from "@tiptap/starter-kit";
+import { describe, expect, it } from "vitest";
+
+import { createReadOnlyTaskItemTransaction, ReadOnlyTaskItem } from "./read-only-task-item";
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: "taskList" },
+    paragraph: { content: "text*" },
+    text: { inline: true },
+    taskList: { content: "taskItem+" },
+    taskItem: {
+      attrs: { checked: { default: false } },
+      content: "paragraph",
+    },
+  },
+});
+
+const createTaskItem = () =>
+  schema.node("taskItem", { checked: false }, [schema.node("paragraph", null, [schema.text("Duplicate task")])]);
+
+describe("read-only task item updates", () => {
+  it("reports the exact position of the clicked duplicate task", () => {
+    const element = document.createElement("div");
+    let clickedPosition: number | undefined;
+    const editor = new Editor({
+      element,
+      editable: false,
+      extensions: [
+        StarterKit,
+        TaskList.configure({ itemTypeName: "taskItem" }),
+        ReadOnlyTaskItem.configure({
+          nested: true,
+          onReadOnlyChecked: () => true,
+          onReadOnlyCheckedAtPosition: (position) => {
+            clickedPosition = position;
+          },
+        }),
+      ],
+      content: {
+        type: "doc",
+        content: [
+          {
+            type: "taskList",
+            content: [
+              { type: "taskItem", attrs: { checked: false }, content: [{ type: "paragraph", content: [] }] },
+              { type: "taskItem", attrs: { checked: false }, content: [{ type: "paragraph", content: [] }] },
+            ],
+          },
+        ],
+      },
+    });
+
+    try {
+      const positions: number[] = [];
+      editor.state.doc.descendants((node, position) => {
+        if (node.type.name === "taskItem") positions.push(position);
+      });
+      const secondPosition = positions[1];
+      const secondCheckbox = element.querySelectorAll<HTMLInputElement>('input[type="checkbox"]').item(1);
+      if (secondPosition === undefined || !secondCheckbox) throw new Error("Expected a second task item checkbox");
+
+      secondCheckbox.checked = true;
+      secondCheckbox.dispatchEvent(new Event("change", { bubbles: true }));
+
+      expect(clickedPosition).toBe(secondPosition);
+    } finally {
+      editor.destroy();
+    }
+  });
+
+  it("updates the selected position when task items are structurally identical", () => {
+    const doc = schema.node("doc", null, [schema.node("taskList", null, [createTaskItem(), createTaskItem()])]);
+    const taskItemPositions: number[] = [];
+    doc.descendants((node, position) => {
+      if (node.type.name === "taskItem") taskItemPositions.push(position);
+    });
+    const secondTaskItemPosition = taskItemPositions[1];
+    if (secondTaskItemPosition === undefined) throw new Error("Expected a second task item");
+
+    const state = EditorState.create({ doc });
+    const transaction = createReadOnlyTaskItemTransaction(state, secondTaskItemPosition, true);
+    if (!transaction) throw new Error("Expected a task-item transaction");
+    const nextState = state.apply(transaction);
+    const checkedStates: boolean[] = [];
+    nextState.doc.descendants((node) => {
+      if (node.type.name === "taskItem") checkedStates.push(Boolean(node.attrs.checked));
+    });
+
+    expect(checkedStates).toEqual([false, true]);
+  });
+});
diff --git a/packages/widgets/src/notebook/read-only-task-item.ts b/packages/widgets/src/notebook/read-only-task-item.ts
new file mode 100644
index 000000000..88770a110
--- /dev/null
+++ b/packages/widgets/src/notebook/read-only-task-item.ts
@@ -0,0 +1,66 @@
+import type { NodeViewRenderer } from "@tiptap/core";
+import { TaskItem } from "@tiptap/extension-task-item";
+import type { TaskItemOptions } from "@tiptap/extension-task-item";
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+
+interface ReadOnlyTaskItemOptions extends TaskItemOptions {
+  onReadOnlyCheckedAtPosition?: (position: number, checked: boolean) => void;
+}
+
+export const ReadOnlyTaskItem = TaskItem.extend<ReadOnlyTaskItemOptions>({
+  addOptions() {
+    const parentOptions = this.parent?.();
+    return {
+      onReadOnlyChecked: parentOptions?.onReadOnlyChecked,
+      nested: parentOptions?.nested ?? false,
+      HTMLAttributes: parentOptions?.HTMLAttributes ?? {},
+      taskListTypeName: parentOptions?.taskListTypeName ?? "taskList",
+      a11y: parentOptions?.a11y,
+      onReadOnlyCheckedAtPosition: undefined,
+    };
+  },
+  addNodeView() {
+    const parentNodeView = this.parent?.() as NodeViewRenderer | undefined;
+    if (!parentNodeView) return null;
+
+    return (props) => {
+      const nodeView = parentNodeView(props);
+      const checkbox =
+        nodeView.dom instanceof HTMLElement
+          ? nodeView.dom.querySelector<HTMLInputElement>('input[type="checkbox"]')
+          : null;
+      if (!checkbox) return nodeView;
+
+      const handleChange = () => {
+        if (props.editor.isEditable) return;
+        const position = props.getPos();
+        if (typeof position !== "number") return;
+        this.options.onReadOnlyCheckedAtPosition?.(position, checkbox.checked);
+      };
+      checkbox.addEventListener("change", handleChange);
+      const destroyParent = nodeView.destroy?.bind(nodeView);
+
+      return {
+        ...nodeView,
+        destroy() {
+          checkbox.removeEventListener("change", handleChange);
+          destroyParent?.();
+        },
+      };
+    };
+  },
+});
+
+export const createReadOnlyTaskItemTransaction = (
+  state: EditorState,
+  position: number,
+  checked: boolean,
+): Transaction | null => {
+  const taskItem = state.doc.nodeAt(position);
+  if (taskItem?.type.name !== "taskItem") return null;
+
+  return state.tr.setNodeMarkup(position, undefined, {
+    ...taskItem.attrs,
+    checked,
+  });
+};
diff --git a/packages/widgets/src/notifications/index.ts b/packages/widgets/src/notifications/index.ts
index 17fd13393..0f34f5609 100644
--- a/packages/widgets/src/notifications/index.ts
+++ b/packages/widgets/src/notifications/index.ts
@@ -2,11 +2,17 @@ import { IconMessage } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
   icon: IconMessage,
+  queryKey: [["widget", "notifications", "getNotifications"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      hideLogos: scope.options.hideLogos,
+      integrationIds: scope.integrationIds,
+    }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/releases/index.ts b/packages/widgets/src/releases/index.ts
index 62fa7ebab..f190ed9dc 100644
--- a/packages/widgets/src/releases/index.ts
+++ b/packages/widgets/src/releases/index.ts
@@ -4,7 +4,7 @@ import { z } from "zod/v4";
 import { createId } from "@homarr/common";
 import { releaseProviderKinds } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 const relativeDateSchema = z
@@ -14,6 +14,8 @@ const relativeDateSchema = z
 
 export const { definition, componentLoader } = createWidgetDefinition("releases", {
   icon: IconRocket,
+  queryKey: [["widget", "releases", "getLatest"]],
+  queryMatcher: ({ input }, scope) => widgetQueryInputMatches(input, { itemId: scope.itemId }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/rssFeed/index.ts b/packages/widgets/src/rssFeed/index.ts
index eee7028cb..dcef56cb4 100644
--- a/packages/widgets/src/rssFeed/index.ts
+++ b/packages/widgets/src/rssFeed/index.ts
@@ -1,7 +1,7 @@
 import { IconRss } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 /**
@@ -12,6 +12,12 @@ import { optionsBuilder } from "../options";
  */
 export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
   icon: IconRss,
+  queryKey: [["widget", "rssFeed", "getFeeds"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      urls: scope.options.feedUrls,
+      maximumAmountPosts: scope.options.maximumAmountPosts,
+    }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index e0f90bd52..197832f34 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -7,7 +7,7 @@ import { IconBinaryTree } from "@tabler/icons-react";
 import { clientApi } from "@homarr/api/client";
 import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentLocale, useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 
@@ -20,6 +20,7 @@ export default function SmartHomeEntityStateWidget({
   displayMode,
 }: WidgetComponentProps<"smartHome-entityState">) {
   const t = useI18n();
+  const locale = useCurrentLocale();
   // It will always have at least one integration as otherwise the NoIntegrationSelectedError would be thrown in item-content.tsx
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const integrationId = integrationIds[0]!;
@@ -123,7 +124,7 @@ export default function SmartHomeEntityStateWidget({
               </Text>
               <Text size="xs" c="dimmed">
                 {t("widget.smartHome-entityState.advanced.lastUpdated", {
-                  date: new Date(entity.last_updated).toLocaleString(),
+                  date: new Date(entity.last_updated).toLocaleString(locale),
                 })}
               </Text>
             </>
diff --git a/packages/widgets/src/speedtest-tracker/component.tsx b/packages/widgets/src/speedtest-tracker/component.tsx
index c243d1fef..56fbfa07e 100644
--- a/packages/widgets/src/speedtest-tracker/component.tsx
+++ b/packages/widgets/src/speedtest-tracker/component.tsx
@@ -37,12 +37,16 @@ export default function SpeedtestTrackerWidget({
     (options.showLatestResult && combined.latestResult !== null) || (options.showStats && combined.stats !== null);
   const hasChart = options.showRecentResults && recentFiltered.length > 0;
   const noSectionsEnabled = !options.showLatestResult && !options.showStats && !options.showRecentResults;
+  const advancedSectionWidth = width >= 720 ? width / 2 : width;
 
   const latest = options.showLatestResult && combined.latestResult && (
-    <LatestResultSection result={combined.latestResult} width={displayMode === "advanced" ? width / 2 : width} />
+    <LatestResultSection
+      result={combined.latestResult}
+      width={displayMode === "advanced" ? advancedSectionWidth : width}
+    />
   );
   const averages = options.showStats && combined.stats && (
-    <AveragesSection stats={combined.stats} width={displayMode === "advanced" ? width / 2 : width} />
+    <AveragesSection stats={combined.stats} width={displayMode === "advanced" ? advancedSectionWidth : width} />
   );
 
   if (displayMode === "advanced") {
@@ -69,6 +73,12 @@ export default function SpeedtestTrackerWidget({
             <RecentResultsSection results={recentFiltered} showPingGraph={options.showPingGraph} />
           </div>
         )}
+        {noSectionsEnabled && (
+          <Text c="dimmed" ta="center" size="sm">
+            {t("noSectionsEnabled")}
+          </Text>
+        )}
+        {!noSectionsEnabled && !hasStatSection && !hasChart && <WidgetEmptyState />}
       </Stack>
     );
   }
diff --git a/packages/widgets/src/stocks/index.ts b/packages/widgets/src/stocks/index.ts
index ba44f481e..7cdcbb37e 100644
--- a/packages/widgets/src/stocks/index.ts
+++ b/packages/widgets/src/stocks/index.ts
@@ -1,6 +1,6 @@
 import { IconBuildingBank } from "@tabler/icons-react";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const stockPriceTimeFrames = {
@@ -13,6 +13,13 @@ const timeIntervalOptions = stockPriceTimeFrames.interval;
 
 export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
   icon: IconBuildingBank,
+  queryKey: [["widget", "stockPrice", "getPriceHistory"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      stock: scope.options.stock,
+      timeRange: scope.options.timeRange,
+      timeInterval: scope.options.timeInterval,
+    }),
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index be74352de..18006fd9d 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -136,7 +136,7 @@ const SystemCharts = ({
   showTitle,
 }: SystemChartsProps) => {
   const showNetwork =
-    items.length > 0 && items.every((item) => item.network !== null) && options.visibleCharts.includes("network");
+    items.length > 0 && items[items.length - 1]?.network !== null && options.visibleCharts.includes("network");
   const chartCount = options.visibleCharts.filter((chart) => chart !== "network").length + Number(showNetwork);
   const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
   const chartHeight = isAdvanced
diff --git a/packages/widgets/src/tracearr/component.spec.ts b/packages/widgets/src/tracearr/component.spec.ts
new file mode 100644
index 000000000..171dead78
--- /dev/null
+++ b/packages/widgets/src/tracearr/component.spec.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+
+import { getAdvancedColumnWidth } from "./component";
+
+describe("Tracearr advanced layout", () => {
+  it("subtracts grid padding and the inter-column gap", () => {
+    expect(getAdvancedColumnWidth(800, true)).toBe(376);
+    expect(getAdvancedColumnWidth(801, true)).toBe(376.5);
+  });
+
+  it("subtracts only grid padding in a single-column layout", () => {
+    expect(getAdvancedColumnWidth(799, false)).toBe(767);
+  });
+});
diff --git a/packages/widgets/src/tracearr/component.tsx b/packages/widgets/src/tracearr/component.tsx
index f026b5710..17f6df5bc 100644
--- a/packages/widgets/src/tracearr/component.tsx
+++ b/packages/widgets/src/tracearr/component.tsx
@@ -14,6 +14,10 @@ import { StatsBar } from "./stats-section";
 import { StreamsList } from "./streams-section";
 import { ViolationsList } from "./violations-section";
 
+const ADVANCED_GRID_BREAKPOINT = 800;
+const ADVANCED_GRID_GAP_PX = 16;
+const ADVANCED_GRID_PADDING_PX = 16;
+
 export default function TracearrWidget({
   options,
   integrationIds,
@@ -122,14 +126,20 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
   const recentActivity = combined.recentActivity?.data ?? [];
 
   if (displayMode === "advanced") {
+    const isTwoColumn = width >= ADVANCED_GRID_BREAKPOINT;
+    const columnWidth = getAdvancedColumnWidth(width, isTwoColumn);
     return (
       <ScrollArea h="100%">
-        <SimpleGrid cols={width >= 800 ? 2 : 1} spacing="md" p="md">
+        <SimpleGrid
+          cols={isTwoColumn ? 2 : 1}
+          spacing={`${ADVANCED_GRID_GAP_PX}px`}
+          p={`${ADVANCED_GRID_PADDING_PX}px`}
+        >
           <Stack gap="sm">
             {options.showStats && (
-              <StatsBar stats={combined.stats} summary={combined.streams.summary} width={width / 2} />
+              <StatsBar stats={combined.stats} summary={combined.streams.summary} width={columnWidth} />
             )}
-            {options.showStreams && <StreamsList streams={streams} width={width / 2} />}
+            {options.showStreams && <StreamsList streams={streams} width={columnWidth} />}
           </Stack>
           <Stack gap="sm">
             {options.showViolations && <ViolationsList violations={violations} />}
@@ -156,3 +166,8 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
     </ScrollArea>
   );
 }
+
+export const getAdvancedColumnWidth = (width: number, isTwoColumn: boolean) => {
+  const contentWidth = Math.max(0, width - ADVANCED_GRID_PADDING_PX * 2);
+  return isTwoColumn ? Math.max(0, (contentWidth - ADVANCED_GRID_GAP_PX) / 2) : contentWidth;
+};
diff --git a/packages/widgets/src/umami/component.tsx b/packages/widgets/src/umami/component.tsx
index 73ccaf679..c44fb8566 100644
--- a/packages/widgets/src/umami/component.tsx
+++ b/packages/widgets/src/umami/component.tsx
@@ -5,6 +5,7 @@ import { Stack, Text } from "@mantine/core";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { setWidgetRuntimeQueries } from "../definition";
 import { UmamiContent } from "./umami-content";
 
 export default function UmamiWidget({
@@ -12,11 +13,55 @@ export default function UmamiWidget({
   integrationIds,
   width,
   displayMode = "compact",
+  widgetStateRef,
 }: WidgetComponentProps<"umami">) {
   if (!options.websiteId || options.websiteId.trim() === "") {
+    setWidgetRuntimeQueries(widgetStateRef, []);
     return <NoWebsiteConfigured />;
   }
 
+  const integrationId = integrationIds[0] ?? "";
+  const commonTopInput = {
+    integrationId,
+    websiteId: options.websiteId,
+    timeFrame: options.timeFrame,
+    limit: options.topCount,
+  };
+  setWidgetRuntimeQueries(widgetStateRef, [
+    {
+      path: ["widget", "umami", "getVisitorStats"],
+      input: {
+        integrationIds,
+        websiteId: options.websiteId,
+        timeFrame: options.timeFrame,
+        eventName: options.eventName || undefined,
+      },
+    },
+    {
+      path: ["widget", "umami", "getActiveVisitors"],
+      input: { integrationId, websiteId: options.websiteId },
+    },
+    ...(options.viewMode === "events"
+      ? [
+          {
+            path: ["widget", "umami", "getMultiEventTimeSeries"],
+            input: {
+              integrationId,
+              websiteId: options.websiteId,
+              timeFrame: options.timeFrame,
+              eventNames: [...options.eventNames].toSorted(),
+            },
+          },
+        ]
+      : []),
+    ...(displayMode === "advanced" || options.viewMode === "topPages"
+      ? [{ path: ["widget", "umami", "getTopPages"], input: commonTopInput }]
+      : []),
+    ...(displayMode === "advanced" || options.viewMode === "topReferrers"
+      ? [{ path: ["widget", "umami", "getTopReferrers"], input: commonTopInput }]
+      : []),
+  ]);
+
   return (
     <UmamiContent
       integrationIds={integrationIds}
diff --git a/packages/widgets/src/umami/index.ts b/packages/widgets/src/umami/index.ts
index eb844575b..423eebebe 100644
--- a/packages/widgets/src/umami/index.ts
+++ b/packages/widgets/src/umami/index.ts
@@ -1,13 +1,21 @@
 import { IconChartBar, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, matchesWidgetRuntimeQuery } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth"] as const;
 
 export const { definition, componentLoader } = createWidgetDefinition("umami", {
   icon: IconChartBar,
+  queryKeys: [
+    [["widget", "umami", "getVisitorStats"]],
+    [["widget", "umami", "getActiveVisitors"]],
+    [["widget", "umami", "getMultiEventTimeSeries"]],
+    [["widget", "umami", "getTopPages"]],
+    [["widget", "umami", "getTopReferrers"]],
+  ],
+  queryMatcher: matchesWidgetRuntimeQuery,
   refetchInterval: null,
   supportedIntegrations: ["umami"],
   integrationsRequired: true,
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 17422a3a1..ed048c1b4 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -216,19 +216,23 @@ export function UmamiContent({
         {displayMode === "advanced" ? (
           <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="md" h="100%">
             <Box mih={260}>{selectedView}</Box>
-            <SimpleGrid cols={2} spacing="md" mih={260}>
-              <UmamiTopPagesContent
-                integrationIds={integrationIds}
-                websiteId={websiteId}
-                timeFrame={timeFrame}
-                limit={topCount}
-              />
-              <UmamiTopReferrersContent
-                integrationIds={integrationIds}
-                websiteId={websiteId}
-                timeFrame={timeFrame}
-                limit={topCount}
-              />
+            <SimpleGrid cols={viewMode === "topPages" || viewMode === "topReferrers" ? 1 : 2} spacing="md" mih={260}>
+              {viewMode !== "topPages" && (
+                <UmamiTopPagesContent
+                  integrationIds={integrationIds}
+                  websiteId={websiteId}
+                  timeFrame={timeFrame}
+                  limit={topCount}
+                />
+              )}
+              {viewMode !== "topReferrers" && (
+                <UmamiTopReferrersContent
+                  integrationIds={integrationIds}
+                  websiteId={websiteId}
+                  timeFrame={timeFrame}
+                  limit={topCount}
+                />
+              )}
             </SimpleGrid>
           </SimpleGrid>
         ) : (
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index b77d66afb..b4fbd6be9 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -201,7 +201,8 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
                   {monitor.name}
                 </Text>
                 <Badge size="xs" color="red">
-                  {t("status.down")} · {formatNumber(monitor.uptimePercent24h ?? 0, 1)}%
+                  {t("status.down")} ·{" "}
+                  {monitor.uptimePercent24h === null ? "—" : `${formatNumber(monitor.uptimePercent24h, 1)}%`}
                 </Badge>
               </Group>
             ))}
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index d2346e6ae..4b3c6c0bc 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -235,7 +235,7 @@ function Forecast({
               </Text>
               {showDetails && (
                 <Text fz="xs" c="dimmed">
-                  {getPreferredUnit(dayWeather.minTemp, options.isFormatFahrenheit, true)}
+                  {getPreferredUnit(dayWeather.minTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
                 </Text>
               )}
             </Stack>
diff --git a/packages/widgets/src/weather/index.ts b/packages/widgets/src/weather/index.ts
index 6c30b6df8..978c9a855 100644
--- a/packages/widgets/src/weather/index.ts
+++ b/packages/widgets/src/weather/index.ts
@@ -2,11 +2,22 @@ import { IconCloud } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import { z } from "zod/v4";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("weather", {
   icon: IconCloud,
+  queryKey: [["widget", "weather", "atLocation"]],
+  queryMatcher: ({ input }, scope) => {
+    const location = scope.options.location;
+    if (location === null || typeof location !== "object" || !("latitude" in location) || !("longitude" in location)) {
+      return false;
+    }
+    return widgetQueryInputMatches(input, {
+      latitude: location.latitude,
+      longitude: location.longitude,
+    });
+  },
   createOptions() {
     return optionsBuilder.from(
       (factory) => ({

From 6f27ede8bf2007c365d77bb853b401eca8ccccdb Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 08:05:04 +0200
Subject: [PATCH 05/75] fix: complete widget modernization review

---
 apps/docs/docs/management/api/index.mdx       |   7 +
 apps/docs/docs/widgets/calendar/index.mdx     |   1 +
 .../docs/widgets/media-request-list/index.mdx |   1 +
 .../widgets/media-request-stats/index.mdx     |   1 +
 apps/docs/docs/widgets/media-server/index.mdx |   1 +
 .../board/items/widget-query-scope.ts         |  21 +--
 .../board-empty-space-context-menu.tsx        |  36 ++--
 e2e/board-advanced-interactions.spec.ts       |  14 +-
 .../partial-integration-failures.spec.ts      | 175 ++++++++++++++++++
 .../widgets/__tests__/beszel-failures.spec.ts |  17 --
 .../api/src/router/widgets/beszel-failures.ts |   5 -
 packages/api/src/router/widgets/beszel.ts     |  19 +-
 packages/api/src/router/widgets/calendar.ts   |  42 +++--
 .../api/src/router/widgets/media-requests.ts  |  70 ++++++-
 .../api/src/router/widgets/media-server.ts    |  36 ++--
 packages/modals/src/index.tsx                 |   1 +
 .../widgets/src/audio-stats/component.tsx     |   7 +
 .../widgets/src/beszel-alerts/component.tsx   |   4 +-
 .../src/beszel-system-grid/component.tsx      |   6 +-
 .../src/beszel-system-stats/component.tsx     |   6 +-
 .../src/beszel-system-table/component.tsx     |   4 +-
 .../src/beszel/_shared/error-indicator.tsx    |  25 ---
 packages/widgets/src/calendar/component.tsx   |  26 ++-
 .../common/integration-error-indicator.tsx    |  38 ++++
 packages/widgets/src/definition.ts            |  17 +-
 .../src/health-monitoring/component.tsx       |  13 +-
 .../src/health-monitoring/system-health.tsx   |   5 +-
 packages/widgets/src/index.tsx                |   7 +-
 .../src/media-requests/list/component.tsx     |  36 ++--
 .../src/media-requests/stats/component.tsx    |  11 +-
 .../widgets/src/media-server/component.tsx    |  10 +
 packages/widgets/src/traefik/component.tsx    |  91 +++++----
 packages/widgets/src/umami/component.tsx      |   2 +
 packages/widgets/src/umami/umami-content.tsx  |  68 ++++---
 .../widgets/src/uptime-kuma/component.tsx     |  63 ++++---
 35 files changed, 621 insertions(+), 265 deletions(-)
 create mode 100644 packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
 delete mode 100644 packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts
 delete mode 100644 packages/api/src/router/widgets/beszel-failures.ts
 delete mode 100644 packages/widgets/src/beszel/_shared/error-indicator.tsx
 create mode 100644 packages/widgets/src/common/integration-error-indicator.tsx

diff --git a/apps/docs/docs/management/api/index.mdx b/apps/docs/docs/management/api/index.mdx
index 2c5bd42e2..833cfd2d5 100644
--- a/apps/docs/docs/management/api/index.mdx
+++ b/apps/docs/docs/management/api/index.mdx
@@ -83,3 +83,10 @@ The OpenAPI and MCP APIs include board management endpoints for common automatio
 - Configure global board defaults such as public home boards and status behavior
 
 Use the interactive API reference to inspect the exact request body for each endpoint under the `boards` and `settings` tags.
+
+## Partial integration failures
+
+Multi-integration widget queries keep data from integrations that remain available. Calendar and media-server results include
+an optional `error` on a failed integration; media-request responses expose a `failedIntegrations` array, and the latest
+requests endpoint returns its items in `requests`. When every selected integration fails, the query returns an error instead
+of a partial response.
diff --git a/apps/docs/docs/widgets/calendar/index.mdx b/apps/docs/docs/widgets/calendar/index.mdx
index 3e1e3f180..174391e18 100644
--- a/apps/docs/docs/widgets/calendar/index.mdx
+++ b/apps/docs/docs/widgets/calendar/index.mdx
@@ -74,6 +74,7 @@ import withoutIntegrations from "./img/without-integrations.png";
 - Hover over a marked date to preview its events in a popover.
 - Click on a marked date to pin the popover open (it will stay visible even after moving the mouse away).
 - Click the date again or click outside to close the pinned popover.
+- If one selected integration is unavailable, its warning indicator remains visible while events from healthy integrations continue to load.
 
 <WidgetInteractionGuide />
 
diff --git a/apps/docs/docs/widgets/media-request-list/index.mdx b/apps/docs/docs/widgets/media-request-list/index.mdx
index 68f3a27ab..4bd3aa6d1 100644
--- a/apps/docs/docs/widgets/media-request-list/index.mdx
+++ b/apps/docs/docs/widgets/media-request-list/index.mdx
@@ -46,6 +46,7 @@ import mediaRequestList from "./img/list.png";
 
 - Approve / decline a request by clicking on the thumbs up or down icon.
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+- A warning indicator identifies unavailable integrations without hiding requests returned by healthy integrations.
 
 <WidgetInteractionGuide />
 
diff --git a/apps/docs/docs/widgets/media-request-stats/index.mdx b/apps/docs/docs/widgets/media-request-stats/index.mdx
index b659f9e27..fe8055826 100644
--- a/apps/docs/docs/widgets/media-request-stats/index.mdx
+++ b/apps/docs/docs/widgets/media-request-stats/index.mdx
@@ -43,6 +43,7 @@ import mediaRequestStats from "./img/stats.png";
 ### Interactions
 
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
+- A warning indicator identifies unavailable integrations while totals from healthy integrations remain visible.
 
 <WidgetInteractionGuide />
 
diff --git a/apps/docs/docs/widgets/media-server/index.mdx b/apps/docs/docs/widgets/media-server/index.mdx
index 685032f90..3749cd6ae 100644
--- a/apps/docs/docs/widgets/media-server/index.mdx
+++ b/apps/docs/docs/widgets/media-server/index.mdx
@@ -25,6 +25,7 @@ The media server widget shows active sessions across your media servers.
 It shows playback progress, pause state, time remaining, and whether each session is direct play, direct stream, or transcoding audio or video. Location and bitrate can be toggled independently.
 
 Select a session to inspect its media metadata. Advanced mode adds search, sorting, and a summary of playing and transcoding sessions while keeping separate integration instances identifiable.
+If one selected server is unavailable, a warning indicator identifies the degraded result while sessions from healthy servers remain usable.
 
 ### Screenshots
 
diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.ts b/apps/nextjs/src/components/board/items/widget-query-scope.ts
index 03ae7a1d3..fd7c9edb3 100644
--- a/apps/nextjs/src/components/board/items/widget-query-scope.ts
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.ts
@@ -1,7 +1,7 @@
 import type { QueryKey } from "@tanstack/react-query";
-import { hashKey } from "@tanstack/react-query";
 
-import type { NormalizedWidgetQuery, WidgetQueryMatcher, WidgetQueryMatcherScope } from "@homarr/widgets";
+import type { WidgetQueryMatcher, WidgetQueryMatcherScope } from "@homarr/widgets";
+import { normalizeWidgetQuery, widgetQueryValueEquals } from "@homarr/widgets";
 
 export const matchesWidgetItemQuery = (
   queryKey: QueryKey,
@@ -16,15 +16,6 @@ export const matchesWidgetItemQuery = (
   return matchesQueryInput(query.input, scope);
 };
 
-const normalizeWidgetQuery = (queryKey: QueryKey): NormalizedWidgetQuery | null => {
-  const path = queryKey[0];
-  if (!Array.isArray(path) || !path.every((part): part is string => typeof part === "string")) return null;
-
-  const queryKeyOptions = queryKey[1];
-  const input = isRecord(queryKeyOptions) && "input" in queryKeyOptions ? queryKeyOptions.input : undefined;
-  return { path, input };
-};
-
 const matchesDefinitionPath = (path: readonly string[], candidate: QueryKey) => {
   const candidatePath = candidate[0];
   return (
@@ -36,7 +27,7 @@ const matchesDefinitionPath = (path: readonly string[], candidate: QueryKey) =>
 const matchesQueryInput = (input: unknown, scope: WidgetQueryMatcherScope) => {
   if (input == null) return true;
   if (Array.isArray(input)) {
-    return isEqual(input, scope.integrationIds) || containsValue(scope.options, input);
+    return widgetQueryValueEquals(input, scope.integrationIds) || containsValue(scope.options, input);
   }
 
   if (!isRecord(input)) {
@@ -62,7 +53,7 @@ const matchesQueryInput = (input: unknown, scope: WidgetQueryMatcherScope) => {
       continue;
     }
     if (key === "integrationIds") {
-      if (!isEqual(value, scope.integrationIds)) return false;
+      if (!widgetQueryValueEquals(value, scope.integrationIds)) return false;
       continue;
     }
 
@@ -81,14 +72,12 @@ const matchesAnyScopedValue = (value: unknown, scope: WidgetQueryMatcherScope) =
 const isIdentityKey = (key: string) => key === "id" || key.endsWith("Id") || key.endsWith("Ids");
 
 const containsValue = (container: unknown, expected: unknown, seen = new WeakSet<object>()): boolean => {
-  if (isEqual(container, expected)) return true;
+  if (widgetQueryValueEquals(container, expected)) return true;
   if (container === null || typeof container !== "object" || seen.has(container)) return false;
   seen.add(container);
 
   return Object.values(container).some((value) => containsValue(value, expected, seen));
 };
 
-const isEqual = (left: unknown, right: unknown) => hashKey([left]) === hashKey([right]);
-
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   value !== null && typeof value === "object" && !Array.isArray(value);
diff --git a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
index cfd98717c..f1dfc2678 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
+++ b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
@@ -48,6 +48,15 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
   const returnFocusRef = useRef<HTMLElement | null>(null);
 
   const enabled = hasChangeAccess && settings.enableRightClickOnWidgets;
+  const closeMenu = (afterFocusRestore?: (returnFocus: HTMLElement | null) => void) => {
+    const returnFocus = returnFocusRef.current;
+    returnFocusRef.current = null;
+    setMenu(null);
+    requestAnimationFrame(() => {
+      returnFocus?.focus();
+      afterFocusRestore?.(returnFocus);
+    });
+  };
   const clearLongPress = () => {
     if (longPressTimer.current !== null) {
       clearTimeout(longPressTimer.current);
@@ -174,15 +183,11 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
       <Menu
         opened={menu !== null}
         onChange={(opened) => {
-          if (!opened) {
-            setMenu(null);
-            const returnFocus = returnFocusRef.current;
-            returnFocusRef.current = null;
-            requestAnimationFrame(() => returnFocus?.focus());
-          }
+          if (!opened) closeMenu();
         }}
         withinPortal
         position="bottom-start"
+        returnFocus={false}
       >
         <Menu.Target>
           <Box pos="fixed" left={menu?.x ?? 0} top={menu?.y ?? 0} w={1} h={1} style={{ pointerEvents: "none" }} />
@@ -191,11 +196,20 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
           <Menu.Item
             leftSection={<IconPlus size={18} />}
             onClick={() => {
-              returnFocusRef.current = null;
-              if (menu) {
-                openModal({ placement: menu.placement, board, persistImmediately: !isEditMode });
-              }
-              setMenu(null);
+              const placement = menu?.placement;
+              closeMenu((returnFocus) => {
+                if (!placement) return;
+                openModal(
+                  { placement, board, persistImmediately: !isEditMode },
+                  {
+                    onClose: () => {
+                      requestAnimationFrame(() => {
+                        if (returnFocus?.isConnected) returnFocus.focus();
+                      });
+                    },
+                  },
+                );
+              });
             }}
           >
             {t("item.create.addAtPosition")}
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 4eaa687db..417f913b3 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -183,20 +183,24 @@ describe("Board advanced interactions", () => {
       const addHereMenuItem = page.getByRole("menuitem", { name: "Add item here" });
       await expect(grid).toHaveAttribute("aria-label", "Add item here");
 
-      await grid.focus();
-      await page.keyboard.press("Shift+F10");
+      await grid.press("Shift+F10");
       await expect(addHereMenuItem).toBeVisible();
+      await page.keyboard.press("ArrowDown");
+      await expect(addHereMenuItem).toBeFocused();
+      await page.keyboard.press("Enter");
+      await expect(page.getByRole("dialog").filter({ hasText: "Choose item to add" })).toBeVisible();
       await page.keyboard.press("Escape");
-      await expect(addHereMenuItem).toBeHidden();
       await expect(grid).toBeFocused();
 
       await touchAndHoldEmptyGridSpaceAsync(grid);
       await expect(addHereMenuItem).toBeVisible({ timeout: 1_000 });
       await page.keyboard.press("Escape");
+      await expect(addHereMenuItem).toBeHidden();
 
       await rightClickEmptyGridSpaceAsync(grid);
-      await addHereMenuItem.click();
-      await expect(page.getByRole("dialog").filter({ hasText: "Choose item to add" })).toBeVisible();
+      await expect(addHereMenuItem).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(addHereMenuItem).toBeHidden();
     } finally {
       await context.close();
     }
diff --git a/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
new file mode 100644
index 000000000..48d555167
--- /dev/null
+++ b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
@@ -0,0 +1,175 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { integrations, integrationUserPermissions, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+import type { IntegrationKind } from "@homarr/definitions";
+import type { MediaRequest, MediaRequestStats } from "@homarr/integrations/types";
+import type * as MediaRequestListHandlerModule from "@homarr/request-handler/media-request-list";
+
+import { calendarRouter } from "../../widgets/calendar";
+import { mediaRequestsRouter } from "../../widgets/media-requests";
+import { mediaServerRouter } from "../../widgets/media-server";
+
+vi.hoisted(() => {
+  process.env.SKIP_ENV_VALIDATION = "true";
+});
+
+const createHandler = <T>(integration: { name: string }, data: T) => ({
+  getDataAsync: async () => {
+    if (integration.name === "Offline") throw new Error("offline");
+    return { data, timestamp: new Date() };
+  },
+});
+
+vi.mock("@homarr/request-handler/calendar", () => ({
+  calendarMonthRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/media-server", () => ({
+  mediaServerRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/media-request-list", async (importOriginal) => {
+  const actual = await importOriginal<typeof MediaRequestListHandlerModule>();
+  return {
+    ...actual,
+    mediaRequestListRequestHandler: {
+      handler: (integration: { name: string }) =>
+        createHandler(integration, [
+          {
+            id: 42,
+            name: "Healthy request",
+            type: "movie",
+            backdropImageUrl: "https://example.com/backdrop.jpg",
+            posterImagePath: "https://example.com/poster.jpg",
+            href: "https://example.com/request/42",
+            createdAt: new Date("2026-08-01T12:00:00Z"),
+            status: "pending",
+            availability: "requested",
+          } satisfies MediaRequest,
+        ]),
+    },
+  };
+});
+
+vi.mock("@homarr/request-handler/media-request-stats", () => ({
+  mediaRequestStatsRequestHandler: {
+    handler: (integration: { name: string }) =>
+      createHandler(integration, {
+        stats: { total: 0, movie: 0, tv: 0, pending: 0, approved: 0, declined: 0, processing: 0, available: 0 },
+        users: [
+          {
+            id: 7,
+            displayName: "Healthy user",
+            avatar: "https://example.com/avatar.jpg",
+            requestCount: 3,
+            link: "https://example.com/user/7",
+          },
+        ],
+      } satisfies MediaRequestStats),
+  },
+}));
+
+const createSession = (userId: string): Session => ({
+  user: { id: userId, permissions: [], colorScheme: "light" },
+  expires: new Date().toISOString(),
+});
+
+const setupAsync = async (kind: IntegrationKind) => {
+  const db = createDb();
+  const userId = createId();
+  const onlineId = createId();
+  const offlineId = createId();
+  await db.insert(users).values({ id: userId });
+  await db.insert(integrations).values([
+    { id: onlineId, kind, name: "Online", url: "https://online.example.com" },
+    { id: offlineId, kind, name: "Offline", url: "https://offline.example.com" },
+  ]);
+  await db.insert(integrationUserPermissions).values([
+    { integrationId: onlineId, userId, permission: "use" },
+    { integrationId: offlineId, userId, permission: "use" },
+  ]);
+  return {
+    db: db as Database,
+    session: createSession(userId),
+    integrationIds: [onlineId, offlineId],
+    onlineId,
+    offlineId,
+  };
+};
+
+beforeEach(() => vi.clearAllMocks());
+
+describe("partial integration failures", () => {
+  test("calendar and media server retain a failed integration record", async () => {
+    const calendar = await setupAsync("sonarr");
+    const calendarResults = await calendarRouter
+      .createCaller({ db: calendar.db, deviceType: undefined, session: calendar.session })
+      .findAllEvents({
+        integrationIds: calendar.integrationIds,
+        year: 2026,
+        month: 7,
+        releaseType: [],
+        showUnmonitored: false,
+      });
+    expect(calendarResults).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ integration: expect.objectContaining({ id: calendar.offlineId }), error: "offline" }),
+      ]),
+    );
+
+    const mediaServer = await setupAsync("plex");
+    const streamResults = await mediaServerRouter
+      .createCaller({ db: mediaServer.db, deviceType: undefined, session: mediaServer.session })
+      .getCurrentStreams({ integrationIds: mediaServer.integrationIds, showOnlyPlaying: false });
+    expect(streamResults).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({ integrationId: mediaServer.offlineId, sessions: [], error: "offline" }),
+      ]),
+    );
+  });
+
+  test("media request responses expose failed integrations without dropping successful data", async () => {
+    const mediaRequests = await setupAsync("overseerr");
+    const caller = mediaRequestsRouter.createCaller({
+      db: mediaRequests.db,
+      deviceType: undefined,
+      session: mediaRequests.session,
+    });
+
+    const latest = await caller.getLatestRequests({
+      integrationIds: mediaRequests.integrationIds,
+      statuses: ["pending"],
+      recentDays: 0,
+    });
+    expect(latest.requests).toEqual([
+      expect.objectContaining({
+        id: 42,
+        name: "Healthy request",
+        integrationId: mediaRequests.onlineId,
+        integration: expect.objectContaining({ id: mediaRequests.onlineId }),
+      }),
+    ]);
+    expect(latest.failedIntegrations).toEqual([
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "offline" }),
+    ]);
+
+    const stats = await caller.getStats({ integrationIds: mediaRequests.integrationIds });
+    expect(stats.failedIntegrations).toEqual([
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "offline" }),
+    ]);
+    expect(stats.stats).toHaveLength(1);
+    expect(stats.users).toEqual([
+      expect.objectContaining({
+        id: 7,
+        displayName: "Healthy user",
+        integration: expect.objectContaining({ id: mediaRequests.onlineId }),
+      }),
+    ]);
+  });
+});
diff --git a/packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts b/packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts
deleted file mode 100644
index 905ac00a4..000000000
--- a/packages/api/src/router/widgets/__tests__/beszel-failures.spec.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { everyBeszelIntegrationFailed } from "../beszel-failures";
-
-describe("everyBeszelIntegrationFailed", () => {
-  it("keeps partial successes", () => {
-    expect(everyBeszelIntegrationFailed([{ error: "offline" }, {}])).toBe(false);
-  });
-
-  it("detects when every integration failed", () => {
-    expect(everyBeszelIntegrationFailed([{ error: "offline" }, { error: "timeout" }])).toBe(true);
-  });
-
-  it("allows an empty integration selection", () => {
-    expect(everyBeszelIntegrationFailed([])).toBe(false);
-  });
-});
diff --git a/packages/api/src/router/widgets/beszel-failures.ts b/packages/api/src/router/widgets/beszel-failures.ts
deleted file mode 100644
index e7d75f87d..000000000
--- a/packages/api/src/router/widgets/beszel-failures.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const everyBeszelIntegrationFailed = (results: readonly unknown[]) =>
-  results.length > 0 &&
-  results.every(
-    (result) => typeof result === "object" && result !== null && "error" in result && result.error !== undefined,
-  );
diff --git a/packages/api/src/router/widgets/beszel.ts b/packages/api/src/router/widgets/beszel.ts
index 1380bc405..8cfc3e166 100644
--- a/packages/api/src/router/widgets/beszel.ts
+++ b/packages/api/src/router/widgets/beszel.ts
@@ -13,7 +13,6 @@ import {
 import { settleIntegrationQueries } from "../../settle-integrations";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
-import { everyBeszelIntegrationFailed } from "./beszel-failures";
 import { BoundedAsyncQueue } from "./bounded-async-queue";
 
 const logger = createLogger({ module: "beszelRouter" });
@@ -21,20 +20,6 @@ const MAX_PENDING_LIVE_EVENTS = 4;
 
 const errorMessage = (error: unknown) => (error instanceof Error ? error.message : String(error));
 
-function throwIfEveryBeszelIntegrationFailed(results: readonly unknown[], operation: string) {
-  if (everyBeszelIntegrationFailed(results)) {
-    const firstError = results[0];
-    throw new TRPCError({
-      code: "INTERNAL_SERVER_ERROR",
-      message: `Every Beszel integration failed while loading ${operation}: ${
-        typeof firstError === "object" && firstError !== null && "error" in firstError
-          ? String(firstError.error)
-          : "unknown error"
-      }`,
-    });
-  }
-}
-
 export const beszelRouter = createTRPCRouter({
   getSystems: publicProcedure
     .meta({
@@ -70,6 +55,7 @@ export const beszelRouter = createTRPCRouter({
             updatedAt: new Date(0),
             error: errorMessage(error),
           }),
+          throwOnAllFailures: true,
         },
       );
       logger.debug("getSystems completed", {
@@ -78,7 +64,6 @@ export const beszelRouter = createTRPCRouter({
         resultCount: results.length,
         errorCount: results.filter((r) => "error" in r).length,
       });
-      throwIfEveryBeszelIntegrationFailed(results, "systems");
       return results;
     }),
 
@@ -144,6 +129,7 @@ export const beszelRouter = createTRPCRouter({
             updatedAt: new Date(0),
             error: errorMessage(error),
           }),
+          throwOnAllFailures: true,
         },
       );
       logger.debug("getAlerts completed", {
@@ -152,7 +138,6 @@ export const beszelRouter = createTRPCRouter({
         resultCount: results.length,
         errorCount: results.filter((r) => "error" in r).length,
       });
-      throwIfEveryBeszelIntegrationFailed(results, "alerts");
       return results;
     }),
 
diff --git a/packages/api/src/router/widgets/calendar.ts b/packages/api/src/router/widgets/calendar.ts
index 68d968412..26806cba9 100644
--- a/packages/api/src/router/widgets/calendar.ts
+++ b/packages/api/src/router/widgets/calendar.ts
@@ -27,19 +27,35 @@ export const calendarRouter = createTRPCRouter({
     )
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("calendar")))
     .query(async ({ ctx, input }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { integrationIds: _integrationIds, ...handlerInput } = input;
-        const innerHandler = calendarMonthRequestHandler.handler(integration, handlerInput);
-        const { data } = await innerHandler.getDataAsync();
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { integrationIds: _integrationIds, ...handlerInput } = input;
+          const innerHandler = calendarMonthRequestHandler.handler(integration, handlerInput);
+          const { data } = await innerHandler.getDataAsync();
 
-        return {
-          events: data,
-          integration: {
-            id: integration.id,
-            name: integration.name,
-            kind: integration.kind,
-          },
-        };
-      });
+          return {
+            events: data,
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+            },
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            events: [],
+            integration: {
+              id: integration.id,
+              name: integration.name,
+              kind: integration.kind,
+            },
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/api/src/router/widgets/media-requests.ts b/packages/api/src/router/widgets/media-requests.ts
index eb13b25d1..8000df4b8 100644
--- a/packages/api/src/router/widgets/media-requests.ts
+++ b/packages/api/src/router/widgets/media-requests.ts
@@ -1,7 +1,9 @@
 import { z } from "zod/v4";
 
+import type { IntegrationKindByCategory } from "@homarr/definitions";
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createIntegrationAsync } from "@homarr/integrations";
+import type { MediaRequest, MediaRequestStats } from "@homarr/integrations/types";
 import { mediaRequestStatusConfiguration } from "@homarr/integrations/types";
 import {
   mediaRequestListInputSchema,
@@ -13,6 +15,12 @@ import { createManyIntegrationMiddleware, createOneIntegrationMiddleware } from
 import { settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
 
+interface IntegrationQueryResult<TData> {
+  integration: { id: string; name: string; kind: IntegrationKindByCategory<"mediaRequest"> };
+  data: TData;
+  error?: string;
+}
+
 export const mediaRequestsRouter = createTRPCRouter({
   getLatestRequests: publicProcedure
     .meta({
@@ -25,11 +33,26 @@ export const mediaRequestsRouter = createTRPCRouter({
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaRequest")))
     .input(mediaRequestListInputSchema)
     .query(async ({ ctx, input }) => {
-      const results = await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data } = await mediaRequestListRequestHandler.handler(integration, input).getDataAsync();
-        return { integration: { id: integration.id, name: integration.name, kind: integration.kind }, data };
-      });
-      return results
+      const results: IntegrationQueryResult<MediaRequest[]>[] = await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data } = await mediaRequestListRequestHandler.handler(integration, input).getDataAsync();
+          return {
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data: [],
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
+      const requests = results
         .flatMap(({ data, integration }) =>
           data.map((request) => ({
             ...request,
@@ -47,6 +70,12 @@ export const mediaRequestsRouter = createTRPCRouter({
             mediaRequestStatusConfiguration[dataB.status].position
           );
         });
+      return {
+        requests,
+        failedIntegrations: results.flatMap(({ integration, error }) =>
+          error ? [{ integrationId: integration.id, integrationName: integration.name, error }] : [],
+        ),
+      };
     }),
   getStats: publicProcedure
     .meta({
@@ -58,12 +87,30 @@ export const mediaRequestsRouter = createTRPCRouter({
     })
     .concat(createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("mediaRequest")))
     .query(async ({ ctx }) => {
-      const results = await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data } = await mediaRequestStatsRequestHandler.handler(integration, {}).getDataAsync();
-        return { integration: { id: integration.id, name: integration.name, kind: integration.kind }, data };
-      });
+      const results: IntegrationQueryResult<{
+        stats: MediaRequestStats["stats"] | null;
+        users: MediaRequestStats["users"];
+      }>[] = await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data } = await mediaRequestStatsRequestHandler.handler(integration, {}).getDataAsync();
+          return {
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data: { ...data, stats: data.stats as typeof data.stats | null },
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integration: { id: integration.id, name: integration.name, kind: integration.kind },
+            data: { stats: null, users: [] },
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
       return {
-        stats: results.flatMap((result) => result.data.stats),
+        stats: results.flatMap((result) => (result.data.stats ? [result.data.stats] : [])),
         users: results
           .map((result) =>
             result.data.users.map((user) => ({
@@ -74,6 +121,9 @@ export const mediaRequestsRouter = createTRPCRouter({
           .flat()
           .toSorted(({ requestCount: countA }, { requestCount: countB }) => countB - countA),
         integrations: results.map((result) => result.integration),
+        failedIntegrations: results.flatMap(({ integration, error }) =>
+          error ? [{ integrationId: integration.id, integrationName: integration.name, error }] : [],
+        ),
       };
     }),
   answerRequest: protectedProcedure
diff --git a/packages/api/src/router/widgets/media-server.ts b/packages/api/src/router/widgets/media-server.ts
index 80ce9018d..1ed6b9091 100644
--- a/packages/api/src/router/widgets/media-server.ts
+++ b/packages/api/src/router/widgets/media-server.ts
@@ -23,16 +23,30 @@ export const mediaServerRouter = createTRPCRouter({
     .concat(createMediaServerIntegrationMiddleware("query"))
     .input(z.object({ showOnlyPlaying: z.boolean() }))
     .query(async ({ ctx, input }) => {
-      return await settleIntegrationQueries(ctx.integrations, async (integration) => {
-        const { data } = await mediaServerRequestHandler
-          .handler(integration, { showOnlyPlaying: input.showOnlyPlaying })
-          .getDataAsync();
-        return {
-          integrationId: integration.id,
-          integrationName: integration.name,
-          integrationKind: integration.kind,
-          sessions: data,
-        };
-      });
+      return await settleIntegrationQueries(
+        ctx.integrations,
+        async (integration) => {
+          const { data } = await mediaServerRequestHandler
+            .handler(integration, { showOnlyPlaying: input.showOnlyPlaying })
+            .getDataAsync();
+          return {
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationKind: integration.kind,
+            sessions: data,
+            error: undefined as string | undefined,
+          };
+        },
+        {
+          fallback: (integration, error) => ({
+            integrationId: integration.id,
+            integrationName: integration.name,
+            integrationKind: integration.kind,
+            sessions: [],
+            error: error instanceof Error ? error.message : String(error),
+          }),
+          throwOnAllFailures: true,
+        },
+      );
     }),
 });
diff --git a/packages/modals/src/index.tsx b/packages/modals/src/index.tsx
index 02bc4cff4..0071185a8 100644
--- a/packages/modals/src/index.tsx
+++ b/packages/modals/src/index.tsx
@@ -125,6 +125,7 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
 
 interface OpenModalOptions {
   keepMounted?: boolean;
+  onClose?: () => void;
   title?: stringOrTranslation;
 }
 
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 2e05e7ece..1290408ab 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -8,6 +8,7 @@ import { formatBytes, formatDuration } from "@homarr/common";
 import type { AudiobookshelfDashboardData } from "@homarr/integrations/types";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { setWidgetRuntimeQueries } from "../definition";
 import { AudioStatsContent } from "./audio-stats-content";
@@ -47,9 +48,15 @@ export default function AudioStatsWidget({
   const sessions = streamResults.flatMap((result) =>
     result.sessions.map((session) => ({ integrationId: result.integrationId, session })),
   );
+  const hasStreamFailures = streamResults.some(({ error }) => Boolean(error));
   const audiobookStats = response.kind === "audiobookshelf" ? (response.data as AudiobookshelfDashboardData) : null;
   return (
     <Stack h="100%" gap="lg" p="md">
+      {hasStreamFailures && (
+        <Group justify="flex-end">
+          <IntegrationErrorIndicator results={streamResults} />
+        </Group>
+      )}
       <div style={{ minHeight: 150 }}>{summary}</div>
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>
         {response.kind === "navidrome" ? (
diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index f81835739..bf0f79416 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -12,7 +12,7 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 
 const alertIconMap: Record<string, LucideIcon> = {
   CPU: Cpu,
@@ -85,7 +85,7 @@ export default function BeszelAlertsWidget({
   return (
     <Box h="100%" pos="relative">
       <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={results} />
+        <IntegrationErrorIndicator results={results} />
       </Box>
       <ScrollArea h="100%" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
         <Stack gap="sm" p="sm">
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index 9754622c4..ff26240b4 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -36,7 +36,7 @@ import {
   getProgressTrackSize,
 } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
 
@@ -406,7 +406,7 @@ export default function BeszelSystemGridWidget({
   if (filteredSystems.length === 0) {
     return (
       <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-        <BeszelIntegrationErrorIndicator results={results} />
+        <IntegrationErrorIndicator results={results} />
         <Center h="100%">
           <Stack align="center" gap="xs">
             <IconServerOff size={28} opacity={0.5} />
@@ -436,7 +436,7 @@ export default function BeszelSystemGridWidget({
 
   return (
     <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
-      <BeszelIntegrationErrorIndicator results={results} />
+      <IntegrationErrorIndicator results={results} />
       <Box
         h="100%"
         style={{
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index c55e3977a..64d985251 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -16,7 +16,7 @@ import classes from "./component.module.css";
 import type { WidgetComponentProps } from "../definition";
 import { setWidgetRuntimeQueries } from "../definition";
 import type { BeszelTimePeriod } from "../beszel/_shared/chart";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
 import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";
 
@@ -100,7 +100,7 @@ export default function BeszelSystemStatsWidget({
   if (systems.length === 0) {
     return (
       <Box h="100%" pos="relative">
-        <BeszelIntegrationErrorIndicator results={systemsResult} />
+        <IntegrationErrorIndicator results={systemsResult} />
         <Center h="100%">
           <Stack align="center" gap="xs">
             <IconServerOff size={28} opacity={0.5} />
@@ -136,7 +136,7 @@ export default function BeszelSystemStatsWidget({
   return (
     <Box h="100%" pos="relative">
       <Box pos="absolute" top={4} right={8} style={{ zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={systemsResult} />
+        <IntegrationErrorIndicator results={systemsResult} />
       </Box>
       <ScrollArea
         h="100%"
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index 5e6e7fec4..044fb2c95 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -40,7 +40,7 @@ import {
   getProgressTrackSize,
 } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
-import { BeszelIntegrationErrorIndicator } from "../beszel/_shared/error-indicator";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
@@ -426,7 +426,7 @@ export default function BeszelSystemTableWidget({
   const table = (
     <div style={{ position: "relative", height: "100%" }}>
       <div style={{ position: "absolute", top: 4, right: 8, zIndex: 1 }}>
-        <BeszelIntegrationErrorIndicator results={results} />
+        <IntegrationErrorIndicator results={results} />
       </div>
       <HomarrDataTable
         isEditMode={isEditMode}
diff --git a/packages/widgets/src/beszel/_shared/error-indicator.tsx b/packages/widgets/src/beszel/_shared/error-indicator.tsx
deleted file mode 100644
index 7d539baac..000000000
--- a/packages/widgets/src/beszel/_shared/error-indicator.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client";
-
-import { Tooltip } from "@mantine/core";
-import { IconAlertTriangle } from "@tabler/icons-react";
-
-interface IntegrationResult {
-  integrationId: string;
-  integrationName?: string;
-  error?: string;
-}
-
-interface BeszelIntegrationErrorIndicatorProps {
-  results: IntegrationResult[];
-}
-
-export function BeszelIntegrationErrorIndicator({ results }: BeszelIntegrationErrorIndicatorProps) {
-  const failed = results.filter((r) => "error" in r && r.error);
-  if (failed.length === 0) return null;
-  const label = failed.map((r) => r.integrationName ?? r.integrationId).join(", ");
-  return (
-    <Tooltip label={label} position="left" withArrow>
-      <IconAlertTriangle size={14} color="var(--mantine-color-orange-6)" style={{ cursor: "help", flexShrink: 0 }} />
-    </Tooltip>
-  );
-}
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index b393ba24c..cef9b9458 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { useParams } from "next/navigation";
-import { Box, Stack, Text, useMantineTheme } from "@mantine/core";
+import { Box, Group, Stack, Text, useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
 import { useElementSize } from "@mantine/hooks";
 import { getQueryKey } from "@trpc/react-query";
@@ -15,6 +15,7 @@ import { useSettings } from "@homarr/settings";
 
 import type { WidgetComponentProps } from "../definition";
 import { setWidgetRuntimeQueries } from "../definition";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { CalendarDay } from "./calender-day";
 import { getCalendarAgendaEvents, groupEventsByDate, splitEvents, toCalendarDateKey } from "./calendar-events";
 import { CalendarEventList } from "./calendar-event-list";
@@ -25,7 +26,7 @@ export default function CalendarWidget(props: WidgetComponentProps<"calendar">)
 
   if (props.integrationIds.length === 0) {
     setWidgetRuntimeQueries(props.widgetStateRef, []);
-    return <CalendarBase {...props} events={[]} month={month} setMonth={setMonth} />;
+    return <CalendarBase {...props} events={[]} failedIntegrations={[]} month={month} setMonth={setMonth} />;
   }
 
   return <FetchCalendar month={month} setMonth={setMonth} {...props} />;
@@ -56,11 +57,16 @@ const FetchCalendar = ({
   const { data } = clientApi.widget.calendar.findAllEvents.useQuery(input);
 
   const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
+  const failedIntegrations =
+    data?.flatMap(({ integration, error }) =>
+      error ? [{ integrationId: integration.id, integrationName: integration.name, error }] : [],
+    ) ?? [];
 
   return (
     <CalendarBase
       isEditMode={isEditMode}
       events={events}
+      failedIntegrations={failedIntegrations}
       month={month}
       setMonth={setMonth}
       options={options}
@@ -72,13 +78,22 @@ const FetchCalendar = ({
 interface CalendarBaseProps {
   isEditMode: boolean;
   events: CalendarEvent[];
+  failedIntegrations: { integrationId: string; integrationName: string; error: string }[];
   month: Date;
   setMonth: (date: Date) => void;
   options: WidgetComponentProps<"calendar">["options"];
   displayMode?: WidgetComponentProps<"calendar">["displayMode"];
 }
 
-const CalendarBase = ({ isEditMode, events, month, setMonth, options, displayMode }: CalendarBaseProps) => {
+const CalendarBase = ({
+  isEditMode,
+  events,
+  failedIntegrations,
+  month,
+  setMonth,
+  options,
+  displayMode,
+}: CalendarBaseProps) => {
   const params = useParams();
   const locale = params.locale as string;
   const { firstDayOfWeek } = useSettings();
@@ -105,6 +120,11 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options, displayMod
 
   return (
     <Stack ref={ref} h="100%" w="100%" gap="xs" style={{ overflow: "hidden" }}>
+      {failedIntegrations.length > 0 && (
+        <Group px="xs" justify="flex-end">
+          <IntegrationErrorIndicator results={failedIntegrations} />
+        </Group>
+      )}
       <Calendar
         defaultDate={new Date()}
         onPreviousMonth={(previousMonth) => setMonth(new Date(previousMonth))}
diff --git a/packages/widgets/src/common/integration-error-indicator.tsx b/packages/widgets/src/common/integration-error-indicator.tsx
new file mode 100644
index 000000000..567a1a01a
--- /dev/null
+++ b/packages/widgets/src/common/integration-error-indicator.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Tooltip, VisuallyHidden } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+import { useI18n } from "@homarr/translation/client";
+
+interface IntegrationResult {
+  integrationId: string;
+  integrationName?: string;
+  error?: string;
+}
+
+interface IntegrationErrorIndicatorProps {
+  results: readonly IntegrationResult[];
+}
+
+export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicatorProps) {
+  const t = useI18n();
+  const failed = results.filter((result) => Boolean(result.error));
+  if (failed.length === 0) return null;
+
+  const names = failed.map((result) => result.integrationName ?? result.integrationId).join(", ");
+  const label = `${t("common.error")}: ${names}`;
+  return (
+    <Tooltip label={label} position="left" withArrow>
+      <span style={{ display: "inline-flex" }}>
+        <IconAlertTriangle
+          aria-hidden
+          size={14}
+          color="var(--mantine-color-orange-6)"
+          style={{ cursor: "help", flexShrink: 0 }}
+        />
+        <VisuallyHidden>{label}</VisuallyHidden>
+      </span>
+    </Tooltip>
+  );
+}
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index c4c1bccce..d4e350451 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -120,6 +120,15 @@ export const getWidgetQueryKeys = (definition: {
 
 const runtimeQueriesStateKey = "__homarrRuntimeQueries";
 
+export const normalizeWidgetQuery = (queryKey: QueryKey): NormalizedWidgetQuery | null => {
+  const path = queryKey[0];
+  if (!Array.isArray(path) || !path.every((part): part is string => typeof part === "string")) return null;
+
+  const queryKeyOptions = queryKey[1];
+  const input = isRecord(queryKeyOptions) && "input" in queryKeyOptions ? queryKeyOptions.input : undefined;
+  return { path, input };
+};
+
 export const setWidgetRuntimeQueries = (
   widgetStateRef: React.MutableRefObject<Record<string, unknown> | null> | undefined,
   queryKeys: readonly QueryKey[],
@@ -127,12 +136,8 @@ export const setWidgetRuntimeQueries = (
   if (!widgetStateRef) return;
   const state = widgetStateRef.current ?? {};
   state[runtimeQueriesStateKey] = queryKeys.flatMap((queryKey) => {
-    const path = queryKey[0];
-    if (!Array.isArray(path) || !path.every((part): part is string => typeof part === "string")) return [];
-
-    const queryKeyOptions = queryKey[1];
-    const input = isRecord(queryKeyOptions) && "input" in queryKeyOptions ? queryKeyOptions.input : undefined;
-    return [{ path, input }];
+    const query = normalizeWidgetQuery(queryKey);
+    return query ? [query] : [];
   });
   widgetStateRef.current = state;
 };
diff --git a/packages/widgets/src/health-monitoring/component.tsx b/packages/widgets/src/health-monitoring/component.tsx
index d030e57ae..6fff62e24 100644
--- a/packages/widgets/src/health-monitoring/component.tsx
+++ b/packages/widgets/src/health-monitoring/component.tsx
@@ -41,8 +41,19 @@ export default function HealthMonitoringWidget(props: WidgetComponentProps<"heal
   }
 
   if (props.displayMode === "advanced") {
+    if (props.width < 900) {
+      return (
+        <ScrollArea h="100%">
+          <Stack gap="sm" p="xs">
+            <SystemHealthMonitoring {...props} integrationIds={systemIntegrationIds} withScrollArea={false} />
+            {clusters}
+          </Stack>
+        </ScrollArea>
+      );
+    }
+
     return (
-      <SimpleGrid cols={props.width >= 900 ? 2 : 1} spacing="sm" p="xs" h="100%">
+      <SimpleGrid cols={2} spacing="sm" p="xs" h="100%" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
         <Box style={{ minHeight: 0, overflow: "hidden" }}>
           <SystemHealthMonitoring {...props} integrationIds={systemIntegrationIds} />
         </Box>
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index b52ba7fc5..25a08ce8a 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -55,7 +55,8 @@ export const SystemHealthMonitoring = ({
   integrationIds,
   width,
   displayMode,
-}: WidgetComponentProps<"healthMonitoring">) => {
+  withScrollArea = true,
+}: WidgetComponentProps<"healthMonitoring"> & { withScrollArea?: boolean }) => {
   const t = useI18n();
   const { data: healthData = [] } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
     integrationIds,
@@ -69,7 +70,7 @@ export const SystemHealthMonitoring = ({
   if (healthData.length === 0) return <WidgetEmptyState />;
 
   return (
-    <ScrollArea h="100%">
+    <ScrollArea h={withScrollArea ? "100%" : undefined}>
       <Stack mih="100%" gap="sm" className="health-monitoring">
         {healthData.map(({ integrationId, integrationName, healthInfo }) => {
           const filteredFileSystem = filterStorageVolumes(
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index fd65be9c2..dd870cf22 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -74,7 +74,12 @@ export type {
   WidgetQueryMatcher,
   WidgetQueryMatcherScope,
 } from "./definition";
-export { getWidgetQueryKeys, getWidgetRuntimeQueries } from "./definition";
+export {
+  getWidgetQueryKeys,
+  getWidgetRuntimeQueries,
+  normalizeWidgetQuery,
+  widgetQueryValueEquals,
+} from "./definition";
 export type { WidgetComponentProps };
 export type { WidgetOptionDefinition, WidgetOptionType } from "./options";
 
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index b8760eb56..7017d3495 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -1,19 +1,6 @@
 "use client";
 
-import {
-  ActionIcon,
-  Anchor,
-  Avatar,
-  Badge,
-  Box,
-  Card,
-  Group,
-  Image,
-  ScrollArea,
-  Stack,
-  Text,
-  Tooltip,
-} from "@mantine/core";
+import { ActionIcon, Anchor, Avatar, Badge, Card, Group, Image, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconSearch, IconThumbDown, IconThumbUp } from "@tabler/icons-react";
 
 import type { RouterInputs, RouterOutputs } from "@homarr/api";
@@ -27,6 +14,7 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
 import classes from "../search-button.module.css";
@@ -44,7 +32,7 @@ export default function MediaServerWidget({
       .filter(({ id }) => integrationIds.includes(id))
       .map(({ id }) => id),
   );
-  const { data: mediaRequests } = clientApi.widget.mediaRequests.getLatestRequests.useQuery({
+  const { data: mediaRequestData } = clientApi.widget.mediaRequests.getLatestRequests.useQuery({
     integrationIds,
     statuses:
       options.statusFilter.length > 0
@@ -53,16 +41,22 @@ export default function MediaServerWidget({
     recentDays: options.recentDays,
   });
 
-  if (!mediaRequests) return <WidgetEmptyState />;
-  if (mediaRequests.length === 0) throw new NoIntegrationDataError();
+  if (!mediaRequestData) return <WidgetEmptyState />;
+  const { requests: mediaRequests, failedIntegrations } = mediaRequestData;
+  if (mediaRequests.length === 0 && failedIntegrations.length === 0) throw new NoIntegrationDataError();
 
   return (
-    <Box className={classes.searchRoot}>
+    <Stack className={classes.searchRoot} gap={0}>
       {!isEditMode && <MediaRequestSearchButton integrationIds={integrationIds} />}
+      {failedIntegrations.length > 0 && (
+        <Group px="sm" pt="xs">
+          <IntegrationErrorIndicator results={failedIntegrations} />
+        </Group>
+      )}
       <ScrollArea
         className="mediaRequests-list-scrollArea"
         scrollbarSize="md"
-        style={{ pointerEvents: isEditMode ? "none" : undefined }}
+        style={{ flex: 1, minHeight: 0, pointerEvents: isEditMode ? "none" : undefined }}
       >
         <Stack className="mediaRequests-list-list" gap="xs" p="sm">
           {mediaRequests.map((mediaRequest) => (
@@ -77,7 +71,7 @@ export default function MediaServerWidget({
           ))}
         </Stack>
       </ScrollArea>
-    </Box>
+    </Stack>
   );
 }
 
@@ -100,7 +94,7 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
 };
 
 interface MediaRequestCardProps {
-  request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"][number];
+  request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"]["requests"][number];
   isTiny: boolean;
   isAdvanced: boolean;
   canInteract: boolean;
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
index be9f2796b..9ced6ceb2 100644
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -22,6 +22,7 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
 import classes from "./component.module.css";
@@ -45,7 +46,12 @@ export default function MediaServerWidget({
   const board = useRequiredBoard();
 
   if (!requestStats) return <WidgetEmptyState />;
-  if (requestStats.users.length === 0 && requestStats.stats.length === 0) throw new NoIntegrationDataError();
+  if (
+    requestStats.users.length === 0 &&
+    requestStats.stats.length === 0 &&
+    requestStats.failedIntegrations.length === 0
+  )
+    throw new NoIntegrationDataError();
 
   const data = [
     {
@@ -99,6 +105,9 @@ export default function MediaServerWidget({
 
   return (
     <Box className={searchClasses.searchRoot}>
+      <Box pos="absolute" top="xs" left="xs" style={{ zIndex: 2 }}>
+        <IntegrationErrorIndicator results={requestStats.failedIntegrations} />
+      </Box>
       {!isEditMode && <MediaRequestSearchButton integrationIds={integrationIds} />}
       <Stack
         className="mediaRequests-stats-layout"
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index ea631e1b8..7c8463042 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -25,6 +25,7 @@ import type { TablerIcon } from "@homarr/ui";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 
 type TranscodingDecision = NonNullable<NonNullable<StreamSession["currentlyPlaying"]>["metadata"]>["transcoding"];
 
@@ -305,6 +306,7 @@ export default function MediaServerWidget({
     0,
   );
   const totalBitrateLabel = options.showBitrate ? formatBitrate(totalBitrateKbps) : null;
+  const hasFailedIntegrations = currentStreams.some(({ error }) => Boolean(error));
 
   return (
     <Stack gap={0} h="100%" display="flex">
@@ -317,6 +319,14 @@ export default function MediaServerWidget({
           <Badge variant="light" color="orange">
             {t("summary.transcoding", { count: transcodingCount })}
           </Badge>
+          <Group ml="auto">
+            <IntegrationErrorIndicator results={currentStreams} />
+          </Group>
+        </Group>
+      )}
+      {!isAdvanced && hasFailedIntegrations && (
+        <Group h={18} px="xs" justify="flex-end">
+          <IntegrationErrorIndicator results={currentStreams} />
         </Group>
       )}
       <MantineReactTable table={table} />
diff --git a/packages/widgets/src/traefik/component.tsx b/packages/widgets/src/traefik/component.tsx
index e73de954c..42d2d013b 100644
--- a/packages/widgets/src/traefik/component.tsx
+++ b/packages/widgets/src/traefik/component.tsx
@@ -146,48 +146,61 @@ function TraefikWidgetContent({
     (left, right) =>
       resourceStatusOrder[left.status] - resourceStatusOrder[right.status] || left.name.localeCompare(right.name),
   );
-  return (
-    <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="md" h="100%" p="md">
-      <ScrollArea h="100%">{summary}</ScrollArea>
+  const resourceList = (
+    <Stack gap="xs">
+      {combined.failedEndpoints.map((endpoint) => (
+        <Badge key={endpoint} color="red" variant="light">
+          {t("failedEndpoint", { endpoint })}
+        </Badge>
+      ))}
+      {resources.map((resource, index) => (
+        <Group
+          key={`${resource.protocol}:${resource.type}:${resource.name}:${index}`}
+          justify="space-between"
+          wrap="nowrap"
+          p="xs"
+        >
+          <Stack gap={0} style={{ minWidth: 0 }}>
+            <Text size="sm" fw={600} truncate>
+              {resource.name}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {resource.protocol.toUpperCase()} · {t(`resourceType.${resource.type}`)} · {resource.provider ?? "—"}
+            </Text>
+          </Stack>
+          <Badge
+            color={
+              resource.status === "error"
+                ? "red"
+                : resource.status === "warning"
+                  ? "yellow"
+                  : resource.status === "enabled"
+                    ? "green"
+                    : "gray"
+            }
+          >
+            {t(`resourceStatus.${resource.status}`)}
+          </Badge>
+        </Group>
+      ))}
+    </Stack>
+  );
+
+  if (width < 900) {
+    return (
       <ScrollArea h="100%">
-        <Stack gap="xs">
-          {combined.failedEndpoints.map((endpoint) => (
-            <Badge key={endpoint} color="red" variant="light">
-              {t("failedEndpoint", { endpoint })}
-            </Badge>
-          ))}
-          {resources.map((resource, index) => (
-            <Group
-              key={`${resource.protocol}:${resource.type}:${resource.name}:${index}`}
-              justify="space-between"
-              wrap="nowrap"
-              p="xs"
-            >
-              <Stack gap={0} style={{ minWidth: 0 }}>
-                <Text size="sm" fw={600} truncate>
-                  {resource.name}
-                </Text>
-                <Text size="xs" c="dimmed">
-                  {resource.protocol.toUpperCase()} · {t(`resourceType.${resource.type}`)} · {resource.provider ?? "—"}
-                </Text>
-              </Stack>
-              <Badge
-                color={
-                  resource.status === "error"
-                    ? "red"
-                    : resource.status === "warning"
-                      ? "yellow"
-                      : resource.status === "enabled"
-                        ? "green"
-                        : "gray"
-                }
-              >
-                {t(`resourceStatus.${resource.status}`)}
-              </Badge>
-            </Group>
-          ))}
+        <Stack gap="md" p="md">
+          {summary}
+          {resourceList}
         </Stack>
       </ScrollArea>
+    );
+  }
+
+  return (
+    <SimpleGrid cols={2} spacing="md" h="100%" p="md" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+      <ScrollArea h="100%">{summary}</ScrollArea>
+      <ScrollArea h="100%">{resourceList}</ScrollArea>
     </SimpleGrid>
   );
 }
diff --git a/packages/widgets/src/umami/component.tsx b/packages/widgets/src/umami/component.tsx
index b2a1c9915..602922b7e 100644
--- a/packages/widgets/src/umami/component.tsx
+++ b/packages/widgets/src/umami/component.tsx
@@ -14,6 +14,7 @@ export default function UmamiWidget({
   options,
   integrationIds,
   width,
+  height,
   displayMode = "compact",
   widgetStateRef,
 }: WidgetComponentProps<"umami">) {
@@ -75,6 +76,7 @@ export default function UmamiWidget({
       viewMode={options.viewMode}
       topCount={options.topCount}
       width={width}
+      height={height}
       displayMode={displayMode}
     />
   );
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index ed048c1b4..1f562dd36 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { BarChart, LineChart } from "@mantine/charts";
-import { Box, Group, SimpleGrid, Stack, Text, useMantineColorScheme } from "@mantine/core";
+import { Box, Group, ScrollArea, SimpleGrid, Stack, Text, useMantineColorScheme } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
@@ -24,6 +24,7 @@ interface UmamiContentProps {
   viewMode: string;
   topCount: number;
   width: number;
+  height: number;
   displayMode: "compact" | "advanced";
 }
 
@@ -38,6 +39,7 @@ export function UmamiContent({
   viewMode,
   topCount,
   width,
+  height,
   displayMode,
 }: UmamiContentProps) {
   const t = useScopedI18n("widget.umami");
@@ -149,6 +151,44 @@ export function UmamiContent({
       />
     );
 
+  const advancedLists = (
+    <SimpleGrid cols={viewMode === "topPages" || viewMode === "topReferrers" ? 1 : 2} spacing="md" mih={260}>
+      {viewMode !== "topPages" && (
+        <UmamiTopPagesContent
+          integrationIds={integrationIds}
+          websiteId={websiteId}
+          timeFrame={timeFrame}
+          limit={topCount}
+        />
+      )}
+      {viewMode !== "topReferrers" && (
+        <UmamiTopReferrersContent
+          integrationIds={integrationIds}
+          websiteId={websiteId}
+          timeFrame={timeFrame}
+          limit={topCount}
+        />
+      )}
+    </SimpleGrid>
+  );
+
+  const advancedContent =
+    width < 900 ? (
+      <ScrollArea h="100%">
+        <Stack gap="md">
+          <Box h={Math.max(280, Math.min(420, height - 160))}>{selectedView}</Box>
+          {advancedLists}
+        </Stack>
+      </ScrollArea>
+    ) : (
+      <SimpleGrid cols={2} spacing="md" h="100%" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+        <Box h="100%" mih={260}>
+          {selectedView}
+        </Box>
+        {advancedLists}
+      </SimpleGrid>
+    );
+
   return (
     <Stack gap={4} p="xs" h="100%">
       <Group justify="space-between" align="baseline" wrap="nowrap">
@@ -213,31 +253,7 @@ export function UmamiContent({
         )}
       </Group>
       <Box mt={4} style={{ flex: 1, minHeight: 0 }}>
-        {displayMode === "advanced" ? (
-          <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="md" h="100%">
-            <Box mih={260}>{selectedView}</Box>
-            <SimpleGrid cols={viewMode === "topPages" || viewMode === "topReferrers" ? 1 : 2} spacing="md" mih={260}>
-              {viewMode !== "topPages" && (
-                <UmamiTopPagesContent
-                  integrationIds={integrationIds}
-                  websiteId={websiteId}
-                  timeFrame={timeFrame}
-                  limit={topCount}
-                />
-              )}
-              {viewMode !== "topReferrers" && (
-                <UmamiTopReferrersContent
-                  integrationIds={integrationIds}
-                  websiteId={websiteId}
-                  timeFrame={timeFrame}
-                  limit={topCount}
-                />
-              )}
-            </SimpleGrid>
-          </SimpleGrid>
-        ) : (
-          selectedView
-        )}
+        {displayMode === "advanced" ? advancedContent : selectedView}
       </Box>
     </Stack>
   );
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index b4fbd6be9..efe60c72c 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { CSSProperties } from "react";
-import { Badge, Group, RingProgress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Badge, Box, Group, RingProgress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp, IconClockPause, IconServer } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -213,33 +213,46 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
 
   if (displayMode === "compact") return summaryContent;
 
-  return (
-    <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="lg" h="100%" p="md">
-      {summaryContent}
+  const monitorList = (
+    <Stack gap="xs">
+      {monitors
+        .toSorted((left, right) => statusOrder[left.status] - statusOrder[right.status])
+        .map((monitor) => (
+          <Group key={monitor.key} justify="space-between" wrap="nowrap" p="xs">
+            <Stack gap={0} style={{ minWidth: 0 }}>
+              <Text size="sm" fw={600} truncate>
+                {monitor.name}
+              </Text>
+              {dashboardData.length > 1 && (
+                <Text size="xs" c="dimmed">
+                  {monitor.integrationName}
+                </Text>
+              )}
+            </Stack>
+            <Badge color={monitor.status === "up" ? "green" : monitor.status === "down" ? "red" : "yellow"}>
+              {t(`status.${monitor.status}`)} ·{" "}
+              {monitor.uptimePercent24h === null ? "—" : `${formatNumber(monitor.uptimePercent24h, 1)}%`}
+            </Badge>
+          </Group>
+        ))}
+    </Stack>
+  );
+
+  if (width < 760) {
+    return (
       <ScrollArea h="100%">
-        <Stack gap="xs">
-          {monitors
-            .toSorted((left, right) => statusOrder[left.status] - statusOrder[right.status])
-            .map((monitor) => (
-              <Group key={monitor.key} justify="space-between" wrap="nowrap" p="xs">
-                <Stack gap={0} style={{ minWidth: 0 }}>
-                  <Text size="sm" fw={600} truncate>
-                    {monitor.name}
-                  </Text>
-                  {dashboardData.length > 1 && (
-                    <Text size="xs" c="dimmed">
-                      {monitor.integrationName}
-                    </Text>
-                  )}
-                </Stack>
-                <Badge color={monitor.status === "up" ? "green" : monitor.status === "down" ? "red" : "yellow"}>
-                  {t(`status.${monitor.status}`)} ·{" "}
-                  {monitor.uptimePercent24h === null ? "—" : `${formatNumber(monitor.uptimePercent24h, 1)}%`}
-                </Badge>
-              </Group>
-            ))}
+        <Stack gap="lg" p="md">
+          <Box h={Math.max(280, Math.min(420, height - 120))}>{summaryContent}</Box>
+          {monitorList}
         </Stack>
       </ScrollArea>
+    );
+  }
+
+  return (
+    <SimpleGrid cols={2} spacing="lg" h="100%" p="md" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+      {summaryContent}
+      <ScrollArea h="100%">{monitorList}</ScrollArea>
     </SimpleGrid>
   );
 }

From c61695b142ef9a78f2805b21577031a648c64332 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 08:09:55 +0200
Subject: [PATCH 06/75] fix: make integration warnings keyboard accessible

---
 .../src/common/integration-error-indicator.tsx     | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/widgets/src/common/integration-error-indicator.tsx b/packages/widgets/src/common/integration-error-indicator.tsx
index 567a1a01a..fab368cad 100644
--- a/packages/widgets/src/common/integration-error-indicator.tsx
+++ b/packages/widgets/src/common/integration-error-indicator.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Tooltip, VisuallyHidden } from "@mantine/core";
+import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
@@ -24,15 +24,9 @@ export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicator
   const label = `${t("common.error")}: ${names}`;
   return (
     <Tooltip label={label} position="left" withArrow>
-      <span style={{ display: "inline-flex" }}>
-        <IconAlertTriangle
-          aria-hidden
-          size={14}
-          color="var(--mantine-color-orange-6)"
-          style={{ cursor: "help", flexShrink: 0 }}
-        />
-        <VisuallyHidden>{label}</VisuallyHidden>
-      </span>
+      <ActionIcon variant="transparent" color="orange" size={18} aria-label={label} style={{ cursor: "help" }}>
+        <IconAlertTriangle aria-hidden size={14} />
+      </ActionIcon>
     </Tooltip>
   );
 }

From 76974f676dfdf99d896595ac281a2b306d95990c Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 08:19:46 +0200
Subject: [PATCH 07/75] fix: allow dynamic database schema access

---
 packages/db/collection.ts       | 1 +
 packages/db/test/schema.spec.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/db/collection.ts b/packages/db/collection.ts
index 00e5aba18..aae94d28c 100644
--- a/packages/db/collection.ts
+++ b/packages/db/collection.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/namespace -- Schema tables are selected by validated typed keys. */
 import type { InferInsertModel } from "drizzle-orm";
 
 import { objectEntries } from "@homarr/common";
diff --git a/packages/db/test/schema.spec.ts b/packages/db/test/schema.spec.ts
index 246219547..c1f51108d 100644
--- a/packages/db/test/schema.spec.ts
+++ b/packages/db/test/schema.spec.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable import/namespace -- The test compares matching schema tables by their shared keys. */
 import type { Column, InferSelectModel } from "drizzle-orm";
 import type { ForeignKey as MysqlForeignKey, MySqlTableWithColumns } from "drizzle-orm/mysql-core";
 import type { PgTableWithColumns, ForeignKey as PostgresqlForeignKey } from "drizzle-orm/pg-core";

From 3f7d934fa54d4649ad1b1a17a4246f7307f4bf09 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 08:44:00 +0200
Subject: [PATCH 08/75] fix: address remaining widget review feedback

---
 apps/docs/docs/widgets/timetable/index.mdx    |  2 +
 apps/docs/docs/widgets/timetable/index.ts     |  2 +-
 packages/api/src/router/board.ts              | 14 ++++
 .../partial-integration-failures.spec.ts      | 21 ++++--
 .../src/router/test/widgets/timetable.spec.ts | 68 ++++++++++++++++++-
 packages/api/src/router/widgets/calendar.ts   |  4 +-
 .../api/src/router/widgets/media-requests.ts  |  8 +--
 .../api/src/router/widgets/media-server.ts    |  4 +-
 packages/api/src/router/widgets/options.ts    |  8 ++-
 packages/api/src/router/widgets/timetable.ts  | 31 ++++++++-
 .../common/integration-error-indicator.tsx    |  6 +-
 packages/widgets/src/rssFeed/component.tsx    |  3 +-
 packages/widgets/src/umami/umami-content.tsx  |  2 +-
 13 files changed, 148 insertions(+), 25 deletions(-)

diff --git a/apps/docs/docs/widgets/timetable/index.mdx b/apps/docs/docs/widgets/timetable/index.mdx
index 8fb3b7ccd..e53f29920 100644
--- a/apps/docs/docs/widgets/timetable/index.mdx
+++ b/apps/docs/docs/widgets/timetable/index.mdx
@@ -34,3 +34,5 @@ import streetDepartures from "./img/street-departures.png";
 ### Configuration
 
 <WidgetConfig configuration={timetableWidget.configuration} />
+
+For security, new or changed custom base URLs must resolve to a public IP address. Private and local hosts are rejected.
diff --git a/apps/docs/docs/widgets/timetable/index.ts b/apps/docs/docs/widgets/timetable/index.ts
index 1cefb6bcd..32b9e2bcf 100644
--- a/apps/docs/docs/widgets/timetable/index.ts
+++ b/apps/docs/docs/widgets/timetable/index.ts
@@ -11,7 +11,7 @@ export const timetableWidget: WidgetDefinition = {
       {
         name: "Search.ch URL",
         description: "Base URL for the Search.ch timetable API.",
-        values: "Any valid URL.",
+        values: "An HTTP(S) URL that resolves to a public IP address.",
         defaultValue: "https://search.ch",
       },
       {
diff --git a/packages/api/src/router/board.ts b/packages/api/src/router/board.ts
index 9cb34d1bd..042f69a3c 100644
--- a/packages/api/src/router/board.ts
+++ b/packages/api/src/router/board.ts
@@ -62,6 +62,7 @@ import { sectionSchema, sharedItemSchema } from "@homarr/validation/shared";
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../trpc";
 import { throwIfActionForbiddenAsync } from "./board/board-access";
 import { generateResponsiveGridFor } from "./board/grid-algorithm";
+import { validateTimetableOptionsChangeAsync } from "./widgets/timetable";
 
 export const boardRouter = createTRPCRouter({
   exists: permissionRequiredProcedure
@@ -856,6 +857,15 @@ export const boardRouter = createTRPCRouter({
 
     const dbBoard = await getFullBoardWithWhereAsync(ctx.db, eq(boards.id, input.id), ctx.session.user.id);
 
+    for (const item of input.items) {
+      if (item.kind !== "timetable") continue;
+      const previousItem = dbBoard.items.find((dbItem) => dbItem.id === item.id);
+      await validateTimetableOptionsChangeAsync(
+        item.options,
+        previousItem?.kind === "timetable" ? previousItem.options : undefined,
+      );
+    }
+
     await handleTransactionsAsync(ctx.db, {
       async handleAsync(db, schema) {
         await db.transaction(async (transaction) => {
@@ -1441,6 +1451,10 @@ export const boardRouter = createTRPCRouter({
     .mutation(async ({ ctx, input }) => {
       await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
 
+      if (input.kind === "timetable") {
+        await validateTimetableOptionsChangeAsync(input.options);
+      }
+
       if (input.integrationIds.length > 0) {
         const existing = await ctx.db.query.integrations.findMany({
           columns: { id: true },
diff --git a/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
index 48d555167..4e3db53fc 100644
--- a/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
+++ b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
@@ -21,7 +21,7 @@ vi.hoisted(() => {
 
 const createHandler = <T>(integration: { name: string }, data: T) => ({
   getDataAsync: async () => {
-    if (integration.name === "Offline") throw new Error("offline");
+    if (integration.name === "Offline") throw new Error("offline https://internal.example?token=secret");
     return { data, timestamp: new Date() };
   },
 });
@@ -119,9 +119,13 @@ describe("partial integration failures", () => {
       });
     expect(calendarResults).toEqual(
       expect.arrayContaining([
-        expect.objectContaining({ integration: expect.objectContaining({ id: calendar.offlineId }), error: "offline" }),
+        expect.objectContaining({
+          integration: expect.objectContaining({ id: calendar.offlineId }),
+          error: "Integration request failed",
+        }),
       ]),
     );
+    expect(JSON.stringify(calendarResults)).not.toContain("secret");
 
     const mediaServer = await setupAsync("plex");
     const streamResults = await mediaServerRouter
@@ -129,9 +133,14 @@ describe("partial integration failures", () => {
       .getCurrentStreams({ integrationIds: mediaServer.integrationIds, showOnlyPlaying: false });
     expect(streamResults).toEqual(
       expect.arrayContaining([
-        expect.objectContaining({ integrationId: mediaServer.offlineId, sessions: [], error: "offline" }),
+        expect.objectContaining({
+          integrationId: mediaServer.offlineId,
+          sessions: [],
+          error: "Integration request failed",
+        }),
       ]),
     );
+    expect(JSON.stringify(streamResults)).not.toContain("secret");
   });
 
   test("media request responses expose failed integrations without dropping successful data", async () => {
@@ -156,13 +165,15 @@ describe("partial integration failures", () => {
       }),
     ]);
     expect(latest.failedIntegrations).toEqual([
-      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "offline" }),
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "Integration request failed" }),
     ]);
+    expect(JSON.stringify(latest)).not.toContain("secret");
 
     const stats = await caller.getStats({ integrationIds: mediaRequests.integrationIds });
     expect(stats.failedIntegrations).toEqual([
-      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "offline" }),
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "Integration request failed" }),
     ]);
+    expect(JSON.stringify(stats)).not.toContain("secret");
     expect(stats.stats).toHaveLength(1);
     expect(stats.users).toEqual([
       expect.objectContaining({
diff --git a/packages/api/src/router/test/widgets/timetable.spec.ts b/packages/api/src/router/test/widgets/timetable.spec.ts
index e51ca1bef..aad001e9b 100644
--- a/packages/api/src/router/test/widgets/timetable.spec.ts
+++ b/packages/api/src/router/test/widgets/timetable.spec.ts
@@ -1,4 +1,6 @@
-import { stringify } from "superjson";
+// @vitest-environment node
+
+import { parse, stringify } from "superjson";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 import type { Session } from "@homarr/auth";
@@ -8,6 +10,8 @@ import { eq } from "@homarr/db";
 import { boards, items, users } from "@homarr/db/schema";
 import { createDb } from "@homarr/db/test";
 
+import { boardRouter } from "../../board";
+import { optionsRouter } from "../../widgets/options";
 import { timetableRouter } from "../../widgets/timetable";
 
 const mocks = vi.hoisted(() => ({ getTimetable: vi.fn(), searchStations: vi.fn(), lookup: vi.fn() }));
@@ -123,7 +127,7 @@ describe("timetableRouter source authorization", () => {
     "http://timetable.internal:8080",
     "http://[::1]:8080",
     "http://[::ffff:127.0.0.1]:8080",
-    "http://[fd00::1]:8080",
+    "https://[fd00::1]:8443",
     "http://[64:ff9b::7f00:1]:8080",
     "http://[2002:7f00:1::]:8080",
   ])("blocks an unsaved private endpoint %s even for board modifiers", async (baseUrl) => {
@@ -182,6 +186,66 @@ describe("timetableRouter source authorization", () => {
     );
   });
 
+  it("blocks changing a saved timetable to a private endpoint through item options", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = optionsRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+
+    await expect(
+      caller.saveItemOptions({ boardId, itemId, newOptions: { baseUrl: "http://127.0.0.1:8080" } }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+
+    const item = await db.query.items.findFirst({ where: eq(items.id, itemId) });
+    expect(parse<Record<string, unknown>>(item?.options ?? "{}")).toMatchObject({ baseUrl: "https://search.ch" });
+  });
+
+  it("blocks changing a saved timetable to a private endpoint through a board save", async () => {
+    const db = createDb();
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+
+    await expect(
+      caller.saveBoard({
+        id: boardId,
+        sections: [],
+        items: [
+          {
+            id: itemId,
+            kind: "timetable",
+            options: { baseUrl: "http://127.0.0.1:8080" },
+            integrationIds: [],
+            layouts: [],
+            advancedOptions: { title: null, customCssClasses: [], borderColor: "" },
+          },
+        ],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
+  it("blocks adding a timetable with a private endpoint", async () => {
+    const db = createDb();
+    const { boardId, ownerId } = await createTimetableItemAsync(db, {
+      baseUrl: "https://search.ch",
+      isPublic: false,
+    });
+    const caller = boardRouter.createCaller({ db, deviceType: undefined, session: createSession(ownerId) });
+
+    await expect(
+      caller.addItem({
+        boardId,
+        kind: "timetable",
+        options: { baseUrl: "http://127.0.0.1:8080" },
+        integrationIds: [],
+      }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
+  });
+
   it("rejects an item ID that does not belong to the requested board", async () => {
     const db = createDb();
     const first = await createTimetableItemAsync(db, { baseUrl: "http://timetable.internal:8080", isPublic: false });
diff --git a/packages/api/src/router/widgets/calendar.ts b/packages/api/src/router/widgets/calendar.ts
index 26806cba9..4265064b7 100644
--- a/packages/api/src/router/widgets/calendar.ts
+++ b/packages/api/src/router/widgets/calendar.ts
@@ -45,14 +45,14 @@ export const calendarRouter = createTRPCRouter({
           };
         },
         {
-          fallback: (integration, error) => ({
+          fallback: (integration) => ({
             events: [],
             integration: {
               id: integration.id,
               name: integration.name,
               kind: integration.kind,
             },
-            error: error instanceof Error ? error.message : String(error),
+            error: "Integration request failed",
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/media-requests.ts b/packages/api/src/router/widgets/media-requests.ts
index 8000df4b8..4a68adb12 100644
--- a/packages/api/src/router/widgets/media-requests.ts
+++ b/packages/api/src/router/widgets/media-requests.ts
@@ -44,10 +44,10 @@ export const mediaRequestsRouter = createTRPCRouter({
           };
         },
         {
-          fallback: (integration, error) => ({
+          fallback: (integration) => ({
             integration: { id: integration.id, name: integration.name, kind: integration.kind },
             data: [],
-            error: error instanceof Error ? error.message : String(error),
+            error: "Integration request failed",
           }),
           throwOnAllFailures: true,
         },
@@ -101,10 +101,10 @@ export const mediaRequestsRouter = createTRPCRouter({
           };
         },
         {
-          fallback: (integration, error) => ({
+          fallback: (integration) => ({
             integration: { id: integration.id, name: integration.name, kind: integration.kind },
             data: { stats: null, users: [] },
-            error: error instanceof Error ? error.message : String(error),
+            error: "Integration request failed",
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/media-server.ts b/packages/api/src/router/widgets/media-server.ts
index 1ed6b9091..1ce8b863f 100644
--- a/packages/api/src/router/widgets/media-server.ts
+++ b/packages/api/src/router/widgets/media-server.ts
@@ -38,12 +38,12 @@ export const mediaServerRouter = createTRPCRouter({
           };
         },
         {
-          fallback: (integration, error) => ({
+          fallback: (integration) => ({
             integrationId: integration.id,
             integrationName: integration.name,
             integrationKind: integration.kind,
             sessions: [],
-            error: error instanceof Error ? error.message : String(error),
+            error: "Integration request failed",
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/options.ts b/packages/api/src/router/widgets/options.ts
index e94ee31a4..5dc4dad54 100644
--- a/packages/api/src/router/widgets/options.ts
+++ b/packages/api/src/router/widgets/options.ts
@@ -9,6 +9,7 @@ import { boards, items } from "@homarr/db/schema";
 import type { WidgetOptionsSettings } from "../../../../widgets/src";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
 import { throwIfActionForbiddenAsync } from "../board/board-access";
+import { validateTimetableOptionsChangeAsync } from "./timetable";
 
 export const optionsRouter = createTRPCRouter({
   getWidgetOptionSettings: publicProcedure.query(async ({ ctx }): Promise<WidgetOptionsSettings> => {
@@ -45,8 +46,11 @@ export const optionsRouter = createTRPCRouter({
         });
       }
 
-      const options = SuperJSON.parse<Record<string, unknown>>(item.options);
-      Object.assign(options, input.newOptions);
+      const previousOptions = SuperJSON.parse<Record<string, unknown>>(item.options);
+      const options = { ...previousOptions, ...input.newOptions };
+      if (item.kind === "timetable") {
+        await validateTimetableOptionsChangeAsync(options, previousOptions);
+      }
       await ctx.db
         .update(items)
         .set({ options: SuperJSON.stringify(options) })
diff --git a/packages/api/src/router/widgets/timetable.ts b/packages/api/src/router/widgets/timetable.ts
index e92757fc0..0daf7a4d0 100644
--- a/packages/api/src/router/widgets/timetable.ts
+++ b/packages/api/src/router/widgets/timetable.ts
@@ -156,6 +156,34 @@ const resolvePublicTimetableAddressesAsync = async (baseUrl: string): Promise<Ti
   return addresses;
 };
 
+const normalizeTimetableOptionsBaseUrlOrThrowBadRequest = (options: Record<string, unknown>) => {
+  const parsedOptions = timetableOptionsSchema.safeParse(options);
+  if (!parsedOptions.success) {
+    throw new TRPCError({ code: "BAD_REQUEST", message: "Invalid timetable widget options" });
+  }
+  return normalizeBaseUrlOrThrowBadRequest(parsedOptions.data.baseUrl ?? DEFAULT_TIMETABLE_BASE_URL);
+};
+
+export const validateTimetableOptionsChangeAsync = async (
+  nextOptions: Record<string, unknown>,
+  previousOptions?: Record<string, unknown>,
+) => {
+  const nextBaseUrl = normalizeTimetableOptionsBaseUrlOrThrowBadRequest(nextOptions);
+  if (nextBaseUrl === DEFAULT_TIMETABLE_BASE_URL) return;
+
+  let previousBaseUrl: string | undefined;
+  if (previousOptions) {
+    try {
+      previousBaseUrl = normalizeTimetableOptionsBaseUrlOrThrowBadRequest(previousOptions);
+    } catch {
+      // Invalid legacy options must not prevent replacing them with a valid configuration.
+    }
+  }
+  if (nextBaseUrl === previousBaseUrl) return;
+
+  await resolvePublicTimetableAddressesAsync(nextBaseUrl);
+};
+
 const getSavedTimetableBaseUrl = (serializedOptions: string) => {
   const options = parseSavedTimetableOptions(serializedOptions);
   return normalizeSavedTimetableBaseUrl(options.baseUrl ?? DEFAULT_TIMETABLE_BASE_URL);
@@ -174,6 +202,7 @@ const resolveTimetableBaseUrlAsync = async (
   const requestedBaseUrl = normalizeBaseUrlOrThrowBadRequest(input.baseUrl);
   if (allowBoardConfiguration) {
     if (input.boardId) {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
       let savedOptions: string | undefined;
       if (input.itemId) {
         const item = await ctx.db.query.items.findFirst({
@@ -182,8 +211,6 @@ const resolveTimetableBaseUrlAsync = async (
         if (!item) throw new TRPCError({ code: "NOT_FOUND", message: "Timetable widget not found" });
         savedOptions = item.options;
       }
-
-      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
       const savedBaseUrl = savedOptions === undefined ? undefined : getSavedTimetableBaseUrl(savedOptions);
       if (requestedBaseUrl === savedBaseUrl || requestedBaseUrl === DEFAULT_TIMETABLE_BASE_URL) {
         return { baseUrl: requestedBaseUrl };
diff --git a/packages/widgets/src/common/integration-error-indicator.tsx b/packages/widgets/src/common/integration-error-indicator.tsx
index fab368cad..818937ef4 100644
--- a/packages/widgets/src/common/integration-error-indicator.tsx
+++ b/packages/widgets/src/common/integration-error-indicator.tsx
@@ -3,7 +3,7 @@
 import { ActionIcon, Tooltip } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
-import { useI18n } from "@homarr/translation/client";
+import { useScopedI18n } from "@homarr/translation/client";
 
 interface IntegrationResult {
   integrationId: string;
@@ -16,12 +16,12 @@ interface IntegrationErrorIndicatorProps {
 }
 
 export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicatorProps) {
-  const t = useI18n();
+  const t = useScopedI18n("common");
   const failed = results.filter((result) => Boolean(result.error));
   if (failed.length === 0) return null;
 
   const names = failed.map((result) => result.integrationName ?? result.integrationId).join(", ");
-  const label = `${t("common.error")}: ${names}`;
+  const label = `${t("error")}: ${names}`;
   return (
     <Tooltip label={label} position="left" withArrow>
       <ActionIcon variant="transparent" color="orange" size={18} aria-label={label} style={{ cursor: "help" }}>
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index a3d9dd3a2..1785c0dc1 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -12,7 +12,8 @@ import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.scss";
 
 const useLiveFeedEntries = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
-  const { data: feedEntries = [] } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
+  const { data: feedEntries = [], error } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
+  if (error) throw error;
 
   return feedEntries;
 };
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 1f562dd36..428bacff7 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -185,7 +185,7 @@ export function UmamiContent({
         <Box h="100%" mih={260}>
           {selectedView}
         </Box>
-        {advancedLists}
+        <ScrollArea h="100%">{advancedLists}</ScrollArea>
       </SimpleGrid>
     );
 

From 36b75a071b9c9c16491d48be38fa1f52d3fffcbf Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 09:05:02 +0200
Subject: [PATCH 09/75] fix: complete widget review cleanup

---
 apps/docs/docs/widgets/timetable/index.mdx    |  2 +-
 .../src/router/test/widgets/rssFeed.spec.ts   |  1 +
 .../src/router/test/widgets/timetable.spec.ts | 56 +++++++++--
 packages/api/src/router/widgets/rssFeed.ts    |  3 +
 packages/api/src/router/widgets/timetable.ts  | 22 +++--
 packages/request-handler/src/immich.spec.ts   |  4 +-
 .../request-handler/src/timetable.spec.ts     | 70 +++++++++++---
 packages/request-handler/src/timetable.ts     | 96 ++++++++++---------
 packages/translation/src/lang/en.json         | 11 ++-
 .../_inputs/widget-dynamic-select-input.tsx   | 13 ++-
 .../src/archive-team-warrior/component.tsx    | 37 +++----
 .../src/beszel-system-stats/component.tsx     |  9 +-
 .../src/beszel-system-table/component.tsx     |  8 +-
 packages/widgets/src/definition.ts            |  1 +
 .../src/health-monitoring/system-health.tsx   |  6 +-
 packages/widgets/src/options.ts               |  1 +
 packages/widgets/src/rssFeed/component.tsx    |  6 +-
 packages/widgets/src/rssFeed/index.ts         |  8 +-
 packages/widgets/src/timetable/index.ts       | 10 +-
 packages/widgets/src/umami/component.tsx      |  2 +-
 20 files changed, 251 insertions(+), 115 deletions(-)

diff --git a/apps/docs/docs/widgets/timetable/index.mdx b/apps/docs/docs/widgets/timetable/index.mdx
index e53f29920..75a7221e4 100644
--- a/apps/docs/docs/widgets/timetable/index.mdx
+++ b/apps/docs/docs/widgets/timetable/index.mdx
@@ -35,4 +35,4 @@ import streetDepartures from "./img/street-departures.png";
 
 <WidgetConfig configuration={timetableWidget.configuration} />
 
-For security, new or changed custom base URLs must resolve to a public IP address. Private and local hosts are rejected.
+For security, all custom base URLs must resolve to a public IP address whenever Homarr uses them. Private and local hosts are rejected.
diff --git a/packages/api/src/router/test/widgets/rssFeed.spec.ts b/packages/api/src/router/test/widgets/rssFeed.spec.ts
index 9e445a910..74b2d318b 100644
--- a/packages/api/src/router/test/widgets/rssFeed.spec.ts
+++ b/packages/api/src/router/test/widgets/rssFeed.spec.ts
@@ -58,6 +58,7 @@ describe("rssFeedRouter", () => {
         feedIndex: 0,
         origin: "https://example.com",
         errorType: "Error",
+        errorMessage: "Failed to fetch [redacted URL]",
       });
       const logged = JSON.stringify(mocks.logger.warn.mock.calls);
       expect(logged).not.toContain("password");
diff --git a/packages/api/src/router/test/widgets/timetable.spec.ts b/packages/api/src/router/test/widgets/timetable.spec.ts
index aad001e9b..d3b31a046 100644
--- a/packages/api/src/router/test/widgets/timetable.spec.ts
+++ b/packages/api/src/router/test/widgets/timetable.spec.ts
@@ -86,14 +86,16 @@ describe("timetableRouter source authorization", () => {
     ).rejects.toMatchObject({ code: "BAD_REQUEST" });
   });
 
-  it("loads a persisted private endpoint only through a viewable timetable item", async () => {
+  it("rejects a persisted private endpoint at runtime even through a viewable timetable item", async () => {
     const db = createDb();
     const baseUrl = "http://timetable.internal:8080";
     const { itemId } = await createTimetableItemAsync(db, { baseUrl });
     const caller = createCaller(db, null);
 
-    await caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 });
-    expect(mocks.getTimetable).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl }));
+    await expect(caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    expect(mocks.getTimetable).not.toHaveBeenCalled();
     await expect(
       caller.getTimetable({ baseUrl: "http://127.0.0.1:8080", itemId, stationId: "station", limit: 10 }),
     ).rejects.toMatchObject({ code: "FORBIDDEN" });
@@ -128,6 +130,7 @@ describe("timetableRouter source authorization", () => {
     "http://[::1]:8080",
     "http://[::ffff:127.0.0.1]:8080",
     "https://[fd00::1]:8443",
+    "https://192.88.99.1",
     "http://[64:ff9b::7f00:1]:8080",
     "http://[2002:7f00:1::]:8080",
   ])("blocks an unsaved private endpoint %s even for board modifiers", async (baseUrl) => {
@@ -173,17 +176,54 @@ describe("timetableRouter source authorization", () => {
     expect(mocks.searchStations).not.toHaveBeenCalled();
   });
 
-  it("allows the exact saved private endpoint when item and board IDs match", async () => {
+  it("rejects the exact saved private endpoint at runtime", async () => {
     const db = createDb();
     const baseUrl = "http://timetable.internal:8080";
     const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
 
-    await createCaller(db, createSession(ownerId)).searchStations({ baseUrl, boardId, itemId, query: "Bern" });
+    await expect(
+      createCaller(db, createSession(ownerId)).searchStations({ baseUrl, boardId, itemId, query: "Bern" }),
+    ).rejects.toMatchObject({ code: "BAD_REQUEST" });
 
     expect(mocks.lookup).not.toHaveBeenCalled();
-    expect(mocks.searchStations).toHaveBeenLastCalledWith(
-      expect.objectContaining({ baseUrl, pinnedAddresses: undefined }),
-    );
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+  });
+
+  it("re-resolves and pins a saved public endpoint for searches and timetable requests", async () => {
+    const db = createDb();
+    const baseUrl = "https://timetable.example.com";
+    const pinnedAddresses = [
+      { address: "93.184.216.34", family: 4 },
+      { address: "93.184.216.35", family: 4 },
+      { address: "2606:2800:220:1:248:1893:25c8:1946", family: 6 },
+    ];
+    mocks.lookup.mockResolvedValue([pinnedAddresses[2], pinnedAddresses[1], pinnedAddresses[0]]);
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await caller.searchStations({ baseUrl, boardId, itemId, query: "Bern" });
+    await caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 });
+
+    expect(mocks.lookup).toHaveBeenCalledTimes(2);
+    expect(mocks.searchStations).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl, pinnedAddresses }));
+    expect(mocks.getTimetable).toHaveBeenLastCalledWith(expect.objectContaining({ baseUrl, pinnedAddresses }));
+  });
+
+  it("rejects a saved public hostname when it resolves to a private address at request time", async () => {
+    const db = createDb();
+    const baseUrl = "https://timetable.example.com";
+    mocks.lookup.mockResolvedValue([{ address: "10.0.0.8", family: 4 }]);
+    const { boardId, itemId, ownerId } = await createTimetableItemAsync(db, { baseUrl, isPublic: false });
+    const caller = createCaller(db, createSession(ownerId));
+
+    await expect(caller.searchStations({ baseUrl, boardId, itemId, query: "Bern" })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    await expect(caller.getTimetable({ baseUrl, itemId, stationId: "station", limit: 10 })).rejects.toMatchObject({
+      code: "BAD_REQUEST",
+    });
+    expect(mocks.searchStations).not.toHaveBeenCalled();
+    expect(mocks.getTimetable).not.toHaveBeenCalled();
   });
 
   it("blocks changing a saved timetable to a private endpoint through item options", async () => {
diff --git a/packages/api/src/router/widgets/rssFeed.ts b/packages/api/src/router/widgets/rssFeed.ts
index 60250fe5d..37dd421d0 100644
--- a/packages/api/src/router/widgets/rssFeed.ts
+++ b/packages/api/src/router/widgets/rssFeed.ts
@@ -22,6 +22,8 @@ const safeFeedLogContext = (url: string, feedIndex: number) => {
   }
 };
 
+const redactFeedFailureMessage = (message: string) => message.replace(/https?:\/\/\S+/gi, "[redacted URL]");
+
 const feedsInput = z.object({
   urls: z.array(z.string()).max(100),
   maximumAmountPosts: z.number(),
@@ -49,6 +51,7 @@ export const rssFeedRouter = createTRPCRouter({
         logger.warn("RSS feed fetch failed", {
           ...safeFeedLogContext(urls[index] ?? "", index),
           errorType: result.reason instanceof Error ? result.reason.name : typeof result.reason,
+          errorMessage: result.reason instanceof Error ? redactFeedFailureMessage(result.reason.message) : undefined,
         });
       }
     });
diff --git a/packages/api/src/router/widgets/timetable.ts b/packages/api/src/router/widgets/timetable.ts
index 0daf7a4d0..ced16645e 100644
--- a/packages/api/src/router/widgets/timetable.ts
+++ b/packages/api/src/router/widgets/timetable.ts
@@ -37,6 +37,7 @@ const blockedTimetableSubnets = [
   ["172.16.0.0", 12, "ipv4"],
   ["192.0.0.0", 24, "ipv4"],
   ["192.0.2.0", 24, "ipv4"],
+  ["192.88.99.0", 24, "ipv4"],
   ["192.168.0.0", 16, "ipv4"],
   ["198.18.0.0", 15, "ipv4"],
   ["198.51.100.0", 24, "ipv4"],
@@ -153,7 +154,7 @@ const resolvePublicTimetableAddressesAsync = async (baseUrl: string): Promise<Ti
     });
   }
 
-  return addresses;
+  return addresses.toSorted((left, right) => left.family - right.family || left.address.localeCompare(right.address));
 };
 
 const normalizeTimetableOptionsBaseUrlOrThrowBadRequest = (options: Record<string, unknown>) => {
@@ -203,19 +204,19 @@ const resolveTimetableBaseUrlAsync = async (
   if (allowBoardConfiguration) {
     if (input.boardId) {
       await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
-      let savedOptions: string | undefined;
       if (input.itemId) {
         const item = await ctx.db.query.items.findFirst({
+          columns: { id: true },
           where: and(eq(items.id, input.itemId), eq(items.kind, "timetable"), eq(items.boardId, input.boardId)),
         });
         if (!item) throw new TRPCError({ code: "NOT_FOUND", message: "Timetable widget not found" });
-        savedOptions = item.options;
       }
-      const savedBaseUrl = savedOptions === undefined ? undefined : getSavedTimetableBaseUrl(savedOptions);
-      if (requestedBaseUrl === savedBaseUrl || requestedBaseUrl === DEFAULT_TIMETABLE_BASE_URL) {
+      if (requestedBaseUrl === DEFAULT_TIMETABLE_BASE_URL) {
         return { baseUrl: requestedBaseUrl };
       }
 
+      // Resolve immediately before every custom request. A URL that was public when saved can later resolve to a
+      // private address, so matching the persisted value is not sufficient protection against DNS rebinding.
       const pinnedAddresses = await resolvePublicTimetableAddressesAsync(requestedBaseUrl);
       return { baseUrl: requestedBaseUrl, pinnedAddresses };
     }
@@ -241,7 +242,10 @@ const resolveTimetableBaseUrlAsync = async (
   if (requestedBaseUrl !== savedBaseUrl) {
     throw new TRPCError({ code: "FORBIDDEN", message: "Timetable URL does not match the saved widget" });
   }
-  return { baseUrl: savedBaseUrl };
+  if (savedBaseUrl === DEFAULT_TIMETABLE_BASE_URL) return { baseUrl: savedBaseUrl };
+
+  const pinnedAddresses = await resolvePublicTimetableAddressesAsync(savedBaseUrl);
+  return { baseUrl: savedBaseUrl, pinnedAddresses };
 };
 
 export const timetableRouter = createTRPCRouter({
@@ -253,9 +257,11 @@ export const timetableRouter = createTRPCRouter({
       }),
     )
     .query(async ({ ctx, input }) => {
-      const { baseUrl } = await resolveTimetableBaseUrlAsync(ctx, input);
+      const { baseUrl, pinnedAddresses } = await resolveTimetableBaseUrlAsync(ctx, input);
       const { itemId: _itemId, boardId: _boardId, ...handlerInput } = input;
-      const { data } = await timetableGetTimetableRequestHandler.handler({ ...handlerInput, baseUrl }).getDataAsync();
+      const { data } = await timetableGetTimetableRequestHandler
+        .handler({ ...handlerInput, baseUrl, pinnedAddresses })
+        .getDataAsync();
       return data;
     }),
   searchStations: publicProcedure
diff --git a/packages/request-handler/src/immich.spec.ts b/packages/request-handler/src/immich.spec.ts
index a8739587f..199341933 100644
--- a/packages/request-handler/src/immich.spec.ts
+++ b/packages/request-handler/src/immich.spec.ts
@@ -28,7 +28,7 @@ describe("immichAlbumsRequestHandler", () => {
   });
 
   test("sorts deterministically before caching a limited response", async () => {
-    const getAlbumsAsync = vi.fn().mockResolvedValue(albums);
+    const getAlbumsAsync = vi.fn().mockResolvedValue([...albums]);
     mocks.createIntegrationAsync.mockResolvedValue({ getAlbumsAsync });
 
     const first = await immichAlbumsRequestHandler.handler(integration, { limit: 2 }).getDataAsync();
@@ -40,7 +40,7 @@ describe("immichAlbumsRequestHandler", () => {
   });
 
   test("preserves upstream order when no limit is requested", async () => {
-    const getAlbumsAsync = vi.fn().mockResolvedValue(albums);
+    const getAlbumsAsync = vi.fn().mockResolvedValue([...albums]);
     mocks.createIntegrationAsync.mockResolvedValue({ getAlbumsAsync });
 
     const result = await immichAlbumsRequestHandler.handler(integration, {}).getDataAsync();
diff --git a/packages/request-handler/src/timetable.spec.ts b/packages/request-handler/src/timetable.spec.ts
index b0185b775..54bd68645 100644
--- a/packages/request-handler/src/timetable.spec.ts
+++ b/packages/request-handler/src/timetable.spec.ts
@@ -65,13 +65,30 @@ describe("timetable response bounds", () => {
   });
 
   it("pins the vetted address into a direct connection without changing the request hostname", async () => {
-    mockFetch.mockResolvedValue(
-      new Response(JSON.stringify([{ id: "station", label: "Station", iconclass: "train" }])),
-    );
     const pinnedAddresses = [
       { address: "93.184.216.34", family: 4 as const },
       { address: "2606:2800:220:1:248:1893:25c8:1946", family: 6 as const },
     ];
+    mockFetch.mockImplementation(async () => {
+      const pinnedLookup = mockCreateCertificateAgent.mock.calls[0]?.[0]?.lookup;
+      expect(pinnedLookup).toBeTypeOf("function");
+      if (!pinnedLookup) throw new Error("Expected a pinned lookup function");
+
+      const lookupCallback = vi.fn();
+      pinnedLookup("timetable.example.com", { all: true }, lookupCallback);
+      expect(lookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+
+      const repeatedLookupCallback = vi.fn();
+      pinnedLookup("timetable.example.com", { all: true }, repeatedLookupCallback);
+      expect(repeatedLookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+      expect(mockCloseDispatcher).not.toHaveBeenCalled();
+
+      const unexpectedHostCallback = vi.fn();
+      pinnedLookup("different.example.com", { all: true }, unexpectedHostCallback);
+      expect(unexpectedHostCallback.mock.calls[0]?.[0]).toMatchObject({ code: "ENOTFOUND" });
+
+      return new Response(JSON.stringify([{ id: "station", label: "Station", iconclass: "train" }]));
+    });
 
     await timetableSearchStationsRequestHandler
       .handler({
@@ -98,21 +115,44 @@ describe("timetable response bounds", () => {
       expect.objectContaining({ dispatcher: mockDispatcher, redirect: "error" }),
     );
 
-    const pinnedLookup = mockCreateCertificateAgent.mock.calls[0]?.[0]?.lookup;
-    expect(pinnedLookup).toBeTypeOf("function");
-    if (!pinnedLookup) throw new Error("Expected a pinned lookup function");
+    expect(mockCloseDispatcher).toHaveBeenCalledOnce();
+  });
 
-    const lookupCallback = vi.fn();
-    pinnedLookup("timetable.example.com", { all: true }, lookupCallback);
-    expect(lookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+  it("pins timetable requests and closes their direct dispatcher", async () => {
+    mockFetch.mockResolvedValue(
+      new Response(
+        JSON.stringify({
+          connections: [
+            {
+              time: "2026-01-01T00:00:00Z",
+              line: "1",
+              color: "ffffff",
+              terminal: { name: "Stop" },
+              dep_delay: "0",
+            },
+          ],
+        }),
+      ),
+    );
+    const pinnedAddresses = [{ address: "93.184.216.34", family: 4 as const }];
 
-    const repeatedLookupCallback = vi.fn();
-    pinnedLookup("timetable.example.com", { all: true }, repeatedLookupCallback);
-    expect(repeatedLookupCallback).toHaveBeenCalledWith(null, pinnedAddresses);
+    await timetableGetTimetableRequestHandler
+      .handler({
+        baseUrl: "https://timetable.example.com",
+        stationId: "pinned-departures",
+        limit: 1,
+        pinnedAddresses,
+      })
+      .getDataAsync();
 
-    const unexpectedHostCallback = vi.fn();
-    pinnedLookup("different.example.com", { all: true }, unexpectedHostCallback);
-    expect(unexpectedHostCallback.mock.calls[0]?.[0]).toMatchObject({ code: "ENOTFOUND" });
+    expect(mockCreateCertificateAgent).toHaveBeenCalledWith(
+      { lookup: expect.any(Function) },
+      expect.objectContaining({ noProxy: "*" }),
+    );
+    expect(mockFetch).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({ dispatcher: mockDispatcher, redirect: "error" }),
+    );
     expect(mockCloseDispatcher).toHaveBeenCalledOnce();
   });
 
diff --git a/packages/request-handler/src/timetable.ts b/packages/request-handler/src/timetable.ts
index e8144d435..2ae4eb449 100644
--- a/packages/request-handler/src/timetable.ts
+++ b/packages/request-handler/src/timetable.ts
@@ -54,10 +54,14 @@ export const timetableSearchStationsRequestHandler = createRequestHandler<
 
 export const timetableGetTimetableRequestHandler = createRequestHandler<
   Timetable,
-  { baseUrl: string; stationId: string; limit: number }
+  { baseUrl: string; stationId: string; limit: number; pinnedAddresses?: TimetableResolvedAddress[] }
 >({
   async requestAsync(input) {
-    return await getTimetableAsync(input.baseUrl, { stationId: input.stationId, limit: input.limit });
+    return await getTimetableAsync(
+      input.baseUrl,
+      { stationId: input.stationId, limit: input.limit },
+      input.pinnedAddresses,
+    );
   },
   cacheTtlMs: 60_000,
 });
@@ -142,6 +146,7 @@ const searchStationsAsync = async (
 const getTimetableAsync = async (
   baseUrl: string,
   options: { stationId: string; limit: number },
+  pinnedAddresses?: TimetableResolvedAddress[],
 ): Promise<Timetable> => {
   const now = new Date();
   const date = new Intl.DateTimeFormat("en-US", {
@@ -156,48 +161,53 @@ const getTimetableAsync = async (
     minute: "2-digit",
     hour12: false,
   }).format(now);
-  const response = await fetchWithTrustedCertificatesAsync(
-    buildUrl(baseUrl, "/timetable/api/stationboard.json", {
-      stop: options.stationId,
-      limit: options.limit,
-      show_delays: 1,
-      show_tracks: 1,
-      date,
-      time,
-    }),
-    timetableFetchOptions,
-  );
-  if (!response.ok) throw new ResponseError(response);
+  const dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  try {
+    const response = await fetchWithTrustedCertificatesAsync(
+      buildUrl(baseUrl, "/timetable/api/stationboard.json", {
+        stop: options.stationId,
+        limit: options.limit,
+        show_delays: 1,
+        show_tracks: 1,
+        date,
+        time,
+      }),
+      { ...timetableFetchOptions, dispatcher },
+    );
+    if (!response.ok) throw new ResponseError(response);
 
-  const body = await readBoundedTimetableJsonAsync(response);
-  const envelope = timetableEnvelopeSchema.parse(body);
-  const data = await timetableSchema.parseAsync({
-    connections: envelope.connections.slice(0, Math.min(options.limit, MAX_TIMETABLE_ENTRIES)),
-  });
-  return {
-    stationId: options.stationId,
-    timestamp: now,
-    entries: data.connections.map((connection) => {
-      const color = connection.color.split("~")[0];
-      return {
-        timestamp: connection.time,
-        line: connection.line
-          ? {
-              name: connection.line,
-              color: color && color.length >= 1 ? `#${color}` : null,
-            }
-          : null,
-        location: connection.terminal.name,
-        delay: connection.dep_delay,
-        platform: connection.track
-          ? {
-              name: connection.track.replace("!", ""),
-              hasChanged: connection.track.includes("!"),
-            }
-          : null,
-      };
-    }),
-  };
+    const body = await readBoundedTimetableJsonAsync(response);
+    const envelope = timetableEnvelopeSchema.parse(body);
+    const data = await timetableSchema.parseAsync({
+      connections: envelope.connections.slice(0, Math.min(options.limit, MAX_TIMETABLE_ENTRIES)),
+    });
+    return {
+      stationId: options.stationId,
+      timestamp: now,
+      entries: data.connections.map((connection) => {
+        const color = connection.color.split("~")[0];
+        return {
+          timestamp: connection.time,
+          line: connection.line
+            ? {
+                name: connection.line,
+                color: color && color.length >= 1 ? `#${color}` : null,
+              }
+            : null,
+          location: connection.terminal.name,
+          delay: connection.dep_delay,
+          platform: connection.track
+            ? {
+                name: connection.track.replace("!", ""),
+                hasChanged: connection.track.includes("!"),
+              }
+            : null,
+        };
+      }),
+    };
+  } finally {
+    await dispatcher?.close();
+  }
 };
 
 const timetableSchema = z.object({
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 1e61f8c41..d4c604310 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1991,11 +1991,15 @@
       "noStation": "No station selected",
       "option": {
         "baseUrl": {
-          "label": "Search.ch URL"
+          "label": "Search.ch URL",
+          "description": "Custom URLs must resolve to a public IP address. Private and local hosts are rejected."
         },
         "station": {
           "label": "Station"
         }
+      },
+      "error": {
+        "stationSearch": "Unable to search stations. Check the custom URL and your board access."
       }
     },
     "notebook": {
@@ -3541,6 +3545,9 @@
         "showPosterImage": {
           "label": "Show poster image"
         }
+      },
+      "error": {
+        "allFeedsFailed": "Unable to load RSS feeds. Check the feed URLs and try again."
       }
     },
     "releases": {
@@ -4284,6 +4291,8 @@
       "error": {
         "internalServerError": "Unable to connect to Beszel. Check your integration settings.",
         "liveConnectionFailed": "Live connection failed. Your Beszel instance may not support real-time streaming.",
+        "selectionSaveTitle": "Unable to save selection",
+        "selectionSaveMessage": "Your system or time period selection could not be saved. Please try again.",
         "switchToHistorical": "Switch to historical view",
         "systemNotFound": "Selected system was not found. Choose a different system."
       },
diff --git a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
index 532fd04f8..17a340421 100644
--- a/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
+++ b/packages/widgets/src/_inputs/widget-dynamic-select-input.tsx
@@ -30,13 +30,11 @@ export const WidgetDynamicSelectInput = ({
   const inputProps = form.getInputProps(`options.${property}`);
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebouncedValue(search, 300);
-  const { isPending, options: selectOptions } = options.useOptions(
-    debouncedSearch,
-    form.values.integrationIds,
-    form.values.options,
-    itemId,
-    boardId,
-  );
+  const {
+    error: optionsError,
+    isPending,
+    options: selectOptions,
+  } = options.useOptions(debouncedSearch, form.values.integrationIds, form.values.options, itemId, boardId);
   const currentOption = inputProps.value as DynamicSelectOption | null;
   const onChange = inputProps.onChange as (value: DynamicSelectOption | null) => void;
 
@@ -98,6 +96,7 @@ export const WidgetDynamicSelectInput = ({
       description={options.withDescription ? tWidget("description") : undefined}
       searchable
       {...inputProps}
+      error={inputProps.error ?? optionsError}
       value={currentOption === null ? null : currentOption.value}
       onChange={(selectedValue: string | null) => {
         if (selectedValue === null) {
diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx
index 5dff480dd..e6b4f878d 100644
--- a/packages/widgets/src/archive-team-warrior/component.tsx
+++ b/packages/widgets/src/archive-team-warrior/component.tsx
@@ -102,23 +102,26 @@ const ArchiveTeamWarriorWidgetContent = ({
           </Group>
           <ScrollArea style={{ flex: 1 }}>
             <Stack gap={4}>
-              {status.items.map((item) => (
-                <Card key={item.id} withBorder p="xs">
-                  <Group justify="space-between" wrap="nowrap">
-                    <Stack gap={0} miw={0}>
-                      <Text size="sm" fw={600} lineClamp={1}>
-                        {item.name}
-                      </Text>
-                      <Text size="xs" c="dimmed" lineClamp={1}>
-                        {item.project ?? projectName}
-                      </Text>
-                    </Stack>
-                    <Badge size="xs" color={getStatusColor(item.status)}>
-                      {t(`status.${item.status}`)}
-                    </Badge>
-                  </Group>
-                </Card>
-              ))}
+              {status.items.map((item) => {
+                const itemStatusKey = getStatusKey(item.status);
+                return (
+                  <Card key={item.id} withBorder p="xs">
+                    <Group justify="space-between" wrap="nowrap">
+                      <Stack gap={0} miw={0}>
+                        <Text size="sm" fw={600} lineClamp={1}>
+                          {item.name}
+                        </Text>
+                        <Text size="xs" c="dimmed" lineClamp={1}>
+                          {item.project ?? projectName}
+                        </Text>
+                      </Stack>
+                      <Badge size="xs" color={getStatusColor(itemStatusKey)}>
+                        {t(`status.${itemStatusKey}`)}
+                      </Badge>
+                    </Group>
+                  </Card>
+                );
+              })}
             </Stack>
           </ScrollArea>
         </>
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 64d985251..8344ba968 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -9,6 +9,7 @@ import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import { useOptionalBoard } from "@homarr/boards/context";
+import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./component.module.css";
@@ -36,7 +37,13 @@ export default function BeszelSystemStatsWidget({
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
-  const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation();
+  const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
+    onError: () =>
+      showErrorNotification({
+        title: t("error.selectionSaveTitle"),
+        message: t("error.selectionSaveMessage"),
+      }),
+  });
   const {
     data: systemsResult = [],
     isPending: systemsPending,
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index 044fb2c95..02c55d3ce 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -405,7 +405,7 @@ export default function BeszelSystemTableWidget({
               integrationIds: [activeIntegrationId],
               systemId: activeSystem.id,
               timePeriod: "1h",
-              includeDocker: true,
+              includeDocker: false,
             },
             "query",
           ),
@@ -472,9 +472,9 @@ export default function BeszelSystemTableWidget({
                 disk: options.showDisk,
                 diskIO: options.showDisk,
                 network: options.showNet,
-                dockerCpu: true,
-                dockerMemory: true,
-                dockerNetwork: true,
+                dockerCpu: false,
+                dockerMemory: false,
+                dockerNetwork: false,
               }}
             />
           </Stack>
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index d4e350451..f2c432f29 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -134,6 +134,7 @@ export const setWidgetRuntimeQueries = (
   queryKeys: readonly QueryKey[],
 ) => {
   if (!widgetStateRef) return;
+  // This render-time ref write is idempotent and does not trigger a render.
   const state = widgetStateRef.current ?? {};
   state[runtimeQueriesStateKey] = queryKeys.flatMap((queryKey) => {
     const query = normalizeWidgetQuery(queryKey);
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 25a08ce8a..317f97f5a 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -69,8 +69,10 @@ export const SystemHealthMonitoring = ({
 
   if (healthData.length === 0) return <WidgetEmptyState />;
 
+  const Container = withScrollArea ? ScrollArea : Box;
+
   return (
-    <ScrollArea h={withScrollArea ? "100%" : undefined}>
+    <Container h={withScrollArea ? "100%" : undefined}>
       <Stack mih="100%" gap="sm" className="health-monitoring">
         {healthData.map(({ integrationId, integrationName, healthInfo }) => {
           const filteredFileSystem = filterStorageVolumes(
@@ -221,7 +223,7 @@ export const SystemHealthMonitoring = ({
           );
         })}
       </Stack>
-    </ScrollArea>
+    </Container>
   );
 };
 
diff --git a/packages/widgets/src/options.ts b/packages/widgets/src/options.ts
index 85ef192b9..1dbef68e5 100644
--- a/packages/widgets/src/options.ts
+++ b/packages/widgets/src/options.ts
@@ -59,6 +59,7 @@ interface DynamicSelectInput extends CommonInput<DynamicSelectOption | null> {
     itemId?: string,
     boardId?: string,
   ) => {
+    error?: string;
     isPending: boolean;
     options: DynamicSelectOption[];
   };
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 1785c0dc1..1a30e0352 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -12,10 +12,10 @@ import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.scss";
 
 const useLiveFeedEntries = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
-  const { data: feedEntries = [], error } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
-  if (error) throw error;
+  const { data: feedEntries, error } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
+  if (error && feedEntries === undefined) throw error;
 
-  return feedEntries;
+  return feedEntries ?? [];
 };
 
 export default function RssFeed({ options, width, displayMode }: WidgetComponentProps<"rssFeed">) {
diff --git a/packages/widgets/src/rssFeed/index.ts b/packages/widgets/src/rssFeed/index.ts
index dcef56cb4..a00124fc5 100644
--- a/packages/widgets/src/rssFeed/index.ts
+++ b/packages/widgets/src/rssFeed/index.ts
@@ -1,4 +1,4 @@
-import { IconRss } from "@tabler/icons-react";
+import { IconRss, IconServerOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
@@ -19,6 +19,12 @@ export const { definition, componentLoader } = createWidgetDefinition("rssFeed",
       maximumAmountPosts: scope.options.maximumAmountPosts,
     }),
   refetchInterval: null,
+  errors: {
+    BAD_GATEWAY: {
+      icon: IconServerOff,
+      message: (t) => t("widget.rssFeed.error.allFeedsFailed"),
+    },
+  },
   createOptions() {
     return optionsBuilder.from((factory) => ({
       feedUrls: factory.multiText({
diff --git a/packages/widgets/src/timetable/index.ts b/packages/widgets/src/timetable/index.ts
index 634ad20c4..212e2746b 100644
--- a/packages/widgets/src/timetable/index.ts
+++ b/packages/widgets/src/timetable/index.ts
@@ -2,6 +2,7 @@ import { IconBusStop } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
@@ -13,10 +14,16 @@ export const { componentLoader, definition } = createWidgetDefinition("timetable
       baseUrl: factory.text({
         defaultValue: "https://search.ch",
         validate: z.string().url(),
+        withDescription: true,
       }),
       station: factory.dynamicSelect({
         useOptions(query, _integrationIds, options, itemId, boardId) {
-          const { data: stations, isPending } = clientApi.widget.timetable.searchStations.useQuery({
+          const t = useScopedI18n("widget.timetable");
+          const {
+            data: stations,
+            error,
+            isPending,
+          } = clientApi.widget.timetable.searchStations.useQuery({
             baseUrl: typeof options.baseUrl === "string" ? options.baseUrl : "https://search.ch",
             itemId,
             boardId,
@@ -24,6 +31,7 @@ export const { componentLoader, definition } = createWidgetDefinition("timetable
           });
 
           return {
+            error: error ? t("error.stationSearch") : undefined,
             isPending,
             options:
               stations?.map((station) => ({
diff --git a/packages/widgets/src/umami/component.tsx b/packages/widgets/src/umami/component.tsx
index 602922b7e..553550b98 100644
--- a/packages/widgets/src/umami/component.tsx
+++ b/packages/widgets/src/umami/component.tsx
@@ -42,7 +42,7 @@ export default function UmamiWidget({
       "query",
     ),
     getQueryKey(clientApi.widget.umami.getActiveVisitors, { integrationId, websiteId: options.websiteId }, "query"),
-    ...(options.viewMode === "events"
+    ...(options.viewMode === "events" && options.eventNames.length > 0
       ? [
           getQueryKey(
             clientApi.widget.umami.getMultiEventTimeSeries,

From 45ff97972c892ac82818bf8f743e5a51b47c561c Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 09:27:31 +0200
Subject: [PATCH 10/75] fix: address final widget review findings

---
 apps/docs/docs/widgets/rss-feed/index.mdx     |  2 +
 apps/docs/docs/widgets/timetable/index.mdx    |  2 +
 e2e/health-checks.spec.ts                     |  9 ++-
 .../src/router/test/widgets/rssFeed.spec.ts   | 20 ++++++
 packages/api/src/router/widgets/rssFeed.ts    | 25 ++++----
 packages/translation/src/lang/en.json         |  8 +++
 .../src/beszel-system-stats/component.tsx     | 61 +++++++++++++++----
 packages/widgets/src/rssFeed/component.tsx    | 46 +++++++++++---
 packages/widgets/src/timetable/component.tsx  | 14 ++++-
 packages/widgets/src/timetable/index.ts       |  9 ++-
 10 files changed, 159 insertions(+), 37 deletions(-)

diff --git a/apps/docs/docs/widgets/rss-feed/index.mdx b/apps/docs/docs/widgets/rss-feed/index.mdx
index d663554d6..1c700b15c 100644
--- a/apps/docs/docs/widgets/rss-feed/index.mdx
+++ b/apps/docs/docs/widgets/rss-feed/index.mdx
@@ -31,6 +31,8 @@ import screenshot from "./img/screenshot.png";
 
 <WidgetConfig configuration={rssFeedWidget.configuration} />
 
+If one configured feed fails, the widget keeps entries from healthy feeds visible and shows a warning. If a refresh fails after entries have loaded, the previous entries stay visible with a stale-data warning.
+
 ### Examples
 
 Here's a small collection of examples, that you can use for testing or actual use (in no particular order):
diff --git a/apps/docs/docs/widgets/timetable/index.mdx b/apps/docs/docs/widgets/timetable/index.mdx
index 75a7221e4..37f5abf05 100644
--- a/apps/docs/docs/widgets/timetable/index.mdx
+++ b/apps/docs/docs/widgets/timetable/index.mdx
@@ -36,3 +36,5 @@ import streetDepartures from "./img/street-departures.png";
 <WidgetConfig configuration={timetableWidget.configuration} />
 
 For security, all custom base URLs must resolve to a public IP address whenever Homarr uses them. Private and local hosts are rejected.
+
+If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them with their last update time.
diff --git a/e2e/health-checks.spec.ts b/e2e/health-checks.spec.ts
index b280fcc56..01515c8b2 100644
--- a/e2e/health-checks.spec.ts
+++ b/e2e/health-checks.spec.ts
@@ -4,9 +4,12 @@ import { createHomarrContainer } from "./shared/create-homarr-container";
 import { createRedisContainer } from "./shared/redis-container";
 
 describe("Health checks", () => {
-  test("ready and live should return 200 OK with normal image and no extra configuration", async () => {
+  test("ready and live should return 200 OK with normal image and no extra configuration", async ({
+    onTestFinished,
+  }) => {
     // Arrange
     const homarrContainer = await createHomarrContainer().start();
+    onTestFinished(() => homarrContainer.stop());
 
     // Act
     const readyResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/ready`);
@@ -17,9 +20,10 @@ describe("Health checks", () => {
     expect(liveResponse.status).toBe(200);
   }, 60_000);
 
-  test("ready and live should return 200 OK with external redis", async () => {
+  test("ready and live should return 200 OK with external redis", async ({ onTestFinished }) => {
     // Arrange
     const redisContainer = await createRedisContainer().start();
+    onTestFinished(() => redisContainer.stop());
     const homarrContainer = await createHomarrContainer({
       environment: {
         REDIS_IS_EXTERNAL: "true",
@@ -28,6 +32,7 @@ describe("Health checks", () => {
         REDIS_PASSWORD: redisContainer.getPassword(),
       },
     }).start();
+    onTestFinished(() => homarrContainer.stop());
 
     // Act
     const readyResponse = await fetch(`http://localhost:${homarrContainer.getMappedPort(7575)}/api/health/ready`);
diff --git a/packages/api/src/router/test/widgets/rssFeed.spec.ts b/packages/api/src/router/test/widgets/rssFeed.spec.ts
index 74b2d318b..d5fef09b6 100644
--- a/packages/api/src/router/test/widgets/rssFeed.spec.ts
+++ b/packages/api/src/router/test/widgets/rssFeed.spec.ts
@@ -65,6 +65,26 @@ describe("rssFeedRouter", () => {
       expect(logged).not.toContain("token");
       expect(logged).not.toContain("secret");
     });
+
+    test("returns successful entries and only a failure count when some feeds fail", async () => {
+      const failedUrl = "https://user:password@example.com/feed?token=secret";
+      mocks.getFeed.mockImplementation(async (input: { url: string }) => {
+        if (input.url === failedUrl) throw new Error(`Failed to fetch ${failedUrl}`);
+        return { data: { entries: [{ id: "entry" }] } };
+      });
+      const caller = rssFeedRouter.createCaller({
+        db: createDb(),
+        deviceType: undefined,
+        session: createSession(["board-create"]),
+      });
+
+      const result = await caller.getFeeds({ urls: ["https://example.com/feed", failedUrl], maximumAmountPosts: 5 });
+
+      expect(result).toEqual({ entries: [{ id: "entry" }], failedFeedCount: 1 });
+      expect(JSON.stringify(result)).not.toContain("password");
+      expect(JSON.stringify(result)).not.toContain("token");
+      expect(JSON.stringify(result)).not.toContain("secret");
+    });
   });
 
   describe("canAccessAllFeedsAsync", () => {
diff --git a/packages/api/src/router/widgets/rssFeed.ts b/packages/api/src/router/widgets/rssFeed.ts
index 37dd421d0..acdea907b 100644
--- a/packages/api/src/router/widgets/rssFeed.ts
+++ b/packages/api/src/router/widgets/rssFeed.ts
@@ -62,17 +62,20 @@ export const rssFeedRouter = createTRPCRouter({
       });
     }
 
-    return settled
-      .flatMap((result) => {
-        if (result.status === "fulfilled") return result.value.data.entries;
-        return [];
-      })
-      .toSorted((entryA, entryB) => {
-        return entryA.published && entryB.published
-          ? new Date(entryB.published).getTime() - new Date(entryA.published).getTime()
-          : 0;
-      })
-      .slice(0, input.maximumAmountPosts);
+    return {
+      entries: settled
+        .flatMap((result) => {
+          if (result.status === "fulfilled") return result.value.data.entries;
+          return [];
+        })
+        .toSorted((entryA, entryB) => {
+          return entryA.published && entryB.published
+            ? new Date(entryB.published).getTime() - new Date(entryA.published).getTime()
+            : 0;
+        })
+        .slice(0, input.maximumAmountPosts),
+      failedFeedCount: failures.length,
+    };
   }),
 });
 
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index d4c604310..f987f4c71 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1999,7 +1999,11 @@
         }
       },
       "error": {
+        "customSourceUnavailable": "The timetable source is unavailable. Check that its URL resolves to a public IP address.",
         "stationSearch": "Unable to search stations. Check the custom URL and your board access."
+      },
+      "warning": {
+        "stale": "The timetable could not be refreshed. Showing departures last updated at {time}."
       }
     },
     "notebook": {
@@ -3548,6 +3552,10 @@
       },
       "error": {
         "allFeedsFailed": "Unable to load RSS feeds. Check the feed URLs and try again."
+      },
+      "warning": {
+        "partial": "{count, plural, one {# RSS feed could not be loaded} other {# RSS feeds could not be loaded}}",
+        "stale": "RSS feeds could not be refreshed. Showing previously loaded entries."
       }
     },
     "releases": {
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index 8344ba968..a448bb76a 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { Box, Button, Center, Loader, Menu, ScrollArea, SegmentedControl, Select, Stack, Text } from "@mantine/core";
 import { IconQuestionMark, IconServer, IconServerOff } from "@tabler/icons-react";
 import { getQueryKey } from "@trpc/react-query";
@@ -37,13 +37,15 @@ export default function BeszelSystemStatsWidget({
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
-  const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
-    onError: () =>
-      showErrorNotification({
-        title: t("error.selectionSaveTitle"),
-        message: t("error.selectionSaveMessage"),
-      }),
-  });
+  const selectionSavePendingRef = useRef(false);
+  const { mutate: saveItemOptions, isPending: isSelectionSavePending } =
+    clientApi.widget.options.saveItemOptions.useMutation({
+      onError: () =>
+        showErrorNotification({
+          title: t("error.selectionSaveTitle"),
+          message: t("error.selectionSaveMessage"),
+        }),
+    });
   const {
     data: systemsResult = [],
     isPending: systemsPending,
@@ -78,22 +80,51 @@ export default function BeszelSystemStatsWidget({
 
   const handleSelectSystem = useCallback(
     (value: string) => {
+      if (selectionSavePendingRef.current) return;
+
+      const previousValue = options.systemId;
       setOptions({ newOptions: { systemId: value } });
       if (hasChangeAccess && boardId && itemId) {
-        saveItemOptions({ boardId, itemId, newOptions: { systemId: value } });
+        selectionSavePendingRef.current = true;
+        saveItemOptions(
+          { boardId, itemId, newOptions: { systemId: value } },
+          {
+            onError: () => {
+              setOptions({ newOptions: { systemId: previousValue } });
+            },
+            onSettled: () => {
+              selectionSavePendingRef.current = false;
+            },
+          },
+        );
       }
     },
-    [setOptions, hasChangeAccess, boardId, itemId, saveItemOptions],
+    [boardId, hasChangeAccess, itemId, options.systemId, saveItemOptions, setOptions],
   );
 
   const handleTimePeriod = useCallback(
     (value: string) => {
-      setOptions({ newOptions: { timePeriod: value as BeszelTimePeriod } });
+      if (selectionSavePendingRef.current) return;
+
+      const timePeriod = value as BeszelTimePeriod;
+      const previousValue = options.timePeriod;
+      setOptions({ newOptions: { timePeriod } });
       if (hasChangeAccess && boardId && itemId) {
-        saveItemOptions({ boardId, itemId, newOptions: { timePeriod: value } });
+        selectionSavePendingRef.current = true;
+        saveItemOptions(
+          { boardId, itemId, newOptions: { timePeriod } },
+          {
+            onError: () => {
+              setOptions({ newOptions: { timePeriod: previousValue } });
+            },
+            onSettled: () => {
+              selectionSavePendingRef.current = false;
+            },
+          },
+        );
       }
     },
-    [boardId, hasChangeAccess, itemId, saveItemOptions, setOptions],
+    [boardId, hasChangeAccess, itemId, options.timePeriod, saveItemOptions, setOptions],
   );
 
   if (systemsError) throw systemsError;
@@ -133,6 +164,7 @@ export default function BeszelSystemStatsWidget({
             data={systems}
             value={selectedValue}
             placeholder={t("selectSystem")}
+            disabled={isSelectionSavePending}
             onChange={(value) => value && handleSelectSystem(value)}
           />
         </Stack>
@@ -159,6 +191,7 @@ export default function BeszelSystemStatsWidget({
                   size="compact-xs"
                   leftSection={<IconServer size={14} />}
                   className={classes.beszelStatsSystemToggle}
+                  disabled={isSelectionSavePending}
                 >
                   {selectedLabel}
                 </Button>
@@ -170,6 +203,7 @@ export default function BeszelSystemStatsWidget({
                     fz="xs"
                     fw={system.value === selectedValue ? 600 : 400}
                     c={system.value !== selectedValue ? "dimmed" : undefined}
+                    disabled={isSelectionSavePending}
                     onClick={() => handleSelectSystem(system.value)}
                   >
                     {system.label}
@@ -183,6 +217,7 @@ export default function BeszelSystemStatsWidget({
               size="xs"
               value={options.timePeriod}
               onChange={handleTimePeriod}
+              disabled={isSelectionSavePending}
               data={[
                 { value: "1m", label: t("period.live") },
                 { value: "1h", label: t("period.oneHour") },
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 1a30e0352..b09a94623 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -1,30 +1,55 @@
 "use client";
 
-import { Card, Flex, Group, Image, ScrollArea, SimpleGrid, Text } from "@mantine/core";
-import { IconClock } from "@tabler/icons-react";
+import { Alert, Card, Flex, Group, Image, ScrollArea, SimpleGrid, Text } from "@mantine/core";
+import { IconAlertTriangle, IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
-import type { RouterInputs } from "@homarr/api";
+import type { RouterInputs, RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.scss";
 
-const useLiveFeedEntries = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
-  const { data: feedEntries, error } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
-  if (error && feedEntries === undefined) throw error;
+const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
+  const { data, error } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
+  if (error && data === undefined) throw error;
 
-  return feedEntries ?? [];
+  // Persisted query caches can still contain the array response used before failed-feed metadata was added.
+  const normalizedData = data as typeof data | RouterOutputs["widget"]["rssFeed"]["getFeeds"]["entries"];
+  if (Array.isArray(normalizedData)) {
+    return {
+      entries: normalizedData,
+      failedFeedCount: 0,
+      isStale: Boolean(error),
+    };
+  }
+
+  return {
+    entries: normalizedData?.entries ?? [],
+    failedFeedCount: normalizedData?.failedFeedCount ?? 0,
+    isStale: Boolean(error),
+  };
 };
 
 export default function RssFeed({ options, width, displayMode }: WidgetComponentProps<"rssFeed">) {
-  const feedEntries = useLiveFeedEntries({
+  const {
+    entries: feedEntries,
+    failedFeedCount,
+    isStale,
+  } = useLiveFeed({
     urls: options.feedUrls,
     maximumAmountPosts: typeof options.maximumAmountPosts === "number" ? options.maximumAmountPosts : 100,
   });
 
   const board = useRequiredBoard();
+  const t = useScopedI18n("widget.rssFeed");
+  const warning = isStale
+    ? t("warning.stale")
+    : failedFeedCount > 0
+      ? t("warning.partial", { count: failedFeedCount })
+      : undefined;
 
   const languageDir = options.enableRtl ? "RTL" : "LTR";
 
@@ -34,6 +59,11 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
 
   return (
     <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
+      {warning && (
+        <Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
+          {warning}
+        </Alert>
+      )}
       <SimpleGrid cols={columns} w="100%" spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
         {feedEntries.map((feedEntry) => (
           <Card
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index 957b044d6..d2c453777 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -1,4 +1,5 @@
-import { Badge, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Alert, Badge, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -39,7 +40,7 @@ interface TimetableWidgetInnerProps {
 }
 
 const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }: TimetableWidgetInnerProps) => {
-  const { data: timetable } = clientApi.widget.timetable.getTimetable.useQuery({
+  const { data: timetable, error } = clientApi.widget.timetable.getTimetable.useQuery({
     baseUrl,
     itemId,
     stationId: station.value,
@@ -47,11 +48,20 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
   });
   const t = useScopedI18n("widget.timetable");
 
+  if (error && timetable === undefined) throw error;
+
   const entries = timetable?.entries ?? [];
+  const staleWarning =
+    error && timetable ? t("warning.stale", { time: dayjs(timetable.timestamp).format("HH:mm:ss") }) : undefined;
 
   return (
     <Stack w="100%" h="100%" gap="xs" p="sm">
       <Text fw="bold">{t("title", { station: station.label })}</Text>
+      {staleWarning && (
+        <Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
+          {staleWarning}
+        </Alert>
+      )}
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>
         <SimpleGrid cols={displayMode === "advanced" && width >= 760 ? 2 : 1} spacing="xs">
           {entries.map((entry) => (
diff --git a/packages/widgets/src/timetable/index.ts b/packages/widgets/src/timetable/index.ts
index 212e2746b..81ec81db8 100644
--- a/packages/widgets/src/timetable/index.ts
+++ b/packages/widgets/src/timetable/index.ts
@@ -1,4 +1,4 @@
-import { IconBusStop } from "@tabler/icons-react";
+import { IconBusStop, IconWorldOff } from "@tabler/icons-react";
 import { z } from "zod/v4";
 
 import { clientApi } from "@homarr/api/client";
@@ -9,6 +9,13 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("timetable", {
   icon: IconBusStop,
+  errors: {
+    BAD_REQUEST: {
+      icon: IconWorldOff,
+      message: (t) => t("widget.timetable.error.customSourceUnavailable"),
+      hideLogsLink: true,
+    },
+  },
   createOptions() {
     return optionsBuilder.from((factory) => ({
       baseUrl: factory.text({

From 1d73513989d809b52a5aa0f89711bc51afdd5ae5 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 09:50:08 +0200
Subject: [PATCH 11/75] fix: polish widget failure feedback

---
 apps/docs/docs/widgets/timetable/index.mdx    |  2 +-
 .../components/board/items/item-content.tsx   | 23 ++++++++++---------
 packages/translation/src/lang/en.json         |  3 ++-
 .../common/integration-error-indicator.tsx    |  2 +-
 .../widgets/src/media-server/component.tsx    |  2 +-
 packages/widgets/src/rssFeed/component.tsx    |  4 ++--
 packages/widgets/src/timetable/component.tsx  | 19 +++++++++++----
 7 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/apps/docs/docs/widgets/timetable/index.mdx b/apps/docs/docs/widgets/timetable/index.mdx
index 37f5abf05..1aede99cd 100644
--- a/apps/docs/docs/widgets/timetable/index.mdx
+++ b/apps/docs/docs/widgets/timetable/index.mdx
@@ -37,4 +37,4 @@ import streetDepartures from "./img/street-departures.png";
 
 For security, all custom base URLs must resolve to a public IP address whenever Homarr uses them. Private and local hosts are rejected.
 
-If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them with their last update time.
+If a timetable refresh fails after departures have loaded, the widget keeps the previous departures visible and marks them as stale. The advanced view also shows their last update time.
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 7985c8749..832500ab7 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,7 +1,7 @@
 import type { CSSProperties, KeyboardEvent, MutableRefObject, PointerEvent } from "react";
 import { useEffect, useRef } from "react";
 import { ActionIcon, Badge, Box, Card, FocusTrap, Text } from "@mantine/core";
-import { useElementSize, useMergedRef, useViewportSize } from "@mantine/hooks";
+import { useElementSize, useViewportSize } from "@mantine/hooks";
 import { IconMaximize, IconPin, IconX } from "@tabler/icons-react";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
@@ -37,9 +37,8 @@ const getOverflowFromKind = (kind: SectionItem["kind"]) => {
 };
 
 export const BoardItemContent = ({ item }: BoardItemContentProps) => {
-  const { ref, width, height } = useElementSize<HTMLDivElement>();
+  const { ref: contentRef, width, height } = useElementSize<HTMLDivElement>();
   const sourceRef = useRef<HTMLDivElement>(null);
-  const mergedRef = useMergedRef(ref, sourceRef);
   const { width: viewportWidth, height: viewportHeight } = useViewportSize();
   const board = useRequiredBoard();
   const t = useI18n();
@@ -86,7 +85,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
     <>
       <WidgetContextMenu item={item} widgetStateRef={widgetStateRef} sourceRef={sourceRef}>
         <Box
-          ref={mergedRef}
+          ref={sourceRef}
           tabIndex={isEditMode ? undefined : 0}
           role={isEditMode ? undefined : "group"}
           aria-label={isEditMode ? undefined : `${widgetName}: ${t("item.advancedFocus.open")}`}
@@ -192,13 +191,15 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
                     </ActionIcon>
                   )}
                 </div>
-                <InnerContent
-                  item={item}
-                  width={advancedRect?.width ?? width}
-                  height={advancedRect?.height ?? height}
-                  widgetStateRef={widgetStateRef}
-                  displayMode={isAdvanced ? "advanced" : "compact"}
-                />
+                <Box ref={contentRef} w="100%" h="100%" mih={0}>
+                  <InnerContent
+                    item={item}
+                    width={width}
+                    height={height}
+                    widgetStateRef={widgetStateRef}
+                    displayMode={isAdvanced ? "advanced" : "compact"}
+                  />
+                </Box>
               </Card>
             </FocusTrap>
           </div>
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index f987f4c71..61d6d6e50 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2003,7 +2003,8 @@
         "stationSearch": "Unable to search stations. Check the custom URL and your board access."
       },
       "warning": {
-        "stale": "The timetable could not be refreshed. Showing departures last updated at {time}."
+        "stale": "The timetable could not be refreshed. Showing departures last updated at {time}.",
+        "staleCompact": "Stale data"
       }
     },
     "notebook": {
diff --git a/packages/widgets/src/common/integration-error-indicator.tsx b/packages/widgets/src/common/integration-error-indicator.tsx
index 818937ef4..6e9f27dd4 100644
--- a/packages/widgets/src/common/integration-error-indicator.tsx
+++ b/packages/widgets/src/common/integration-error-indicator.tsx
@@ -24,7 +24,7 @@ export function IntegrationErrorIndicator({ results }: IntegrationErrorIndicator
   const label = `${t("error")}: ${names}`;
   return (
     <Tooltip label={label} position="left" withArrow>
-      <ActionIcon variant="transparent" color="orange" size={18} aria-label={label} style={{ cursor: "help" }}>
+      <ActionIcon variant="transparent" color="orange" size={28} aria-label={label} style={{ cursor: "help" }}>
         <IconAlertTriangle aria-hidden size={14} />
       </ActionIcon>
     </Tooltip>
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index 7c8463042..ff2acd148 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -325,7 +325,7 @@ export default function MediaServerWidget({
         </Group>
       )}
       {!isAdvanced && hasFailedIntegrations && (
-        <Group h={18} px="xs" justify="flex-end">
+        <Group px="xs" justify="flex-end">
           <IntegrationErrorIndicator results={currentStreams} />
         </Group>
       )}
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index b09a94623..2fc2b9147 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -60,8 +60,8 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
   return (
     <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
       {warning && (
-        <Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
-          {warning}
+        <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
+          <output>{warning}</output>
         </Alert>
       )}
       <SimpleGrid cols={columns} w="100%" spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index d2c453777..c82f8b2e2 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -51,15 +51,24 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
   if (error && timetable === undefined) throw error;
 
   const entries = timetable?.entries ?? [];
-  const staleWarning =
-    error && timetable ? t("warning.stale", { time: dayjs(timetable.timestamp).format("HH:mm:ss") }) : undefined;
+  const staleTime = timetable ? dayjs(timetable.timestamp).format("HH:mm:ss") : undefined;
+  const staleWarning = error && staleTime ? t("warning.stale", { time: staleTime }) : undefined;
+  const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
 
   return (
     <Stack w="100%" h="100%" gap="xs" p="sm">
       <Text fw="bold">{t("title", { station: station.label })}</Text>
-      {staleWarning && (
-        <Alert role="status" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
-          {staleWarning}
+      {compactStaleWarning && displayMode === "compact" && (
+        <Group gap={2} wrap="nowrap">
+          <IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-6)" />
+          <Text component="output" size="xs" c="orange" style={{ whiteSpace: "nowrap" }}>
+            {compactStaleWarning}
+          </Text>
+        </Group>
+      )}
+      {staleWarning && displayMode === "advanced" && (
+        <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs">
+          <output>{staleWarning}</output>
         </Alert>
       )}
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>

From d460ac8bbb5f3ad75bcf669a5b677010ec02479c Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 10:01:36 +0200
Subject: [PATCH 12/75] fix: secure widget navigation links

---
 packages/widgets/src/rssFeed/component.tsx    | 19 ++++++++++++++++---
 .../widgets/src/rssFeed/feed-display.spec.ts  | 13 ++++++++++++-
 packages/widgets/src/timetable/component.tsx  |  4 ++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 2fc2b9147..79a070420 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -69,7 +69,7 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
           <Card
             key={feedEntry.id}
             component={"a"}
-            href={getSafeExternalUrl(feedEntry.link, feedEntry.feedUrl) ?? getSafeExternalUrl(feedEntry.feedUrl)}
+            href={getSafeExternalUrl(feedEntry.link, feedEntry.feedUrl)}
             radius={board.itemRadius}
             target="_blank"
             rel="noopener noreferrer"
@@ -141,8 +141,21 @@ export const getHostname = (url: string): string => {
 export const getSafeExternalUrl = (value: unknown, baseUrl?: string): string | undefined => {
   if (typeof value !== "string") return undefined;
   try {
-    const url = new URL(value, baseUrl);
-    return url.protocol === "http:" || url.protocol === "https:" ? url.toString() : undefined;
+    let sanitizedBaseUrl: string | undefined;
+    if (baseUrl) {
+      const parsedBaseUrl = new URL(baseUrl);
+      parsedBaseUrl.username = "";
+      parsedBaseUrl.password = "";
+      parsedBaseUrl.search = "";
+      parsedBaseUrl.hash = "";
+      sanitizedBaseUrl = parsedBaseUrl.toString();
+    }
+
+    const url = new URL(value, sanitizedBaseUrl);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return undefined;
+    url.username = "";
+    url.password = "";
+    return url.toString();
   } catch {
     return undefined;
   }
diff --git a/packages/widgets/src/rssFeed/feed-display.spec.ts b/packages/widgets/src/rssFeed/feed-display.spec.ts
index 3b0b460b9..3348ef91f 100644
--- a/packages/widgets/src/rssFeed/feed-display.spec.ts
+++ b/packages/widgets/src/rssFeed/feed-display.spec.ts
@@ -14,9 +14,20 @@ describe("RSS feed display helpers", () => {
     expect(getHostname("https://example.com/feed.xml")).toBe("example.com");
   });
 
-  test("only exposes HTTP links from untrusted feed entries", () => {
+  test("only exposes credential-free HTTP links from untrusted feed entries", () => {
     expect(getSafeExternalUrl("https://example.com/story")).toBe("https://example.com/story");
     expect(getSafeExternalUrl("/story", "https://example.com/feed.xml")).toBe("https://example.com/story");
+    expect(getSafeExternalUrl("/story", "https://user:password@example.com/feed.xml")).toBe(
+      "https://example.com/story",
+    );
+    expect(getSafeExternalUrl("https://user:password@example.com/story")).toBe("https://example.com/story");
+    expect(getSafeExternalUrl(undefined, "https://example.com/feed?token=secret")).toBeUndefined();
+    expect(getSafeExternalUrl("#story", "https://example.com/feed?token=secret#old")).toBe(
+      "https://example.com/feed#story",
+    );
+    expect(getSafeExternalUrl("?story=1", "https://example.com/feed?token=secret")).toBe(
+      "https://example.com/feed?story=1",
+    );
     expect(getSafeExternalUrl("javascript:alert(1)")).toBeUndefined();
     expect(getSafeExternalUrl("not a URL")).toBeUndefined();
   });
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index c82f8b2e2..7a50c3f70 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -60,8 +60,8 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
       <Text fw="bold">{t("title", { station: station.label })}</Text>
       {compactStaleWarning && displayMode === "compact" && (
         <Group gap={2} wrap="nowrap">
-          <IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-6)" />
-          <Text component="output" size="xs" c="orange" style={{ whiteSpace: "nowrap" }}>
+          <IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-light-color)" />
+          <Text component="output" size="xs" c="var(--mantine-color-text)" style={{ whiteSpace: "nowrap" }}>
             {compactStaleWarning}
           </Text>
         </Group>

From 1e0bf400404944a9b1ee4b734df8c0c56db70ab7 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 14:12:18 +0200
Subject: [PATCH 13/75] feat: refine widget interactions

---
 .../advanced/keyboard-shortcuts/index.mdx     |   7 +-
 .../after-the-installation.mdx                |   7 +-
 apps/docs/docs/management/boards/index.mdx    |   5 +-
 apps/docs/docs/widgets/anchor-note/index.mdx  |   2 +-
 apps/docs/docs/widgets/app/index.mdx          |   7 +-
 apps/docs/docs/widgets/bookmarks/index.mdx    |   1 +
 apps/docs/docs/widgets/calendar/index.mdx     |   3 +-
 .../widgets/immich-album-carousel/index.mdx   |   2 +
 apps/docs/docs/widgets/notebook/index.mdx     |   2 +-
 apps/docs/docs/widgets/stock-price/index.mdx  |   1 +
 apps/docs/docs/widgets/weather/index.mdx      |   2 +
 .../src/components/widgets/interactions.tsx   |  16 +-
 .../advanced-focus/advanced-focus.module.css  |  50 +-
 .../board/advanced-focus/context.tsx          |  61 +-
 .../board/advanced-focus/escape.spec.ts       |  10 +-
 .../board/advanced-focus/geometry.spec.ts     |  44 +-
 .../board/advanced-focus/geometry.ts          |  42 +-
 .../components/board/items/item-content.tsx   | 252 ++++-----
 .../board/items/item-select-modal.tsx         |   5 -
 .../board/items/widget-context-menu.tsx       |  26 +-
 e2e/board-advanced-interactions.spec.ts       | 123 ++--
 .../request-handler/src/timetable.spec.ts     |  38 +-
 packages/request-handler/src/timetable.ts     |  20 +-
 packages/translation/src/lang/en.json         |  21 +-
 .../widgets/src/anchor-note/anchor-note.css   |  28 +
 .../widgets/src/anchor-note/component.tsx     |  43 +-
 packages/widgets/src/app/component.tsx        |  24 +-
 .../src/archive-team-warrior/component.tsx    |  49 +-
 .../src/archive-team-warrior/layout.spec.ts   |  23 +
 .../src/audio-stats/audio-stats-content.tsx   |  22 +-
 .../audio-stats/audio-stats-shared.spec.ts    |  31 +-
 .../widgets/src/audio-stats/component.tsx     |   1 +
 packages/widgets/src/audio-stats/shared.ts    |  17 +
 packages/widgets/src/bazarr/component.tsx     |   4 +-
 .../widgets/src/beszel-alerts/component.tsx   |  92 +--
 .../beszel-system-grid/component.module.css   |  15 +-
 .../src/beszel-system-grid/component.tsx      |   8 +-
 .../beszel-system-stats/component.module.css  |  16 +-
 .../widgets/src/beszel/_shared/tooltip.tsx    |   4 +-
 .../widgets/src/bookmarks/bookmark.module.css |  10 +
 packages/widgets/src/bookmarks/component.tsx  | 151 +++--
 packages/widgets/src/bookmarks/layout.spec.ts |  18 +-
 .../src/calendar/calendar-event-list.tsx      |  19 +-
 .../widgets/src/calendar/calendar-events.ts   |   3 +
 .../widgets/src/calendar/calendar.spec.ts     |   9 +-
 packages/widgets/src/calendar/component.tsx   | 113 +++-
 packages/widgets/src/coolify/component.tsx    |  25 +-
 .../widgets/src/coolify/instance-card.tsx     |  68 ++-
 packages/widgets/src/coolify/resource-row.tsx |  50 +-
 .../widgets/src/coolify/servers-section.tsx   |  15 +-
 .../src/coolify/single-instance-layout.tsx    |  46 +-
 packages/widgets/src/custom-api/component.tsx | 214 +++----
 .../src/dns-hole/controls/component.tsx       |  24 +-
 .../src/dns-hole/summary/component.tsx        |  31 +-
 packages/widgets/src/docker/component.tsx     |  70 ++-
 packages/widgets/src/docker/layout.spec.ts    |  23 +-
 packages/widgets/src/docker/layout.ts         |  14 +-
 packages/widgets/src/firewall/component.tsx   |  70 ++-
 .../widgets/src/firewall/firewall-menu.tsx    |   6 +-
 .../widgets/src/firewall/firewall-version.tsx |   5 +-
 .../cluster/cluster-health.tsx                |   2 +-
 .../system-health.module.css                  |  32 ++
 .../src/health-monitoring/system-health.tsx   |  17 +-
 .../album-carousel/component.module.css       |  49 +-
 .../src/immich/album-carousel/component.tsx   |  57 +-
 .../immich/server-stats/component.module.css  |   8 +
 .../src/immich/server-stats/component.tsx     |  53 +-
 .../src/immich/server-stats/layout.spec.ts    |  15 +
 .../src/indexer-manager/component.module.css  |  41 ++
 .../widgets/src/indexer-manager/component.tsx |  74 +--
 .../src/media-missing/component.module.css    |  30 +-
 .../widgets/src/media-missing/component.tsx   |   3 -
 .../src/media-releases/component.module.css   |  24 +
 .../widgets/src/media-releases/component.tsx  |  71 ++-
 .../media-requests/list/component.module.css  |  45 ++
 .../src/media-requests/list/component.tsx     | 149 ++---
 .../media-requests/stats/component.module.css |  22 +
 .../src/media-requests/stats/component.tsx    |  22 +-
 .../src/media-server/component.module.css     |  13 +
 .../widgets/src/media-server/component.tsx    |  46 +-
 .../src/media-transcoding/component.tsx       |   7 +-
 .../media-transcoding/health-check-status.tsx |  22 +-
 .../src/minecraft/server-status/component.tsx |  29 +-
 .../network-status/component.tsx              |  34 +-
 .../network-status/variants/wifi-variant.tsx  |   8 +-
 .../network-status/variants/wired-variant.tsx |   8 +-
 .../network-controller/summary/component.tsx  |  40 +-
 packages/widgets/src/notebook/notebook.css    |  28 +
 packages/widgets/src/notebook/notebook.tsx    |   6 +-
 .../widgets/src/notifications/component.tsx   |  54 +-
 .../widgets/src/paperless-ngx/component.tsx   |  14 +-
 .../src/releases/component.module.scss        |  21 +
 packages/widgets/src/releases/component.tsx   | 528 +++++++++---------
 .../widgets/src/rssFeed/component.module.scss |  35 +-
 packages/widgets/src/rssFeed/component.tsx    |  38 +-
 .../src/smart-home/entity-state/component.tsx |  20 +-
 .../execute-automation/component.tsx          |  11 +-
 .../src/speedtest-tracker/component.tsx       |  15 +-
 .../src/speedtest-tracker/helpers.spec.ts     |  15 +-
 .../widgets/src/speedtest-tracker/helpers.ts  |  18 +
 .../src/speedtest-tracker/latest-result.tsx   |   2 +-
 .../src/speedtest-tracker/section-label.tsx   |   2 +-
 .../src/speedtest-tracker/speed-stat-card.tsx |  55 +-
 packages/widgets/src/stocks/component.spec.ts |  37 +-
 packages/widgets/src/stocks/component.tsx     |  39 +-
 .../widgets/src/system-disks/component.tsx    |  37 +-
 .../system-resources/chart/common-chart.tsx   |  12 +
 .../system-resources/chart/memory-chart.tsx   |   5 +-
 .../chart/network-traffic.tsx                 |   3 +-
 .../src/system-resources/component.tsx        |  64 ++-
 .../src/system-resources/history.spec.ts      |   8 +-
 packages/widgets/src/timetable/component.tsx  |  77 ++-
 .../widgets/src/tracearr/component.spec.ts    |  28 +-
 packages/widgets/src/tracearr/component.tsx   |  28 +-
 .../src/tracearr/recent-activity-section.tsx  |   2 +-
 .../src/tracearr/violations-section.tsx       |   2 +-
 packages/widgets/src/traefik/component.tsx    |   2 +-
 packages/widgets/src/umami/umami-content.tsx  |  68 ++-
 .../src/umami/umami-events-content.tsx        |   6 +-
 .../widgets/src/uptime-kuma/aggregate.spec.ts |  24 +
 .../widgets/src/uptime-kuma/component.tsx     |  41 +-
 packages/widgets/src/vpn/component.tsx        |  21 +-
 packages/widgets/src/vpn/vpn-card.tsx         |  81 ++-
 .../widgets/src/weather/component.spec.ts     |  14 +-
 packages/widgets/src/weather/component.tsx    | 250 +++++++--
 125 files changed, 3281 insertions(+), 1459 deletions(-)
 create mode 100644 packages/widgets/src/archive-team-warrior/layout.spec.ts
 create mode 100644 packages/widgets/src/immich/server-stats/layout.spec.ts
 create mode 100644 packages/widgets/src/media-releases/component.module.css
 create mode 100644 packages/widgets/src/media-requests/list/component.module.css
 create mode 100644 packages/widgets/src/media-server/component.module.css

diff --git a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
index 5d7f01cde..1f7842fd7 100644
--- a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
+++ b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
@@ -12,7 +12,7 @@ Homarr has the following keyboard shortcuts:
 | `MOD` + `J`                                | Toggles Dark Mode                                          |
 | `MOD` + `E`                                | Toggles Edit Mode                                          |
 | Hold `Shift` while hovering a widget       | Opens its temporary advanced view                          |
-| `Shift` + `Enter` on a focused widget      | Opens and pins its advanced view                           |
+| `Shift` + `Enter` on a focused widget      | Opens its advanced view until it is closed                 |
 | `Esc`                                      | Closes an open advanced view or board menu                 |
 | `Shift` + `F10` on a focused board section | Opens the precise add-item menu at the next available cell |
 
@@ -20,8 +20,9 @@ Homarr has the following keyboard shortcuts:
 
 Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.
 
-Advanced view and precise placement are available outside edit mode. Precise placement still requires permission to
-change the board and the right-click interaction preference to be enabled.
+Advanced view and precise placement are available outside edit mode. App tiles stay compact and do not have an
+advanced view. Precise placement still requires permission to change the board and the right-click interaction
+preference to be enabled.
 
 :::
 
diff --git a/apps/docs/docs/getting-started/after-the-installation.mdx b/apps/docs/docs/getting-started/after-the-installation.mdx
index f8fe31ed2..29d56e4eb 100644
--- a/apps/docs/docs/getting-started/after-the-installation.mdx
+++ b/apps/docs/docs/getting-started/after-the-installation.mdx
@@ -191,9 +191,10 @@ When entering the edit mode, you'll get some additional buttons to work with:
 - **Exit edit mode**: Click this button to save your changes and exit edit mode.
 
 Outside edit mode, right-click a widget for its live status, refresh, settings, quick options, and supported actions.
-Hold `Shift` while hovering a widget for a temporary advanced view; use its pin control to keep it open. You can also
-focus the widget and press `Shift` + `Enter` to open it pinned. If you can change the board, right-click empty grid
-space to add an item at that position.
+Hold `Shift` while hovering a widget to expand an advanced preview in place while the rest of the board stays visible
+but dimmed. Release `Shift` to close it. You can also focus the widget and press `Shift` + `Enter` to keep its advanced
+view open until you close it. App tiles stay compact. If you can change the board, right-click empty grid space to add
+an item at that position.
 On a touch device, touch and hold empty grid space for the same precise-placement menu.
 
 To continue, click the option "New Item":
diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 02ca0e6c9..6babee071 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -179,8 +179,9 @@ This will disable the status check for apps.
 
 Widgets expose their routine controls without requiring edit mode:
 
-- Hold `Shift` while hovering a widget for a temporary advanced view, then use its pin control to keep it open. Focus
-  the widget and press `Shift` + `Enter` to open it pinned, or use the maximize control on touch devices.
+- Hold `Shift` while hovering a widget to expand its advanced preview in place while the other widgets remain visible
+  but dimmed. Release `Shift` to close it. Focus the widget and press `Shift` + `Enter` to keep the view open until you
+  close it, or use the maximize control on touch devices. App tiles stay compact.
 - Right-click a widget to inspect its live query status, refresh its data, change quick options, open settings, or run
   supported actions. Available controls follow your board and integration permissions.
 - If you can modify the board, right-click or touch and hold an empty grid cell to add an item there. Focus a board
diff --git a/apps/docs/docs/widgets/anchor-note/index.mdx b/apps/docs/docs/widgets/anchor-note/index.mdx
index bfc520c6a..522252a1a 100644
--- a/apps/docs/docs/widgets/anchor-note/index.mdx
+++ b/apps/docs/docs/widgets/anchor-note/index.mdx
@@ -35,7 +35,7 @@ import anchorNoteWidgetScreenshot from "./img/widget.png";
 
 ### Interactions
 
-- Click **Edit** to start editing the selected note.
+- Hover the widget, focus within it, or use a touch device to reveal **Edit**, then select it to start editing the note.
 - Click **Save** to persist changes to Anchor.
 - Click **Cancel** to discard unsaved changes.
 
diff --git a/apps/docs/docs/widgets/app/index.mdx b/apps/docs/docs/widgets/app/index.mdx
index 4fdc3ff5f..dd5cef590 100644
--- a/apps/docs/docs/widgets/app/index.mdx
+++ b/apps/docs/docs/widgets/app/index.mdx
@@ -4,8 +4,6 @@ description: "Embeds an app into the board."
 hide_title: true
 ---
 
-import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
-
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
 import { WidgetHeader } from "@site/src/components/widgets/header";
@@ -27,7 +25,10 @@ import piHoleApp from "./img/pi-hole-ping-icon.png";
   <img src={piHoleApp} alt="app pi-hole with-status-check status-check-icon" width={128 * 1.5} height={128 * 1.5} />
   <img src={jellyseerrApp} alt="app jellyseerr with-description-tooltip" height={128 * 1.5} />
 </div>
-<WidgetInteractionGuide />
+
+### Interactions
+
+App tiles stay compact and open their configured destination directly. Right-click a tile to inspect its status or change its settings when the board and your preferences allow it.
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/bookmarks/index.mdx b/apps/docs/docs/widgets/bookmarks/index.mdx
index 02de33b5a..b61f8f072 100644
--- a/apps/docs/docs/widgets/bookmarks/index.mdx
+++ b/apps/docs/docs/widgets/bookmarks/index.mdx
@@ -15,6 +15,7 @@ import { bookmarksWidget } from ".";
 
 The bookmarks widget allows you to display multiple app links in a single widget.
 You can add links to your favorite applications, websites, or any other resources you want quick access to.
+Its normal view adapts each configured layout to the available width and height: lower-priority hostnames are hidden before names or icons, and larger collections scroll instead of crushing cards.
 
 ### Screenshots
 
diff --git a/apps/docs/docs/widgets/calendar/index.mdx b/apps/docs/docs/widgets/calendar/index.mdx
index 174391e18..b3ff3ec87 100644
--- a/apps/docs/docs/widgets/calendar/index.mdx
+++ b/apps/docs/docs/widgets/calendar/index.mdx
@@ -72,8 +72,7 @@ import withoutIntegrations from "./img/without-integrations.png";
 ### Interactions
 
 - Hover over a marked date to preview its events in a popover.
-- Click on a marked date to pin the popover open (it will stay visible even after moving the mouse away).
-- Click the date again or click outside to close the pinned popover.
+- The advanced view replaces the month grid with a grouped event list. Use its previous and next controls to change months.
 - If one selected integration is unavailable, its warning indicator remains visible while events from healthy integrations continue to load.
 
 <WidgetInteractionGuide />
diff --git a/apps/docs/docs/widgets/immich-album-carousel/index.mdx b/apps/docs/docs/widgets/immich-album-carousel/index.mdx
index 2975d53fe..4a0cc6eef 100644
--- a/apps/docs/docs/widgets/immich-album-carousel/index.mdx
+++ b/apps/docs/docs/widgets/immich-album-carousel/index.mdx
@@ -33,6 +33,8 @@ import screen from "./img/screen.png";
 
 <WidgetInteractionGuide />
 
+Hover or focus the widget to pause its slideshow; touch devices keep the control available. A paused slideshow keeps its resume control visible. The advanced view groups previous, pause or resume, and next together and adds a thumbnail strip for quick navigation.
+
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/notebook/index.mdx b/apps/docs/docs/widgets/notebook/index.mdx
index a245600aa..df4d14ec2 100644
--- a/apps/docs/docs/widgets/notebook/index.mdx
+++ b/apps/docs/docs/widgets/notebook/index.mdx
@@ -38,7 +38,7 @@ import editOn from "./img/edit.png";
 
 ### Editing
 
-When the permissions of the user allows it, you can enter the editing of the text by clicking the following button in the top right.
+When your permissions allow it, hover the widget, focus within it, or use a touch device to reveal the edit button in the top right. You can also double-click the document to edit it directly.
 
 ![](./img/notebook-enter-editing.webp)
 
diff --git a/apps/docs/docs/widgets/stock-price/index.mdx b/apps/docs/docs/widgets/stock-price/index.mdx
index 2a6119240..4294c9cab 100644
--- a/apps/docs/docs/widgets/stock-price/index.mdx
+++ b/apps/docs/docs/widgets/stock-price/index.mdx
@@ -14,6 +14,7 @@ import { stockPriceWidget } from ".";
 <WidgetHeader widget={stockPriceWidget} categories={["Finance", "Market"]} />
 
 Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
+The compact view prioritizes the symbol, current price, and trend. Company name, change, and time range appear only when both the widget width and height can support them; the advanced view always shows the complete summary.
 
 ### Screenshots
 
diff --git a/apps/docs/docs/widgets/weather/index.mdx b/apps/docs/docs/widgets/weather/index.mdx
index 3ca81acaa..a4b84b5fa 100644
--- a/apps/docs/docs/widgets/weather/index.mdx
+++ b/apps/docs/docs/widgets/weather/index.mdx
@@ -14,6 +14,8 @@ import { weatherWidget } from ".";
 <WidgetHeader widget={weatherWidget} categories={["Weather"]} />
 
 The Weather Widget uses your location to display the current, highest and lowest temperature.
+The advanced view always combines current conditions with the full seven-day forecast, including humidity, wind,
+gusts, sunrise and sunset. Both views reuse the same cached Open Meteo response.
 
 ### Screenshots
 
diff --git a/apps/docs/src/components/widgets/interactions.tsx b/apps/docs/src/components/widgets/interactions.tsx
index 80ba47b46..1328aa548 100644
--- a/apps/docs/src/components/widgets/interactions.tsx
+++ b/apps/docs/src/components/widgets/interactions.tsx
@@ -1,11 +1,11 @@
-import { IconArrowsMaximize, IconMouse2, IconPlus } from "@tabler/icons-react";
+import { IconArrowsMaximize, IconLayoutGrid, IconMouse2, IconPlus } from "@tabler/icons-react";
 
 const interactions = [
   {
     icon: IconArrowsMaximize,
     title: "Advanced view",
     description:
-      "Hold Shift while hovering (then pin it), press Shift + Enter, or choose Open advanced view from the widget menu.",
+      "Hold Shift while hovering for an in-place preview, press Shift + Enter, or choose Open advanced view from the widget menu.",
   },
   {
     icon: IconMouse2,
@@ -19,6 +19,12 @@ const interactions = [
     description:
       "With board changes allowed, right-click or touch and hold empty grid space to add there. Keyboard users can press Shift + F10.",
   },
+  {
+    icon: IconLayoutGrid,
+    title: "Adaptive detail",
+    description:
+      "Resize a widget to tune its density. Compact views keep primary status visible, then reveal details and controls as space or intent allows.",
+  },
 ] as const;
 
 export const WidgetInteractionGuide = () => (
@@ -30,7 +36,7 @@ export const WidgetInteractionGuide = () => (
         Hide shortcuts
       </span>
     </summary>
-    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-3 dark:border-[#333]">
+    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-2 xl:grid-cols-4 dark:border-[#333]">
       {interactions.map(({ icon: Icon, title, description }) => (
         <div key={title} className="rounded-lg bg-white p-3 shadow-sm dark:bg-gray-950">
           <Icon aria-hidden size={20} stroke={1.5} className="mb-2 stroke-red-500" />
@@ -40,8 +46,8 @@ export const WidgetInteractionGuide = () => (
       ))}
     </div>
     <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
-      Advanced view reuses the widget&apos;s live data and cache. Touch devices expose a maximize control; board actions
-      respect your permissions and right-click preference.
+      Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed. Touch
+      devices expose a maximize control; app tiles stay compact.
     </p>
   </details>
 );
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index 39965dbdf..60cc31954 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -1,28 +1,18 @@
-.focusScope {
-  height: 100%;
-}
-
 .backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 198;
-  background: rgba(0, 0, 0, 0.64);
-  backdrop-filter: blur(6px) saturate(0.75);
-  touch-action: none;
+  pointer-events: none;
   animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .surface {
   position: fixed;
-  z-index: 199;
+  z-index: 1;
   pointer-events: auto;
   overflow: hidden;
   background: var(--mantine-color-body);
-  box-shadow: var(--mantine-shadow-lg);
+  box-shadow: var(--mantine-shadow-md);
   overscroll-behavior: contain;
-  animation: focus-surface-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
   transform-origin: top left;
-  padding-top: 60px;
 }
 
 .backdropClosing {
@@ -45,7 +35,7 @@
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
-  z-index: 199;
+  z-index: calc(var(--mantine-z-index-modal) - 1);
   width: auto;
   height: auto;
   pointer-events: none;
@@ -58,33 +48,8 @@
   pointer-events: none;
 }
 
-.surfaceControlsAdvanced {
-  right: 0;
-  bottom: auto;
-  height: 60px;
-  background: color-mix(in srgb, var(--mantine-color-body) 92%, transparent);
-  border-bottom: 1px solid var(--mantine-color-default-border);
-}
-
-.surfaceTitle {
-  position: absolute;
-  top: 20px;
-  right: 120px;
-  left: 16px;
-}
-
 .closeButton {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  z-index: 2;
-  pointer-events: auto;
-}
-
-.pinButton {
-  position: absolute;
-  top: 8px;
-  right: 60px;
+  position: fixed;
   z-index: 2;
   pointer-events: auto;
 }
@@ -141,8 +106,7 @@
 
 @media (forced-colors: active) {
   .backdrop {
-    backdrop-filter: none;
     background: Canvas;
-    opacity: 0.8;
+    opacity: 0.4;
   }
 }
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 79e4ff50d..3f38bdc44 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { Box, Portal, RemoveScroll } from "@mantine/core";
+import { Overlay, Portal } from "@mantine/core";
 
 import { useEditMode } from "@homarr/boards/edit-mode";
 
@@ -14,17 +14,21 @@ interface ActiveFocus {
   itemId: string;
   source: HTMLElement;
   sourceRect: FocusRect;
-  pinned: boolean;
+  activation: "preview" | "manual";
   autofocusClose: boolean;
   phase: "visible" | "closing";
 }
 
+interface OpenAdvancedFocusOptions {
+  activation?: ActiveFocus["activation"];
+  autofocusClose?: boolean;
+}
+
 interface AdvancedFocusContextValue {
   active: ActiveFocus | null;
-  open: (itemId: string, source: HTMLElement, pinned?: boolean) => void;
+  open: (itemId: string, source: HTMLElement, options?: OpenAdvancedFocusOptions) => void;
   close: (restoreFocus?: boolean) => void;
   dismiss: (itemId: string) => void;
-  pin: (autofocusClose?: boolean) => void;
   hover: (itemId: string, source: HTMLElement) => void;
   leave: (itemId: string) => void;
 }
@@ -64,7 +68,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
   }, []);
 
   const open = useCallback(
-    (itemId: string, source: HTMLElement, pinned = false) => {
+    (itemId: string, source: HTMLElement, options: OpenAdvancedFocusOptions = {}) => {
       if (isEditMode) return;
       cancelHoverTimer();
       cancelCloseTimer();
@@ -73,8 +77,8 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
         itemId,
         source,
         sourceRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
-        pinned,
-        autofocusClose: pinned,
+        activation: options.activation ?? "manual",
+        autofocusClose: options.autofocusClose ?? false,
         phase: "visible",
       });
     },
@@ -101,15 +105,23 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     cancelHoverTimer();
     const hovered = hoveredRef.current;
     if (!hovered || !shiftHeldRef.current || activeRef.current) return;
-    hoverTimerRef.current = setTimeout(() => open(hovered.itemId, hovered.source), HOVER_DELAY_MS);
+    hoverTimerRef.current = setTimeout(
+      () => open(hovered.itemId, hovered.source, { activation: "preview" }),
+      HOVER_DELAY_MS,
+    );
   }, [cancelHoverTimer, open]);
 
   const hover = useCallback(
     (itemId: string, source: HTMLElement) => {
       hoveredRef.current = { itemId, source };
+      const current = activeRef.current;
+      if (current?.activation === "preview" && current.itemId !== itemId) {
+        cancelCloseTimer();
+        updateActive(null);
+      }
       startHoverTimer();
     },
-    [startHoverTimer],
+    [cancelCloseTimer, startHoverTimer, updateActive],
   );
 
   const leave = useCallback(
@@ -130,15 +142,6 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     [cancelCloseTimer, cancelHoverTimer, updateActive],
   );
 
-  const pin = useCallback(
-    (autofocusClose = false) => {
-      const current = activeRef.current;
-      if (!current || current.pinned || current.phase === "closing") return;
-      updateActive({ ...current, pinned: true, autofocusClose });
-    },
-    [updateActive],
-  );
-
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && activeRef.current) {
@@ -151,7 +154,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
       }
       if (isEditMode) return;
       if (event.key !== "Shift" || event.repeat || isEditableTarget(event.target)) return;
-      if (activeRef.current?.pinned) return;
+      if (activeRef.current?.activation === "manual") return;
       shiftHeldRef.current = true;
       startHoverTimer();
     };
@@ -159,12 +162,12 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
       if (event.key !== "Shift") return;
       shiftHeldRef.current = false;
       cancelHoverTimer();
-      if (activeRef.current && !activeRef.current.pinned) close(false);
+      if (activeRef.current?.activation === "preview") close(false);
     };
     const handleBlur = () => {
       shiftHeldRef.current = false;
       cancelHoverTimer();
-      if (activeRef.current && !activeRef.current.pinned) close(false);
+      if (activeRef.current?.activation === "preview") close(false);
     };
 
     window.addEventListener("keydown", handleKeyDown);
@@ -184,20 +187,22 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
   }, [close, isEditMode]);
 
   const value = useMemo(
-    () => ({ active, open, close, dismiss, pin, hover, leave }),
-    [active, close, dismiss, hover, leave, open, pin],
+    () => ({ active, open, close, dismiss, hover, leave }),
+    [active, close, dismiss, hover, leave, open],
   );
 
   return (
     <AdvancedFocusContext.Provider value={value}>
-      <RemoveScroll enabled={active !== null} className={classes.focusScope}>
-        {children}
-      </RemoveScroll>
+      {children}
       {active && (
         <Portal>
-          <Box
+          <Overlay
+            fixed
+            data-advanced-focus-overlay
+            backgroundOpacity={0.38}
+            blur={0}
+            zIndex="calc(var(--mantine-z-index-modal) - 2)"
             className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
-            onPointerDown={() => close()}
             aria-hidden
           />
         </Portal>
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
index dc123eeff..7704ef8be 100644
--- a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
@@ -5,7 +5,7 @@ import { isEscapeOwnedByNestedOverlay } from "./escape";
 describe("isEscapeOwnedByNestedOverlay", () => {
   test("allows Escape from the advanced surface itself", () => {
     const surface = document.createElement("section");
-    surface.setAttribute("role", "dialog");
+    surface.setAttribute("role", "region");
     const button = document.createElement("button");
     surface.append(button);
 
@@ -14,7 +14,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
 
   test("leaves Escape to a nested Mantine modal", () => {
     const surface = document.createElement("section");
-    surface.setAttribute("role", "dialog");
+    surface.setAttribute("role", "region");
     const modal = document.createElement("section");
     modal.setAttribute("role", "dialog");
     const input = document.createElement("input");
@@ -25,7 +25,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
 
   test.each(["menu", "listbox"])("leaves Escape to a nested %s overlay", (role) => {
     const surface = document.createElement("section");
-    surface.setAttribute("role", "dialog");
+    surface.setAttribute("role", "region");
     const overlay = document.createElement("div");
     overlay.setAttribute("role", role);
     const target = document.createElement("button");
@@ -36,7 +36,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
 
   test("honors Mantine's stop-propagation marker for menus and comboboxes", () => {
     const surface = document.createElement("section");
-    surface.setAttribute("role", "dialog");
+    surface.setAttribute("role", "region");
     const target = document.createElement("button");
     target.setAttribute("data-mantine-stop-propagation", "true");
     surface.append(target);
@@ -46,7 +46,7 @@ describe("isEscapeOwnedByNestedOverlay", () => {
 
   test("does not mistake the compact widget source for a nested overlay", () => {
     const surface = document.createElement("section");
-    surface.setAttribute("role", "dialog");
+    surface.setAttribute("role", "region");
     const source = document.createElement("button");
 
     expect(isEscapeOwnedByNestedOverlay(source, surface)).toBe(false);
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
index c769e7fbc..1617a4858 100644
--- a/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.spec.ts
@@ -1,15 +1,14 @@
 import { describe, expect, it } from "vitest";
 
-import { getAdvancedFocusRect } from "./geometry";
+import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "./geometry";
 
 describe("getAdvancedFocusRect", () => {
-  it("expands a widget and keeps it inside the viewport", () => {
-    const rect = getAdvancedFocusRect({ left: 10, top: 10, width: 300, height: 200 }, { width: 1200, height: 800 });
+  it("expands around the widget instead of centering a modal", () => {
+    const rect = getAdvancedFocusRect({ left: 450, top: 300, width: 300, height: 200 }, { width: 1200, height: 800 });
 
-    expect(rect.left).toBe(120);
-    expect(rect.top).toBeCloseTo(118.6);
-    expect(rect.width).toBe(960);
-    expect(rect.height).toBeCloseTo(622.8);
+    expect(rect).toEqual({ left: 200, top: 120, width: 800, height: 560 });
+    expect(rect.left + rect.width / 2).toBe(600);
+    expect(rect.top + rect.height / 2).toBe(400);
   });
 
   it("uses the available viewport on small screens", () => {
@@ -22,9 +21,34 @@ describe("getAdvancedFocusRect", () => {
   });
 
   it("keeps controls below the fixed board header on short screens", () => {
-    const rect = getAdvancedFocusRect({ left: 0, top: 0, width: 500, height: 500 }, { width: 1366, height: 768 });
+    const rect = getAdvancedFocusRect({ left: 1200, top: 700, width: 500, height: 500 }, { width: 1366, height: 768 });
 
-    expect(rect.top).toBeGreaterThanOrEqual(84);
-    expect(rect.top + rect.height).toBeLessThanOrEqual(744);
+    expect(rect.left).toBeGreaterThanOrEqual(16);
+    expect(rect.left + rect.width).toBeLessThanOrEqual(1350);
+    expect(rect.top).toBeGreaterThanOrEqual(76);
+    expect(rect.top + rect.height).toBeLessThanOrEqual(752);
+  });
+});
+
+describe("getAdvancedFocusClosePosition", () => {
+  it("keeps the close control outside the surface when the right side has room", () => {
+    expect(getAdvancedFocusClosePosition({ left: 16, top: 76, width: 800, height: 560 }, 1280)).toEqual({
+      left: 824,
+      top: 76,
+    });
+  });
+
+  it("uses the left side when the surface is anchored to the right edge", () => {
+    expect(getAdvancedFocusClosePosition({ left: 464, top: 76, width: 800, height: 560 }, 1280)).toEqual({
+      left: 412,
+      top: 76,
+    });
+  });
+
+  it("falls back to the inside corner on narrow screens", () => {
+    expect(getAdvancedFocusClosePosition({ left: 8, top: 68, width: 374, height: 624 }, 390)).toEqual({
+      left: 330,
+      top: 76,
+    });
   });
 });
diff --git a/apps/nextjs/src/components/board/advanced-focus/geometry.ts b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
index 086cfd622..e8859a5a8 100644
--- a/apps/nextjs/src/components/board/advanced-focus/geometry.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/geometry.ts
@@ -7,22 +7,48 @@ export interface FocusRect {
   height: number;
 }
 
+export interface FocusClosePosition {
+  left: number;
+  top: number;
+}
+
+const closeButtonSize = 44;
+const closeButtonGap = 8;
+
 export const getAdvancedFocusRect = (source: FocusRect, viewport: { width: number; height: number }): FocusRect => {
-  const margin = viewport.width < 640 ? 8 : 24;
+  const margin = viewport.width < 640 ? 8 : 16;
   const availableWidth = Math.max(0, viewport.width - margin * 2);
   const availableHeight = Math.max(0, viewport.height - appShellHeaderHeight - margin * 2);
-  const preferredWidth = viewport.width < 640 ? availableWidth : Math.min(960, availableWidth * 0.9);
-  const preferredHeight = viewport.width < 640 ? availableHeight : Math.min(720, availableHeight * 0.9);
+  const preferredWidth = viewport.width < 640 ? availableWidth : Math.min(800, availableWidth);
+  const preferredHeight = viewport.width < 640 ? availableHeight : Math.min(560, availableHeight);
   const width = Math.min(availableWidth, Math.max(source.width, preferredWidth));
   const height = Math.min(availableHeight, Math.max(source.height, preferredHeight));
+  const minimumTop = appShellHeaderHeight + margin;
+  const maximumLeft = Math.max(margin, viewport.width - margin - width);
+  const maximumTop = Math.max(minimumTop, viewport.height - margin - height);
 
   return {
-    left: Math.max(margin, (viewport.width - width) / 2),
-    top: Math.max(
-      appShellHeaderHeight + margin,
-      appShellHeaderHeight + (viewport.height - appShellHeaderHeight - height) / 2,
-    ),
+    left: Math.min(maximumLeft, Math.max(margin, source.left - (width - source.width) / 2)),
+    top: Math.min(maximumTop, Math.max(minimumTop, source.top - (height - source.height) / 2)),
     width,
     height,
   };
 };
+
+export const getAdvancedFocusClosePosition = (surface: FocusRect, viewportWidth: number): FocusClosePosition => {
+  const outsideOffset = closeButtonSize + closeButtonGap;
+  const surfaceRight = surface.left + surface.width;
+
+  if (viewportWidth - surfaceRight >= outsideOffset) {
+    return { left: surfaceRight + closeButtonGap, top: surface.top };
+  }
+
+  if (surface.left >= outsideOffset) {
+    return { left: surface.left - outsideOffset, top: surface.top };
+  }
+
+  return {
+    left: Math.max(0, Math.min(viewportWidth - closeButtonSize, surfaceRight - outsideOffset)),
+    top: surface.top + closeButtonGap,
+  };
+};
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 832500ab7..969195d60 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,8 +1,8 @@
-import type { CSSProperties, KeyboardEvent, MutableRefObject, PointerEvent } from "react";
+import type { CSSProperties, KeyboardEvent, MutableRefObject } from "react";
 import { useEffect, useRef } from "react";
-import { ActionIcon, Badge, Box, Card, FocusTrap, Text } from "@mantine/core";
+import { ActionIcon, Badge, Box, Card } from "@mantine/core";
 import { useElementSize, useViewportSize } from "@mantine/hooks";
-import { IconMaximize, IconPin, IconX } from "@tabler/icons-react";
+import { IconMaximize, IconX } from "@tabler/icons-react";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
@@ -18,7 +18,7 @@ import { WidgetError } from "@homarr/widgets/errors";
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
 import { useAdvancedFocus } from "../advanced-focus/context";
-import { getAdvancedFocusRect } from "../advanced-focus/geometry";
+import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "../advanced-focus/geometry";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
@@ -43,42 +43,43 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   const board = useRequiredBoard();
   const t = useI18n();
   const widgetName = t(`widget.${item.kind}.name`);
-  const advancedDialogLabel = t("item.advancedFocus.dialog", { widget: widgetName });
+  const advancedViewLabel = t("item.advancedFocus.label", { widget: widgetName });
   const [isEditMode] = useEditMode();
   const widgetStateRef = useRef<Record<string, unknown> | null>(null);
-  const { active, open, close, dismiss, pin, hover, leave } = useAdvancedFocus();
-  const activeFocus = active?.itemId === item.id ? active : null;
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const { active, open, close, dismiss, hover, leave } = useAdvancedFocus();
+  const supportsAdvancedFocus = item.kind !== "app";
+  const advancedViewId = `advanced-focus-${item.id}`;
+  const activeFocus = supportsAdvancedFocus && active?.itemId === item.id ? active : null;
   const isAdvanced = activeFocus !== null;
   const advancedRect = activeFocus
     ? getAdvancedFocusRect(activeFocus.sourceRect, { width: viewportWidth, height: viewportHeight })
     : null;
+  const closePosition = advancedRect ? getAdvancedFocusClosePosition(advancedRect, viewportWidth) : null;
 
   // Responsive layout changes remount grid items. Never leave their focus backdrop orphaned.
   useEffect(() => () => dismiss(item.id), [dismiss, item.id]);
 
-  const openPinned = () => {
-    if (sourceRef.current) open(item.id, sourceRef.current, true);
+  useEffect(() => {
+    if (!activeFocus?.autofocusClose || activeFocus.phase !== "visible") return;
+    const frame = requestAnimationFrame(() => closeButtonRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [activeFocus?.autofocusClose, activeFocus?.phase]);
+
+  const openAdvanced = (autofocusClose = false) => {
+    if (sourceRef.current) open(item.id, sourceRef.current, { activation: "manual", autofocusClose });
   };
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (event.currentTarget !== event.target || event.key !== "Enter" || !event.shiftKey || isEditMode) return;
+    if (
+      event.currentTarget !== event.target ||
+      event.key !== "Enter" ||
+      !event.shiftKey ||
+      isEditMode ||
+      !supportsAdvancedFocus
+    )
+      return;
     event.preventDefault();
-    openPinned();
-  };
-  const handleSurfacePointerDown = (event: PointerEvent<HTMLDivElement>) => {
-    if (!activeFocus || activeFocus.pinned) return;
-
-    const target =
-      event.target instanceof Element
-        ? event.target.closest<HTMLElement>(
-            "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), iframe, [tabindex]:not([tabindex='-1']), [contenteditable='true']",
-          )
-        : null;
-    const alreadyAutofocused = target?.hasAttribute("data-autofocus") ?? false;
-    if (target && !alreadyAutofocused) target.setAttribute("data-autofocus", "true");
-    pin(false);
-    if (target && !alreadyAutofocused) {
-      window.setTimeout(() => target.removeAttribute("data-autofocus"), 250);
-    }
+    openAdvanced(true);
   };
 
   return (
@@ -86,15 +87,21 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
       <WidgetContextMenu item={item} widgetStateRef={widgetStateRef} sourceRef={sourceRef}>
         <Box
           ref={sourceRef}
-          tabIndex={isEditMode ? undefined : 0}
-          role={isEditMode ? undefined : "group"}
-          aria-label={isEditMode ? undefined : `${widgetName}: ${t("item.advancedFocus.open")}`}
-          aria-haspopup="dialog"
-          aria-expanded={isAdvanced}
-          aria-keyshortcuts="Shift+Enter"
-          onKeyDown={handleKeyDown}
-          onPointerEnter={() => sourceRef.current && hover(item.id, sourceRef.current)}
-          onPointerLeave={() => leave(item.id)}
+          tabIndex={!isEditMode && supportsAdvancedFocus ? 0 : undefined}
+          role={!isEditMode && supportsAdvancedFocus ? "group" : undefined}
+          aria-label={
+            !isEditMode && supportsAdvancedFocus ? `${widgetName}: ${t("item.advancedFocus.open")}` : undefined
+          }
+          aria-expanded={supportsAdvancedFocus ? isAdvanced : undefined}
+          aria-controls={isAdvanced ? advancedViewId : undefined}
+          aria-keyshortcuts={supportsAdvancedFocus ? "Shift+Enter" : undefined}
+          onKeyDown={supportsAdvancedFocus ? handleKeyDown : undefined}
+          onPointerEnter={() => {
+            if (supportsAdvancedFocus && sourceRef.current) hover(item.id, sourceRef.current);
+          }}
+          onPointerLeave={() => {
+            if (supportsAdvancedFocus) leave(item.id);
+          }}
           className={combineClasses("grid-stack-item-content", isAdvanced && advancedFocusClasses.sourcePlaceholder)}
         >
           <div
@@ -103,105 +110,82 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
               isAdvanced && advancedFocusClasses.surfaceHostAdvanced,
             )}
           >
-            <FocusTrap active={Boolean(activeFocus?.pinned)}>
-              <Card
-                role={isAdvanced ? "dialog" : undefined}
-                aria-modal={activeFocus?.pinned || undefined}
-                aria-label={isAdvanced ? advancedDialogLabel : undefined}
-                radius={board.itemRadius}
-                p={isAdvanced ? undefined : 0}
-                h={isAdvanced ? undefined : "100%"}
-                w={isAdvanced ? undefined : "100%"}
-                className={combineClasses(
-                  classes.itemCard,
-                  `${item.kind}-wrapper`,
-                  isAdvanced && advancedFocusClasses.surface,
-                  activeFocus?.phase === "closing" && advancedFocusClasses.surfaceClosing,
-                  item.advancedOptions.customCssClasses.join(" "),
-                )}
-                onPointerDownCapture={isAdvanced ? handleSurfacePointerDown : undefined}
-                styles={{
-                  root: {
-                    "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
-                    containerType: "size",
-                    overflow: getOverflowFromKind(item.kind),
-                    "--border-color":
-                      item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
-                  },
-                }}
-                style={
-                  activeFocus && advancedRect
-                    ? ({
-                        left: advancedRect.left,
-                        top: advancedRect.top,
-                        width: advancedRect.width,
-                        height: advancedRect.height,
-                        "--focus-translate-x": `${activeFocus.sourceRect.left - advancedRect.left}px`,
-                        "--focus-translate-y": `${activeFocus.sourceRect.top - advancedRect.top}px`,
-                        "--focus-scale-x": activeFocus.sourceRect.width / advancedRect.width,
-                        "--focus-scale-y": activeFocus.sourceRect.height / advancedRect.height,
-                      } as CSSProperties)
-                    : undefined
-                }
+            {activeFocus?.activation === "manual" && closePosition && (
+              <ActionIcon
+                ref={closeButtonRef}
+                className={advancedFocusClasses.closeButton}
+                variant="default"
+                size={44}
+                aria-label={t("item.advancedFocus.close")}
+                aria-controls={advancedViewId}
+                style={closePosition}
+                onClick={() => close()}
               >
-                <div
-                  className={combineClasses(
-                    advancedFocusClasses.surfaceControls,
-                    isAdvanced && advancedFocusClasses.surfaceControlsAdvanced,
-                  )}
-                >
-                  {isAdvanced && (
-                    <Text className={advancedFocusClasses.surfaceTitle} size="sm" fw={600} truncate>
-                      {advancedDialogLabel}
-                    </Text>
-                  )}
-                  {isAdvanced && (
-                    <ActionIcon
-                      data-autofocus={activeFocus.pinned && activeFocus.autofocusClose ? true : undefined}
-                      className={advancedFocusClasses.closeButton}
-                      variant="default"
-                      size={44}
-                      aria-label={t("item.advancedFocus.close")}
-                      onClick={() => close()}
-                    >
-                      <IconX size={18} />
-                    </ActionIcon>
-                  )}
-                  {isAdvanced && (
-                    <ActionIcon
-                      className={advancedFocusClasses.pinButton}
-                      variant={activeFocus.pinned ? "filled" : "default"}
-                      size={44}
-                      aria-label={activeFocus.pinned ? t("item.advancedFocus.pinned") : t("item.advancedFocus.pin")}
-                      aria-pressed={activeFocus.pinned}
-                      onClick={(event) => pin(event.detail === 0)}
-                    >
-                      <IconPin size={18} />
-                    </ActionIcon>
-                  )}
-                  {!isEditMode && !isAdvanced && (
-                    <ActionIcon
-                      className={advancedFocusClasses.touchButton}
-                      variant="default"
-                      size={44}
-                      aria-label={t("item.advancedFocus.open")}
-                      onClick={openPinned}
-                    >
-                      <IconMaximize size={18} />
-                    </ActionIcon>
-                  )}
-                </div>
-                <Box ref={contentRef} w="100%" h="100%" mih={0}>
-                  <InnerContent
-                    item={item}
-                    width={width}
-                    height={height}
-                    widgetStateRef={widgetStateRef}
-                    displayMode={isAdvanced ? "advanced" : "compact"}
-                  />
-                </Box>
-              </Card>
-            </FocusTrap>
+                <IconX size={18} />
+              </ActionIcon>
+            )}
+            <Card
+              id={isAdvanced ? advancedViewId : undefined}
+              role={isAdvanced ? "region" : undefined}
+              aria-label={isAdvanced ? advancedViewLabel : undefined}
+              radius={board.itemRadius}
+              p={isAdvanced ? undefined : 0}
+              h={isAdvanced ? undefined : "100%"}
+              w={isAdvanced ? undefined : "100%"}
+              className={combineClasses(
+                classes.itemCard,
+                `${item.kind}-wrapper`,
+                isAdvanced && advancedFocusClasses.surface,
+                activeFocus?.phase === "closing" && advancedFocusClasses.surfaceClosing,
+                item.advancedOptions.customCssClasses.join(" "),
+              )}
+              styles={{
+                root: {
+                  "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
+                  containerType: "size",
+                  overflow: getOverflowFromKind(item.kind),
+                  "--border-color":
+                    item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+                },
+              }}
+              style={
+                activeFocus && advancedRect
+                  ? ({
+                      left: advancedRect.left,
+                      top: advancedRect.top,
+                      width: advancedRect.width,
+                      height: advancedRect.height,
+                      "--focus-translate-x": `${activeFocus.sourceRect.left - advancedRect.left}px`,
+                      "--focus-translate-y": `${activeFocus.sourceRect.top - advancedRect.top}px`,
+                      "--focus-scale-x": activeFocus.sourceRect.width / advancedRect.width,
+                      "--focus-scale-y": activeFocus.sourceRect.height / advancedRect.height,
+                    } as CSSProperties)
+                  : undefined
+              }
+            >
+              <div className={advancedFocusClasses.surfaceControls}>
+                {!isEditMode && supportsAdvancedFocus && !isAdvanced && (
+                  <ActionIcon
+                    className={advancedFocusClasses.touchButton}
+                    variant="default"
+                    size={44}
+                    aria-label={t("item.advancedFocus.open")}
+                    onClick={() => openAdvanced()}
+                  >
+                    <IconMaximize size={18} />
+                  </ActionIcon>
+                )}
+              </div>
+              <Box ref={contentRef} w="100%" h="100%" mih={0}>
+                <InnerContent
+                  item={item}
+                  width={width}
+                  height={height}
+                  widgetStateRef={widgetStateRef}
+                  displayMode={isAdvanced ? "advanced" : "compact"}
+                />
+              </Box>
+            </Card>
           </div>
         </Box>
       </WidgetContextMenu>
diff --git a/apps/nextjs/src/components/board/items/item-select-modal.tsx b/apps/nextjs/src/components/board/items/item-select-modal.tsx
index d7994d77b..04ed92b17 100644
--- a/apps/nextjs/src/components/board/items/item-select-modal.tsx
+++ b/apps/nextjs/src/components/board/items/item-select-modal.tsx
@@ -283,11 +283,6 @@ const WidgetItem = ({
             {item.description}
           </Text>
         </Tooltip>
-        {hasMatchingIntegration && (
-          <Text size="10px" c="blue.6" fw={600}>
-            {t("item.create.integrationAvailable")}
-          </Text>
-        )}
         <SupportedIntegrations integrations={item.supportedIntegrations} />
       </Stack>
       <Box
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index 2c89b14b9..24b6f0103 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -250,17 +250,21 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
     >
       <Menu.ContextMenu>{children}</Menu.ContextMenu>
       <Menu.Dropdown>
-        <Menu.Item
-          closeMenuOnClick
-          leftSection={<IconMaximize size={16} />}
-          onClick={() => {
-            if (sourceRef.current) openAdvancedFocus(item.id, sourceRef.current, true);
-          }}
-          disabled={isEditMode}
-        >
-          {t("item.advancedFocus.open")}
-        </Menu.Item>
-        <Menu.Divider />
+        {item.kind !== "app" && (
+          <>
+            <Menu.Item
+              closeMenuOnClick
+              leftSection={<IconMaximize size={16} />}
+              onClick={() => {
+                if (sourceRef.current) openAdvancedFocus(item.id, sourceRef.current);
+              }}
+              disabled={isEditMode}
+            >
+              {t("item.advancedFocus.open")}
+            </Menu.Item>
+            <Menu.Divider />
+          </>
+        )}
         {toggleOptions.length > 0 && (
           <>
             <Menu.Label>{tMenu("options")}</Menu.Label>
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 417f913b3..eabb0a33f 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -7,6 +7,7 @@ import { afterAll, beforeAll, describe, test } from "vitest";
 
 import { hashPasswordAsync } from "../packages/auth/security";
 import {
+  apps,
   boardUserPermissions,
   boards,
   itemLayouts,
@@ -24,6 +25,7 @@ const ownerCredentials = { username: "owner", password: "Comp(exP4sswOrd" };
 const disabledModifierCredentials = { username: "modifier", password: "Comp(exP4sswOrd" };
 const viewerCredentials = { username: "viewer", password: "Comp(exP4sswOrd" };
 const boardName = "advanced-interactions-e2e";
+const emptyCellCenterXRatio = 7.5 / 12;
 
 describe("Board advanced interactions", () => {
   let browser: Browser;
@@ -67,7 +69,10 @@ describe("Board advanced interactions", () => {
     try {
       const widget = page.locator(".grid-stack-item[data-kind='clock'] > .grid-stack-item-content").first();
       const compactSurface = widget.locator(".clock-wrapper");
-      const advancedDialog = page.getByRole("dialog", { name: "Date and time advanced view" });
+      const advancedSurface = page.getByRole("region", { name: "Date and time advanced view" });
+      const iframeAdvancedSurface = page.getByRole("region", { name: "iFrame advanced view" });
+      const dimmingOverlay = page.locator("[data-advanced-focus-overlay]");
+      const otherWidget = page.locator(".grid-stack-item[data-kind='iframe'] > .grid-stack-item-content").first();
 
       await compactSurface.evaluate((element) => {
         element.setAttribute("data-lifecycle-probe", "same-instance");
@@ -75,43 +80,60 @@ describe("Board advanced interactions", () => {
       await widget.focus();
       await page.keyboard.down("Shift");
       await widget.hover();
-      await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
-      await expect(advancedDialog).toHaveCSS("animation-name", "none");
-      const advancedBounds = await advancedDialog.boundingBox();
-      expect(advancedBounds?.width).toBeGreaterThanOrEqual(900);
-      await expect(advancedDialog).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(advancedSurface).toBeVisible({ timeout: 2_000 });
+      await expect(advancedSurface).toHaveCSS("animation-name", "none");
+      const compactBounds = await widget.boundingBox();
+      const advancedBounds = await advancedSurface.boundingBox();
+      expect(advancedBounds?.width).toBeGreaterThan(compactBounds?.width ?? 0);
+      await expect(advancedSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(dimmingOverlay).toBeVisible();
+      await expect(dimmingOverlay).toHaveCSS("pointer-events", "none");
+      await expect(otherWidget).toBeVisible();
       await expect(widget).toBeFocused();
+
+      await advancedSurface.click({ button: "right", position: { x: 80, y: 80 } });
+      const portalledMenuItem = page.getByRole("menuitem", { name: "Open advanced view" });
+      await expect(portalledMenuItem).toBeVisible();
+      await portalledMenuItem.hover();
+      await expect(advancedSurface).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(portalledMenuItem).toBeHidden();
+      await expect(advancedSurface).toBeVisible();
+
+      await otherWidget.hover();
+      await expect(advancedSurface).toBeHidden();
+      await expect(iframeAdvancedSurface).toBeVisible({ timeout: 2_000 });
       await page.keyboard.up("Shift");
-      await expect(advancedDialog).toBeHidden();
+      await expect(iframeAdvancedSurface).toBeHidden();
+      await expect(dimmingOverlay).toBeHidden();
       await expect(compactSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
       await expect(widget).toBeFocused();
 
-      await page.keyboard.down("Shift");
-      await widget.hover();
-      await expect(advancedDialog).toBeVisible({ timeout: 2_000 });
-      await page.getByRole("button", { name: "Keep advanced view open" }).click();
-      const pinnedButton = page.getByRole("button", { name: "Advanced view is pinned" });
-      await expect(pinnedButton).toBeFocused();
-      await page.keyboard.up("Shift");
-      await expect(advancedDialog).toBeVisible();
-      await page.keyboard.press("Shift+Tab");
-      await expect(advancedDialog).toBeVisible();
-      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
-      await page.keyboard.press("Escape");
-      await expect(advancedDialog).toBeHidden();
-      await expect(widget).toBeFocused();
-
       await page.keyboard.press("Shift+Enter");
-      await expect(advancedDialog).toBeVisible();
+      await expect(advancedSurface).toBeVisible();
+      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+      await expect(page.getByRole("button", { name: /advanced view is pinned|keep advanced view open/i })).toHaveCount(
+        0,
+      );
       await page.keyboard.press("Escape");
-      await expect(advancedDialog).toBeHidden();
+      await expect(advancedSurface).toBeHidden();
       await expect(widget).toBeFocused();
 
       await widget.click({ button: "right" });
       await page.getByRole("menuitem", { name: "Open advanced view" }).click();
-      await expect(advancedDialog).toBeVisible();
+      await expect(advancedSurface).toBeVisible();
       await page.keyboard.press("Escape");
-      await expect(advancedDialog).toBeHidden();
+      await expect(advancedSurface).toBeHidden();
+
+      const appWidget = page.locator(".grid-stack-item[data-kind='app'] > .grid-stack-item-content").first();
+      await expect(appWidget).not.toHaveAttribute("aria-keyshortcuts", "Shift+Enter");
+      await appWidget.click({ button: "right" });
+      await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
+      await page.keyboard.press("Escape");
+      await page.keyboard.down("Shift");
+      await appWidget.hover();
+      await expect(advancedSurface).toBeHidden();
+      await page.keyboard.up("Shift");
     } finally {
       await context.close();
     }
@@ -131,7 +153,7 @@ describe("Board advanced interactions", () => {
 
       await iframeSlot.focus();
       await page.keyboard.press("Shift+Enter");
-      await expect(page.getByRole("dialog", { name: "iFrame advanced view" })).toBeVisible();
+      await expect(page.getByRole("region", { name: "iFrame advanced view" })).toBeVisible();
       await expect(frame.locator("#state")).toHaveValue("changed");
       await page.keyboard.press("Escape");
       await expect(frame.locator("#state")).toHaveValue("changed");
@@ -139,7 +161,7 @@ describe("Board advanced interactions", () => {
       await iframeSlot.focus();
       await page.keyboard.press("Shift+Enter");
       await page.setViewportSize({ width: 800, height: 900 });
-      await expect(page.getByRole("dialog", { name: "iFrame advanced view" })).toBeHidden();
+      await expect(page.getByRole("region", { name: "iFrame advanced view" })).toBeHidden();
       await expect(page.locator(".grid-stack-item[data-kind='iframe'] iframe")).toBeVisible();
     } finally {
       await context.close();
@@ -163,13 +185,18 @@ describe("Board advanced interactions", () => {
       expect(bounds.height).toBeGreaterThanOrEqual(44);
       expect(bounds.x + bounds.width).toBeLessThanOrEqual(1366);
       expect(bounds.y + bounds.height).toBeLessThanOrEqual(768);
-      const dialogBounds = await page.getByRole("dialog", { name: "Date and time advanced view" }).boundingBox();
+      const surfaceBounds = await page.getByRole("region", { name: "Date and time advanced view" }).boundingBox();
       const contentBounds = await page.locator(".clock-widget-container").boundingBox();
-      expect(dialogBounds).not.toBeNull();
+      expect(surfaceBounds).not.toBeNull();
       expect(contentBounds).not.toBeNull();
-      if (dialogBounds && contentBounds) expect(contentBounds.y).toBeGreaterThanOrEqual(dialogBounds.y + 60);
+      if (surfaceBounds && contentBounds) {
+        expect(contentBounds.y - surfaceBounds.y).toBeLessThan(32);
+        expect(bounds.x >= surfaceBounds.x + surfaceBounds.width || bounds.x + bounds.width <= surfaceBounds.x).toBe(
+          true,
+        );
+      }
       await closeButton.click();
-      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeHidden();
+      await expect(page.getByRole("region", { name: "Date and time advanced view" })).toBeHidden();
     } finally {
       await context.close();
     }
@@ -232,7 +259,7 @@ describe("Board advanced interactions", () => {
 
       await widget.click({ button: "right" });
       await page.getByRole("menuitem", { name: "Open advanced view" }).click();
-      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeVisible();
+      await expect(page.getByRole("region", { name: "Date and time advanced view" })).toBeVisible();
       await page.keyboard.press("Escape");
 
       await expect(grid).not.toHaveAttribute("aria-label", "Add item here");
@@ -273,7 +300,7 @@ const rightClickEmptyGridSpaceAsync = async (grid: Locator) => {
 
   await grid.click({
     button: "right",
-    position: { x: bounds.width - 16, y: Math.min(24, bounds.height / 2) },
+    position: { x: bounds.width * emptyCellCenterXRatio, y: Math.min(24, bounds.height / 2) },
   });
 };
 
@@ -282,7 +309,7 @@ const touchAndHoldEmptyGridSpaceAsync = async (grid: Locator) => {
   expect(bounds).not.toBeNull();
   if (!bounds) return;
 
-  const clientX = bounds.x + bounds.width - 16;
+  const clientX = bounds.x + bounds.width * emptyCellCenterXRatio;
   const clientY = bounds.y + Math.min(24, bounds.height / 2);
   await grid.dispatchEvent("pointerdown", { pointerType: "touch", clientX, clientY });
   await new Promise((resolve) => setTimeout(resolve, 800));
@@ -296,8 +323,16 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
   const sectionId = createId();
   const clockItemId = createId();
   const iframeItemId = createId();
+  const appItemId = createId();
+  const appId = createId();
 
   await db.insert(boards).values({ id: boardId, name: boardName, creatorId: ownerId, isPublic: false });
+  await db.insert(apps).values({
+    id: appId,
+    name: "Example app",
+    iconUrl: "/favicon.ico",
+    href: "https://example.com",
+  });
   await db.insert(layouts).values([
     { id: baseLayoutId, name: "Base", columnCount: 12, breakpoint: 0, boardId },
     { id: desktopLayoutId, name: "Desktop", columnCount: 12, breakpoint: 1000, boardId },
@@ -318,6 +353,13 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
       options: stringify({ embedUrl: "http://127.0.0.1:9", allowScrolling: true }),
       advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
     },
+    {
+      id: appItemId,
+      kind: "app",
+      boardId,
+      options: stringify({ appId, openInNewTab: true, showTitle: true, pingEnabled: false }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
   ]);
   await db.insert(itemLayouts).values(
     [baseLayoutId, desktopLayoutId].flatMap((layoutId) => [
@@ -334,11 +376,20 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
         itemId: iframeItemId,
         sectionId,
         layoutId,
-        xOffset: 4,
+        xOffset: 8,
         yOffset: 0,
         width: 4,
         height: 3,
       },
+      {
+        itemId: appItemId,
+        sectionId,
+        layoutId,
+        xOffset: 4,
+        yOffset: 0,
+        width: 3,
+        height: 3,
+      },
     ]),
   );
   await db
diff --git a/packages/request-handler/src/timetable.spec.ts b/packages/request-handler/src/timetable.spec.ts
index 54bd68645..ea39392ab 100644
--- a/packages/request-handler/src/timetable.spec.ts
+++ b/packages/request-handler/src/timetable.spec.ts
@@ -14,7 +14,8 @@ vi.mock("@homarr/core/infrastructure/http", () => ({
 const mockFetch = vi.mocked(fetchWithTrustedCertificatesAsync);
 const mockCreateCertificateAgent = vi.mocked(createCertificateAgentAsync);
 const mockCloseDispatcher = vi.fn();
-const mockDispatcher = { close: mockCloseDispatcher };
+const mockDestroyDispatcher = vi.fn().mockResolvedValue(undefined);
+const mockDispatcher = { close: mockCloseDispatcher, destroy: mockDestroyDispatcher };
 
 beforeEach(() => {
   vi.clearAllMocks();
@@ -156,6 +157,41 @@ describe("timetable response bounds", () => {
     expect(mockCloseDispatcher).toHaveBeenCalledOnce();
   });
 
+  it("destroys the pinned station dispatcher when response handling fails", async () => {
+    mockFetch.mockResolvedValue(new Response("not json"));
+
+    await expect(
+      timetableSearchStationsRequestHandler
+        .handler({
+          baseUrl: "https://timetable.example.com",
+          query: "invalid-stations",
+          pinnedAddresses: [{ address: "93.184.216.34", family: 4 }],
+        })
+        .getDataAsync(),
+    ).rejects.toThrow();
+
+    expect(mockDestroyDispatcher).toHaveBeenCalledOnce();
+    expect(mockCloseDispatcher).not.toHaveBeenCalled();
+  });
+
+  it("destroys the pinned timetable dispatcher when response handling fails", async () => {
+    mockFetch.mockResolvedValue(new Response("not json"));
+
+    await expect(
+      timetableGetTimetableRequestHandler
+        .handler({
+          baseUrl: "https://timetable.example.com",
+          stationId: "invalid-departures",
+          limit: 1,
+          pinnedAddresses: [{ address: "93.184.216.34", family: 4 }],
+        })
+        .getDataAsync(),
+    ).rejects.toThrow();
+
+    expect(mockDestroyDispatcher).toHaveBeenCalledOnce();
+    expect(mockCloseDispatcher).not.toHaveBeenCalled();
+  });
+
   it("never caches more departures than requested", async () => {
     mockFetch.mockResolvedValue(
       new Response(
diff --git a/packages/request-handler/src/timetable.ts b/packages/request-handler/src/timetable.ts
index 2ae4eb449..27f549ac5 100644
--- a/packages/request-handler/src/timetable.ts
+++ b/packages/request-handler/src/timetable.ts
@@ -124,9 +124,10 @@ const searchStationsAsync = async (
   query: string,
   pinnedAddresses?: TimetableResolvedAddress[],
 ): Promise<Station[]> => {
-  const dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  let dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  let response: Awaited<ReturnType<typeof fetchWithTrustedCertificatesAsync>> | undefined;
   try {
-    const response = await fetchWithTrustedCertificatesAsync(
+    response = await fetchWithTrustedCertificatesAsync(
       buildUrl(baseUrl, "/timetable/api/completion.json", { term: query, show_ids: 1, nofavorites: 1 }),
       { ...timetableFetchOptions, dispatcher },
     );
@@ -138,6 +139,11 @@ const searchStationsAsync = async (
       .filter((item) => supportedStationTypes.some((type) => item.iconclass.endsWith(type)))
       .map((item) => (item.id !== undefined ? { id: item.id, name: item.label } : null))
       .filter((item) => item !== null);
+  } catch (error) {
+    if (response?.body) await response.body.cancel().catch(() => {});
+    await dispatcher?.destroy().catch(() => {});
+    dispatcher = undefined;
+    throw error;
   } finally {
     await dispatcher?.close();
   }
@@ -161,9 +167,10 @@ const getTimetableAsync = async (
     minute: "2-digit",
     hour12: false,
   }).format(now);
-  const dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  let dispatcher = pinnedAddresses ? await createPinnedTimetableDispatcherAsync(baseUrl, pinnedAddresses) : undefined;
+  let response: Awaited<ReturnType<typeof fetchWithTrustedCertificatesAsync>> | undefined;
   try {
-    const response = await fetchWithTrustedCertificatesAsync(
+    response = await fetchWithTrustedCertificatesAsync(
       buildUrl(baseUrl, "/timetable/api/stationboard.json", {
         stop: options.stationId,
         limit: options.limit,
@@ -205,6 +212,11 @@ const getTimetableAsync = async (
         };
       }),
     };
+  } catch (error) {
+    if (response?.body) await response.body.cancel().catch(() => {});
+    await dispatcher?.destroy().catch(() => {});
+    dispatcher = undefined;
+    throw error;
   } finally {
     await dispatcher?.close();
   }
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 61d6d6e50..badfef807 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1645,7 +1645,6 @@
       "search": "Filter items",
       "addToBoard": "Add to board",
       "addAtPosition": "Add item here",
-      "integrationAvailable": "Connected integration available",
       "notification": {
         "error": {
           "title": "Unable to add item",
@@ -1656,9 +1655,7 @@
     "advancedFocus": {
       "open": "Open advanced view",
       "close": "Close advanced view",
-      "pin": "Keep advanced view open",
-      "pinned": "Advanced view is pinned",
-      "dialog": "{widget} advanced view"
+      "label": "{widget} advanced view"
     },
     "moveResize": {
       "title": "Move / resize item",
@@ -2298,6 +2295,12 @@
       "duration": {
         "allDay": "All day"
       },
+      "advanced": {
+        "previousMonth": "Show previous month",
+        "nextMonth": "Show next month",
+        "eventCount": "{count, plural, one {# event} other {# events}}",
+        "noEvents": "No events in this month"
+      },
       "option": {
         "releaseType": {
           "label": "Radarr release type",
@@ -2354,6 +2357,16 @@
         }
       },
       "currentWindSpeed": "{currentWindSpeed} {unit}",
+      "advanced": {
+        "forecast": "7-day forecast",
+        "day": "Day",
+        "conditions": "Conditions",
+        "temperature": "High / low",
+        "humidity": "Humidity",
+        "wind": "Wind / gusts ({unit})",
+        "sun": "Sunrise / sunset",
+        "noForecast": "No forecast data available"
+      },
       "dailyForecast": {
         "sunrise": "Sunrise",
         "sunset": "Sunset",
diff --git a/packages/widgets/src/anchor-note/anchor-note.css b/packages/widgets/src/anchor-note/anchor-note.css
index c28655e87..d107b2a77 100644
--- a/packages/widgets/src/anchor-note/anchor-note.css
+++ b/packages/widgets/src/anchor-note/anchor-note.css
@@ -4,6 +4,34 @@
   height: 100%;
 }
 
+.homarr-anchor-actions {
+  opacity: 0;
+  transform: translateY(-2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.homarr-anchor-note:hover .homarr-anchor-actions,
+.homarr-anchor-note:focus-within .homarr-anchor-actions,
+.homarr-anchor-actions[data-visible="true"] {
+  opacity: 1;
+  transform: none;
+}
+
+@media (any-pointer: coarse) {
+  .homarr-anchor-actions {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homarr-anchor-actions {
+    transition: none;
+  }
+}
+
 .homarr-anchor-quill .ql-toolbar.ql-snow,
 .homarr-anchor-quill .ql-container.ql-snow {
   border: 0;
diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 6667189b0..9268bf6f4 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -3,7 +3,8 @@
 import { startTransition, useCallback, useEffect, useMemo, useState } from "react";
 import type { ComponentProps } from "react";
 import dynamic from "next/dynamic";
-import { Badge, Button, Center, Group, Stack, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Badge, Button, Center, Group, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import { IconEdit } from "@tabler/icons-react";
 import { Quill } from "react-quill-new";
 import type { DeltaStatic } from "react-quill-new";
 import type ReactQuillComponent from "react-quill-new";
@@ -295,7 +296,7 @@ const AnchorNoteWidgetContent = ({
   if (!note) return <WidgetEmptyState />;
 
   return (
-    <Stack h="100%" gap="xs" p={height < 120 ? "xs" : "sm"}>
+    <Stack className="homarr-anchor-note" h="100%" gap="xs" p={height < 120 ? "xs" : "sm"}>
       <Group justify="space-between" align="flex-start">
         <Stack gap={2} style={{ flex: 1 }}>
           {isEditing ? (
@@ -335,22 +336,30 @@ const AnchorNoteWidgetContent = ({
             </Text>
           )}
         </Stack>
-        <Group gap="xs">
-          {isEditing ? (
-            <>
-              <Button size="xs" onClick={handleSave} loading={isUpdating} disabled={!hasChanges || !canEdit}>
-                {t("save")}
+        {(isEditing || canEdit) && (
+          <Group className="homarr-anchor-actions" data-visible={isEditing || isAdvanced || undefined} gap="xs">
+            {isEditing ? (
+              <>
+                <Button size="xs" onClick={handleSave} loading={isUpdating} disabled={!hasChanges || !canEdit}>
+                  {t("save")}
+                </Button>
+                <Button size="xs" variant="subtle" onClick={handleCancel} disabled={isUpdating}>
+                  {t("cancel")}
+                </Button>
+              </>
+            ) : isAdvanced ? (
+              <Button size="xs" variant="light" onClick={handleEdit} disabled={isUpdating}>
+                {t("edit")}
               </Button>
-              <Button size="xs" variant="subtle" onClick={handleCancel} disabled={isUpdating}>
-                {t("cancel")}
-              </Button>
-            </>
-          ) : (
-            <Button size="xs" variant="light" onClick={handleEdit} disabled={!canEdit || isUpdating}>
-              {t("edit")}
-            </Button>
-          )}
-        </Group>
+            ) : (
+              <Tooltip label={t("edit")}>
+                <ActionIcon aria-label={t("edit")} size="md" variant="light" onClick={handleEdit} disabled={isUpdating}>
+                  <IconEdit size={16} />
+                </ActionIcon>
+              </Tooltip>
+            )}
+          </Group>
+        )}
       </Group>
       {isEditing || isAdvanced ? (
         <div
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 2e8b192ff..40e9064c1 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -19,7 +19,7 @@ import classes from "./app.module.css";
 import { PingDot } from "./ping/ping-dot";
 import { PingIndicator } from "./ping/ping-indicator";
 
-export default function AppWidget({ options, isEditMode, height, width, displayMode }: WidgetComponentProps<"app">) {
+export default function AppWidget({ options, isEditMode, height, width }: WidgetComponentProps<"app">) {
   const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
@@ -51,7 +51,6 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
   if (!app) return <WidgetEmptyState />;
 
   const isTiny = height < 100 || width < 100;
-  const isAdvanced = displayMode === "advanced";
   const isColumnLayout = options.layout.startsWith("column");
 
   return (
@@ -69,7 +68,7 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
         ))}
         position="right-start"
         multiline
-        disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode || isAdvanced}
+        disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode}
         styles={{ tooltip: { maxWidth: 300 } }}
       >
         <Flex
@@ -84,7 +83,7 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
           onContextMenu={isEditMode ? (e) => e.preventDefault() : undefined}
         >
           <Stack gap={0}>
-            {(options.showTitle || isAdvanced) && (
+            {options.showTitle && (
               <Text
                 className="app-title"
                 fw={700}
@@ -94,13 +93,13 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
                 {app.name}
               </Text>
             )}
-            {(options.descriptionDisplayMode === "normal" || isAdvanced) && (
+            {options.descriptionDisplayMode === "normal" && (
               <Text
                 className="app-description"
                 size={isTiny ? rem(8) : "sm"}
                 ta={isColumnLayout ? "center" : undefined}
                 c="dimmed"
-                lineClamp={isAdvanced ? 10 : Math.max(1, Math.floor((height - 48) / 18))}
+                lineClamp={Math.max(1, Math.floor((height - 48) / 18))}
               >
                 {app.description?.split("\n").map((line, index) => (
                   <Fragment key={index}>
@@ -110,11 +109,6 @@ export default function AppWidget({ options, isEditMode, height, width, displayM
                 ))}
               </Text>
             )}
-            {isAdvanced && app.href && (
-              <Text size="xs" c="dimmed" lineClamp={1}>
-                {getDisplayHost(app.href)}
-              </Text>
-            )}
           </Stack>
           <MaskedOrNormalImage
             imageUrl={app.iconUrl}
@@ -160,11 +154,3 @@ const AppLink = ({ href, openInNewTab, enabled, children }: PropsWithChildren<Ap
   ) : (
     children
   );
-
-const getDisplayHost = (href: string) => {
-  try {
-    return new URL(href).host;
-  } catch {
-    return href;
-  }
-};
diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx
index e6b4f878d..83cf74289 100644
--- a/packages/widgets/src/archive-team-warrior/component.tsx
+++ b/packages/widgets/src/archive-team-warrior/component.tsx
@@ -53,9 +53,16 @@ const ArchiveTeamWarriorWidgetContent = ({
   const status = data.status;
   const projectName = status.project?.title ?? status.selectedProject ?? t("noProjectSelected");
   const statusKey = getStatusKey(status.status);
+  const layout = getArchiveCompactLayout(width, height, isAdvanced);
+  const countMetrics = [
+    { label: t("metric.running"), value: status.counts.running },
+    ...(layout.showSecondaryCounts ? [{ label: t("metric.completed"), value: status.counts.completed }] : []),
+    { label: t("metric.failed"), value: status.counts.failed },
+    ...(layout.showSecondaryCounts ? [{ label: t("metric.canceled"), value: status.counts.canceled }] : []),
+  ];
 
   return (
-    <Stack p="xs" gap="xs" h="100%" style={{ overflow: "hidden" }}>
+    <Stack p="xs" gap={layout.gap} h="100%" style={{ overflow: "hidden" }}>
       <Group justify="space-between" align="center" wrap="nowrap">
         <Group gap="xs" wrap="nowrap" miw={0}>
           <Avatar size="sm" radius="md" src={getIconUrl("archiveTeamWarrior")} />
@@ -69,7 +76,7 @@ const ArchiveTeamWarriorWidgetContent = ({
         </Badge>
       </Group>
 
-      {options.showBroadcastMessage && status.broadcastMessage && (isAdvanced || height >= 160) && (
+      {options.showBroadcastMessage && status.broadcastMessage && layout.showBroadcast && (
         <Card withBorder p="xs">
           <Text size="xs" lineClamp={3}>
             {status.broadcastMessage}
@@ -77,17 +84,16 @@ const ArchiveTeamWarriorWidgetContent = ({
         </Card>
       )}
 
-      <SimpleGrid cols={width < 180 || height < 120 ? 4 : 2} spacing="xs">
-        <Metric label={t("metric.running")} value={status.counts.running} />
-        <Metric label={t("metric.completed")} value={status.counts.completed} />
-        <Metric label={t("metric.failed")} value={status.counts.failed} />
-        <Metric label={t("metric.canceled")} value={status.counts.canceled} />
+      <SimpleGrid cols={layout.metricColumns} spacing={layout.gap}>
+        {countMetrics.map((metric) => (
+          <Metric key={metric.label} {...metric} dense={layout.dense} />
+        ))}
       </SimpleGrid>
 
-      {status.bandwidth && (
-        <SimpleGrid cols={2} spacing="xs">
-          <Metric label={t("metric.download")} value={formatBandwidth(status.bandwidth.receiving)} />
-          <Metric label={t("metric.upload")} value={formatBandwidth(status.bandwidth.sending)} />
+      {status.bandwidth && layout.showBandwidth && (
+        <SimpleGrid cols={2} spacing={layout.gap}>
+          <Metric label={t("metric.download")} value={formatBandwidth(status.bandwidth.receiving)} dense />
+          <Metric label={t("metric.upload")} value={formatBandwidth(status.bandwidth.sending)} dense />
         </SimpleGrid>
       )}
       {isAdvanced && (
@@ -130,17 +136,32 @@ const ArchiveTeamWarriorWidgetContent = ({
   );
 };
 
-const Metric = ({ label, value }: { label: string; value: number | string }) => (
+const Metric = ({ label, value, dense = false }: { label: string; value: number | string; dense?: boolean }) => (
   <Stack gap={0} miw={0}>
-    <Text size="md" fw={700} lineClamp={1}>
+    <Text size={dense ? "sm" : "md"} fw={700} lineClamp={1} title={String(value)}>
       {value}
     </Text>
-    <Text size="xs" c="dimmed" lineClamp={1}>
+    <Text size="xs" c="dimmed" lineClamp={1} title={label}>
       {label}
     </Text>
   </Stack>
 );
 
+export const getArchiveCompactLayout = (width: number, height: number, isAdvanced = false) => {
+  const dense = !isAdvanced && (width < 240 || height < 160);
+  const showSecondaryCounts = isAdvanced || (width >= 200 && height >= 120);
+  const metricCount = showSecondaryCounts ? 4 : 2;
+
+  return {
+    dense,
+    gap: dense ? 4 : "xs",
+    metricColumns: height < 160 ? metricCount : Math.min(metricCount, width >= 260 ? 4 : 2),
+    showBandwidth: isAdvanced || height >= 190,
+    showBroadcast: isAdvanced || height >= 240,
+    showSecondaryCounts,
+  } as const;
+};
+
 const formatBandwidth = (value?: number) => formatByteRate(Math.round(value ?? 0));
 
 type WarriorStatusKey = "running" | "completed" | "failed" | "canceled" | "stopped" | "idle" | "unknown";
diff --git a/packages/widgets/src/archive-team-warrior/layout.spec.ts b/packages/widgets/src/archive-team-warrior/layout.spec.ts
new file mode 100644
index 000000000..213c5bd11
--- /dev/null
+++ b/packages/widgets/src/archive-team-warrior/layout.spec.ts
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+
+import { getArchiveCompactLayout } from "./component";
+
+describe("archive team warrior compact layout", () => {
+  test("keeps only primary counters in a minimum-size widget", () => {
+    expect(getArchiveCompactLayout(180, 100)).toMatchObject({
+      metricColumns: 2,
+      showBandwidth: false,
+      showBroadcast: false,
+      showSecondaryCounts: false,
+    });
+  });
+
+  test("adds secondary information as height becomes available", () => {
+    expect(getArchiveCompactLayout(320, 260)).toMatchObject({
+      metricColumns: 4,
+      showBandwidth: true,
+      showBroadcast: true,
+      showSecondaryCounts: true,
+    });
+  });
+});
diff --git a/packages/widgets/src/audio-stats/audio-stats-content.tsx b/packages/widgets/src/audio-stats/audio-stats-content.tsx
index b6824a1fe..3592744a4 100644
--- a/packages/widgets/src/audio-stats/audio-stats-content.tsx
+++ b/packages/widgets/src/audio-stats/audio-stats-content.tsx
@@ -8,7 +8,14 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import classes from "./component.module.css";
 import type { AudioStatsBackend, AudioStatsDisplayOptions } from "./shared";
-import { AUDIO_STATS_TRANSLATION_SCOPE, getGridCols, getIconSize, getVisibleStats } from "./shared";
+import {
+  AUDIO_STATS_TRANSLATION_SCOPE,
+  getGridCols,
+  getIconSize,
+  prioritizeVisibleStats,
+  getVisibleStatLimit,
+  getVisibleStats,
+} from "./shared";
 
 const rootClassByCompact = {
   true: classes.rootCompact,
@@ -30,14 +37,17 @@ interface AudioStatsContentProps {
   stats: NavidromeDashboardData | AudiobookshelfDashboardData;
   options: AudioStatsDisplayOptions;
   width: number;
+  height: number;
 }
 
-export function AudioStatsContent({ backend, stats, options, width }: AudioStatsContentProps) {
+export function AudioStatsContent({ backend, stats, options, width, height }: AudioStatsContentProps) {
   const t = useScopedI18n(AUDIO_STATS_TRANSLATION_SCOPE);
-  const visibleStats = getVisibleStats(backend, options, stats);
-  const compactKey = String(options.compactMode ?? false) as keyof typeof rootClassByCompact;
-  const gridCols = getGridCols(width, visibleStats.length, options.compactMode ?? false);
-  const iconSize = getIconSize(width, options.compactMode ?? false);
+  const compact = options.compactMode ?? false;
+  const enabledStats = prioritizeVisibleStats(getVisibleStats(backend, options, stats), compact);
+  const visibleStats = enabledStats.slice(0, getVisibleStatLimit(width, height, enabledStats.length, compact));
+  const compactKey = String(compact) as keyof typeof rootClassByCompact;
+  const gridCols = getGridCols(width, visibleStats.length, compact);
+  const iconSize = getIconSize(width, compact);
 
   return (
     <div className={`${classes.root} ${rootClassByCompact[compactKey]}`}>
diff --git a/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts b/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
index 406562f66..c4484ac12 100644
--- a/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
+++ b/packages/widgets/src/audio-stats/audio-stats-shared.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
 
 import type { AudiobookshelfDashboardData, NavidromeDashboardData } from "@homarr/integrations/types";
 
-import { getGridCols, getIconSize, getVisibleStats } from "./shared";
+import { getGridCols, getIconSize, getVisibleStatLimit, getVisibleStats, prioritizeVisibleStats } from "./shared";
 
 describe("getGridCols", () => {
   test("caps columns to visible stat count", () => {
@@ -37,6 +37,17 @@ describe("getIconSize", () => {
   });
 });
 
+describe("getVisibleStatLimit", () => {
+  test("keeps compact metrics legible when height is constrained", () => {
+    expect(getVisibleStatLimit(100, 80, 5, true)).toBe(1);
+    expect(getVisibleStatLimit(180, 50, 5, true)).toBe(3);
+  });
+
+  test("preserves every configured metric outside compact mode", () => {
+    expect(getVisibleStatLimit(100, 80, 5, false)).toBe(5);
+  });
+});
+
 describe("getVisibleStats", () => {
   const navidromeStats: NavidromeDashboardData = {
     artistCount: 100,
@@ -91,3 +102,21 @@ describe("getVisibleStats", () => {
     expect(typeof result[0]?.value).toBe("string");
   });
 });
+
+describe("prioritizeVisibleStats", () => {
+  test("puts an active session first only on compact surfaces", () => {
+    const stats = getVisibleStats(
+      "audiobookshelf",
+      { showLibraryCount: true, showActiveSessions: true },
+      {
+        libraryCount: 3,
+        totalAudiobooks: 150,
+        totalPodcasts: 20,
+        totalListeningTimeSeconds: 86400,
+        activeSessions: 2,
+      },
+    );
+    expect(prioritizeVisibleStats(stats, true)[0]?.statKey).toBe("activeSessions");
+    expect(prioritizeVisibleStats(stats, false)[0]?.statKey).toBe("libraryCount");
+  });
+});
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 1290408ab..fe78ea689 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -41,6 +41,7 @@ export default function AudioStatsWidget({
       stats={response.data}
       options={{ ...options, compactMode: displayMode === "compact" && (options.compactMode || height < 160) }}
       width={width}
+      height={height}
     />
   );
   if (displayMode === "compact") return summary;
diff --git a/packages/widgets/src/audio-stats/shared.ts b/packages/widgets/src/audio-stats/shared.ts
index d4b79c72c..15e6b8a12 100644
--- a/packages/widgets/src/audio-stats/shared.ts
+++ b/packages/widgets/src/audio-stats/shared.ts
@@ -155,6 +155,23 @@ export const getGridCols = (width: number, visibleCount: number, compact: boolea
   return Math.min(maxCols, Math.max(visibleCount, 1));
 };
 
+export const getVisibleStatLimit = (width: number, height: number, visibleCount: number, compact: boolean): number => {
+  if (!compact) return visibleCount;
+
+  const columns = getGridCols(width, visibleCount, true);
+  const rows = Math.max(1, Math.floor(Math.max(0, height - 8) / 44));
+  return Math.min(visibleCount, columns * rows);
+};
+
+export const prioritizeVisibleStats = (stats: VisibleStat[], compact: boolean): VisibleStat[] => {
+  if (!compact) return stats;
+  return stats.toSorted(
+    (left, right) =>
+      Number(right.statKey === "activeSessions" && Number(right.value) > 0) -
+      Number(left.statKey === "activeSessions" && Number(left.value) > 0),
+  );
+};
+
 const fallbackIconSize = { true: 14, false: 16 } as const;
 
 export const getIconSize = (width: number, compact: boolean): number => {
diff --git a/packages/widgets/src/bazarr/component.tsx b/packages/widgets/src/bazarr/component.tsx
index 5e4d32ffd..3538ecc2f 100644
--- a/packages/widgets/src/bazarr/component.tsx
+++ b/packages/widgets/src/bazarr/component.tsx
@@ -89,7 +89,9 @@ export default function BazarrWidget({
             <div key={statKey} className={`${classes.statTile} ${isWarning ? classes.statTileWarning : ""}`}>
               <Icon className={classes.statIcon} size={iconSize} stroke={1.5} />
               <span className={`${classes.statValue} ${isWarning ? classes.statValueWarning : ""}`}>{value}</span>
-              <span className={classes.statLabel}>{t(statKey)}</span>
+              <span className={classes.statLabel} title={t(statKey)}>
+                {t(statKey)}
+              </span>
             </div>
           );
         })}
diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index bf0f79416..ae5d20769 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -1,7 +1,20 @@
 "use client";
 
 import { useMemo } from "react";
-import { Badge, Box, Center, Divider, Group, Loader, ScrollArea, Stack, Text, ThemeIcon } from "@mantine/core";
+import {
+  Badge,
+  Box,
+  Center,
+  Divider,
+  Group,
+  Loader,
+  ScrollArea,
+  Stack,
+  Text,
+  ThemeIcon,
+  Tooltip,
+  VisuallyHidden,
+} from "@mantine/core";
 import { IconBellOff, IconCircleCheck, IconFlame, IconHistory } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -71,6 +84,7 @@ export default function BeszelAlertsWidget({
   const okAlerts = alerts.filter((a) => !a.triggered);
   const showOkAlerts = displayMode === "advanced" || triggeredAlerts.length === 0 || height >= 260;
   const showHistory = options.showHistory && (displayMode === "advanced" || height >= 360);
+  const showAlertDescriptions = displayMode === "advanced" || height >= 190;
 
   if (alertsError) throw alertsError;
 
@@ -104,7 +118,7 @@ export default function BeszelAlertsWidget({
             <Stack gap={6}>
               <Group gap={6}>
                 <IconFlame size={14} color="var(--mantine-color-red-6)" />
-                <Text size="xs" fw={600} tt="uppercase" c="red">
+                <Text size="xs" fw={600} c="red">
                   {t("status.triggered")} ({triggeredAlerts.length})
                 </Text>
               </Group>
@@ -116,6 +130,7 @@ export default function BeszelAlertsWidget({
                   min={alert.min}
                   systemName={systemNameMap[alert.system] ?? alert.system}
                   triggered
+                  showDescription={showAlertDescriptions}
                 />
               ))}
             </Stack>
@@ -127,7 +142,7 @@ export default function BeszelAlertsWidget({
             <Stack gap={6}>
               <Group gap={6}>
                 <IconCircleCheck size={14} color="var(--mantine-color-green-6)" />
-                <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+                <Text size="xs" fw={600} c="dimmed">
                   {t("status.ok")} ({okAlerts.length})
                 </Text>
               </Group>
@@ -139,6 +154,7 @@ export default function BeszelAlertsWidget({
                   min={alert.min}
                   systemName={systemNameMap[alert.system] ?? alert.system}
                   triggered={false}
+                  showDescription={showAlertDescriptions}
                 />
               ))}
             </Stack>
@@ -150,7 +166,7 @@ export default function BeszelAlertsWidget({
               <Stack gap={6}>
                 <Group gap={6}>
                   <IconHistory size={14} opacity={0.5} />
-                  <Text size="xs" fw={600} tt="uppercase" c="dimmed">
+                  <Text size="xs" fw={600} c="dimmed">
                     {t("history")}
                   </Text>
                 </Group>
@@ -203,6 +219,7 @@ interface AlertRowProps {
   min: number;
   systemName: string;
   triggered: boolean;
+  showDescription: boolean;
 }
 
 const unitSuffixMap: Record<string, string> = {
@@ -226,38 +243,43 @@ function formatAlertDescription(name: string, value: number, min: number): strin
   return `exceeds ${value}${suffix} over ${min} min`;
 }
 
-function AlertRow({ name, value, min, systemName, triggered }: AlertRowProps) {
+function AlertRow({ name, value, min, systemName, triggered, showDescription }: AlertRowProps) {
   const Icon = alertIconMap[name] ?? Server;
+  const description = formatAlertDescription(name, value, min);
   return (
-    <Group
-      wrap="nowrap"
-      gap="xs"
-      py={4}
-      pr={8}
-      pl={12}
-      style={{
-        borderRadius: "var(--mantine-radius-sm)",
-        borderLeft: `3px solid var(--mantine-color-${triggered ? "red" : "green"}-6)`,
-        backgroundColor: triggered ? "var(--mantine-color-red-light)" : "var(--mantine-color-default-hover)",
-      }}
-    >
-      <Icon size={14} opacity={0.7} style={{ flexShrink: 0 }} />
-      <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
-        <Group gap={6} wrap="nowrap">
-          <Text size="xs" fw={600} truncate>
-            {systemName}
-          </Text>
-          <Text size="xs" c="dimmed">
-            ·
-          </Text>
-          <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
-            {name}
-          </Text>
-        </Group>
-        <Text size="xs" c="dimmed" truncate>
-          {formatAlertDescription(name, value, min)}
-        </Text>
-      </Stack>
-    </Group>
+    <Tooltip label={description} disabled={showDescription} withArrow>
+      <Group
+        wrap="nowrap"
+        gap="xs"
+        py={showDescription ? 4 : 2}
+        px={8}
+        style={{
+          borderRadius: "var(--mantine-radius-sm)",
+          border: `1px solid var(--mantine-color-${triggered ? "red" : "gray"}-4)`,
+          backgroundColor: triggered ? "var(--mantine-color-red-light)" : "var(--mantine-color-default-hover)",
+        }}
+      >
+        <Icon size={14} opacity={0.7} style={{ flexShrink: 0 }} />
+        <Stack gap={0} style={{ flex: 1, minWidth: 0 }}>
+          <Group gap={6} wrap="nowrap">
+            <Text size="xs" fw={600} truncate>
+              {systemName}
+            </Text>
+            <Text size="xs" c="dimmed">
+              ·
+            </Text>
+            <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap" }}>
+              {name}
+            </Text>
+          </Group>
+          {showDescription && (
+            <Text size="xs" c="dimmed" truncate>
+              {description}
+            </Text>
+          )}
+          {!showDescription && <VisuallyHidden>{description}</VisuallyHidden>}
+        </Stack>
+      </Group>
+    </Tooltip>
   );
 }
diff --git a/packages/widgets/src/beszel-system-grid/component.module.css b/packages/widgets/src/beszel-system-grid/component.module.css
index f70cde0e9..94c951dca 100644
--- a/packages/widgets/src/beszel-system-grid/component.module.css
+++ b/packages/widgets/src/beszel-system-grid/component.module.css
@@ -1,7 +1,20 @@
 .clickableCard {
   transition: background-color 150ms;
+  cursor: pointer;
 }
 
-.clickableCard:hover {
+.clickableCard:hover,
+.clickableCard:focus-visible {
   background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
 }
+
+.clickableCard:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: -2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .clickableCard {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index ff26240b4..d7fcbb21c 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -336,6 +336,9 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
 
   return (
     <Card
+      component="button"
+      type="button"
+      disabled={!onClick}
       padding={size.cardPadding}
       radius={itemRadius}
       bg="transparent"
@@ -347,7 +350,10 @@ const SystemCard = ({ system, options, t, size, maxMetrics, itemRadius, onClick
         display: "flex",
         flexDirection: "column" as const,
         border: "0.0625rem solid var(--border-color)",
-        cursor: onClick ? "pointer" : undefined,
+        color: "inherit",
+        font: "inherit",
+        textAlign: "left",
+        width: "100%",
       }}
     >
       <Group gap="xs" mb={2}>
diff --git a/packages/widgets/src/beszel-system-stats/component.module.css b/packages/widgets/src/beszel-system-stats/component.module.css
index 7750108f9..9d8b2087b 100644
--- a/packages/widgets/src/beszel-system-stats/component.module.css
+++ b/packages/widgets/src/beszel-system-stats/component.module.css
@@ -8,7 +8,21 @@
   pointer-events: none;
 }
 
-.beszelStatsContainer:hover .beszelStatsSystemToggle {
+.beszelStatsContainer:hover .beszelStatsSystemToggle,
+.beszelStatsContainer:focus-within .beszelStatsSystemToggle {
   opacity: 1;
   pointer-events: auto;
 }
+
+@media (hover: none) {
+  .beszelStatsSystemToggle {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .beszelStatsSystemToggle {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index b43ea1765..0571aafeb 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -3,6 +3,7 @@
 import type { CSSProperties } from "react";
 import { createPortal } from "react-dom";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { getDefaultZIndex } from "@mantine/core";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 
@@ -56,6 +57,7 @@ interface PortalTooltipProps {
 }
 
 const MARGIN = 14;
+const TOOLTIP_Z_INDEX = getDefaultZIndex("modal");
 
 const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }: PortalTooltipProps) => {
   const mouseRef = useRef({ x: 0, y: 0 });
@@ -120,7 +122,7 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
     position: "fixed",
     left: pos.x,
     top: pos.y,
-    zIndex: 10000,
+    zIndex: TOOLTIP_Z_INDEX,
     pointerEvents: "none",
   };
 
diff --git a/packages/widgets/src/bookmarks/bookmark.module.css b/packages/widgets/src/bookmarks/bookmark.module.css
index c37b78242..807b90e48 100644
--- a/packages/widgets/src/bookmarks/bookmark.module.css
+++ b/packages/widgets/src/bookmarks/bookmark.module.css
@@ -2,6 +2,12 @@
   background-color: var(--mantine-color-primaryColor-light-hover);
 }
 
+.bookmarkButton:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+  border-radius: var(--mantine-radius-sm);
+}
+
 [data-mantine-color-scheme="light"] .card-grid {
   background-color: var(--mantine-color-gray-1);
 }
@@ -13,3 +19,7 @@
 .card:hover > div > div.bookmarkIcon {
   background-color: var(--mantine-color-iconColor-filled-hover);
 }
+
+.bookmarkButton:focus-visible .bookmarkIcon {
+  background-color: var(--mantine-color-iconColor-filled-hover);
+}
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index 875394ea8..87cda56b4 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -1,6 +1,18 @@
 "use client";
 
-import { Anchor, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import {
+  Anchor,
+  Box,
+  Card,
+  Flex,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  UnstyledButton,
+} from "@mantine/core";
 import combineClasses from "clsx";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -12,7 +24,45 @@ import { MaskedOrNormalImage } from "@homarr/ui";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./bookmark.module.css";
 
-export default function BookmarksWidget({ options, itemId, width, displayMode }: WidgetComponentProps<"bookmarks">) {
+type BookmarkLayout = WidgetComponentProps<"bookmarks">["options"]["layout"];
+
+export interface CompactBookmarkLayout {
+  columns: number;
+  hideHostname: boolean;
+  hideTitle: boolean;
+  minimumItemSize: number;
+}
+
+export function getCompactBookmarkLayout(
+  width: number,
+  height: number,
+  itemCount: number,
+  layout: BookmarkLayout,
+): CompactBookmarkLayout {
+  const count = Math.max(1, itemCount);
+  const isGrid = layout === "grid" || layout === "gridHorizontal";
+  const targetWidth = layout === "gridHorizontal" ? 180 : 104;
+  const columns = isGrid ? Math.max(1, Math.min(count, Math.floor(width / targetWidth))) : layout === "row" ? count : 1;
+  const rows = Math.max(1, Math.ceil(count / columns));
+  const cellWidth = width / columns;
+  const cellHeight = height / rows;
+  const usesHorizontalItems = layout === "column" || layout === "gridHorizontal";
+
+  return {
+    columns,
+    hideHostname: cellWidth < 120 || cellHeight < (usesHorizontalItems ? 52 : 96),
+    hideTitle: cellWidth < 64 || cellHeight < 40,
+    minimumItemSize: usesHorizontalItems ? 48 : 96,
+  };
+}
+
+export default function BookmarksWidget({
+  options,
+  itemId,
+  width,
+  height,
+  displayMode,
+}: WidgetComponentProps<"bookmarks">) {
   const board = useRequiredBoard();
   const { data = [] } = clientApi.app.byIds.useQuery(options.items, {
     select(apps) {
@@ -41,10 +91,15 @@ export default function BookmarksWidget({ options, itemId, width, displayMode }:
     [data],
   );
 
+  const compactLayout = getCompactBookmarkLayout(width, height, data.length, options.layout);
+  const compactHideTitle = options.hideTitle || (compactLayout.hideTitle && !options.hideIcon);
+  const compactHideHostname =
+    options.hideHostname || (compactLayout.hideHostname && !(options.hideTitle && options.hideIcon));
+
   return (
-    <Stack h="100%" gap="sm" p="sm">
+    <Stack h="100%" mih={0} gap="sm" p={height < 120 ? "xs" : "sm"}>
       {options.title.length > 0 && (
-        <Title order={4} px="0.25rem">
+        <Title order={4} px="0.25rem" lineClamp={1}>
           {options.title}
         </Title>
       )}
@@ -57,29 +112,37 @@ export default function BookmarksWidget({ options, itemId, width, displayMode }:
           hasIconColor={board.iconColor !== null}
         />
       )}
-      {displayMode !== "advanced" && (options.layout === "grid" || options.layout === "gridHorizontal") && (
-        <GridLayout
-          data={data}
-          itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
-          hideTitle={options.hideTitle}
-          hideIcon={options.hideIcon}
-          hideHostname={options.hideHostname}
-          openNewTab={options.openNewTab}
-          withBorder={options.withBorder}
-          hasIconColor={board.iconColor !== null}
-        />
-      )}
-      {displayMode !== "advanced" && options.layout !== "grid" && options.layout !== "gridHorizontal" && (
-        <FlexLayout
-          data={data}
-          direction={options.layout}
-          hideTitle={options.hideTitle}
-          hideIcon={options.hideIcon}
-          hideHostname={options.hideHostname}
-          openNewTab={options.openNewTab}
-          withBorder={options.withBorder}
-          hasIconColor={board.iconColor !== null}
-        />
+      {displayMode !== "advanced" && (
+        <ScrollArea type="auto" scrollbarSize={6} offsetScrollbars style={{ flex: 1, minHeight: 0 }}>
+          <Box mih="100%">
+            {options.layout === "grid" || options.layout === "gridHorizontal" ? (
+              <GridLayout
+                data={data}
+                columns={compactLayout.columns}
+                minimumItemHeight={compactLayout.minimumItemSize}
+                itemDirection={options.layout === "gridHorizontal" ? "horizontal" : "vertical"}
+                hideTitle={compactHideTitle}
+                hideIcon={options.hideIcon}
+                hideHostname={compactHideHostname}
+                openNewTab={options.openNewTab}
+                withBorder={options.withBorder}
+                hasIconColor={board.iconColor !== null}
+              />
+            ) : (
+              <FlexLayout
+                data={data}
+                direction={options.layout}
+                minimumItemSize={compactLayout.minimumItemSize}
+                hideTitle={compactHideTitle}
+                hideIcon={options.hideIcon}
+                hideHostname={compactHideHostname}
+                openNewTab={options.openNewTab}
+                withBorder={options.withBorder}
+                hasIconColor={board.iconColor !== null}
+              />
+            )}
+          </Box>
+        </ScrollArea>
       )}
     </Stack>
   );
@@ -94,6 +157,7 @@ interface FlexLayoutProps {
   openNewTab: boolean;
   withBorder: boolean;
   hasIconColor: boolean;
+  minimumItemSize: number;
 }
 
 const FlexLayout = ({
@@ -105,13 +169,15 @@ const FlexLayout = ({
   openNewTab,
   withBorder,
   hasIconColor,
+  minimumItemSize,
 }: FlexLayoutProps) => {
   const board = useRequiredBoard();
   return (
-    <Flex direction={direction} gap="0" w="100%">
+    <Flex direction={direction} gap={4} w="100%" mih="100%" wrap="nowrap">
       {data.map((app) => (
-        <div key={app.id} style={{ display: "flex", flex: "1", flexDirection: direction }}>
+        <div key={app.id} style={{ display: "flex", flex: `1 0 ${minimumItemSize}px`, flexDirection: direction }}>
           <UnstyledButton
+            className={classes.bookmarkButton}
             component="a"
             href={app.href ?? undefined}
             target={openNewTab ? "_blank" : "_self"}
@@ -188,6 +254,7 @@ const AdvancedBookmarksLayout = ({
         {data.map((app) => (
           <UnstyledButton
             key={app.id}
+            className={classes.bookmarkButton}
             component="a"
             href={app.href ?? undefined}
             target={openNewTab ? "_blank" : "_self"}
@@ -233,6 +300,8 @@ interface GridLayoutProps {
   withBorder: boolean;
   itemDirection: "horizontal" | "vertical";
   hasIconColor: boolean;
+  columns: number;
+  minimumItemHeight: number;
 }
 
 const GridLayout = ({
@@ -244,19 +313,29 @@ const GridLayout = ({
   withBorder,
   itemDirection,
   hasIconColor,
+  columns,
+  minimumItemHeight,
 }: GridLayoutProps) => {
   const board = useRequiredBoard();
 
   return (
-    <Flex miw="100%" gap={4} wrap="wrap" style={{ flex: 1 }}>
+    <SimpleGrid
+      cols={columns}
+      spacing={4}
+      verticalSpacing={4}
+      miw="100%"
+      mih="100%"
+      style={{ gridAutoRows: `minmax(${minimumItemHeight}px, 1fr)` }}
+    >
       {data.map((app) => (
         <UnstyledButton
+          className={classes.bookmarkButton}
           component="a"
           href={app.href ?? undefined}
           target={openNewTab ? "_blank" : "_self"}
           rel="noopener noreferrer"
           key={app.id}
-          flex="1"
+          h="100%"
         >
           <Card
             h="100%"
@@ -285,7 +364,7 @@ const GridLayout = ({
           </Card>
         </UnstyledButton>
       ))}
-    </Flex>
+    </SimpleGrid>
   );
 };
 
@@ -305,7 +384,7 @@ const VerticalItem = ({
   return (
     <Stack h="100%" miw={16} gap="sm" justify={"center"}>
       {!hideTitle && (
-        <Text fw={700} ta="center" size="xs">
+        <Text fw={700} ta="center" size="xs" lineClamp={2}>
           {app.name}
         </Text>
       )}
@@ -326,7 +405,7 @@ const VerticalItem = ({
         />
       )}
       {!hideHostname && (
-        <Anchor ta="center" component="span" size="xs">
+        <Anchor ta="center" component="span" size="xs" truncate="end" w="100%">
           {getBookmarkHostname(app.href)}
         </Anchor>
       )}
@@ -365,7 +444,7 @@ const HorizontalItem = ({
       )}
       {!(hideTitle && hideHostname) && (
         <>
-          <Stack justify="space-between" gap={0}>
+          <Stack justify="space-between" gap={0} miw={0} style={{ flex: 1 }}>
             {!hideTitle && (
               <Text fw={700} size="xs" lineClamp={hideHostname ? 2 : 1}>
                 {app.name}
@@ -373,7 +452,7 @@ const HorizontalItem = ({
             )}
 
             {!hideHostname && (
-              <Anchor component="span" size="xs">
+              <Anchor component="span" size="xs" truncate="end">
                 {getBookmarkHostname(app.href)}
               </Anchor>
             )}
diff --git a/packages/widgets/src/bookmarks/layout.spec.ts b/packages/widgets/src/bookmarks/layout.spec.ts
index adb35a554..8e98c3e56 100644
--- a/packages/widgets/src/bookmarks/layout.spec.ts
+++ b/packages/widgets/src/bookmarks/layout.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { getAdvancedBookmarkColumns, getBookmarkHostname } from "./component";
+import { getAdvancedBookmarkColumns, getBookmarkHostname, getCompactBookmarkLayout } from "./component";
 
 describe("bookmark display helpers", () => {
   test("uses bounded advanced columns", () => {
@@ -9,6 +9,22 @@ describe("bookmark display helpers", () => {
     expect(getAdvancedBookmarkColumns(900, 0)).toBe(1);
   });
 
+  test("uses container geometry to keep compact cards legible", () => {
+    expect(getCompactBookmarkLayout(420, 220, 4, "gridHorizontal")).toMatchObject({
+      columns: 2,
+      hideHostname: false,
+      hideTitle: false,
+      minimumItemSize: 48,
+    });
+
+    expect(getCompactBookmarkLayout(180, 80, 4, "row")).toMatchObject({
+      columns: 4,
+      hideHostname: true,
+      hideTitle: true,
+      minimumItemSize: 96,
+    });
+  });
+
   test("does not crash on malformed bookmark URLs", () => {
     expect(getBookmarkHostname("https://homarr.dev/docs")).toBe("homarr.dev");
     expect(getBookmarkHostname("not a URL")).toBe("not a URL");
diff --git a/packages/widgets/src/calendar/calendar-event-list.tsx b/packages/widgets/src/calendar/calendar-event-list.tsx
index 3fadb5a98..14270322b 100644
--- a/packages/widgets/src/calendar/calendar-event-list.tsx
+++ b/packages/widgets/src/calendar/calendar-event-list.tsx
@@ -24,11 +24,17 @@ import classes from "./calendar-event-list.module.css";
 
 interface CalendarEventListProps {
   events: CalendarEvent[];
+  fillHeight?: boolean;
   groupByDate?: boolean;
   locale?: string;
 }
 
-export const CalendarEventList = ({ events, groupByDate = false, locale }: CalendarEventListProps) => {
+export const CalendarEventList = ({
+  events,
+  fillHeight = false,
+  groupByDate = false,
+  locale,
+}: CalendarEventListProps) => {
   const headingIdPrefix = useId();
   const dateFormatter = new Intl.DateTimeFormat(locale, {
     weekday: "long",
@@ -43,9 +49,10 @@ export const CalendarEventList = ({ events, groupByDate = false, locale }: Calen
       offsetScrollbars
       pt={5}
       w="100%"
+      h={fillHeight ? "100%" : undefined}
       styles={{
         viewport: {
-          maxHeight: 450,
+          maxHeight: fillHeight ? undefined : 450,
         },
       }}
     >
@@ -100,9 +107,9 @@ const CalendarEventRows = ({ events }: Pick<CalendarEventListProps, "events">) =
               )}
             </Box>
           )}
-          <Stack style={{ flexGrow: 1 }} gap={0}>
-            <Group justify="space-between" align="start" mb="xs" wrap="nowrap">
-              <Stack gap={0}>
+          <Stack style={{ flexGrow: 1, minWidth: 0 }} gap={0}>
+            <Group justify="space-between" align="start" mb="xs" wrap="wrap">
+              <Stack gap={0} style={{ flex: "1 1 12rem", minWidth: 0 }}>
                 {event.subTitle !== null && (
                   <Text lineClamp={1} size="sm">
                     {event.subTitle}
@@ -120,7 +127,7 @@ const CalendarEventRows = ({ events }: Pick<CalendarEventListProps, "events">) =
                 </Group>
               )}
 
-              <Group gap={3} wrap="nowrap" align={"center"}>
+              <Group gap={3} wrap="nowrap" align={"center"} ml="auto">
                 <IconClock opacity={0.7} size={"1rem"} />
                 {isAllDay(event) ? (
                   <Text c={"dimmed"} size={"sm"}>
diff --git a/packages/widgets/src/calendar/calendar-events.ts b/packages/widgets/src/calendar/calendar-events.ts
index 0b15e0098..19ddd3bd5 100644
--- a/packages/widgets/src/calendar/calendar-events.ts
+++ b/packages/widgets/src/calendar/calendar-events.ts
@@ -4,6 +4,9 @@ import type { CalendarEvent } from "@homarr/integrations/types";
 
 export const toCalendarDateKey = (date: Date) => dayjs(date).format("YYYY-MM-DD");
 
+export const moveCalendarMonth = (month: Date, amount: number): Date =>
+  dayjs(month).startOf("month").add(amount, "month").toDate();
+
 const matchesReleaseType = (event: CalendarEvent, releaseTypes: readonly string[]) =>
   event.metadata?.type !== "radarr" || releaseTypes.includes(event.metadata.releaseType);
 
diff --git a/packages/widgets/src/calendar/calendar.spec.ts b/packages/widgets/src/calendar/calendar.spec.ts
index 84ba92b86..d42d6f151 100644
--- a/packages/widgets/src/calendar/calendar.spec.ts
+++ b/packages/widgets/src/calendar/calendar.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
 
 import type { CalendarEvent } from "@homarr/integrations/types";
 
-import { getCalendarAgendaEvents, groupEventsByDate, splitEvents } from "./calendar-events";
+import { getCalendarAgendaEvents, groupEventsByDate, moveCalendarMonth, splitEvents } from "./calendar-events";
 
 describe("splitEvents should split multi-day events into multiple single-day events", () => {
   test("2 day all-day event should be split up into two all-day events", () => {
@@ -92,6 +92,13 @@ describe("getCalendarAgendaEvents", () => {
   });
 });
 
+describe("moveCalendarMonth", () => {
+  test("uses the first day so short months do not skip", () => {
+    expect(moveCalendarMonth(new Date(2025, 0, 31), 1)).toEqual(new Date(2025, 1, 1));
+    expect(moveCalendarMonth(new Date(2025, 2, 31), -1)).toEqual(new Date(2025, 1, 1));
+  });
+});
+
 const createEvent = (startDate: Date, endDate: Date | null = null): CalendarEvent => ({
   title: "Test",
   subTitle: null,
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index cef9b9458..c4cee758a 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -2,9 +2,10 @@
 
 import { useMemo, useState } from "react";
 import { useParams } from "next/navigation";
-import { Box, Group, Stack, Text, useMantineTheme } from "@mantine/core";
+import { ActionIcon, Box, Group, Stack, Text, Tooltip, useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
 import { useElementSize } from "@mantine/hooks";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { getQueryKey } from "@trpc/react-query";
 import dayjs from "dayjs";
 
@@ -12,12 +13,19 @@ import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { setWidgetRuntimeQueries } from "../definition";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { CalendarDay } from "./calender-day";
-import { getCalendarAgendaEvents, groupEventsByDate, splitEvents, toCalendarDateKey } from "./calendar-events";
+import {
+  getCalendarAgendaEvents,
+  groupEventsByDate,
+  moveCalendarMonth,
+  splitEvents,
+  toCalendarDateKey,
+} from "./calendar-events";
 import { CalendarEventList } from "./calendar-event-list";
 import classes from "./component.module.css";
 
@@ -102,9 +110,11 @@ const CalendarBase = ({
   const actualItemRadius = mantineTheme.radius[board.itemRadius];
   const { ref, width, height } = useElementSize();
   const isSmall = width < 256;
-  const calendarHeight = displayMode === "advanced" ? height * 0.62 : height;
 
-  const normalizedEvents = useMemo(() => splitEvents(events), [events]);
+  const normalizedEvents = useMemo(
+    () => (displayMode === "advanced" ? [] : splitEvents(events)),
+    [displayMode, events],
+  );
   const visibleEvents = useMemo(
     () =>
       normalizedEvents.filter(
@@ -114,10 +124,23 @@ const CalendarBase = ({
   );
   const eventsByDate = useMemo(() => groupEventsByDate(visibleEvents), [visibleEvents]);
   const agendaEvents = useMemo(
-    () => getCalendarAgendaEvents(events, month, options.releaseType),
-    [events, month, options.releaseType],
+    () => (displayMode === "advanced" ? getCalendarAgendaEvents(events, month, options.releaseType) : []),
+    [displayMode, events, month, options.releaseType],
   );
 
+  if (displayMode === "advanced") {
+    return (
+      <CalendarAgenda
+        events={agendaEvents}
+        failedIntegrations={failedIntegrations}
+        isEditMode={isEditMode}
+        locale={locale}
+        month={month}
+        setMonth={setMonth}
+      />
+    );
+  }
+
   return (
     <Stack ref={ref} h="100%" w="100%" gap="xs" style={{ overflow: "hidden" }}>
       {failedIntegrations.length > 0 && (
@@ -138,7 +161,7 @@ const CalendarBase = ({
         static={isEditMode}
         className={classes.calendar}
         w="100%"
-        h={displayMode === "advanced" ? "62%" : "100%"}
+        h="100%"
         styles={{
           calendarHeaderControl: {
             pointerEvents: isEditMode ? "none" : undefined,
@@ -192,19 +215,77 @@ const CalendarBase = ({
               events={eventsForDate}
               disabled={isEditMode || eventsForDate.length === 0}
               rootWidth={width}
-              rootHeight={calendarHeight}
+              rootHeight={height}
             />
           );
         }}
       />
-      {displayMode === "advanced" && (
-        <Box px="md" pb="sm" style={{ flex: 1, minHeight: 0 }}>
-          <Text size="sm" fw={600} mb={4}>
-            {new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month)} · {agendaEvents.length}
-          </Text>
-          <CalendarEventList events={agendaEvents} groupByDate locale={locale} />
-        </Box>
-      )}
+    </Stack>
+  );
+};
+
+interface CalendarAgendaProps {
+  events: CalendarEvent[];
+  failedIntegrations: CalendarBaseProps["failedIntegrations"];
+  isEditMode: boolean;
+  locale: string;
+  month: Date;
+  setMonth: (date: Date) => void;
+}
+
+const CalendarAgenda = ({ events, failedIntegrations, isEditMode, locale, month, setMonth }: CalendarAgendaProps) => {
+  const t = useScopedI18n("widget.calendar.advanced");
+  const monthLabel = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month);
+
+  return (
+    <Stack h="100%" w="100%" gap="sm" p="md" style={{ overflow: "hidden" }}>
+      <Group justify="space-between" align="center" wrap="nowrap">
+        <Group gap="xs" wrap="nowrap">
+          <Tooltip label={t("previousMonth")} events={{ hover: true, focus: true, touch: false }}>
+            <ActionIcon
+              variant="subtle"
+              size="lg"
+              aria-label={t("previousMonth")}
+              disabled={isEditMode}
+              onClick={() => setMonth(moveCalendarMonth(month, -1))}
+            >
+              <IconChevronLeft size={18} aria-hidden />
+            </ActionIcon>
+          </Tooltip>
+          <Stack gap={0} miw={0}>
+            <Text component="h3" size="sm" fw={600} tt="capitalize" lineClamp={1}>
+              {monthLabel}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {t("eventCount", { count: events.length })}
+            </Text>
+          </Stack>
+          <Tooltip label={t("nextMonth")} events={{ hover: true, focus: true, touch: false }}>
+            <ActionIcon
+              variant="subtle"
+              size="lg"
+              aria-label={t("nextMonth")}
+              disabled={isEditMode}
+              onClick={() => setMonth(moveCalendarMonth(month, 1))}
+            >
+              <IconChevronRight size={18} aria-hidden />
+            </ActionIcon>
+          </Tooltip>
+        </Group>
+        {failedIntegrations.length > 0 && <IntegrationErrorIndicator results={failedIntegrations} />}
+      </Group>
+
+      <Box style={{ flex: 1, minHeight: 0 }}>
+        {events.length > 0 ? (
+          <CalendarEventList events={events} groupByDate locale={locale} fillHeight />
+        ) : (
+          <Stack h="100%" align="center" justify="center" p="md">
+            <Text c="dimmed" size="sm" ta="center">
+              {t("noEvents")}
+            </Text>
+          </Stack>
+        )}
+      </Box>
     </Stack>
   );
 };
diff --git a/packages/widgets/src/coolify/component.tsx b/packages/widgets/src/coolify/component.tsx
index 0e0a5c801..6d3f84828 100644
--- a/packages/widgets/src/coolify/component.tsx
+++ b/packages/widgets/src/coolify/component.tsx
@@ -14,6 +14,7 @@ export default function CoolifyWidget({
   options,
   integrationIds,
   width,
+  height,
   displayMode,
 }: WidgetComponentProps<"coolify">) {
   const t = useScopedI18n("widget.coolify");
@@ -31,6 +32,7 @@ export default function CoolifyWidget({
       integrationIds={integrationIds}
       options={options}
       width={width}
+      height={height}
       isAdvanced={displayMode === "advanced"}
     />
   );
@@ -40,16 +42,31 @@ interface CoolifyContentProps {
   integrationIds: string[];
   options: WidgetComponentProps<"coolify">["options"];
   width: number;
+  height: number;
   isAdvanced: boolean;
 }
 
-function CoolifyContent({ integrationIds, options, width, isAdvanced }: CoolifyContentProps) {
-  const { data: instancesData = [] } = clientApi.widget.coolify.getInstancesInfo.useQuery({ integrationIds });
+function CoolifyContent({ integrationIds, options, width, height, isAdvanced }: CoolifyContentProps) {
+  const t = useScopedI18n("common");
+  const { data: instancesData = [], isPending } = clientApi.widget.coolify.getInstancesInfo.useQuery({
+    integrationIds,
+  });
 
-  const isTiny = !isAdvanced && width < 256;
+  const isTiny = !isAdvanced && (width < 256 || height < 144);
+  const hideFooter = !isAdvanced && height < 112;
   const [firstInstance] = instancesData;
   const widgetKey = createWidgetKey(integrationIds);
 
+  if (isPending) {
+    return (
+      <Stack align="center" justify="center" h="100%">
+        <Text c="dimmed" size="sm">
+          {t("action.loading")}
+        </Text>
+      </Stack>
+    );
+  }
+
   if (instancesData.length === 1 && firstInstance) {
     return (
       <SingleInstanceLayout
@@ -58,6 +75,7 @@ function CoolifyContent({ integrationIds, options, width, isAdvanced }: CoolifyC
         isTiny={isTiny}
         widgetKey={widgetKey}
         isAdvanced={isAdvanced}
+        hideFooter={hideFooter}
       />
     );
   }
@@ -73,6 +91,7 @@ function CoolifyContent({ integrationIds, options, width, isAdvanced }: CoolifyC
             isTiny={isTiny}
             widgetKey={widgetKey}
             isAdvanced={isAdvanced}
+            hideFooter={hideFooter}
           />
         ))}
       </SimpleGrid>
diff --git a/packages/widgets/src/coolify/instance-card.tsx b/packages/widgets/src/coolify/instance-card.tsx
index 1cb51de41..4cec5c1f8 100644
--- a/packages/widgets/src/coolify/instance-card.tsx
+++ b/packages/widgets/src/coolify/instance-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Accordion, Anchor, Badge, Card, Group, Image, Text } from "@mantine/core";
+import { Accordion, Anchor, Badge, Card, Group, Image, Text, Tooltip } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 
 import { useTimeAgo } from "@homarr/common";
@@ -20,10 +20,12 @@ interface InstanceCardProps {
   isTiny: boolean;
   widgetKey: string;
   isAdvanced: boolean;
+  hideFooter: boolean;
 }
 
-export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced, hideFooter }: InstanceCardProps) {
   const t = useScopedI18n("widget.coolify");
+  const tCommon = useScopedI18n("common");
   const cardKey = `${widgetKey}-${instance.integrationId}`;
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${cardKey}`,
@@ -51,6 +53,23 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced
   const runningServices = instance.instanceInfo.services.filter(
     (s) => parseStatus(s.status ?? "") === "running",
   ).length;
+  const healthyResources =
+    (options.showServers ? onlineServers : 0) +
+    (options.showApplications ? runningApps : 0) +
+    (options.showServices ? runningServices : 0);
+  const totalResources =
+    (options.showServers ? instance.instanceInfo.servers.length : 0) +
+    (options.showApplications ? instance.instanceInfo.applications.length : 0) +
+    (options.showServices ? instance.instanceInfo.services.length : 0);
+  const resourceSummary = [
+    options.showServers ? `${tCommon("servers")}: ${onlineServers}/${instance.instanceInfo.servers.length}` : null,
+    options.showApplications
+      ? `${tCommon("applications")}: ${runningApps}/${instance.instanceInfo.applications.length}`
+      : null,
+    options.showServices ? `${tCommon("services")}: ${runningServices}/${instance.instanceInfo.services.length}` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
 
   return (
     <Card p={0} radius="sm">
@@ -62,17 +81,32 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced
       >
         <Group gap={4} wrap="nowrap">
           <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
-          <Anchor href={baseUrl} target="_blank" fz={isTiny ? "10px" : "xs"} fw={600} c="inherit" lineClamp={1}>
+          <Anchor
+            href={baseUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            fz={isTiny ? "10px" : "xs"}
+            fw={600}
+            c="inherit"
+            lineClamp={1}
+          >
             {instance.integrationName}
           </Anchor>
         </Group>
         <Group gap={4} wrap="nowrap">
-          {options.showServers && (
+          {isTiny && totalResources > 0 ? (
+            <Tooltip label={resourceSummary}>
+              <Badge variant="dot" color={getBadgeColor(healthyResources, totalResources)} size="xs">
+                {healthyResources}/{totalResources}
+              </Badge>
+            </Tooltip>
+          ) : null}
+          {!isTiny && options.showServers && (
             <Badge variant="dot" color={getBadgeColor(onlineServers, instance.instanceInfo.servers.length)} size="xs">
               {onlineServers}/{instance.instanceInfo.servers.length}
             </Badge>
           )}
-          {options.showApplications && (
+          {!isTiny && options.showApplications && (
             <Badge
               variant="dot"
               color={getBadgeColor(runningApps, instance.instanceInfo.applications.length)}
@@ -81,7 +115,7 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced
               {runningApps}/{instance.instanceInfo.applications.length}
             </Badge>
           )}
-          {options.showServices && (
+          {!isTiny && options.showServices && (
             <Badge
               variant="dot"
               color={getBadgeColor(runningServices, instance.instanceInfo.services.length)}
@@ -118,14 +152,20 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced
         )}
       </Accordion>
 
-      <Group justify="space-between" p={4} style={{ borderTop: "1px solid var(--mantine-color-dark-4)" }}>
-        <Text size="10px" c="dimmed">
-          v{instance.instanceInfo.version}
-        </Text>
-        <Text size="10px" c="dimmed">
-          {t("footer.updated", { when: relativeTime })}
-        </Text>
-      </Group>
+      {!hideFooter && (
+        <Group
+          justify="space-between"
+          p={4}
+          style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
+        >
+          <Text size="10px" c="dimmed">
+            v{instance.instanceInfo.version}
+          </Text>
+          <Text size="10px" c="dimmed">
+            {t("footer.updated", { when: relativeTime })}
+          </Text>
+        </Group>
+      )}
     </Card>
   );
 }
diff --git a/packages/widgets/src/coolify/resource-row.tsx b/packages/widgets/src/coolify/resource-row.tsx
index 9f6cfe1ae..4aaa4b625 100644
--- a/packages/widgets/src/coolify/resource-row.tsx
+++ b/packages/widgets/src/coolify/resource-row.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ActionIcon, Anchor, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconExternalLink, IconFileText, IconLink } from "@tabler/icons-react";
+import { IconFileText, IconLink } from "@tabler/icons-react";
 
 import { cleanFqdn, getResourceTimestamp, getStatusColor, parseStatus } from "./coolify-utils";
 
@@ -39,7 +39,14 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
       <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
         <Indicator size={isTiny ? 4 : 8} color={statusColor} />
         {resourceUrl ? (
-          <Anchor href={resourceUrl} target="_blank" fz={isTiny ? "8px" : "xs"} c="inherit" lineClamp={1}>
+          <Anchor
+            href={resourceUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            fz={isTiny ? "8px" : "xs"}
+            c="inherit"
+            lineClamp={1}
+          >
             {item.name}
           </Anchor>
         ) : (
@@ -50,24 +57,39 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
       </Group>
       <Group wrap="nowrap" gap={4} ml={16}>
         {cleanFqdn(item.fqdn) && (
-          <ActionIcon component="a" href={cleanFqdn(item.fqdn)} target="_blank" size="xs" variant="subtle" c="dimmed">
+          <ActionIcon
+            component="a"
+            href={cleanFqdn(item.fqdn)}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Open ${item.name}`}
+            size="xs"
+            variant="subtle"
+            c="dimmed"
+          >
             <IconLink size={12} />
           </ActionIcon>
         )}
-        {resourceUrl && (
-          <ActionIcon component="a" href={resourceUrl} target="_blank" size="xs" variant="subtle" c="dimmed">
-            <IconExternalLink size={12} />
-          </ActionIcon>
-        )}
-        {logsUrl && (
-          <ActionIcon component="a" href={logsUrl} target="_blank" size="xs" variant="subtle" c="dimmed">
+        {!isTiny && logsUrl && (
+          <ActionIcon
+            component="a"
+            href={logsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Open ${item.name} logs`}
+            size="xs"
+            variant="subtle"
+            c="dimmed"
+          >
             <IconFileText size={12} />
           </ActionIcon>
         )}
-        <Text fz="10px" c="dimmed" lineClamp={1}>
-          {item.projectName ?? "-"} / {item.environmentName ?? "-"}
-        </Text>
-        {getResourceTimestamp(item, resourceType) && (
+        {!isTiny && (
+          <Text fz="10px" c="dimmed" lineClamp={1}>
+            {item.projectName ?? "-"} / {item.environmentName ?? "-"}
+          </Text>
+        )}
+        {!isTiny && getResourceTimestamp(item, resourceType) && (
           <Text fz="10px" c="dimmed" ml="auto">
             {getResourceTimestamp(item, resourceType)}
           </Text>
diff --git a/packages/widgets/src/coolify/servers-section.tsx b/packages/widgets/src/coolify/servers-section.tsx
index 543df1c67..55f2ad5c1 100644
--- a/packages/widgets/src/coolify/servers-section.tsx
+++ b/packages/widgets/src/coolify/servers-section.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Accordion, ActionIcon, Anchor, Badge, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconExternalLink, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
+import { IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
 
 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -40,6 +40,7 @@ export function ServersSection({
             </Badge>
           </Group>
           <ActionIcon
+            aria-label={`${showIp ? tCommon("action.hide") : tCommon("action.show")} IP`}
             size="xs"
             variant="subtle"
             c="dimmed"
@@ -96,7 +97,14 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
     <Stack gap={0}>
       <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
         <Indicator size={isTiny ? 4 : 8} color={isOnline ? "green" : "red"} />
-        <Anchor href={serverUrl} target="_blank" fz={isTiny ? "8px" : "xs"} c="inherit" lineClamp={1}>
+        <Anchor
+          href={serverUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          fz={isTiny ? "8px" : "xs"}
+          c="inherit"
+          lineClamp={1}
+        >
           {server.name}
         </Anchor>
         {isBuildServer ? (
@@ -110,9 +118,6 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
         )}
       </Group>
       <Group wrap="nowrap" gap={4} ml={16}>
-        <ActionIcon component="a" href={serverUrl} target="_blank" size="xs" variant="subtle" c="dimmed">
-          <IconExternalLink size={12} />
-        </ActionIcon>
         <Text fz="10px" c="dimmed">
           {showIp ? server.ip : "***.***.***.***"}
         </Text>
diff --git a/packages/widgets/src/coolify/single-instance-layout.tsx b/packages/widgets/src/coolify/single-instance-layout.tsx
index b2c315894..dda35b351 100644
--- a/packages/widgets/src/coolify/single-instance-layout.tsx
+++ b/packages/widgets/src/coolify/single-instance-layout.tsx
@@ -20,9 +20,17 @@ interface SingleInstanceLayoutProps {
   isTiny: boolean;
   widgetKey: string;
   isAdvanced: boolean;
+  hideFooter: boolean;
 }
 
-export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isAdvanced }: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({
+  instance,
+  options,
+  isTiny,
+  widgetKey,
+  isAdvanced,
+  hideFooter,
+}: SingleInstanceLayoutProps) {
   const t = useScopedI18n("widget.coolify");
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${widgetKey}`,
@@ -54,7 +62,15 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isA
               oolify
             </Text>
           </Group>
-          <Anchor href={baseUrl} target="_blank" fz={isTiny ? "xs" : "sm"} fw={500} c="dimmed" lineClamp={1}>
+          <Anchor
+            href={baseUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            fz={isTiny ? "xs" : "sm"}
+            fw={500}
+            c="dimmed"
+            lineClamp={1}
+          >
             {displayUrl}
           </Anchor>
         </Group>
@@ -84,21 +100,23 @@ export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, isA
           )}
         </Accordion>
 
-        <Group
-          justify="space-between"
-          p={4}
-          style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
-        >
-          <Group gap={2}>
-            <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
+        {!hideFooter && (
+          <Group
+            justify="space-between"
+            p={4}
+            style={{ borderTop: "1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))" }}
+          >
+            <Group gap={2}>
+              <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
+              <Text size="xs" c="dimmed">
+                v{instance.instanceInfo.version}
+              </Text>
+            </Group>
             <Text size="xs" c="dimmed">
-              v{instance.instanceInfo.version}
+              {t("footer.updated", { when: relativeTime })}
             </Text>
           </Group>
-          <Text size="xs" c="dimmed">
-            {t("footer.updated", { when: relativeTime })}
-          </Text>
-        </Group>
+        )}
       </Stack>
     </ScrollArea>
   );
diff --git a/packages/widgets/src/custom-api/component.tsx b/packages/widgets/src/custom-api/component.tsx
index 580cfb455..27b35ddbd 100644
--- a/packages/widgets/src/custom-api/component.tsx
+++ b/packages/widgets/src/custom-api/component.tsx
@@ -35,13 +35,21 @@ import type { WidgetComponentProps } from "../definition";
 
 const CustomJsxDisplay = dynamic(() => import("./custom-jsx-display"), { ssr: false });
 
-const valueSizeMap: Record<string, string> = { sm: "sm", md: "md", lg: "lg", xl: "xl" };
+const valueSizeMap: Record<string, "sm" | "md" | "lg" | "xl"> = { sm: "sm", md: "md", lg: "lg", xl: "xl" };
 
-function SingleValueDisplay({ data }: { data: Record<string, unknown> }) {
-  const size = valueSizeMap[(data.valueSize as string) ?? "lg"] ?? "lg";
+interface CustomDisplayProps {
+  data: Record<string, unknown>;
+  displayMode: "compact" | "advanced";
+  width: number;
+  height: number;
+}
+
+function SingleValueDisplay({ data, displayMode, width, height }: CustomDisplayProps) {
+  const configuredSize = valueSizeMap[(data.valueSize as string) ?? "lg"] ?? "lg";
+  const size = displayMode === "compact" && (width < 180 || height < 96) ? "md" : configuredSize;
   const labelAbove = (data.labelPosition as string) === "above";
   const label = data.label ? (
-    <Text c="dimmed" size="sm">
+    <Text c="dimmed" size={height < 96 ? "xs" : "sm"} ta="center" lineClamp={2}>
       {String(data.label)}
     </Text>
   ) : null;
@@ -49,7 +57,7 @@ function SingleValueDisplay({ data }: { data: Record<string, unknown> }) {
   return (
     <Stack h="100%" align="center" justify="center" gap="xs">
       {labelAbove && label}
-      <Title order={size === "xl" ? 1 : size === "lg" ? 2 : size === "md" ? 3 : 4}>
+      <Title order={size === "xl" ? 1 : size === "lg" ? 2 : size === "md" ? 3 : 4} ta="center" lineClamp={2} maw="100%">
         {String(data.value ?? "—")}
         {data.unit ? ` ${data.unit}` : ""}
       </Title>
@@ -58,53 +66,53 @@ function SingleValueDisplay({ data }: { data: Record<string, unknown> }) {
   );
 }
 
-function KeyValueDisplay({ data }: { data: Record<string, unknown> }) {
+function KeyValueDisplay({ data, displayMode, width, height }: CustomDisplayProps) {
   const entries = (data.entries as Array<{ label: string; unit: string; value: unknown }>) ?? [];
   const layout = (data.layout as string) ?? "list";
-  const columns = (data.columns as number) ?? 2;
+  const configuredColumns = Math.max(1, (data.columns as number) ?? 2);
+  const columns =
+    displayMode === "advanced" ? configuredColumns : Math.min(configuredColumns, Math.max(1, Math.floor(width / 140)));
+  const padding = height < 112 ? "xs" : "sm";
 
   if (layout === "grid") {
     return (
-      <SimpleGrid cols={columns} spacing="xs" p="sm" h="100%">
-        {entries.map((entry, i) => (
-          <Stack key={i} align="center" gap={2}>
-            <Text size="sm" fw={600}>
-              {String(entry.value ?? "—")}
-              {entry.unit ? ` ${entry.unit}` : ""}
-            </Text>
-            <Text size="xs" c="dimmed">
-              {entry.label}
-            </Text>
-          </Stack>
-        ))}
-      </SimpleGrid>
+      <ScrollArea h="100%">
+        <SimpleGrid cols={columns} spacing="xs" p={padding}>
+          {entries.map((entry, i) => (
+            <Stack key={i} align="center" gap={2} miw={0}>
+              <Text size="sm" fw={600} truncate="end" maw="100%">
+                {String(entry.value ?? "—")}
+                {entry.unit ? ` ${entry.unit}` : ""}
+              </Text>
+              <Text size="xs" c="dimmed" truncate="end" maw="100%">
+                {entry.label}
+              </Text>
+            </Stack>
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
     );
   }
 
   return (
-    <Stack h="100%" justify="center" gap="xs" p="sm">
-      {entries.map((entry, i) => (
-        <Group key={i} justify="space-between" wrap="nowrap">
-          <Text size="sm" c="dimmed">
-            {entry.label}
-          </Text>
-          <Text size="sm" fw={600}>
-            {String(entry.value ?? "—")}
-            {entry.unit ? ` ${entry.unit}` : ""}
-          </Text>
-        </Group>
-      ))}
-    </Stack>
+    <ScrollArea h="100%">
+      <Stack justify="center" gap={height < 112 ? 4 : "xs"} p={padding}>
+        {entries.map((entry, i) => (
+          <Group key={i} justify="space-between" wrap="nowrap" gap="xs">
+            <Text size="sm" c="dimmed" truncate="end">
+              {entry.label}
+            </Text>
+            <Text size="sm" fw={600} truncate="end" maw="55%">
+              {String(entry.value ?? "—")}
+              {entry.unit ? ` ${entry.unit}` : ""}
+            </Text>
+          </Group>
+        ))}
+      </Stack>
+    </ScrollArea>
   );
 }
 
-interface CustomDisplayProps {
-  data: Record<string, unknown>;
-  displayMode: "compact" | "advanced";
-  width: number;
-  height: number;
-}
-
 function TableDisplay({ data, displayMode, width, height }: CustomDisplayProps) {
   const columns = (data.columns as string[]) ?? [];
   const rows = (data.rows as unknown[][]) ?? [];
@@ -184,7 +192,7 @@ function StatGridCard({
             {item.unit ? ` ${item.unit}` : ""}
           </Text>
           {!hideLabel && (
-            <Text size="xs" c="dimmed" ta="center" tt="uppercase" lh={1.3} style={{ letterSpacing: "0.03em" }}>
+            <Text size="xs" c="dimmed" ta="center" lh={1.3} lineClamp={2}>
               {item.label}
             </Text>
           )}
@@ -194,9 +202,9 @@ function StatGridCard({
   );
 }
 
-function StatGridDisplay({ data, displayMode, width }: CustomDisplayProps) {
+function StatGridDisplay({ data, displayMode, width, height }: CustomDisplayProps) {
   const items = (data.items as Array<{ label: string; unit: string; color: string; value: unknown }>) ?? [];
-  const configuredColumns = (data.columns as number) ?? 2;
+  const configuredColumns = Math.max(1, (data.columns as number) ?? 2);
   const columns =
     displayMode === "advanced" ? configuredColumns : Math.min(configuredColumns, Math.max(1, Math.floor(width / 120)));
   const cardStyle = (data.cardStyle as string) ?? "filled";
@@ -205,7 +213,7 @@ function StatGridDisplay({ data, displayMode, width }: CustomDisplayProps) {
     <SimpleGrid
       cols={columns}
       spacing="xs"
-      p="xs"
+      p={height < 96 ? 4 : "xs"}
       h="100%"
       style={{ gridTemplateRows: `repeat(${Math.ceil(items.length / columns)}, 1fr)` }}
     >
@@ -216,7 +224,7 @@ function StatGridDisplay({ data, displayMode, width }: CustomDisplayProps) {
   );
 }
 
-function ProgressBarsDisplay({ data }: { data: Record<string, unknown> }) {
+function ProgressBarsDisplay({ data, height }: CustomDisplayProps) {
   const bars = (data.bars as Array<{ label: string; unit: string; color: string; value: number; max?: number }>) ?? [];
   const showPercentage = (data.showPercentage as boolean) ?? true;
   const barSize = (data.barSize as string) ?? "md";
@@ -224,32 +232,34 @@ function ProgressBarsDisplay({ data }: { data: Record<string, unknown> }) {
   const sizeMap: Record<string, number> = { sm: 8, md: 14, lg: 22 };
 
   return (
-    <Stack h="100%" justify="center" gap="sm" p="sm">
-      {bars.map((bar, i) => {
-        const max = bar.max ?? 100;
-        const pct = max > 0 ? Math.min((bar.value / max) * 100, 100) : 0;
-        return (
-          <Stack key={i} gap={4}>
-            <Group justify="space-between" wrap="nowrap">
-              <Text size="xs" fw={500}>
-                {bar.label}
-              </Text>
-              <Text size="xs" c="dimmed">
-                {showPercentage ? `${pct.toFixed(0)}%` : `${bar.value}${bar.unit ? ` ${bar.unit}` : ""}`}
-                {bar.max !== undefined && showPercentage
-                  ? ` (${bar.value}/${max}${bar.unit ? ` ${bar.unit}` : ""})`
-                  : ""}
-              </Text>
-            </Group>
-            <Progress value={pct} size={sizeMap[barSize] ?? 14} color={bar.color} radius="sm" />
-          </Stack>
-        );
-      })}
-    </Stack>
+    <ScrollArea h="100%">
+      <Stack justify="center" gap={height < 120 ? "xs" : "sm"} p={height < 120 ? "xs" : "sm"}>
+        {bars.map((bar, i) => {
+          const max = bar.max ?? 100;
+          const pct = max > 0 ? Math.min((bar.value / max) * 100, 100) : 0;
+          return (
+            <Stack key={i} gap={4}>
+              <Group justify="space-between" wrap="nowrap" gap="xs">
+                <Text size="xs" fw={500} truncate="end" style={{ flex: 1, minWidth: 0 }}>
+                  {bar.label}
+                </Text>
+                <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap", flexShrink: 0 }}>
+                  {showPercentage ? `${pct.toFixed(0)}%` : `${bar.value}${bar.unit ? ` ${bar.unit}` : ""}`}
+                  {bar.max !== undefined && showPercentage
+                    ? ` (${bar.value}/${max}${bar.unit ? ` ${bar.unit}` : ""})`
+                    : ""}
+                </Text>
+              </Group>
+              <Progress value={pct} size={sizeMap[barSize] ?? 14} color={bar.color} radius="sm" />
+            </Stack>
+          );
+        })}
+      </Stack>
+    </ScrollArea>
   );
 }
 
-function StatusIndicatorDisplay({ data }: { data: Record<string, unknown> }) {
+function StatusIndicatorDisplay({ data, displayMode, width, height }: CustomDisplayProps) {
   const items = (data.items as Array<{ label: string; value: string; isGood: boolean }>) ?? [];
   const layout = (data.layout as string) ?? "list";
   const dotSize = (data.dotSize as string) ?? "md";
@@ -268,51 +278,60 @@ function StatusIndicatorDisplay({ data }: { data: Record<string, unknown> }) {
           flexShrink: 0,
         }}
       />
-      <Text size="sm" fw={500}>
+      <Text size="sm" fw={500} truncate="end" style={{ flex: 1, minWidth: 0 }}>
         {item.label}
       </Text>
-      <Text size="xs" c="dimmed" ml="auto">
+      <Text size="xs" c="dimmed" ml="auto" truncate="end" maw="45%">
         {item.value}
       </Text>
     </Group>
   );
 
   if (layout === "grid") {
+    const columns = displayMode === "advanced" || width >= 280 ? 2 : 1;
     return (
-      <SimpleGrid cols={2} spacing="xs" p="sm" h="100%">
-        {items.map(renderItem)}
-      </SimpleGrid>
+      <ScrollArea h="100%">
+        <SimpleGrid cols={columns} spacing="xs" p={height < 112 ? "xs" : "sm"}>
+          {items.map(renderItem)}
+        </SimpleGrid>
+      </ScrollArea>
     );
   }
 
   return (
-    <Stack h="100%" justify="center" gap="xs" p="sm">
-      {items.map(renderItem)}
-    </Stack>
+    <ScrollArea h="100%">
+      <Stack justify="center" gap="xs" p={height < 112 ? "xs" : "sm"}>
+        {items.map(renderItem)}
+      </Stack>
+    </ScrollArea>
   );
 }
 
-function CountGridDisplay({ data }: { data: Record<string, unknown> }) {
+function CountGridDisplay({ data, displayMode, width, height }: CustomDisplayProps) {
   const items = (data.items as Array<{ label: string; unit: string; value: unknown }>) ?? [];
-  const columns = (data.columns as number) ?? 2;
+  const configuredColumns = Math.max(1, (data.columns as number) ?? 2);
+  const columns =
+    displayMode === "advanced" ? configuredColumns : Math.min(configuredColumns, Math.max(1, Math.floor(width / 120)));
   const valueSize = (data.valueSize as string) ?? "md";
 
   const sizeMap: Record<string, string> = { sm: "sm", md: "md", lg: "lg" };
 
   return (
-    <SimpleGrid cols={columns} spacing="xs" p="sm" h="100%">
-      {items.map((item, i) => (
-        <Stack key={i} align="center" justify="center" gap={0}>
-          <Text size={sizeMap[valueSize] ?? "md"} fw={700} lh={1.2}>
-            {String(item.value ?? "—")}
-            {item.unit ? ` ${item.unit}` : ""}
-          </Text>
-          <Text size="xs" c="dimmed" tt="uppercase" ta="center" lh={1.3} style={{ letterSpacing: "0.03em" }}>
-            {item.label}
-          </Text>
-        </Stack>
-      ))}
-    </SimpleGrid>
+    <ScrollArea h="100%">
+      <SimpleGrid cols={columns} spacing="xs" p={height < 112 ? "xs" : "sm"}>
+        {items.map((item, i) => (
+          <Stack key={i} align="center" justify="center" gap={0} miw={0}>
+            <Text size={sizeMap[valueSize] ?? "md"} fw={700} lh={1.2} truncate="end" maw="100%">
+              {String(item.value ?? "—")}
+              {item.unit ? ` ${item.unit}` : ""}
+            </Text>
+            <Text size="xs" c="dimmed" ta="center" lh={1.3} truncate="end" maw="100%">
+              {item.label}
+            </Text>
+          </Stack>
+        ))}
+      </SimpleGrid>
+    </ScrollArea>
   );
 }
 
@@ -328,7 +347,7 @@ function RawDisplay({ data, displayMode, height }: CustomDisplayProps) {
   const jsonString = JSON.stringify(data.data, null, 2);
 
   return (
-    <Stack gap={4} p="xs">
+    <Stack gap={4} p="xs" h="100%">
       <Group justify="flex-end">
         <Tooltip label="Open in browser JSON viewer">
           <ActionIcon variant="subtle" size="sm" onClick={() => openJsonInBrowser(data.data)}>
@@ -336,7 +355,7 @@ function RawDisplay({ data, displayMode, height }: CustomDisplayProps) {
           </ActionIcon>
         </Tooltip>
       </Group>
-      <ScrollArea mah={maxHeight}>
+      <ScrollArea mah={maxHeight} style={{ flex: 1, minHeight: 0 }}>
         <Code block style={{ fontSize: 12 }}>
           {jsonString}
         </Code>
@@ -345,7 +364,7 @@ function RawDisplay({ data, displayMode, height }: CustomDisplayProps) {
   );
 }
 
-function ActionButtonDisplay({ data }: { data: Record<string, unknown> }) {
+function ActionButtonDisplay({ data, width, height }: CustomDisplayProps) {
   const t = useScopedI18n("widget.customApi");
   const { openConfirmModal } = useConfirmModal();
   const executeMutation = clientApi.customWidget.execute.useMutation();
@@ -389,14 +408,15 @@ function ActionButtonDisplay({ data }: { data: Record<string, unknown> }) {
   return (
     <Center h="100%">
       <Button
-        size="lg"
+        size={width < 180 || height < 96 ? "sm" : "lg"}
         color={buttonColor}
         onClick={handleClick}
         loading={executeMutation.isPending}
-        leftSection={lastSuccess ? <IconCheck size={20} /> : <IconPlayerPlay size={20} />}
+        leftSection={lastSuccess ? <IconCheck size={18} /> : <IconPlayerPlay size={18} />}
         variant={lastSuccess ? "light" : "filled"}
+        maw="calc(100% - var(--mantine-spacing-sm) * 2)"
       >
-        {executeMutation.isPending ? t("executing") : buttonLabel}
+        <Text truncate="end">{executeMutation.isPending ? t("executing") : buttonLabel}</Text>
       </Button>
     </Center>
   );
diff --git a/packages/widgets/src/dns-hole/controls/component.tsx b/packages/widgets/src/dns-hole/controls/component.tsx
index e6072ff95..952cd7e04 100644
--- a/packages/widgets/src/dns-hole/controls/component.tsx
+++ b/packages/widgets/src/dns-hole/controls/component.tsx
@@ -53,7 +53,7 @@ export default function DnsHoleControlsWidget({
     .map(({ id }) => id)
     .filter((id) => integrationIds.includes(id));
 
-  const { data: summaries = [] } = clientApi.widget.dnsHole.summary.useQuery({
+  const { data: summaries = [], isPending: isSummaryPending } = clientApi.widget.dnsHole.summary.useQuery({
     integrationIds,
   });
   const utils = clientApi.useUtils();
@@ -129,6 +129,16 @@ export default function DnsHoleControlsWidget({
     setBulkPending(false);
   };
 
+  if (isSummaryPending) {
+    return (
+      <Stack h="100%" justify="center" align="center">
+        <Text c="dimmed" size="sm">
+          {t("common.action.loading")}
+        </Text>
+      </Stack>
+    );
+  }
+
   return (
     <Stack
       className="dns-hole-controls-stack"
@@ -142,6 +152,7 @@ export default function DnsHoleControlsWidget({
         <Flex className="dns-hole-controls-buttons" gap="sm">
           <Tooltip label={t("widget.dnsHoleControls.controls.enableAll")}>
             <Button
+              aria-label={t("widget.dnsHoleControls.controls.enableAll")}
               size="xs"
               p={0}
               className="dns-hole-controls-enable-all-button"
@@ -159,6 +170,7 @@ export default function DnsHoleControlsWidget({
 
           <Tooltip label={t("widget.dnsHoleControls.controls.setTimer")}>
             <Button
+              aria-label={t("widget.dnsHoleControls.controls.setTimer")}
               size="xs"
               p={0}
               className="dns-hole-controls-timer-all-button"
@@ -179,6 +191,7 @@ export default function DnsHoleControlsWidget({
 
           <Tooltip label={t("widget.dnsHoleControls.controls.disableAll")}>
             <Button
+              aria-label={t("widget.dnsHoleControls.controls.disableAll")}
               size="xs"
               p={0}
               className="dns-hole-controls-disable-all-button"
@@ -340,6 +353,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                 <Group gap="xs" grow wrap="nowrap" w="100%">
                   {!isEnabled ? (
                     <ActionIcon
+                      aria-label={`${t("widget.dnsHoleControls.controls.enableAll")}: ${data.integration.name}`}
                       onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
                       size="sm"
@@ -350,6 +364,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     </ActionIcon>
                   ) : (
                     <ActionIcon
+                      aria-label={`${t("widget.dnsHoleControls.controls.disableAll")}: ${data.integration.name}`}
                       onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
                       size="sm"
@@ -360,6 +375,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     </ActionIcon>
                   )}
                   <ActionIcon
+                    aria-label={`${t("widget.dnsHoleControls.controls.setTimer")}: ${data.integration.name}`}
                     onClick={() => {
                       setSelectedIntegrationIds([data.integration.id]);
                       open();
@@ -376,6 +392,11 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
               )}
               {layout === "md" && (
                 <UnstyledButton
+                  aria-label={`${
+                    isEnabled
+                      ? t("widget.dnsHoleControls.controls.disableAll")
+                      : t("widget.dnsHoleControls.controls.enableAll")
+                  }: ${data.integration.name}`}
                   className="dns-hole-controls-item-toggle-button"
                   disabled={!controlEnabled}
                   display="contents"
@@ -418,6 +439,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
           </Flex>
           {layout === "md" && (
             <ActionIcon
+              aria-label={`${t("widget.dnsHoleControls.controls.setTimer")}: ${data.integration.name}`}
               className="dns-hole-controls-item-timer-button"
               display={isInteractPermitted ? undefined : "none"}
               disabled={!controlEnabled || !isEnabled}
diff --git a/packages/widgets/src/dns-hole/summary/component.tsx b/packages/widgets/src/dns-hole/summary/component.tsx
index c9b893445..a1ec1f1df 100644
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -36,7 +36,7 @@ export default function DnsHoleSummaryWidget({
   integrationIds,
   displayMode,
 }: WidgetComponentProps<typeof widgetKind>) {
-  const { data: summaries = [] } = clientApi.widget.dnsHole.summary.useQuery({
+  const { data: summaries = [], isPending } = clientApi.widget.dnsHole.summary.useQuery({
     integrationIds,
   });
 
@@ -45,6 +45,16 @@ export default function DnsHoleSummaryWidget({
   const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
   const layoutProps = boxPropsByLayout(options.layout);
 
+  if (isPending) {
+    return (
+      <Stack h="100%" justify="center" align="center">
+        <Text c="dimmed" size="sm">
+          {t("common.action.loading")}
+        </Text>
+      </Stack>
+    );
+  }
+
   return (
     <Stack h="100%" gap={0}>
       <SimpleGrid cols={2} spacing="xs" p="xs" {...layoutProps} style={{ ...layoutProps.style, flex: 1, minHeight: 0 }}>
@@ -53,7 +63,16 @@ export default function DnsHoleSummaryWidget({
             <StatCard key={item.color} item={item} usePiHoleColors={options.usePiHoleColors} data={data} t={t} />
           ))
         ) : (
-          <Stack h="100%" w="100%" justify="center" align="center" gap="sm" p="sm">
+          <Stack
+            aria-live="polite"
+            h="100%"
+            w="100%"
+            justify="center"
+            align="center"
+            gap="sm"
+            p="sm"
+            style={{ gridColumn: "1 / -1" }}
+          >
             <AvatarGroup spacing="md">
               {summaries.map(({ integration }) => (
                 <Tooltip key={integration.id} label={integration.name}>
@@ -154,11 +173,15 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
   const hideLabel = (height <= 32 && width <= 256) || (height <= 64 && width <= 92);
   const tooltip = item.tooltip?.(data, t);
   const board = useRequiredBoard();
+  const label = translateIfNecessary(t, item.label);
+  const value = item.value(data, width <= 64 ? "sm" : "md");
 
   return (
     <TooltipFloating label={tooltip} disabled={!tooltip} w={250} multiline>
       <Card
         ref={ref}
+        component="section"
+        aria-label={`${label}: ${value}`}
         className="summary-card"
         p="sm"
         radius={board.itemRadius}
@@ -190,11 +213,11 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
             wrap="wrap"
           >
             <Text className="summary-card-value text-flash" ta="center" size="lg" fw="bold" maw="100%">
-              {item.value(data, width <= 64 ? "sm" : "md")}
+              {value}
             </Text>
             {!hideLabel && (
               <Text className="summary-card-label" ta="center" size="xs" maw="100%">
-                {translateIfNecessary(t, item.label)}
+                {label}
               </Text>
             )}
           </Flex>
diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index 678fc3561..0f9b4c08d 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -1,7 +1,21 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { ActionIcon, Avatar, Badge, Box, Center, Group, Menu, Portal, Stack, Text, Tooltip } from "@mantine/core";
+import {
+  ActionIcon,
+  Avatar,
+  Badge,
+  Box,
+  Center,
+  getDefaultZIndex,
+  Group,
+  Menu,
+  Portal,
+  Stack,
+  Text,
+  Tooltip,
+  VisuallyHidden,
+} from "@mantine/core";
 import {
   IconBrandDocker,
   IconCategoryPlus,
@@ -31,7 +45,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import { HomarrDataTable } from "../common/homarr-data-table";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
-import { getDockerColumnVisibility } from "./layout";
+import { getDockerColumnVisibility, getDockerFooterVisibility } from "./layout";
 
 type DockerContainer = RouterOutputs["docker"]["getContainers"]["containers"][number];
 type ContainerAction = "start" | "stop" | "restart" | "remove";
@@ -64,10 +78,32 @@ const ContainerStateBadge = ({ state }: { state: ContainerState }) => {
   );
 };
 
+const ContainerStateDot = ({ state }: { state: ContainerState }) => {
+  const t = useScopedI18n("docker.field.state.option");
+  const label = t(state);
+
+  return (
+    <Tooltip label={label} withArrow>
+      <Box component="span" style={{ display: "inline-flex", flexShrink: 0 }}>
+        <Box
+          component="span"
+          aria-hidden="true"
+          w={8}
+          h={8}
+          bg={`${containerStateColorMap[state]}.6`}
+          style={{ borderRadius: "50%" }}
+        />
+        <VisuallyHidden>{label}</VisuallyHidden>
+      </Box>
+    </Tooltip>
+  );
+};
+
 const createColumns = (
   t: ReturnType<typeof useScopedI18n<"docker">>,
   handlers: ContainerActionHandlers,
   sortingEnabled: boolean,
+  inlineState: boolean,
 ): DataTableColumn<DockerContainer>[] => [
   {
     accessor: "name",
@@ -77,6 +113,7 @@ const createColumns = (
     sortable: sortingEnabled,
     render: (container) => (
       <Group gap="xs" wrap="nowrap" style={{ overflow: "hidden" }}>
+        {inlineState && <ContainerStateDot state={container.state} />}
         <Avatar
           variant="outline"
           radius="sm"
@@ -201,7 +238,6 @@ export default function DockerWidget({
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
   const isAdvanced = displayMode === "advanced";
-  const isTiny = !isAdvanced && width <= 256;
 
   const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery();
   const containers = useMemo(() => data?.containers ?? [], [data?.containers]);
@@ -286,12 +322,14 @@ export default function DockerWidget({
     () => getDockerColumnVisibility(options.columns, width, isAdvanced),
     [isAdvanced, options.columns, width],
   );
+  const inlineState =
+    !isAdvanced && width < 340 && options.columns.includes("name") && options.columns.includes("state");
   const columns = useMemo(() => {
     const sortingEnabled = (isAdvanced || options.enableRowSorting) && !isEditMode;
-    return createColumns(t, actionHandlers, sortingEnabled).filter(
+    return createColumns(t, actionHandlers, sortingEnabled, inlineState).filter(
       ({ accessor }) => columnVisibility[String(accessor) as keyof typeof columnVisibility],
     );
-  }, [actionHandlers, columnVisibility, isAdvanced, isEditMode, options.enableRowSorting, t]);
+  }, [actionHandlers, columnVisibility, inlineState, isAdvanced, isEditMode, options.enableRowSorting, t]);
   const { effectiveColumns, storeKey } = usePersistedTableLayout({
     columns,
     columnAccessors,
@@ -317,6 +355,8 @@ export default function DockerWidget({
     );
   }
 
+  const footerVisibility = getDockerFooterVisibility(width, isAdvanced);
+
   return (
     <Stack gap={0} h="100%" style={{ overflow: "hidden" }}>
       <Box style={{ flex: 1, minHeight: 0 }}>
@@ -340,7 +380,7 @@ export default function DockerWidget({
         />
       </Box>
 
-      {(isAdvanced || !isTiny) && (
+      {footerVisibility.footer && (
         <Group
           justify="space-between"
           style={{
@@ -357,12 +397,16 @@ export default function DockerWidget({
           </Group>
 
           <Group gap="sm" wrap="nowrap" justify="flex-end" style={{ minWidth: 0 }}>
-            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
-              {t("table.totalCpu", { cpu: totals.cpu.toFixed(2) })}
-            </Text>
-            <Text size="sm" style={{ whiteSpace: "nowrap" }}>
-              {t("table.totalMemory", { memory: formatBytes(totals.memory) })}
-            </Text>
+            {footerVisibility.cpu && (
+              <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+                {t("table.totalCpu", { cpu: totals.cpu.toFixed(2) })}
+              </Text>
+            )}
+            {footerVisibility.memory && (
+              <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+                {t("table.totalMemory", { memory: formatBytes(totals.memory) })}
+              </Text>
+            )}
             <Tooltip label={t("table.refresh.lastUpdated", { when: relativeTime })}>
               <ActionIcon
                 size="sm"
@@ -499,7 +543,7 @@ function ContainerContextMenu({
         left={0}
         w="100vw"
         h="100vh"
-        style={{ zIndex: 1000 }}
+        style={{ zIndex: getDefaultZIndex("popover") }}
         onClick={onClose}
         onContextMenu={(event) => {
           event.preventDefault();
diff --git a/packages/widgets/src/docker/layout.spec.ts b/packages/widgets/src/docker/layout.spec.ts
index ed758d0d8..190ed9542 100644
--- a/packages/widgets/src/docker/layout.spec.ts
+++ b/packages/widgets/src/docker/layout.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { getDockerColumnVisibility } from "./layout";
+import { getDockerColumnVisibility, getDockerFooterVisibility } from "./layout";
 
 const columns = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
 
@@ -8,7 +8,7 @@ describe("getDockerColumnVisibility", () => {
   test("keeps only essential columns in a narrow compact widget", () => {
     expect(getDockerColumnVisibility(columns, 240, false)).toEqual({
       name: true,
-      state: true,
+      state: false,
       host: false,
       cpuUsage: false,
       memoryUsage: false,
@@ -17,13 +17,17 @@ describe("getDockerColumnVisibility", () => {
   });
 
   test("reveals compact metrics as width becomes available", () => {
-    expect(getDockerColumnVisibility(columns, 380, false)).toMatchObject({
+    expect(getDockerColumnVisibility(columns, 440, false)).toMatchObject({
       host: false,
       cpuUsage: true,
-      memoryUsage: true,
+      memoryUsage: false,
     });
   });
 
+  test("keeps a configured state column when there is no name column for the inline dot", () => {
+    expect(getDockerColumnVisibility(["state"], 240, false).state).toBe(true);
+  });
+
   test("uses every expert column in advanced mode", () => {
     expect(getDockerColumnVisibility([], 240, true)).toEqual({
       name: true,
@@ -35,3 +39,14 @@ describe("getDockerColumnVisibility", () => {
     });
   });
 });
+
+describe("getDockerFooterVisibility", () => {
+  test("reveals totals only when they fit", () => {
+    expect(getDockerFooterVisibility(300, false)).toEqual({ footer: true, cpu: false, memory: false });
+    expect(getDockerFooterVisibility(400, false)).toEqual({ footer: true, cpu: true, memory: false });
+  });
+
+  test("keeps every total in advanced mode", () => {
+    expect(getDockerFooterVisibility(240, true)).toEqual({ footer: true, cpu: true, memory: true });
+  });
+});
diff --git a/packages/widgets/src/docker/layout.ts b/packages/widgets/src/docker/layout.ts
index 4d3b1029b..465ac51fc 100644
--- a/packages/widgets/src/docker/layout.ts
+++ b/packages/widgets/src/docker/layout.ts
@@ -10,10 +10,16 @@ export const getDockerColumnVisibility = (
 
   return {
     name: isVisible("name"),
-    state: isVisible("state"),
-    host: isVisible("host") && (isAdvanced || width >= 440),
-    cpuUsage: isVisible("cpuUsage") && (isAdvanced || width >= 280),
-    memoryUsage: isVisible("memoryUsage") && (isAdvanced || width >= 360),
+    state: isVisible("state") && (isAdvanced || width >= 340 || !configured.has("name")),
+    host: isVisible("host") && (isAdvanced || width >= 640),
+    cpuUsage: isVisible("cpuUsage") && (isAdvanced || width >= 420),
+    memoryUsage: isVisible("memoryUsage") && (isAdvanced || width >= 520),
     actions: isVisible("actions"),
   };
 };
+
+export const getDockerFooterVisibility = (width: number, isAdvanced: boolean) => ({
+  footer: isAdvanced || width > 256,
+  cpu: isAdvanced || width >= 360,
+  memory: isAdvanced || width >= 480,
+});
diff --git a/packages/widgets/src/firewall/component.tsx b/packages/widgets/src/firewall/component.tsx
index b2072bcd0..ba0779d0d 100644
--- a/packages/widgets/src/firewall/component.tsx
+++ b/packages/widgets/src/firewall/component.tsx
@@ -57,12 +57,15 @@ export const hasFirewallPartialFailure = (firewallId: string, queries: readonly
 export default function FirewallWidget({
   integrationIds,
   width,
+  height,
   itemId,
   displayMode,
 }: WidgetComponentProps<"firewall">) {
   const [selectedFirewall, setSelectedFirewall] = useState("");
   const isAdvanced = displayMode === "advanced";
-  const isTiny = !isAdvanced && width < 256;
+  const isTiny = !isAdvanced && (width < 256 || height < 180);
+  const ringSize = isAdvanced ? 100 : height < 120 ? 44 : isTiny ? 64 : 100;
+  const showInterfaces = isAdvanced || height >= 120;
   const t = useI18n();
 
   const handleSelect = useCallback((value: string | null) => {
@@ -110,6 +113,17 @@ export default function FirewallWidget({
     value: firewallId,
   }));
 
+  if (firewallIds.length === 0) {
+    const isLoading = queries.some((query) => query.isPending || query.isFetching);
+    return (
+      <Center h="100%" p="sm">
+        <Text size="sm" c="dimmed" ta="center">
+          {isLoading ? t("common.action.loading") : t("widget.firewall.empty.noInterfaces")}
+        </Text>
+      </Center>
+    );
+  }
+
   return (
     <ScrollArea h="100%">
       <Stack gap="xs" p={isAdvanced ? "xs" : 0}>
@@ -161,6 +175,8 @@ export default function FirewallWidget({
                 hasError={hasError}
                 isAdvanced={isAdvanced}
                 isTiny={isTiny}
+                ringSize={ringSize}
+                showInterfaces={showInterfaces}
                 accordionValue={accordionValue}
                 setAccordionValue={setAccordionValue}
                 errorLabel={t("widget.firewall.error.internalServerError")}
@@ -190,6 +206,8 @@ interface FirewallPanelProps {
   hasError: boolean;
   isAdvanced: boolean;
   isTiny: boolean;
+  ringSize: number;
+  showInterfaces: boolean;
   accordionValue: string | null;
   setAccordionValue: (value: string | null) => void;
   errorLabel: string;
@@ -212,6 +230,8 @@ const FirewallPanel = ({
   hasError,
   isAdvanced,
   isTiny,
+  ringSize,
+  showInterfaces,
   accordionValue,
   setAccordionValue,
   errorLabel,
@@ -252,33 +272,35 @@ const FirewallPanel = ({
 
       <Flex justify="center" align="center" wrap="wrap">
         {cpu !== undefined && (
-          <MetricRing value={cpu} icon={IconCpu} isTiny={isTiny} label={t("widget.firewall.widget.cpu")} t={t} />
+          <MetricRing value={cpu} icon={IconCpu} size={ringSize} label={t("widget.firewall.widget.cpu")} t={t} />
         )}
         {memory !== undefined && (
           <MetricRing
             value={memory}
             icon={IconBrain}
-            isTiny={isTiny}
+            size={ringSize}
             label={t("widget.firewall.widget.memory")}
             t={t}
           />
         )}
       </Flex>
 
-      <InterfacesPanel
-        summary={interfaces ?? []}
-        hasResult={interfacesLoaded}
-        hasError={interfacesError}
-        isAdvanced={isAdvanced}
-        isTiny={isTiny}
-        accordionValue={accordionValue}
-        setAccordionValue={setAccordionValue}
-        errorLabel={errorLabel}
-        errorBadgeLabel={errorBadgeLabel}
-        noDataLabel={noDataLabel}
-        loadingLabel={loadingLabel}
-        label={interfacesLabel}
-      />
+      {showInterfaces && (
+        <InterfacesPanel
+          summary={interfaces ?? []}
+          hasResult={interfacesLoaded}
+          hasError={interfacesError}
+          isAdvanced={isAdvanced}
+          isTiny={isTiny}
+          accordionValue={accordionValue}
+          setAccordionValue={setAccordionValue}
+          errorLabel={errorLabel}
+          errorBadgeLabel={errorBadgeLabel}
+          noDataLabel={noDataLabel}
+          loadingLabel={loadingLabel}
+          label={interfacesLabel}
+        />
+      )}
     </Stack>
   </Paper>
 );
@@ -286,12 +308,12 @@ const FirewallPanel = ({
 interface MetricRingProps {
   value: number;
   icon: typeof IconCpu;
-  isTiny: boolean;
+  size: number;
   label: string;
   t: TranslationFunction;
 }
 
-const MetricRing = ({ value, icon: Icon, isTiny, label, t }: MetricRingProps) => {
+const MetricRing = ({ value, icon: Icon, size, label, t }: MetricRingProps) => {
   const safeValue = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
   const status = getMetricStatus(safeValue);
   const statusLabel = t(`widget.firewall.status.${status}`);
@@ -304,13 +326,13 @@ const MetricRing = ({ value, icon: Icon, isTiny, label, t }: MetricRingProps) =>
         status: statusLabel,
       })}
       roundCaps
-      size={isTiny ? 50 : 100}
-      thickness={isTiny ? 4 : 8}
+      size={size}
+      thickness={size < 72 ? 4 : 8}
       label={
         <Center style={{ flexDirection: "column" }}>
-          <Text size={isTiny ? "8px" : "xs"}>{safeValue.toFixed(1)}%</Text>
-          <Icon size={isTiny ? 8 : 16} />
-          {!isTiny && <Text size="8px">{statusLabel}</Text>}
+          <Text size={size < 72 ? "8px" : "xs"}>{safeValue.toFixed(1)}%</Text>
+          <Icon size={size < 72 ? 8 : 16} />
+          {size >= 72 && <Text size="8px">{statusLabel}</Text>}
         </Center>
       }
       sections={[
diff --git a/packages/widgets/src/firewall/firewall-menu.tsx b/packages/widgets/src/firewall/firewall-menu.tsx
index e96662dfb..6b7a26239 100644
--- a/packages/widgets/src/firewall/firewall-menu.tsx
+++ b/packages/widgets/src/firewall/firewall-menu.tsx
@@ -10,16 +10,18 @@ interface FirewallMenuProps {
 }
 
 export const FirewallMenu = ({ onChange, isTiny, dropdownItems, selectedFirewall }: FirewallMenuProps) => (
-  <Box>
+  <Box style={{ flex: 1, minWidth: 0 }}>
     <Select
       value={selectedFirewall}
       onChange={onChange}
-      size={isTiny ? "8px" : "xs"}
+      size="xs"
+      w="100%"
       color="lightgray"
       data={dropdownItems}
       styles={{
         input: {
           minHeight: "24px",
+          paddingInline: isTiny ? 6 : undefined,
         },
       }}
     />
diff --git a/packages/widgets/src/firewall/firewall-version.tsx b/packages/widgets/src/firewall/firewall-version.tsx
index df3daa2a9..87ec9f9d8 100644
--- a/packages/widgets/src/firewall/firewall-version.tsx
+++ b/packages/widgets/src/firewall/firewall-version.tsx
@@ -29,8 +29,9 @@ export const FirewallVersion = ({ firewallsVersionData, selectedFirewall, isTiny
         autoContrast
         variant="outline"
         color="lightgray"
-        size={isTiny ? "8px" : "xs"}
-        style={{ minHeight: "24px" }}
+        size="xs"
+        style={{ minHeight: "24px", maxWidth: isTiny ? 72 : undefined }}
+        styles={{ label: { overflow: "hidden", textOverflow: "ellipsis" } }}
       >
         {formatVersion(version ?? "", t("widget.firewall.versionUnknown"))}
       </Badge>
diff --git a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
index a8981150e..d14f63521 100644
--- a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
+++ b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
@@ -69,7 +69,7 @@ export const ClusterHealthMonitoring = ({
     <Stack h={displayMode === "advanced" ? "auto" : "100%"} p="xs" gap={isTiny ? "xs" : "md"}>
       {options.showUptime && (
         <Group justify="center" wrap="nowrap">
-          <Text fz={isTiny ? 8 : "xs"} tt="uppercase" fw={700} c="dimmed" ta="center">
+          <Text fz={isTiny ? 8 : "xs"} fw={700} c="dimmed" ta="center">
             {formatUptime(uptime, t)}
           </Text>
         </Group>
diff --git a/packages/widgets/src/health-monitoring/system-health.module.css b/packages/widgets/src/health-monitoring/system-health.module.css
index 1ab18a656..b7b3a70d2 100644
--- a/packages/widgets/src/health-monitoring/system-health.module.css
+++ b/packages/widgets/src/health-monitoring/system-health.module.css
@@ -5,3 +5,35 @@
 [data-mantine-color-scheme="dark"] .card {
   background-color: var(--mantine-color-dark-7);
 }
+
+.systemPanel {
+  min-width: 0;
+}
+
+.infoAction {
+  transition: opacity 150ms ease;
+}
+
+.infoActionCompact {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.systemPanel:hover .infoActionCompact,
+.systemPanel:focus-within .infoActionCompact {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: none) {
+  .infoActionCompact {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .infoAction {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 317f97f5a..0c9665094 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -83,16 +83,29 @@ export const SystemHealthMonitoring = ({
           const filteredSmart = filterStorageVolumes(healthInfo.smart, options.visibleStorageVolumes, integrationId);
           const disksData = matchFileSystemAndSmart(filteredFileSystem, filteredSmart);
           const memoryUsage = formatMemoryUsage(healthInfo.memAvailableInBytes, healthInfo.memUsedInBytes);
+          const hasAttentionState = healthInfo.rebootRequired || healthInfo.availablePkgUpdates > 0;
           return (
             <Stack
               gap="sm"
               key={integrationId}
               h={!isAdvanced && healthData.length === 1 ? "100%" : "auto"}
-              className={`health-monitoring-information health-monitoring-${integrationName}`}
+              className={combineClasses(
+                `health-monitoring-information health-monitoring-${integrationName}`,
+                classes.systemPanel,
+              )}
               p="sm"
               pos="relative"
             >
-              <Box className="health-monitoring-information-card-section" pos="absolute" top={8} right={8}>
+              <Box
+                className={combineClasses(
+                  "health-monitoring-information-card-section",
+                  classes.infoAction,
+                  !isAdvanced && !hasAttentionState && classes.infoActionCompact,
+                )}
+                pos="absolute"
+                top={8}
+                right={8}
+              >
                 <Indicator
                   className="health-monitoring-updates-reboot-indicator"
                   inline
diff --git a/packages/widgets/src/immich/album-carousel/component.module.css b/packages/widgets/src/immich/album-carousel/component.module.css
index 9412b96dc..ab23cb8ec 100644
--- a/packages/widgets/src/immich/album-carousel/component.module.css
+++ b/packages/widgets/src/immich/album-carousel/component.module.css
@@ -24,29 +24,42 @@
   border-radius: 0;
 }
 
-.dots {
+.carouselControls {
   position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
+  inset-block-start: 8px;
+  inset-inline-end: 8px;
+  z-index: 1;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
 }
 
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  transition: all 0.2s ease;
+.carouselContainer:hover .carouselControls,
+.carouselContainer:focus-within .carouselControls,
+.carouselControls[data-visible="true"] {
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
 
-  &[data-active="true"] {
-    background-color: rgba(255, 255, 255, 1);
-    width: 24px;
-    border-radius: 4px;
+@media (any-pointer: coarse) {
+  .carouselControls {
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
   }
 
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.8);
+  .carouselControls button {
+    width: 44px;
+    height: 44px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .carouselControls {
+    transition: none;
   }
 }
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index 32493288f..fa7bd4d0b 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -161,41 +161,48 @@ function Carousel({
       <Box w="100%" style={{ flex: 1, minHeight: 0 }} className={classes.carouselContainer}>
         <Image src={currentAsset.publicLink} alt={t("albumPhoto")} className={classes.carouselImage} />
 
-        {advanced && (
-          <>
-            <ActionIcon
-              aria-label={t("actions.previousPhoto")}
-              variant="filled"
-              radius="xl"
-              pos="absolute"
-              left="md"
-              top="50%"
-              onClick={() => move(-1)}
-            >
-              <IconChevronLeft size={18} />
-            </ActionIcon>
-            <Group pos="absolute" right="md" top="md" gap="xs">
+        {assets.length > 1 && (
+          <Group
+            className={classes.carouselControls}
+            data-visible={advanced || paused || undefined}
+            gap={4}
+            wrap="nowrap"
+          >
+            {advanced && (
               <ActionIcon
-                aria-label={paused ? t("actions.resumeSlideshow") : t("actions.pauseSlideshow")}
+                aria-label={t("actions.previousPhoto")}
                 variant="filled"
+                color="dark"
                 radius="xl"
-                onClick={() => setPaused((value) => !value)}
+                size={40}
+                onClick={() => move(-1)}
               >
-                {paused ? <IconPlayerPlay size={16} /> : <IconPlayerPause size={16} />}
+                <IconChevronLeft size={18} />
               </ActionIcon>
-            </Group>
+            )}
             <ActionIcon
-              aria-label={t("actions.nextPhoto")}
+              aria-label={paused ? t("actions.resumeSlideshow") : t("actions.pauseSlideshow")}
               variant="filled"
+              color="dark"
               radius="xl"
-              pos="absolute"
-              right="md"
-              top="50%"
-              onClick={() => move(1)}
+              size={advanced ? 40 : 32}
+              onClick={() => setPaused((value) => !value)}
             >
-              <IconChevronRight size={18} />
+              {paused ? <IconPlayerPlay size={18} /> : <IconPlayerPause size={18} />}
             </ActionIcon>
-          </>
+            {advanced && (
+              <ActionIcon
+                aria-label={t("actions.nextPhoto")}
+                variant="filled"
+                color="dark"
+                radius="xl"
+                size={40}
+                onClick={() => move(1)}
+              >
+                <IconChevronRight size={18} />
+              </ActionIcon>
+            )}
+          </Group>
         )}
 
         {(showPhotoInfo || advanced) && (
diff --git a/packages/widgets/src/immich/server-stats/component.module.css b/packages/widgets/src/immich/server-stats/component.module.css
index b16fdb597..66608badc 100644
--- a/packages/widgets/src/immich/server-stats/component.module.css
+++ b/packages/widgets/src/immich/server-stats/component.module.css
@@ -8,3 +8,11 @@
     background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
   }
 }
+
+.statItemDense {
+  min-width: 0;
+  min-height: 44px;
+  padding: 4px 6px;
+  border-radius: var(--mantine-radius-sm);
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+}
diff --git a/packages/widgets/src/immich/server-stats/component.tsx b/packages/widgets/src/immich/server-stats/component.tsx
index d1b9b8c4a..b17ce1de5 100644
--- a/packages/widgets/src/immich/server-stats/component.tsx
+++ b/packages/widgets/src/immich/server-stats/component.tsx
@@ -21,6 +21,7 @@ export default function ImmichServerStatsWidget({
   options,
   displayMode = "compact",
   width,
+  height,
   widgetStateRef,
 }: WidgetComponentProps<"immich-serverStats">) {
   const t = useI18n();
@@ -40,16 +41,26 @@ export default function ImmichServerStatsWidget({
 
   if (!stats) return <WidgetEmptyState />;
 
+  const statCount =
+    Number(options.showUsers) + Number(options.showPhotos) + Number(options.showVideos) + Number(options.showStorage);
+  const statsLayout = getImmichStatsLayout(width, height, statCount, isAdvanced);
+
   const statsContent = (
-    <SimpleGrid cols={isAdvanced ? (width >= 720 ? 4 : width >= 360 ? 2 : 1) : width >= 320 ? 2 : 1} spacing="sm">
+    <SimpleGrid cols={statsLayout.columns} spacing={statsLayout.dense ? 4 : "sm"}>
       {options.showUsers && (
-        <StatItem icon={<IconUsers size={20} />} label={t("widget.immich-serverStats.users")} value={stats.userCount} />
+        <StatItem
+          icon={<IconUsers size={20} />}
+          label={t("widget.immich-serverStats.users")}
+          value={stats.userCount}
+          dense={statsLayout.dense}
+        />
       )}
       {options.showPhotos && (
         <StatItem
           icon={<IconPhoto size={20} />}
           label={t("widget.immich-serverStats.photos")}
           value={stats.photoCount}
+          dense={statsLayout.dense}
         />
       )}
       {options.showVideos && (
@@ -57,6 +68,7 @@ export default function ImmichServerStatsWidget({
           icon={<IconVideo size={20} />}
           label={t("widget.immich-serverStats.videos")}
           value={stats.videoCount}
+          dense={statsLayout.dense}
         />
       )}
       {options.showStorage && (
@@ -64,6 +76,7 @@ export default function ImmichServerStatsWidget({
           icon={<IconDatabase size={20} />}
           label={t("widget.immich-serverStats.storage")}
           value={formatBytes(stats.totalLibraryUsageInBytes)}
+          dense={statsLayout.dense}
         />
       )}
     </SimpleGrid>
@@ -71,7 +84,7 @@ export default function ImmichServerStatsWidget({
 
   if (!isAdvanced) {
     return (
-      <Stack gap="md" h="100%" p="md" justify="center">
+      <Stack gap="md" h="100%" p={statsLayout.dense ? "xs" : "md"} justify="center">
         {statsContent}
       </Stack>
     );
@@ -110,20 +123,46 @@ interface StatItemProps {
   icon: React.ReactNode;
   label: string;
   value: string | number;
+  dense: boolean;
 }
 
-function StatItem({ icon, label, value }: StatItemProps) {
+function StatItem({ icon, label, value, dense }: StatItemProps) {
+  if (dense) {
+    return (
+      <Stack gap={1} align="center" justify="center" className={classes.statItemDense} title={`${label}: ${value}`}>
+        <Text size="sm" fw={700} truncate="end" w="100%" ta="center">
+          {value}
+        </Text>
+        <Text size="xs" c="dimmed" truncate="end" w="100%" ta="center">
+          {label}
+        </Text>
+      </Stack>
+    );
+  }
+
   return (
     <Group justify="space-between" align="center" className={classes.statItem}>
-      <Group gap="sm" align="center">
+      <Group gap="sm" align="center" wrap="nowrap" miw={0}>
         {icon}
-        <Text size="sm" fw={500}>
+        <Text size="sm" fw={500} truncate="end">
           {label}
         </Text>
       </Group>
-      <Text size="sm" fw={700} c="var(--mantine-primary-color)">
+      <Text size="sm" fw={700} c="var(--mantine-primary-color)" truncate="end" title={String(value)}>
         {value}
       </Text>
     </Group>
   );
 }
+
+export const getImmichStatsLayout = (width: number, height: number, itemCount: number, isAdvanced = false) => {
+  const count = Math.max(1, itemCount);
+  if (isAdvanced) {
+    return { columns: width >= 720 ? Math.min(count, 4) : width >= 360 ? Math.min(count, 2) : 1, dense: false };
+  }
+
+  const dense = width < 320 || height < 160;
+  if (height < 140) return { columns: Math.min(count, width >= 360 ? 4 : 2), dense: true };
+  if (height < 220) return { columns: Math.min(count, 2), dense: true };
+  return { columns: Math.min(count, width >= 280 ? 2 : 1), dense };
+};
diff --git a/packages/widgets/src/immich/server-stats/layout.spec.ts b/packages/widgets/src/immich/server-stats/layout.spec.ts
new file mode 100644
index 000000000..7640bda4b
--- /dev/null
+++ b/packages/widgets/src/immich/server-stats/layout.spec.ts
@@ -0,0 +1,15 @@
+import { describe, expect, test } from "vitest";
+
+import { getImmichStatsLayout } from "./component";
+
+describe("Immich server statistics compact layout", () => {
+  test("keeps four enabled stats legible in a short widget", () => {
+    expect(getImmichStatsLayout(280, 120, 4)).toEqual({ columns: 2, dense: true });
+    expect(getImmichStatsLayout(480, 120, 4)).toEqual({ columns: 4, dense: true });
+  });
+
+  test("uses the roomier summary layout when space is available", () => {
+    expect(getImmichStatsLayout(360, 240, 4)).toEqual({ columns: 2, dense: false });
+    expect(getImmichStatsLayout(200, 180, 4)).toEqual({ columns: 2, dense: true });
+  });
+});
diff --git a/packages/widgets/src/indexer-manager/component.module.css b/packages/widgets/src/indexer-manager/component.module.css
index 1ab18a656..700a080b9 100644
--- a/packages/widgets/src/indexer-manager/component.module.css
+++ b/packages/widgets/src/indexer-manager/component.module.css
@@ -5,3 +5,44 @@
 [data-mantine-color-scheme="dark"] .card {
   background-color: var(--mantine-color-dark-7);
 }
+
+.root {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.testAction {
+  margin-inline-start: auto;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.root:hover .testAction,
+.root:focus-within .testAction {
+  opacity: 1;
+}
+
+.indexerRow {
+  min-height: 24px;
+  padding: 2px 4px;
+  border-radius: var(--mantine-radius-xs);
+
+  &:hover,
+  &:focus-within {
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+@media (hover: none) {
+  .testAction {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .testAction {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx
index 2868c3caf..3d8b6138d 100644
--- a/packages/widgets/src/indexer-manager/component.tsx
+++ b/packages/widgets/src/indexer-manager/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo } from "react";
-import { ActionIcon, Anchor, Badge, Button, Card, Flex, Group, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
+import { ActionIcon, Anchor, Badge, Card, Flex, Group, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
@@ -31,7 +31,7 @@ export default function IndexerManagerWidget({
   const board = useRequiredBoard();
   const isAdvanced = displayMode === "advanced";
   const hasSmallWidth = !isAdvanced && width < 256;
-  const hasSmallHeight = !isAdvanced && height < 256;
+  const isDense = !isAdvanced && (width < 280 || height < 180);
   const allIndexers = useMemo(() => indexersData.flatMap((entry) => entry.indexers), [indexersData]);
   const unavailableCount = allIndexers.filter(
     (indexer) => indexer.status === false || indexer.enabled === false,
@@ -49,16 +49,26 @@ export default function IndexerManagerWidget({
   }, [integrationIds, testAll, widgetStateRef]);
 
   return (
-    <Flex className="indexer-manager-container" h="100%" direction="column" gap="sm" p="sm" align="center">
-      <Group className="indexer-manager-title" align="center" gap="xs" wrap="nowrap">
-        <IconReportSearch
-          className="indexer-manager-title-icon"
-          size={hasSmallWidth ? 16 : 20}
-          style={{ minWidth: hasSmallWidth ? 16 : 20 }}
-        />
-        <Text size={hasSmallWidth ? "xs" : "md"} fw="bold">
-          {t("widget.indexerManager.title")}
-        </Text>
+    <Flex
+      className={`indexer-manager-container ${classes.root}`}
+      h="100%"
+      direction="column"
+      gap={isDense ? 4 : "xs"}
+      p={isDense ? "xs" : "sm"}
+    >
+      <Group className="indexer-manager-title" align="center" gap="xs" wrap="nowrap" w="100%">
+        <Tooltip label={t("widget.indexerManager.title")} disabled={!hasSmallWidth}>
+          <IconReportSearch
+            className="indexer-manager-title-icon"
+            size={hasSmallWidth ? 16 : 20}
+            style={{ minWidth: hasSmallWidth ? 16 : 20 }}
+          />
+        </Tooltip>
+        {!hasSmallWidth && (
+          <Text size={isDense ? "xs" : "sm"} fw={600} truncate="end">
+            {t("widget.indexerManager.title")}
+          </Text>
+        )}
         {isAdvanced && (
           <Group gap={4} wrap="nowrap">
             <Badge size="xs" color="green" variant="light">
@@ -71,9 +81,9 @@ export default function IndexerManagerWidget({
             )}
           </Group>
         )}
-        {hasSmallHeight && (
+        <Tooltip label={t("widget.indexerManager.testAll")}>
           <ActionIcon
-            className="indexer-manager-test-action-icon"
+            className={combineClasses("indexer-manager-test-action-icon", classes.testAction)}
             size="sm"
             radius={board.itemRadius}
             variant="light"
@@ -83,15 +93,16 @@ export default function IndexerManagerWidget({
             onClick={() => {
               testAll({ integrationIds });
             }}
+            aria-label={t("widget.indexerManager.testAll")}
           >
-            <IconTestPipe size={12} />
+            <IconTestPipe size={14} />
           </ActionIcon>
-        )}
+        </Tooltip>
       </Group>
       <Card
         className={combineClasses("indexer-manager-list-container", classes.card)}
         w="100%"
-        p="xs"
+        p={isDense ? 4 : "xs"}
         radius={board.itemRadius}
         flex={1}
       >
@@ -114,7 +125,7 @@ export default function IndexerManagerWidget({
               )}
               {indexers.map((indexer) => (
                 <Group
-                  className={`indexer-manager-line indexer-manager-${indexer.name}`}
+                  className={`indexer-manager-line indexer-manager-${indexer.name} ${classes.indexerRow}`}
                   key={indexer.id}
                   justify="space-between"
                   gap="xs"
@@ -124,8 +135,15 @@ export default function IndexerManagerWidget({
                     className="indexer-manager-line-anchor"
                     href={indexer.url}
                     target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
+                    rel={options.openIndexerSiteInNewTab ? "noopener noreferrer" : undefined}
+                    style={{ minWidth: 0, flex: 1 }}
                   >
-                    <Text className="indexer-manager-line-anchor-text" c="dimmed" size={hasSmallWidth ? "xs" : "sm"}>
+                    <Text
+                      className="indexer-manager-line-anchor-text"
+                      c="dimmed"
+                      size={hasSmallWidth ? "xs" : "sm"}
+                      truncate="end"
+                    >
                       {indexer.name}
                     </Text>
                   </Anchor>
@@ -153,24 +171,6 @@ export default function IndexerManagerWidget({
           ))}
         </ScrollArea>
       </Card>
-      {!hasSmallHeight && (
-        <Button
-          className="indexer-manager-test-button"
-          w="100%"
-          size="xs"
-          radius={board.itemRadius}
-          variant="light"
-          leftSection={<IconTestPipe size={"1rem"} />}
-          loading={isPending}
-          disabled={isEditMode}
-          loaderProps={{ type: "dots" }}
-          onClick={() => {
-            testAll({ integrationIds });
-          }}
-        >
-          {t("widget.indexerManager.testAll")}
-        </Button>
-      )}
     </Flex>
   );
 }
diff --git a/packages/widgets/src/media-missing/component.module.css b/packages/widgets/src/media-missing/component.module.css
index 5b1c9f568..9068a25b3 100644
--- a/packages/widgets/src/media-missing/component.module.css
+++ b/packages/widgets/src/media-missing/component.module.css
@@ -5,10 +5,10 @@
   text-decoration: none;
   color: inherit;
   border: 1px solid var(--border-color);
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
   transition:
     border-color 120ms ease,
-    transform 120ms ease,
-    box-shadow 120ms ease;
+    background-color 120ms ease;
 
   @mixin dark {
     --border-color: var(--mantine-color-dark-4);
@@ -17,22 +17,16 @@
     --border-color: var(--mantine-color-gray-3);
   }
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     border-color: var(--mantine-primary-color-filled);
-    transform: translateY(-1px);
-    box-shadow: var(--mantine-shadow-sm);
+    background-color: var(--mantine-color-default-hover);
   }
-}
 
-.backdrop {
-  position: absolute;
-  inset: 0;
-  background-size: cover;
-  background-position: center;
-  filter: blur(20px) saturate(1.2);
-  transform: scale(1.3);
-  opacity: 0.16;
-  pointer-events: none;
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
 }
 
 .content {
@@ -47,3 +41,9 @@
   object-fit: cover;
   box-shadow: var(--mantine-shadow-sm);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .card {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-missing/component.tsx b/packages/widgets/src/media-missing/component.tsx
index c1bddb97b..b170b9061 100644
--- a/packages/widgets/src/media-missing/component.tsx
+++ b/packages/widgets/src/media-missing/component.tsx
@@ -295,9 +295,6 @@ const CardShell = ({
     p="xs"
     h={CARD_HEIGHT[density]}
   >
-    {item.imageUrl && (
-      <span className={classes.backdrop} style={{ backgroundImage: `url("${item.imageUrl}")` }} aria-hidden />
-    )}
     <div className={classes.content}>{children}</div>
   </Paper>
 );
diff --git a/packages/widgets/src/media-releases/component.module.css b/packages/widgets/src/media-releases/component.module.css
new file mode 100644
index 000000000..602f43ba1
--- /dev/null
+++ b/packages/widgets/src/media-releases/component.module.css
@@ -0,0 +1,24 @@
+.item {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: inherit;
+  text-align: start;
+  transition: background-color 120ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-releases/component.tsx b/packages/widgets/src/media-releases/component.tsx
index f768f7ed4..e90743f27 100644
--- a/packages/widgets/src/media-releases/component.tsx
+++ b/packages/widgets/src/media-releases/component.tsx
@@ -29,11 +29,13 @@ import type { TablerIcon } from "@homarr/ui";
 import { OverflowBadge } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import classes from "./component.module.css";
 
 export default function MediaReleasesWidget({
   options,
   integrationIds,
   width,
+  height,
   displayMode,
 }: WidgetComponentProps<"mediaReleases">) {
   const { data: releases = [] } = clientApi.widget.mediaRelease.getMediaReleases.useQuery({
@@ -48,7 +50,7 @@ export default function MediaReleasesWidget({
         {releases.map((item, index) => (
           <Fragment key={`${item.integration.id}:${item.id}`}>
             {!isAdvanced && index !== 0 && options.layout === "poster" && <Divider />}
-            <Item item={item} options={options} isAdvanced={isAdvanced} />
+            <Item item={item} options={options} isAdvanced={isAdvanced} width={width} height={height} />
           </Fragment>
         ))}
       </SimpleGrid>
@@ -60,25 +62,30 @@ interface ItemProps {
   item: RouterOutputs["widget"]["mediaRelease"]["getMediaReleases"][number];
   options: WidgetComponentProps<"mediaReleases">["options"];
   isAdvanced: boolean;
+  width: number;
+  height: number;
 }
 
-const formatReleaseDate = (value: unknown, locale: string) => {
+const formatReleaseDate = (value: unknown, locale: string, compact: boolean) => {
   const date = toValidDate(value);
   if (!date) return "—";
   return Intl.DateTimeFormat(locale, {
-    month: "2-digit",
+    month: compact ? "short" : "2-digit",
     year: "numeric",
     day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
+    ...(compact ? {} : { hour: "2-digit", minute: "2-digit", hour12: false }),
   }).format(date);
 };
 
-const Item = ({ item, options, isAdvanced }: ItemProps) => {
+const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
   const locale = useCurrentLocale();
   const t = useI18n();
   const length = formatLength(item.length, item.type, t);
+  const isCompact = !isAdvanced && (width < 340 || height < 180);
+  const isTiny = !isAdvanced && (width < 220 || height < 105);
+  const showPoster = (isAdvanced || options.layout === "poster") && !isTiny;
+  const showExtendedMetadata = isAdvanced || (!isCompact && width >= 360);
+  const showSide = isAdvanced || (!isTiny && (options.showType || options.showSource));
 
   return (
     <TooltipFloating
@@ -93,13 +100,15 @@ const Item = ({ item, options, isAdvanced }: ItemProps) => {
       }
     >
       <UnstyledButton
+        className={classes.item}
         component="a"
         href={item.href}
         target="_blank"
         rel="noopener noreferrer"
         pos="relative"
-        p={isAdvanced ? "sm" : options.layout === "poster" ? 0 : 4}
+        p={isAdvanced ? "sm" : options.layout === "poster" ? 4 : isTiny ? 4 : 6}
         h="100%"
+        title={item.title}
         style={
           isAdvanced
             ? {
@@ -126,57 +135,63 @@ const Item = ({ item, options, isAdvanced }: ItemProps) => {
             }}
           />
         )}
-        <Group justify="space-between" h="100%" wrap="nowrap">
-          <Group align="start" wrap="nowrap" style={{ zIndex: 0 }}>
-            {(isAdvanced || options.layout === "poster") && (
-              <Image w={isAdvanced ? 80 : 60} src={item.imageUrls.poster} alt={item.title} radius="xs" />
+        <Group justify="space-between" h="100%" wrap="nowrap" gap={isCompact ? "xs" : "sm"}>
+          <Group align="start" wrap="nowrap" style={{ zIndex: 0, minWidth: 0, flex: 1 }} gap="xs">
+            {showPoster && (
+              <Image
+                w={isAdvanced ? 80 : isCompact ? 44 : 60}
+                src={item.imageUrls.poster}
+                alt=""
+                radius="xs"
+                style={{ flexShrink: 0 }}
+              />
             )}
-            <Stack gap={4}>
+            <Stack gap={isCompact ? 2 : 4} style={{ minWidth: 0, flex: 1 }}>
               <Stack gap={0}>
-                <Text size="sm" fw="bold" lineClamp={2}>
+                <Text size={isTiny ? "xs" : "sm"} fw="bold" lineClamp={isCompact ? 1 : 2}>
                   {item.title}
                 </Text>
-                {item.subtitle !== undefined && (
-                  <Text size="sm" lineClamp={1}>
+                {item.subtitle !== undefined && !isTiny && (
+                  <Text size={isCompact ? "xs" : "sm"} c={isCompact ? "dimmed" : undefined} lineClamp={1}>
                     {item.subtitle}
                   </Text>
                 )}
               </Stack>
-              <Group gap={6} style={{ rowGap: 0 }}>
-                <Info icon={IconCalendar} label={formatReleaseDate(item.releaseDate, locale)} />
-                {length !== undefined && (
+              <Group gap={6} wrap="nowrap" style={{ minWidth: 0 }}>
+                <Info icon={IconCalendar} label={formatReleaseDate(item.releaseDate, locale, isCompact)} />
+                {length !== undefined && !isTiny && (
                   <>
                     <InfoDivider />
                     <Info icon={length.type === "duration" ? IconClock : IconBook} label={length.label} />
                   </>
                 )}
-                {item.producer !== undefined && (
+                {item.producer !== undefined && showExtendedMetadata && (
                   <>
                     <InfoDivider />
                     <Info label={item.producer} />
                   </>
                 )}
-                {item.rating !== undefined && (
+                {item.rating !== undefined && showExtendedMetadata && (
                   <>
                     <InfoDivider />
                     <Info icon={IconStarFilled} label={item.rating} />
                   </>
                 )}
-                {item.price !== undefined && (
+                {item.price !== undefined && showExtendedMetadata && (
                   <>
                     <InfoDivider />
                     <Info label={`$${item.price.toFixed(2)}`} />
                   </>
                 )}
               </Group>
-              {item.tags.length > 0 && (
+              {item.tags.length > 0 && (isAdvanced || !isCompact) && (
                 <OverflowBadge
                   size="xs"
                   groupGap={4}
                   data={item.tags}
                   overflowCount={3}
                   disablePopover={!isAdvanced}
-                  style={{ cursor: "pointer" }}
+                  style={{ cursor: isAdvanced ? "pointer" : undefined }}
                 />
               )}
               {isAdvanced && item.description && (
@@ -186,7 +201,7 @@ const Item = ({ item, options, isAdvanced }: ItemProps) => {
               )}
             </Stack>
           </Group>
-          {(isAdvanced || options.showType || options.showSource) && (
+          {showSide && (
             <Stack justify="space-between" align="end" h="100%" style={{ zIndex: 0 }}>
               {(isAdvanced || options.showType) && (
                 <Badge
@@ -223,9 +238,9 @@ const InfoDivider = () => (
 
 const Info = ({ icon: Icon, label }: IconAndLabelProps) => {
   return (
-    <Group gap={4}>
-      {Icon && <Icon size={12} color={getMantineColor("gray", 5)} />}
-      <Text size="xs" c="gray.5">
+    <Group gap={4} wrap="nowrap" miw={0}>
+      {Icon && <Icon size={12} color={getMantineColor("gray", 5)} style={{ flexShrink: 0 }} />}
+      <Text size="xs" c="dimmed" truncate="end">
         {label}
       </Text>
     </Group>
diff --git a/packages/widgets/src/media-requests/list/component.module.css b/packages/widgets/src/media-requests/list/component.module.css
new file mode 100644
index 000000000..6dc16de32
--- /dev/null
+++ b/packages/widgets/src/media-requests/list/component.module.css
@@ -0,0 +1,45 @@
+.card {
+  min-width: 0;
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--mantine-primary-color-filled);
+    background-color: var(--mantine-color-default-hover);
+  }
+}
+
+.pendingActions {
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity 120ms ease;
+}
+
+.card:hover .pendingActions,
+.card:focus-within .pendingActions,
+.pendingActionsVisible {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .pendingActions {
+    opacity: 1;
+  }
+}
+
+@media (pointer: coarse) {
+  .pendingActions button {
+    min-width: 36px;
+    min-height: 36px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card,
+  .pendingActions {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index 7017d3495..79d0184eb 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -17,7 +17,8 @@ import { WidgetEmptyState } from "../../common/empty-state";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
-import classes from "../search-button.module.css";
+import classes from "./component.module.css";
+import searchClasses from "../search-button.module.css";
 
 export default function MediaServerWidget({
   integrationIds,
@@ -46,7 +47,7 @@ export default function MediaServerWidget({
   if (mediaRequests.length === 0 && failedIntegrations.length === 0) throw new NoIntegrationDataError();
 
   return (
-    <Stack className={classes.searchRoot} gap={0}>
+    <Stack className={searchClasses.searchRoot} gap={0}>
       {!isEditMode && <MediaRequestSearchButton integrationIds={integrationIds} />}
       {failedIntegrations.length > 0 && (
         <Group px="sm" pt="xs">
@@ -64,6 +65,7 @@ export default function MediaServerWidget({
               key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
               request={mediaRequest}
               isTiny={displayMode !== "advanced" && (width <= 256 || height < 96)}
+              isDense={displayMode !== "advanced" && (width < 340 || height < 150)}
               isAdvanced={displayMode === "advanced"}
               canInteract={interactIntegrationIds.has(mediaRequest.integrationId)}
               options={options}
@@ -81,7 +83,7 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
   return (
     <Tooltip label={t("action.search.label")}>
       <ActionIcon
-        className={classes.searchButton}
+        className={searchClasses.searchButton}
         variant="light"
         size="sm"
         aria-label={t("action.search.label")}
@@ -96,33 +98,23 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
 interface MediaRequestCardProps {
   request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"]["requests"][number];
   isTiny: boolean;
+  isDense: boolean;
   isAdvanced: boolean;
   canInteract: boolean;
   options: WidgetComponentProps<"mediaRequests-requestList">["options"];
 }
 
-const MediaRequestCard = ({ request, isTiny, isAdvanced, canInteract, options }: MediaRequestCardProps) => {
+const MediaRequestCard = ({ request, isTiny, isDense, isAdvanced, canInteract, options }: MediaRequestCardProps) => {
   const board = useRequiredBoard();
   const t = useScopedI18n("widget.mediaRequests-requestList");
 
   return (
     <Card
-      className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${request.type} mediaRequests-list-item-${request.status}`}
+      className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${request.type} mediaRequests-list-item-${request.status} ${classes.card}`}
       radius={board.itemRadius}
-      p="xs"
+      p={isDense ? 6 : "xs"}
+      withBorder
     >
-      <Image
-        className="mediaRequests-list-item-background"
-        src={request.backdropImageUrl}
-        pos="absolute"
-        w="100%"
-        h="100%"
-        opacity={0.2}
-        top={0}
-        left={0}
-        alt=""
-      />
-
       <Group
         className="mediaRequests-list-item-contents"
         h="100%"
@@ -131,20 +123,55 @@ const MediaRequestCard = ({ request, isTiny, isAdvanced, canInteract, options }:
         wrap="nowrap"
         gap={0}
       >
-        <Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}>
+        <Group
+          className="mediaRequests-list-item-left-side"
+          h="100%"
+          gap={isDense ? "xs" : "md"}
+          wrap="nowrap"
+          flex={1}
+          miw={0}
+        >
           {!isTiny && (
             <Image
               className="mediaRequests-list-item-poster"
               src={request.posterImagePath}
-              h={40}
+              h={isDense ? 36 : 44}
               w="auto"
-              radius={"md"}
+              radius="sm"
+              alt=""
+              style={{ flexShrink: 0 }}
             />
           )}
 
-          <Stack gap={0} w="100%">
-            <Group justify="space-between" gap="xs" className="mediaRequests-list-item-top-group">
-              <Group gap="xs">
+          <Stack gap={2} w="100%" miw={0}>
+            <Group gap="xs" justify="space-between" wrap="nowrap" className="mediaRequests-list-item-top-group">
+              <Anchor
+                className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
+                href={request.href}
+                c="var(--mantine-color-text)"
+                target={options.linksTargetNewTab ? "_blank" : "_self"}
+                rel={options.linksTargetNewTab ? "noopener noreferrer" : undefined}
+                fz={isTiny ? "xs" : "sm"}
+                fw={600}
+                title={request.name}
+                truncate="end"
+                style={{ minWidth: 0, flex: 1 }}
+              >
+                {request.name || "unknown"}
+              </Anchor>
+              {request.status === "pending" ? (
+                <DecisionButtons
+                  requestId={request.id}
+                  integrationId={request.integrationId}
+                  canInteract={canInteract}
+                  alwaysVisible={isTiny}
+                />
+              ) : (
+                <StatusBadge status={request.status} />
+              )}
+            </Group>
+            <Group justify="space-between" gap="xs" wrap="nowrap" className="mediaRequests-list-item-bottom-group">
+              <Group gap={4} wrap="nowrap" miw={0}>
                 <Text className="mediaRequests-list-item-media-year" size="xs">
                   {toValidDate(request.airDate)?.getFullYear() ?? t("toBeDetermined")}
                 </Text>
@@ -164,46 +191,26 @@ const MediaRequestCard = ({ request, isTiny, isAdvanced, canInteract, options }:
                   </Badge>
                 )}
               </Group>
-              <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap">
-                <Avatar
-                  className="mediaRequests-list-item-request-user-avatar"
-                  src={request.requestedBy?.avatar}
-                  size="xs"
-                />
-                <Anchor
-                  className="mediaRequests-list-item-request-user-name"
-                  href={request.requestedBy?.link}
-                  c="var(--mantine-color-text)"
-                  target={options.linksTargetNewTab ? "_blank" : "_self"}
-                  fz="xs"
-                  lineClamp={1}
-                  style={{ wordBreak: "break-all" }}
-                >
-                  {(request.requestedBy?.displayName ?? "") || "unknown"}
-                </Anchor>
-              </Group>
-            </Group>
-            <Group gap="xs" justify="space-between" className="mediaRequests-list-item-bottom-group">
-              <Anchor
-                className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
-                href={request.href}
-                c="var(--mantine-color-text)"
-                target={options.linksTargetNewTab ? "_blank" : "_self"}
-                fz={isTiny ? "xs" : "sm"}
-                fw={"bold"}
-                title={request.name}
-                lineClamp={1}
-              >
-                {request.name || "unknown"}
-              </Anchor>
-              {request.status === "pending" ? (
-                <DecisionButtons
-                  requestId={request.id}
-                  integrationId={request.integrationId}
-                  canInteract={canInteract}
-                />
-              ) : (
-                <StatusBadge status={request.status} />
+              {!isTiny && (
+                <Group className="mediaRequests-list-item-request-user" gap={4} wrap="nowrap" miw={0}>
+                  <Avatar
+                    className="mediaRequests-list-item-request-user-avatar"
+                    src={request.requestedBy?.avatar}
+                    size={18}
+                  />
+                  <Anchor
+                    className="mediaRequests-list-item-request-user-name"
+                    href={request.requestedBy?.link}
+                    c="dimmed"
+                    target={options.linksTargetNewTab ? "_blank" : "_self"}
+                    rel={options.linksTargetNewTab ? "noopener noreferrer" : undefined}
+                    fz="xs"
+                    truncate="end"
+                    style={{ minWidth: 0, maxWidth: isAdvanced ? 180 : 100 }}
+                  >
+                    {(request.requestedBy?.displayName ?? "") || "unknown"}
+                  </Anchor>
+                </Group>
               )}
             </Group>
           </Stack>
@@ -217,9 +224,10 @@ interface DecisionButtonsProps {
   requestId: number;
   integrationId: string;
   canInteract: boolean;
+  alwaysVisible: boolean;
 }
 
-const DecisionButtons = ({ requestId, integrationId, canInteract }: DecisionButtonsProps) => {
+const DecisionButtons = ({ requestId, integrationId, canInteract, alwaysVisible }: DecisionButtonsProps) => {
   const utils = clientApi.useUtils();
   const {
     mutate: mutateRequestAnswer,
@@ -239,13 +247,18 @@ const DecisionButtons = ({ requestId, integrationId, canInteract }: DecisionButt
   };
 
   return (
-    <Group className="mediaRequests-list-item-pending-buttons" gap="sm" title={error?.message}>
+    <Group
+      className={`mediaRequests-list-item-pending-buttons ${classes.pendingActions} ${alwaysVisible ? classes.pendingActionsVisible : ""}`}
+      gap={4}
+      wrap="nowrap"
+      title={error?.message}
+    >
       <Tooltip label={t("pending.approve")}>
         <ActionIcon
           className="mediaRequests-list-item-pending-button-approve"
           variant="light"
           color="green"
-          size="xs"
+          size="sm"
           disabled={!canInteract || isPending}
           aria-label={t("pending.approve")}
           onClick={() => {
@@ -260,7 +273,7 @@ const DecisionButtons = ({ requestId, integrationId, canInteract }: DecisionButt
           className="mediaRequests-list-item-pending-button-decline"
           variant="light"
           color="red"
-          size="xs"
+          size="sm"
           disabled={!canInteract || isPending}
           aria-label={t("pending.decline")}
           onClick={() => {
diff --git a/packages/widgets/src/media-requests/stats/component.module.css b/packages/widgets/src/media-requests/stats/component.module.css
index 1ab18a656..913c196c4 100644
--- a/packages/widgets/src/media-requests/stats/component.module.css
+++ b/packages/widgets/src/media-requests/stats/component.module.css
@@ -5,3 +5,25 @@
 [data-mantine-color-scheme="dark"] .card {
   background-color: var(--mantine-color-dark-7);
 }
+
+.userCard {
+  color: inherit;
+  text-decoration: none;
+  transition: background-color 120ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .userCard {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
index 9ced6ceb2..be1a69e54 100644
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -97,6 +97,7 @@ export default function MediaServerWidget({
   ] satisfies { name: keyof RequestStats; icon: Icon; number: number }[];
 
   const isTiny = displayMode !== "advanced" && (width < 256 || height < 180);
+  const showSectionTitles = displayMode === "advanced" || height >= 180;
   const visibleStats = displayMode === "advanced" ? data : data.slice(0, height < 120 ? 4 : 8);
   const visibleUsers = requestStats.users.slice(
     0,
@@ -119,9 +120,11 @@ export default function MediaServerWidget({
         style={{ pointerEvents: isEditMode ? "none" : undefined }}
       >
         <Stack gap={4} w="100%">
-          <Text className="mediaRequests-stats-stats-title" fw="bold" ta="center" size={isTiny ? "xs" : "sm"}>
-            {t("titles.stats.main")}
-          </Text>
+          {showSectionTitles && (
+            <Text className="mediaRequests-stats-stats-title" fw={600} ta="center" size={isTiny ? "xs" : "sm"}>
+              {t("titles.stats.main")}
+            </Text>
+          )}
           <Grid className="mediaRequests-stats-stats-grid" gap={4} w="100%">
             {visibleStats.map((stat) => (
               <Grid.Col
@@ -144,9 +147,11 @@ export default function MediaServerWidget({
           </Grid>
         </Stack>
         <Stack gap={4} w="100%">
-          <Text className="mediaRequests-stats-users-title" fw="bold" ta="center" size={isTiny ? "xs" : "sm"}>
-            {t("titles.users.main")} ({t("titles.users.requests")})
-          </Text>
+          {showSectionTitles && (
+            <Text className="mediaRequests-stats-users-title" fw={600} ta="center" size={isTiny ? "xs" : "sm"}>
+              {t("titles.users.main")} ({t("titles.users.requests")})
+            </Text>
+          )}
           <ScrollArea className="mediaRequests-stats-users-wrapper" flex={1} w="100%">
             <Stack gap={4}>
               {visibleUsers.map((user) => (
@@ -159,6 +164,7 @@ export default function MediaServerWidget({
                     "mediaRequests-stats-users-user-wrapper",
                     `mediaRequests-stats-users-user-${user.id}`,
                     classes.card,
+                    classes.userCard,
                   )}
                   key={`${user.integration.id}:${user.id}`}
                   p="xs"
@@ -171,7 +177,7 @@ export default function MediaServerWidget({
                     gap="sm"
                     justify="space-between"
                   >
-                    <Group gap={4}>
+                    <Group gap={4} wrap="nowrap" miw={0}>
                       <Tooltip label={user.integration.name}>
                         <Avatar
                           className="mediaRequests-stats-users-user-avatar"
@@ -180,7 +186,7 @@ export default function MediaServerWidget({
                           bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
                         />
                       </Tooltip>
-                      <Text className="mediaRequests-stats-users-user-userName" size="sm">
+                      <Text className="mediaRequests-stats-users-user-userName" size="sm" truncate="end">
                         {user.displayName}
                       </Text>
                     </Group>
diff --git a/packages/widgets/src/media-server/component.module.css b/packages/widgets/src/media-server/component.module.css
new file mode 100644
index 000000000..3987924f4
--- /dev/null
+++ b/packages/widgets/src/media-server/component.module.css
@@ -0,0 +1,13 @@
+.sessionRow {
+  cursor: pointer;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index ff2acd148..862376d1b 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -26,6 +26,7 @@ import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import classes from "./component.module.css";
 
 type TranscodingDecision = NonNullable<NonNullable<StreamSession["currentlyPlaying"]>["metadata"]>["transcoding"];
 
@@ -265,19 +266,26 @@ export default function MediaServerWidget({
         pointerEvents: isEditMode ? "none" : undefined,
       },
     },
-    mantineTableBodyCellProps: ({ row }) => ({
-      onClick: isEditMode
-        ? undefined
-        : () => {
-            openModal(
-              {
-                item: row.original,
-              },
-              {
-                title: row.original.sessionName,
-              },
-            );
-          },
+    mantineTableBodyRowProps: ({ row }) => {
+      const openDetails = () => {
+        openModal({ item: row.original }, { title: row.original.sessionName });
+      };
+
+      return {
+        className: isEditMode ? undefined : classes.sessionRow,
+        tabIndex: isEditMode ? -1 : 0,
+        "aria-label": row.original.sessionName,
+        onClick: isEditMode ? undefined : openDetails,
+        onKeyDown: isEditMode
+          ? undefined
+          : (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              openDetails();
+            },
+      };
+    },
+    mantineTableBodyCellProps: () => ({
       py: 4,
       style: {
         overflowX: "hidden",
@@ -330,7 +338,7 @@ export default function MediaServerWidget({
         </Group>
       )}
       <MantineReactTable table={table} />
-      {(isAdvanced || height >= 96) && (
+      {(isAdvanced || height >= 144) && (
         <Group
           gap="xs"
           h={30}
@@ -348,7 +356,7 @@ export default function MediaServerWidget({
                 count: flatSessions.length,
               })}
             </Text>
-            {totalBitrateLabel && (
+            {totalBitrateLabel && (isAdvanced || width >= 300) && (
               <Text size="sm" c="dimmed" style={{ whiteSpace: "nowrap" }}>
                 {t("footer.totalBitrate", { bitrate: totalBitrateLabel })}
               </Text>
@@ -358,9 +366,11 @@ export default function MediaServerWidget({
             {uniqueIntegrations.map((integration) => (
               <Group key={integration.integrationId} gap="xs" align="center">
                 <Avatar className="media-server-icon" src={integration.integrationIcon} radius={"xs"} size="xs" />
-                <Text className="media-server-name" size="sm">
-                  {integration.integrationName}
-                </Text>
+                {(isAdvanced || width >= 480) && (
+                  <Text className="media-server-name" size="sm" truncate="end">
+                    {integration.integrationName}
+                  </Text>
+                )}
               </Group>
             ))}
           </Group>
diff --git a/packages/widgets/src/media-transcoding/component.tsx b/packages/widgets/src/media-transcoding/component.tsx
index 9949cbab8..724ddc05a 100644
--- a/packages/widgets/src/media-transcoding/component.tsx
+++ b/packages/widgets/src/media-transcoding/component.tsx
@@ -14,6 +14,7 @@ import {
   SimpleGrid,
   Stack,
   Text,
+  VisuallyHidden,
 } from "@mantine/core";
 import { IconClipboardList, IconCpu2, IconReportAnalytics } from "@tabler/icons-react";
 
@@ -90,7 +91,7 @@ export default function MediaTranscodingWidget({
   if (!transcodingData) return <WidgetEmptyState />;
 
   const queuePageCount = totalQueuePages ?? 1;
-  const isTiny = !isAdvanced && width < 256;
+  const isTiny = !isAdvanced && (width < 280 || height < 140);
 
   if (isAdvanced) {
     return (
@@ -134,7 +135,9 @@ export default function MediaTranscodingWidget({
               label: (
                 <Center style={{ gap: 4 }}>
                   <Icon size={12} />
-                  {!isTiny && (
+                  {isTiny ? (
+                    <VisuallyHidden>{t(`tab.${value}`)}</VisuallyHidden>
+                  ) : (
                     <Text span size="xs">
                       {t(`tab.${value}`)}
                     </Text>
diff --git a/packages/widgets/src/media-transcoding/health-check-status.tsx b/packages/widgets/src/media-transcoding/health-check-status.tsx
index 24a8100d3..9f10ddf27 100644
--- a/packages/widgets/src/media-transcoding/health-check-status.tsx
+++ b/packages/widgets/src/media-transcoding/health-check-status.tsx
@@ -1,5 +1,5 @@
 import type { MantineColor } from "@mantine/core";
-import { Divider, Group, HoverCard, Indicator, RingProgress, Stack, Text } from "@mantine/core";
+import { ActionIcon, Divider, Group, Indicator, Popover, RingProgress, Stack, Text } from "@mantine/core";
 import { useColorScheme } from "@mantine/hooks";
 import { IconHeartbeat } from "@tabler/icons-react";
 
@@ -21,13 +21,15 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
       : "green";
 
   return (
-    <HoverCard position="bottom" width={250} shadow="sm">
-      <HoverCard.Target>
-        <Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
-          <IconHeartbeat size={16} />
-        </Indicator>
-      </HoverCard.Target>
-      <HoverCard.Dropdown
+    <Popover position="bottom" width={250} shadow="sm" withArrow>
+      <Popover.Target>
+        <ActionIcon variant="subtle" size="sm" aria-label={t("title")}>
+          <Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
+            <IconHeartbeat size={16} />
+          </Indicator>
+        </ActionIcon>
+      </Popover.Target>
+      <Popover.Dropdown
         style={{
           backgroundColor: "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-8))",
         }}
@@ -70,8 +72,8 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
             </Stack>
           </Group>
         </Stack>
-      </HoverCard.Dropdown>
-    </HoverCard>
+      </Popover.Dropdown>
+    </Popover>
   );
 }
 
diff --git a/packages/widgets/src/minecraft/server-status/component.tsx b/packages/widgets/src/minecraft/server-status/component.tsx
index 2f33ebb19..303b8f614 100644
--- a/packages/widgets/src/minecraft/server-status/component.tsx
+++ b/packages/widgets/src/minecraft/server-status/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge, Box, Flex, Group, Progress, Stack, Text, Tooltip } from "@mantine/core";
+import { Badge, Box, Flex, Group, Progress, Stack, Text, Tooltip, VisuallyHidden } from "@mantine/core";
 import { IconCube, IconUsersGroup } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -16,14 +16,25 @@ export default function MinecraftServerStatusWidget({
   height,
   displayMode,
 }: WidgetComponentProps<"minecraftServerStatus">) {
-  const { data: result } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
+  const { data: result, isPending } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
   const t = useI18n();
 
+  if (isPending) {
+    return (
+      <Flex align="center" justify="center" h="100%">
+        <Text c="dimmed" size="sm">
+          {t("common.action.loading")}
+        </Text>
+      </Flex>
+    );
+  }
   if (!result) return <WidgetEmptyState />;
   const { data } = result;
 
   const title = options.title.trim().length > 0 ? options.title : options.domain;
   const isAdvanced = displayMode === "advanced";
+  const isDense = !isAdvanced && (width < 220 || height < 120);
+  const showServerIcon = isAdvanced || (!isDense && height >= 144);
   const iconSize = Math.max(40, Math.min(isAdvanced ? 128 : 80, width * 0.45, height * 0.45));
   const playerPercent = data.online && data.players.max > 0 ? (data.players.online / data.players.max) * 100 : 0;
 
@@ -33,11 +44,11 @@ export default function MinecraftServerStatusWidget({
       h="100%"
       w="100%"
       direction="column"
-      p={isAdvanced ? "lg" : "sm"}
+      p={isAdvanced ? "lg" : isDense ? "xs" : "sm"}
       justify="center"
       align="center"
     >
-      <Group gap="xs" wrap="nowrap" align="center">
+      <Group gap="xs" wrap="nowrap" align="center" maw="100%">
         <Tooltip
           label={
             data.online
@@ -45,8 +56,13 @@ export default function MinecraftServerStatusWidget({
               : t("widget.minecraftServerStatus.status.offline")
           }
         >
-          <Box miw="md" h="md" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }}></Box>
+          <Box aria-hidden miw="md" h="md" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }} />
         </Tooltip>
+        <VisuallyHidden>
+          {data.online
+            ? t("widget.minecraftServerStatus.status.online")
+            : t("widget.minecraftServerStatus.status.offline")}
+        </VisuallyHidden>
         <Text size={isAdvanced ? "xl" : "md"} fw="bold" truncate="end">
           {title}
         </Text>
@@ -62,6 +78,7 @@ export default function MinecraftServerStatusWidget({
       {data.online && (
         <>
           {!options.isBedrockServer &&
+            showServerIcon &&
             (data.icon ? (
               <img
                 style={{ flex: 1, width: iconSize, maxHeight: iconSize, objectFit: "contain" }}
@@ -83,7 +100,7 @@ export default function MinecraftServerStatusWidget({
           <Stack gap={4} w={isAdvanced ? "min(100%, 420px)" : "auto"} align="stretch">
             <Group gap={5} c="dimmed" align="center" justify="center">
               <IconUsersGroup size={isAdvanced ? "1.25rem" : "1rem"} />
-              <Text size={isAdvanced ? "lg" : "md"}>
+              <Text size={isAdvanced ? "lg" : isDense ? "sm" : "md"}>
                 {formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
               </Text>
             </Group>
diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx
index 6bfa59407..d931df9fb 100644
--- a/packages/widgets/src/network-controller/network-status/component.tsx
+++ b/packages/widgets/src/network-controller/network-status/component.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { useMemo } from "react";
-import { Box, Card, SimpleGrid } from "@mantine/core";
+import { Box, Card, Center, SimpleGrid, Text } from "@mantine/core";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import objectSupport from "dayjs/plugin/objectSupport";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 import { WifiVariant } from "./variants/wifi-variant";
@@ -22,10 +23,12 @@ export default function NetworkControllerNetworkStatusWidget({
   integrationIds,
   displayMode,
   width,
+  height,
 }: WidgetComponentProps<"networkControllerStatus">) {
-  const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
+  const { data: summaries = [], isPending } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
+  const t = useI18n();
 
   const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
   const isAdvanced = displayMode === "advanced";
@@ -33,18 +36,39 @@ export default function NetworkControllerNetworkStatusWidget({
   const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
   const countLanGuests = data.reduce((sum, summary) => sum + summary.lan.guests, 0);
   const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
+  const useHorizontalStats = !isAdvanced && height < 150 && width >= 200;
+
+  if (isPending || data.length === 0) {
+    return (
+      <Center h="100%" p="sm">
+        <Text c="dimmed" size="sm" ta="center">
+          {isPending ? t("common.action.loading") : t("widget.networkControllerStatus.error.integrationsDisconnected")}
+        </Text>
+      </Center>
+    );
+  }
 
   return (
-    <Box p={isAdvanced ? "md" : "sm"} h="100%">
+    <Box p={isAdvanced ? "md" : height < 120 ? "xs" : "sm"} h="100%">
       <SimpleGrid cols={isAdvanced && width >= 560 ? 2 : 1} h="100%" spacing="sm">
         {(isAdvanced || options.content === "wifi") && (
           <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
-            <WifiVariant countGuests={countWifiGuests} countUsers={countWifiUsers} compact={!isAdvanced} />
+            <WifiVariant
+              countGuests={countWifiGuests}
+              countUsers={countWifiUsers}
+              compact={!isAdvanced}
+              horizontal={useHorizontalStats}
+            />
           </Card>
         )}
         {(isAdvanced || options.content === "wired") && (
           <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
-            <WiredVariant countGuests={countLanGuests} countUsers={countLanUsers} compact={!isAdvanced} />
+            <WiredVariant
+              countGuests={countLanGuests}
+              countUsers={countLanUsers}
+              compact={!isAdvanced}
+              horizontal={useHorizontalStats}
+            />
           </Card>
         )}
       </SimpleGrid>
diff --git a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
index 9560c984a..ebcfbe2d9 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wifi-variant.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack, Text } from "@mantine/core";
+import { Group, SimpleGrid, Text } from "@mantine/core";
 import { IconWifi } from "@tabler/icons-react";
 
 import { useScopedI18n } from "@homarr/translation/client";
@@ -9,10 +9,12 @@ export const WifiVariant = ({
   countGuests,
   countUsers,
   compact = false,
+  horizontal = false,
 }: {
   countUsers: number;
   countGuests: number;
   compact?: boolean;
+  horizontal?: boolean;
 }) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
@@ -23,10 +25,10 @@ export const WifiVariant = ({
           {t("variants.wifi.name")}
         </Text>
       </Group>
-      <Stack gap={compact ? "sm" : "lg"}>
+      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"}>
         <StatRow label={t("users.label")} value={countUsers} compact={compact} />
         <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
-      </Stack>
+      </SimpleGrid>
     </>
   );
 };
diff --git a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
index 46ca76a83..ff19d41e2 100644
--- a/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
+++ b/packages/widgets/src/network-controller/network-status/variants/wired-variant.tsx
@@ -1,4 +1,4 @@
-import { Group, Stack, Text } from "@mantine/core";
+import { Group, SimpleGrid, Text } from "@mantine/core";
 import { IconNetwork } from "@tabler/icons-react";
 
 import { useScopedI18n } from "@homarr/translation/client";
@@ -9,10 +9,12 @@ export const WiredVariant = ({
   countGuests,
   countUsers,
   compact = false,
+  horizontal = false,
 }: {
   countUsers: number;
   countGuests: number;
   compact?: boolean;
+  horizontal?: boolean;
 }) => {
   const t = useScopedI18n("widget.networkControllerStatus.card");
   return (
@@ -23,10 +25,10 @@ export const WiredVariant = ({
           {t("variants.wired.name")}
         </Text>
       </Group>
-      <Stack gap={compact ? "sm" : "lg"}>
+      <SimpleGrid cols={horizontal ? 2 : 1} spacing={compact ? "sm" : "lg"}>
         <StatRow label={t("users.label")} value={countUsers} compact={compact} />
         <StatRow label={t("guests.label")} value={countGuests} compact={compact} />
-      </Stack>
+      </SimpleGrid>
     </>
   );
 };
diff --git a/packages/widgets/src/network-controller/summary/component.tsx b/packages/widgets/src/network-controller/summary/component.tsx
index 86075dc0b..2d123ab5d 100644
--- a/packages/widgets/src/network-controller/summary/component.tsx
+++ b/packages/widgets/src/network-controller/summary/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge, Card, Group, List, ScrollArea, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
+import { Badge, Card, Center, Group, List, ScrollArea, SimpleGrid, Stack, Text, useMantineTheme } from "@mantine/core";
 import { IconCircleCheckFilled, IconCircleXFilled } from "@tabler/icons-react";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
@@ -19,19 +19,31 @@ dayjs.extend(duration);
 export default function NetworkControllerSummaryWidget({
   integrationIds,
   width,
+  height,
   displayMode,
 }: WidgetComponentProps<"networkControllerSummary">) {
-  const { data: summaries = [] } = clientApi.widget.networkController.summary.useQuery({
+  const { data: summaries = [], isPending } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
 
   const t = useI18n();
 
   const isAdvanced = displayMode === "advanced";
+  const isDense = !isAdvanced && height < 160;
   const columns = isAdvanced && width >= 720 ? 2 : 1;
 
+  if (isPending || summaries.length === 0) {
+    return (
+      <Center h="100%" p="sm">
+        <Text c="dimmed" size="sm" ta="center">
+          {isPending ? t("common.action.loading") : t("widget.networkControllerSummary.error.integrationsDisconnected")}
+        </Text>
+      </Center>
+    );
+  }
+
   return (
-    <ScrollArea h="100%" p={isAdvanced ? "md" : "sm"}>
+    <ScrollArea h="100%" p={isAdvanced ? "md" : isDense ? "xs" : "sm"}>
       <SimpleGrid cols={columns} spacing="sm">
         {summaries.map(({ integration, summary }) => (
           <Card key={integration.id} p={isAdvanced ? "md" : "xs"} withBorder={summaries.length > 1 || isAdvanced}>
@@ -46,9 +58,9 @@ export default function NetworkControllerSummaryWidget({
                   </Badge>
                 </Group>
               )}
-              <List spacing="xs" center>
-                <List.Item icon={<StatusIcon status={summary.wanStatus} />}>WAN</List.Item>
-                <List.Item icon={<StatusIcon status={summary.www.status} />}>
+              <List spacing={isDense ? 2 : "xs"} center size={isDense ? "sm" : undefined}>
+                <List.Item icon={<StatusIcon status={summary.wanStatus} size={isDense ? 16 : 20} />}>WAN</List.Item>
+                <List.Item icon={<StatusIcon status={summary.www.status} size={isDense ? 16 : 20} />}>
                   <Text>
                     WWW
                     <Text c="dimmed" size="sm" ms="xs" span>
@@ -56,15 +68,15 @@ export default function NetworkControllerSummaryWidget({
                     </Text>
                   </Text>
                 </List.Item>
-                <List.Item icon={<StatusIcon status={summary.wifi.status} />}>
+                <List.Item icon={<StatusIcon status={summary.wifi.status} size={isDense ? 16 : 20} />}>
                   Wi-Fi{isAdvanced ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
                 </List.Item>
                 {isAdvanced && (
-                  <List.Item icon={<StatusIcon status={summary.lan.status} />}>
+                  <List.Item icon={<StatusIcon status={summary.lan.status} size={20} />}>
                     LAN · {summary.lan.users + summary.lan.guests}
                   </List.Item>
                 )}
-                <List.Item icon={<StatusIcon status={summary.vpn.status} />}>
+                <List.Item icon={<StatusIcon status={summary.vpn.status} size={isDense ? 16 : 20} />}>
                   <Text>
                     VPN
                     <Text c="dimmed" size="sm" ms="xs" span>
@@ -81,11 +93,13 @@ export default function NetworkControllerSummaryWidget({
   );
 }
 
-const StatusIcon = ({ status }: { status?: "enabled" | "disabled" }) => {
+const StatusIcon = ({ status, size }: { status?: "enabled" | "disabled"; size: number }) => {
   const mantineTheme = useMantineTheme();
   if (status === "enabled") {
-    return <IconCircleCheckFilled size={20} color={mantineTheme.colors.green[6]} />;
+    return <IconCircleCheckFilled aria-label={status} size={size} color={mantineTheme.colors.green[6]} />;
   }
-  if (status === "disabled") return <IconCircleXFilled size={20} color={mantineTheme.colors.red[6]} />;
-  return <IconCircleXFilled size={20} color={mantineTheme.colors.gray[6]} />;
+  if (status === "disabled") {
+    return <IconCircleXFilled aria-label={status} size={size} color={mantineTheme.colors.red[6]} />;
+  }
+  return <IconCircleXFilled aria-label="unknown" size={size} color={mantineTheme.colors.gray[6]} />;
 };
diff --git a/packages/widgets/src/notebook/notebook.css b/packages/widgets/src/notebook/notebook.css
index 6b8054367..002195400 100644
--- a/packages/widgets/src/notebook/notebook.css
+++ b/packages/widgets/src/notebook/notebook.css
@@ -70,3 +70,31 @@
 .ProseMirror {
   height: 100%;
 }
+
+.homarr-notebook-action {
+  opacity: 0;
+  transform: translateX(2px);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.homarr-notebook:hover .homarr-notebook-action,
+.homarr-notebook:focus-within .homarr-notebook-action,
+.homarr-notebook-action[data-visible="true"] {
+  opacity: 1;
+  transform: none;
+}
+
+@media (any-pointer: coarse) {
+  .homarr-notebook-action {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .homarr-notebook-action {
+    transition: none;
+  }
+}
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 720ded0a0..53a334189 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -341,7 +341,7 @@ export function Notebook({
   };
 
   return (
-    <Box h="100%" onDoubleClick={handleDoubleClick}>
+    <Box className="homarr-notebook" h="100%" onDoubleClick={handleDoubleClick}>
       <RichTextEditor
         p={0}
         mt={0}
@@ -528,6 +528,8 @@ export function Notebook({
       {canChange && (
         <>
           <ActionIcon
+            className="homarr-notebook-action"
+            data-visible={isEditing || displayMode === "advanced" || undefined}
             title={isEditing ? t("common.action.save") : t("common.action.edit")}
             aria-label={isEditing ? t("common.action.save") : t("common.action.edit")}
             style={{
@@ -547,6 +549,8 @@ export function Notebook({
           </ActionIcon>
           {isEditing && (
             <ActionIcon
+              className="homarr-notebook-action"
+              data-visible
               title={t("common.action.cancel")}
               aria-label={t("common.action.cancel")}
               style={{
diff --git a/packages/widgets/src/notifications/component.tsx b/packages/widgets/src/notifications/component.tsx
index 421471956..a20809c51 100644
--- a/packages/widgets/src/notifications/component.tsx
+++ b/packages/widgets/src/notifications/component.tsx
@@ -15,9 +15,10 @@ export default function NotificationsWidget({
   options,
   integrationIds,
   width,
+  height,
   displayMode,
 }: WidgetComponentProps<"notifications">) {
-  const { data: notificationIntegrations = [] } = clientApi.widget.notifications.getNotifications.useQuery({
+  const { data: notificationIntegrations = [], isPending } = clientApi.widget.notifications.getNotifications.useQuery({
     ...options,
     integrationIds,
   });
@@ -43,6 +44,8 @@ export default function NotificationsWidget({
     (integration): integration is typeof integration & { error: string } => Boolean(integration.error),
   );
   const isAdvanced = displayMode === "advanced";
+  const isDense = !isAdvanced && (width < 280 || height < 180);
+  const bodyLineClamp = isAdvanced ? 12 : height < 112 ? 1 : isDense ? 2 : 4;
   const columns = isAdvanced && width >= 720 ? 2 : 1;
 
   return (
@@ -59,7 +62,13 @@ export default function NotificationsWidget({
             ))}
           </Group>
         )}
-        {sortedNotifications.length > 0 ? (
+        {isPending ? (
+          <Flex justify="center" align="center" mih={96} p="sm">
+            <Text size="sm" c="dimmed" ta="center">
+              {t("common.action.loading")}
+            </Text>
+          </Flex>
+        ) : sortedNotifications.length > 0 ? (
           <SimpleGrid cols={columns} spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
             {sortedNotifications.map((notification) => (
               <Card
@@ -70,32 +79,45 @@ export default function NotificationsWidget({
                 rel={notification.href ? "noopener noreferrer" : undefined}
                 radius={board.itemRadius}
                 w="100%"
-                p={isAdvanced ? "md" : "xs"}
-                style={{ color: "inherit", textDecoration: "none" }}
+                p={isAdvanced ? "md" : isDense ? 6 : "xs"}
+                bg={isAdvanced ? undefined : "transparent"}
+                style={{
+                  color: "inherit",
+                  textDecoration: "none",
+                  borderBottom: isAdvanced
+                    ? undefined
+                    : "1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))",
+                }}
               >
-                <Flex gap="sm" align="flex-start" w="100%">
+                <Flex gap={isDense ? "xs" : "sm"} align="flex-start" w="100%">
                   {!options.hideLogos && notification.source?.iconUrl && (
                     <Avatar
                       src={notification.source.iconUrl}
                       alt={notification.source.name}
-                      size="sm"
+                      size={isDense ? "xs" : "sm"}
                       radius={board.itemRadius}
                     />
                   )}
 
-                  <Flex gap={isAdvanced ? "sm" : 6} direction="column" w="100%" miw={0}>
+                  <Flex gap={isAdvanced ? "sm" : isDense ? 4 : 6} direction="column" w="100%" miw={0}>
                     {notification.title && (
-                      <Text fz={isAdvanced ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
+                      <Text fz={isAdvanced ? "md" : "sm"} fw={600} lh={1.25} lineClamp={isDense ? 1 : 2}>
                         {notification.title}
                       </Text>
                     )}
-                    <Text c="dimmed" size="sm" lineClamp={isAdvanced ? 12 : 4} style={{ whiteSpace: "pre-line" }}>
+                    <Text
+                      c="dimmed"
+                      size={isDense ? "xs" : "sm"}
+                      lineClamp={bodyLineClamp}
+                      style={{ whiteSpace: "pre-line" }}
+                    >
                       {notification.body}
                     </Text>
 
                     <InfoDisplay
                       date={notification.time}
                       source={isAdvanced ? (notification.source?.name ?? notification.integrationName) : undefined}
+                      dense={isDense}
                     />
                   </Flex>
                 </Flex>
@@ -103,22 +125,24 @@ export default function NotificationsWidget({
             ))}
           </SimpleGrid>
         ) : (
-          <Text size="sm" c="dimmed">
-            {t("widget.notifications.noItems")}
-          </Text>
+          <Flex justify="center" align="center" mih={96} p="sm">
+            <Text size="sm" c="dimmed" ta="center">
+              {t("widget.notifications.noItems")}
+            </Text>
+          </Flex>
         )}
       </Stack>
     </ScrollArea>
   );
 }
 
-const InfoDisplay = ({ date, source }: { date: Date; source?: string }) => {
+const InfoDisplay = ({ date, source, dense }: { date: Date; source?: string; dense: boolean }) => {
   const timeAgo = useTimeAgo(date, 30000); // update every 30sec
 
   return (
     <Group gap={5} align="center" wrap="nowrap">
-      <IconClock size={"1rem"} color={"var(--mantine-color-dimmed)"} />
-      <Text size="sm" c="dimmed">
+      <IconClock aria-hidden size={dense ? 12 : "1rem"} color="var(--mantine-color-dimmed)" />
+      <Text size={dense ? "xs" : "sm"} c="dimmed">
         {timeAgo}
       </Text>
       {source && <Text c="dimmed">•</Text>}
diff --git a/packages/widgets/src/paperless-ngx/component.tsx b/packages/widgets/src/paperless-ngx/component.tsx
index 4744c1bec..e0d08e49e 100644
--- a/packages/widgets/src/paperless-ngx/component.tsx
+++ b/packages/widgets/src/paperless-ngx/component.tsx
@@ -2,7 +2,7 @@
 
 import { Fragment } from "react";
 import type { CSSProperties } from "react";
-import { RingProgress, Text } from "@mantine/core";
+import { Center, RingProgress, Text } from "@mantine/core";
 import { IconFileDescription, IconFileText, IconInbox, IconTag, IconUsers } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -78,10 +78,20 @@ export default function PaperlessNgxWidget({
   displayMode = "compact",
 }: WidgetComponentProps<"paperlessNgx">) {
   const t = useScopedI18n("widget.paperlessNgx");
-  const { data: stats } = clientApi.widget.paperlessNgx.getStats.useQuery({
+  const tCommon = useScopedI18n("common");
+  const { data: stats, isPending } = clientApi.widget.paperlessNgx.getStats.useQuery({
     integrationId: integrationIds[0] ?? "",
   });
 
+  if (isPending) {
+    return (
+      <Center h="100%">
+        <Text c="dimmed" size="sm">
+          {tCommon("action.loading")}
+        </Text>
+      </Center>
+    );
+  }
   if (!stats) return <WidgetEmptyState />;
 
   const canShowInboxHero = options.showDocumentsInbox && options.showDocumentsTotal;
diff --git a/packages/widgets/src/releases/component.module.scss b/packages/widgets/src/releases/component.module.scss
index 9d41454cb..caafaa929 100644
--- a/packages/widgets/src/releases/component.module.scss
+++ b/packages/widgets/src/releases/component.module.scss
@@ -7,20 +7,41 @@
 }
 
 .releasesRepositoryHeader {
+  width: 100%;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: start;
   user-select: none;
   cursor: pointer;
 
   &:hover,
   &.active,
+  &:focus-visible,
   &:has(~ .releasesRepositoryDetails:hover) {
     background-color: var(--mantine-color-secondaryColor-light);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
 }
 
 .releasesRepositoryDetails {
+  width: 100%;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  text-align: start;
   background-color: var(--mantine-color-default-hover);
   user-select: none;
   cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
 }
 
 .releasesRepositoryExpanded {
diff --git a/packages/widgets/src/releases/component.tsx b/packages/widgets/src/releases/component.tsx
index c0f89c924..2c7470875 100644
--- a/packages/widgets/src/releases/component.tsx
+++ b/packages/widgets/src/releases/component.tsx
@@ -1,7 +1,18 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import { Button, Divider, Group, ScrollArea, SimpleGrid, Stack, Text, Title, Tooltip } from "@mantine/core";
+import {
+  Button,
+  Divider,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+  UnstyledButton,
+} from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
 import {
   IconArchive,
@@ -204,105 +215,111 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
                   : undefined
               }
             >
-              <Group
+              <UnstyledButton
                 className={combineClasses("releases-repository-header", classes.releasesRepositoryHeader, {
                   [classes.active ?? ""]: isActive,
                 })}
-                p="xs"
                 onClick={() => toggleExpandedDisplay(repository)}
+                aria-expanded={isActive}
               >
-                <MaskedOrNormalImage
-                  className="releases-repository-header-icon"
-                  imageUrl={repository.iconUrl ?? repository.providerMetadata?.iconUrl}
-                  hasColor={hasIconColor}
-                  style={{
-                    width: "1em",
-                    aspectRatio: "1/1",
-                  }}
-                />
+                <Group p="xs">
+                  <MaskedOrNormalImage
+                    className="releases-repository-header-icon"
+                    imageUrl={repository.iconUrl ?? repository.providerMetadata?.iconUrl}
+                    hasColor={hasIconColor}
+                    style={{
+                      width: "1em",
+                      aspectRatio: "1/1",
+                    }}
+                  />
 
-                <Group
-                  className="releases-repository-header-nameVersion-wrapper"
-                  gap={5}
-                  justify="space-between"
-                  miw={0}
-                  style={{ flex: 1 }}
-                >
-                  {!options.showOnlyIcon && (
-                    <Text className="releases-repository-header-name" size="xs">
-                      {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
-                      {repository.name || repository.identifier}
-                    </Text>
-                  )}
+                  <Group
+                    className="releases-repository-header-nameVersion-wrapper"
+                    gap={5}
+                    justify="space-between"
+                    miw={0}
+                    style={{ flex: 1 }}
+                  >
+                    {!options.showOnlyIcon && (
+                      <Text className="releases-repository-header-name" size="xs">
+                        {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                        {repository.name || repository.identifier}
+                      </Text>
+                    )}
 
-                  <Tooltip
-                    className="releases-repository-header-version-tooltip"
-                    withArrow
-                    arrowSize={5}
-                    label={repository.latestRelease}
-                    events={{ hover: repository.latestRelease !== undefined, focus: false, touch: false }}
+                    <Tooltip
+                      className="releases-repository-header-version-tooltip"
+                      withArrow
+                      arrowSize={5}
+                      label={repository.latestRelease}
+                      events={{ hover: repository.latestRelease !== undefined, focus: true, touch: false }}
+                    >
+                      <Text
+                        className="releases-repository-header-version"
+                        size="xs"
+                        fw={700}
+                        truncate="end"
+                        c={hasError ? "red" : "text"}
+                        style={{ flexShrink: 1 }}
+                      >
+                        {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
+                      </Text>
+                    </Tooltip>
+                  </Group>
+
+                  <Group
+                    className="releases-repository-header-releaseDate-wrapper"
+                    gap={5}
+                    style={{ flex: "0 0 auto" }}
                   >
                     <Text
-                      className="releases-repository-header-version"
+                      className="releases-repository-header-releaseDate"
                       size="xs"
-                      fw={700}
-                      truncate="end"
-                      c={hasError ? "red" : "text"}
-                      style={{ flexShrink: 1 }}
+                      c={
+                        repository.viewed
+                          ? "green"
+                          : repository.isNewRelease
+                            ? "primaryColor"
+                            : repository.isStaleRelease
+                              ? "secondaryColor"
+                              : "dimmed"
+                      }
                     >
-                      {hasError ? t("error.label") : (repository.latestRelease ?? t("not-found"))}
+                      {repository.latestReleaseAt &&
+                        !hasError &&
+                        formatter.relativeTime(repository.latestReleaseAt, {
+                          now,
+                          style: "long",
+                        })}
                     </Text>
-                  </Tooltip>
-                </Group>
-
-                <Group className="releases-repository-header-releaseDate-wrapper" gap={5} style={{ flex: "0 0 auto" }}>
-                  <Text
-                    className="releases-repository-header-releaseDate"
-                    size="xs"
-                    c={
-                      repository.viewed
-                        ? "green"
-                        : repository.isNewRelease
-                          ? "primaryColor"
-                          : repository.isStaleRelease
-                            ? "secondaryColor"
-                            : "dimmed"
-                    }
-                  >
-                    {repository.latestReleaseAt &&
-                      !hasError &&
-                      formatter.relativeTime(repository.latestReleaseAt, {
-                        now,
-                        style: "long",
-                      })}
-                  </Text>
-                  {hasError ? (
-                    <IconTriangleFilled
-                      className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-error"
-                      size={10}
-                      color="var(--mantine-color-red-filled)"
-                    />
-                  ) : repository.viewed ? (
-                    <IconCheck
-                      className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-confirmed"
-                      size={10}
-                      color="green"
-                    />
-                  ) : (
-                    (repository.isNewRelease || repository.isStaleRelease) && (
-                      <IconCircleFilled
-                        className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-marker"
+                    {hasError ? (
+                      <IconTriangleFilled
+                        className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-error"
                         size={10}
-                        color={
-                          repository.isNewRelease
-                            ? "var(--mantine-color-primaryColor-filled)"
-                            : "var(--mantine-color-secondaryColor-filled)"
-                        }
+                        color="var(--mantine-color-red-filled)"
                       />
-                    )
-                  )}
+                    ) : repository.viewed ? (
+                      <IconCheck
+                        className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-confirmed"
+                        size={10}
+                        color="green"
+                      />
+                    ) : (
+                      (repository.isNewRelease || repository.isStaleRelease) && (
+                        <IconCircleFilled
+                          className="releases-repository-header-releaseDate-icon releases-repository-header-releaseDate-marker"
+                          size={10}
+                          color={
+                            repository.isNewRelease
+                              ? "var(--mantine-color-primaryColor-filled)"
+                              : "var(--mantine-color-secondaryColor-filled)"
+                          }
+                        />
+                      )
+                    )}
+                  </Group>
                 </Group>
-              </Group>
+              </UnstyledButton>
               {(options.showDetails || isAdvanced) && (
                 <DetailsDisplay repository={repository} toggleExpandedDisplay={toggleExpandedDisplay} />
               )}
@@ -334,198 +351,203 @@ const DetailsDisplay = ({ repository, toggleExpandedDisplay }: DetailsDisplayPro
 
   return (
     <>
-      <Divider className="releases-repository-details-divider" onClick={() => toggleExpandedDisplay(repository)} />
-      <Group
+      <Divider className="releases-repository-details-divider" />
+      <UnstyledButton
         className={combineClasses("releases-repository-details", classes.releasesRepositoryDetails)}
-        justify="space-between"
-        p={5}
         onClick={() => toggleExpandedDisplay(repository)}
       >
-        <Group className="releases-repository-details-icon-wrapper">
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-icon-tooltip",
-              "releases-repository-details-icon-preRelease-tooltip",
-            )}
-            label={t("pre-release")}
-            withArrow
-            arrowSize={5}
-          >
-            <IconProgressCheck
+        <Group justify="space-between" p={5}>
+          <Group className="releases-repository-details-icon-wrapper">
+            <Tooltip
               className={combineClasses(
-                "releases-repository-details-icon",
-                "releases-repository-details-icon-preRelease",
+                "releases-repository-details-icon-tooltip",
+                "releases-repository-details-icon-preRelease-tooltip",
               )}
-              size={13}
-              color={
-                repository.isPreRelease ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"
-              }
-            />
-          </Tooltip>
-
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-icon-tooltip",
-              "releases-repository-details-icon-archived-tooltip",
-            )}
-            label={t("archived")}
-            withArrow
-            arrowSize={5}
-          >
-            <IconArchive
-              className={combineClasses(
-                "releases-repository-details-icon",
-                "releases-repository-details-icon-archived",
-              )}
-              size={13}
-              color={repository.isArchived ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
-            />
-          </Tooltip>
-
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-icon-tooltip",
-              "releases-repository-details-icon-forked-tooltip",
-            )}
-            label={t("forked")}
-            withArrow
-            arrowSize={5}
-          >
-            <IconGitFork
-              className={combineClasses("releases-repository-details-icon", "releases-repository-details-icon-forked")}
-              size={13}
-              color={repository.isFork ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
-            />
-          </Tooltip>
-        </Group>
-        <Group className="releases-repository-details-stats">
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-stats-tooltip",
-              "releases-repository-details-stats-stars-tooltip",
-            )}
-            label={t("starsCount")}
-            withArrow
-            arrowSize={5}
-          >
-            <Group
-              className={combineClasses(
-                "releases-repository-details-stats-wrapper",
-                "releases-repository-details-stats-stars-wrapper",
-              )}
-              gap={5}
+              label={t("pre-release")}
+              withArrow
+              arrowSize={5}
             >
-              <IconStar
+              <IconProgressCheck
                 className={combineClasses(
-                  "releases-repository-details-stats-icon",
-                  "releases-repository-details-stats-stars-icon",
+                  "releases-repository-details-icon",
+                  "releases-repository-details-icon-preRelease",
                 )}
-                size={12}
-                color={!repository.starsCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                size={13}
+                color={
+                  repository.isPreRelease ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"
+                }
               />
-              <Text
-                className={combineClasses(
-                  "releases-repository-details-stats-text",
-                  "releases-repository-details-stats-stars-text",
-                )}
-                size="xs"
-                c={!repository.starsCount ? "dimmed" : ""}
-              >
-                {!repository.starsCount
-                  ? "-"
-                  : formatter.number(repository.starsCount, {
-                      notation: "compact",
-                      maximumFractionDigits: 1,
-                    })}
-              </Text>
-            </Group>
-          </Tooltip>
+            </Tooltip>
 
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-stats-tooltip",
-              "releases-repository-details-stats-forks-tooltip",
-            )}
-            label={t("forksCount")}
-            withArrow
-            arrowSize={5}
-          >
-            <Group
+            <Tooltip
               className={combineClasses(
-                "releases-repository-details-stats-wrapper",
-                "releases-repository-details-stats-forks-wrapper",
+                "releases-repository-details-icon-tooltip",
+                "releases-repository-details-icon-archived-tooltip",
               )}
-              gap={5}
+              label={t("archived")}
+              withArrow
+              arrowSize={5}
+            >
+              <IconArchive
+                className={combineClasses(
+                  "releases-repository-details-icon",
+                  "releases-repository-details-icon-archived",
+                )}
+                size={13}
+                color={
+                  repository.isArchived ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"
+                }
+              />
+            </Tooltip>
+
+            <Tooltip
+              className={combineClasses(
+                "releases-repository-details-icon-tooltip",
+                "releases-repository-details-icon-forked-tooltip",
+              )}
+              label={t("forked")}
+              withArrow
+              arrowSize={5}
             >
               <IconGitFork
                 className={combineClasses(
-                  "releases-repository-details-stats-icon",
-                  "releases-repository-details-stats-forks-icon",
+                  "releases-repository-details-icon",
+                  "releases-repository-details-icon-forked",
                 )}
-                size={12}
-                color={!repository.forksCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                size={13}
+                color={repository.isFork ? "var(--mantine-color-secondaryColor-text)" : "var(--mantine-color-dimmed)"}
               />
-              <Text
-                className={combineClasses(
-                  "releases-repository-details-stats-text",
-                  "releases-repository-details-stats-forks-text",
-                )}
-                size="xs"
-                c={!repository.forksCount ? "dimmed" : ""}
-              >
-                {!repository.forksCount
-                  ? "-"
-                  : formatter.number(repository.forksCount, {
-                      notation: "compact",
-                      maximumFractionDigits: 1,
-                    })}
-              </Text>
-            </Group>
-          </Tooltip>
-
-          <Tooltip
-            className={combineClasses(
-              "releases-repository-details-stats-tooltip",
-              "releases-repository-details-stats-issues-tooltip",
-            )}
-            label={t("issuesCount")}
-            withArrow
-            arrowSize={5}
-          >
-            <Group
+            </Tooltip>
+          </Group>
+          <Group className="releases-repository-details-stats">
+            <Tooltip
               className={combineClasses(
-                "releases-repository-details-stats-wrapper",
-                "releases-repository-details-stats-issues-wrapper",
+                "releases-repository-details-stats-tooltip",
+                "releases-repository-details-stats-stars-tooltip",
               )}
-              gap={5}
+              label={t("starsCount")}
+              withArrow
+              arrowSize={5}
             >
-              <IconCircleDot
+              <Group
                 className={combineClasses(
-                  "releases-repository-details-stats-icon",
-                  "releases-repository-details-stats-issues-icon",
+                  "releases-repository-details-stats-wrapper",
+                  "releases-repository-details-stats-stars-wrapper",
                 )}
-                size={12}
-                color={!repository.openIssues ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
-              />
-              <Text
-                className={combineClasses(
-                  "releases-repository-details-stats-text",
-                  "releases-repository-details-stats-issues-text",
-                )}
-                size="xs"
-                c={!repository.openIssues ? "dimmed" : ""}
+                gap={5}
               >
-                {!repository.openIssues
-                  ? "-"
-                  : formatter.number(repository.openIssues, {
-                      notation: "compact",
-                      maximumFractionDigits: 1,
-                    })}
-              </Text>
-            </Group>
-          </Tooltip>
+                <IconStar
+                  className={combineClasses(
+                    "releases-repository-details-stats-icon",
+                    "releases-repository-details-stats-stars-icon",
+                  )}
+                  size={12}
+                  color={!repository.starsCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                />
+                <Text
+                  className={combineClasses(
+                    "releases-repository-details-stats-text",
+                    "releases-repository-details-stats-stars-text",
+                  )}
+                  size="xs"
+                  c={!repository.starsCount ? "dimmed" : ""}
+                >
+                  {!repository.starsCount
+                    ? "-"
+                    : formatter.number(repository.starsCount, {
+                        notation: "compact",
+                        maximumFractionDigits: 1,
+                      })}
+                </Text>
+              </Group>
+            </Tooltip>
+
+            <Tooltip
+              className={combineClasses(
+                "releases-repository-details-stats-tooltip",
+                "releases-repository-details-stats-forks-tooltip",
+              )}
+              label={t("forksCount")}
+              withArrow
+              arrowSize={5}
+            >
+              <Group
+                className={combineClasses(
+                  "releases-repository-details-stats-wrapper",
+                  "releases-repository-details-stats-forks-wrapper",
+                )}
+                gap={5}
+              >
+                <IconGitFork
+                  className={combineClasses(
+                    "releases-repository-details-stats-icon",
+                    "releases-repository-details-stats-forks-icon",
+                  )}
+                  size={12}
+                  color={!repository.forksCount ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                />
+                <Text
+                  className={combineClasses(
+                    "releases-repository-details-stats-text",
+                    "releases-repository-details-stats-forks-text",
+                  )}
+                  size="xs"
+                  c={!repository.forksCount ? "dimmed" : ""}
+                >
+                  {!repository.forksCount
+                    ? "-"
+                    : formatter.number(repository.forksCount, {
+                        notation: "compact",
+                        maximumFractionDigits: 1,
+                      })}
+                </Text>
+              </Group>
+            </Tooltip>
+
+            <Tooltip
+              className={combineClasses(
+                "releases-repository-details-stats-tooltip",
+                "releases-repository-details-stats-issues-tooltip",
+              )}
+              label={t("issuesCount")}
+              withArrow
+              arrowSize={5}
+            >
+              <Group
+                className={combineClasses(
+                  "releases-repository-details-stats-wrapper",
+                  "releases-repository-details-stats-issues-wrapper",
+                )}
+                gap={5}
+              >
+                <IconCircleDot
+                  className={combineClasses(
+                    "releases-repository-details-stats-icon",
+                    "releases-repository-details-stats-issues-icon",
+                  )}
+                  size={12}
+                  color={!repository.openIssues ? "var(--mantine-color-dimmed)" : "var(--mantine-color-text)"}
+                />
+                <Text
+                  className={combineClasses(
+                    "releases-repository-details-stats-text",
+                    "releases-repository-details-stats-issues-text",
+                  )}
+                  size="xs"
+                  c={!repository.openIssues ? "dimmed" : ""}
+                >
+                  {!repository.openIssues
+                    ? "-"
+                    : formatter.number(repository.openIssues, {
+                        notation: "compact",
+                        maximumFractionDigits: 1,
+                      })}
+                </Text>
+              </Group>
+            </Tooltip>
+          </Group>
         </Group>
-      </Group>
+      </UnstyledButton>
     </>
   );
 };
diff --git a/packages/widgets/src/rssFeed/component.module.scss b/packages/widgets/src/rssFeed/component.module.scss
index cd68be962..7d68fd7de 100644
--- a/packages/widgets/src/rssFeed/component.module.scss
+++ b/packages/widgets/src/rssFeed/component.module.scss
@@ -1,11 +1,26 @@
-.backgroundImage {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  filter: blur(5px);
-  transform: scaleX(-1.05) scaleZ(-1.05);
-  opacity: 0.25;
-  top: 0;
-  left: 0;
-  object-fit: cover;
+.entry {
+  min-width: 0;
+  color: inherit;
+  text-decoration: none;
+  transition: background-color 120ms ease;
+
+  &:hover,
+  &:focus-visible {
+    background-color: var(--mantine-color-default-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mantine-primary-color-filled);
+    outline-offset: -2px;
+  }
+}
+
+.poster {
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .entry {
+    transition: none;
+  }
 }
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 79a070420..0da7d7c70 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -33,7 +33,7 @@ const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
   };
 };
 
-export default function RssFeed({ options, width, displayMode }: WidgetComponentProps<"rssFeed">) {
+export default function RssFeed({ options, width, height, displayMode }: WidgetComponentProps<"rssFeed">) {
   const {
     entries: feedEntries,
     failedFeedCount,
@@ -54,11 +54,13 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
   const languageDir = options.enableRtl ? "RTL" : "LTR";
 
   const isAdvanced = displayMode === "advanced";
-  const isNarrow = !isAdvanced && width < 128 * 3;
+  const isDense = !isAdvanced && (width < 420 || height < 180);
+  const isTiny = !isAdvanced && (width < 260 || height < 110);
   const columns = isAdvanced && width >= 720 ? 2 : 1;
+  const descriptionLines = isAdvanced ? Math.max(options.textLinesClamp, 8) : isDense ? 1 : options.textLinesClamp;
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : isTiny ? 4 : "xs"}>
       {warning && (
         <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
           <output>{warning}</output>
@@ -68,25 +70,24 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
         {feedEntries.map((feedEntry) => (
           <Card
             key={feedEntry.id}
+            className={classes.entry}
             component={"a"}
             href={getSafeExternalUrl(feedEntry.link, feedEntry.feedUrl)}
             radius={board.itemRadius}
             target="_blank"
             rel="noopener noreferrer"
             w="100%"
-            p={isAdvanced ? "md" : "xs"}
+            p={isAdvanced ? "md" : isDense ? 6 : "xs"}
+            title={feedEntry.title}
           >
-            {feedEntry.enclosure !== undefined && (
-              <Image className={classes.backgroundImage} src={feedEntry.enclosure} alt="backdrop" />
-            )}
-
-            <Group wrap="nowrap" align="flex-start">
-              {feedEntry.enclosure !== undefined && options.showPosterImage && !isNarrow && (
+            <Group wrap="nowrap" align="flex-start" gap={isDense ? "xs" : "md"}>
+              {feedEntry.enclosure !== undefined && options.showPosterImage && !isTiny && (
                 <Image
+                  className={classes.poster}
                   src={feedEntry.enclosure}
-                  alt={feedEntry.title}
-                  w={isAdvanced ? 180 : 112}
-                  h={isAdvanced ? 120 : 112}
+                  alt=""
+                  w={isAdvanced ? 180 : isDense ? 64 : 96}
+                  h={isAdvanced ? 120 : isDense ? 64 : 96}
                   radius="sm"
                   fit="cover"
                 />
@@ -96,19 +97,14 @@ export default function RssFeed({ options, width, displayMode }: WidgetComponent
                 <Text dir={languageDir} fz={isAdvanced ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
                   {feedEntry.title}
                 </Text>
-                {!options.hideDescription && feedEntry.description && (
-                  <Text
-                    dir={languageDir}
-                    c="dimmed"
-                    size="sm"
-                    lineClamp={isAdvanced ? Math.max(options.textLinesClamp, 8) : options.textLinesClamp}
-                  >
+                {!options.hideDescription && feedEntry.description && !isTiny && (
+                  <Text dir={languageDir} c="dimmed" size="sm" lineClamp={descriptionLines}>
                     {feedDescriptionToText(feedEntry.description)}
                   </Text>
                 )}
 
                 <InfoDisplay
-                  source={isAdvanced ? getHostname(feedEntry.feedUrl) : undefined}
+                  source={isAdvanced || !isDense ? getHostname(feedEntry.feedUrl) : undefined}
                   date={feedEntry.published ? dayjs(feedEntry.published).fromNow() : undefined}
                 />
               </Flex>
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index 197832f34..6aadfba46 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -83,12 +83,18 @@ export default function SmartHomeEntityStateWidget({
     { key: "deviceClass" as const, value: entity?.attributes.device_class },
     { key: "icon" as const, value: entity?.attributes.icon },
   ].filter(({ value }) => typeof value === "string" && value.length > 0);
+  const displayName =
+    displayMode === "advanced" && typeof entity?.attributes.friendly_name === "string"
+      ? entity.attributes.friendly_name
+      : options.displayName;
+  const state = entity?.state ?? "—";
 
   return (
     <UnstyledButton
       mod={{ "entity-state": entity?.state, "entity-id": options.entityId }}
       onClick={handleClick}
       disabled={!isActionable}
+      aria-label={`${displayName}: ${state}${attribute}`}
       aria-description={error?.message}
       w="100%"
       h="100%"
@@ -101,15 +107,13 @@ export default function SmartHomeEntityStateWidget({
     >
       <Center h="100%" w="100%">
         <Stack align="center" gap={isTiny ? 4 : "md"} p="xs" maw="100%">
-          <Text ta="center" fw="bold" size={isTiny ? "sm" : "lg"}>
-            {displayMode === "advanced" && typeof entity?.attributes.friendly_name === "string"
-              ? entity.attributes.friendly_name
-              : options.displayName}
-          </Text>
-          <Text ta="center" size={isTiny ? "xs" : "lg"}>
-            {entity?.state ?? "—"}
+          <Text ta="center" fw={700} size={isTiny ? "lg" : "2xl"} lh={1.1} lineClamp={1} maw="100%">
+            {state}
             {attribute}
           </Text>
+          <Text ta="center" c="dimmed" fw={500} size={isTiny ? "xs" : "sm"} lineClamp={2} maw="100%">
+            {displayName}
+          </Text>
           {displayMode === "advanced" && entity && (
             <>
               <Group justify="center" gap={4}>
@@ -131,7 +135,7 @@ export default function SmartHomeEntityStateWidget({
           )}
           {error && (
             <Tooltip label={error.message} multiline>
-              <Text size="xs" c="red" lineClamp={2}>
+              <Text size="xs" c="red" lineClamp={2} tabIndex={0}>
                 {t("widget.smartHome-entityState.error.toggleFailed")}
               </Text>
             </Tooltip>
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index 5d57d2c62..98964991d 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -87,7 +87,7 @@ export default function SmartHomeTriggerAutomationWidget({
 
   return (
     <Box pos="relative" w="100%" h="100%">
-      <VisuallyHidden role="status">
+      <VisuallyHidden component="output">
         {isPending
           ? t("widget.smartHome-executeAutomation.status.running")
           : isShowSuccess
@@ -100,6 +100,7 @@ export default function SmartHomeTriggerAutomationWidget({
       <UnstyledButton
         onClick={handleClick}
         disabled={!integrationId || !canInteract || isPending}
+        aria-label={t("widget.smartHome-executeAutomation.spotlightAction.run", { name: options.displayName })}
         style={{
           cursor: !isEditMode && integrationId && canInteract ? "pointer" : "initial",
           pointerEvents: isEditMode ? "none" : undefined,
@@ -130,9 +131,11 @@ export default function SmartHomeTriggerAutomationWidget({
           </Overlay>
         )}
         <Center w="100%" h="100%">
-          <Stack align="center" gap="md">
-            <IconAutomation size={isTiny ? 16 : undefined} />
-            <Text ta="center" fw="bold" fz={isTiny ? "xs" : undefined}>
+          <Stack align="center" gap={isTiny ? 6 : "md"} p="xs" maw="100%">
+            <ThemeIcon variant="light" size={isTiny ? "md" : "xl"} radius="xl">
+              <IconAutomation size={isTiny ? 14 : 24} />
+            </ThemeIcon>
+            <Text ta="center" fw={600} fz={isTiny ? "xs" : "sm"} lineClamp={2} maw="100%">
               {options.displayName}
             </Text>
             {displayMode === "advanced" && (
diff --git a/packages/widgets/src/speedtest-tracker/component.tsx b/packages/widgets/src/speedtest-tracker/component.tsx
index 56fbfa07e..8c3c4350d 100644
--- a/packages/widgets/src/speedtest-tracker/component.tsx
+++ b/packages/widgets/src/speedtest-tracker/component.tsx
@@ -9,7 +9,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import { WidgetEmptyState } from "../common/empty-state";
 import { AveragesSection } from "./averages";
-import { combineSpeedtestDashboards } from "./helpers";
+import { combineSpeedtestDashboards, getCompactSections } from "./helpers";
 import { LatestResultSection } from "./latest-result";
 import { RecentResultsSection } from "./recent-results";
 
@@ -48,6 +48,11 @@ export default function SpeedtestTrackerWidget({
   const averages = options.showStats && combined.stats && (
     <AveragesSection stats={combined.stats} width={displayMode === "advanced" ? advancedSectionWidth : width} />
   );
+  const compactSections = getCompactSections(height, {
+    latest: Boolean(latest),
+    chart: hasChart,
+    averages: Boolean(averages),
+  });
 
   if (displayMode === "advanced") {
     return (
@@ -85,13 +90,13 @@ export default function SpeedtestTrackerWidget({
 
   return (
     <Stack h="100%" gap="sm" p="xs" style={{ overflow: "hidden" }}>
-      {hasStatSection && (
+      {(compactSections.latest || compactSections.averages) && (
         <Stack gap="sm" style={{ flex: 1, minHeight: 0 }}>
-          {latest && <div style={{ flex: 1, minHeight: 0 }}>{latest}</div>}
-          {averages && height >= 170 && <div style={{ flex: 1, minHeight: 0 }}>{averages}</div>}
+          {compactSections.latest && <div style={{ flex: 1, minHeight: 0 }}>{latest}</div>}
+          {compactSections.averages && <div style={{ flex: 1, minHeight: 0 }}>{averages}</div>}
         </Stack>
       )}
-      {hasChart && (
+      {compactSections.chart && (
         <div style={{ flex: 2, minHeight: 0 }}>
           <RecentResultsSection results={recentFiltered} showPingGraph={options.showPingGraph} />
         </div>
diff --git a/packages/widgets/src/speedtest-tracker/helpers.spec.ts b/packages/widgets/src/speedtest-tracker/helpers.spec.ts
index ab2cd8564..1e02bf183 100644
--- a/packages/widgets/src/speedtest-tracker/helpers.spec.ts
+++ b/packages/widgets/src/speedtest-tracker/helpers.spec.ts
@@ -2,7 +2,7 @@ import { describe, expect, it } from "vitest";
 
 import type { SpeedtestTrackerDashboardData, SpeedtestTrackerStats } from "@homarr/integrations/types";
 
-import { combineSpeedtestDashboards, mergeStats } from "./helpers";
+import { combineSpeedtestDashboards, getCompactSections, mergeStats } from "./helpers";
 
 const stats = (average: number, totalResults: number): SpeedtestTrackerStats => ({
   ping: { avg: average, min: average, max: average },
@@ -26,3 +26,16 @@ describe("speedtest dashboard aggregation", () => {
     expect(combineSpeedtestDashboards(dashboards).latestResult?.id).toBe(2);
   });
 });
+
+describe("getCompactSections", () => {
+  const available = { latest: true, chart: true, averages: true };
+
+  it("prioritizes the latest result in a short widget", () => {
+    expect(getCompactSections(180, available)).toEqual({ latest: true, chart: false, averages: false });
+  });
+
+  it("reveals history before averages as height grows", () => {
+    expect(getCompactSections(300, available)).toEqual({ latest: true, chart: true, averages: false });
+    expect(getCompactSections(400, available)).toEqual({ latest: true, chart: true, averages: true });
+  });
+});
diff --git a/packages/widgets/src/speedtest-tracker/helpers.ts b/packages/widgets/src/speedtest-tracker/helpers.ts
index e438a4fa4..b590d0214 100644
--- a/packages/widgets/src/speedtest-tracker/helpers.ts
+++ b/packages/widgets/src/speedtest-tracker/helpers.ts
@@ -75,3 +75,21 @@ export const formatStatsSpeed = (band: SpeedtestTrackerStats["download"]): strin
   if (band.avg_bits != null) return formatBitsPerSec(band.avg_bits);
   return formatBitsPerSec(band.avg * 8);
 };
+
+type CompactSection = "latest" | "chart" | "averages";
+
+export const getCompactSections = (
+  height: number,
+  available: Record<CompactSection, boolean>,
+): Record<CompactSection, boolean> => {
+  const budget = height < 240 ? 1 : height < 360 ? 2 : 3;
+  const visible = new Set(
+    (["latest", "chart", "averages"] as const).filter((section) => available[section]).slice(0, budget),
+  );
+
+  return {
+    latest: visible.has("latest"),
+    chart: visible.has("chart"),
+    averages: visible.has("averages"),
+  };
+};
diff --git a/packages/widgets/src/speedtest-tracker/latest-result.tsx b/packages/widgets/src/speedtest-tracker/latest-result.tsx
index 20b792196..d2851aa43 100644
--- a/packages/widgets/src/speedtest-tracker/latest-result.tsx
+++ b/packages/widgets/src/speedtest-tracker/latest-result.tsx
@@ -26,7 +26,7 @@ export function LatestResultSection({ result, width = 500 }: { result: Speedtest
     <Stack gap={6} h="100%">
       <Group justify="space-between" align="center" wrap="nowrap">
         <SectionLabel>{t("latestResult")}</SectionLabel>
-        <Text size="xs" c="dimmed">
+        <Text size="xs" c="dimmed" truncate title={timestamp} style={{ minWidth: 0 }}>
           {timestamp}
         </Text>
       </Group>
diff --git a/packages/widgets/src/speedtest-tracker/section-label.tsx b/packages/widgets/src/speedtest-tracker/section-label.tsx
index 255e05113..ce7e306d2 100644
--- a/packages/widgets/src/speedtest-tracker/section-label.tsx
+++ b/packages/widgets/src/speedtest-tracker/section-label.tsx
@@ -3,7 +3,7 @@ import { Text } from "@mantine/core";
 
 export function SectionLabel({ children }: { children: ReactNode }) {
   return (
-    <Text size="xs" fw={600} c="dimmed" tt="uppercase" style={{ letterSpacing: "0.05em" }}>
+    <Text size="xs" fw={600} c="dimmed">
       {children}
     </Text>
   );
diff --git a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
index 0817d07f4..844093417 100644
--- a/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
+++ b/packages/widgets/src/speedtest-tracker/speed-stat-card.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Card, Flex, Text } from "@mantine/core";
+import { Box, Flex, Text, Tooltip, VisuallyHidden } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -21,34 +21,37 @@ export function SpeedStatCard({ icon: Icon, color, value, label, compact = false
   const hideLabel = height > 0 && height <= 38;
 
   return (
-    <Card
-      ref={ref}
-      p={compact ? "xs" : "sm"}
-      radius={board.itemRadius}
-      bg={`var(--mantine-color-${color}-light)`}
-      h="100%"
-      style={{ flex: 1 }}
-    >
-      <Flex
+    <Tooltip label={`${label}: ${value}`} withArrow>
+      <Box
+        ref={ref}
+        p={compact ? "xs" : "sm"}
+        bg={`var(--mantine-color-${color}-light)`}
         h="100%"
-        w="100%"
-        align="center"
-        justify="center"
-        direction={isWide ? "row" : "column"}
-        gap={isWide ? 8 : 4}
+        style={{ flex: 1, borderRadius: `var(--mantine-radius-${board.itemRadius})`, minWidth: 0 }}
       >
-        <Icon size={compact ? 16 : 20} color={`var(--mantine-color-${color}-5)`} style={{ flexShrink: 0 }} />
-        <Flex direction="column" align={isWide ? "flex-start" : "center"} gap={0}>
-          <Text size={compact ? "sm" : "md"} fw={700} ta="center" lh={1.1}>
-            {value}
-          </Text>
-          {!hideLabel && (
-            <Text size="xs" c="dimmed" ta="center" lh={1.3}>
-              {label}
+        <Flex
+          h="100%"
+          w="100%"
+          align="center"
+          justify="center"
+          direction={isWide ? "row" : "column"}
+          gap={isWide ? 8 : 4}
+          style={{ minWidth: 0 }}
+        >
+          <Icon size={compact ? 16 : 20} color={`var(--mantine-color-${color}-5)`} style={{ flexShrink: 0 }} />
+          <Flex direction="column" align={isWide ? "flex-start" : "center"} gap={0} style={{ minWidth: 0 }}>
+            <Text size={compact ? "sm" : "md"} fw={700} ta="center" lh={1.1} truncate w="100%">
+              {value}
             </Text>
-          )}
+            {!hideLabel && (
+              <Text size="xs" c="dimmed" ta="center" lh={1.3} truncate w="100%">
+                {label}
+              </Text>
+            )}
+            {hideLabel && <VisuallyHidden>{label}</VisuallyHidden>}
+          </Flex>
         </Flex>
-      </Flex>
-    </Card>
+      </Box>
+    </Tooltip>
   );
 }
diff --git a/packages/widgets/src/stocks/component.spec.ts b/packages/widgets/src/stocks/component.spec.ts
index 56ad94954..5f74928ef 100644
--- a/packages/widgets/src/stocks/component.spec.ts
+++ b/packages/widgets/src/stocks/component.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { getStockSummary } from "./component";
+import { getStockLayout, getStockSummary } from "./component";
 
 describe("stock summary", () => {
   it("returns no summary for an empty series", () => {
@@ -16,3 +16,38 @@ describe("stock summary", () => {
     });
   });
 });
+
+describe("stock layout", () => {
+  it("keeps compact widgets focused on symbol and price", () => {
+    expect(getStockLayout(320, 100, false)).toMatchObject({
+      showName: false,
+      showChange: false,
+      showRange: false,
+      priceOrder: 2,
+    });
+  });
+
+  it("reveals secondary data only when both axes have room", () => {
+    expect(getStockLayout(320, 160, false)).toMatchObject({
+      showName: false,
+      showChange: true,
+      showRange: true,
+    });
+    expect(getStockLayout(320, 220, false)).toMatchObject({
+      showName: true,
+      showChange: true,
+      showRange: true,
+      graphHeight: "68%",
+    });
+  });
+
+  it("always exposes the complete advanced summary", () => {
+    expect(getStockLayout(120, 80, true)).toEqual({
+      showName: true,
+      showChange: true,
+      showRange: true,
+      graphHeight: "75%",
+      priceOrder: 1,
+    });
+  });
+});
diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx
index aacd9c16c..4fee07497 100644
--- a/packages/widgets/src/stocks/component.tsx
+++ b/packages/widgets/src/stocks/component.tsx
@@ -30,6 +30,34 @@ export interface StockSummary {
   graphValues: number[];
 }
 
+export interface StockLayout {
+  showName: boolean;
+  showChange: boolean;
+  showRange: boolean;
+  graphHeight: "48%" | "68%" | "75%";
+  priceOrder: 1 | 2;
+}
+
+export function getStockLayout(width: number, height: number, isAdvanced: boolean): StockLayout {
+  if (isAdvanced) {
+    return {
+      showName: true,
+      showChange: true,
+      showRange: true,
+      graphHeight: "75%",
+      priceOrder: 1,
+    };
+  }
+
+  return {
+    showName: width >= 300 && height >= 190,
+    showChange: width >= 260 && height >= 130,
+    showRange: width >= 220 && height >= 130,
+    graphHeight: height >= 220 ? "68%" : "48%",
+    priceOrder: width >= 280 && height >= 120 ? 1 : 2,
+  };
+}
+
 export function getStockSummary(priceHistory: number[], previousClose: number): StockSummary | null {
   const currentPrice = priceHistory.at(-1);
   if (currentPrice === undefined) return null;
@@ -57,6 +85,7 @@ export default function StockPriceWidget({ options, width, height, displayMode }
   const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
   const stockGraphValues = summary.graphValues;
   const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
+  const layout = getStockLayout(width, height, displayMode === "advanced");
 
   return (
     <Flex h="100%" w="100%">
@@ -64,7 +93,7 @@ export default function StockPriceWidget({ options, width, height, displayMode }
         pos="absolute"
         bottom={10}
         w="100%"
-        h={displayMode === "advanced" || height > 280 ? "75%" : "50%"}
+        h={layout.graphHeight}
         data={stockGraphValues}
         curveType="linear"
         color={trendColor}
@@ -81,18 +110,18 @@ export default function StockPriceWidget({ options, width, height, displayMode }
           )}
           {data.symbol}
         </Text>
-        {(displayMode === "advanced" || (width > 280 && height > 280)) && (
+        {layout.showName && (
           <Text size="md" lh="1">
             {data.shortName}
           </Text>
         )}
       </Stack>
 
-      <Title pos="absolute" bottom={10} right={10} order={width > 280 ? 1 : 2} fw={700}>
+      <Title pos="absolute" bottom={10} right={10} order={layout.priceOrder} fw={700}>
         {new Intl.NumberFormat().format(round(summary.currentPrice))}
       </Title>
 
-      {(displayMode === "advanced" || width > 280) && (
+      {layout.showChange && (
         <Text pos="absolute" top={10} right={10} size="xl" fw={700}>
           {new Intl.NumberFormat().format(stockValuesChange)}
           {stockValuesChangePercentage === null
@@ -101,7 +130,7 @@ export default function StockPriceWidget({ options, width, height, displayMode }
         </Text>
       )}
 
-      {(displayMode === "advanced" || width > 280) && (
+      {layout.showRange && (
         <Text pos="absolute" bottom={10} left={10} fw={700}>
           {t(`option.timeRange.option.${options.timeRange}.label`)}
         </Text>
diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index 73a21fdb2..7977318c2 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -58,6 +58,7 @@ interface SystemDiskCardProps {
   integrationName?: string;
   secondaryText?: string;
   isAdvanced: boolean;
+  showTemperature: boolean;
 }
 
 const SystemDiskCard = ({
@@ -70,6 +71,7 @@ const SystemDiskCard = ({
   integrationName,
   secondaryText,
   isAdvanced,
+  showTemperature,
 }: SystemDiskCardProps) => {
   const board = useRequiredBoard();
   const scheme = useMantineColorScheme();
@@ -95,11 +97,18 @@ const SystemDiskCard = ({
   }, [displayText, healthy]);
 
   const unhealthyLabel = t("widget.systemDisks.status.unhealthy");
+  const hasHiddenTemperature = temperature !== null && temperature !== undefined && !showTemperature;
+  const tooltipLabel = [
+    healthy ? displayText : `${displayText} (${unhealthyLabel})`,
+    hasHiddenTemperature ? `${temperature}°C` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
 
   return (
     <Tooltip
-      label={healthy ? displayText : `${displayText} (${unhealthyLabel})`}
-      disabled={valueFits || isAdvanced}
+      label={tooltipLabel}
+      disabled={(valueFits && !hasHiddenTemperature) || isAdvanced}
       position="top"
       withinPortal
     >
@@ -109,9 +118,9 @@ const SystemDiskCard = ({
         bg={scheme.colorScheme === "dark" ? "dark.7" : "gray.1"}
         style={{ overflow: "hidden", position: "relative" }}
       >
-        <Group justify="space-between" style={{ zIndex: 1 }}>
-          <div>
-            <Text fw={700} size={isAdvanced ? "sm" : undefined} truncate="end">
+        <Group justify="space-between" wrap="nowrap" style={{ zIndex: 1, minWidth: 0 }}>
+          <div style={{ minWidth: 0, flex: 1 }}>
+            <Text fw={700} size="sm" truncate="end">
               {deviceName}
             </Text>
             {integrationName && (
@@ -119,22 +128,23 @@ const SystemDiskCard = ({
                 {integrationName}
               </Text>
             )}
-            <p ref={valueRef} style={{ margin: 0, visibility: valueFits ? "visible" : "hidden" }}>
+            <Text ref={valueRef} size="sm" style={{ visibility: valueFits ? "visible" : "hidden" }}>
               <span>{displayText}</span>
               {!healthy && <span style={{ marginLeft: 5 }}>{unhealthyLabel}</span>}
-            </p>
+            </Text>
             {isAdvanced && secondaryText && (
               <Text size="xs" c="dimmed">
                 {secondaryText}
               </Text>
             )}
           </div>
-          <div>
-            {temperature !== null && temperature !== undefined ? <p style={{ margin: 0 }}>{temperature}°C</p> : null}
+          <div style={{ flexShrink: 0 }}>
+            {showTemperature && temperature !== null && temperature !== undefined ? (
+              <Text size="sm">{temperature}°C</Text>
+            ) : null}
           </div>
         </Group>
         <Box
-          bg={healthy ? "green" : "red"}
           style={{
             position: "absolute",
             top: 0,
@@ -143,6 +153,7 @@ const SystemDiskCard = ({
             height: "100%",
             zIndex: 0,
             display: showBackgroundBar ? "block" : "none",
+            backgroundColor: healthy ? "var(--mantine-color-green-light)" : "var(--mantine-color-red-light)",
           }}
         ></Box>
       </Card>
@@ -154,6 +165,7 @@ export default function SystemResources({
   integrationIds,
   options,
   width,
+  height,
   displayMode: surfaceMode,
 }: WidgetComponentProps<"systemDisks">) {
   const queryInput = { integrationIds };
@@ -182,7 +194,9 @@ export default function SystemResources({
   if (disks.length === 0) return <WidgetEmptyState />;
 
   const isAdvanced = surfaceMode === "advanced";
-  const columns = isAdvanced ? Math.max(1, Math.min(disks.length, Math.floor(width / 320))) : 1;
+  const minimumCardWidth = isAdvanced ? 320 : 260;
+  const columns = Math.max(1, Math.min(disks.length, Math.floor(width / minimumCardWidth)));
+  const cellWidth = width / columns;
 
   return (
     <ScrollArea h="100%">
@@ -199,6 +213,7 @@ export default function SystemResources({
             integrationName={isAdvanced || data.length > 1 ? integrationName : undefined}
             secondaryText={getAbsoluteText(item)}
             isAdvanced={isAdvanced}
+            showTemperature={isAdvanced || (height >= 100 && cellWidth >= 220)}
           />
         ))}
       </SimpleGrid>
diff --git a/packages/widgets/src/system-resources/chart/common-chart.tsx b/packages/widgets/src/system-resources/chart/common-chart.tsx
index f2f9f1d87..ffc10a45f 100644
--- a/packages/widgets/src/system-resources/chart/common-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/common-chart.tsx
@@ -83,6 +83,13 @@ export const CommonChart = ({
           )}
         </Group>
       )}
+      {data.length > 1 && height > 0 && height <= 40 && lastValue && !hovered && (
+        <Center pos="absolute" w="100%" h="100%" style={{ zIndex: 2, pointerEvents: "none" }}>
+          <Text size="xs" fw={600}>
+            {lastValue}
+          </Text>
+        </Center>
+      )}
       {data.length <= 1 ? (
         <Center pos="absolute" w="100%" h="100%">
           <Stack px={"xs"} align={"center"} gap={4}>
@@ -92,6 +99,11 @@ export const CommonChart = ({
                 {title}
               </Text>
             )}
+            {lastValue && (
+              <Text size={height > 100 ? "md" : "xs"} fw={600} ta="center">
+                {lastValue}
+              </Text>
+            )}
           </Stack>
         </Center>
       ) : (
diff --git a/packages/widgets/src/system-resources/chart/memory-chart.tsx b/packages/widgets/src/system-resources/chart/memory-chart.tsx
index b49ea81be..429ec7016 100644
--- a/packages/widgets/src/system-resources/chart/memory-chart.tsx
+++ b/packages/widgets/src/system-resources/chart/memory-chart.tsx
@@ -22,7 +22,7 @@ export const SystemResourceMemoryChart = ({
   const t = useScopedI18n("widget.systemResources.card");
 
   const percentageUsed =
-    memoryUsageOverTime.length > 0
+    memoryUsageOverTime.length > 0 && totalCapacityInBytes > 0
       ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         memoryUsageOverTime[memoryUsageOverTime.length - 1]! / totalCapacityInBytes
       : undefined;
@@ -45,7 +45,8 @@ export const SystemResourceMemoryChart = ({
           return (
             <Paper px={3} py={2} shadow="md">
               <Text c="dimmed" size="xs">
-                {memory.used} / {memory.available} ({Math.round((value / totalCapacityInBytes) * 100)}%)
+                {memory.used} / {memory.available} (
+                {totalCapacityInBytes > 0 ? Math.round((value / totalCapacityInBytes) * 100) : 0}%)
               </Text>
             </Paper>
           );
diff --git a/packages/widgets/src/system-resources/chart/network-traffic.tsx b/packages/widgets/src/system-resources/chart/network-traffic.tsx
index fc3b644b6..5ea5bff9a 100644
--- a/packages/widgets/src/system-resources/chart/network-traffic.tsx
+++ b/packages/widgets/src/system-resources/chart/network-traffic.tsx
@@ -23,6 +23,7 @@ export const NetworkTrafficChart = ({
 
   const max = Math.max(...usageOverTime);
   const upperBound = max + max * 0.2;
+  const latest = usageOverTime.at(-1) ?? 0;
 
   return (
     <CommonChart
@@ -32,7 +33,7 @@ export const NetworkTrafficChart = ({
       title={isUp ? t("up") : t("down")}
       icon={isUp ? IconArrowUp : IconArrowDown}
       yAxisProps={{ domain: [0, upperBound] }}
-      lastValue={formatByteRate(Math.round(max))}
+      lastValue={formatByteRate(Math.round(latest))}
       chartType={hasShadow ? "area" : "line"}
       labelDisplayMode={labelDisplayMode}
       tooltipProps={{
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index 4c7621841..a34d5cd81 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Box, Center, Group, Loader, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { CombinedNetworkTrafficChart } from "./chart/combined-network-traffic";
 import { SystemResourceCPUChart } from "./chart/cpu-chart";
@@ -43,15 +44,24 @@ export const appendBoundedHistory = (history: ChartItem[], item: ChartItem, limi
 export const getNetworkHistory = (items: readonly ChartItem[]) =>
   items.flatMap((item) => (item.network === null ? [] : [item.network]));
 
+export const getCompactChartBudget = (height: number): number => {
+  if (height < 140) return 1;
+  if (height < 260) return 2;
+  return 4;
+};
+
 export default function SystemResources({
   integrationIds,
   options,
   width,
+  height,
   displayMode,
 }: WidgetComponentProps<"systemResources">) {
-  const { data = [], dataUpdatedAt } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
-    integrationIds,
-  });
+  const {
+    data = [],
+    dataUpdatedAt,
+    isPending,
+  } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
   const isAdvanced = displayMode === "advanced";
   const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
   const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>({});
@@ -83,7 +93,7 @@ export default function SystemResources({
 
   const panelColumns = isAdvanced && width >= 960 && data.length > 1 ? 2 : 1;
   const panelWidth = width / panelColumns;
-  const renderCharts = (entry: (typeof data)[number], availableWidth: number) => {
+  const renderCharts = (entry: (typeof data)[number], availableWidth: number, availableHeight: number) => {
     const currentItem = toChartItem(entry.healthInfo);
     const fullHistory = historyByIntegration[entry.integrationId] ?? [currentItem];
     const history = isAdvanced ? fullHistory : fullHistory.slice(-COMPACT_HISTORY_SIZE);
@@ -96,24 +106,37 @@ export default function SystemResources({
         memoryCapacityInBytes={entry.healthInfo.memAvailableInBytes + entry.healthInfo.memUsedInBytes}
         options={options}
         width={availableWidth}
+        height={availableHeight}
         isAdvanced={isAdvanced}
         showTitle={isAdvanced || data.length > 1}
       />
     );
   };
 
+  if (isPending) {
+    return (
+      <Center h="100%">
+        <Loader size="sm" />
+      </Center>
+    );
+  }
+
+  if (data.length === 0) return <WidgetEmptyState />;
+
   if (!isAdvanced && data.length === 1 && data[0]) {
     return (
       <Box h="100%" p="xs">
-        {renderCharts(data[0], width)}
+        {renderCharts(data[0], width, Math.max(0, height - 20))}
       </Box>
     );
   }
 
+  const compactPanelHeight = Math.max(160, Math.floor(height / Math.min(data.length, 2)));
+
   return (
     <ScrollArea h="100%">
       <SimpleGrid cols={panelColumns} spacing="xs" p="xs">
-        {data.map((entry) => renderCharts(entry, panelWidth))}
+        {data.map((entry) => renderCharts(entry, panelWidth, isAdvanced ? height : compactPanelHeight))}
       </SimpleGrid>
     </ScrollArea>
   );
@@ -125,6 +148,7 @@ interface SystemChartsProps {
   memoryCapacityInBytes: number;
   options: WidgetComponentProps<"systemResources">["options"];
   width: number;
+  height: number;
   isAdvanced: boolean;
   showTitle: boolean;
 }
@@ -135,26 +159,36 @@ const SystemCharts = ({
   memoryCapacityInBytes,
   options,
   width,
+  height,
   isAdvanced,
   showTitle,
 }: SystemChartsProps) => {
   const networkItems = getNetworkHistory(items);
-  const showNetwork = networkItems.length > 0 && options.visibleCharts.includes("network");
-  const chartCount = options.visibleCharts.filter((chart) => chart !== "network").length + Number(showNetwork);
+  const availableCharts = options.visibleCharts.filter((chart) => chart !== "network" || networkItems.length > 0);
+  const visibleCharts = isAdvanced ? availableCharts : availableCharts.slice(0, getCompactChartBudget(height));
+  const showNetwork = visibleCharts.includes("network");
+  const chartCount = visibleCharts.length;
   const chartColumns = isAdvanced && width >= 560 ? 2 : 1;
   const chartHeight = isAdvanced
     ? 180
-    : `calc((100% - ${Math.max(0, chartCount - 1) * 8}px) / ${Math.max(1, chartCount)})`;
+    : `calc((100% - ${Math.max(0, chartCount - 1) * 10}px) / ${Math.max(1, chartCount)})`;
 
   return (
-    <Stack gap="xs" h={isAdvanced ? "auto" : "100%"} miw={0}>
+    <Stack gap="xs" h={isAdvanced ? "auto" : height} miw={0}>
       {showTitle && (
         <Text size="sm" fw={600} truncate="end">
           {integrationName}
         </Text>
       )}
-      <SimpleGrid cols={chartColumns} spacing="xs" style={{ flex: 1 }}>
-        {options.visibleCharts.includes("cpu") && (
+      <SimpleGrid cols={chartColumns} spacing="xs" style={{ flex: 1, minHeight: 0 }}>
+        {chartCount === 0 && (
+          <Center h="100%">
+            <Text size="sm" c="dimmed">
+              —
+            </Text>
+          </Center>
+        )}
+        {visibleCharts.includes("cpu") && (
           <Box h={chartHeight}>
             <SystemResourceCPUChart
               cpuUsageOverTime={items.map((item) => item.cpu)}
@@ -163,7 +197,7 @@ const SystemCharts = ({
             />
           </Box>
         )}
-        {options.visibleCharts.includes("memory") && (
+        {visibleCharts.includes("memory") && (
           <Box h={chartHeight}>
             <SystemResourceMemoryChart
               memoryUsageOverTime={items.map((item) => item.memory)}
@@ -173,7 +207,7 @@ const SystemCharts = ({
             />
           </Box>
         )}
-        {options.visibleCharts.includes("gpu") && (
+        {visibleCharts.includes("gpu") && (
           <Box h={chartHeight}>
             <SystemResourceGPUChart
               gpuUsageOverTime={items.map((item) => item.gpu)}
diff --git a/packages/widgets/src/system-resources/history.spec.ts b/packages/widgets/src/system-resources/history.spec.ts
index bb766d492..f08be4208 100644
--- a/packages/widgets/src/system-resources/history.spec.ts
+++ b/packages/widgets/src/system-resources/history.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { appendBoundedHistory, getNetworkHistory, toChartItem } from "./component";
+import { appendBoundedHistory, getCompactChartBudget, getNetworkHistory, toChartItem } from "./component";
 
 describe("system resource history", () => {
   test("averages all GPU values", () => {
@@ -30,4 +30,10 @@ describe("system resource history", () => {
 
     expect(getNetworkHistory([missing, available, missing])).toEqual([{ up: 12, down: 34 }]);
   });
+
+  test("limits compact charts to the available height", () => {
+    expect(getCompactChartBudget(100)).toBe(1);
+    expect(getCompactChartBudget(200)).toBe(2);
+    expect(getCompactChartBudget(300)).toBe(4);
+  });
 });
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index 7a50c3f70..bc6b62d20 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -12,6 +12,7 @@ export default function TimetableWidget({
   options,
   displayMode = "compact",
   width,
+  height,
   itemId,
 }: WidgetComponentProps<"timetable">) {
   const t = useScopedI18n("widget.timetable");
@@ -27,6 +28,7 @@ export default function TimetableWidget({
       itemId={itemId}
       displayMode={displayMode}
       width={width}
+      height={height}
     />
   );
 }
@@ -37,16 +39,22 @@ interface TimetableWidgetInnerProps {
   itemId?: string;
   displayMode: "compact" | "advanced";
   width: number;
+  height: number;
 }
 
-const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }: TimetableWidgetInnerProps) => {
-  const { data: timetable, error } = clientApi.widget.timetable.getTimetable.useQuery({
+const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, height }: TimetableWidgetInnerProps) => {
+  const {
+    data: timetable,
+    error,
+    isPending,
+  } = clientApi.widget.timetable.getTimetable.useQuery({
     baseUrl,
     itemId,
     stationId: station.value,
     limit: displayMode === "advanced" ? 50 : 10,
   });
   const t = useScopedI18n("widget.timetable");
+  const tCommon = useScopedI18n("common");
 
   if (error && timetable === undefined) throw error;
 
@@ -54,10 +62,19 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
   const staleTime = timetable ? dayjs(timetable.timestamp).format("HH:mm:ss") : undefined;
   const staleWarning = error && staleTime ? t("warning.stale", { time: staleTime }) : undefined;
   const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
+  const isAdvanced = displayMode === "advanced";
+  const isDense = !isAdvanced && (width < 300 || height < 160);
+  const showTitle = isAdvanced || height >= 112;
+  const showLine = isAdvanced || width >= 200;
+  const showPlatform = isAdvanced || width >= 320;
 
   return (
-    <Stack w="100%" h="100%" gap="xs" p="sm">
-      <Text fw="bold">{t("title", { station: station.label })}</Text>
+    <Stack w="100%" h="100%" gap={isDense ? 4 : "xs"} p={isDense ? "xs" : "sm"}>
+      {showTitle && (
+        <Text fw={600} size={isDense ? "sm" : undefined} truncate="end">
+          {t("title", { station: station.label })}
+        </Text>
+      )}
       {compactStaleWarning && displayMode === "compact" && (
         <Group gap={2} wrap="nowrap">
           <IconAlertTriangle aria-hidden size={12} color="var(--mantine-color-orange-light-color)" />
@@ -73,9 +90,29 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width }:
       )}
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>
         <SimpleGrid cols={displayMode === "advanced" && width >= 760 ? 2 : 1} spacing="xs">
-          {entries.map((entry) => (
-            <DepartureRow key={`${entry.timestamp.toISOString()}-${entry.location}`} entry={entry} />
-          ))}
+          {isPending ? (
+            <Center mih={64} style={{ gridColumn: "1 / -1" }}>
+              <Text size="sm" c="dimmed">
+                {tCommon("action.loading")}
+              </Text>
+            </Center>
+          ) : entries.length > 0 ? (
+            entries.map((entry) => (
+              <DepartureRow
+                key={`${entry.timestamp.toISOString()}-${entry.location}`}
+                entry={entry}
+                dense={isDense}
+                showLine={showLine}
+                showPlatform={showPlatform}
+              />
+            ))
+          ) : (
+            <Center mih={64} style={{ gridColumn: "1 / -1" }}>
+              <Text size="sm" c="dimmed">
+                —
+              </Text>
+            </Center>
+          )}
         </SimpleGrid>
       </ScrollArea>
       {displayMode === "advanced" && timetable && (
@@ -95,11 +132,21 @@ interface TimetableEntryView {
   platform: { name: string; hasChanged: boolean } | null;
 }
 
-function DepartureRow({ entry }: { entry: TimetableEntryView }) {
+function DepartureRow({
+  entry,
+  dense,
+  showLine,
+  showPlatform,
+}: {
+  entry: TimetableEntryView;
+  dense: boolean;
+  showLine: boolean;
+  showPlatform: boolean;
+}) {
   return (
     <Group justify="space-between" w="100%" wrap="nowrap">
-      <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
-        {entry.line && (
+      <Group gap={dense ? 6 : "sm"} wrap="nowrap" style={{ minWidth: 0 }}>
+        {showLine && entry.line && (
           <Badge
             size="sm"
             color={entry.line.color ?? undefined}
@@ -111,21 +158,21 @@ function DepartureRow({ entry }: { entry: TimetableEntryView }) {
             {entry.line.name}
           </Badge>
         )}
-        <Text size="sm" style={{ whiteSpace: "nowrap" }}>
+        <Text size={dense ? "xs" : "sm"} fw={dense ? 600 : undefined} style={{ whiteSpace: "nowrap" }}>
           {dayjs(entry.timestamp).format("HH:mm")}{" "}
           {entry.delay >= 1 && (
-            <Text size="sm" span c="red">
+            <Text size={dense ? "xs" : "sm"} span c="red">
               +{entry.delay}&apos;
             </Text>
           )}
         </Text>
-        <Text size="sm" truncate>
+        <Text size={dense ? "xs" : "sm"} truncate>
           {entry.location}
         </Text>
       </Group>
 
-      {entry.platform && (
-        <Text size="sm" c={entry.platform.hasChanged ? "red" : undefined} style={{ flexShrink: 0 }}>
+      {showPlatform && entry.platform && (
+        <Text size={dense ? "xs" : "sm"} c={entry.platform.hasChanged ? "red" : undefined} style={{ flexShrink: 0 }}>
           {entry.platform.name}
         </Text>
       )}
diff --git a/packages/widgets/src/tracearr/component.spec.ts b/packages/widgets/src/tracearr/component.spec.ts
index 171dead78..e74b35a54 100644
--- a/packages/widgets/src/tracearr/component.spec.ts
+++ b/packages/widgets/src/tracearr/component.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { getAdvancedColumnWidth } from "./component";
+import { getAdvancedColumnWidth, getCompactSectionVisibility } from "./component";
 
 describe("Tracearr advanced layout", () => {
   it("subtracts grid padding and the inter-column gap", () => {
@@ -12,3 +12,29 @@ describe("Tracearr advanced layout", () => {
     expect(getAdvancedColumnWidth(799, false)).toBe(767);
   });
 });
+
+describe("Tracearr compact disclosure", () => {
+  it("keeps urgent violations visible in a short widget", () => {
+    expect(
+      getCompactSectionVisibility({
+        height: 160,
+        showStreams: true,
+        showViolations: true,
+        hasViolations: true,
+        showRecentActivity: true,
+      }),
+    ).toEqual({ violations: true, recentActivity: false });
+  });
+
+  it("reveals secondary history as height becomes available", () => {
+    expect(
+      getCompactSectionVisibility({
+        height: 400,
+        showStreams: true,
+        showViolations: true,
+        hasViolations: false,
+        showRecentActivity: true,
+      }),
+    ).toEqual({ violations: true, recentActivity: true });
+  });
+});
diff --git a/packages/widgets/src/tracearr/component.tsx b/packages/widgets/src/tracearr/component.tsx
index 17f6df5bc..3992fe4f7 100644
--- a/packages/widgets/src/tracearr/component.tsx
+++ b/packages/widgets/src/tracearr/component.tsx
@@ -18,6 +18,23 @@ const ADVANCED_GRID_BREAKPOINT = 800;
 const ADVANCED_GRID_GAP_PX = 16;
 const ADVANCED_GRID_PADDING_PX = 16;
 
+export const getCompactSectionVisibility = ({
+  height,
+  showStreams,
+  showViolations,
+  hasViolations,
+  showRecentActivity,
+}: {
+  height: number;
+  showStreams: boolean;
+  showViolations: boolean;
+  hasViolations: boolean;
+  showRecentActivity: boolean;
+}) => ({
+  violations: showViolations && (hasViolations || height >= 240 || !showStreams),
+  recentActivity: showRecentActivity && (height >= 360 || (!showStreams && (!showViolations || !hasViolations))),
+});
+
 export default function TracearrWidget({
   options,
   integrationIds,
@@ -124,6 +141,13 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
   const streams = displayMode === "advanced" ? combined.streams.data : combined.streams.data.slice(0, compactLimit);
   const violations = combined.violations?.data ?? [];
   const recentActivity = combined.recentActivity?.data ?? [];
+  const compactSections = getCompactSectionVisibility({
+    height,
+    showStreams: options.showStreams,
+    showViolations: options.showViolations,
+    hasViolations: violations.length > 0,
+    showRecentActivity: options.showRecentActivity,
+  });
 
   if (displayMode === "advanced") {
     const isTwoColumn = width >= ADVANCED_GRID_BREAKPOINT;
@@ -154,9 +178,9 @@ function TracearrContent({ integrationIds, options, width, height, displayMode }
     <ScrollArea h="100%">
       <Stack gap="xs" p="xs">
         {options.showStats && <StatsBar stats={combined.stats} summary={combined.streams.summary} width={width} />}
+        {compactSections.violations && <ViolationsList violations={violations.slice(0, compactLimit)} />}
         {options.showStreams && <StreamsList streams={streams} width={width} />}
-        {options.showViolations && <ViolationsList violations={violations.slice(0, compactLimit)} />}
-        {options.showRecentActivity && <RecentActivityList sessions={recentActivity.slice(0, compactLimit)} />}
+        {compactSections.recentActivity && <RecentActivityList sessions={recentActivity.slice(0, compactLimit)} />}
         {noSectionsEnabled && (
           <Text c="dimmed" ta="center">
             {t("noSectionsEnabled")}
diff --git a/packages/widgets/src/tracearr/recent-activity-section.tsx b/packages/widgets/src/tracearr/recent-activity-section.tsx
index e078fd6f2..982101350 100644
--- a/packages/widgets/src/tracearr/recent-activity-section.tsx
+++ b/packages/widgets/src/tracearr/recent-activity-section.tsx
@@ -8,7 +8,7 @@ export function RecentActivityList({ sessions }: { sessions: TracearrHistorySess
 
   return (
     <Stack gap={4}>
-      <Text size="xs" fw={600} c="dimmed" tt="uppercase">
+      <Text size="xs" fw={600} c="dimmed">
         {t("recentActivity.title")}
       </Text>
       {sessions.length === 0 ? (
diff --git a/packages/widgets/src/tracearr/violations-section.tsx b/packages/widgets/src/tracearr/violations-section.tsx
index 2ce675ed8..6d052dd59 100644
--- a/packages/widgets/src/tracearr/violations-section.tsx
+++ b/packages/widgets/src/tracearr/violations-section.tsx
@@ -9,7 +9,7 @@ export function ViolationsList({ violations }: { violations: TracearrViolation[]
 
   return (
     <Stack gap={4}>
-      <Text size="xs" fw={600} c="dimmed" tt="uppercase">
+      <Text size="xs" fw={600} c="dimmed">
         {t("violations.title")}
       </Text>
       {violations.length === 0 ? (
diff --git a/packages/widgets/src/traefik/component.tsx b/packages/widgets/src/traefik/component.tsx
index 42d2d013b..a5503583c 100644
--- a/packages/widgets/src/traefik/component.tsx
+++ b/packages/widgets/src/traefik/component.tsx
@@ -126,7 +126,7 @@ function TraefikWidgetContent({
         ))}
       </div>
 
-      {options.showEntryPoints && combined.entryPoints.length > 0 && (
+      {options.showEntryPoints && combined.entryPoints.length > 0 && (displayMode === "advanced" || height >= 340) && (
         <div className={classes.entryPoints}>
           {dedupe(combined.entryPoints)
             .slice(0, getEntryPointLimit(width))
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 428bacff7..1179fb4f6 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -43,10 +43,11 @@ export function UmamiContent({
   displayMode,
 }: UmamiContentProps) {
   const t = useScopedI18n("widget.umami");
+  const tCommon = useScopedI18n("common");
   const { colorScheme } = useMantineColorScheme();
   const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
 
-  const { data: results = [] } = clientApi.widget.umami.getVisitorStats.useQuery(
+  const { data: results = [], isPending: isStatsPending } = clientApi.widget.umami.getVisitorStats.useQuery(
     { integrationIds, websiteId, timeFrame, eventName },
     umamiQueryOptions,
   );
@@ -67,6 +68,15 @@ export function UmamiContent({
     : undefined;
 
   const firstResult = results[0];
+  if (isStatsPending) {
+    return (
+      <Stack align="center" justify="center" h="100%">
+        <Text c="dimmed" size="sm">
+          {tCommon("action.loading")}
+        </Text>
+      </Stack>
+    );
+  }
   if (!firstResult) {
     return (
       <Stack align="center" justify="center" h="100%">
@@ -93,6 +103,11 @@ export function UmamiContent({
 
   const isOverlay = chartStyle === "overlay" && hasEventSeries;
   const overlayBarSize = 16;
+  const isAdvanced = displayMode === "advanced";
+  const isDense = !isAdvanced && height < 120;
+  const showXAxis = isAdvanced || height >= 140;
+  const showSecondaryStats = isAdvanced || height >= 96;
+  const showDetailedStats = isAdvanced || (width >= 260 && height >= 150);
 
   const selectedView =
     viewMode === "events" ? (
@@ -102,6 +117,7 @@ export function UmamiContent({
         timeFrame={timeFrame}
         eventNames={eventNames}
         chartType={chartType}
+        showXAxis={showXAxis}
       />
     ) : viewMode === "topPages" ? (
       <UmamiTopPagesContent
@@ -129,7 +145,7 @@ export function UmamiContent({
         gridAxis="none"
         withLegend={false}
         withTooltip
-        withXAxis
+        withXAxis={showXAxis}
         withYAxis={false}
         xAxisProps={{ tick: { fontSize: 9, fill: tickColor }, interval: "preserveStartEnd" }}
       />
@@ -143,7 +159,7 @@ export function UmamiContent({
         gridAxis="none"
         withLegend={false}
         withTooltip
-        withXAxis
+        withXAxis={showXAxis}
         withYAxis={false}
         barProps={isOverlay ? { barSize: overlayBarSize, radius: 2 } : { radius: 2 }}
         barChartProps={isOverlay ? { barGap: -overlayBarSize } : undefined}
@@ -190,7 +206,7 @@ export function UmamiContent({
     );
 
   return (
-    <Stack gap={4} p="xs" h="100%">
+    <Stack gap={isDense ? 2 : 4} p={isDense ? 4 : "xs"} h="100%">
       <Group justify="space-between" align="baseline" wrap="nowrap">
         <Text size="xs" c="dimmed" truncate="end" style={{ maxWidth: "55%" }}>
           {visitorStats.domain} ({formatTimeFrameLabel(timeFrame, t)})
@@ -231,27 +247,29 @@ export function UmamiContent({
           </Group>
         )}
       </Group>
-      <Group wrap="wrap" style={{ columnGap: 12, rowGap: 4 }}>
-        <Text size="xs" c="green">
-          ● {activeVisitors.toLocaleString()} {t("active")}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {visitorStats.totalPageviews.toLocaleString()} {t("pageviews")}
-        </Text>
-        <Text size="xs" c="dimmed">
-          {visitorStats.totalVisits.toLocaleString()} {t("visits")}
-        </Text>
-        {(displayMode === "advanced" || width >= 260) && (
-          <>
-            <Text size="xs" c="dimmed">
-              {visitorStats.bounceRate}% {t("bounceRate")}
-            </Text>
-            <Text size="xs" c="dimmed">
-              {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
-            </Text>
-          </>
-        )}
-      </Group>
+      {showSecondaryStats && (
+        <Group wrap="wrap" style={{ columnGap: 12, rowGap: 4 }}>
+          <Text size="xs" c="green">
+            ● {activeVisitors.toLocaleString()} {t("active")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {visitorStats.totalPageviews.toLocaleString()} {t("pageviews")}
+          </Text>
+          <Text size="xs" c="dimmed">
+            {visitorStats.totalVisits.toLocaleString()} {t("visits")}
+          </Text>
+          {showDetailedStats && (
+            <>
+              <Text size="xs" c="dimmed">
+                {visitorStats.bounceRate}% {t("bounceRate")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}
+              </Text>
+            </>
+          )}
+        </Group>
+      )}
       <Box mt={4} style={{ flex: 1, minHeight: 0 }}>
         {displayMode === "advanced" ? advancedContent : selectedView}
       </Box>
diff --git a/packages/widgets/src/umami/umami-events-content.tsx b/packages/widgets/src/umami/umami-events-content.tsx
index ef91df422..e503df97a 100644
--- a/packages/widgets/src/umami/umami-events-content.tsx
+++ b/packages/widgets/src/umami/umami-events-content.tsx
@@ -15,6 +15,7 @@ interface UmamiEventsContentProps {
   timeFrame: string;
   eventNames: string[];
   chartType: string;
+  showXAxis: boolean;
 }
 
 export function UmamiEventsContent({
@@ -23,6 +24,7 @@ export function UmamiEventsContent({
   timeFrame,
   eventNames,
   chartType,
+  showXAxis,
 }: UmamiEventsContentProps) {
   const t = useScopedI18n("widget.umami");
   const { colorScheme } = useMantineColorScheme();
@@ -104,7 +106,7 @@ export function UmamiEventsContent({
             gridAxis="none"
             withLegend={false}
             withTooltip
-            withXAxis
+            withXAxis={showXAxis}
             withYAxis={false}
             xAxisProps={{
               tick: { fontSize: 9, fill: tickColor },
@@ -121,7 +123,7 @@ export function UmamiEventsContent({
             gridAxis="none"
             withLegend={false}
             withTooltip
-            withXAxis
+            withXAxis={showXAxis}
             withYAxis={false}
             barProps={{ radius: 2 }}
             xAxisProps={{
diff --git a/packages/widgets/src/uptime-kuma/aggregate.spec.ts b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
index c4aaf9f18..4982f5331 100644
--- a/packages/widgets/src/uptime-kuma/aggregate.spec.ts
+++ b/packages/widgets/src/uptime-kuma/aggregate.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 
 import { aggregateUptimeKumaDashboards } from "./aggregate";
+import { getCompactStatLimit, getCompactStatPriority } from "./component";
 
 describe("aggregateUptimeKumaDashboards", () => {
   it("weights uptime by monitors instead of integrations", () => {
@@ -29,3 +30,26 @@ describe("aggregateUptimeKumaDashboards", () => {
     expect(combined.averageUptimePercent).toBe(25);
   });
 });
+
+describe("getCompactStatLimit", () => {
+  it("reserves compact height for the uptime summary", () => {
+    expect(getCompactStatLimit(150, true, 4)).toBe(0);
+    expect(getCompactStatLimit(220, true, 4)).toBe(2);
+  });
+
+  it("uses the space for metrics when the summary is disabled", () => {
+    expect(getCompactStatLimit(100, false, 4)).toBe(2);
+    expect(getCompactStatLimit(240, false, 4)).toBe(4);
+  });
+});
+
+describe("getCompactStatPriority", () => {
+  it("puts active failures before healthy totals", () => {
+    expect(getCompactStatPriority("downCount", 2)).toBeLessThan(getCompactStatPriority("totalMonitors", 10));
+    expect(getCompactStatPriority("pausedCount", 1)).toBeLessThan(getCompactStatPriority("upCount", 8));
+  });
+
+  it("moves zero-value problem states behind healthy totals", () => {
+    expect(getCompactStatPriority("downCount", 0)).toBeGreaterThan(getCompactStatPriority("upCount", 8));
+  });
+});
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index efe60c72c..838ce7eaa 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -76,6 +76,25 @@ const heroVariantByRing = {
   false: classes.heroTextOnly,
 } as const;
 
+export function getCompactStatLimit(height: number, showHero: boolean, statCount: number): number {
+  if (showHero) {
+    if (height < 180) return 0;
+    if (height < 260) return Math.min(2, statCount);
+    if (height < 340) return Math.min(4, statCount);
+  } else {
+    if (height < 130) return Math.min(2, statCount);
+    if (height < 220) return Math.min(4, statCount);
+  }
+  return statCount;
+}
+
+export function getCompactStatPriority(statKey: keyof typeof statIcons, value: number): number {
+  if (statKey === "downCount") return value > 0 ? 0 : 4;
+  if (statKey === "pausedCount") return value > 0 ? 1 : 5;
+  if (statKey === "totalMonitors") return 2;
+  return 3;
+}
+
 export default function UptimeKumaWidget({
   integrationIds,
   options,
@@ -126,16 +145,30 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
   const iconSize = getIconSize(width);
   const gridCols = getGridCols(width);
 
-  const visibleStatKeys = Object.entries(statVisibilityByOption)
+  const enabledStatKeys = Object.entries(statVisibilityByOption)
     .filter(([optionKey]) => options[optionKey as keyof typeof options])
     .map(([, statKey]) => statKey);
 
   const showHero = options.showAverageUptime;
+  const showRing = options.showUptimeRing && (displayMode === "advanced" || (width >= 170 && height >= 110));
+  const prioritizedStatKeys =
+    displayMode === "advanced"
+      ? enabledStatKeys
+      : enabledStatKeys.toSorted(
+          (left, right) =>
+            getCompactStatPriority(left, combined[left]) - getCompactStatPriority(right, combined[right]),
+        );
+  const visibleStatKeys = prioritizedStatKeys.slice(
+    0,
+    displayMode === "advanced"
+      ? prioritizedStatKeys.length
+      : getCompactStatLimit(height, showHero, prioritizedStatKeys.length),
+  );
   const hasContent = showHero || visibleStatKeys.length > 0;
 
   const heroLayoutClass =
     heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
-  const heroRingClass = heroVariantByRing[String(options.showUptimeRing) as keyof typeof heroVariantByRing];
+  const heroRingClass = heroVariantByRing[String(showRing) as keyof typeof heroVariantByRing];
 
   const summaryContent = (
     <div className={classes.root}>
@@ -145,7 +178,7 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
             <span className={classes.heroLabel}>{t("averageUptime")}</span>
             <span className={classes.heroValue}>{formatNumber(uptimeValue, 1)}%</span>
           </div>
-          {options.showUptimeRing && (
+          {showRing && (
             <RingProgress
               className={classes.ring}
               size={ringSize}
@@ -190,7 +223,7 @@ function UptimeKumaContent({ integrationIds, options, width, height, displayMode
           })}
         </div>
       )}
-      {displayMode === "compact" && height >= 240 && combined.downCount > 0 && (
+      {displayMode === "compact" && height >= 300 && combined.downCount > 0 && (
         <Stack gap={2} px="sm">
           {monitors
             .filter((monitor) => monitor.status === "down")
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index 4d43bc302..295499d78 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import { Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Center, Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { VpnIntegrationCard } from "./vpn-card";
@@ -11,12 +12,26 @@ export default function VpnWidget({
   options,
   integrationIds,
   width,
+  height,
   displayMode = "compact",
 }: WidgetComponentProps<"vpn">) {
-  const { data: integrations = [] } = clientApi.widget.vpn.getSummaries.useQuery({
+  const { data: integrations = [], isPending } = clientApi.widget.vpn.getSummaries.useQuery({
     ...options,
     integrationIds,
   });
+  const t = useScopedI18n("widget.vpn");
+  const tCommon = useScopedI18n("common");
+  const dense = displayMode === "compact" && (width < 240 || height < 120);
+
+  if (isPending || integrations.length === 0) {
+    return (
+      <Center h="100%" p="sm">
+        <Text c="dimmed" size="sm" ta="center">
+          {isPending ? tCommon("action.loading") : t("serviceUnavailable")}
+        </Text>
+      </Center>
+    );
+  }
 
   const [vpn] = integrations;
   if (displayMode === "compact" && integrations.length === 1 && vpn) {
@@ -26,6 +41,7 @@ export default function VpnWidget({
           vpn={vpn.summary}
           integrationName={vpn.integration.name}
           variant={width < 240 ? "list" : "single"}
+          dense={dense}
         />
       </Flex>
     );
@@ -59,6 +75,7 @@ export default function VpnWidget({
             vpn={result.summary}
             integrationName={result.integration.name}
             variant="list"
+            dense={dense}
           />
         ))}
       </Stack>
diff --git a/packages/widgets/src/vpn/vpn-card.tsx b/packages/widgets/src/vpn/vpn-card.tsx
index 3cb26bdd5..8ddcfd7fd 100644
--- a/packages/widgets/src/vpn/vpn-card.tsx
+++ b/packages/widgets/src/vpn/vpn-card.tsx
@@ -1,8 +1,15 @@
 "use client";
 
 import React from "react";
-import { Badge, Box, Card, Flex, Group, Text } from "@mantine/core";
-import { IconArrowsExchange, IconMapPin, IconShieldCheck, IconShieldX } from "@tabler/icons-react";
+import { Badge, Box, Card, Flex, Group, Text, VisuallyHidden } from "@mantine/core";
+import {
+  IconArrowsExchange,
+  IconCircleCheckFilled,
+  IconCircleXFilled,
+  IconMapPin,
+  IconShieldCheck,
+  IconShieldX,
+} from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { useRequiredBoard } from "@homarr/boards/context";
@@ -16,17 +23,19 @@ export function VpnIntegrationCard({
   vpn,
   integrationName,
   variant = "single",
+  dense = false,
 }: {
   vpn: VpnInfo;
   integrationName?: string;
   variant?: "single" | "list";
+  dense?: boolean;
 }) {
   const board = useRequiredBoard();
   const compact = variant === "list";
 
   const content = vpn ? (
     <Flex direction="row" w="100%" align="center" gap="xs">
-      <VpnStatusColumn vpnStatus={vpn.vpnStatus} dnsStatus={vpn.dnsStatus} compact={compact} />
+      <VpnStatusColumn vpnStatus={vpn.vpnStatus} dnsStatus={vpn.dnsStatus} compact={compact} dense={dense} />
       <VpnInfoColumn
         integrationName={compact ? integrationName : undefined}
         publicIp={vpn.publicIp}
@@ -35,15 +44,16 @@ export function VpnIntegrationCard({
         provider={vpn.vpnProvider.provider}
         protocol={vpn.vpnProvider.protocol}
         compact={compact}
+        dense={dense}
       />
     </Flex>
   ) : (
-    <VpnUnavailableContent compact={compact} integrationName={compact ? integrationName : undefined} />
+    <VpnUnavailableContent compact={compact} dense={dense} integrationName={compact ? integrationName : undefined} />
   );
 
   if (compact) {
     return (
-      <Card withBorder radius={board.itemRadius} p="xs" w="100%">
+      <Card withBorder radius={board.itemRadius} p={dense ? 6 : "xs"} w="100%">
         {content}
       </Card>
     );
@@ -52,20 +62,28 @@ export function VpnIntegrationCard({
   return <Box w="100%">{content}</Box>;
 }
 
-function VpnUnavailableContent({ compact, integrationName }: { compact: boolean; integrationName?: string }) {
+function VpnUnavailableContent({
+  compact,
+  dense,
+  integrationName,
+}: {
+  compact: boolean;
+  dense: boolean;
+  integrationName?: string;
+}) {
   const t = useScopedI18n("widget.vpn");
 
   return (
     <Flex direction="row" w="100%" align="center" gap="xs">
       {/* Empty statuses render the shield and DNS badge in red (see getStatusColor). */}
-      <VpnStatusColumn vpnStatus="" dnsStatus="" compact={compact} />
+      <VpnStatusColumn vpnStatus="" dnsStatus="" compact={compact} dense={dense} />
       <Flex gap={2} direction="column" w="100%" align="flex-start" style={{ minWidth: 0 }}>
         {integrationName ? (
           <Text fw={600} size="xs" lh={1.2} c="dimmed" lineClamp={1}>
             {integrationName}
           </Text>
         ) : null}
-        <Text fw={700} size={compact ? "md" : "lg"} lh={1.2} c="red" lineClamp={2}>
+        <Text fw={700} size={dense ? "sm" : compact ? "md" : "lg"} lh={1.2} c="red" lineClamp={2}>
           {t("serviceUnavailable")}
         </Text>
       </Flex>
@@ -77,17 +95,30 @@ function VpnStatusColumn({
   vpnStatus,
   dnsStatus,
   compact,
+  dense,
 }: {
   vpnStatus: string;
   dnsStatus: string;
   compact: boolean;
+  dense: boolean;
 }) {
   // Connected shows a shield with a check; anything else (stopped or unavailable) shows a shield with a cross.
   const ShieldIcon = vpnStatus === RUNNING_STATUS ? IconShieldCheck : IconShieldX;
 
   return (
-    <Flex gap={4} direction="column" w={compact ? "28%" : "30%"} miw={compact ? 56 : undefined} align="center">
-      <ShieldIcon stroke={2} color={getStatusColor(vpnStatus)} size={compact ? 44 : 52} />
+    <Flex
+      gap={4}
+      direction="column"
+      w={compact ? "28%" : "30%"}
+      miw={dense ? 44 : compact ? 56 : undefined}
+      align="center"
+    >
+      <ShieldIcon
+        aria-label={vpnStatus || "unavailable"}
+        stroke={2}
+        color={getStatusColor(vpnStatus)}
+        size={dense ? 32 : compact ? 44 : 52}
+      />
       <DnsStatusBadge status={dnsStatus} />
     </Flex>
   );
@@ -101,6 +132,7 @@ function VpnInfoColumn({
   provider,
   protocol,
   compact,
+  dense,
 }: {
   integrationName?: string;
   publicIp: string;
@@ -109,6 +141,7 @@ function VpnInfoColumn({
   provider: string;
   protocol: string;
   compact: boolean;
+  dense: boolean;
 }) {
   return (
     <Flex gap={2} direction="column" w="100%" align="flex-start" style={{ minWidth: 0 }}>
@@ -117,16 +150,18 @@ function VpnInfoColumn({
           {integrationName}
         </Text>
       ) : null}
-      <Text fw={700} size={compact ? "xl" : "2xl"} lh={1.1} lineClamp={1}>
-        {publicIp}
+      <Text fw={700} size={dense ? "md" : compact ? "xl" : "2xl"} lh={1.1} lineClamp={1}>
+        {publicIp || "—"}
       </Text>
-      <Group gap={4} justify="flex-start" wrap="nowrap">
-        <IconMapPin size={10} />
-        <Text fs="italic" fw={500} size="sm" lh={1.2} lineClamp={1}>
-          {city}, {country}
-        </Text>
-      </Group>
-      <VpnProviderDetails provider={provider} protocol={protocol} />
+      {!dense && (city || country) && (
+        <Group gap={4} justify="flex-start" wrap="nowrap">
+          <IconMapPin aria-hidden size={10} />
+          <Text fs="italic" fw={500} size="sm" lh={1.2} lineClamp={1}>
+            {[city, country].filter(Boolean).join(", ")}
+          </Text>
+        </Group>
+      )}
+      {!dense && (provider || protocol) && <VpnProviderDetails provider={provider} protocol={protocol} />}
     </Flex>
   );
 }
@@ -145,20 +180,18 @@ function VpnProviderDetails({ provider, protocol }: { provider: string; protocol
   );
 }
 
-function StatusDot({ status, size = 10 }: { status: string; size?: number }) {
-  return <Box bg={getStatusColor(status)} h={size} w={size} style={{ borderRadius: 999 }} />;
-}
-
 function DnsStatusBadge({ status }: { status: string }) {
+  const StatusIcon = status === RUNNING_STATUS ? IconCircleCheckFilled : IconCircleXFilled;
   return (
     <Badge
       variant="outline"
       color={getStatusColor(status)}
       size="xs"
       radius="xl"
-      leftSection={<StatusDot status={status} size={5} />}
+      leftSection={<StatusIcon aria-hidden size={9} />}
     >
       DNS
+      <VisuallyHidden> {status || "unavailable"}</VisuallyHidden>
     </Badge>
   );
 }
diff --git a/packages/widgets/src/weather/component.spec.ts b/packages/widgets/src/weather/component.spec.ts
index 54f8f6a56..44bfe8847 100644
--- a/packages/widgets/src/weather/component.spec.ts
+++ b/packages/widgets/src/weather/component.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from "vitest";
 
-import { getPreferredUnit, getVisibleForecastDays } from "./component";
+import { getPreferredTime, getPreferredUnit, getPreferredWindSpeed, getVisibleForecastDays } from "./component";
 
 describe("weather formatting", () => {
   it("preserves valid zero temperatures", () => {
@@ -8,9 +8,15 @@ describe("weather formatting", () => {
     expect(getPreferredUnit(0, true, true)).toBe("32°F");
   });
 
+  it("keeps zero wind speeds and missing forecast values truthful", () => {
+    expect(getPreferredWindSpeed(0)).toBe("0.0");
+    expect(getPreferredWindSpeed(undefined)).toBe("?");
+    expect(getPreferredTime(undefined)).toBe("?");
+    expect(getPreferredTime("invalid")).toBe("?");
+  });
+
   it("limits compact forecasts by both axes", () => {
-    expect(getVisibleForecastDays(7, 120, 100, false)).toBe(2);
-    expect(getVisibleForecastDays(7, 600, 100, false)).toBe(3);
-    expect(getVisibleForecastDays(7, 120, 100, true)).toBe(7);
+    expect(getVisibleForecastDays(7, 120, 100)).toBe(2);
+    expect(getVisibleForecastDays(7, 600, 100)).toBe(3);
   });
 });
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index 4b3c6c0bc..59f16347e 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,7 +1,16 @@
 "use client";
 
-import { Box, Group, HoverCard, Stack, Text } from "@mantine/core";
-import { IconArrowDownRight, IconArrowUpRight, IconDroplets, IconMapPin, IconWind } from "@tabler/icons-react";
+import { useId } from "react";
+import { Box, Group, HoverCard, Stack, Table, Text } from "@mantine/core";
+import {
+  IconArrowDownRight,
+  IconArrowUpRight,
+  IconDroplets,
+  IconMapPin,
+  IconSunrise,
+  IconSunset,
+  IconWind,
+} from "@tabler/icons-react";
 import combineClasses from "clsx";
 import dayjs from "dayjs";
 
@@ -30,6 +39,10 @@ export default function WeatherWidget({
 
   if (!weather) return <WidgetEmptyState />;
 
+  if (displayMode === "advanced") {
+    return <AdvancedWeather weather={weather} options={options} />;
+  }
+
   return (
     <Stack
       align="center"
@@ -43,11 +56,10 @@ export default function WeatherWidget({
         <WeeklyForecast
           weather={weather}
           options={options}
-          maxDays={getVisibleForecastDays(options.forecastDayCount, width, height, displayMode === "advanced")}
-          showDetails={displayMode === "advanced"}
+          maxDays={getVisibleForecastDays(options.forecastDayCount, width, height)}
         />
       ) : (
-        <DailyWeather weather={weather} options={options} showDetails={displayMode === "advanced"} />
+        <DailyWeather weather={weather} options={options} />
       )}
     </Stack>
   );
@@ -57,7 +69,172 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
-const DailyWeather = ({ options, weather, showDetails = false }: WeatherProps & { showDetails?: boolean }) => {
+const AdvancedWeather = ({ options, weather }: WeatherProps) => {
+  const forecastHeadingId = useId();
+  const t = useScopedI18n("widget.weather");
+  const tCommon = useScopedI18n("common");
+
+  return (
+    <Stack h="100%" w="100%" gap="sm" p="md" style={{ overflow: "hidden" }}>
+      <Group justify="space-between" align="center" gap="sm" wrap="wrap">
+        <Group gap="sm" wrap="nowrap">
+          <AnimatedWeatherIcon size={42} code={weather.current.weathercode} />
+          <Stack gap={0}>
+            <Text fz="xl" fw={700} lh={1.1}>
+              {getPreferredUnit(
+                weather.current.temperature,
+                options.isFormatFahrenheit,
+                options.disableTemperatureDecimals,
+              )}
+            </Text>
+            <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
+          </Stack>
+        </Group>
+
+        <Group gap="lg" wrap="wrap">
+          <Group gap={5} wrap="nowrap">
+            <IconMapPin size={16} aria-hidden />
+            <Text size="sm">{options.location.name}</Text>
+          </Group>
+          <Group gap={5} wrap="nowrap">
+            <IconWind size={16} aria-hidden />
+            <Text size="sm">
+              {t("currentWindSpeed", {
+                currentWindSpeed: getPreferredWindSpeed(weather.current.windspeed, options.useImperialSpeed),
+                unit: options.useImperialSpeed
+                  ? tCommon("unit.speed.milesPerHour")
+                  : tCommon("unit.speed.kilometersPerHour"),
+              })}
+            </Text>
+          </Group>
+        </Group>
+      </Group>
+
+      <Text id={forecastHeadingId} component="h3" size="sm" fw={600}>
+        {t("advanced.forecast")}
+      </Text>
+      <Table.ScrollContainer
+        minWidth={680}
+        maxHeight="100%"
+        style={{ flex: 1, minHeight: 0 }}
+        scrollAreaProps={{ type: "auto", offsetScrollbars: "present" }}
+      >
+        <Table
+          aria-labelledby={forecastHeadingId}
+          striped
+          highlightOnHover
+          verticalSpacing="xs"
+          horizontalSpacing="sm"
+          stickyHeader
+        >
+          <Table.Thead>
+            <Table.Tr>
+              <Table.Th>{t("advanced.day")}</Table.Th>
+              <Table.Th>{t("advanced.conditions")}</Table.Th>
+              <Table.Th>{t("advanced.temperature")}</Table.Th>
+              <Table.Th>{t("advanced.humidity")}</Table.Th>
+              <Table.Th>
+                {t("advanced.wind", {
+                  unit: options.useImperialSpeed
+                    ? tCommon("unit.speed.milesPerHour")
+                    : tCommon("unit.speed.kilometersPerHour"),
+                })}
+              </Table.Th>
+              <Table.Th>{t("advanced.sun")}</Table.Th>
+            </Table.Tr>
+          </Table.Thead>
+          <Table.Tbody>
+            {weather.daily.length === 0 ? (
+              <Table.Tr>
+                <Table.Td colSpan={6}>
+                  <Text size="sm" c="dimmed" ta="center">
+                    {t("advanced.noForecast")}
+                  </Text>
+                </Table.Td>
+              </Table.Tr>
+            ) : (
+              weather.daily.map((dayWeather) => (
+                <Table.Tr key={dayWeather.time}>
+                  <Table.Td>
+                    <Stack gap={0}>
+                      <Text size="sm" fw={600} tt="capitalize">
+                        {dayjs(dayWeather.time).format("ddd")}
+                      </Text>
+                      <Text size="xs" c="dimmed">
+                        {dayjs(dayWeather.time).format("MMM D")}
+                      </Text>
+                    </Stack>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap="xs" wrap="nowrap">
+                      <AnimatedWeatherIcon size={20} code={dayWeather.weatherCode} />
+                      <WeatherDescription weatherOnly weatherCode={dayWeather.weatherCode} />
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={4} wrap="nowrap">
+                      <IconArrowUpRight size={15} aria-hidden />
+                      <Text size="sm">
+                        {getPreferredUnit(
+                          dayWeather.maxTemp,
+                          options.isFormatFahrenheit,
+                          options.disableTemperatureDecimals,
+                        )}
+                      </Text>
+                      <Text size="sm" c="dimmed">
+                        /
+                      </Text>
+                      <IconArrowDownRight size={15} aria-hidden />
+                      <Text size="sm">
+                        {getPreferredUnit(
+                          dayWeather.minTemp,
+                          options.isFormatFahrenheit,
+                          options.disableTemperatureDecimals,
+                        )}
+                      </Text>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={5} wrap="nowrap">
+                      <IconDroplets size={15} aria-hidden />
+                      <Text size="sm">{dayWeather.humidity === undefined ? "?" : `${dayWeather.humidity}%`}</Text>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap={5} wrap="nowrap">
+                      <IconWind size={15} aria-hidden />
+                      <Text size="sm">
+                        {getPreferredWindSpeed(dayWeather.maxWindSpeed, options.useImperialSpeed)} /{" "}
+                        {getPreferredWindSpeed(dayWeather.maxWindGusts, options.useImperialSpeed)}
+                      </Text>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td>
+                    <Group gap="xs" wrap="nowrap">
+                      <Group gap={3} wrap="nowrap">
+                        <IconSunrise size={15} aria-hidden />
+                        <Text size="sm">{getPreferredTime(dayWeather.sunrise)}</Text>
+                      </Group>
+                      <Text size="sm" c="dimmed">
+                        /
+                      </Text>
+                      <Group gap={3} wrap="nowrap">
+                        <IconSunset size={15} aria-hidden />
+                        <Text size="sm">{getPreferredTime(dayWeather.sunset)}</Text>
+                      </Group>
+                    </Group>
+                  </Table.Td>
+                </Table.Tr>
+              ))
+            )}
+          </Table.Tbody>
+        </Table>
+      </Table.ScrollContainer>
+    </Stack>
+  );
+};
+
+const DailyWeather = ({ options, weather }: WeatherProps) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
 
@@ -138,39 +315,11 @@ const DailyWeather = ({ options, weather, showDetails = false }: WeatherProps &
           </Group>
         </>
       )}
-      {showDetails && weather.daily[0] && (
-        <WeatherDescription
-          useImperialSpeed={options.useImperialSpeed}
-          dateFormat={options.dateFormat}
-          time={weather.daily[0].time}
-          weatherCode={weather.daily[0].weatherCode}
-          maxTemp={getPreferredUnit(
-            weather.daily[0].maxTemp,
-            options.isFormatFahrenheit,
-            options.disableTemperatureDecimals,
-          )}
-          minTemp={getPreferredUnit(
-            weather.daily[0].minTemp,
-            options.isFormatFahrenheit,
-            options.disableTemperatureDecimals,
-          )}
-          sunrise={dayjs(weather.daily[0].sunrise).format("HH:mm")}
-          sunset={dayjs(weather.daily[0].sunset).format("HH:mm")}
-          maxWindSpeed={weather.daily[0].maxWindSpeed}
-          maxWindGusts={weather.daily[0].maxWindGusts}
-          humidity={weather.daily[0].humidity}
-        />
-      )}
     </>
   );
 };
 
-const WeeklyForecast = ({
-  options,
-  weather,
-  maxDays,
-  showDetails,
-}: WeatherProps & { maxDays: number; showDetails: boolean }) => {
+const WeeklyForecast = ({ options, weather, maxDays }: WeatherProps & { maxDays: number }) => {
   return (
     <>
       <Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="md">
@@ -202,17 +351,12 @@ const WeeklyForecast = ({
           </Text>
         </Group>
       </Group>
-      <Forecast weather={weather} options={options} maxDays={maxDays} showDetails={showDetails} />
+      <Forecast weather={weather} options={options} maxDays={maxDays} />
     </>
   );
 };
 
-function Forecast({
-  weather,
-  options,
-  maxDays,
-  showDetails,
-}: WeatherProps & { maxDays: number; showDetails: boolean }) {
+function Forecast({ weather, options, maxDays }: WeatherProps & { maxDays: number }) {
   const dateFormat = options.dateFormat;
   return (
     <Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="sm">
@@ -233,11 +377,6 @@ function Forecast({
               <Text fz={16}>
                 {getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
               </Text>
-              {showDetails && (
-                <Text fz="xs" c="dimmed">
-                  {getPreferredUnit(dayWeather.minTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
-                </Text>
-              )}
             </Stack>
           </HoverCard.Target>
           <HoverCard.Dropdown>
@@ -276,13 +415,16 @@ export const getPreferredUnit = (value?: number, isFahrenheit = false, disableTe
       : `${value.toFixed(disableTemperatureDecimals ? 0 : 1)}°C`
     : "?";
 
-export const getVisibleForecastDays = (
-  configuredDays: number,
-  width: number,
-  height: number,
-  isAdvanced: boolean,
-): number => {
-  if (isAdvanced) return configuredDays;
+export const getPreferredWindSpeed = (value: number | undefined, useImperialSpeed = false): string =>
+  value === undefined ? "?" : (useImperialSpeed ? metricToImperial(value) : value).toFixed(1);
+
+export const getPreferredTime = (value: string | undefined): string => {
+  if (!value) return "?";
+  const time = dayjs(value);
+  return time.isValid() ? time.format("HH:mm") : "?";
+};
+
+export const getVisibleForecastDays = (configuredDays: number, width: number, height: number): number => {
   const widthBudget = Math.max(1, Math.floor(width / 58));
   const heightBudget = height < 120 ? 3 : configuredDays;
   return Math.min(configuredDays, widthBudget, heightBudget);

From 7b7045202d289b7d83946befcee5d2845ea4a706 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 14:35:01 +0200
Subject: [PATCH 14/75] fix: address widget review findings

---
 apps/docs/docs/widgets/weather/index.mdx      |   1 +
 .../integration/integration-grid-shared.ts    |   1 +
 packages/translation/src/lang/en.json         |   7 ++
 .../widgets/src/anchor-note/component.tsx     |  10 +-
 .../beszel-system-stats/component.module.css  |   2 +-
 packages/widgets/src/calendar/component.tsx   |  41 +++++--
 .../src/common/action-target.module.css       |  11 ++
 packages/widgets/src/coolify/resource-row.tsx |   3 +
 .../widgets/src/coolify/servers-section.tsx   |   2 +
 packages/widgets/src/custom-api/component.tsx |  13 ++-
 .../src/dns-hole/controls/component.tsx       |   6 +-
 packages/widgets/src/docker/component.tsx     |   3 +
 .../system-health.module.css                  |   2 +-
 .../src/health-monitoring/system-health.tsx   |   3 +-
 .../src/indexer-manager/component.module.css  |   2 +-
 .../widgets/src/indexer-manager/component.tsx |   3 +-
 .../media-requests/list/component.module.css  |   9 +-
 .../src/media-requests/list/component.tsx     |   7 +-
 .../media-requests/search-button.module.css   |   6 +-
 .../src/media-requests/stats/component.tsx    |   3 +-
 .../media-transcoding/health-check-status.tsx |   4 +-
 packages/widgets/src/notebook/notebook.tsx    |  45 ++++----
 packages/widgets/src/releases/component.tsx   |  18 +++-
 packages/widgets/src/stocks/component.tsx     |   6 +-
 .../widgets/src/weather/component.module.css  |  31 ++++++
 packages/widgets/src/weather/component.tsx    | 102 ++++++++++--------
 26 files changed, 247 insertions(+), 94 deletions(-)
 create mode 100644 packages/widgets/src/common/action-target.module.css
 create mode 100644 packages/widgets/src/weather/component.module.css

diff --git a/apps/docs/docs/widgets/weather/index.mdx b/apps/docs/docs/widgets/weather/index.mdx
index a4b84b5fa..f36dc68ea 100644
--- a/apps/docs/docs/widgets/weather/index.mdx
+++ b/apps/docs/docs/widgets/weather/index.mdx
@@ -14,6 +14,7 @@ import { weatherWidget } from ".";
 <WidgetHeader widget={weatherWidget} categories={["Weather"]} />
 
 The Weather Widget uses your location to display the current, highest and lowest temperature.
+In the compact view, select a condition icon or forecast day to open details with a mouse, keyboard or touch.
 The advanced view always combines current conditions with the full seven-day forecast, including humidity, wind,
 gusts, sunrise and sunset. Both views reuse the same cached Open Meteo response.
 
diff --git a/apps/nextjs/src/components/integration/integration-grid-shared.ts b/apps/nextjs/src/components/integration/integration-grid-shared.ts
index 7451af1e7..9b4c6afb6 100644
--- a/apps/nextjs/src/components/integration/integration-grid-shared.ts
+++ b/apps/nextjs/src/components/integration/integration-grid-shared.ts
@@ -45,6 +45,7 @@ export const categoryTranslationKeys: Record<string, string> = {
   smartHomeServer: "integration.category.smartHomeServer",
   indexerManager: "integration.category.indexerManager",
   healthMonitoring: "integration.category.healthMonitoring",
+  beszel: "integration.category.beszel",
   search: "integration.category.search",
   mediaTranscoding: "integration.category.mediaTranscoding",
   networkController: "integration.category.networkController",
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index badfef807..16f33874c 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1012,6 +1012,7 @@
       "smartHomeServer": "Smart Home",
       "indexerManager": "Indexer",
       "healthMonitoring": "Health",
+      "beszel": "Beszel",
       "search": "Search",
       "mediaTranscoding": "Transcoding",
       "networkController": "Network",
@@ -2299,6 +2300,7 @@
         "previousMonth": "Show previous month",
         "nextMonth": "Show next month",
         "eventCount": "{count, plural, one {# event} other {# events}}",
+        "loading": "Loading calendar events...",
         "noEvents": "No events in this month"
       },
       "option": {
@@ -2357,6 +2359,8 @@
         }
       },
       "currentWindSpeed": "{currentWindSpeed} {unit}",
+      "details": "Show weather details",
+      "detailsFor": "Show weather details for {date}",
       "advanced": {
         "forecast": "7-day forecast",
         "day": "Day",
@@ -3684,6 +3688,8 @@
       "starsCount": "Stars",
       "forksCount": "Forks",
       "issuesCount": "Open Issues",
+      "expandDetails": "Show details for {name}",
+      "collapseDetails": "Hide details for {name}",
       "markViewed": "Mark as viewed",
       "openProjectPage": "Open Project Page",
       "openReleasePage": "Open Release Page",
@@ -4087,6 +4093,7 @@
       "executeSuccess": "Action executed successfully",
       "executeFailed": "Action failed. Check the widget configuration.",
       "actions": {
+        "openJsonViewer": "Open in browser JSON viewer",
         "pausePolling": "Pause polling",
         "resumePolling": "Resume polling",
         "togglePolling": "Pause or resume polling"
diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 9268bf6f4..24e4de866 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -18,6 +18,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
 
 import "react-quill-new/dist/quill.snow.css";
 import "./anchor-note.css";
@@ -353,7 +354,14 @@ const AnchorNoteWidgetContent = ({
               </Button>
             ) : (
               <Tooltip label={t("edit")}>
-                <ActionIcon aria-label={t("edit")} size="md" variant="light" onClick={handleEdit} disabled={isUpdating}>
+                <ActionIcon
+                  className={actionTargetClasses.root}
+                  aria-label={t("edit")}
+                  size="md"
+                  variant="light"
+                  onClick={handleEdit}
+                  disabled={isUpdating}
+                >
                   <IconEdit size={16} />
                 </ActionIcon>
               </Tooltip>
diff --git a/packages/widgets/src/beszel-system-stats/component.module.css b/packages/widgets/src/beszel-system-stats/component.module.css
index 9d8b2087b..9966f37be 100644
--- a/packages/widgets/src/beszel-system-stats/component.module.css
+++ b/packages/widgets/src/beszel-system-stats/component.module.css
@@ -14,7 +14,7 @@
   pointer-events: auto;
 }
 
-@media (hover: none) {
+@media (any-pointer: coarse) {
   .beszelStatsSystemToggle {
     opacity: 1;
     pointer-events: auto;
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index c4cee758a..614916993 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { useParams } from "next/navigation";
-import { ActionIcon, Box, Group, Stack, Text, Tooltip, useMantineTheme } from "@mantine/core";
+import { ActionIcon, Box, Center, Group, Loader, Stack, Text, Tooltip, useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
 import { useElementSize } from "@mantine/hooks";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
@@ -15,6 +15,7 @@ import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import actionTargetClasses from "../common/action-target.module.css";
 import type { WidgetComponentProps } from "../definition";
 import { setWidgetRuntimeQueries } from "../definition";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
@@ -34,7 +35,16 @@ export default function CalendarWidget(props: WidgetComponentProps<"calendar">)
 
   if (props.integrationIds.length === 0) {
     setWidgetRuntimeQueries(props.widgetStateRef, []);
-    return <CalendarBase {...props} events={[]} failedIntegrations={[]} month={month} setMonth={setMonth} />;
+    return (
+      <CalendarBase
+        {...props}
+        events={[]}
+        failedIntegrations={[]}
+        isPending={false}
+        month={month}
+        setMonth={setMonth}
+      />
+    );
   }
 
   return <FetchCalendar month={month} setMonth={setMonth} {...props} />;
@@ -62,7 +72,7 @@ const FetchCalendar = ({
     showUnmonitored: options.showUnmonitored,
   };
   setWidgetRuntimeQueries(widgetStateRef, [getQueryKey(clientApi.widget.calendar.findAllEvents, input, "query")]);
-  const { data } = clientApi.widget.calendar.findAllEvents.useQuery(input);
+  const { data, isPending } = clientApi.widget.calendar.findAllEvents.useQuery(input);
 
   const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
   const failedIntegrations =
@@ -75,6 +85,7 @@ const FetchCalendar = ({
       isEditMode={isEditMode}
       events={events}
       failedIntegrations={failedIntegrations}
+      isPending={isPending}
       month={month}
       setMonth={setMonth}
       options={options}
@@ -87,6 +98,7 @@ interface CalendarBaseProps {
   isEditMode: boolean;
   events: CalendarEvent[];
   failedIntegrations: { integrationId: string; integrationName: string; error: string }[];
+  isPending: boolean;
   month: Date;
   setMonth: (date: Date) => void;
   options: WidgetComponentProps<"calendar">["options"];
@@ -97,6 +109,7 @@ const CalendarBase = ({
   isEditMode,
   events,
   failedIntegrations,
+  isPending,
   month,
   setMonth,
   options,
@@ -133,6 +146,7 @@ const CalendarBase = ({
       <CalendarAgenda
         events={agendaEvents}
         failedIntegrations={failedIntegrations}
+        isPending={isPending}
         isEditMode={isEditMode}
         locale={locale}
         month={month}
@@ -227,13 +241,22 @@ const CalendarBase = ({
 interface CalendarAgendaProps {
   events: CalendarEvent[];
   failedIntegrations: CalendarBaseProps["failedIntegrations"];
+  isPending: boolean;
   isEditMode: boolean;
   locale: string;
   month: Date;
   setMonth: (date: Date) => void;
 }
 
-const CalendarAgenda = ({ events, failedIntegrations, isEditMode, locale, month, setMonth }: CalendarAgendaProps) => {
+const CalendarAgenda = ({
+  events,
+  failedIntegrations,
+  isPending,
+  isEditMode,
+  locale,
+  month,
+  setMonth,
+}: CalendarAgendaProps) => {
   const t = useScopedI18n("widget.calendar.advanced");
   const monthLabel = new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(month);
 
@@ -243,6 +266,7 @@ const CalendarAgenda = ({ events, failedIntegrations, isEditMode, locale, month,
         <Group gap="xs" wrap="nowrap">
           <Tooltip label={t("previousMonth")} events={{ hover: true, focus: true, touch: false }}>
             <ActionIcon
+              className={actionTargetClasses.root}
               variant="subtle"
               size="lg"
               aria-label={t("previousMonth")}
@@ -257,11 +281,12 @@ const CalendarAgenda = ({ events, failedIntegrations, isEditMode, locale, month,
               {monthLabel}
             </Text>
             <Text size="xs" c="dimmed">
-              {t("eventCount", { count: events.length })}
+              {isPending ? t("loading") : t("eventCount", { count: events.length })}
             </Text>
           </Stack>
           <Tooltip label={t("nextMonth")} events={{ hover: true, focus: true, touch: false }}>
             <ActionIcon
+              className={actionTargetClasses.root}
               variant="subtle"
               size="lg"
               aria-label={t("nextMonth")}
@@ -276,7 +301,11 @@ const CalendarAgenda = ({ events, failedIntegrations, isEditMode, locale, month,
       </Group>
 
       <Box style={{ flex: 1, minHeight: 0 }}>
-        {events.length > 0 ? (
+        {isPending ? (
+          <Center component="output" h="100%" aria-label={t("loading")}>
+            <Loader size="sm" />
+          </Center>
+        ) : events.length > 0 ? (
           <CalendarEventList events={events} groupByDate locale={locale} fillHeight />
         ) : (
           <Stack h="100%" align="center" justify="center" p="md">
diff --git a/packages/widgets/src/common/action-target.module.css b/packages/widgets/src/common/action-target.module.css
new file mode 100644
index 000000000..28f6cc672
--- /dev/null
+++ b/packages/widgets/src/common/action-target.module.css
@@ -0,0 +1,11 @@
+.root {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+@media (any-pointer: coarse) {
+  .root {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
diff --git a/packages/widgets/src/coolify/resource-row.tsx b/packages/widgets/src/coolify/resource-row.tsx
index 4aaa4b625..fba5279ca 100644
--- a/packages/widgets/src/coolify/resource-row.tsx
+++ b/packages/widgets/src/coolify/resource-row.tsx
@@ -3,6 +3,7 @@
 import { ActionIcon, Anchor, Group, Indicator, Stack, Text } from "@mantine/core";
 import { IconFileText, IconLink } from "@tabler/icons-react";
 
+import actionTargetClasses from "../common/action-target.module.css";
 import { cleanFqdn, getResourceTimestamp, getStatusColor, parseStatus } from "./coolify-utils";
 
 interface ResourceRowProps {
@@ -58,6 +59,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
       <Group wrap="nowrap" gap={4} ml={16}>
         {cleanFqdn(item.fqdn) && (
           <ActionIcon
+            className={actionTargetClasses.root}
             component="a"
             href={cleanFqdn(item.fqdn)}
             target="_blank"
@@ -72,6 +74,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
         )}
         {!isTiny && logsUrl && (
           <ActionIcon
+            className={actionTargetClasses.root}
             component="a"
             href={logsUrl}
             target="_blank"
diff --git a/packages/widgets/src/coolify/servers-section.tsx b/packages/widgets/src/coolify/servers-section.tsx
index 55f2ad5c1..6a5da6ef4 100644
--- a/packages/widgets/src/coolify/servers-section.tsx
+++ b/packages/widgets/src/coolify/servers-section.tsx
@@ -6,6 +6,7 @@ import { IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import actionTargetClasses from "../common/action-target.module.css";
 import { getBadgeColor } from "./coolify-utils";
 
 interface ServersSectionProps {
@@ -40,6 +41,7 @@ export function ServersSection({
             </Badge>
           </Group>
           <ActionIcon
+            className={actionTargetClasses.root}
             aria-label={`${showIp ? tCommon("action.hide") : tCommon("action.show")} IP`}
             size="xs"
             variant="subtle"
diff --git a/packages/widgets/src/custom-api/component.tsx b/packages/widgets/src/custom-api/component.tsx
index 27b35ddbd..2916a0484 100644
--- a/packages/widgets/src/custom-api/component.tsx
+++ b/packages/widgets/src/custom-api/component.tsx
@@ -32,6 +32,7 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
 
 const CustomJsxDisplay = dynamic(() => import("./custom-jsx-display"), { ssr: false });
 
@@ -343,14 +344,21 @@ function openJsonInBrowser(json: unknown) {
 }
 
 function RawDisplay({ data, displayMode, height }: CustomDisplayProps) {
+  const t = useScopedI18n("widget.customApi");
   const maxHeight = displayMode === "advanced" ? Math.max(160, height - 80) : ((data.maxHeight as number) ?? 300);
   const jsonString = JSON.stringify(data.data, null, 2);
 
   return (
     <Stack gap={4} p="xs" h="100%">
       <Group justify="flex-end">
-        <Tooltip label="Open in browser JSON viewer">
-          <ActionIcon variant="subtle" size="sm" onClick={() => openJsonInBrowser(data.data)}>
+        <Tooltip label={t("actions.openJsonViewer")}>
+          <ActionIcon
+            className={actionTargetClasses.root}
+            variant="subtle"
+            size="sm"
+            aria-label={t("actions.openJsonViewer")}
+            onClick={() => openJsonInBrowser(data.data)}
+          >
             <IconExternalLink size={14} />
           </ActionIcon>
         </Tooltip>
@@ -595,6 +603,7 @@ function CustomApiWidgetInner({
           {dataType !== "actionButton" && (
             <Tooltip label={pollingLabel}>
               <ActionIcon
+                className={actionTargetClasses.root}
                 aria-label={pollingLabel}
                 variant="subtle"
                 loading={isFetching}
diff --git a/packages/widgets/src/dns-hole/controls/component.tsx b/packages/widgets/src/dns-hole/controls/component.tsx
index 952cd7e04..00cca22e5 100644
--- a/packages/widgets/src/dns-hole/controls/component.tsx
+++ b/packages/widgets/src/dns-hole/controls/component.tsx
@@ -33,6 +33,7 @@ import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { widgetKind } from ".";
 import type { WidgetComponentProps } from "../../definition";
+import actionTargetClasses from "../../common/action-target.module.css";
 import classes from "./component.module.css";
 import TimerModal from "./TimerModal";
 
@@ -353,6 +354,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                 <Group gap="xs" grow wrap="nowrap" w="100%">
                   {!isEnabled ? (
                     <ActionIcon
+                      className={actionTargetClasses.root}
                       aria-label={`${t("widget.dnsHoleControls.controls.enableAll")}: ${data.integration.name}`}
                       onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
@@ -364,6 +366,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     </ActionIcon>
                   ) : (
                     <ActionIcon
+                      className={actionTargetClasses.root}
                       aria-label={`${t("widget.dnsHoleControls.controls.disableAll")}: ${data.integration.name}`}
                       onClick={() => void toggleDns(data.integration.id).catch(() => undefined)}
                       disabled={!controlEnabled}
@@ -375,6 +378,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                     </ActionIcon>
                   )}
                   <ActionIcon
+                    className={actionTargetClasses.root}
                     aria-label={`${t("widget.dnsHoleControls.controls.setTimer")}: ${data.integration.name}`}
                     onClick={() => {
                       setSelectedIntegrationIds([data.integration.id]);
@@ -440,7 +444,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
           {layout === "md" && (
             <ActionIcon
               aria-label={`${t("widget.dnsHoleControls.controls.setTimer")}: ${data.integration.name}`}
-              className="dns-hole-controls-item-timer-button"
+              className={combineClasses("dns-hole-controls-item-timer-button", actionTargetClasses.root)}
               display={isInteractPermitted ? undefined : "none"}
               disabled={!controlEnabled || !isEnabled}
               color="yellow"
diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index 0f9b4c08d..1e09cdd75 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -43,6 +43,7 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
 import { HomarrDataTable } from "../common/homarr-data-table";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
 import { getDockerColumnVisibility, getDockerFooterVisibility } from "./layout";
@@ -409,6 +410,7 @@ export default function DockerWidget({
             )}
             <Tooltip label={t("table.refresh.lastUpdated", { when: relativeTime })}>
               <ActionIcon
+                className={actionTargetClasses.root}
                 size="sm"
                 variant="transparent"
                 c="var(--mantine-color-text)"
@@ -443,6 +445,7 @@ function ContainerMenuButton({
     <Menu opened={opened} onChange={setOpened} closeOnItemClick={false} withinPortal position="bottom-end" shadow="sm">
       <Menu.Target>
         <ActionIcon
+          className={actionTargetClasses.root}
           variant="subtle"
           color="gray"
           size="sm"
diff --git a/packages/widgets/src/health-monitoring/system-health.module.css b/packages/widgets/src/health-monitoring/system-health.module.css
index b7b3a70d2..71b6ae8f7 100644
--- a/packages/widgets/src/health-monitoring/system-health.module.css
+++ b/packages/widgets/src/health-monitoring/system-health.module.css
@@ -25,7 +25,7 @@
   pointer-events: auto;
 }
 
-@media (hover: none) {
+@media (any-pointer: coarse) {
   .infoActionCompact {
     opacity: 1;
     pointer-events: auto;
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 0c9665094..81989a1a5 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -42,6 +42,7 @@ import { useI18n } from "@homarr/translation/client";
 import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
 import { CpuRing } from "./rings/cpu-ring";
 import { CpuTempRing } from "./rings/cpu-temp-ring";
 import { GpuRing } from "./rings/gpu-ring";
@@ -118,7 +119,7 @@ export const SystemHealthMonitoring = ({
                   disabled={!healthInfo.rebootRequired && healthInfo.availablePkgUpdates === 0}
                 >
                   <ActionIcon
-                    className="health-monitoring-information-icon-avatar"
+                    className={combineClasses("health-monitoring-information-icon-avatar", actionTargetClasses.root)}
                     variant={"light"}
                     color="var(--mantine-color-text)"
                     size="sm"
diff --git a/packages/widgets/src/indexer-manager/component.module.css b/packages/widgets/src/indexer-manager/component.module.css
index 700a080b9..b6473e5a1 100644
--- a/packages/widgets/src/indexer-manager/component.module.css
+++ b/packages/widgets/src/indexer-manager/component.module.css
@@ -35,7 +35,7 @@
   }
 }
 
-@media (hover: none) {
+@media (any-pointer: coarse) {
   .testAction {
     opacity: 1;
   }
diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx
index 3d8b6138d..a47abc3dc 100644
--- a/packages/widgets/src/indexer-manager/component.tsx
+++ b/packages/widgets/src/indexer-manager/component.tsx
@@ -10,6 +10,7 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
 import classes from "./component.module.css";
 
 export default function IndexerManagerWidget({
@@ -83,7 +84,7 @@ export default function IndexerManagerWidget({
         )}
         <Tooltip label={t("widget.indexerManager.testAll")}>
           <ActionIcon
-            className={combineClasses("indexer-manager-test-action-icon", classes.testAction)}
+            className={combineClasses("indexer-manager-test-action-icon", classes.testAction, actionTargetClasses.root)}
             size="sm"
             radius={board.itemRadius}
             variant="light"
diff --git a/packages/widgets/src/media-requests/list/component.module.css b/packages/widgets/src/media-requests/list/component.module.css
index 6dc16de32..ee7dfd344 100644
--- a/packages/widgets/src/media-requests/list/component.module.css
+++ b/packages/widgets/src/media-requests/list/component.module.css
@@ -24,19 +24,12 @@
   opacity: 1;
 }
 
-@media (hover: none) {
+@media (any-pointer: coarse) {
   .pendingActions {
     opacity: 1;
   }
 }
 
-@media (pointer: coarse) {
-  .pendingActions button {
-    min-width: 36px;
-    min-height: 36px;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .card,
   .pendingActions {
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index 79d0184eb..9e2f6537f 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -14,6 +14,7 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import actionTargetClasses from "../../common/action-target.module.css";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
@@ -83,7 +84,7 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
   return (
     <Tooltip label={t("action.search.label")}>
       <ActionIcon
-        className={searchClasses.searchButton}
+        className={`${searchClasses.searchButton} ${actionTargetClasses.root}`}
         variant="light"
         size="sm"
         aria-label={t("action.search.label")}
@@ -255,7 +256,7 @@ const DecisionButtons = ({ requestId, integrationId, canInteract, alwaysVisible
     >
       <Tooltip label={t("pending.approve")}>
         <ActionIcon
-          className="mediaRequests-list-item-pending-button-approve"
+          className={`mediaRequests-list-item-pending-button-approve ${actionTargetClasses.root}`}
           variant="light"
           color="green"
           size="sm"
@@ -270,7 +271,7 @@ const DecisionButtons = ({ requestId, integrationId, canInteract, alwaysVisible
       </Tooltip>
       <Tooltip label={t("pending.decline")}>
         <ActionIcon
-          className="mediaRequests-list-item-pending-button-decline"
+          className={`mediaRequests-list-item-pending-button-decline ${actionTargetClasses.root}`}
           variant="light"
           color="red"
           size="sm"
diff --git a/packages/widgets/src/media-requests/search-button.module.css b/packages/widgets/src/media-requests/search-button.module.css
index b131da24d..693b88644 100644
--- a/packages/widgets/src/media-requests/search-button.module.css
+++ b/packages/widgets/src/media-requests/search-button.module.css
@@ -17,7 +17,11 @@
   opacity: 1;
 }
 
-@media (hover: none) {
+@media (any-pointer: coarse) {
+  .searchRoot {
+    padding-top: 52px;
+  }
+
   .searchButton {
     opacity: 1;
   }
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
index be1a69e54..c287c32d1 100644
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -22,6 +22,7 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import actionTargetClasses from "../../common/action-target.module.css";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
 import { NoIntegrationDataError } from "../../errors/no-data-integration";
@@ -220,7 +221,7 @@ const MediaRequestSearchButton = ({ integrationIds }: { integrationIds: string[]
   return (
     <Tooltip label={t("action.search.label")}>
       <ActionIcon
-        className={searchClasses.searchButton}
+        className={`${searchClasses.searchButton} ${actionTargetClasses.root}`}
         variant="light"
         size="sm"
         aria-label={t("action.search.label")}
diff --git a/packages/widgets/src/media-transcoding/health-check-status.tsx b/packages/widgets/src/media-transcoding/health-check-status.tsx
index 9f10ddf27..17c575899 100644
--- a/packages/widgets/src/media-transcoding/health-check-status.tsx
+++ b/packages/widgets/src/media-transcoding/health-check-status.tsx
@@ -6,6 +6,8 @@ import { IconHeartbeat } from "@tabler/icons-react";
 import type { TdarrStatistics } from "@homarr/integrations";
 import { useI18n } from "@homarr/translation/client";
 
+import actionTargetClasses from "../common/action-target.module.css";
+
 interface HealthCheckStatusProps {
   statistics: TdarrStatistics;
 }
@@ -23,7 +25,7 @@ export function HealthCheckStatus(props: HealthCheckStatusProps) {
   return (
     <Popover position="bottom" width={250} shadow="sm" withArrow>
       <Popover.Target>
-        <ActionIcon variant="subtle" size="sm" aria-label={t("title")}>
+        <ActionIcon className={actionTargetClasses.root} variant="subtle" size="sm" aria-label={t("title")}>
           <Indicator color={textColor(indicatorColor, colorScheme)} size={6} display="flex">
             <IconHeartbeat size={16} />
           </Indicator>
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 53a334189..cede6ffe4 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -68,6 +68,7 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import actionTargetClasses from "../common/action-target.module.css";
 import { createReadOnlyTaskItemTransaction, ReadOnlyTaskItem } from "./read-only-task-item";
 import { NotebookTextDirection, setTextDirection } from "./text-direction";
 
@@ -526,18 +527,12 @@ export function Notebook({
         </Group>
       )}
       {canChange && (
-        <>
+        <Stack pos="absolute" top={7} right={7} gap={7} style={{ zIndex: 1 }}>
           <ActionIcon
-            className="homarr-notebook-action"
+            className={`homarr-notebook-action ${actionTargetClasses.root}`}
             data-visible={isEditing || displayMode === "advanced" || undefined}
             title={isEditing ? t("common.action.save") : t("common.action.edit")}
             aria-label={isEditing ? t("common.action.save") : t("common.action.edit")}
-            style={{
-              zIndex: 1,
-            }}
-            top={7}
-            right={7}
-            pos="absolute"
             color={primaryColor}
             variant="light"
             size={30}
@@ -549,16 +544,10 @@ export function Notebook({
           </ActionIcon>
           {isEditing && (
             <ActionIcon
-              className="homarr-notebook-action"
+              className={`homarr-notebook-action ${actionTargetClasses.root}`}
               data-visible
               title={t("common.action.cancel")}
               aria-label={t("common.action.cancel")}
-              style={{
-                zIndex: 1,
-              }}
-              top={44}
-              right={7}
-              pos="absolute"
               color={primaryColor}
               variant="light"
               size={30}
@@ -568,7 +557,7 @@ export function Notebook({
               <IconX {...iconProps} />
             </ActionIcon>
           )}
-        </>
+        </Stack>
       )}
     </Box>
   );
@@ -746,13 +735,31 @@ const ColorControl = ({ defaultColor, getCurrent, update, icon: Icon, ariaLabel
         <Stack gap={8}>
           <ColorPicker value={color} onChange={setColor} format="hexa" swatches={palette} swatchesPerRow={6} />
           <Group justify="right" gap={8}>
-            <ActionIcon title={t("common.action.cancel")} variant="default" onClick={close}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              title={t("common.action.cancel")}
+              aria-label={t("common.action.cancel")}
+              variant="default"
+              onClick={close}
+            >
               <IconX stroke={1.5} size="1rem" />
             </ActionIcon>
-            <ActionIcon title={t("common.action.apply")} variant="default" onClick={handleApplyColor}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              title={t("common.action.apply")}
+              aria-label={t("common.action.apply")}
+              variant="default"
+              onClick={handleApplyColor}
+            >
               <IconCheck stroke={1.5} size="1rem" />
             </ActionIcon>
-            <ActionIcon title={t("widget.notebook.popover.clearColor")} variant="default" onClick={handleClearColor}>
+            <ActionIcon
+              className={actionTargetClasses.root}
+              title={t("widget.notebook.popover.clearColor")}
+              aria-label={t("widget.notebook.popover.clearColor")}
+              variant="default"
+              onClick={handleClearColor}
+            >
               <IconCircleOff stroke={1.5} size="1rem" />
             </ActionIcon>
           </Group>
diff --git a/packages/widgets/src/releases/component.tsx b/packages/widgets/src/releases/component.tsx
index 2c7470875..3481f6172 100644
--- a/packages/widgets/src/releases/component.tsx
+++ b/packages/widgets/src/releases/component.tsx
@@ -221,6 +221,10 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
                 })}
                 onClick={() => toggleExpandedDisplay(repository)}
                 aria-expanded={isActive}
+                aria-label={t(isActive ? "collapseDetails" : "expandDetails", {
+                  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                  name: repository.name || repository.identifier,
+                })}
               >
                 <Group p="xs">
                   <MaskedOrNormalImage
@@ -321,7 +325,11 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
                 </Group>
               </UnstyledButton>
               {(options.showDetails || isAdvanced) && (
-                <DetailsDisplay repository={repository} toggleExpandedDisplay={toggleExpandedDisplay} />
+                <DetailsDisplay
+                  repository={repository}
+                  isExpanded={isActive}
+                  toggleExpandedDisplay={toggleExpandedDisplay}
+                />
               )}
               {isActive && (
                 <ExpandedDisplay
@@ -342,10 +350,11 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
 
 interface DetailsDisplayProps {
   repository: ReleasesRepositoryResponse;
+  isExpanded: boolean;
   toggleExpandedDisplay: (repository: ReleasesRepositoryResponse) => void;
 }
 
-const DetailsDisplay = ({ repository, toggleExpandedDisplay }: DetailsDisplayProps) => {
+const DetailsDisplay = ({ repository, isExpanded, toggleExpandedDisplay }: DetailsDisplayProps) => {
   const t = useScopedI18n("widget.releases");
   const formatter = useFormatter();
 
@@ -355,6 +364,11 @@ const DetailsDisplay = ({ repository, toggleExpandedDisplay }: DetailsDisplayPro
       <UnstyledButton
         className={combineClasses("releases-repository-details", classes.releasesRepositoryDetails)}
         onClick={() => toggleExpandedDisplay(repository)}
+        aria-expanded={isExpanded}
+        aria-label={t(isExpanded ? "collapseDetails" : "expandDetails", {
+          // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+          name: repository.name || repository.identifier,
+        })}
       >
         <Group justify="space-between" p={5}>
           <Group className="releases-repository-details-icon-wrapper">
diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx
index 4fee07497..d83f409d0 100644
--- a/packages/widgets/src/stocks/component.tsx
+++ b/packages/widgets/src/stocks/component.tsx
@@ -2,7 +2,7 @@
 
 import { Sparkline } from "@mantine/charts";
 import { Flex, Stack, Text, Title, useMantineTheme } from "@mantine/core";
-import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
+import { IconMinus, IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -105,8 +105,10 @@ export default function StockPriceWidget({ options, width, height, displayMode }
         <Text size="xl" fw={700} lh="0.715">
           {stockValuesChange > 0 ? (
             <IconTrendingUp size="1.5rem" color={theme.colors.green[7]} />
-          ) : (
+          ) : stockValuesChange < 0 ? (
             <IconTrendingDown size="1.5rem" color={theme.colors.red[7]} />
+          ) : (
+            <IconMinus size="1.5rem" color={theme.colors.gray[6]} />
           )}
           {data.symbol}
         </Text>
diff --git a/packages/widgets/src/weather/component.module.css b/packages/widgets/src/weather/component.module.css
new file mode 100644
index 000000000..4b7b623be
--- /dev/null
+++ b/packages/widgets/src/weather/component.module.css
@@ -0,0 +1,31 @@
+.detailsButton,
+.forecastButton {
+  color: inherit;
+  border-radius: var(--mantine-radius-sm);
+}
+
+.detailsButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.forecastButton {
+  display: block;
+}
+
+.detailsButton:focus-visible,
+.forecastButton:focus-visible {
+  outline: 2px solid var(--mantine-primary-color-filled);
+  outline-offset: 2px;
+}
+
+@media (any-pointer: coarse) {
+  .detailsButton,
+  .forecastButton {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index 59f16347e..249c09f3c 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useId } from "react";
-import { Box, Group, HoverCard, Stack, Table, Text } from "@mantine/core";
+import { Group, Popover, Stack, Table, Text, UnstyledButton } from "@mantine/core";
 import {
   IconArrowDownRight,
   IconArrowUpRight,
@@ -23,6 +23,7 @@ import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "./animated-icon";
 import { WeatherDescription } from "./icon";
+import classes from "./component.module.css";
 
 export default function WeatherWidget({
   isEditMode,
@@ -56,10 +57,11 @@ export default function WeatherWidget({
         <WeeklyForecast
           weather={weather}
           options={options}
+          isEditMode={isEditMode}
           maxDays={getVisibleForecastDays(options.forecastDayCount, width, height)}
         />
       ) : (
-        <DailyWeather weather={weather} options={options} />
+        <DailyWeather weather={weather} options={options} isEditMode={isEditMode} />
       )}
     </Stack>
   );
@@ -69,6 +71,10 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
+interface CompactWeatherProps extends WeatherProps {
+  isEditMode: boolean;
+}
+
 const AdvancedWeather = ({ options, weather }: WeatherProps) => {
   const forecastHeadingId = useId();
   const t = useScopedI18n("widget.weather");
@@ -234,23 +240,23 @@ const AdvancedWeather = ({ options, weather }: WeatherProps) => {
   );
 };
 
-const DailyWeather = ({ options, weather }: WeatherProps) => {
+const DailyWeather = ({ options, weather, isEditMode }: CompactWeatherProps) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
 
   return (
     <>
       <Group className="weather-day-group" gap="sm">
-        <HoverCard>
-          <HoverCard.Target>
-            <Box>
+        <Popover position="bottom" withArrow shadow="md">
+          <Popover.Target>
+            <UnstyledButton className={classes.detailsButton} aria-label={t("details")} disabled={isEditMode}>
               <AnimatedWeatherIcon size={30} code={weather.current.weathercode} />
-            </Box>
-          </HoverCard.Target>
-          <HoverCard.Dropdown>
+            </UnstyledButton>
+          </Popover.Target>
+          <Popover.Dropdown>
             <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
-          </HoverCard.Dropdown>
-        </HoverCard>
+          </Popover.Dropdown>
+        </Popover>
         <Text fz={30}>
           {getPreferredUnit(
             weather.current.temperature,
@@ -319,7 +325,9 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
   );
 };
 
-const WeeklyForecast = ({ options, weather, maxDays }: WeatherProps & { maxDays: number }) => {
+const WeeklyForecast = ({ options, weather, isEditMode, maxDays }: CompactWeatherProps & { maxDays: number }) => {
+  const t = useScopedI18n("widget.weather");
+
   return (
     <>
       <Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="md">
@@ -332,16 +340,16 @@ const WeeklyForecast = ({ options, weather, maxDays }: WeatherProps & { maxDays:
           </Group>
         )}
         <Group gap="xs" wrap="nowrap">
-          <HoverCard>
-            <HoverCard.Target>
-              <Box>
+          <Popover position="bottom" withArrow shadow="md">
+            <Popover.Target>
+              <UnstyledButton className={classes.detailsButton} aria-label={t("details")} disabled={isEditMode}>
                 <AnimatedWeatherIcon size={16} code={weather.current.weathercode} />
-              </Box>
-            </HoverCard.Target>
-            <HoverCard.Dropdown>
+              </UnstyledButton>
+            </Popover.Target>
+            <Popover.Dropdown>
               <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
-            </HoverCard.Dropdown>
-          </HoverCard>
+            </Popover.Dropdown>
+          </Popover>
           <Text fz={16}>
             {getPreferredUnit(
               weather.current.temperature,
@@ -351,35 +359,45 @@ const WeeklyForecast = ({ options, weather, maxDays }: WeatherProps & { maxDays:
           </Text>
         </Group>
       </Group>
-      <Forecast weather={weather} options={options} maxDays={maxDays} />
+      <Forecast weather={weather} options={options} isEditMode={isEditMode} maxDays={maxDays} />
     </>
   );
 };
 
-function Forecast({ weather, options, maxDays }: WeatherProps & { maxDays: number }) {
+function Forecast({ weather, options, isEditMode, maxDays }: CompactWeatherProps & { maxDays: number }) {
   const dateFormat = options.dateFormat;
+  const t = useScopedI18n("widget.weather");
   return (
     <Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="sm">
       {weather.daily.slice(0, maxDays).map((dayWeather, index) => (
-        <HoverCard key={dayWeather.time} withArrow shadow="md">
-          <HoverCard.Target>
-            <Stack
-              className={combineClasses(
-                "weather-forecast-day-stack",
-                `weather-forecast-day${index}`,
-                `weather-forecast-weekday${dayjs(dayWeather.time).day()}`,
-              )}
-              gap="0"
-              align="center"
+        <Popover key={dayWeather.time} position="bottom" withArrow shadow="md">
+          <Popover.Target>
+            <UnstyledButton
+              className={classes.forecastButton}
+              aria-label={t("detailsFor", { date: dayjs(dayWeather.time).format(dateFormat) })}
+              disabled={isEditMode}
             >
-              <Text fz="xl">{dayjs(dayWeather.time).format("dd")}</Text>
-              <AnimatedWeatherIcon size={16} code={dayWeather.weatherCode} />
-              <Text fz={16}>
-                {getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
-              </Text>
-            </Stack>
-          </HoverCard.Target>
-          <HoverCard.Dropdown>
+              <Stack
+                component="span"
+                className={combineClasses(
+                  "weather-forecast-day-stack",
+                  `weather-forecast-day${index}`,
+                  `weather-forecast-weekday${dayjs(dayWeather.time).day()}`,
+                )}
+                gap="0"
+                align="center"
+              >
+                <Text component="span" fz="xl">
+                  {dayjs(dayWeather.time).format("dd")}
+                </Text>
+                <AnimatedWeatherIcon size={16} code={dayWeather.weatherCode} />
+                <Text component="span" fz={16}>
+                  {getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
+                </Text>
+              </Stack>
+            </UnstyledButton>
+          </Popover.Target>
+          <Popover.Dropdown>
             <WeatherDescription
               useImperialSpeed={options.useImperialSpeed}
               dateFormat={dateFormat}
@@ -401,8 +419,8 @@ function Forecast({ weather, options, maxDays }: WeatherProps & { maxDays: numbe
               maxWindGusts={dayWeather.maxWindGusts}
               humidity={dayWeather.humidity}
             />
-          </HoverCard.Dropdown>
-        </HoverCard>
+          </Popover.Dropdown>
+        </Popover>
       ))}
     </Group>
   );

From d5c3aebd2665e5215103543a1c8992a9cb5771cc Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 16:10:16 +0200
Subject: [PATCH 15/75] fix: harden widget review follow-ups

---
 .../src/components/board/items/item-content.tsx |  5 +++--
 e2e/custom-widgets-custom-jsx.spec.ts           | 13 +++++++------
 packages/translation/src/lang/en.json           | 12 ++++++++++++
 packages/widgets/src/coolify/resource-row.tsx   |  7 +++++--
 .../widgets/src/coolify/servers-section.tsx     |  2 +-
 packages/widgets/src/custom-api/component.tsx   | 10 +++++-----
 .../network-status/component.tsx                | 17 ++++++++++++-----
 .../widgets/src/paperless-ngx/component.tsx     |  7 ++++++-
 packages/widgets/src/vpn/component.tsx          |  5 +++--
 packages/widgets/src/vpn/vpn-card.tsx           | 12 ++++++++++--
 10 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 969195d60..a572cdbad 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -157,8 +157,9 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
                       height: advancedRect.height,
                       "--focus-translate-x": `${activeFocus.sourceRect.left - advancedRect.left}px`,
                       "--focus-translate-y": `${activeFocus.sourceRect.top - advancedRect.top}px`,
-                      "--focus-scale-x": activeFocus.sourceRect.width / advancedRect.width,
-                      "--focus-scale-y": activeFocus.sourceRect.height / advancedRect.height,
+                      "--focus-scale-x": advancedRect.width > 0 ? activeFocus.sourceRect.width / advancedRect.width : 1,
+                      "--focus-scale-y":
+                        advancedRect.height > 0 ? activeFocus.sourceRect.height / advancedRect.height : 1,
                     } as CSSProperties)
                   : undefined
               }
diff --git a/e2e/custom-widgets-custom-jsx.spec.ts b/e2e/custom-widgets-custom-jsx.spec.ts
index cba6c0d75..c1f7743ba 100644
--- a/e2e/custom-widgets-custom-jsx.spec.ts
+++ b/e2e/custom-widgets-custom-jsx.spec.ts
@@ -40,16 +40,17 @@ describe("Custom JSX custom widgets", () => {
     const browser = await chromium.launch();
     const context = await browser.newContext();
     const page = await context.newPage();
+    const destination = "/manage/custom-widgets/new";
 
     try {
-      await page.goto(`${baseUrl}/auth/login`);
+      await page.goto(`${baseUrl}/auth/login?callbackUrl=${encodeURIComponent(destination)}`);
       await page.getByLabel("Username").fill(adminCredentials.username);
       await page.locator("#password").fill(adminCredentials.password);
-      await page.locator("css=button[type='submit']").click();
-      await page.waitForURL(baseUrl, { timeout: 15_000 });
-
-      await page.goto(`${baseUrl}/manage/custom-widgets/new`);
-      await page.waitForURL("**/manage/custom-widgets/new", { timeout: 15_000 });
+      await Promise.all([
+        page.waitForURL(`**${destination}`, { timeout: 30_000 }),
+        page.locator("css=button[type='submit']").click(),
+      ]);
+      await expect(page.getByRole("textbox", { name: "Name" })).toBeVisible({ timeout: 30_000 });
       await page.getByRole("textbox", { name: "Name" }).fill("E2E Custom JSX");
       await page.getByRole("textbox", { name: "URL", exact: true }).fill(`${mockApi.url}/status`);
       await page.getByRole("combobox", { name: "Display Type" }).click();
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 16f33874c..9151de77c 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2567,6 +2567,12 @@
           "label": "Show services"
         }
       },
+      "action": {
+        "openResource": "Open {name}",
+        "openLogs": "Open {name} logs",
+        "showIp": "Show IP address",
+        "hideIp": "Hide IP address"
+      },
       "empty": {
         "servers": "No servers found",
         "applications": "No applications found",
@@ -2590,6 +2596,12 @@
       "name": "VPN",
       "description": "Overview of your VPN connections",
       "serviceUnavailable": "VPN unavailable",
+      "status": {
+        "running": "Running",
+        "notRunning": "Not running",
+        "unavailable": "Unavailable",
+        "vpn": "VPN: {status}"
+      },
       "option": {}
     },
     "ups": {
diff --git a/packages/widgets/src/coolify/resource-row.tsx b/packages/widgets/src/coolify/resource-row.tsx
index fba5279ca..44ca137a1 100644
--- a/packages/widgets/src/coolify/resource-row.tsx
+++ b/packages/widgets/src/coolify/resource-row.tsx
@@ -3,6 +3,8 @@
 import { ActionIcon, Anchor, Group, Indicator, Stack, Text } from "@mantine/core";
 import { IconFileText, IconLink } from "@tabler/icons-react";
 
+import { useScopedI18n } from "@homarr/translation/client";
+
 import actionTargetClasses from "../common/action-target.module.css";
 import { cleanFqdn, getResourceTimestamp, getStatusColor, parseStatus } from "./coolify-utils";
 
@@ -25,6 +27,7 @@ interface ResourceRowProps {
 }
 
 export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRowProps) {
+  const t = useScopedI18n("widget.coolify");
   const status = parseStatus(item.status ?? "");
   const statusColor = getStatusColor(status);
 
@@ -64,7 +67,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             href={cleanFqdn(item.fqdn)}
             target="_blank"
             rel="noopener noreferrer"
-            aria-label={`Open ${item.name}`}
+            aria-label={t("action.openResource", { name: item.name })}
             size="xs"
             variant="subtle"
             c="dimmed"
@@ -79,7 +82,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             href={logsUrl}
             target="_blank"
             rel="noopener noreferrer"
-            aria-label={`Open ${item.name} logs`}
+            aria-label={t("action.openLogs", { name: item.name })}
             size="xs"
             variant="subtle"
             c="dimmed"
diff --git a/packages/widgets/src/coolify/servers-section.tsx b/packages/widgets/src/coolify/servers-section.tsx
index 6a5da6ef4..24f82852a 100644
--- a/packages/widgets/src/coolify/servers-section.tsx
+++ b/packages/widgets/src/coolify/servers-section.tsx
@@ -42,7 +42,7 @@ export function ServersSection({
           </Group>
           <ActionIcon
             className={actionTargetClasses.root}
-            aria-label={`${showIp ? tCommon("action.hide") : tCommon("action.show")} IP`}
+            aria-label={t(showIp ? "action.hideIp" : "action.showIp")}
             size="xs"
             variant="subtle"
             c="dimmed"
diff --git a/packages/widgets/src/custom-api/component.tsx b/packages/widgets/src/custom-api/component.tsx
index 2916a0484..d13bbd809 100644
--- a/packages/widgets/src/custom-api/component.tsx
+++ b/packages/widgets/src/custom-api/component.tsx
@@ -531,7 +531,10 @@ function CustomApiWidgetInner({
   const widgetData = (data ?? {}) as Record<string, unknown>;
   const dataType = widgetData.type as string | undefined;
   const canTogglePolling = Boolean(data) && dataType !== "actionButton" && dataType !== "disabled";
-  const togglePolling = useCallback(() => setPollingPaused((value) => !value), []);
+  const togglePolling = useCallback(() => {
+    if (pollingPaused) void refetch();
+    setPollingPaused((value) => !value);
+  }, [pollingPaused, refetch]);
 
   useEffect(() => {
     if (!widgetStateRef) return;
@@ -607,10 +610,7 @@ function CustomApiWidgetInner({
                 aria-label={pollingLabel}
                 variant="subtle"
                 loading={isFetching}
-                onClick={() => {
-                  if (pollingPaused) void refetch();
-                  setPollingPaused((value) => !value);
-                }}
+                onClick={togglePolling}
               >
                 {pollingPaused ? <IconPlayerPlay size={16} /> : <IconPlayerPause size={16} />}
               </ActionIcon>
diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx
index d931df9fb..3f58108be 100644
--- a/packages/widgets/src/network-controller/network-status/component.tsx
+++ b/packages/widgets/src/network-controller/network-status/component.tsx
@@ -8,7 +8,7 @@ import objectSupport from "dayjs/plugin/objectSupport";
 import relativeTime from "dayjs/plugin/relativeTime";
 
 import { clientApi } from "@homarr/api/client";
-import { useI18n } from "@homarr/translation/client";
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 import { WifiVariant } from "./variants/wifi-variant";
@@ -25,12 +25,17 @@ export default function NetworkControllerNetworkStatusWidget({
   width,
   height,
 }: WidgetComponentProps<"networkControllerStatus">) {
-  const { data: summaries = [], isPending } = clientApi.widget.networkController.summary.useQuery({
+  const {
+    data: summaries,
+    error,
+    isPending,
+  } = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
-  const t = useI18n();
+  const t = useScopedI18n("widget.networkControllerStatus");
+  const tCommon = useScopedI18n("common");
 
-  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const data = useMemo(() => (summaries ?? []).flatMap(({ summary }) => summary), [summaries]);
   const isAdvanced = displayMode === "advanced";
   const countWifiGuests = data.reduce((sum, summary) => sum + summary.wifi.guests, 0);
   const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
@@ -38,11 +43,13 @@ export default function NetworkControllerNetworkStatusWidget({
   const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
   const useHorizontalStats = !isAdvanced && height < 150 && width >= 200;
 
+  if (error && summaries === undefined) throw error;
+
   if (isPending || data.length === 0) {
     return (
       <Center h="100%" p="sm">
         <Text c="dimmed" size="sm" ta="center">
-          {isPending ? t("common.action.loading") : t("widget.networkControllerStatus.error.integrationsDisconnected")}
+          {isPending ? tCommon("action.loading") : t("error.integrationsDisconnected")}
         </Text>
       </Center>
     );
diff --git a/packages/widgets/src/paperless-ngx/component.tsx b/packages/widgets/src/paperless-ngx/component.tsx
index e0d08e49e..ae22402d8 100644
--- a/packages/widgets/src/paperless-ngx/component.tsx
+++ b/packages/widgets/src/paperless-ngx/component.tsx
@@ -79,7 +79,11 @@ export default function PaperlessNgxWidget({
 }: WidgetComponentProps<"paperlessNgx">) {
   const t = useScopedI18n("widget.paperlessNgx");
   const tCommon = useScopedI18n("common");
-  const { data: stats, isPending } = clientApi.widget.paperlessNgx.getStats.useQuery({
+  const {
+    data: stats,
+    error,
+    isPending,
+  } = clientApi.widget.paperlessNgx.getStats.useQuery({
     integrationId: integrationIds[0] ?? "",
   });
 
@@ -92,6 +96,7 @@ export default function PaperlessNgxWidget({
       </Center>
     );
   }
+  if (error && stats === undefined) throw error;
   if (!stats) return <WidgetEmptyState />;
 
   const canShowInboxHero = options.showDocumentsInbox && options.showDocumentsTotal;
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index 295499d78..d9526923c 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -3,7 +3,7 @@
 import { Center, Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { VpnIntegrationCard } from "./vpn-card";
@@ -21,6 +21,7 @@ export default function VpnWidget({
   });
   const t = useScopedI18n("widget.vpn");
   const tCommon = useScopedI18n("common");
+  const locale = useCurrentLocale();
   const dense = displayMode === "compact" && (width < 240 || height < 120);
 
   if (isPending || integrations.length === 0) {
@@ -56,7 +57,7 @@ export default function VpnWidget({
               <VpnIntegrationCard vpn={result.summary} integrationName={result.integration.name} variant="list" />
               {!result.error && new Date(result.integration.updatedAt).getTime() > 0 && (
                 <Text size="xs" c="dimmed" ta="right">
-                  {new Date(result.integration.updatedAt).toLocaleString()}
+                  {new Date(result.integration.updatedAt).toLocaleString(locale)}
                 </Text>
               )}
             </Stack>
diff --git a/packages/widgets/src/vpn/vpn-card.tsx b/packages/widgets/src/vpn/vpn-card.tsx
index 8ddcfd7fd..aeaa36c0c 100644
--- a/packages/widgets/src/vpn/vpn-card.tsx
+++ b/packages/widgets/src/vpn/vpn-card.tsx
@@ -102,8 +102,12 @@ function VpnStatusColumn({
   compact: boolean;
   dense: boolean;
 }) {
+  const t = useScopedI18n("widget.vpn");
   // Connected shows a shield with a check; anything else (stopped or unavailable) shows a shield with a cross.
   const ShieldIcon = vpnStatus === RUNNING_STATUS ? IconShieldCheck : IconShieldX;
+  const statusLabel = t(
+    vpnStatus === RUNNING_STATUS ? "status.running" : vpnStatus ? "status.notRunning" : "status.unavailable",
+  );
 
   return (
     <Flex
@@ -114,7 +118,7 @@ function VpnStatusColumn({
       align="center"
     >
       <ShieldIcon
-        aria-label={vpnStatus || "unavailable"}
+        aria-label={t("status.vpn", { status: statusLabel })}
         stroke={2}
         color={getStatusColor(vpnStatus)}
         size={dense ? 32 : compact ? 44 : 52}
@@ -181,7 +185,11 @@ function VpnProviderDetails({ provider, protocol }: { provider: string; protocol
 }
 
 function DnsStatusBadge({ status }: { status: string }) {
+  const t = useScopedI18n("widget.vpn");
   const StatusIcon = status === RUNNING_STATUS ? IconCircleCheckFilled : IconCircleXFilled;
+  const statusLabel = t(
+    status === RUNNING_STATUS ? "status.running" : status ? "status.notRunning" : "status.unavailable",
+  );
   return (
     <Badge
       variant="outline"
@@ -191,7 +199,7 @@ function DnsStatusBadge({ status }: { status: string }) {
       leftSection={<StatusIcon aria-hidden size={9} />}
     >
       DNS
-      <VisuallyHidden> {status || "unavailable"}</VisuallyHidden>
+      <VisuallyHidden> {statusLabel}</VisuallyHidden>
     </Badge>
   );
 }

From 54e444d69d0c1f270883358aa8cc715df387099f Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 16:26:04 +0200
Subject: [PATCH 16/75] fix: close final widget review gaps

---
 e2e/custom-widgets-custom-jsx.spec.ts         |  4 +-
 packages/translation/src/lang/en.json         | 13 ++++-
 .../widgets/src/coolify/coolify-utils.spec.ts | 29 +++++++++++
 packages/widgets/src/coolify/coolify-utils.ts | 29 +++--------
 packages/widgets/src/coolify/resource-row.tsx | 52 +++++++++++++++----
 .../widgets/src/coolify/servers-section.tsx   | 52 +++++++++++--------
 6 files changed, 123 insertions(+), 56 deletions(-)
 create mode 100644 packages/widgets/src/coolify/coolify-utils.spec.ts

diff --git a/e2e/custom-widgets-custom-jsx.spec.ts b/e2e/custom-widgets-custom-jsx.spec.ts
index c1f7743ba..51013aea9 100644
--- a/e2e/custom-widgets-custom-jsx.spec.ts
+++ b/e2e/custom-widgets-custom-jsx.spec.ts
@@ -43,7 +43,9 @@ describe("Custom JSX custom widgets", () => {
     const destination = "/manage/custom-widgets/new";
 
     try {
-      await page.goto(`${baseUrl}/auth/login?callbackUrl=${encodeURIComponent(destination)}`);
+      await page.goto(`${baseUrl}/auth/login?callbackUrl=${encodeURIComponent(destination)}`, {
+        waitUntil: "networkidle",
+      });
       await page.getByLabel("Username").fill(adminCredentials.username);
       await page.locator("#password").fill(adminCredentials.password);
       await Promise.all([
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 9151de77c..6012f83fb 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2573,6 +2573,16 @@
         "showIp": "Show IP address",
         "hideIp": "Hide IP address"
       },
+      "status": {
+        "running": "Running",
+        "stopped": "Stopped",
+        "exited": "Exited",
+        "starting": "Starting",
+        "restarting": "Restarting",
+        "unknown": "Unknown",
+        "online": "Online",
+        "offline": "Offline"
+      },
       "empty": {
         "servers": "No servers found",
         "applications": "No applications found",
@@ -2586,7 +2596,8 @@
         "internalServerError": "Failed to fetch Coolify data"
       },
       "server": {
-        "buildServer": "Build"
+        "buildServer": "Build",
+        "resourceCounts": "{applications, plural, one {# app} other {# apps}} / {services, plural, one {# service} other {# services}}"
       },
       "instances": {
         "title": "Instances"
diff --git a/packages/widgets/src/coolify/coolify-utils.spec.ts b/packages/widgets/src/coolify/coolify-utils.spec.ts
new file mode 100644
index 000000000..0b9345861
--- /dev/null
+++ b/packages/widgets/src/coolify/coolify-utils.spec.ts
@@ -0,0 +1,29 @@
+import dayjs from "dayjs";
+import frenchLocale from "dayjs/locale/fr";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { formatRelativeTime, getResourceTimestamp } from "./coolify-utils";
+
+describe("Coolify time formatting", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-08-02T12:00:00Z"));
+    dayjs.locale(frenchLocale);
+  });
+
+  afterEach(() => {
+    dayjs.locale("en");
+    vi.useRealTimers();
+  });
+
+  it("uses the active Day.js locale for past and future timestamps", () => {
+    expect(formatRelativeTime("2026-08-02T11:00:00Z")).toBe("il y a une heure");
+    expect(formatRelativeTime("2026-08-02T13:00:00Z")).toBe("dans une heure");
+  });
+
+  it("omits missing, invalid, and currently running timestamps", () => {
+    expect(formatRelativeTime(undefined)).toBeUndefined();
+    expect(formatRelativeTime("invalid")).toBeUndefined();
+    expect(getResourceTimestamp({ status: "running", updated_at: "2026-08-02T11:00:00Z" }, "service")).toBeUndefined();
+  });
+});
diff --git a/packages/widgets/src/coolify/coolify-utils.ts b/packages/widgets/src/coolify/coolify-utils.ts
index 7bf4f50cb..89343af93 100644
--- a/packages/widgets/src/coolify/coolify-utils.ts
+++ b/packages/widgets/src/coolify/coolify-utils.ts
@@ -1,9 +1,14 @@
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
 import type {
   CoolifyApplicationWithContext,
   CoolifyServer,
   CoolifyServiceWithContext,
 } from "@homarr/integrations/types";
 
+dayjs.extend(relativeTime);
+
 export function parseStatus(status: string): string {
   const firstPart = status.split(":")[0]?.toLowerCase();
   if (!firstPart) return "unknown";
@@ -42,26 +47,8 @@ export function getBadgeColor(running: number, total: number): string {
 
 export function formatRelativeTime(dateString: string | null | undefined): string | undefined {
   if (!dateString) return undefined;
-  const date = new Date(dateString);
-  if (isNaN(date.getTime())) return undefined;
-
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffSec = Math.floor(diffMs / 1000);
-  const diffMin = Math.floor(diffSec / 60);
-  const diffHour = Math.floor(diffMin / 60);
-  const diffDay = Math.floor(diffHour / 24);
-
-  if (diffDay > 0) {
-    const remainingHours = diffHour % 24;
-    return remainingHours > 0 ? `${diffDay}d ${remainingHours}h ago` : `${diffDay}d ago`;
-  }
-  if (diffHour > 0) {
-    const remainingMin = diffMin % 60;
-    return remainingMin > 0 ? `${diffHour}h ${remainingMin}m ago` : `${diffHour}h ago`;
-  }
-  if (diffMin > 0) return `${diffMin}m ago`;
-  return "just now";
+  const date = dayjs(dateString);
+  return date.isValid() ? date.fromNow() : undefined;
 }
 
 export function getResourceTimestamp(
@@ -116,7 +103,7 @@ export function buildServerResourceCounts(
 }
 
 export function createWidgetKey(integrationIds: string[]): string {
-  return integrationIds.slice().sort().join("-");
+  return integrationIds.toSorted().join("-");
 }
 
 export function createStorageKey(widgetKey: string, integrationId: string, type: "sections" | "show-ip"): string {
diff --git a/packages/widgets/src/coolify/resource-row.tsx b/packages/widgets/src/coolify/resource-row.tsx
index 44ca137a1..b7a18f05e 100644
--- a/packages/widgets/src/coolify/resource-row.tsx
+++ b/packages/widgets/src/coolify/resource-row.tsx
@@ -1,7 +1,14 @@
 "use client";
 
-import { ActionIcon, Anchor, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconFileText, IconLink } from "@tabler/icons-react";
+import { ActionIcon, Anchor, Group, Stack, Text } from "@mantine/core";
+import {
+  IconCircleCheckFilled,
+  IconCircleXFilled,
+  IconFileText,
+  IconHelpCircleFilled,
+  IconLink,
+  IconLoader2,
+} from "@tabler/icons-react";
 
 import { useScopedI18n } from "@homarr/translation/client";
 
@@ -30,6 +37,27 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
   const t = useScopedI18n("widget.coolify");
   const status = parseStatus(item.status ?? "");
   const statusColor = getStatusColor(status);
+  const isTransitioning = status === "starting" || status === "restarting";
+  const StatusIcon =
+    status === "running"
+      ? IconCircleCheckFilled
+      : isTransitioning
+        ? IconLoader2
+        : status === "unknown"
+          ? IconHelpCircleFilled
+          : IconCircleXFilled;
+  const statusLabel =
+    status === "running"
+      ? t("status.running")
+      : status === "stopped"
+        ? t("status.stopped")
+        : status === "exited"
+          ? t("status.exited")
+          : status === "starting"
+            ? t("status.starting")
+            : status === "restarting"
+              ? t("status.restarting")
+              : t("status.unknown");
 
   const resourceUrl =
     item.projectUuid && item.environmentUuid
@@ -37,34 +65,38 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
       : undefined;
 
   const logsUrl = resourceUrl ? `${resourceUrl}/logs` : undefined;
+  const publicUrl = cleanFqdn(item.fqdn);
+  const resourceTimestamp = getResourceTimestamp(item, resourceType);
 
   return (
     <Stack gap={0}>
       <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
-        <Indicator size={isTiny ? 4 : 8} color={statusColor} />
+        <StatusIcon aria-label={statusLabel} size={isTiny ? 12 : 16} color={`var(--mantine-color-${statusColor}-6)`} />
         {resourceUrl ? (
           <Anchor
+            className={actionTargetClasses.root}
             href={resourceUrl}
             target="_blank"
             rel="noopener noreferrer"
-            fz={isTiny ? "8px" : "xs"}
+            fz="xs"
             c="inherit"
-            lineClamp={1}
+            truncate="end"
+            style={{ display: "inline-flex", alignItems: "center", overflow: "hidden" }}
           >
             {item.name}
           </Anchor>
         ) : (
-          <Text lineClamp={1} fz={isTiny ? "8px" : "xs"}>
+          <Text lineClamp={1} fz="xs">
             {item.name}
           </Text>
         )}
       </Group>
       <Group wrap="nowrap" gap={4} ml={16}>
-        {cleanFqdn(item.fqdn) && (
+        {publicUrl && (
           <ActionIcon
             className={actionTargetClasses.root}
             component="a"
-            href={cleanFqdn(item.fqdn)}
+            href={publicUrl}
             target="_blank"
             rel="noopener noreferrer"
             aria-label={t("action.openResource", { name: item.name })}
@@ -95,9 +127,9 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             {item.projectName ?? "-"} / {item.environmentName ?? "-"}
           </Text>
         )}
-        {!isTiny && getResourceTimestamp(item, resourceType) && (
+        {!isTiny && resourceTimestamp && (
           <Text fz="10px" c="dimmed" ml="auto">
-            {getResourceTimestamp(item, resourceType)}
+            {resourceTimestamp}
           </Text>
         )}
       </Group>
diff --git a/packages/widgets/src/coolify/servers-section.tsx b/packages/widgets/src/coolify/servers-section.tsx
index 24f82852a..50496eb6d 100644
--- a/packages/widgets/src/coolify/servers-section.tsx
+++ b/packages/widgets/src/coolify/servers-section.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { Accordion, ActionIcon, Anchor, Badge, Group, Indicator, Stack, Text } from "@mantine/core";
-import { IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
+import { Accordion, ActionIcon, Anchor, Badge, Group, Stack, Text } from "@mantine/core";
+import { IconCircleCheckFilled, IconCircleXFilled, IconEye, IconEyeOff, IconServer } from "@tabler/icons-react";
 
 import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -32,29 +32,28 @@ export function ServersSection({
 
   return (
     <Accordion.Item value="servers">
-      <Accordion.Control icon={isTiny ? null : <IconServer size={16} />}>
-        <Group gap="xs" justify="space-between" wrap="nowrap" style={{ flex: 1 }}>
+      <Group gap={0} wrap="nowrap">
+        <Accordion.Control icon={isTiny ? null : <IconServer size={16} />} style={{ flex: 1, minWidth: 0 }}>
           <Group gap="xs">
             <Text size="xs">{tCommon("servers")}</Text>
             <Badge variant="dot" color={getBadgeColor(onlineServers, servers.length)} size="xs">
               {onlineServers} / {servers.length}
             </Badge>
           </Group>
-          <ActionIcon
-            className={actionTargetClasses.root}
-            aria-label={t(showIp ? "action.hideIp" : "action.showIp")}
-            size="xs"
-            variant="subtle"
-            c="dimmed"
-            onClick={(event) => {
-              event.stopPropagation();
-              onToggleIp();
-            }}
-          >
-            {showIp ? <IconEye size={12} /> : <IconEyeOff size={12} />}
-          </ActionIcon>
-        </Group>
-      </Accordion.Control>
+        </Accordion.Control>
+        <ActionIcon
+          className={actionTargetClasses.root}
+          aria-label={t(showIp ? "action.hideIp" : "action.showIp")}
+          aria-pressed={showIp}
+          size="xs"
+          variant="subtle"
+          c="dimmed"
+          mr="xs"
+          onClick={onToggleIp}
+        >
+          {showIp ? <IconEye size={12} /> : <IconEyeOff size={12} />}
+        </ActionIcon>
+      </Group>
       <Accordion.Panel p={4}>
         {servers.length > 0 ? (
           <Stack gap={4}>
@@ -94,18 +93,25 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
   const isBuildServer = server.settings?.is_build_server === true;
   const isOnline = server.is_reachable !== false;
   const serverUrl = `${baseUrl}/server/${server.uuid}`;
+  const StatusIcon = isOnline ? IconCircleCheckFilled : IconCircleXFilled;
 
   return (
     <Stack gap={0}>
       <Group wrap="nowrap" gap={isTiny ? 4 : "xs"}>
-        <Indicator size={isTiny ? 4 : 8} color={isOnline ? "green" : "red"} />
+        <StatusIcon
+          aria-label={t(isOnline ? "status.online" : "status.offline")}
+          size={isTiny ? 12 : 16}
+          color={`var(--mantine-color-${isOnline ? "green" : "red"}-6)`}
+        />
         <Anchor
+          className={actionTargetClasses.root}
           href={serverUrl}
           target="_blank"
           rel="noopener noreferrer"
-          fz={isTiny ? "8px" : "xs"}
+          fz="xs"
           c="inherit"
-          lineClamp={1}
+          truncate="end"
+          style={{ display: "inline-flex", alignItems: "center", overflow: "hidden" }}
         >
           {server.name}
         </Anchor>
@@ -115,7 +121,7 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
           </Badge>
         ) : (
           <Text fz="10px" c="dimmed">
-            ({counts.apps} apps / {counts.services} svcs)
+            ({t("server.resourceCounts", { applications: counts.apps, services: counts.services })})
           </Text>
         )}
       </Group>

From d86293de0fbec5c5302c112d076634e584ce8437 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 16:32:59 +0200
Subject: [PATCH 17/75] fix: canonicalize widget date locales

---
 packages/translation/src/client/index.ts         |  2 +-
 .../translation/src/client/use-current-locale.ts |  4 ++++
 packages/translation/src/config.spec.ts          | 16 ++++++++++++++++
 packages/translation/src/config.ts               |  8 ++++++++
 .../src/archive-team-warrior/component.tsx       |  4 ++--
 packages/widgets/src/calendar/component.tsx      |  6 ++----
 .../widgets/src/media-releases/component.tsx     |  4 ++--
 .../src/smart-home/entity-state/component.tsx    |  4 ++--
 .../src/speedtest-tracker/latest-result.tsx      |  4 ++--
 packages/widgets/src/vpn/component.tsx           |  4 ++--
 10 files changed, 41 insertions(+), 15 deletions(-)
 create mode 100644 packages/translation/src/config.spec.ts

diff --git a/packages/translation/src/client/index.ts b/packages/translation/src/client/index.ts
index 5c6755883..0f2ee83f2 100644
--- a/packages/translation/src/client/index.ts
+++ b/packages/translation/src/client/index.ts
@@ -6,7 +6,7 @@ import type { SupportedLanguage } from "../config";
 import type englishTranslation from "../lang/en.json";
 
 export { useChangeLocale } from "./use-change-locale";
-export { useCurrentLocale } from "./use-current-locale";
+export { useCurrentIntlLocale, useCurrentLocale } from "./use-current-locale";
 
 declare module "next-intl" {
   interface AppConfig {
diff --git a/packages/translation/src/client/use-current-locale.ts b/packages/translation/src/client/use-current-locale.ts
index a0e796010..6a8ec03a5 100644
--- a/packages/translation/src/client/use-current-locale.ts
+++ b/packages/translation/src/client/use-current-locale.ts
@@ -1,3 +1,7 @@
 import { useLocale } from "next-intl";
 
+import { getIntlLocale } from "../config";
+
 export const useCurrentLocale = useLocale;
+
+export const useCurrentIntlLocale = () => getIntlLocale(useLocale());
diff --git a/packages/translation/src/config.spec.ts b/packages/translation/src/config.spec.ts
new file mode 100644
index 000000000..55c3adcbb
--- /dev/null
+++ b/packages/translation/src/config.spec.ts
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+
+import { getIntlLocale } from "./config";
+
+describe("getIntlLocale", () => {
+  it("maps Homarr-specific locale keys to canonical Intl locales", () => {
+    expect(getIntlLocale("cn")).toBe("zh-CN");
+    expect(getIntlLocale("zh")).toBe("zh-TW");
+    expect(getIntlLocale("cr")).toBe("en");
+  });
+
+  it("preserves locale keys that Intl already understands", () => {
+    expect(getIntlLocale("fr")).toBe("fr");
+    expect(getIntlLocale("de-CH")).toBe("de-CH");
+  });
+});
diff --git a/packages/translation/src/config.ts b/packages/translation/src/config.ts
index 6acf807d4..d0f399e23 100644
--- a/packages/translation/src/config.ts
+++ b/packages/translation/src/config.ts
@@ -438,5 +438,13 @@ export type SupportedLanguage = (typeof supportedLanguages)[number];
 
 export const fallbackLocale = "en" satisfies SupportedLanguage;
 
+const intlLocaleOverrides: Partial<Record<SupportedLanguage, string>> = {
+  cn: "zh-CN",
+  cr: "en",
+  zh: "zh-TW",
+};
+
+export const getIntlLocale = (locale: SupportedLanguage): string => intlLocaleOverrides[locale] ?? locale;
+
 export const isLocaleRTL = (locale: SupportedLanguage) =>
   "isRTL" in localeConfigurations[locale] && localeConfigurations[locale].isRTL;
diff --git a/packages/widgets/src/archive-team-warrior/component.tsx b/packages/widgets/src/archive-team-warrior/component.tsx
index 83cf74289..35cb3049e 100644
--- a/packages/widgets/src/archive-team-warrior/component.tsx
+++ b/packages/widgets/src/archive-team-warrior/component.tsx
@@ -5,7 +5,7 @@ import { Avatar, Badge, Card, Group, ScrollArea, SimpleGrid, Stack, Text } from
 import { clientApi } from "@homarr/api/client";
 import { formatByteRate } from "@homarr/common";
 import { getIconUrl } from "@homarr/definitions";
-import { useCurrentLocale, useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 
@@ -47,7 +47,7 @@ const ArchiveTeamWarriorWidgetContent = ({
   isAdvanced: boolean;
 }) => {
   const t = useScopedI18n("widget.archiveTeamWarrior");
-  const locale = useCurrentLocale();
+  const locale = useCurrentIntlLocale();
   const [data] = clientApi.widget.archiveTeamWarrior.getStatus.useSuspenseQuery({ integrationId });
 
   const status = data.status;
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index 614916993..ced224eb7 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useMemo, useState } from "react";
-import { useParams } from "next/navigation";
 import { ActionIcon, Box, Center, Group, Loader, Stack, Text, Tooltip, useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
 import { useElementSize } from "@mantine/hooks";
@@ -13,7 +12,7 @@ import { clientApi } from "@homarr/api/client";
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import actionTargetClasses from "../common/action-target.module.css";
 import type { WidgetComponentProps } from "../definition";
@@ -115,8 +114,7 @@ const CalendarBase = ({
   options,
   displayMode,
 }: CalendarBaseProps) => {
-  const params = useParams();
-  const locale = params.locale as string;
+  const locale = useCurrentIntlLocale();
   const { firstDayOfWeek } = useSettings();
   const board = useRequiredBoard();
   const mantineTheme = useMantineTheme();
diff --git a/packages/widgets/src/media-releases/component.tsx b/packages/widgets/src/media-releases/component.tsx
index e90743f27..c04e155de 100644
--- a/packages/widgets/src/media-releases/component.tsx
+++ b/packages/widgets/src/media-releases/component.tsx
@@ -24,7 +24,7 @@ import { getIconUrl } from "@homarr/definitions";
 import type { MediaRelease } from "@homarr/integrations/types";
 import { mediaTypeConfigurations } from "@homarr/integrations/types";
 import type { TranslationFunction } from "@homarr/translation";
-import { useCurrentLocale, useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 import { OverflowBadge } from "@homarr/ui";
 
@@ -78,7 +78,7 @@ const formatReleaseDate = (value: unknown, locale: string, compact: boolean) =>
 };
 
 const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
-  const locale = useCurrentLocale();
+  const locale = useCurrentIntlLocale();
   const t = useI18n();
   const length = formatLength(item.length, item.type, t);
   const isCompact = !isAdvanced && (width < 340 || height < 180);
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index 6aadfba46..385d27205 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -7,7 +7,7 @@ import { IconBinaryTree } from "@tabler/icons-react";
 import { clientApi } from "@homarr/api/client";
 import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
-import { useCurrentLocale, useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 
@@ -20,7 +20,7 @@ export default function SmartHomeEntityStateWidget({
   displayMode,
 }: WidgetComponentProps<"smartHome-entityState">) {
   const t = useI18n();
-  const locale = useCurrentLocale();
+  const locale = useCurrentIntlLocale();
   // It will always have at least one integration as otherwise the NoIntegrationSelectedError would be thrown in item-content.tsx
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const integrationId = integrationIds[0]!;
diff --git a/packages/widgets/src/speedtest-tracker/latest-result.tsx b/packages/widgets/src/speedtest-tracker/latest-result.tsx
index d2851aa43..968db8bbf 100644
--- a/packages/widgets/src/speedtest-tracker/latest-result.tsx
+++ b/packages/widgets/src/speedtest-tracker/latest-result.tsx
@@ -4,7 +4,7 @@ import { Group, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconArrowDown, IconArrowUp, IconCircleCheck, IconCircleX, IconWaveSine } from "@tabler/icons-react";
 
 import type { SpeedtestTrackerResult } from "@homarr/integrations/types";
-import { useCurrentLocale, useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { formatResultSpeed } from "./helpers";
 import { SectionLabel } from "./section-label";
@@ -12,7 +12,7 @@ import { SpeedStatCard } from "./speed-stat-card";
 
 export function LatestResultSection({ result, width = 500 }: { result: SpeedtestTrackerResult; width?: number }) {
   const t = useScopedI18n("widget.speedtestTracker");
-  const locale = useCurrentLocale();
+  const locale = useCurrentIntlLocale();
   const timestamp = Intl.DateTimeFormat(locale, {
     month: "short",
     day: "numeric",
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index d9526923c..399264bbe 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -3,7 +3,7 @@
 import { Center, Flex, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useCurrentLocale, useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { VpnIntegrationCard } from "./vpn-card";
@@ -21,7 +21,7 @@ export default function VpnWidget({
   });
   const t = useScopedI18n("widget.vpn");
   const tCommon = useScopedI18n("common");
-  const locale = useCurrentLocale();
+  const locale = useCurrentIntlLocale();
   const dense = displayMode === "compact" && (width < 240 || height < 120);
 
   if (isPending || integrations.length === 0) {

From d97f1bd34b32e0f7e3199721a2d8cf3a0a6ee4ee Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 16:42:08 +0200
Subject: [PATCH 18/75] fix: align widget accessibility and locales

---
 .../widgets/src/anchor-note/component.tsx     |  5 +++--
 .../src/dns-hole/summary/component.tsx        | 19 ++++---------------
 .../src/immich/album-carousel/component.tsx   |  5 +++--
 .../widgets/src/immich/albums-query.spec.ts   |  1 +
 .../src/immich/server-stats/component.tsx     | 11 ++++++-----
 .../widgets/src/media-releases/component.tsx  |  7 ++++---
 .../execute-automation/component.tsx          |  5 +++--
 packages/widgets/src/stocks/component.tsx     | 10 ++++++----
 .../src/tracearr/recent-activity-section.tsx  |  5 +++--
 .../src/tracearr/violations-section.tsx       |  5 +++--
 packages/widgets/src/umami/umami-content.tsx  | 19 ++++++++++---------
 11 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 24e4de866..945a2de55 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -14,7 +14,7 @@ import { clientApi } from "@homarr/api/client";
 import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useTimeAgo } from "@homarr/common";
 import type { AnchorNotePermission } from "@homarr/integrations";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
@@ -180,6 +180,7 @@ const AnchorNoteWidgetContent = ({
   isAdvanced,
 }: AnchorNoteWidgetContentProps) => {
   const t = useScopedI18n("widget.anchorNote");
+  const locale = useCurrentIntlLocale();
   const { data: note, refetch } = clientApi.widget.anchorNotes.getNote.useQuery({
     integrationId,
     noteId,
@@ -327,7 +328,7 @@ const AnchorNoteWidgetContent = ({
                 </Badge>
               )}
               <Text size="xs" c="dimmed">
-                {t("createdAt", { date: new Date(note.createdAt).toLocaleDateString() })}
+                {t("createdAt", { date: new Date(note.createdAt).toLocaleDateString(locale) })}
               </Text>
             </Group>
           )}
diff --git a/packages/widgets/src/dns-hole/summary/component.tsx b/packages/widgets/src/dns-hole/summary/component.tsx
index a1ec1f1df..86c03dd7c 100644
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -2,19 +2,7 @@
 
 import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
-import {
-  Avatar,
-  AvatarGroup,
-  Badge,
-  Card,
-  Flex,
-  Group,
-  SimpleGrid,
-  Stack,
-  Text,
-  Tooltip,
-  TooltipFloating,
-} from "@mantine/core";
+import { Avatar, AvatarGroup, Badge, Card, Flex, Group, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
 
@@ -177,10 +165,11 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
   const value = item.value(data, width <= 64 ? "sm" : "md");
 
   return (
-    <TooltipFloating label={tooltip} disabled={!tooltip} w={250} multiline>
+    <Tooltip label={tooltip} disabled={!tooltip} w={250} multiline events={{ hover: true, focus: true, touch: true }}>
       <Card
         ref={ref}
         component="section"
+        tabIndex={tooltip ? 0 : undefined}
         aria-label={`${label}: ${value}`}
         className="summary-card"
         p="sm"
@@ -223,7 +212,7 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
           </Flex>
         </Flex>
       </Card>
-    </TooltipFloating>
+    </Tooltip>
   );
 };
 
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index fa7bd4d0b..61c8c57e2 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -14,7 +14,7 @@ import {
 } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useI18n, useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
@@ -139,6 +139,7 @@ function Carousel({
   setPaused,
 }: CarouselProps) {
   const t = useScopedI18n("widget.immich-albumCarousel");
+  const locale = useCurrentIntlLocale();
   const reduceMotion = useReducedMotion();
 
   useEffect(() => {
@@ -214,7 +215,7 @@ function Carousel({
             )}
             <Group gap="xs">
               <IconCalendar size={16} />
-              <Text size="xs">{new Date(currentAsset.fileModifiedAt).toLocaleDateString()}</Text>
+              <Text size="xs">{new Date(currentAsset.fileModifiedAt).toLocaleDateString(locale)}</Text>
             </Group>
             <Text size="xs" c="dimmed">
               {safeCurrentIndex + 1} / {assets.length}
diff --git a/packages/widgets/src/immich/albums-query.spec.ts b/packages/widgets/src/immich/albums-query.spec.ts
index a3dd73171..c52187716 100644
--- a/packages/widgets/src/immich/albums-query.spec.ts
+++ b/packages/widgets/src/immich/albums-query.spec.ts
@@ -27,6 +27,7 @@ vi.mock("@homarr/api/client", () => ({
 }));
 
 vi.mock("@homarr/translation/client", () => ({
+  useCurrentIntlLocale: () => "en",
   useI18n: () => (key: string) => key,
   useScopedI18n: () => (key: string) => key,
 }));
diff --git a/packages/widgets/src/immich/server-stats/component.tsx b/packages/widgets/src/immich/server-stats/component.tsx
index b17ce1de5..9a09ffb3a 100644
--- a/packages/widgets/src/immich/server-stats/component.tsx
+++ b/packages/widgets/src/immich/server-stats/component.tsx
@@ -7,7 +7,7 @@ import { getQueryKey } from "@trpc/react-query";
 
 import { clientApi } from "@homarr/api/client";
 import { formatBytes } from "@homarr/common";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
@@ -25,6 +25,7 @@ export default function ImmichServerStatsWidget({
   widgetStateRef,
 }: WidgetComponentProps<"immich-serverStats">) {
   const t = useI18n();
+  const locale = useCurrentIntlLocale();
   const input = { integrationId: integrationIds[0] ?? "" };
   const albumsInput = { ...input, limit: MAX_ADVANCED_ALBUMS };
   const isAdvanced = displayMode === "advanced";
@@ -51,7 +52,7 @@ export default function ImmichServerStatsWidget({
         <StatItem
           icon={<IconUsers size={20} />}
           label={t("widget.immich-serverStats.users")}
-          value={stats.userCount}
+          value={stats.userCount.toLocaleString(locale)}
           dense={statsLayout.dense}
         />
       )}
@@ -59,7 +60,7 @@ export default function ImmichServerStatsWidget({
         <StatItem
           icon={<IconPhoto size={20} />}
           label={t("widget.immich-serverStats.photos")}
-          value={stats.photoCount}
+          value={stats.photoCount.toLocaleString(locale)}
           dense={statsLayout.dense}
         />
       )}
@@ -67,7 +68,7 @@ export default function ImmichServerStatsWidget({
         <StatItem
           icon={<IconVideo size={20} />}
           label={t("widget.immich-serverStats.videos")}
-          value={stats.videoCount}
+          value={stats.videoCount.toLocaleString(locale)}
           dense={statsLayout.dense}
         />
       )}
@@ -107,7 +108,7 @@ export default function ImmichServerStatsWidget({
                   {album.albumName}
                 </Text>
                 <Text size="xs" c="dimmed">
-                  {album.assetCount.toLocaleString()}
+                  {album.assetCount.toLocaleString(locale)}
                 </Text>
               </Group>
               <Progress value={(album.assetCount / Math.max(maxAssets, 1)) * 100} size="sm" />
diff --git a/packages/widgets/src/media-releases/component.tsx b/packages/widgets/src/media-releases/component.tsx
index c04e155de..c2ac70573 100644
--- a/packages/widgets/src/media-releases/component.tsx
+++ b/packages/widgets/src/media-releases/component.tsx
@@ -12,7 +12,7 @@ import {
   SimpleGrid,
   Stack,
   Text,
-  TooltipFloating,
+  Tooltip,
   UnstyledButton,
 } from "@mantine/core";
 import { IconBook, IconCalendar, IconClock, IconStarFilled } from "@tabler/icons-react";
@@ -88,10 +88,11 @@ const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
   const showSide = isAdvanced || (!isTiny && (options.showType || options.showSource));
 
   return (
-    <TooltipFloating
+    <Tooltip
       label={item.description}
       w={300}
       multiline
+      events={{ hover: true, focus: true, touch: true }}
       disabled={
         isAdvanced ||
         item.description === undefined ||
@@ -221,7 +222,7 @@ const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
           )}
         </Group>
       </UnstyledButton>
-    </TooltipFloating>
+    </Tooltip>
   );
 };
 
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index 98964991d..87ab84265 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -19,7 +19,7 @@ import { IconAutomation, IconCheck } from "@tabler/icons-react";
 import { clientApi } from "@homarr/api/client";
 import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 
@@ -61,6 +61,7 @@ export default function SmartHomeTriggerAutomationWidget({
   }, [canInteract, integrationId, isEditMode, isPending, mutateAsync, options.automationId]);
 
   const t = useI18n();
+  const locale = useCurrentIntlLocale();
   useRegisterSpotlightContextActions(
     `smartHome-automation-${options.automationId}`,
     [
@@ -150,7 +151,7 @@ export default function SmartHomeTriggerAutomationWidget({
                   <Text ta="center" size="xs" c="dimmed">
                     {lastExecutedAt
                       ? t("widget.smartHome-executeAutomation.advanced.lastExecuted", {
-                          time: lastExecutedAt.toLocaleTimeString(),
+                          time: lastExecutedAt.toLocaleTimeString(locale),
                         })
                       : t("widget.smartHome-executeAutomation.advanced.automationId", {
                           id: options.automationId,
diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx
index d83f409d0..6fb401185 100644
--- a/packages/widgets/src/stocks/component.tsx
+++ b/packages/widgets/src/stocks/component.tsx
@@ -5,7 +5,7 @@ import { Flex, Stack, Text, Title, useMantineTheme } from "@mantine/core";
 import { IconMinus, IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
@@ -73,6 +73,8 @@ export function getStockSummary(priceHistory: number[], previousClose: number):
 
 export default function StockPriceWidget({ options, width, height, displayMode }: WidgetComponentProps<"stockPrice">) {
   const t = useScopedI18n("widget.stockPrice");
+  const locale = useCurrentIntlLocale();
+  const numberFormatter = new Intl.NumberFormat(locale);
   const theme = useMantineTheme();
   const { data: result } = clientApi.widget.stockPrice.getPriceHistory.useQuery(options);
 
@@ -120,15 +122,15 @@ export default function StockPriceWidget({ options, width, height, displayMode }
       </Stack>
 
       <Title pos="absolute" bottom={10} right={10} order={layout.priceOrder} fw={700}>
-        {new Intl.NumberFormat().format(round(summary.currentPrice))}
+        {numberFormatter.format(round(summary.currentPrice))}
       </Title>
 
       {layout.showChange && (
         <Text pos="absolute" top={10} right={10} size="xl" fw={700}>
-          {new Intl.NumberFormat().format(stockValuesChange)}
+          {numberFormatter.format(stockValuesChange)}
           {stockValuesChangePercentage === null
             ? null
-            : ` (${stockValuesChange > 0 ? "+" : ""}${new Intl.NumberFormat().format(stockValuesChangePercentage)}%)`}
+            : ` (${stockValuesChange > 0 ? "+" : ""}${numberFormatter.format(stockValuesChangePercentage)}%)`}
         </Text>
       )}
 
diff --git a/packages/widgets/src/tracearr/recent-activity-section.tsx b/packages/widgets/src/tracearr/recent-activity-section.tsx
index 982101350..994ff89a2 100644
--- a/packages/widgets/src/tracearr/recent-activity-section.tsx
+++ b/packages/widgets/src/tracearr/recent-activity-section.tsx
@@ -1,10 +1,11 @@
 import { Avatar, Badge, Group, Paper, Stack, Text } from "@mantine/core";
 
 import type { TracearrHistorySession } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 export function RecentActivityList({ sessions }: { sessions: TracearrHistorySession[] }) {
   const t = useScopedI18n("widget.tracearr");
+  const locale = useCurrentIntlLocale();
 
   return (
     <Stack gap={4}>
@@ -42,7 +43,7 @@ export function RecentActivityList({ sessions }: { sessions: TracearrHistorySess
                       {session.watched ? t("recentActivity.watched") : t("recentActivity.partial")}
                     </Badge>
                     <Text size="xs" c="dimmed" lineClamp={1}>
-                      {new Date(session.startedAt).toLocaleDateString()}
+                      {new Date(session.startedAt).toLocaleDateString(locale)}
                     </Text>
                   </Stack>
                 </Group>
diff --git a/packages/widgets/src/tracearr/violations-section.tsx b/packages/widgets/src/tracearr/violations-section.tsx
index 6d052dd59..5c96a5c83 100644
--- a/packages/widgets/src/tracearr/violations-section.tsx
+++ b/packages/widgets/src/tracearr/violations-section.tsx
@@ -2,10 +2,11 @@ import { Avatar, Badge, Group, Paper, Stack, Text } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
 import type { TracearrViolation } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 export function ViolationsList({ violations }: { violations: TracearrViolation[] }) {
   const t = useScopedI18n("widget.tracearr");
+  const locale = useCurrentIntlLocale();
 
   return (
     <Stack gap={4}>
@@ -53,7 +54,7 @@ export function ViolationsList({ violations }: { violations: TracearrViolation[]
                     {violation.severity}
                   </Badge>
                   <Text size="xs" c="dimmed" lineClamp={1}>
-                    {new Date(violation.createdAt).toLocaleDateString()}
+                    {new Date(violation.createdAt).toLocaleDateString(locale)}
                   </Text>
                 </Stack>
               </Group>
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 1179fb4f6..510d5749c 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -6,7 +6,7 @@ import { Box, Group, ScrollArea, SimpleGrid, Stack, Text, useMantineColorScheme
 import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
 import type { UmamiVisitorStats } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { UmamiEventsContent } from "./umami-events-content";
 import { UmamiTopPagesContent, UmamiTopReferrersContent } from "./umami-top-list";
@@ -44,6 +44,7 @@ export function UmamiContent({
 }: UmamiContentProps) {
   const t = useScopedI18n("widget.umami");
   const tCommon = useScopedI18n("common");
+  const locale = useCurrentIntlLocale();
   const { colorScheme } = useMantineColorScheme();
   const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
 
@@ -217,8 +218,8 @@ export function UmamiContent({
             <Group gap={4} align="baseline">
               <Text size="lg" fw={700} lh={1}>
                 {viewMode === "events"
-                  ? (multiEventTotal ?? 0).toLocaleString()
-                  : (visitorStats.eventCount ?? 0).toLocaleString()}
+                  ? (multiEventTotal ?? 0).toLocaleString(locale)
+                  : (visitorStats.eventCount ?? 0).toLocaleString(locale)}
               </Text>
               <Text size="xs" c="dimmed">
                 {t("event.label")}
@@ -229,7 +230,7 @@ export function UmamiContent({
             </Text>
             <Group gap={4} align="baseline">
               <Text size="lg" fw={700} lh={1}>
-                {visitorStats.totalVisitors.toLocaleString()}
+                {visitorStats.totalVisitors.toLocaleString(locale)}
               </Text>
               <Text size="xs" c="dimmed">
                 {t("visitors")}
@@ -239,7 +240,7 @@ export function UmamiContent({
         ) : (
           <Group gap={4} align="baseline">
             <Text size="xl" fw={700} lh={1}>
-              {visitorStats.totalVisitors.toLocaleString()}
+              {visitorStats.totalVisitors.toLocaleString(locale)}
             </Text>
             <Text size="xs" c="dimmed">
               {t("visitors")}
@@ -250,18 +251,18 @@ export function UmamiContent({
       {showSecondaryStats && (
         <Group wrap="wrap" style={{ columnGap: 12, rowGap: 4 }}>
           <Text size="xs" c="green">
-            ● {activeVisitors.toLocaleString()} {t("active")}
+            ● {activeVisitors.toLocaleString(locale)} {t("active")}
           </Text>
           <Text size="xs" c="dimmed">
-            {visitorStats.totalPageviews.toLocaleString()} {t("pageviews")}
+            {visitorStats.totalPageviews.toLocaleString(locale)} {t("pageviews")}
           </Text>
           <Text size="xs" c="dimmed">
-            {visitorStats.totalVisits.toLocaleString()} {t("visits")}
+            {visitorStats.totalVisits.toLocaleString(locale)} {t("visits")}
           </Text>
           {showDetailedStats && (
             <>
               <Text size="xs" c="dimmed">
-                {visitorStats.bounceRate}% {t("bounceRate")}
+                {visitorStats.bounceRate.toLocaleString(locale)}% {t("bounceRate")}
               </Text>
               <Text size="xs" c="dimmed">
                 {formatDuration(visitorStats.avgDuration * 1000)} {t("avgDuration")}

From ed8ef15f127e243bfa222873daed3b746227acde Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 16:48:34 +0200
Subject: [PATCH 19/75] fix: localize widget chart formatting

---
 .../src/speedtest-tracker/recent-results.tsx  | 73 +++++++++++--------
 packages/widgets/src/umami/umami-content.tsx  |  2 +-
 .../src/umami/umami-events-content.tsx        |  5 +-
 packages/widgets/src/umami/umami-top-list.tsx |  6 +-
 packages/widgets/src/umami/umami-utils.ts     |  6 +-
 5 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/packages/widgets/src/speedtest-tracker/recent-results.tsx b/packages/widgets/src/speedtest-tracker/recent-results.tsx
index 5d2328563..174a4c890 100644
--- a/packages/widgets/src/speedtest-tracker/recent-results.tsx
+++ b/packages/widgets/src/speedtest-tracker/recent-results.tsx
@@ -8,7 +8,7 @@ import { ReferenceLine, XAxis } from "recharts";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { SpeedtestTrackerResult } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { SectionLabel } from "./section-label";
 
@@ -40,17 +40,17 @@ function buildXAxisTicks(data: { ts: number }[]): XAxisTicks {
 
   return {
     midnightTs: foundMidnight,
-    xTicks: Array.from(tickSet).sort((tsA, tsB) => tsA - tsB),
+    xTicks: Array.from(tickSet).toSorted((tsA, tsB) => tsA - tsB),
     topDateTicks: topTicks,
   };
 }
 
-function makeXTickRenderer(midnightTs: number | null) {
+function makeXTickRenderer(midnightTs: number | null, locale: string) {
   return ({ x, y, payload }: { x: number | string; y: number | string; payload: { value: number } }) => {
     const date = new Date(payload.value);
-    const timeStr = date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+    const timeStr = date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" });
     const isMidnight = midnightTs !== null && payload.value === midnightTs;
-    const dateStr = isMidnight ? date.toLocaleDateString([], { month: "short", day: "numeric" }) : null;
+    const dateStr = isMidnight ? date.toLocaleDateString(locale, { month: "short", day: "numeric" }) : null;
 
     return (
       <g transform={`translate(${x},${y})`}>
@@ -67,23 +67,29 @@ function makeXTickRenderer(midnightTs: number | null) {
   };
 }
 
-function renderTopDateTick(props: {
-  x: number | string;
-  y: number | string;
-  payload: { value: number };
-  index: number;
-}) {
-  const { x, y, payload, index } = props;
-  const date = new Date(payload.value);
-  const dateStr = date.toLocaleDateString([], { weekday: "short", month: "short", day: "numeric" });
-  const anchor = index === 0 ? "start" : "middle";
-  return (
-    <g transform={`translate(${x},${y})`}>
-      <text x={0} y={-4} textAnchor={anchor} fontSize={10} fill="var(--mantine-color-dimmed)">
-        {dateStr}
-      </text>
-    </g>
-  );
+function makeTopDateTickRenderer(locale: string) {
+  return ({
+    x,
+    y,
+    payload,
+    index,
+  }: {
+    x: number | string;
+    y: number | string;
+    payload: { value: number };
+    index: number;
+  }) => {
+    const date = new Date(payload.value);
+    const dateStr = date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
+    const anchor = index === 0 ? "start" : "middle";
+    return (
+      <g transform={`translate(${x},${y})`}>
+        <text x={0} y={-4} textAnchor={anchor} fontSize={10} fill="var(--mantine-color-dimmed)">
+          {dateStr}
+        </text>
+      </g>
+    );
+  };
 }
 
 function buildYAxisConfig(maxVal: number, stepOptions: { threshold: number; step: number }[]) {
@@ -94,10 +100,10 @@ function buildYAxisConfig(maxVal: number, stepOptions: { threshold: number; step
   return { ticks, domain: [0, roundedMax] as [number, number] };
 }
 
-function formatTooltipDate(label: number | string | undefined): string {
+function formatTooltipDate(label: number | string | undefined, locale: string): string {
   const timestamp = typeof label === "number" ? label : Number(label);
   if (Number.isNaN(timestamp)) return "";
-  return new Date(timestamp).toLocaleString([], {
+  return new Date(timestamp).toLocaleString(locale, {
     month: "short",
     day: "numeric",
     hour: "2-digit",
@@ -157,11 +163,12 @@ function SpeedHistoryChart({ results, height }: { results: SpeedtestTrackerResul
   const board = useRequiredBoard();
   const theme = useMantineTheme();
   const t = useScopedI18n("widget.speedtestTracker");
+  const locale = useCurrentIntlLocale();
 
   const data = useMemo(
     () =>
-      [...results]
-        .sort((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
+      results
+        .toSorted((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
         .filter((result) => (result.download_bits ?? 0) > 0)
         .map((result) => ({
           ts: result.created_at.getTime(),
@@ -184,7 +191,8 @@ function SpeedHistoryChart({ results, height }: { results: SpeedtestTrackerResul
   );
 
   const { midnightTs, xTicks, topDateTicks } = useMemo(() => buildXAxisTicks(data), [data]);
-  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs), [midnightTs]);
+  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs, locale), [locale, midnightTs]);
+  const renderTopDateTick = useMemo(() => makeTopDateTickRenderer(locale), [locale]);
 
   if (data.length === 0) return null;
 
@@ -230,7 +238,7 @@ function SpeedHistoryChart({ results, height }: { results: SpeedtestTrackerResul
           if (!active || !payload?.length) return null;
           return (
             <ChartTooltip
-              label={formatTooltipDate(label)}
+              label={formatTooltipDate(label, locale)}
               payload={payload}
               valueFormatter={(val: number) => `${val} Mbps`}
             />
@@ -269,11 +277,12 @@ function PingHistoryChart({ results, height }: { results: SpeedtestTrackerResult
   const board = useRequiredBoard();
   const theme = useMantineTheme();
   const t = useScopedI18n("widget.speedtestTracker");
+  const locale = useCurrentIntlLocale();
 
   const data = useMemo(
     () =>
-      [...results]
-        .sort((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
+      results
+        .toSorted((resultA, resultB) => resultA.created_at.getTime() - resultB.created_at.getTime())
         .map((result) =>
           result.ping === null
             ? null
@@ -298,7 +307,7 @@ function PingHistoryChart({ results, height }: { results: SpeedtestTrackerResult
   );
 
   const { midnightTs, xTicks } = useMemo(() => buildXAxisTicks(data), [data]);
-  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs), [midnightTs]);
+  const renderXTick = useMemo(() => makeXTickRenderer(midnightTs, locale), [locale, midnightTs]);
 
   if (data.length === 0) return null;
 
@@ -341,7 +350,7 @@ function PingHistoryChart({ results, height }: { results: SpeedtestTrackerResult
           if (!active || !payload?.length) return null;
           return (
             <ChartTooltip
-              label={formatTooltipDate(label)}
+              label={formatTooltipDate(label, locale)}
               payload={payload}
               valueFormatter={(val: number) => `${val} ms`}
             />
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 510d5749c..9eb6d8cdf 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -91,7 +91,7 @@ export function UmamiContent({
   const { visitorStats } = firstResult;
 
   const chartData = visitorStats.dataPoints.map((point: UmamiVisitorStats["dataPoints"][number]) => ({
-    label: formatXLabel(point.timestamp, timeFrame),
+    label: formatXLabel(point.timestamp, timeFrame, locale),
     visitors: point.visitors,
     ...(point.events !== undefined ? { events: point.events } : {}),
   }));
diff --git a/packages/widgets/src/umami/umami-events-content.tsx b/packages/widgets/src/umami/umami-events-content.tsx
index e503df97a..a1af745e2 100644
--- a/packages/widgets/src/umami/umami-events-content.tsx
+++ b/packages/widgets/src/umami/umami-events-content.tsx
@@ -5,7 +5,7 @@ import { Box, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { UmamiEventSeries } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { EVENT_COLORS, formatXLabel, umamiQueryOptions } from "./umami-utils";
 
@@ -27,6 +27,7 @@ export function UmamiEventsContent({
   showXAxis,
 }: UmamiEventsContentProps) {
   const t = useScopedI18n("widget.umami");
+  const locale = useCurrentIntlLocale();
   const { colorScheme } = useMantineColorScheme();
   const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
 
@@ -59,7 +60,7 @@ export function UmamiEventsContent({
   );
 
   const chartData = allTimestamps.map((timestamp) => {
-    const row: Record<string, string | number> = { label: formatXLabel(timestamp, timeFrame) };
+    const row: Record<string, string | number> = { label: formatXLabel(timestamp, timeFrame, locale) };
     for (const serie of series) {
       row[serie.eventName] = byEvent.get(serie.eventName)?.get(timestamp) ?? 0;
     }
diff --git a/packages/widgets/src/umami/umami-top-list.tsx b/packages/widgets/src/umami/umami-top-list.tsx
index 3ce4b8730..3d17d257a 100644
--- a/packages/widgets/src/umami/umami-top-list.tsx
+++ b/packages/widgets/src/umami/umami-top-list.tsx
@@ -4,7 +4,7 @@ import { Group, ScrollArea, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { UmamiMetricItem } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { umamiQueryOptions } from "./umami-utils";
 
@@ -48,6 +48,8 @@ function UmamiTopList({
   heading: string;
   emptyLabel: string;
 }) {
+  const locale = useCurrentIntlLocale();
+
   return (
     <Stack gap={2} h="100%">
       <Text size="xs" c="dimmed" fw={500}>
@@ -64,7 +66,7 @@ function UmamiTopList({
                 {item.x || emptyLabel}
               </Text>
               <Text size="xs" fw={600} flex="0 0 auto">
-                {item.y.toLocaleString()}
+                {item.y.toLocaleString(locale)}
               </Text>
             </Group>
           ))}
diff --git a/packages/widgets/src/umami/umami-utils.ts b/packages/widgets/src/umami/umami-utils.ts
index bca9d247b..dd64a6e64 100644
--- a/packages/widgets/src/umami/umami-utils.ts
+++ b/packages/widgets/src/umami/umami-utils.ts
@@ -6,17 +6,17 @@ export const umamiQueryOptions = { refetchInterval: 60_000 } as const;
 
 export const EVENT_COLORS = ["blue.5", "orange.5", "green.5", "red.5", "violet.5", "teal.5", "yellow.5", "pink.5"];
 
-export function formatXLabel(timestamp: string, timeFrame: string): string {
+export function formatXLabel(timestamp: string, timeFrame: string, locale: string): string {
   const date = new Date(timestamp);
   switch (timeFrame) {
     case "today":
     case "24h":
-      return `${date.getHours().toString().padStart(2, "0")}:00`;
+      return date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
     case "7d":
     case "30d":
     case "month":
     case "lastMonth":
-      return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+      return date.toLocaleDateString(locale, { month: "short", day: "numeric" });
     default:
       return timestamp;
   }

From f0d8e97f8d06fd131acdb41b8b9750ba7153e95b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 17:25:02 +0200
Subject: [PATCH 20/75] fix: address final widget review

---
 .../widgets/src/audio-stats/component.tsx     | 34 ++++++++++---------
 .../src/smart-home/entity-state/component.tsx | 17 ++++++++--
 packages/widgets/src/umami/umami-content.tsx  |  9 +++--
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index fe78ea689..eb9adb1a5 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -8,9 +8,9 @@ import { formatBytes, formatDuration } from "@homarr/common";
 import type { AudiobookshelfDashboardData } from "@homarr/integrations/types";
 
 import { WidgetEmptyState } from "../common/empty-state";
-import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { setWidgetRuntimeQueries } from "../definition";
+import { NoIntegrationDataError } from "../errors/no-data-integration";
 import { AudioStatsContent } from "./audio-stats-content";
 
 export default function AudioStatsWidget({
@@ -22,17 +22,22 @@ export default function AudioStatsWidget({
   widgetStateRef,
 }: WidgetComponentProps<"audioStats">) {
   const statsInput = { integrationId: integrationIds[0] ?? "" };
-  const { data: response } = clientApi.widget.audioStats.getStats.useQuery(statsInput);
-  const streamsInput = { integrationIds, showOnlyPlaying: false };
+  const { data: response, error: statsError } = clientApi.widget.audioStats.getStats.useQuery(statsInput);
+  const streamsInput = { integrationIds: [statsInput.integrationId], showOnlyPlaying: true };
   const streamsEnabled = displayMode === "advanced" && response?.kind === "navidrome";
-  const { data: streamResults = [] } = clientApi.widget.mediaServer.getCurrentStreams.useQuery(streamsInput, {
-    enabled: streamsEnabled,
-  });
+  const { data: streamResults, error: streamsError } = clientApi.widget.mediaServer.getCurrentStreams.useQuery(
+    streamsInput,
+    { enabled: streamsEnabled },
+  );
   setWidgetRuntimeQueries(widgetStateRef, [
     getQueryKey(clientApi.widget.audioStats.getStats, statsInput, "query"),
     ...(streamsEnabled ? [getQueryKey(clientApi.widget.mediaServer.getCurrentStreams, streamsInput, "query")] : []),
   ]);
 
+  if (statsError && response === undefined) throw statsError;
+  if (streamsEnabled && streamsError && streamResults === undefined) throw streamsError;
+  const currentStreams = streamResults ?? [];
+  if (streamsEnabled && currentStreams.some(({ error }) => Boolean(error))) throw new NoIntegrationDataError();
   if (!response) return <WidgetEmptyState />;
 
   const summary = (
@@ -46,22 +51,17 @@ export default function AudioStatsWidget({
   );
   if (displayMode === "compact") return summary;
 
-  const sessions = streamResults.flatMap((result) =>
+  const sessions = currentStreams.flatMap((result) =>
     result.sessions.map((session) => ({ integrationId: result.integrationId, session })),
   );
-  const hasStreamFailures = streamResults.some(({ error }) => Boolean(error));
   const audiobookStats = response.kind === "audiobookshelf" ? (response.data as AudiobookshelfDashboardData) : null;
+  const advancedGridColumns = width >= 760 ? 2 : 1;
   return (
     <Stack h="100%" gap="lg" p="md">
-      {hasStreamFailures && (
-        <Group justify="flex-end">
-          <IntegrationErrorIndicator results={streamResults} />
-        </Group>
-      )}
       <div style={{ minHeight: 150 }}>{summary}</div>
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>
         {response.kind === "navidrome" ? (
-          <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="xs">
+          <SimpleGrid cols={advancedGridColumns} spacing="xs">
             {sessions.map(({ integrationId, session }) => {
               const currentlyPlaying = session.currentlyPlaying;
               if (!currentlyPlaying) return null;
@@ -75,13 +75,15 @@ export default function AudioStatsWidget({
                       {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user.username}
                     </Text>
                   </Stack>
-                  <Badge variant="light">{session.sessionName}</Badge>
+                  <Badge variant="light" style={{ flexShrink: 0 }}>
+                    {session.sessionName}
+                  </Badge>
                 </Group>
               );
             })}
           </SimpleGrid>
         ) : (
-          <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="xs">
+          <SimpleGrid cols={advancedGridColumns} spacing="xs">
             {(audiobookStats?.libraries ?? []).map((library) => (
               <Stack key={library.id} gap={2} p="sm">
                 <Group justify="space-between" wrap="nowrap">
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index 385d27205..94950135c 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -6,6 +6,7 @@ import { IconBinaryTree } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
+import { showErrorNotification } from "@homarr/notifications";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
 import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
@@ -29,18 +30,27 @@ export default function SmartHomeEntityStateWidget({
     entityId: options.entityId,
     integrationId,
   };
-  const { data: entity } = clientApi.widget.smartHome.entityDetails.useQuery(input);
+  const {
+    data: entity,
+    isPending: isEntityPending,
+    error: entityError,
+  } = clientApi.widget.smartHome.entityDetails.useQuery(input);
   const canInteract = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
 
   const utils = clientApi.useUtils();
   const { mutate, isPending, error } = clientApi.widget.smartHome.switchEntity.useMutation({
     onSettled: () => void utils.widget.smartHome.entityDetails.invalidate(input),
+    onError: () =>
+      showErrorNotification({
+        title: t("common.error"),
+        message: t("widget.smartHome-entityState.error.toggleFailed"),
+      }),
   });
 
   const apiUnit = entity?.attributes.unit_of_measurement;
   const unit = options.entityUnit || (typeof apiUnit === "string" ? apiUnit : "");
   const attribute = unit.length > 0 ? ` ${unit}` : "";
-  const isActionable = options.clickable && canInteract && !isPending;
+  const isActionable = options.clickable && canInteract && entity !== undefined && !isEntityPending && !isPending;
 
   const handleClick = useCallback(() => {
     if (isEditMode) {
@@ -77,6 +87,9 @@ export default function SmartHomeEntityStateWidget({
     ],
     [handleClick, isActionable, options.displayName, options.entityId],
   );
+
+  if (entityError && entity === undefined) throw entityError;
+
   const isTiny = width < 128 || height < 96;
   const advancedAttributes = [
     { key: "unit" as const, value: entity?.attributes.unit_of_measurement },
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 9eb6d8cdf..08d782df9 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -48,7 +48,11 @@ export function UmamiContent({
   const { colorScheme } = useMantineColorScheme();
   const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
 
-  const { data: results = [], isPending: isStatsPending } = clientApi.widget.umami.getVisitorStats.useQuery(
+  const {
+    data: results,
+    isPending: isStatsPending,
+    error: statsError,
+  } = clientApi.widget.umami.getVisitorStats.useQuery(
     { integrationIds, websiteId, timeFrame, eventName },
     umamiQueryOptions,
   );
@@ -68,7 +72,7 @@ export function UmamiContent({
     ? multiEventSeries.flatMap(({ dataPoints }) => dataPoints).reduce((sum, { y }) => sum + y, 0)
     : undefined;
 
-  const firstResult = results[0];
+  const firstResult = results?.[0];
   if (isStatsPending) {
     return (
       <Stack align="center" justify="center" h="100%">
@@ -78,6 +82,7 @@ export function UmamiContent({
       </Stack>
     );
   }
+  if (statsError && results === undefined) throw statsError;
   if (!firstResult) {
     return (
       <Stack align="center" justify="center" h="100%">

From 5010ecf1886155537b47740928c2fdb78facbcd7 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 17:34:52 +0200
Subject: [PATCH 21/75] fix: harden widget error feedback

---
 .../widgets/smart-home-entity-state/index.mdx    |  1 +
 packages/translation/src/lang/en.json            |  1 +
 packages/widgets/src/audio-stats/component.tsx   | 16 +++++++++++-----
 .../src/smart-home/entity-state/component.tsx    | 11 +++++++++--
 .../widgets/src/smart-home/entity-state/index.ts |  8 +++++++-
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/apps/docs/docs/widgets/smart-home-entity-state/index.mdx b/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
index 28c83d3aa..9cd6d19a8 100644
--- a/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
+++ b/apps/docs/docs/widgets/smart-home-entity-state/index.mdx
@@ -45,6 +45,7 @@ import temperature from "./img/temperature.png";
 ### Interactions
 
 - Toggle entity state by clicking on the entity (only when clickable enabled).
+- If Homarr cannot refresh an entity, the last known state stays visible but toggling is disabled until the connection recovers.
 
 <WidgetInteractionGuide />
 
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 6012f83fb..e7e7e407a 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2185,6 +2185,7 @@
         }
       },
       "error": {
+        "loadFailed": "Unable to load entity",
         "toggleFailed": "Unable to update entity"
       }
     },
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index eb9adb1a5..2fdb6484e 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
 import { getQueryKey } from "@trpc/react-query";
 
 import { clientApi } from "@homarr/api/client";
@@ -67,7 +67,7 @@ export default function AudioStatsWidget({
               if (!currentlyPlaying) return null;
               return (
                 <Group key={`${integrationId}:${session.sessionId}`} justify="space-between" wrap="nowrap" p="sm">
-                  <Stack gap={0} style={{ minWidth: 0 }}>
+                  <Stack gap={0} style={{ minWidth: 0, flex: 1 }}>
                     <Text size="sm" fw={600} truncate>
                       {currentlyPlaying.name}
                     </Text>
@@ -75,9 +75,15 @@ export default function AudioStatsWidget({
                       {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user.username}
                     </Text>
                   </Stack>
-                  <Badge variant="light" style={{ flexShrink: 0 }}>
-                    {session.sessionName}
-                  </Badge>
+                  <Tooltip
+                    label={session.sessionName}
+                    events={{ hover: true, focus: true, touch: true }}
+                    position="left"
+                  >
+                    <Badge variant="light" maw="40%" style={{ flexShrink: 0 }} tabIndex={0}>
+                      {session.sessionName}
+                    </Badge>
+                  </Tooltip>
                 </Group>
               );
             })}
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index 94950135c..e3f776f66 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -50,7 +50,9 @@ export default function SmartHomeEntityStateWidget({
   const apiUnit = entity?.attributes.unit_of_measurement;
   const unit = options.entityUnit || (typeof apiUnit === "string" ? apiUnit : "");
   const attribute = unit.length > 0 ? ` ${unit}` : "";
-  const isActionable = options.clickable && canInteract && entity !== undefined && !isEntityPending && !isPending;
+  const isActionable =
+    options.clickable && canInteract && entity !== undefined && !entityError && !isEntityPending && !isPending;
+  const queryErrorLabel = entityError ? t("widget.smartHome-entityState.error.loadFailed") : undefined;
 
   const handleClick = useCallback(() => {
     if (isEditMode) {
@@ -108,7 +110,7 @@ export default function SmartHomeEntityStateWidget({
       onClick={handleClick}
       disabled={!isActionable}
       aria-label={`${displayName}: ${state}${attribute}`}
-      aria-description={error?.message}
+      aria-description={queryErrorLabel ?? (error ? t("widget.smartHome-entityState.error.toggleFailed") : undefined)}
       w="100%"
       h="100%"
       styles={{
@@ -127,6 +129,11 @@ export default function SmartHomeEntityStateWidget({
           <Text ta="center" c="dimmed" fw={500} size={isTiny ? "xs" : "sm"} lineClamp={2} maw="100%">
             {displayName}
           </Text>
+          {queryErrorLabel && (
+            <Text size="xs" c="orange" ta="center" lineClamp={1} maw="100%" aria-live="polite">
+              {queryErrorLabel}
+            </Text>
+          )}
           {displayMode === "advanced" && entity && (
             <>
               <Group justify="center" gap={4}>
diff --git a/packages/widgets/src/smart-home/entity-state/index.ts b/packages/widgets/src/smart-home/entity-state/index.ts
index 649116bce..93a12a872 100644
--- a/packages/widgets/src/smart-home/entity-state/index.ts
+++ b/packages/widgets/src/smart-home/entity-state/index.ts
@@ -1,4 +1,4 @@
-import { IconBinaryTree } from "@tabler/icons-react";
+import { IconBinaryTree, IconServerOff } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
@@ -22,4 +22,10 @@ export const { definition, componentLoader } = createWidgetDefinition("smartHome
     }));
   },
   supportedIntegrations: getIntegrationKindsByCategory("smartHomeServer"),
+  errors: {
+    INTERNAL_SERVER_ERROR: {
+      icon: IconServerOff,
+      message: (t) => t("widget.smartHome-entityState.error.loadFailed"),
+    },
+  },
 }).withDynamicImport(() => import("./component"));

From fd024e32d2343365be48bdd6a054fd13814fe756 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 17:39:28 +0200
Subject: [PATCH 22/75] fix: simplify widget feedback

---
 packages/widgets/src/audio-stats/component.tsx     | 14 ++++----------
 .../src/smart-home/entity-state/component.tsx      | 13 +++----------
 2 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 2fdb6484e..e3b447ab9 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
+import { Badge, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { getQueryKey } from "@trpc/react-query";
 
 import { clientApi } from "@homarr/api/client";
@@ -75,15 +75,9 @@ export default function AudioStatsWidget({
                       {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user.username}
                     </Text>
                   </Stack>
-                  <Tooltip
-                    label={session.sessionName}
-                    events={{ hover: true, focus: true, touch: true }}
-                    position="left"
-                  >
-                    <Badge variant="light" maw="40%" style={{ flexShrink: 0 }} tabIndex={0}>
-                      {session.sessionName}
-                    </Badge>
-                  </Tooltip>
+                  <Badge variant="light" maw="40%" style={{ flexShrink: 0 }} title={session.sessionName}>
+                    {session.sessionName}
+                  </Badge>
                 </Group>
               );
             })}
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index e3f776f66..179ab3c3e 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback } from "react";
-import { Badge, Center, Group, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
+import { Badge, Center, Group, Stack, Text, UnstyledButton } from "@mantine/core";
 import { IconBinaryTree } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -38,7 +38,7 @@ export default function SmartHomeEntityStateWidget({
   const canInteract = useIntegrationsWithInteractAccess().some(({ id }) => id === integrationId);
 
   const utils = clientApi.useUtils();
-  const { mutate, isPending, error } = clientApi.widget.smartHome.switchEntity.useMutation({
+  const { mutate, isPending } = clientApi.widget.smartHome.switchEntity.useMutation({
     onSettled: () => void utils.widget.smartHome.entityDetails.invalidate(input),
     onError: () =>
       showErrorNotification({
@@ -110,7 +110,7 @@ export default function SmartHomeEntityStateWidget({
       onClick={handleClick}
       disabled={!isActionable}
       aria-label={`${displayName}: ${state}${attribute}`}
-      aria-description={queryErrorLabel ?? (error ? t("widget.smartHome-entityState.error.toggleFailed") : undefined)}
+      aria-description={queryErrorLabel}
       w="100%"
       h="100%"
       styles={{
@@ -153,13 +153,6 @@ export default function SmartHomeEntityStateWidget({
               </Text>
             </>
           )}
-          {error && (
-            <Tooltip label={error.message} multiline>
-              <Text size="xs" c="red" lineClamp={2} tabIndex={0}>
-                {t("widget.smartHome-entityState.error.toggleFailed")}
-              </Text>
-            </Tooltip>
-          )}
         </Stack>
       </Center>
     </UnstyledButton>

From f9aae23f4690c1723913d3e6037eed7a7c090124 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 17:41:27 +0200
Subject: [PATCH 23/75] fix: keep session labels readable

---
 packages/widgets/src/audio-stats/component.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index e3b447ab9..08127b39e 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -75,7 +75,14 @@ export default function AudioStatsWidget({
                       {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user.username}
                     </Text>
                   </Stack>
-                  <Badge variant="light" maw="40%" style={{ flexShrink: 0 }} title={session.sessionName}>
+                  <Badge
+                    variant="light"
+                    maw="40%"
+                    h="auto"
+                    py={4}
+                    style={{ flexShrink: 0 }}
+                    styles={{ label: { whiteSpace: "normal", overflowWrap: "anywhere", lineHeight: 1.2 } }}
+                  >
                     {session.sessionName}
                   </Badge>
                 </Group>

From 96e92485a5fd45f3648cfac0453e614779c414ba Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 2 Aug 2026 18:07:21 +0200
Subject: [PATCH 24/75] fix: align responsive widget actions

---
 .../src/smart-home/entity-state/component.tsx | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index 179ab3c3e..38ea95bbb 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -8,7 +8,7 @@ import { clientApi } from "@homarr/api/client";
 import { useIntegrationsWithInteractAccess } from "@homarr/auth/client";
 import { showErrorNotification } from "@homarr/notifications";
 import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
-import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
 
@@ -20,7 +20,8 @@ export default function SmartHomeEntityStateWidget({
   height,
   displayMode,
 }: WidgetComponentProps<"smartHome-entityState">) {
-  const t = useI18n();
+  const t = useScopedI18n("widget.smartHome-entityState");
+  const tCommon = useScopedI18n("common");
   const locale = useCurrentIntlLocale();
   // It will always have at least one integration as otherwise the NoIntegrationSelectedError would be thrown in item-content.tsx
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -42,8 +43,8 @@ export default function SmartHomeEntityStateWidget({
     onSettled: () => void utils.widget.smartHome.entityDetails.invalidate(input),
     onError: () =>
       showErrorNotification({
-        title: t("common.error"),
-        message: t("widget.smartHome-entityState.error.toggleFailed"),
+        title: tCommon("error"),
+        message: t("error.toggleFailed"),
       }),
   });
 
@@ -51,14 +52,16 @@ export default function SmartHomeEntityStateWidget({
   const unit = options.entityUnit || (typeof apiUnit === "string" ? apiUnit : "");
   const attribute = unit.length > 0 ? ` ${unit}` : "";
   const isActionable =
-    options.clickable && canInteract && entity !== undefined && !entityError && !isEntityPending && !isPending;
-  const queryErrorLabel = entityError ? t("widget.smartHome-entityState.error.loadFailed") : undefined;
+    !isEditMode &&
+    options.clickable &&
+    canInteract &&
+    entity !== undefined &&
+    !entityError &&
+    !isEntityPending &&
+    !isPending;
+  const queryErrorLabel = entityError ? t("error.loadFailed") : undefined;
 
   const handleClick = useCallback(() => {
-    if (isEditMode) {
-      return;
-    }
-
     if (!isActionable) {
       return;
     }
@@ -67,7 +70,7 @@ export default function SmartHomeEntityStateWidget({
       entityId: options.entityId,
       integrationId,
     });
-  }, [integrationId, isActionable, isEditMode, mutate, options.entityId]);
+  }, [integrationId, isActionable, mutate, options.entityId]);
 
   useRegisterSpotlightContextActions(
     `smartHome-entityState-${options.entityId}`,
@@ -115,7 +118,7 @@ export default function SmartHomeEntityStateWidget({
       h="100%"
       styles={{
         root: {
-          cursor: isActionable && !isEditMode ? "pointer" : "initial",
+          cursor: isActionable ? "pointer" : "initial",
           pointerEvents: isEditMode ? "none" : undefined,
         },
       }}
@@ -139,15 +142,15 @@ export default function SmartHomeEntityStateWidget({
               <Group justify="center" gap={4}>
                 {advancedAttributes.map(({ key, value }) => (
                   <Badge key={key} size="xs" variant="light" tt="none">
-                    {t(`widget.smartHome-entityState.advanced.attribute.${key}`)}: {String(value)}
+                    {t(`advanced.attribute.${key}`)}: {String(value)}
                   </Badge>
                 ))}
               </Group>
               <Text size="xs" c="dimmed">
-                {t("widget.smartHome-entityState.advanced.entityId", { id: entity.entity_id })}
+                {t("advanced.entityId", { id: entity.entity_id })}
               </Text>
               <Text size="xs" c="dimmed">
-                {t("widget.smartHome-entityState.advanced.lastUpdated", {
+                {t("advanced.lastUpdated", {
                   date: new Date(entity.last_updated).toLocaleString(locale),
                 })}
               </Text>

From 09e9cd438820edb59e63374cd9223c6c089a3618 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 12:15:12 +0200
Subject: [PATCH 25/75] fix widget focus interactions

---
 .../docs/widgets/beszel-system-grid/index.mdx |  4 ---
 .../widgets/beszel-system-table/index.mdx     |  8 ++---
 apps/docs/docs/widgets/media-server/index.mdx |  1 +
 .../advanced-focus/advanced-focus.module.css  |  2 +-
 .../board/advanced-focus/context.tsx          |  2 +-
 .../components/board/advanced-focus/wheel.ts  | 30 +++++++++++++++++++
 .../components/board/items/item-content.tsx   | 23 ++++++++++++--
 .../board/items/widget-context-menu.tsx       |  4 ++-
 e2e/board-advanced-interactions.spec.ts       | 12 ++++++++
 .../media-server/media-server-types.ts        |  2 +-
 packages/translation/src/lang/en.json         |  1 +
 packages/widgets/src/app/index.ts             |  1 +
 .../widgets/src/audio-stats/component.tsx     |  2 +-
 .../widgets/src/beszel-system-grid/index.ts   |  1 +
 .../widgets/src/beszel-system-table/index.ts  |  1 +
 .../widgets/src/beszel/_shared/disk-usage.tsx |  3 +-
 .../widgets/src/beszel/_shared/tooltip.tsx    |  9 +++---
 packages/widgets/src/definition.spec.ts       | 29 +++++++++++++++++-
 packages/widgets/src/definition.ts            |  3 ++
 packages/widgets/src/index.tsx                |  1 +
 .../widgets/src/media-server/component.tsx    |  8 ++---
 21 files changed, 119 insertions(+), 28 deletions(-)
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/wheel.ts

diff --git a/apps/docs/docs/widgets/beszel-system-grid/index.mdx b/apps/docs/docs/widgets/beszel-system-grid/index.mdx
index fd4232524..993974914 100644
--- a/apps/docs/docs/widgets/beszel-system-grid/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-grid/index.mdx
@@ -4,8 +4,6 @@ description: "Card grid view of all Beszel-monitored systems with real-time metr
 hide_title: true
 ---
 
-import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
-
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -36,8 +34,6 @@ Select a system card to open the complete statistics view, including system, fil
   ]}
 />
 
-<WidgetInteractionGuide />
-
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/beszel-system-table/index.mdx b/apps/docs/docs/widgets/beszel-system-table/index.mdx
index dafd02004..b09edf530 100644
--- a/apps/docs/docs/widgets/beszel-system-table/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-table/index.mdx
@@ -4,8 +4,6 @@ description: "Table view of all Beszel-monitored systems with sortable columns a
 hide_title: true
 ---
 
-import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
-
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -17,14 +15,14 @@ import { beszelIntegration } from "@site/docs/integrations/beszel";
 
 This widget displays all your Beszel-monitored systems in a sortable data table. Each row shows system metrics like CPU, memory, disk, network, temperature, and more. Columns can be toggled on or off, dragged into a different order, and resized from their headers. Column order and widths are saved automatically for each widget. When Beszel reports extra filesystems, the disk column adds a hover breakdown for each mount alongside the root disk.
 
-In compact mode, select a system row to open the complete statistics view. In advanced mode, selecting a row focuses an inline one-hour view with system, filesystem, network, and Docker charts.
+Select a system row to open the complete statistics view.
 
 ### Interactions
 
 - **Reorder columns** by hovering a header to reveal its grab handle, then dragging it
 - **Resize columns** by dragging a header's right edge
 - **Sort systems** by selecting a sortable column header
-- **Open or focus system statistics** by selecting a row, depending on the display mode
+- **Open system statistics** by selecting a row
 
 ### Supported Integrations
 
@@ -37,8 +35,6 @@ In compact mode, select a system row to open the complete statistics view. In ad
   ]}
 />
 
-<WidgetInteractionGuide />
-
 ### Adding the widget
 
 <AddingWidget />
diff --git a/apps/docs/docs/widgets/media-server/index.mdx b/apps/docs/docs/widgets/media-server/index.mdx
index 3749cd6ae..d0acb93b2 100644
--- a/apps/docs/docs/widgets/media-server/index.mdx
+++ b/apps/docs/docs/widgets/media-server/index.mdx
@@ -26,6 +26,7 @@ It shows playback progress, pause state, time remaining, and whether each sessio
 
 Select a session to inspect its media metadata. Advanced mode adds search, sorting, and a summary of playing and transcoding sessions while keeping separate integration instances identifiable.
 If one selected server is unavailable, a warning indicator identifies the degraded result while sessions from healthy servers remain usable.
+Sessions without user metadata remain visible and are labeled as an unknown user.
 
 ### Screenshots
 
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index 60cc31954..c108d72c8 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -35,7 +35,7 @@
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--mantine-z-index-modal) - 1);
+  z-index: calc(var(--mantine-z-index-popover) - 1);
   width: auto;
   height: auto;
   pointer-events: none;
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 3f38bdc44..4a5935efe 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -201,7 +201,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
             data-advanced-focus-overlay
             backgroundOpacity={0.38}
             blur={0}
-            zIndex="calc(var(--mantine-z-index-modal) - 2)"
+            zIndex="calc(var(--mantine-z-index-popover) - 2)"
             className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
             aria-hidden
           />
diff --git a/apps/nextjs/src/components/board/advanced-focus/wheel.ts b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
new file mode 100644
index 000000000..4cf5bc36d
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
@@ -0,0 +1,30 @@
+const canScrollVertically = (element: HTMLElement, delta: number) => {
+  if (element.scrollHeight <= element.clientHeight) return false;
+
+  const overflowY = getComputedStyle(element).overflowY;
+  if (overflowY !== "auto" && overflowY !== "scroll") return false;
+
+  return delta < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight;
+};
+
+export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null, delta: number) => {
+  if (delta === 0) return false;
+
+  let current = target instanceof HTMLElement ? target : null;
+  while (current && root.contains(current)) {
+    if (canScrollVertically(current, delta)) {
+      current.scrollTop += delta;
+      return true;
+    }
+    if (current === root) break;
+    current = current.parentElement;
+  }
+
+  const viewport = [...root.querySelectorAll<HTMLElement>("[data-scrollbars='y'], [data-scrollbars='xy']")].find(
+    (element) => canScrollVertically(element, delta),
+  );
+  if (!viewport) return false;
+
+  viewport.scrollTop += delta;
+  return true;
+};
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index a572cdbad..0eb52868d 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, KeyboardEvent, MutableRefObject } from "react";
+import type { CSSProperties, KeyboardEvent, MutableRefObject, WheelEvent } from "react";
 import { useEffect, useRef } from "react";
 import { ActionIcon, Badge, Box, Card } from "@mantine/core";
 import { useElementSize, useViewportSize } from "@mantine/hooks";
@@ -12,13 +12,20 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
-import { loadWidgetDynamic, reduceWidgetOptionsWithDefaultValues, widgetImports } from "@homarr/widgets";
+import type { WidgetDefinition } from "@homarr/widgets";
+import {
+  loadWidgetDynamic,
+  reduceWidgetOptionsWithDefaultValues,
+  supportsAdvancedFocus as definitionSupportsAdvancedFocus,
+  widgetImports,
+} from "@homarr/widgets";
 import { WidgetError } from "@homarr/widgets/errors";
 
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
 import { useAdvancedFocus } from "../advanced-focus/context";
 import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "../advanced-focus/geometry";
+import { redirectShiftWheel } from "../advanced-focus/wheel";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
 import itemContentClasses from "./item-content.module.css";
@@ -48,7 +55,9 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   const widgetStateRef = useRef<Record<string, unknown> | null>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
   const { active, open, close, dismiss, hover, leave } = useAdvancedFocus();
-  const supportsAdvancedFocus = item.kind !== "app";
+  const supportsAdvancedFocus = definitionSupportsAdvancedFocus(
+    widgetImports[item.kind].definition as WidgetDefinition,
+  );
   const advancedViewId = `advanced-focus-${item.id}`;
   const activeFocus = supportsAdvancedFocus && active?.itemId === item.id ? active : null;
   const isAdvanced = activeFocus !== null;
@@ -81,6 +90,12 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
     event.preventDefault();
     openAdvanced(true);
   };
+  const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
+    if (!isAdvanced || !event.shiftKey) return;
+    const delta = event.deltaY || event.deltaX;
+    if (!redirectShiftWheel(event.currentTarget, event.target, delta)) return;
+    event.preventDefault();
+  };
 
   return (
     <>
@@ -128,6 +143,8 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
               id={isAdvanced ? advancedViewId : undefined}
               role={isAdvanced ? "region" : undefined}
               aria-label={isAdvanced ? advancedViewLabel : undefined}
+              data-advanced-focus-surface={isAdvanced || undefined}
+              onWheel={handleWheel}
               radius={board.itemRadius}
               p={isAdvanced ? undefined : 0}
               h={isAdvanced ? undefined : "100%"}
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index 24b6f0103..2619371d2 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -33,6 +33,7 @@ import {
   getWidgetQueryKeys,
   getWidgetRuntimeQueries,
   reduceWidgetOptionsWithDefaultValues,
+  supportsAdvancedFocus,
   widgetImports,
 } from "@homarr/widgets";
 import { WidgetEditModal } from "@homarr/widgets/modals";
@@ -70,6 +71,7 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
     useItemActions();
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
   const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
+  const canOpenAdvancedFocus = supportsAdvancedFocus(currentDefinition as WidgetDefinition);
   const { gridstack } = useSectionContext().refs;
   const queryClient = useQueryClient();
   const { open: openAdvancedFocus } = useAdvancedFocus();
@@ -250,7 +252,7 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
     >
       <Menu.ContextMenu>{children}</Menu.ContextMenu>
       <Menu.Dropdown>
-        {item.kind !== "app" && (
+        {canOpenAdvancedFocus && (
           <>
             <Menu.Item
               closeMenuOnClick
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index eabb0a33f..2a2a32303 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -115,6 +115,18 @@ describe("Board advanced interactions", () => {
       await expect(page.getByRole("button", { name: /advanced view is pinned|keep advanced view open/i })).toHaveCount(
         0,
       );
+      await advancedSurface.evaluate((element) => {
+        const probe = document.createElement("div");
+        probe.dataset.shiftScrollProbe = "true";
+        probe.style.cssText = "height:80px;overflow-y:auto";
+        probe.innerHTML = '<div style="height:600px"></div>';
+        element.append(probe);
+      });
+      const scrollProbe = advancedSurface.locator("[data-shift-scroll-probe]");
+      await page.keyboard.down("Shift");
+      await scrollProbe.dispatchEvent("wheel", { shiftKey: true, deltaX: 120, deltaY: 0 });
+      await page.keyboard.up("Shift");
+      expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
       await page.keyboard.press("Escape");
       await expect(advancedSurface).toBeHidden();
       await expect(widget).toBeFocused();
diff --git a/packages/integrations/src/interfaces/media-server/media-server-types.ts b/packages/integrations/src/interfaces/media-server/media-server-types.ts
index c9a287155..42b6f0615 100644
--- a/packages/integrations/src/interfaces/media-server/media-server-types.ts
+++ b/packages/integrations/src/interfaces/media-server/media-server-types.ts
@@ -1,7 +1,7 @@
 export interface StreamSession {
   sessionId: string;
   sessionName: string;
-  user: {
+  user?: {
     userId: string;
     username: string;
     profilePictureUrl: string | null;
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index e7e7e407a..f019eab5f 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -2891,6 +2891,7 @@
       "items": {
         "currentlyPlaying": "Currently playing",
         "user": "User",
+        "unknownUser": "Unknown user",
         "name": "Name",
         "id": "Id",
         "status": "Status",
diff --git a/packages/widgets/src/app/index.ts b/packages/widgets/src/app/index.ts
index 2b03f0e99..7b8416ca9 100644
--- a/packages/widgets/src/app/index.ts
+++ b/packages/widgets/src/app/index.ts
@@ -15,6 +15,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("app", {
   icon: IconApps,
+  supportsAdvancedFocus: false,
   queryKeys: [[["app", "byId"]], [["widget", "app", "ping"]]],
   createOptions(settings) {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 08127b39e..1c6266b8e 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -72,7 +72,7 @@ export default function AudioStatsWidget({
                       {currentlyPlaying.name}
                     </Text>
                     <Text size="xs" c="dimmed" truncate>
-                      {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user.username}
+                      {currentlyPlaying.seasonName ?? currentlyPlaying.albumName ?? session.user?.username ?? "—"}
                     </Text>
                   </Stack>
                   <Badge
diff --git a/packages/widgets/src/beszel-system-grid/index.ts b/packages/widgets/src/beszel-system-grid/index.ts
index 9a5444e28..b3ef14806 100644
--- a/packages/widgets/src/beszel-system-grid/index.ts
+++ b/packages/widgets/src/beszel-system-grid/index.ts
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemGrid", {
   icon: IconLayoutGrid,
+  supportsAdvancedFocus: false,
   queryKey: [["widget", "beszel", "getSystems"]],
   supportedIntegrations: ["beszel", "mock"],
   integrationsRequired: true,
diff --git a/packages/widgets/src/beszel-system-table/index.ts b/packages/widgets/src/beszel-system-table/index.ts
index 76fb0264f..4007bebc0 100644
--- a/packages/widgets/src/beszel-system-table/index.ts
+++ b/packages/widgets/src/beszel-system-table/index.ts
@@ -25,6 +25,7 @@ const sortDirectionOptions = [
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemTable", {
   icon: IconTable,
+  supportsAdvancedFocus: false,
   queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
   queryMatcher: (query, scope) =>
     query.path.at(-1) === "getSystems"
diff --git a/packages/widgets/src/beszel/_shared/disk-usage.tsx b/packages/widgets/src/beszel/_shared/disk-usage.tsx
index 9aa2a14ad..826d5c3c8 100644
--- a/packages/widgets/src/beszel/_shared/disk-usage.tsx
+++ b/packages/widgets/src/beszel/_shared/disk-usage.tsx
@@ -1,4 +1,4 @@
-import { Box, Group, HoverCard, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Box, getDefaultZIndex, Group, HoverCard, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
 
 import type { BeszelSystemRow } from "./types";
 import { thresholdColor } from "./colors";
@@ -28,6 +28,7 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap =
         {formatPercent(system.disk)}
       </Text>
       <HoverCard
+        zIndex={getDefaultZIndex("popover") - 3}
         position="right"
         withArrow
         shadow="md"
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index 0571aafeb..1e29dccb2 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -61,7 +61,7 @@ const TOOLTIP_Z_INDEX = getDefaultZIndex("modal");
 
 const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }: PortalTooltipProps) => {
   const mouseRef = useRef({ x: 0, y: 0 });
-  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [pos, setPos] = useState({ x: 0, y: 0, isAdvanced: false });
   const rafRef = useRef(0);
   const tooltipRef = useRef<HTMLDivElement>(null);
 
@@ -72,9 +72,10 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
       const el = tooltipRef.current;
       const mx = mouseRef.current.x;
       const my = mouseRef.current.y;
+      const isAdvanced = Boolean(document.elementFromPoint(mx, my)?.closest("[data-advanced-focus-surface]"));
 
       if (!el) {
-        setPos({ x: mx + MARGIN, y: my });
+        setPos({ x: mx + MARGIN, y: my, isAdvanced });
         return;
       }
 
@@ -89,7 +90,7 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
       if (y < MARGIN) y = MARGIN;
       if (y + height > vh - MARGIN) y = vh - MARGIN - height;
 
-      setPos({ x, y });
+      setPos({ x, y, isAdvanced });
     });
   }, []);
 
@@ -122,7 +123,7 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
     position: "fixed",
     left: pos.x,
     top: pos.y,
-    zIndex: TOOLTIP_Z_INDEX,
+    zIndex: pos.isAdvanced ? getDefaultZIndex("popover") : TOOLTIP_Z_INDEX,
     pointerEvents: "none",
   };
 
diff --git a/packages/widgets/src/definition.spec.ts b/packages/widgets/src/definition.spec.ts
index 59810c9c4..94089b161 100644
--- a/packages/widgets/src/definition.spec.ts
+++ b/packages/widgets/src/definition.spec.ts
@@ -3,7 +3,15 @@ import { getQueryKey } from "@trpc/react-query";
 
 import { clientApi } from "@homarr/api/client";
 
-import { getWidgetQueryKeys, getWidgetRuntimeQueries, setWidgetRuntimeQueries } from "./definition";
+import { definition as appDefinition } from "./app";
+import { definition as beszelSystemGridDefinition } from "./beszel-system-grid";
+import { definition as beszelSystemTableDefinition } from "./beszel-system-table";
+import {
+  getWidgetQueryKeys,
+  getWidgetRuntimeQueries,
+  setWidgetRuntimeQueries,
+  supportsAdvancedFocus,
+} from "./definition";
 
 const togglePolling = () => undefined;
 
@@ -36,3 +44,22 @@ describe("getWidgetQueryKeys", () => {
     expect(getWidgetRuntimeQueries(widgetStateRef)).toEqual([{ path: ["widget", "calendar", "findAllEvents"], input }]);
   });
 });
+
+describe("supportsAdvancedFocus", () => {
+  const definition = { supportsAdvancedFocus: undefined } as Parameters<typeof supportsAdvancedFocus>[0];
+
+  test("defaults to enabled", () => {
+    expect(supportsAdvancedFocus(definition)).toBe(true);
+  });
+
+  test("allows widgets to opt out", () => {
+    expect(supportsAdvancedFocus({ ...definition, supportsAdvancedFocus: false })).toBe(false);
+  });
+
+  test.each([appDefinition, beszelSystemGridDefinition, beszelSystemTableDefinition])(
+    "keeps non-enhanced widgets compact",
+    (widgetDefinition) => {
+      expect(supportsAdvancedFocus(widgetDefinition)).toBe(false);
+    },
+  );
+});
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index f2c432f29..2153efda5 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -86,6 +86,7 @@ export const createWidgetDefinition = <TKind extends WidgetKind, TDefinition ext
 
 export interface WidgetDefinition {
   icon: TablerIcon;
+  supportsAdvancedFocus?: boolean;
   queryKey?: QueryKey;
   queryKeys?: readonly QueryKey[];
   queryMatcher?: WidgetQueryMatcher;
@@ -109,6 +110,8 @@ export interface WidgetDefinition {
   contextActions?: (props: Omit<WidgetContextActionProps<WidgetKind>, "kind">) => WidgetContextMenuAction[];
 }
 
+export const supportsAdvancedFocus = (definition: WidgetDefinition) => definition.supportsAdvancedFocus !== false;
+
 export const getWidgetQueryKeys = (definition: {
   kind: string;
   queryKey?: QueryKey;
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index dd870cf22..6b420f413 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -78,6 +78,7 @@ export {
   getWidgetQueryKeys,
   getWidgetRuntimeQueries,
   normalizeWidgetQuery,
+  supportsAdvancedFocus,
   widgetQueryValueEquals,
 } from "./definition";
 export type { WidgetComponentProps };
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index 862376d1b..2d9697aeb 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -81,10 +81,10 @@ export default function MediaServerWidget({
 
               Cell: ({ row }) => (
                 <Group gap="xs" wrap="nowrap">
-                  <Avatar size={28} src={row.original.user.profilePictureUrl} />
+                  <Avatar size={28} src={row.original.user?.profilePictureUrl} />
                   <Stack gap={0} style={{ minWidth: 0 }}>
                     <Text size="xs" style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                      {row.original.user.username}
+                      {row.original.user?.username ?? t("items.unknownUser")}
                     </Text>
                     <Text
                       size="10px"
@@ -415,8 +415,8 @@ const ItemInfoModal = createModal<{ item: StreamSession }>(({ innerProps }) => {
         itemKey={t("user")}
         value={
           <Group gap="sm" align="center">
-            <Avatar size="sm" src={innerProps.item.user.profilePictureUrl} />{" "}
-            <Text>{innerProps.item.user.username}</Text>
+            <Avatar size="sm" src={innerProps.item.user?.profilePictureUrl} />{" "}
+            <Text>{innerProps.item.user?.username ?? t("unknownUser")}</Text>
           </Group>
         }
       />

From a2f5668c44e49074a0c07b4a9f27a042b617ced5 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 12:21:31 +0200
Subject: [PATCH 26/75] fix focus scroll layering

---
 .../advanced-focus/advanced-focus.module.css  |  2 +-
 .../board/advanced-focus/context.tsx          |  2 +-
 .../components/board/items/item-content.tsx   | 27 +++++++++++++------
 e2e/board-advanced-interactions.spec.ts       | 21 +++++++++++++--
 .../media-server/media-server-types.ts        |  2 +-
 .../widgets/src/beszel/_shared/disk-usage.tsx |  2 +-
 .../widgets/src/beszel/_shared/tooltip.tsx    |  4 +--
 packages/widgets/src/definition.spec.ts       | 10 -------
 8 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index c108d72c8..60cc31954 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -35,7 +35,7 @@
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--mantine-z-index-popover) - 1);
+  z-index: calc(var(--mantine-z-index-modal) - 1);
   width: auto;
   height: auto;
   pointer-events: none;
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 4a5935efe..3f38bdc44 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -201,7 +201,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
             data-advanced-focus-overlay
             backgroundOpacity={0.38}
             blur={0}
-            zIndex="calc(var(--mantine-z-index-popover) - 2)"
+            zIndex="calc(var(--mantine-z-index-modal) - 2)"
             className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
             aria-hidden
           />
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 0eb52868d..32e71fe0a 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, KeyboardEvent, MutableRefObject, WheelEvent } from "react";
+import type { CSSProperties, KeyboardEvent, MutableRefObject } from "react";
 import { useEffect, useRef } from "react";
 import { ActionIcon, Badge, Box, Card } from "@mantine/core";
 import { useElementSize, useViewportSize } from "@mantine/hooks";
@@ -54,6 +54,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   const [isEditMode] = useEditMode();
   const widgetStateRef = useRef<Record<string, unknown> | null>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
+  const surfaceRef = useRef<HTMLDivElement>(null);
   const { active, open, close, dismiss, hover, leave } = useAdvancedFocus();
   const supportsAdvancedFocus = definitionSupportsAdvancedFocus(
     widgetImports[item.kind].definition as WidgetDefinition,
@@ -90,12 +91,22 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
     event.preventDefault();
     openAdvanced(true);
   };
-  const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
-    if (!isAdvanced || !event.shiftKey) return;
-    const delta = event.deltaY || event.deltaX;
-    if (!redirectShiftWheel(event.currentTarget, event.target, delta)) return;
-    event.preventDefault();
-  };
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    if (!isAdvanced || !surface) return;
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!event.shiftKey) return;
+      const multiplier = event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? surface.clientHeight : 1;
+      const delta = (event.deltaY || event.deltaX) * multiplier;
+      if (!redirectShiftWheel(surface, event.target, delta)) return;
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    surface.addEventListener("wheel", handleWheel, { capture: true, passive: false });
+    return () => surface.removeEventListener("wheel", handleWheel, { capture: true });
+  }, [isAdvanced]);
 
   return (
     <>
@@ -140,11 +151,11 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
               </ActionIcon>
             )}
             <Card
+              ref={surfaceRef}
               id={isAdvanced ? advancedViewId : undefined}
               role={isAdvanced ? "region" : undefined}
               aria-label={isAdvanced ? advancedViewLabel : undefined}
               data-advanced-focus-surface={isAdvanced || undefined}
-              onWheel={handleWheel}
               radius={board.itemRadius}
               p={isAdvanced ? undefined : 0}
               h={isAdvanced ? undefined : "100%"}
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 2a2a32303..17f07f5cd 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -120,13 +120,30 @@ describe("Board advanced interactions", () => {
         probe.dataset.shiftScrollProbe = "true";
         probe.style.cssText = "height:80px;overflow-y:auto";
         probe.innerHTML = '<div style="height:600px"></div>';
+        probe.addEventListener("wheel", (event) => event.stopPropagation());
         element.append(probe);
       });
       const scrollProbe = advancedSurface.locator("[data-shift-scroll-probe]");
       await page.keyboard.down("Shift");
-      await scrollProbe.dispatchEvent("wheel", { shiftKey: true, deltaX: 120, deltaY: 0 });
+      const pixelEventCancelled = await scrollProbe.evaluate(
+        (element) =>
+          !element.dispatchEvent(
+            new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 120 }),
+          ),
+      );
+      expect(pixelEventCancelled).toBe(true);
+      await scrollProbe.evaluate((element) => {
+        element.scrollTop = 0;
+      });
+      const lineEventCancelled = await scrollProbe.evaluate(
+        (element) =>
+          !element.dispatchEvent(
+            new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 3, deltaMode: 1 }),
+          ),
+      );
       await page.keyboard.up("Shift");
-      expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
+      expect(lineEventCancelled).toBe(true);
+      expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThanOrEqual(48);
       await page.keyboard.press("Escape");
       await expect(advancedSurface).toBeHidden();
       await expect(widget).toBeFocused();
diff --git a/packages/integrations/src/interfaces/media-server/media-server-types.ts b/packages/integrations/src/interfaces/media-server/media-server-types.ts
index 42b6f0615..c9a287155 100644
--- a/packages/integrations/src/interfaces/media-server/media-server-types.ts
+++ b/packages/integrations/src/interfaces/media-server/media-server-types.ts
@@ -1,7 +1,7 @@
 export interface StreamSession {
   sessionId: string;
   sessionName: string;
-  user?: {
+  user: {
     userId: string;
     username: string;
     profilePictureUrl: string | null;
diff --git a/packages/widgets/src/beszel/_shared/disk-usage.tsx b/packages/widgets/src/beszel/_shared/disk-usage.tsx
index 826d5c3c8..934981daf 100644
--- a/packages/widgets/src/beszel/_shared/disk-usage.tsx
+++ b/packages/widgets/src/beszel/_shared/disk-usage.tsx
@@ -28,7 +28,7 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap =
         {formatPercent(system.disk)}
       </Text>
       <HoverCard
-        zIndex={getDefaultZIndex("popover") - 3}
+        zIndex={getDefaultZIndex("modal") - 3}
         position="right"
         withArrow
         shadow="md"
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index 1e29dccb2..c40ffbee3 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -57,7 +57,7 @@ interface PortalTooltipProps {
 }
 
 const MARGIN = 14;
-const TOOLTIP_Z_INDEX = getDefaultZIndex("modal");
+const BACKGROUND_TOOLTIP_Z_INDEX = getDefaultZIndex("modal") - 3;
 
 const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }: PortalTooltipProps) => {
   const mouseRef = useRef({ x: 0, y: 0 });
@@ -123,7 +123,7 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
     position: "fixed",
     left: pos.x,
     top: pos.y,
-    zIndex: pos.isAdvanced ? getDefaultZIndex("popover") : TOOLTIP_Z_INDEX,
+    zIndex: pos.isAdvanced ? getDefaultZIndex("modal") : BACKGROUND_TOOLTIP_Z_INDEX,
     pointerEvents: "none",
   };
 
diff --git a/packages/widgets/src/definition.spec.ts b/packages/widgets/src/definition.spec.ts
index 94089b161..314be143f 100644
--- a/packages/widgets/src/definition.spec.ts
+++ b/packages/widgets/src/definition.spec.ts
@@ -46,16 +46,6 @@ describe("getWidgetQueryKeys", () => {
 });
 
 describe("supportsAdvancedFocus", () => {
-  const definition = { supportsAdvancedFocus: undefined } as Parameters<typeof supportsAdvancedFocus>[0];
-
-  test("defaults to enabled", () => {
-    expect(supportsAdvancedFocus(definition)).toBe(true);
-  });
-
-  test("allows widgets to opt out", () => {
-    expect(supportsAdvancedFocus({ ...definition, supportsAdvancedFocus: false })).toBe(false);
-  });
-
   test.each([appDefinition, beszelSystemGridDefinition, beszelSystemTableDefinition])(
     "keeps non-enhanced widgets compact",
     (widgetDefinition) => {

From 20dbdcedf24c4054ca9c406d27276ffc4c2d9468 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 12:25:56 +0200
Subject: [PATCH 27/75] fix focused pane scrolling

---
 .../src/components/board/advanced-focus/wheel.ts  | 14 ++++++++++----
 e2e/board-advanced-interactions.spec.ts           | 15 ++++++++++++++-
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/wheel.ts b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
index 4cf5bc36d..285fb22ec 100644
--- a/apps/nextjs/src/components/board/advanced-focus/wheel.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
@@ -1,9 +1,11 @@
-const canScrollVertically = (element: HTMLElement, delta: number) => {
+const isVerticalScrollContainer = (element: HTMLElement) => {
   if (element.scrollHeight <= element.clientHeight) return false;
 
   const overflowY = getComputedStyle(element).overflowY;
-  if (overflowY !== "auto" && overflowY !== "scroll") return false;
+  return overflowY === "auto" || overflowY === "scroll";
+};
 
+const canScrollVertically = (element: HTMLElement, delta: number) => {
   return delta < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight;
 };
 
@@ -11,17 +13,21 @@ export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null
   if (delta === 0) return false;
 
   let current = target instanceof HTMLElement ? target : null;
+  let startedInScrollContainer = false;
   while (current && root.contains(current)) {
-    if (canScrollVertically(current, delta)) {
+    const isCurrentScrollContainer = isVerticalScrollContainer(current);
+    startedInScrollContainer ||= isCurrentScrollContainer;
+    if (isCurrentScrollContainer && canScrollVertically(current, delta)) {
       current.scrollTop += delta;
       return true;
     }
     if (current === root) break;
     current = current.parentElement;
   }
+  if (startedInScrollContainer) return false;
 
   const viewport = [...root.querySelectorAll<HTMLElement>("[data-scrollbars='y'], [data-scrollbars='xy']")].find(
-    (element) => canScrollVertically(element, delta),
+    (element) => isVerticalScrollContainer(element) && canScrollVertically(element, delta),
   );
   if (!viewport) return false;
 
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 17f07f5cd..0b3f12bbb 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -122,8 +122,12 @@ describe("Board advanced interactions", () => {
         probe.innerHTML = '<div style="height:600px"></div>';
         probe.addEventListener("wheel", (event) => event.stopPropagation());
         element.append(probe);
+
+        const unrelated = probe.cloneNode(true) as HTMLDivElement;
+        unrelated.dataset.shiftScrollProbe = "unrelated";
+        element.append(unrelated);
       });
-      const scrollProbe = advancedSurface.locator("[data-shift-scroll-probe]");
+      const scrollProbe = advancedSurface.locator("[data-shift-scroll-probe='true']");
       await page.keyboard.down("Shift");
       const pixelEventCancelled = await scrollProbe.evaluate(
         (element) =>
@@ -144,6 +148,15 @@ describe("Board advanced interactions", () => {
       await page.keyboard.up("Shift");
       expect(lineEventCancelled).toBe(true);
       expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThanOrEqual(48);
+      await scrollProbe.evaluate((element) => {
+        element.scrollTop = element.scrollHeight;
+        element.dispatchEvent(
+          new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 120 }),
+        );
+      });
+      expect(
+        await advancedSurface.locator("[data-shift-scroll-probe='unrelated']").evaluate((element) => element.scrollTop),
+      ).toBe(0);
       await page.keyboard.press("Escape");
       await expect(advancedSurface).toBeHidden();
       await expect(widget).toBeFocused();

From 3c99c75ad757e0a48d476a5c54eddfdceac88755 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 12:51:10 +0200
Subject: [PATCH 28/75] fix SVG focus scrolling

---
 .../src/components/board/advanced-focus/wheel.ts |  6 +++---
 e2e/board-advanced-interactions.spec.ts          | 16 +++++++++-------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/wheel.ts b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
index 285fb22ec..193fa5dde 100644
--- a/apps/nextjs/src/components/board/advanced-focus/wheel.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
@@ -1,18 +1,18 @@
-const isVerticalScrollContainer = (element: HTMLElement) => {
+const isVerticalScrollContainer = (element: Element) => {
   if (element.scrollHeight <= element.clientHeight) return false;
 
   const overflowY = getComputedStyle(element).overflowY;
   return overflowY === "auto" || overflowY === "scroll";
 };
 
-const canScrollVertically = (element: HTMLElement, delta: number) => {
+const canScrollVertically = (element: Element, delta: number) => {
   return delta < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight;
 };
 
 export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null, delta: number) => {
   if (delta === 0) return false;
 
-  let current = target instanceof HTMLElement ? target : null;
+  let current = target instanceof Element ? target : null;
   let startedInScrollContainer = false;
   while (current && root.contains(current)) {
     const isCurrentScrollContainer = isVerticalScrollContainer(current);
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 0b3f12bbb..8ffd0c237 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -119,7 +119,7 @@ describe("Board advanced interactions", () => {
         const probe = document.createElement("div");
         probe.dataset.shiftScrollProbe = "true";
         probe.style.cssText = "height:80px;overflow-y:auto";
-        probe.innerHTML = '<div style="height:600px"></div>';
+        probe.innerHTML = '<svg data-shift-scroll-target="true"></svg><div style="height:600px"></div>';
         probe.addEventListener("wheel", (event) => event.stopPropagation());
         element.append(probe);
 
@@ -139,12 +139,14 @@ describe("Board advanced interactions", () => {
       await scrollProbe.evaluate((element) => {
         element.scrollTop = 0;
       });
-      const lineEventCancelled = await scrollProbe.evaluate(
-        (element) =>
-          !element.dispatchEvent(
-            new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 3, deltaMode: 1 }),
-          ),
-      );
+      const lineEventCancelled = await scrollProbe
+        .locator("[data-shift-scroll-target='true']")
+        .evaluate(
+          (element) =>
+            !element.dispatchEvent(
+              new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 3, deltaMode: 1 }),
+            ),
+        );
       await page.keyboard.up("Shift");
       expect(lineEventCancelled).toBe(true);
       expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThanOrEqual(48);

From 294217fcbaae7b3e4a1df07145926432406f3ed7 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 13:09:56 +0200
Subject: [PATCH 29/75] fix board E2E login race

---
 e2e/board-advanced-interactions.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 8ffd0c237..51c06c96a 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -327,8 +327,9 @@ const openBoardAsync = async (
   await page.goto(`${baseUrl}/auth/login`);
   await page.getByLabel("Username").fill(credentials.username);
   await page.locator("#password").fill(credentials.password);
+  const loginRedirect = page.waitForURL(baseUrl, { timeout: 15_000, waitUntil: "commit" });
   await page.locator("css=button[type='submit']").click();
-  await page.waitForURL(baseUrl, { timeout: 15_000 });
+  await loginRedirect;
   await page.goto(`${baseUrl}/boards/${boardName}`);
   await expect(page.locator(".grid-stack-item[data-kind='clock'] .clock-wrapper").first()).toBeVisible({
     timeout: 15_000,

From 6e15f8bcf82c56c482b18b0b28aab0165a65337a Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 13:24:13 +0200
Subject: [PATCH 30/75] fix context menu keyboard focus

---
 .../board/sections/gridstack/board-empty-space-context-menu.tsx | 2 ++
 e2e/board-advanced-interactions.spec.ts                         | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
index f1dfc2678..b2a31eadc 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
+++ b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
@@ -182,6 +182,7 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
       </Box>
       <Menu
         opened={menu !== null}
+        withInitialFocusPlaceholder={false}
         onChange={(opened) => {
           if (!opened) closeMenu();
         }}
@@ -194,6 +195,7 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
         </Menu.Target>
         <Menu.Dropdown>
           <Menu.Item
+            data-autofocus
             leftSection={<IconPlus size={18} />}
             onClick={() => {
               const placement = menu?.placement;
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 51c06c96a..a8b40af5b 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -255,8 +255,6 @@ describe("Board advanced interactions", () => {
       await expect(grid).toHaveAttribute("aria-label", "Add item here");
 
       await grid.press("Shift+F10");
-      await expect(addHereMenuItem).toBeVisible();
-      await page.keyboard.press("ArrowDown");
       await expect(addHereMenuItem).toBeFocused();
       await page.keyboard.press("Enter");
       await expect(page.getByRole("dialog").filter({ hasText: "Choose item to add" })).toBeVisible();

From 80d46b0d852f25ce7a11ba365e295e02159f3db4 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 13:28:12 +0200
Subject: [PATCH 31/75] restore context menu focus

---
 .../sections/gridstack/board-empty-space-context-menu.tsx    | 3 +++
 e2e/board-advanced-interactions.spec.ts                      | 5 ++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
index b2a31eadc..ac1673369 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
+++ b/apps/nextjs/src/components/board/sections/gridstack/board-empty-space-context-menu.tsx
@@ -101,6 +101,7 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
     if (!placement) return;
     event.preventDefault();
     event.stopPropagation();
+    returnFocusRef.current = event.currentTarget;
     setMenu({ x: event.clientX, y: event.clientY, placement });
   };
 
@@ -108,11 +109,13 @@ export const BoardEmptySpaceContextMenu = ({ section, refs, children, ...boxProp
     if (!enabled || event.pointerType !== "touch") return;
     const placement = resolvePlacement(event.target, event.pageX, event.pageY);
     if (!placement) return;
+    const returnFocus = event.currentTarget;
     clearLongPress();
     longPressPointer.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };
     touchGuardElement.current = event.currentTarget;
     touchGuardElement.current.classList.add(suppressTouchCalloutClass);
     longPressTimer.current = setTimeout(() => {
+      returnFocusRef.current = returnFocus;
       setMenu({ x: event.clientX, y: event.clientY, placement });
       navigator.vibrate?.(20);
     }, 500);
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index a8b40af5b..c37e34e2b 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -265,11 +265,14 @@ describe("Board advanced interactions", () => {
       await expect(addHereMenuItem).toBeVisible({ timeout: 1_000 });
       await page.keyboard.press("Escape");
       await expect(addHereMenuItem).toBeHidden();
+      await expect(grid).toBeFocused();
 
       await rightClickEmptyGridSpaceAsync(grid);
       await expect(addHereMenuItem).toBeVisible();
+      await addHereMenuItem.click();
+      await expect(page.getByRole("dialog").filter({ hasText: "Choose item to add" })).toBeVisible();
       await page.keyboard.press("Escape");
-      await expect(addHereMenuItem).toBeHidden();
+      await expect(grid).toBeFocused();
     } finally {
       await context.close();
     }

From 65ff0ecb340810d0d0c9f9e6551fd401d7be2cd1 Mon Sep 17 00:00:00 2001
From: ajnart <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 14:26:56 +0200
Subject: [PATCH 32/75] docs: add widget modernization audit

---
 MANTINE.md | 474 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 REVIEW.md  | 263 +++++++++++++++++++++++++++++
 2 files changed, 737 insertions(+)
 create mode 100644 MANTINE.md
 create mode 100644 REVIEW.md

diff --git a/MANTINE.md b/MANTINE.md
new file mode 100644
index 000000000..a87cbbd48
--- /dev/null
+++ b/MANTINE.md
@@ -0,0 +1,474 @@
+# Mantine UI - LLM Documentation
+
+This index lists Mantine documentation pages formatted for LLMs.
+Each link points to a standalone Markdown file under the /llms path.
+
+For a single consolidated file with all content, use:
+- https://mantine.dev/llms-full.txt
+
+## FAQ
+
+- [Are Mantine components accessible?](https://mantine.dev/llms/q-are-mantine-components-accessible.md): Learn about Mantine components accessibility features
+- [Browser zooms in when input is focused. What should I do?](https://mantine.dev/llms/q-browser-zooms-on-focus.md): Use meta tag to disable browser scaling or increase input size
+- [Can I have color schemes other than light and dark?](https://mantine.dev/llms/q-light-dark-is-not-enough.md): Learn about the difference between color scheme and theme
+- [Can I have different primary color for light and dark color schemes?](https://mantine.dev/llms/q-primary-virtual-color.md): Learn how to use virtual color with primary color in theme object
+- [Can I remove MultiSelect placeholder when the component has selected values?](https://mantine.dev/llms/q-multiselect-value-placeholder.md): Learn why MultiSelect placeholder is not removed when values are selected and how to remove it with CSS
+- [Can I use an array of strings as a list in use-form?](https://mantine.dev/llms/q-list-of-strings-in-use-form.md): Learn about use-form lists limitations
+- [Can I use Mantine components as server components?](https://mantine.dev/llms/q-server-components.md): Learn about use client directive and server components usage
+- [Can I use Mantine with Astro?](https://mantine.dev/llms/q-can-i-use-mantine-with-astro.md): No, Astro does not support React context
+- [Can I use Mantine with Create React App (CRA)?](https://mantine.dev/llms/q-can-i-use-mantine-with-cra.md): Learn how to use Mantine without postcss-preset-mantine or how to eject CRA and customize webpack.config.js and use postcss-preset-mantine
+- [Can I use Mantine with Emotion/styled-components/tailwindcss?](https://mantine.dev/llms/q-third-party-styles.md): Learn about limitations of third-party styles
+- [Can I use Mantine with Vue/Svelte/Angular/etc.?](https://mantine.dev/llms/q-vue-svelte-angular.md): No, Mantine is a React library and does not support other frameworks/libraries
+- [Can I use nested inline styles with Mantine components?](https://mantine.dev/llms/q-nested-inline-styles.md): Nested styles are supported only in CSS files
+- [Can I use PostCSS function in inline styles?](https://mantine.dev/llms/q-postcss-fns-inline.md): Learn where PostCSS functions can be used in Mantine
+- [Can I use private CSS variables to style components?](https://mantine.dev/llms/q-private-css-variables.md): No, it is not safe and will not work with future versions of Mantine.
+- [Can I use SegmentedControl with empty value?](https://mantine.dev/llms/q-segmented-control-no-value.md): SegmentedControl cannot be used without a value
+- [How can I add dynamic CSS styles?](https://mantine.dev/llms/q-dynamic-css-styles.md): Use data attributes, CSS variables or inline styles
+- [How can I add fuzzy search to Select component?](https://mantine.dev/llms/q-select-fuzzy.md): Learn how to integrate third-party fuzzy search libraries with Mantine Select component
+- [How can I add hover styles to an element?](https://mantine.dev/llms/q-how-to-add-hover-styles.md): Learn how to add hover classes to an element with CSS modules, &:hover or @mixin hover
+- [How can I apply styles to all Mantine components?](https://mantine.dev/llms/q-apply-styles-to-all.md): Learn how to use attribute selector to apply styles to all Mantine components
+- [How can I change body background color?](https://mantine.dev/llms/q-body-background.md): Use CSS to change body background color
+- [How can I change component color prop value depending on the color scheme?](https://mantine.dev/llms/q-color-scheme-color.md): Learn how to use CSS variables resolver to change color value depending on the color scheme
+- [How can I change input focus styles?](https://mantine.dev/llms/q-input-focus-styles.md): Learn how to use Styles API with Mantine inputs
+- [How can I change Tabs border color?](https://mantine.dev/llms/q-tabs-border-color.md): Learn how to use Styles API with Tabs component
+- [How can I contribute to the library?](https://mantine.dev/llms/q-how-can-i-contribute.md): There are multiple ways to contribute even without writing code
+- [How can I disable all inputs/input groups inside a form?](https://mantine.dev/llms/q-disable-all-inputs-in-form.md): Learn how to disable all inputs/input groups inside a form with the unstyled Fieldset component
+- [How can I display different elements in light and dark color schemes?](https://mantine.dev/llms/q-light-dark-elements.md): Learn how to hide/show elements based on color scheme
+- [How can I focus the first input with error with use-form?](https://mantine.dev/llms/q-focus-first-input-with-error.md): Learn how to handle focus with use-form hook
+- [How can I get current color scheme value in JavaScript?](https://mantine.dev/llms/q-how-to-get-color-scheme-value-in-js.md): How to use useMantineColorScheme and useComputedColorScheme hooks to get current color scheme value in JavaScript
+- [How can I lint CSS files?](https://mantine.dev/llms/q-how-to-setup-stylelint.md): Learn how to set up Stylelint for Mantine postcss syntax
+- [How can I load fonts in Next.js?](https://mantine.dev/llms/q-next-load-fonts.md): A guide to load custom fonts in Next.js with CSS and next/font package
+- [How can I load fonts in React Router?](https://mantine.dev/llms/q-react-router-load-fonts.md): A guide to load custom fonts in React Router
+- [How can I load fonts in Vite?](https://mantine.dev/llms/q-vite-load-fonts.md): A guide to load custom fonts in Vite
+- [How can I lock scroll in my application?](https://mantine.dev/llms/q-how-to-lock-scroll.md): Use react-remove-scroll library to lock scroll in your application
+- [How can I submit a template to Mantine documentation?](https://mantine.dev/llms/q-submit-template.md): Learn how to create and submit a template to Mantine documentation
+- [How can I test Modal/Drawer/Popover components?](https://mantine.dev/llms/q-portals-testing.md): Learn how to use react-testing-library to test components that use portals and transitions.
+- [How can I test Select/MultiSelect components?](https://mantine.dev/llms/q-combobox-testing.md): Learn how to use react-testing-library to test Select and MultiSelect components.
+- [How can I upload files from Dropzone component?](https://mantine.dev/llms/q-dropzone-upload.md): Learn how to process files dropped into Dropzone component
+- [How is that thing done on the mantine.dev website?](https://mantine.dev/llms/q-how-that-thing-is-done.md): Learn how various elements are implemented on the mantine.dev website
+- [How to align input with a button in a flex container?](https://mantine.dev/llms/q-align-input-button.md): Learn how to align Mantine inputs with buttons using Group component
+- [How to call a function when Modal/Drawer closes and animation completes?](https://mantine.dev/llms/q-how-to-call-function-when-modal-closes.md): How to use transitionProps in Modal/Drawer components
+- [How to change background color for FiveM?](https://mantine.dev/llms/q-fivem-background-color.md): Unset body background color and color-scheme styles for FiveM
+- [How to change input placeholder color?](https://mantine.dev/llms/q-inputs-placeholder-color.md): Learn how to change placeholder color with Styles API
+- [How to integrate custom input with use-form hook?](https://mantine.dev/llms/q-custom-input-use-form.md): Learn how to add use-form support for custom inputs
+- [How to prevent Modal from closing?](https://mantine.dev/llms/q-how-to-prevent-modal-from-closing.md): Learn how to prevent Modal from closing when the user clicks outside of it or presses the Escape key
+- [How to scroll to the top of the form if the form is submitted with errors?](https://mantine.dev/llms/q-scroll-to-the-top-of-the-form.md): Learn how to call a function when the form is submitted with errors
+- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/*, @mantinex/* and postcss-preset-mantine dependencies manually or with ncu script
+- [How to use Dropzone with @mantine/form?](https://mantine.dev/llms/q-how-to-use-dropzone-with-form.md): Learn how to use Dropzone with @mantine/form to handle file selection state
+- [How to use Mantine template on GitHub?](https://mantine.dev/llms/q-templates-usage.md): Learn how to create a new repository based on Mantine template
+- [I get hydration warning about data-mantine-color-scheme attribute, what does it mean?](https://mantine.dev/llms/q-color-scheme-hydration-warning.md): Learn how hydration works and how to fix warnings
+- [Is there a comparison with other libraries?](https://mantine.dev/llms/q-other-libs.md): Comparison with other libraries is not provided, you are trusted to make your own decision based on documentation examples
+- [Is there a floating action button component?](https://mantine.dev/llms/q-floating-action-button.md): No, but you can build it with Affix and ActionIcon components
+- [Is there DataGrid component that I can use with Mantine?](https://mantine.dev/llms/q-data-grid-i-need.md): A list of community packages that provide DataGrid component that can be used with Mantine.
+- [It is not possible to pinch to zoom when a Modal is opened. What should I do?](https://mantine.dev/llms/q-pinch-to-zoom-modal.md): Use removeScrollProps to configure react-remove-scroll options
+- [MantineProvider was not found in component tree. What should I do?](https://mantine.dev/llms/q-mantine-provider-missing.md): Learn how to resolve MantineProvider issues
+- [My buttons are transparent and the background is visible only on hover, what is wrong?](https://mantine.dev/llms/q-transparent-buttons.md): You have installed a third-party library that overrides Mantine styles
+- [My Popover dropdown closes when I click on the dropdown of a nested Popover](https://mantine.dev/llms/q-nested-popover-closes.md): Popover dropdown is closed when it detects click-outside events
+- [My styles are broken with disabled JavaScript. What should I do?](https://mantine.dev/llms/q-disabled-js.md): Learn how to use Mantine without JavaScript enabled
+- [My styles are overridden by Mantine components styles, what should I do?](https://mantine.dev/llms/q-styles-order.md): Learn how to use CSS layers to control styles order and prevent Mantine components from overriding your styles
+- [Native browser validation does not work in some components, what should I do?](https://mantine.dev/llms/q-native-required.md): Learn why native browser validation does not work in some components
+- [The use-local-storage hook returns the real value only after mounting. Is it a bug?](https://mantine.dev/llms/q-local-storage-effect.md): Learn how Mantine retrieves local storage value
+- [What is the difference between searchable Select and Autocomplete?](https://mantine.dev/llms/q-select-autocomplete-difference.md): Searchable Select and Autocomplete are similar components, but they serve different purposes.
+- [Where can I find the roadmap?](https://mantine.dev/llms/q-roadmap.md): The roadmap is private and only available to the team.
+- [Why are my Carousel slides in vertical orientation?](https://mantine.dev/llms/q-carousel-missing-styles.md): You forgot to import carousel styles
+- [Why are my notifications displayed at the wrong position?](https://mantine.dev/llms/q-notifications-missing-styles.md): Because you did not import styles
+- [Why can I not use one polymorphic component in the component prop of another polymorphic component?](https://mantine.dev/llms/q-polymorphic-in-polymorphic.md): Learn how polymorphic components types work
+- [Why can I not use value/label data structure with Autocomplete/TagsInput?](https://mantine.dev/llms/q-autocomplete-value-label.md): Learn the difference between Autocomplete and Select components
+- [Why can VSCode not autoimport the Text component?](https://mantine.dev/llms/q-why-vscode-cannot-autoimport-text.md): It is confused by the native Text constructor
+- [Why do I see color scheme flickering on page load?](https://mantine.dev/llms/q-color-scheme-flickering.md): Color scheme flickering is caused by incorrect usage of ColorSchemeScript
+- [Why do my dates components look broken?](https://mantine.dev/llms/q-dates-missing-styles.md): Because you did not import styles
+- [Why does FileButton not work in Menu?](https://mantine.dev/llms/q-file-button-in-menu.md): Learn how to use FileButton in Menu component
+- [Why is it required to have 10 shades per color?](https://mantine.dev/llms/q-ten-shades-per-color.md): Learn how Mantine uses theme colors
+- [Why is my screen completely empty after I](https://mantine.dev/llms/q-notifications-empty-screen.md): You have used Notifications component incorrectly
+
+## Core
+
+- [Accordion](https://mantine.dev/llms/core-accordion.md): Divide content into collapsible sections
+- [ActionIcon](https://mantine.dev/llms/core-action-icon.md): Icon button
+- [Affix](https://mantine.dev/llms/core-affix.md): Renders children inside portal at fixed position
+- [Alert](https://mantine.dev/llms/core-alert.md): Attract user attention with important static message
+- [AlphaSlider](https://mantine.dev/llms/core-alpha-slider.md): Slider component for selecting alpha channel in color pickers (0 – 1)
+- [Anchor](https://mantine.dev/llms/core-anchor.md): Display link with theme styles
+- [AngleSlider](https://mantine.dev/llms/core-angle-slider.md): Pick angle value between 0 and 360
+- [AppShell](https://mantine.dev/llms/core-app-shell.md): Responsive shell for your application with header, navbar, aside and footer
+- [AspectRatio](https://mantine.dev/llms/core-aspect-ratio.md): Maintain responsive consistent width/height ratio
+- [Autocomplete](https://mantine.dev/llms/core-autocomplete.md): Autocomplete user input with any list of options
+- [Avatar](https://mantine.dev/llms/core-avatar.md): Display user profile image, initials or fallback icon
+- [BackgroundImage](https://mantine.dev/llms/core-background-image.md): Displays image as background
+- [Badge](https://mantine.dev/llms/core-badge.md): Display badge, pill or tag
+- [Blockquote](https://mantine.dev/llms/core-blockquote.md): Blockquote with optional cite
+- [Box](https://mantine.dev/llms/core-box.md): Base component for all Mantine components
+- [Breadcrumbs](https://mantine.dev/llms/core-breadcrumbs.md): Separates list of react nodes with given separator
+- [Burger](https://mantine.dev/llms/core-burger.md): Open/close navigation button
+- [Button](https://mantine.dev/llms/core-button.md): Button component to render button or link
+- [Card](https://mantine.dev/llms/core-card.md): Card with sections
+- [Cascader](https://mantine.dev/llms/core-cascader.md): Select a path from hierarchical data with cascading columns
+- [Center](https://mantine.dev/llms/core-center.md): Centers content vertically and horizontally
+- [Checkbox](https://mantine.dev/llms/core-checkbox.md): Capture boolean input from user
+- [Chip](https://mantine.dev/llms/core-chip.md): Pick one or multiple values with inline controls
+- [CloseButton](https://mantine.dev/llms/core-close-button.md): Button with close icon
+- [Code](https://mantine.dev/llms/core-code.md): Inline and block code
+- [Collapse](https://mantine.dev/llms/core-collapse.md): Animate presence with slide down/up transition
+- [ColorInput](https://mantine.dev/llms/core-color-input.md): Capture color from user
+- [ColorPicker](https://mantine.dev/llms/core-color-picker.md): Pick colors in hex(a), rgb(a), hsl(a) and hsv(a) formats
+- [ColorSwatch](https://mantine.dev/llms/core-color-swatch.md): Displays color
+- [Combobox](https://mantine.dev/llms/core-combobox.md): Create custom select, autocomplete or multiselect inputs
+- [ComboboxPopover](https://mantine.dev/llms/core-combobox-popover.md): Add combobox dropdown to any button element
+- [Container](https://mantine.dev/llms/core-container.md): Center content with padding and max-width
+- [CopyButton](https://mantine.dev/llms/core-copy-button.md): Copies given text to clipboard
+- [CorePackage](https://mantine.dev/llms/core-package.md)
+- [DataList](https://mantine.dev/llms/core-data-list.md): Display label-value pairs as a description list
+- [Dialog](https://mantine.dev/llms/core-dialog.md): Display a fixed overlay dialog at any side of the screen
+- [Divider](https://mantine.dev/llms/core-divider.md): Horizontal line with optional label or vertical divider
+- [Drawer](https://mantine.dev/llms/core-drawer.md): Display overlay area at any side of the screen
+- [EmptyState](https://mantine.dev/llms/core-empty-state.md): Display a placeholder for no data, empty results and first-run states
+- [Fieldset](https://mantine.dev/llms/core-fieldset.md): Group related elements in a form
+- [FileButton](https://mantine.dev/llms/core-file-button.md): Open file picker with a button click
+- [FileInput](https://mantine.dev/llms/core-file-input.md): Capture files from user
+- [Flex](https://mantine.dev/llms/core-flex.md): Compose elements in a flex container
+- [FloatingIndicator](https://mantine.dev/llms/core-floating-indicator.md): Display a floating indicator over a group of elements
+- [FloatingWindow](https://mantine.dev/llms/core-floating-window.md): Draggable floating area
+- [FocusTrap](https://mantine.dev/llms/core-focus-trap.md): Trap focus at child node
+- [Grid](https://mantine.dev/llms/core-grid.md): Responsive 12 columns grid system
+- [Group](https://mantine.dev/llms/core-group.md): Compose elements and components in a horizontal flex container
+- [Highlight](https://mantine.dev/llms/core-highlight.md): Highlight given part of a string with mark
+- [HoverCard](https://mantine.dev/llms/core-hover-card.md): Display popover section when target element is hovered
+- [HueSlider](https://mantine.dev/llms/core-hue-slider.md): Slider component for selecting hue channel in color pickers (0 – 360 degrees)
+- [Image](https://mantine.dev/llms/core-image.md): Image with optional fallback
+- [Indicator](https://mantine.dev/llms/core-indicator.md): Display element at the corner of another element
+- [Input](https://mantine.dev/llms/core-input.md): Base component to create custom inputs
+- [JsonInput](https://mantine.dev/llms/core-json-input.md): Capture json data from user
+- [Kbd](https://mantine.dev/llms/core-kbd.md): Display keyboard key
+- [List](https://mantine.dev/llms/core-list.md): Display ordered or unordered list
+- [Loader](https://mantine.dev/llms/core-loader.md): Indicate loading state
+- [LoadingOverlay](https://mantine.dev/llms/core-loading-overlay.md): An overlay with centered loader
+- [Mark](https://mantine.dev/llms/core-mark.md): Highlight part of the text
+- [Marquee](https://mantine.dev/llms/core-marquee.md): Create continuous scrolling animation for content
+- [MaskInput](https://mantine.dev/llms/core-mask-input.md): Input with mask pattern for formatted text entry
+- [Menu](https://mantine.dev/llms/core-menu.md): Combine a list of secondary actions into single interactive area
+- [Menubar](https://mantine.dev/llms/core-menubar.md): Desktop application style menubar with a row of menu triggers
+- [Modal](https://mantine.dev/llms/core-modal.md): An accessible overlay dialog
+- [MultiSelect](https://mantine.dev/llms/core-multi-select.md): Custom searchable multi select
+- [NativeSelect](https://mantine.dev/llms/core-native-select.md): Native select element based on Input
+- [NavLink](https://mantine.dev/llms/core-nav-link.md): Navigation link
+- [Notification](https://mantine.dev/llms/core-notification.md): Show dynamic notifications and alerts to user, part of notifications system
+- [NumberFormatter](https://mantine.dev/llms/core-number-formatter.md): Format number with thousands/decimal separators and suffix/prefix
+- [NumberInput](https://mantine.dev/llms/core-number-input.md): Capture number from user
+- [OverflowList](https://mantine.dev/llms/core-overflow-list.md): Hide items that do not fit in a container and display them as a single collapsed item
+- [Overlay](https://mantine.dev/llms/core-overlay.md): Overlays parent element with div element with any color and opacity
+- [Pagination](https://mantine.dev/llms/core-pagination.md): Display active page and navigate between multiple pages
+- [Paper](https://mantine.dev/llms/core-paper.md): Renders white or dark background depending on color scheme
+- [PasswordInput](https://mantine.dev/llms/core-password-input.md): Capture password data from user
+- [Pill](https://mantine.dev/llms/core-pill.md): Removable and non-removable tags
+- [PillsInput](https://mantine.dev/llms/core-pills-input.md): Base component for custom tags inputs and multi selects
+- [PinInput](https://mantine.dev/llms/core-pin-input.md): Capture pin code or one time password from the user
+- [Popover](https://mantine.dev/llms/core-popover.md): Display popover section relative to given target element
+- [Portal](https://mantine.dev/llms/core-portal.md): Renders component outside of parent element tree
+- [Progress](https://mantine.dev/llms/core-progress.md): Give user feedback for status of the task
+- [Radio](https://mantine.dev/llms/core-radio.md): Wrapper for input type radio
+- [RangeSlider](https://mantine.dev/llms/core-range-slider.md): RangeSlider component
+- [Rating](https://mantine.dev/llms/core-rating.md): Pick and display rating
+- [RingProgress](https://mantine.dev/llms/core-ring-progress.md): Give user feedback for status of the task with circle diagram
+- [RollingNumber](https://mantine.dev/llms/core-rolling-number.md): Animate value changes with rolling digits
+- [ScrollArea](https://mantine.dev/llms/core-scroll-area.md): Area with custom scrollbars
+- [Scroller](https://mantine.dev/llms/core-scroller.md): Horizontal scroll container with navigation controls
+- [SegmentedControl](https://mantine.dev/llms/core-segmented-control.md): A linear set of two or more segments
+- [Select](https://mantine.dev/llms/core-select.md): Custom searchable select
+- [SemiCircleProgress](https://mantine.dev/llms/core-semi-circle-progress.md): Represent progress with semi circle diagram
+- [SimpleGrid](https://mantine.dev/llms/core-simple-grid.md): Responsive grid in which each item takes equal amount of space
+- [Skeleton](https://mantine.dev/llms/core-skeleton.md): Indicate content loading state
+- [Slider](https://mantine.dev/llms/core-slider.md): Slider component
+- [Space](https://mantine.dev/llms/core-space.md): Add horizontal or vertical spacing from theme
+- [Splitter](https://mantine.dev/llms/core-splitter.md): Resizable split pane layout
+- [Spoiler](https://mantine.dev/llms/core-spoiler.md): Hide long sections of content under a spoiler
+- [Stack](https://mantine.dev/llms/core-stack.md): Compose elements and components in a vertical flex container
+- [Stepper](https://mantine.dev/llms/core-stepper.md): Display content divided into a steps sequence
+- [Switch](https://mantine.dev/llms/core-switch.md): Capture boolean input from user
+- [Table](https://mantine.dev/llms/core-table.md): Render table with theme styles
+- [TableOfContents](https://mantine.dev/llms/core-table-of-contents.md): Renders a list of headings on the page and tracks current heading visible in the viewport
+- [Tabs](https://mantine.dev/llms/core-tabs.md): Switch between different views
+- [TagsInput](https://mantine.dev/llms/core-tags-input.md): Capture a list of values from user with free input and suggestions
+- [Text](https://mantine.dev/llms/core-text.md): Display text
+- [Textarea](https://mantine.dev/llms/core-textarea.md): Autosize or regular textarea
+- [TextInput](https://mantine.dev/llms/core-text-input.md): Capture string input from user
+- [ThemeIcon](https://mantine.dev/llms/core-theme-icon.md): Render icon inside element with theme colors
+- [Timeline](https://mantine.dev/llms/core-timeline.md): Display list of events in chronological order
+- [Title](https://mantine.dev/llms/core-title.md): h1-h6 heading
+- [Tooltip](https://mantine.dev/llms/core-tooltip.md): Renders tooltip at given element on mouse over or other event
+- [Transition](https://mantine.dev/llms/core-transition.md): Animate presence of component with pre-made animations
+- [Tree](https://mantine.dev/llms/core-tree.md): Display a Tree structure
+- [TreeSelect](https://mantine.dev/llms/core-tree-select.md): Select with hierarchical tree data
+- [Typography](https://mantine.dev/llms/core-typography.md): Styles provider for html content
+- [UnstyledButton](https://mantine.dev/llms/core-unstyled-button.md): Unstyled polymorphic button
+- [VisuallyHidden](https://mantine.dev/llms/core-visually-hidden.md): Hide element visually but keep it accessible for screen readers
+
+## Hooks
+
+- [HooksPackage](https://mantine.dev/llms/hooks-package.md)
+- [use-element-size](https://mantine.dev/llms/hooks-use-element-size.md): Returns element width and height and observes changes with ResizeObserver
+- [useClickOutside](https://mantine.dev/llms/hooks-use-click-outside.md)
+- [useClipboard](https://mantine.dev/llms/hooks-use-clipboard.md)
+- [useCollapse](https://mantine.dev/llms/hooks-use-collapse.md)
+- [useColorScheme](https://mantine.dev/llms/hooks-use-color-scheme.md)
+- [useCounter](https://mantine.dev/llms/hooks-use-counter.md)
+- [useDebouncedCallback](https://mantine.dev/llms/hooks-use-debounced-callback.md)
+- [useDebouncedState](https://mantine.dev/llms/hooks-use-debounced-state.md)
+- [useDebouncedValue](https://mantine.dev/llms/hooks-use-debounced-value.md)
+- [useDidUpdate](https://mantine.dev/llms/hooks-use-did-update.md)
+- [useDisclosure](https://mantine.dev/llms/hooks-use-disclosure.md)
+- [useDocumentTitle](https://mantine.dev/llms/hooks-use-document-title.md)
+- [useDocumentVisibility](https://mantine.dev/llms/hooks-use-document-visibility.md)
+- [useDrag](https://mantine.dev/llms/hooks-use-drag.md)
+- [useEventListener](https://mantine.dev/llms/hooks-use-event-listener.md)
+- [useEyeDropper](https://mantine.dev/llms/hooks-use-eye-dropper.md)
+- [useFavicon](https://mantine.dev/llms/hooks-use-favicon.md)
+- [useFetch](https://mantine.dev/llms/hooks-use-fetch.md)
+- [useFileDialog](https://mantine.dev/llms/hooks-use-file-dialog.md)
+- [useFloatingWindow](https://mantine.dev/llms/hooks-use-floating-window.md)
+- [useFocusReturn](https://mantine.dev/llms/hooks-use-focus-return.md)
+- [useFocusTrap](https://mantine.dev/llms/hooks-use-focus-trap.md)
+- [useFocusWithin](https://mantine.dev/llms/hooks-use-focus-within.md)
+- [useForceUpdate](https://mantine.dev/llms/hooks-use-force-update.md)
+- [useFullscreen](https://mantine.dev/llms/hooks-use-fullscreen.md)
+- [useHash](https://mantine.dev/llms/hooks-use-hash.md)
+- [useHeadroom](https://mantine.dev/llms/hooks-use-headroom.md)
+- [useHotkeys](https://mantine.dev/llms/hooks-use-hotkeys.md)
+- [useHover](https://mantine.dev/llms/hooks-use-hover.md)
+- [useId](https://mantine.dev/llms/hooks-use-id.md)
+- [useIdle](https://mantine.dev/llms/hooks-use-idle.md)
+- [useInputState](https://mantine.dev/llms/hooks-use-input-state.md)
+- [useIntersection](https://mantine.dev/llms/hooks-use-intersection.md)
+- [useInterval](https://mantine.dev/llms/hooks-use-interval.md)
+- [useInViewport](https://mantine.dev/llms/hooks-use-in-viewport.md)
+- [useIsFirstRender](https://mantine.dev/llms/hooks-use-is-first-render.md)
+- [useIsomorphicEffect](https://mantine.dev/llms/hooks-use-isomorphic-effect.md)
+- [useListState](https://mantine.dev/llms/hooks-use-list-state.md)
+- [useLocalStorage](https://mantine.dev/llms/hooks-use-local-storage.md)
+- [useLogger](https://mantine.dev/llms/hooks-use-logger.md)
+- [useLongPress](https://mantine.dev/llms/hooks-use-long-press.md)
+- [useMap](https://mantine.dev/llms/hooks-use-map.md)
+- [useMask](https://mantine.dev/llms/hooks-use-mask.md)
+- [useMediaQuery](https://mantine.dev/llms/hooks-use-media-query.md)
+- [useMergedRef](https://mantine.dev/llms/hooks-use-merged-ref.md)
+- [useMounted](https://mantine.dev/llms/hooks-use-mounted.md)
+- [useMouse](https://mantine.dev/llms/hooks-use-mouse.md)
+- [useMove](https://mantine.dev/llms/hooks-use-move.md)
+- [useMutationObserver](https://mantine.dev/llms/hooks-use-mutation-observer.md)
+- [useNetwork](https://mantine.dev/llms/hooks-use-network.md)
+- [useOrientation](https://mantine.dev/llms/hooks-use-orientation.md)
+- [useOs](https://mantine.dev/llms/hooks-use-os.md)
+- [usePageLeave](https://mantine.dev/llms/hooks-use-page-leave.md)
+- [usePagination](https://mantine.dev/llms/hooks-use-pagination.md)
+- [usePrevious](https://mantine.dev/llms/hooks-use-previous.md)
+- [useQueue](https://mantine.dev/llms/hooks-use-queue.md)
+- [useRadialMove](https://mantine.dev/llms/hooks-use-radial-move.md)
+- [useReducedMotion](https://mantine.dev/llms/hooks-use-reduced-motion.md)
+- [useResizeObserver](https://mantine.dev/llms/hooks-use-resize-observer.md)
+- [useRovingIndex](https://mantine.dev/llms/hooks-use-roving-index.md)
+- [useScrollDirection](https://mantine.dev/llms/hooks-use-scroll-direction.md)
+- [useScroller](https://mantine.dev/llms/hooks-use-scroller.md)
+- [useScrollIntoView](https://mantine.dev/llms/hooks-use-scroll-into-view.md)
+- [useScrollSpy](https://mantine.dev/llms/hooks-use-scroll-spy.md)
+- [useSelection](https://mantine.dev/llms/hooks-use-selection.md)
+- [useSet](https://mantine.dev/llms/hooks-use-set.md)
+- [useSetState](https://mantine.dev/llms/hooks-use-set-state.md)
+- [useShallowEffect](https://mantine.dev/llms/hooks-use-shallow-effect.md)
+- [useSplitter](https://mantine.dev/llms/hooks-use-splitter.md)
+- [useStateHistory](https://mantine.dev/llms/hooks-use-state-history.md)
+- [useTextSelection](https://mantine.dev/llms/hooks-use-text-selection.md)
+- [useThrottledCallback](https://mantine.dev/llms/hooks-use-throttled-callback.md)
+- [useThrottledState](https://mantine.dev/llms/hooks-use-throttled-state.md)
+- [useThrottledValue](https://mantine.dev/llms/hooks-use-throttled-value.md)
+- [useTimeout](https://mantine.dev/llms/hooks-use-timeout.md)
+- [useToggle](https://mantine.dev/llms/hooks-use-toggle.md)
+- [useUncontrolled](https://mantine.dev/llms/hooks-use-uncontrolled.md)
+- [useValidatedState](https://mantine.dev/llms/hooks-use-validated-state.md)
+- [useViewportSize](https://mantine.dev/llms/hooks-use-viewport-size.md)
+- [useWindowEvent](https://mantine.dev/llms/hooks-use-window-event.md)
+- [useWindowScroll](https://mantine.dev/llms/hooks-use-window-scroll.md)
+
+## Form
+
+- [Form context](https://mantine.dev/llms/form-create-form-context.md): Add context support to use-form with createFormContext
+- [formActions](https://mantine.dev/llms/form-actions.md)
+- [formAllInputs](https://mantine.dev/llms/form-all-inputs.md)
+- [formErrors](https://mantine.dev/llms/form-errors.md)
+- [formGetInputProps](https://mantine.dev/llms/form-get-input-props.md)
+- [formNested](https://mantine.dev/llms/form-nested.md)
+- [FormPackage](https://mantine.dev/llms/form-package.md)
+- [formRecipes](https://mantine.dev/llms/form-recipes.md)
+- [formSchemaValidation](https://mantine.dev/llms/form-schema-validation.md)
+- [formStatus](https://mantine.dev/llms/form-status.md)
+- [formUncontrolled](https://mantine.dev/llms/form-uncontrolled.md)
+- [formValidation](https://mantine.dev/llms/form-validation.md)
+- [formValidators](https://mantine.dev/llms/form-validators.md)
+- [formValues](https://mantine.dev/llms/form-values.md)
+- [use-field](https://mantine.dev/llms/form-use-field.md): use-field hook – manage single field state
+- [use-form](https://mantine.dev/llms/form-use-form.md): Manage form state
+
+## Dates
+
+- [Calendar](https://mantine.dev/llms/dates-calendar.md): Base component for custom date pickers
+- [DateInput](https://mantine.dev/llms/dates-date-input.md): Free form date input
+- [DatePicker](https://mantine.dev/llms/dates-date-picker.md): Inline date, multiple dates and dates range picker
+- [DatePickerInput](https://mantine.dev/llms/dates-date-picker-input.md): Date, multiple dates and dates range picker input
+- [DateTimePicker](https://mantine.dev/llms/dates-date-time-picker.md): Capture datetime from the user
+- [GettingStartedDates](https://mantine.dev/llms/dates-getting-started.md)
+- [InlineDateTimePicker](https://mantine.dev/llms/dates-inline-date-time-picker.md): Inline date and time picker with range support
+- [MiniCalendar](https://mantine.dev/llms/dates-mini-calendar.md): Compact calendar to display a small number of days in a row
+- [MonthPicker](https://mantine.dev/llms/dates-month-picker.md): Inline month, multiple months and months range picker
+- [MonthPickerInput](https://mantine.dev/llms/dates-month-picker-input.md): Month, multiple months and months range picker input
+- [TimeGrid](https://mantine.dev/llms/dates-time-grid.md): Captures time value from the user with a predefined set of options
+- [TimeInput](https://mantine.dev/llms/dates-time-input.md): Capture time from the user
+- [TimePicker](https://mantine.dev/llms/dates-time-picker.md): Captures time value from the user
+- [TimeValue](https://mantine.dev/llms/dates-time-value.md): Display a formatted time value
+- [YearPicker](https://mantine.dev/llms/dates-year-picker.md): Inline year, multiple years and years range picker
+- [YearPickerInput](https://mantine.dev/llms/dates-year-picker-input.md): Inline year, multiple years and years range picker
+
+## Charts
+
+- [AreaChart](https://mantine.dev/llms/charts-area-chart.md): Area chart component with stacked, percent and split variants
+- [BarChart](https://mantine.dev/llms/charts-bar-chart.md): Bar chart component with stacked and percent variants
+- [BarsList](https://mantine.dev/llms/charts-bars-list.md): Display a list of bars with names and values
+- [BubbleChart](https://mantine.dev/llms/charts-bubble-chart.md): Bubble chart component
+- [BulletChart](https://mantine.dev/llms/charts-bullet-chart.md): Compact KPI chart with value, target, and qualitative ranges
+- [CompositeChart](https://mantine.dev/llms/charts-composite-chart.md): Composed chart with support for Area, Bar and Line charts
+- [DonutChart](https://mantine.dev/llms/charts-donut-chart.md): Donut chart component
+- [FunnelChart](https://mantine.dev/llms/charts-funnel-chart.md): Funnel chart component
+- [GettingStartedCharts](https://mantine.dev/llms/charts-getting-started.md)
+- [Heatmap](https://mantine.dev/llms/charts-heatmap.md): Heatmap chart component
+- [LineChart](https://mantine.dev/llms/charts-line-chart.md): Line chart component
+- [PieChart](https://mantine.dev/llms/charts-pie-chart.md): Pie chart component
+- [RadarChart](https://mantine.dev/llms/charts-radar-chart.md): Radar chart component
+- [RadialBarChart](https://mantine.dev/llms/charts-radial-bar-chart.md): Radial bar chart component
+- [SankeyChart](https://mantine.dev/llms/charts-sankey-chart.md): Sankey diagram component
+- [ScatterChart](https://mantine.dev/llms/charts-scatter-chart.md): Scatter chart component
+- [Sparkline](https://mantine.dev/llms/charts-sparkline.md): Simplified area chart to show trends
+- [SunburstChart](https://mantine.dev/llms/charts-sunburst-chart.md): Sunburst chart component for hierarchical data
+- [Treemap](https://mantine.dev/llms/charts-treemap.md): Treemap chart component
+
+## Schedule
+
+- [AgendaView](https://mantine.dev/llms/schedule-agenda-view.md): Vertical list view of events grouped by date
+- [DayView](https://mantine.dev/llms/schedule-day-view.md): Standalone schedule day view component
+- [GettingStartedSchedule](https://mantine.dev/llms/schedule-getting-started.md)
+- [MobileMonthView](https://mantine.dev/llms/schedule-mobile-month-view.md): Mobile-optimized schedule month view component
+- [MonthView](https://mantine.dev/llms/schedule-month-view.md): Standalone schedule month view component
+- [RecurringEventsSchedule](https://mantine.dev/llms/schedule-recurring-events.md)
+- [ResourcesDayView](https://mantine.dev/llms/schedule-resources-day-view.md): Day view with resource columns for scheduling across resources
+- [ResourcesMonthView](https://mantine.dev/llms/schedule-resources-month-view.md): Month view with resource lanes for scheduling across resources
+- [ResourcesSchedule](https://mantine.dev/llms/schedule-resources-schedule.md): Schedule wrapper component that combines resource day, week and month views
+- [ResourcesWeekView](https://mantine.dev/llms/schedule-resources-week-view.md): Week view with resource rows for scheduling across resources
+- [Schedule](https://mantine.dev/llms/schedule-schedule.md): Schedule component with day, week, month and year views
+- [ScheduleEventsData](https://mantine.dev/llms/schedule-events-data.md)
+- [WeekView](https://mantine.dev/llms/schedule-week-view.md): Standalone schedule week view component
+- [YearView](https://mantine.dev/llms/schedule-year-view.md): Standalone schedule year view component
+
+## Guides
+
+- [ControlledVsUncontrolled](https://mantine.dev/llms/guides-controlled-vs-uncontrolled.md)
+- [CustomComponents](https://mantine.dev/llms/guides-custom-components.md)
+- [EightToNine](https://mantine.dev/llms/guides-8x-to-9x.md)
+- [FunctionsReference](https://mantine.dev/llms/guides-functions-reference.md)
+- [Gatsby](https://mantine.dev/llms/guides-gatsby.md)
+- [Icons](https://mantine.dev/llms/guides-icons.md)
+- [JavaScript](https://mantine.dev/llms/guides-javascript.md)
+- [Jest](https://mantine.dev/llms/guides-jest.md)
+- [LLMDocumentation](https://mantine.dev/llms/guides-llms.md)
+- [NextJs](https://mantine.dev/llms/guides-next.md)
+- [Polymorphic](https://mantine.dev/llms/guides-polymorphic.md)
+- [ReactRouter](https://mantine.dev/llms/guides-react-router.md)
+- [Redwood](https://mantine.dev/llms/guides-redwood.md)
+- [SevenToEight](https://mantine.dev/llms/guides-7x-to-8x.md)
+- [SixToSeven](https://mantine.dev/llms/guides-6x-to-7x.md)
+- [Storybook](https://mantine.dev/llms/guides-storybook.md)
+- [Tiptap3Migration](https://mantine.dev/llms/guides-tiptap-3-migration.md)
+- [TypeScript](https://mantine.dev/llms/guides-typescript.md)
+- [Vite](https://mantine.dev/llms/guides-vite.md)
+- [Vitest](https://mantine.dev/llms/guides-vitest.md)
+
+## Theming
+
+- [Colors](https://mantine.dev/llms/theming-colors.md)
+- [ColorSchemes](https://mantine.dev/llms/theming-color-schemes.md)
+- [DefaultProps](https://mantine.dev/llms/theming-default-props.md)
+- [MantineProvider](https://mantine.dev/llms/theming-mantine-provider.md)
+- [ThemeObject](https://mantine.dev/llms/theming-theme-object.md)
+- [Typography](https://mantine.dev/llms/theming-typography.md): Styles provider for html content
+
+## Styles
+
+- [ColorFunctions](https://mantine.dev/llms/styles-color-functions.md)
+- [CSSFilesList](https://mantine.dev/llms/styles-css-files-list.md)
+- [CSSModules](https://mantine.dev/llms/styles-css-modules.md)
+- [CssVariables](https://mantine.dev/llms/styles-css-variables.md)
+- [CSSVariablesList](https://mantine.dev/llms/styles-css-variables-list.md)
+- [DataAttributes](https://mantine.dev/llms/styles-data-attributes.md)
+- [Emotion](https://mantine.dev/llms/styles-emotion.md)
+- [GlobalStyles](https://mantine.dev/llms/styles-global-styles.md)
+- [MantineStyles](https://mantine.dev/llms/styles-mantine-styles.md)
+- [PostCSSPreset](https://mantine.dev/llms/styles-postcss-preset.md)
+- [Rem](https://mantine.dev/llms/styles-rem.md)
+- [ResponsiveStyles](https://mantine.dev/llms/styles-responsive.md)
+- [Rtl](https://mantine.dev/llms/styles-rtl.md)
+- [StyleProp](https://mantine.dev/llms/styles-style.md)
+- [StyleProps](https://mantine.dev/llms/styles-style-props.md)
+- [StylesApi](https://mantine.dev/llms/styles-styles-api.md)
+- [StylesOverview](https://mantine.dev/llms/styles-styles-overview.md)
+- [StylesPerformance](https://mantine.dev/llms/styles-styles-performance.md)
+- [UnstyledComponents](https://mantine.dev/llms/styles-unstyled.md)
+- [UsageWithSass](https://mantine.dev/llms/styles-sass.md)
+- [VanillaExtract](https://mantine.dev/llms/styles-vanilla-extract.md)
+- [VariantsAndSizes](https://mantine.dev/llms/styles-variants-sizes.md)
+
+## X
+
+- [Carousel](https://mantine.dev/llms/x-carousel.md): Embla based carousel component
+- [CodeHighlight](https://mantine.dev/llms/x-code-highlight.md): Highlight code with shiki or highlight.js
+- [Dropzone](https://mantine.dev/llms/x-dropzone.md): Capture files from user with drag and drop
+- [ExtensionsPackage](https://mantine.dev/llms/x-extensions.md)
+- [Modals manager](https://mantine.dev/llms/x-modals.md): Centralized modals manager with option to handle state of multi-step modals
+- [NavigationProgress](https://mantine.dev/llms/x-nprogress.md): Navigation progress bar
+- [Notifications system](https://mantine.dev/llms/x-notifications.md): Mantine notifications system
+- [Rich text editor](https://mantine.dev/llms/x-tiptap.md): Tiptap based rich text editor
+- [Spotlight](https://mantine.dev/llms/x-spotlight.md): Command center for your application
+
+## Other
+
+- [About](https://mantine.dev/llms/about.md)
+- [AllReleases](https://mantine.dev/llms/changelog-all-releases.md)
+- [BrowserSupport](https://mantine.dev/llms/browser-support.md)
+- [Changelog700](https://mantine.dev/llms/changelog-7-0-0.md)
+- [Changelog710](https://mantine.dev/llms/changelog-7-1-0.md)
+- [Changelog7100](https://mantine.dev/llms/changelog-7-10-0.md)
+- [Changelog7110](https://mantine.dev/llms/changelog-7-11-0.md)
+- [Changelog7120](https://mantine.dev/llms/changelog-7-12-0.md)
+- [Changelog7130](https://mantine.dev/llms/changelog-7-13-0.md)
+- [Changelog7140](https://mantine.dev/llms/changelog-7-14-0.md)
+- [Changelog7150](https://mantine.dev/llms/changelog-7-15-0.md)
+- [Changelog7160](https://mantine.dev/llms/changelog-7-16-0.md)
+- [Changelog7170](https://mantine.dev/llms/changelog-7-17-0.md)
+- [Changelog720](https://mantine.dev/llms/changelog-7-2-0.md)
+- [Changelog730](https://mantine.dev/llms/changelog-7-3-0.md)
+- [Changelog740](https://mantine.dev/llms/changelog-7-4-0.md)
+- [Changelog750](https://mantine.dev/llms/changelog-7-5-0.md)
+- [Changelog760](https://mantine.dev/llms/changelog-7-6-0.md)
+- [Changelog770](https://mantine.dev/llms/changelog-7-7-0.md)
+- [Changelog780](https://mantine.dev/llms/changelog-7-8-0.md)
+- [Changelog790](https://mantine.dev/llms/changelog-7-9-0.md)
+- [Changelog800](https://mantine.dev/llms/changelog-8-0-0.md)
+- [Changelog810](https://mantine.dev/llms/changelog-8-1-0.md)
+- [Changelog820](https://mantine.dev/llms/changelog-8-2-0.md)
+- [Changelog830](https://mantine.dev/llms/changelog-8-3-0.md)
+- [Changelog900](https://mantine.dev/llms/changelog-9-0-0.md)
+- [Changelog910](https://mantine.dev/llms/changelog-9-1-0.md)
+- [Changelog920](https://mantine.dev/llms/changelog-9-2-0.md)
+- [Changelog930](https://mantine.dev/llms/changelog-9-3-0.md)
+- [Changelog940](https://mantine.dev/llms/changelog-9-4-0.md)
+- [Changelog950](https://mantine.dev/llms/changelog-9-5-0.md)
+- [Contribute](https://mantine.dev/llms/contribute.md)
+- [GettingStarted](https://mantine.dev/llms/getting-started.md)
+- [NotFound](https://mantine.dev/llms/404.md)
+- [OxcConfig](https://mantine.dev/llms/oxc-config-mantine.md)
+- [PreviousChangelogs](https://mantine.dev/llms/changelog-previous-versions.md)
+- [Support](https://mantine.dev/llms/support.md)
diff --git a/REVIEW.md b/REVIEW.md
new file mode 100644
index 000000000..d78b4fc5e
--- /dev/null
+++ b/REVIEW.md
@@ -0,0 +1,263 @@
+# PR #6502 widget-modernization ultra-review
+
+## Executive result
+
+**Merge recommendation: changes required.** No P0 was found, but the current branch still has five P1 issues: a pre-existing Custom API authorization/redirect weakness exposed by this subsystem review, an inaccessible manual advanced-focus interaction, a likely fixed-position/transform geometry defect, systemic false empty states for failed queries, and unvalidated integration-provided navigation URLs. Eight P2 issues cover raw error disclosure, unsafe runtime-ref interfaces, localization, responsive/theming drift, test coverage, and inaccurate PR copy.
+
+Audit health (Impeccable rubric): accessibility 1/4, performance 2/4, responsive design 2/4, theming 2/4, anti-patterns 3/4; **10/20 (Acceptable, significant work required)**. The UI does not look generically AI-generated; its problem is inconsistent technical behavior beneath an otherwise coherent Mantine vocabulary.
+
+## Reviewed revision and environment
+
+| Item | Value |
+| --- | --- |
+| PR | #6502, `feat: modernize dashboard widgets` |
+| Reviewed head | `96e92485a5fd45f3648cfac0453e614779c414ba` |
+| Base branch / fetched base | `dev` / `d58a47b776a55d04dee2220f59d072b9af8bbed3` |
+| Merge base | `d58a47b776a55d04dee2220f59d072b9af8bbed3` |
+| Diff | 359 files, +15,721/-4,478 |
+| PR state | open, non-draft, `BLOCKED`; no approval decision |
+| Hosted checks at audit start | Fast gate, Container and E2E, CodeQL, JS/TS analysis, Actions analysis, title, auto-fix: green |
+| Inline threads | 34 total, 7 unresolved; only 2 remain substantively valid |
+| Mantine | repository lock: `@mantine/core`, hooks, charts and dates 9.4.1 |
+| Local tools | Node 24.16.0 and pnpm 9.5.0; repository requires Node >=24.18.0 and pnpm >=11.15.1 |
+
+The former red baseline `7b7045202d289b7d83946befcee5d2845ea4a706` had a green Fast gate and a failed Container/E2E run (`30748255760`, job `91498308523`). The latest head has a green Container/E2E job (`30756067198`, job `91519039504`). This proves the current suite passed once; it does not satisfy the requested three-run flake characterization.
+
+## PR-description traceability
+
+| Claim | Result | Evidence / correction |
+| --- | --- | --- |
+| “all 54 widget renderers with compact and advanced modes” | **Inaccurate** | 54 `WidgetKind` values exist. `displayMode="advanced"` reaches 53; `app` is deliberately excluded in `item-content.tsx:51` and documented as compact-only. Change copy to “53 widget renderers; app tiles remain compact,” or implement app advanced mode. |
+| advanced focus: hover, keyboard, touch, geometry | **Partial** | Entry paths, Escape ownership, reduced motion, close focus, touch button and zero-dimension guards exist. WID-002/003 remain. |
+| richer widget context actions | **Partial** | `Menu.ContextMenu` is a good Mantine choice and query scope is item-aware. Dispatch still crosses `any`; Custom API action authorization is not represented. |
+| standardized query identity/cache/status | **Partial** | Query keys, matchers, runtime capture, recovery and tests exist. Thirty-nine of 53 renderer query calls do not read errors; runtime ref registration is render-time mutable state. |
+| safe polling | **Mostly confirmed** | defaults are limited to `widget` namespace; Custom API resume immediately refetches; per-widget intervals exist. State/ref typing still needs redesign. |
+| partial-failure rendering | **Partial** | settlement helper and several routers are strong; many renderer-level total failures still appear empty/disconnected. |
+| bounded integration responses | **Mostly confirmed** | common bounded reader, Custom API 2 MiB, timetable 512 KiB, Traefik bounds and Beszel queue bounds exist. Custom action execution remains outside the hardened fetch path. |
+| timetable hardening | **Confirmed** | board/item permission checks, saved-value comparison, public-address resolution, private ranges, per-request DNS re-resolution, pinned dispatcher, redirect rejection, timeouts, response bounds and schemas are present. |
+| precise placement | **Mostly confirmed** | mouse, touch tolerance, keyboard, occupied-cell validation, dynamic bounds, nearest fit and immediate persistence exist. Failure/race/live responsive coverage remains insufficient. |
+| widget catalog documentation | **Partial** | all kinds have pages and shared interactions; wording overclaims focus behavior and validation counts are stale. |
+| validation: 40 files/162 tests, 6/6 E2E | **Stale** | current diff contains 57 changed unit-spec files (including three E2E specs); repository has 42 widget spec files and six E2E specs. Update from the exact final run. |
+| independent reviews “pass” | **Not supported** | unresolved valid findings, current P1s, and unavailable live QA contradict an unqualified pass. |
+
+## Mantine suitability ledger
+
+Legend: **U** already used appropriately; **C** consolidation/replacement candidate; **R** relevant but current implementation can stay; **N** not relevant to widget runtime; **D** dependency/version addition. Exact 9.4.1 package archives were inspected in `/tmp`; live docs/Context7 include 9.5.0.
+
+### Core catalog
+
+- **U:** ActionIcon, Alert, Anchor, Avatar, Badge, Box, Button, Card, Center, Code, Divider, Flex, Grid, Group, Image, Loader, Menu (`Menu.ContextMenu`), Overlay, Paper, Popover, Portal, Progress, RingProgress, ScrollArea, SimpleGrid, Skeleton, Stack, Table, Tabs, Text, ThemeIcon, Title, Tooltip, UnstyledButton.
+- **C:** Accordion (dense integration sections), DataList (semantic label/value stats), EmptyState (replace bespoke empty state), FocusTrap and Modal compound API (WID-002), LoadingOverlay (background refetch without deleting content), NumberFormatter, OverflowList/Scroller (responsive action and chip rows), Table.ScrollContainer, Timeline (activity/feed histories), VisuallyHidden and Kbd, CloseButton, Dialog/HoverCard/Notification where persistent errors/actions need semantics.
+- **R:** Affix, AppShell, AspectRatio, BackgroundImage, Breadcrumbs, Burger, Checkbox, Chip, Collapse, ColorInput/ColorPicker/ColorSwatch/AlphaSlider/AngleSlider/HueSlider, Combobox/ComboboxPopover, Container, CopyButton, Drawer, Fieldset, FileButton/FileInput, FloatingIndicator/FloatingWindow, Highlight, Indicator, Input/JsonInput, List, Mark, Marquee, MaskInput, Menubar, MultiSelect/NativeSelect/NumberInput/PasswordInput/PillsInput/PinInput/Radio/RangeSlider/Rating/SegmentedControl/Select/Slider/Switch/TagsInput/Textarea/TextInput, Pagination, Pill, SemiCircleProgress, Space, Splitter, Spoiler, Stepper, Transition, Tree/TreeSelect, Typography. Use only where an existing widget requirement matches; do not churn working layouts.
+- **N:** Alpha/color/angle primitives outside configuration forms, AppShell/navigation primitives, TableOfContents, CorePackage documentation.
+- **D (9.5, not 9.4.1):** Cascader. **RollingNumber and Splitter are present in 9.4.1.**
+
+### Hooks catalog
+
+- **C:** `useFocusReturn`, `useFocusTrap`, `useReducedMotion`, `useRovingIndex`, `useLongPress`, `useScroller`, `useElementSize`, `useViewportSize`, `useHotkeys`, `useMediaQuery`, `useResizeObserver`.
+- **U/R:** focus-within, hover, disclosure, click-outside, merged-ref, interval/timeout, local-storage, event/window listeners, throttled/debounced values and list/set/map/state helpers are available in 9.4.1 and should replace local mechanics only when behavior and tests improve.
+- **N:** document title/favicon/hash/headroom/page-leave/OS/eye-dropper/fullscreen/network/orientation and other page-level utilities have no direct widget-remediation need. Every hook listed under `## Hooks` in `MANTINE.md` is covered by this rule; no hook requires 9.5 for the recommendations above.
+
+### Form, dates, charts, schedule, extensions, theme and styles
+
+- **Form:** existing `@homarr/form` should remain the abstraction over all cataloged form APIs. No widget-runtime replacement; use current validation/status APIs for widget editors (**R**).
+- **Dates:** all catalog entries are in installed 9.4.1 dates. `Calendar`, `MiniCalendar`, and `TimeValue` are candidates; other picker/input entries are editor-only (**R**). Importing dates directly into `@homarr/widgets` requires adding that workspace dependency (**D**).
+- **Charts:** 9.4.1 exports Area, Bar, BarsList, Bubble, Composite, Donut, Funnel, Heatmap, Line, Pie, Radar, RadialBar, Sankey, Scatter, Sparkline and Treemap (**C/R**). Prefer Sparkline for tiny trends, BarsList for ranked values, Heatmap for calendar/activity density, Composite for mixed analytics. **BulletChart and SunburstChart are 9.5-only (D)**. Replacement requires accessibility and bundle comparison, not blanket Recharts removal.
+- **Schedule:** all `AgendaView`, day/week/month/year/resource views and Schedule pages require new `@mantine/schedule` dependency (**D**). AgendaView is the only plausible calendar-widget candidate; its weight and semantics must beat the existing grouped list before adoption.
+- **Guides/FAQ/Other:** server components, portal testing, scroll lock, accessibility, nested popovers, zoom, responsive styling and version changelogs are relevant references (**R**); framework/setup/contribution/old migration entries are **N**. The 9.5 changelog is informational only.
+- **Theming/styles:** Colors, ColorSchemes, DefaultProps, MantineProvider, ThemeObject, CSS variables, data attributes, CSS Modules, responsive/RTL/style props/Styles API/performance are **U/R**. WID-009 requires shared layer/color tokens. Emotion, Sass, Vanilla Extract and unrelated global setup are **N**.
+- **Extensions:** existing modals, notifications, spotlight and rich-text abstractions are **U**; Carousel could consolidate Immich only after behavior parity; Dropzone/CodeHighlight/NProgress are **N** for this audit.
+
+## Complete 54-widget coverage matrix
+
+“Test” means a focused widget-local spec exists, not that all required states are covered. Every row still requires the common contract suite in WID-013.
+
+| WidgetKind | Family | Advanced | Focused test | Principal audit gap |
+| --- | --- | --- | --- | --- |
+| clock | basic | yes | no | query error, locale-format options |
+| weather | basic/feed | yes | yes | query error; dayjs locale/time patterns |
+| app | basic/link | **no** | no | PR wording; URL contract |
+| iframe | custom content | yes | yes | manual focus/iframe trapping; URL privacy thread now fixed |
+| video | custom content | yes | no | media/focus/live behavior |
+| notebook | notes | yes (inner) | yes | editor focus inside manual surface |
+| anchorNote | notes | yes | no | query error, save/error regression |
+| dnsHoleSummary | network | yes | no | total query error, hard-coded chart colors |
+| dnsHoleControls | network/security | yes | no | total error and permission matrix |
+| smartHome-entityState | smart home | yes | no | raw state in aria; action permissions |
+| smartHome-executeAutomation | smart home | yes | no | mutation/permission/edit-mode E2E |
+| stockPrice | analytics | yes | yes | total error |
+| mediaServer | media | yes | no | total error and table a11y |
+| calendar | calendar | yes | yes | total error; fixed HH:mm; schedule tradeoff |
+| downloads | media | yes | yes | four-state/component coverage, arbitrary z-index |
+| mediaRequests-requestList | media | yes | no | total error; external URLs/actions |
+| mediaRequests-requestStats | media | yes | no | total error; links/colors |
+| mediaTranscoding | media | yes | yes | total error and responsive table |
+| mediaMissing | media | yes | yes | total error and external URL |
+| minecraftServerStatus | infrastructure | yes | no | total error/malformed payload |
+| networkControllerSummary | networking | yes | no | total error; WAN/unknown localization |
+| networkControllerStatus | networking | yes | no | responsive rule duplication |
+| rssFeed | feed | yes | yes | strong stale/partial state; locale relative time |
+| bookmarks | basic/link | yes | yes | recomputation; URL contract |
+| indexerManager | media | yes | no | total error; runtime action ref |
+| healthMonitoring | infrastructure | yes | yes | integration query error |
+| releases | infrastructure/feed | yes | yes | secret/item authorization needs E2E |
+| mediaReleases | media | yes | no | total error; external URLs |
+| dockerContainers | infrastructure | yes | yes | total error; z-index/table semantics |
+| firewall | networking/security | yes | yes | partial-query matrix; loose router generics |
+| notifications | infrastructure | yes | no | total error; untrusted href |
+| systemResources | infrastructure | yes | yes | total error; previous network thread fixed |
+| coolify | infrastructure | yes | yes | total error; URL validation |
+| systemDisks | infrastructure | yes | yes | total error |
+| timetable | calendar | yes | no | backend strong; component locale/live tests absent |
+| immich-serverStats | media | yes | yes | two ignored query errors |
+| immich-albumCarousel | media | yes | yes (query) | query error and nested overlay/focus E2E |
+| paperlessNgx | analytics | yes | no | former error thread fixed, no regression spec |
+| patchmon | infrastructure | yes | yes | total error |
+| bazarr | media | yes | yes | total error |
+| tracearr | analytics | yes | yes | total error |
+| speedtestTracker | analytics | yes | yes | total error |
+| uptimeKuma | infrastructure | yes | yes | total error |
+| audioStats | media | yes | yes | good dual-error handling; partial-state tests needed |
+| umami | analytics | yes | no | runtime query registration; chart a11y |
+| vpn | networking/security | yes | no | total error; status/permission matrix |
+| archiveTeamWarrior | infrastructure | yes | yes | suspense path; docs present |
+| ups | infrastructure | yes | no | total error |
+| beszelSystemTable | monitoring | yes | yes | nested chart/focus and live subscription |
+| beszelSystemGrid | monitoring | yes | no | live/error UI; no focused renderer test |
+| beszelAlerts | monitoring | yes | no | partial error and status semantics |
+| beszelSystemStats | monitoring | yes | yes | runtime refs, locale tooltip |
+| traefik | networking | yes | no | total error; bounded backend positive |
+| customApi | custom content/security | yes | yes | WID-001/007/008; polling resume fixed |
+
+## Severity-ranked findings
+
+### WID-001 — P1 confirmed, pre-existing: Custom API actions lack resource authorization and hardened fetch policy
+
+- **Location/claim:** `packages/api/src/router/custom-widget/custom-widget-router.ts:57-102,392-451`; “harden Custom API” and action-permission semantics.
+- **Evidence/reproduction:** any authenticated account can call `customWidget.all`, learn every definition ID and URL, then call `customWidget.execute({definitionId})`. The mutation verifies neither board nor item nor an action permission. It decrypts administrator-provided secrets, uses `new URL()` only, and `redirect: "follow"`. The PR hardened `widget.customApi.getData`, but not this sibling execution path.
+- **Impact/rule:** unauthorized side effects against internal services and authenticated redirect chains; broken object-level authorization. A view-only account can invoke administrator-created controls outside any board context.
+- **Correction:** require `{boardId,itemId,definitionId}`; load the item and verify it is `customApi`, belongs to the board, references the definition, and the caller has an explicit execute policy. Until that policy exists, restrict to admin. Share `validateCustomApiUrl`, timeout, redirect rejection, bounded disposal and redacted errors with getData. Compatibility: old direct callers must send item/board context.
+- **Tests:** procedure tests for anonymous, unrelated authenticated, view-only, modifier, admin, mismatched item/definition, disabled definition, redirects, credential URL, timeout and secret non-disclosure; E2E action button across roles.
+
+### WID-002 — P1 confirmed, PR-introduced: manual advanced focus is not an accessible modal
+
+- **Location:** `advanced-focus/context.tsx:194-209`, `items/item-content.tsx:113-189`.
+- **Evidence:** manual mode renders an Overlay plus a `role="region"` Card. There is no FocusTrap, `aria-modal`, background inertness, scroll lock or backdrop dismissal. Only the close button is initially focused; Tab can leave the surface and activate dimmed board controls.
+- **Impact/rule:** keyboard/screen-reader users lose the interaction boundary; WCAG 2.1.2, 2.4.3 and ARIA dialog pattern. Iframes/editors make escape especially likely.
+- **Correction/Mantine:** render manual mode through `Modal.Root` compound parts (or ModalBase), using its portal, FocusTrap, scroll lock, Escape/return-focus and semantic content. Preserve preview mode as non-modal. Configure nested overlays and `removeScrollProps`; keep a 44px `Modal.CloseButton` and explicit title via VisuallyHidden if needed.
+- **Tests:** RTL portal/focus-cycle/return tests; Playwright Tab/Shift+Tab, nested Menu/Select/Popover/editor/iframe, backdrop and every close path; reduced motion and 200% zoom.
+
+### WID-003 — P1 probable, PR-introduced: fixed advanced surface remains under transformed Gridstack ancestry
+
+- **Location:** `advanced-focus.module.css:35-42`; Card remains inside the Gridstack item while only the backdrop is portaled.
+- **Evidence:** CSS fixed descendants establish their containing block at a transformed ancestor. Gridstack uses transforms for positioned items, so viewport-derived `left/top` can be interpreted relative to the item on affected layouts. A Portal wrapper exists only for Overlay.
+- **Impact:** off-screen, clipped or incorrectly scaled focus surface across breakpoints/remounts.
+- **Correction:** portal the focused surface itself (naturally achieved by WID-002) and calculate geometry in the same viewport coordinate system. Do not compensate with transform-specific offsets.
+- **Tests:** real Gridstack at every layout/viewport, scrolled page, header, dynamic section and resize/remount; assert bounding rect within viewport and finite scale.
+
+### WID-004 — P1 confirmed, regression-exposed/systemic: query failures still become valid empty/disconnected UI
+
+- **Location:** 39 of 53 renderer query calls do not read `error`, including bookmarks, weather, calendar, media server, system resources, Coolify, DNS Hole, Tracearr, notifications, Immich, VPN and others listed in the matrix. Query defaults do not set `throwOnError` (`trpc.tsx:69-93`).
+- **Evidence:** TanStack Query returns `data=undefined` on total failure. Components default to `[]`, `null`, or empty branches, so the board ErrorBoundary is never reached. Network Controller and Paperless were fixed, proving the pattern; it was not completed.
+- **Impact:** operators are told “empty” or “disconnected” when monitoring failed, violating the product’s truthful-state requirement.
+- **Correction/Mantine:** introduce a shared `WidgetQueryState` contract distinguishing initial Skeleton, background LoadingOverlay, stale Alert, partial warning, true EmptyState and terminal error. Either explicitly throw only when no usable cached data or render a shared error Alert. Preserve stale data.
+- **Tests:** parameterized contract tests for every queried widget: initial, success-empty, total failure, stale+failure, partial failure, refetch, remount/persisted cache and sibling isolation.
+
+### WID-005 — P1 confirmed, PR-introduced/systemic: integration-provided links bypass a shared URL policy
+
+- **Location:** examples include `media-missing/component.tsx:291`, `notifications/component.tsx:77`, media requests list/stats, Coolify resource/server links, releases, bookmarks and iframe. Only RSS and custom JSX visibly use explicit protocol sanitizers.
+- **Evidence:** dynamic strings are assigned directly to `href`/new-tab controls. Integration APIs and remote feeds are trust boundaries; no renderer-wide `http/https` guard is enforced.
+- **Impact:** unsafe schemes, credential-bearing URLs, internal detail disclosure and inconsistent opener behavior.
+- **Correction:** add one typed application URL helper returning a sanitized URL/undefined, with allowed schemes per use case, credential stripping/rejection, consistent `noopener noreferrer`, and disabled non-link presentation. Validate again server-side for action endpoints.
+- **Tests:** `javascript:`, `data:`, malformed, credential, relative, http/https and missing URLs for each shared link primitive.
+
+### WID-006 — P2 confirmed, PR-introduced: runtime query/action state mutates untyped refs during render
+
+- **Location:** `definition.ts:121-162`; runtime registration calls in media missing/transcoding, audio, calendar, Umami, Beszel and Immich; `widget-context-menu.tsx:157-174`.
+- **Evidence:** `setWidgetRuntimeQueries` mutates a shared object during render; concurrent/aborted renders can publish uncommitted query identity. Action dispatch casts the definition to `Record<string,unknown>` and `any`, then casts its result back.
+- **Correction:** make definition generics preserve kind/options/action types end-to-end; replace stringly opaque ref slots with a typed per-item registration API updated in a committed effect (or use `useSyncExternalStore`). Separate query registration from imperative actions.
+- **Tests:** StrictMode, interrupted/remount, options change and cleanup; compile-time `tsd`/type assertions rejecting wrong action props.
+
+### WID-007 — P2 confirmed, regression-exposed: raw backend errors are exposed to users and assistive text
+
+- **Location:** Custom API UI `component.tsx:561-576`; API `custom-api.ts:79-85`; several partial fallbacks use `error.message`.
+- **Impact:** internal hostnames, request paths and implementation details can appear in tooltips/aria labels and logs.
+- **Correction/Mantine:** return stable error codes plus redacted public messages; keep detailed causes server-side with correlation IDs. Render localized Alert/Notification details, never raw throwable text.
+- **Tests:** errors containing credentials, query strings, private hosts and multiline backend bodies must not reach tRPC payload, DOM, accessibility tree or notifications.
+
+### WID-008 — P2 confirmed, PR-introduced/regression-exposed: locale handling remains incomplete
+
+- **Locations:** Beszel chart/tooltip dayjs formats, calendar event `HH:mm`, downloads `YYYY-MM-DD HH:mm`, timetable `HH:mm:ss`, weather day/month/time formats; `_inputs/widget-location-input.tsx:199` hardcodes `Intl.NumberFormat("en")`.
+- **Also:** `beszel/_shared/disk-usage.tsx:41`, stats loading aria label, Network Controller `WAN`/`unknown` are English/raw accessible strings.
+- **Correction:** centralize app-locale date/time/number/duration/status helpers; load canonical dayjs locale only at the boundary; use localized translation keys for aria/status. NumberFormatter is suitable for simple display but application helpers should own locale.
+- **Tests:** at least `en-US`, `fr-FR`, `de-DE`, RTL locale, 12/24-hour preference and long translations, including accessibility names.
+
+### WID-009 — P2 confirmed: layer and color tokens are inconsistent
+
+- **Locations:** downloads z-index 1000 and rgba row colors; item title z-index 4; item menu/dynamic menu 10; media server white rgba; Indexer Manager hex colors; DNS Hole rgba palette; Umami hex tick colors.
+- **Correction:** define shared semantic layer tokens relative to Mantine CSS z-index variables and semantic status/chart tokens respecting light/dark/forced colors. Do not replace intentional service branding.
+- **Tests:** light/dark/forced-colors with nested overlays and tooltip ordering.
+
+### WID-010 — P2 confirmed: responsive decisions are duplicated and under-tested
+
+- **Location:** Network Controller Status `component.tsx:44,59-78` (open valid thread); Bookmark `component.tsx:94` recomputation (valid but low-impact thread); similar width/height literals across renderers.
+- **Correction:** small typed breakpoint lookup helpers per family, memoized only for genuinely expensive layout. Prefer container-query Grid/SimpleGrid where structural. Do not cargo-cult `useMemo` for a cheap pure calculation; benchmark Bookmark before accepting the review suggestion.
+- **Tests:** boundary tables for minimum/typical/wide/short/advanced sizes and 200% zoom.
+
+### WID-011 — P2 confirmed: PR/docs overstate behavior and validation
+
+- **Location:** PR body, board/getting-started copy “advanced preview in place,” validation numbers, and unqualified review pass.
+- **Correction:** state 53 advanced renderers plus compact-only app; call manual focus an overlay only after WID-002/003; publish exact final-SHA check/test counts and disclose unsupported/live-untested states.
+
+### WID-012 — P2 confirmed: focused automated coverage is far below the 54-widget/data-state claim
+
+- **Evidence:** 42 widget-local spec files are helper-heavy; 20+ renderers have no focused spec. Six E2E files exist, but only board interactions and Custom JSX directly exercise this modernization. The earlier Custom JSX login wait failed once and current exact-route wait remains.
+- **Correction:** add shared renderer contract harness plus family E2Es. Replace Custom JSX’s exact post-submit URL race with a shared login helper that waits for authenticated session/stable destination, then run it three times in CI.
+
+### WID-013 — P2 confirmed: open review-thread state no longer matches code
+
+| Thread | Classification |
+| --- | --- |
+| iframe complete URL | already fixed/false positive at current line: only host is rendered |
+| system resources network gate | already fixed, outdated |
+| RSS total error | already fixed: no-data error throws; stale data retained |
+| bookmarks memoization | valid P3/P2-low; benchmark first |
+| network-controller total error | already fixed, outdated |
+| network-controller breakpoint consolidation | valid P2 maintainability |
+| Paperless total error | already fixed, outdated |
+
+Resolve the five stale threads with evidence; address or explicitly disposition the two live suggestions. Re-run review because CodeRabbit was paused during active development.
+
+## Systemic remediation roadmap
+
+1. **Security/authorization:** WID-001 and WID-005; add negative-role/protocol tests before merge.
+2. **Interaction accessibility:** replace manual focus with portaled Mantine modal semantics (WID-002/003), then test nested widget content.
+3. **Truthful data state:** build the shared query-state contract and migrate all 39 ambiguous sites; keep valid stale data and partial results.
+4. **Typed interfaces:** replace `widgetStateRef` slot mutation and `any` context dispatch with committed typed registrations.
+5. **Widget families:** media/downloads, infrastructure, networking/security, smart-home, analytics/calendar/feed, then Beszel; apply URL, state, locale, responsive and a11y contracts in that order.
+6. **Design-system cleanup:** semantic layers/colors and restrained Mantine consolidation. Do not add Schedule or upgrade to 9.5 without a separate dependency/bundle decision.
+7. **Docs/PR:** correct renderer count, behavior and exact validation evidence.
+8. **Final proof:** frozen install on supported Node/pnpm; format, lint, full typecheck, affected and full unit tests, production and docs builds; Custom JSX three times; complete production-container E2E; desktop/tablet/mobile keyboard/touch/light/dark/reduced-motion/zoom/a11y-tree QA. Push nothing until all refer to one unchanged SHA; close every review thread and obtain required approval.
+
+## Positive findings
+
+- Timetable is the strongest security work in the PR: saved resource authorization, private-range rejection, DNS rebinding resistance through pinned lookup, redirect rejection, bounds and schemas are coherently tested.
+- Bounded response helpers, Beszel bounded queue/cancellation, and partial-integration settlement materially reduce failure blast radius.
+- RSS preserves stale data and distinguishes partial feed failure; Network Controller and Paperless now correctly escalate total failures.
+- Item-scoped query matchers and tests address sibling-widget refresh isolation; global polling defaults are restricted to the widget namespace.
+- Touch long-press has movement tolerance; focus scale guards prevent Infinity/NaN; reduced-motion and remount cleanup are present.
+- Existing Homarr theme, Mantine components and shared UI vocabulary are generally preserved. Most proposed Mantine work is consolidation, not redesign.
+
+## Validation evidence and uncertainty
+
+- `MANTINE.md` was fetched from `https://mantine.dev/llms.txt` and passed byte-for-byte `cmp`; `llms-full.txt` stayed in `/tmp`.
+- Context7 current Mantine docs were queried for overlay/focus, responsive/data-state/accessibility, charts and Schedule. Static 9.4.1 archives verified exact exports; Cascader, BulletChart and SunburstChart are 9.5-only.
+- Local frozen install could not start because host Node/pnpm are below repository engine requirements. No dependencies, source files or machine toolchain were changed.
+- Docker API access is denied, so production-container E2E could not be rerun locally. Hosted exact-head Fast gate and Container/E2E are green.
+- `agent-browser` is not installed. Temporary `npx` execution was rejected by the environment’s security reviewer, so live exploratory QA/a11y-tree inspection was not performed.
+- External integrations were not available; malformed/partial/permission combinations are static-analysis conclusions unless a focused test already exists.
+- This review intentionally changes no production code and makes no commit, push, thread resolution or PR edit.
+
+Finalization must re-query the PR head/checks/threads. If the head differs from the reviewed SHA, this report is a snapshot and the delta requires review before merge.
+
+**Final refresh (2026-08-03):** head remained `96e92485a5fd45f3648cfac0453e614779c414ba`; all reported hosted checks remained successful; merge state remained `BLOCKED` with no approval decision; unresolved threads remained 7 of 34. The branch did not change during the audit.

From 61a2f8cb6c254ead5f5a6205e8fa9189c87b0afc Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 17:18:22 +0200
Subject: [PATCH 33/75] feat: modernize widget experience

---
 .../advanced/keyboard-shortcuts/index.mdx     |  24 +-
 .../after-the-installation.mdx                |   8 +-
 apps/docs/docs/management/boards/index.mdx    |   6 +-
 .../docs/management/custom-widgets/index.mdx  |  10 +
 apps/docs/docs/widgets/bazarr/index.mdx       |   2 +-
 .../widgets/beszel-system-stats/index.mdx     |   2 +-
 apps/docs/docs/widgets/coolify/index.mdx      |   2 +-
 apps/docs/docs/widgets/custom-api/index.mdx   |   1 +
 .../docs/widgets/dns-hole-controls/index.mdx  |   4 +-
 .../docs/widgets/dns-hole-summary/index.mdx   |   4 +-
 apps/docs/docs/widgets/iframe/index.mdx       |   2 +-
 .../docs/widgets/indexer-manager/index.mdx    |   2 +-
 .../docs/widgets/media-request-list/index.mdx |   2 +-
 .../widgets/media-request-stats/index.mdx     |   4 +-
 .../widgets/minecraft-server-status/index.mdx |   2 +-
 .../network-controller-summary/index.mdx      |   4 +-
 apps/docs/docs/widgets/notebook/index.mdx     |   2 +-
 .../docs/docs/widgets/notifications/index.mdx |   2 +-
 .../docs/docs/widgets/paperless-ngx/index.mdx |   2 +-
 apps/docs/docs/widgets/patchmon/index.mdx     |   2 +-
 apps/docs/docs/widgets/releases/index.mdx     |   2 +-
 apps/docs/docs/widgets/rss-feed/index.mdx     |   2 +-
 apps/docs/docs/widgets/stock-price/index.mdx  |   4 +-
 apps/docs/docs/widgets/system-disks/index.mdx |   2 +-
 apps/docs/docs/widgets/video/index.mdx        |   2 +-
 apps/docs/docs/widgets/vpn/index.mdx          |   2 +-
 .../src/components/widgets/interactions.tsx   |  71 ++--
 .../custom-widgets/_custom-widget-actions.tsx |   4 +-
 .../custom-widgets/_custom-widget-form.tsx    |  10 +-
 .../custom-widgets/_custom-widget-preview.tsx |   6 +-
 .../advanced-focus/advanced-focus.module.css  |  40 +-
 .../board/advanced-focus/context.tsx          |  44 +-
 .../board/advanced-focus/escape.spec.ts       |  20 +-
 .../components/board/advanced-focus/escape.ts |  12 +-
 .../advanced-focus/manual-surface.spec.ts     | 107 +++++
 .../board/advanced-focus/manual-surface.tsx   | 101 +++++
 .../components/board/advanced-focus/wheel.ts  |   5 +-
 .../components/board/items/item-content.tsx   | 246 +++++++-----
 .../src/components/board/items/item-menu.tsx  |   2 +-
 .../board/items/item-select-modal.tsx         |   4 +-
 .../board/items/widget-context-menu.tsx       |  51 +--
 .../items/widget-hover-overlay.module.css     |  11 +-
 .../category/category-menu-actions.tsx        |  11 +-
 .../board/sections/dynamic/dynamic-menu.tsx   |   2 +-
 e2e/board-advanced-interactions.spec.ts       | 170 +++++---
 e2e/custom-widgets-custom-jsx.spec.ts         |  75 ++--
 e2e/shared/login.ts                           |  51 +++
 .../custom-widget/custom-widget-access.ts     |  45 +++
 .../custom-widget/custom-widget-router.ts     | 207 +++++-----
 .../src/router/custom-widget/display-data.ts  |  26 +-
 packages/api/src/router/location.ts           |   7 +-
 .../api/src/router/test/custom-widget.spec.ts | 376 ++++++++++++++++++
 packages/api/src/router/test/location.spec.ts |  36 ++
 .../partial-integration-failures.spec.ts      | 108 ++++-
 .../__tests__/custom-api-security.spec.ts     |   2 +
 packages/api/src/router/widgets/beszel.ts     |  25 +-
 packages/api/src/router/widgets/calendar.ts   |   4 +-
 .../src/router/widgets/custom-api-security.ts |  46 +++
 packages/api/src/router/widgets/custom-api.ts |  90 ++---
 packages/api/src/router/widgets/firewall.ts   |   4 +-
 .../api/src/router/widgets/indexer-manager.ts |   4 +-
 .../api/src/router/widgets/media-organizer.ts |   4 +-
 .../api/src/router/widgets/media-requests.ts  |   6 +-
 .../api/src/router/widgets/media-server.ts    |   4 +-
 .../api/src/router/widgets/notifications.ts   |   4 +-
 packages/api/src/router/widgets/releases.ts   |  24 +-
 packages/api/src/router/widgets/vpn.ts        |   4 +-
 packages/api/src/settle-integrations.ts       |   4 +
 .../api/src/test/settle-integrations.spec.ts  |  13 +-
 packages/common/src/url.ts                    |  35 ++
 .../actions/items/children-action-item.tsx    |  13 +-
 .../actions/items/group-action-item.tsx       |  13 +-
 .../widget-custom-widget-select-input.tsx     |   6 +-
 .../src/_inputs/widget-location-input.tsx     |  10 +-
 ...widget-multiReleasesRepositories-input.tsx |  12 +-
 .../src/advanced-focus-support.spec.ts        |  42 ++
 .../widgets/src/anchor-note/component.tsx     |   5 +-
 packages/widgets/src/app/component.tsx        | 174 ++++----
 .../widgets/src/app/ping/ping-indicator.tsx   |   4 +-
 .../widgets/src/audio-stats/component.tsx     |  15 +-
 packages/widgets/src/bazarr/component.tsx     |  27 +-
 packages/widgets/src/bazarr/index.ts          |   1 +
 packages/widgets/src/bazarr/layout.spec.ts    |   4 +-
 .../widgets/src/beszel-alerts/component.tsx   |   7 +-
 .../src/beszel-system-grid/component.tsx      |  23 +-
 .../src/beszel-system-stats/component.tsx     |  79 ++--
 .../widgets/src/beszel-system-stats/index.ts  |   1 +
 .../src/beszel-system-table/component.tsx     |  98 +----
 packages/widgets/src/beszel/_shared/chart.tsx |  57 +--
 .../widgets/src/beszel/_shared/stats-view.tsx |  47 ++-
 .../widgets/src/beszel/_shared/tooltip.tsx    |  11 +-
 packages/widgets/src/bookmarks/component.tsx  | 283 ++++++-------
 packages/widgets/src/bookmarks/layout.spec.ts |   2 +-
 .../src/calendar/calendar-event-list.tsx      |  72 ++--
 packages/widgets/src/calendar/component.tsx   |  32 +-
 packages/widgets/src/clock/component.tsx      |  23 +-
 .../src/common/application-url.spec.ts        |  30 ++
 .../widgets/src/common/application-url.ts     |   1 +
 packages/widgets/src/common/locale.spec.ts    |  35 ++
 packages/widgets/src/common/locale.ts         |  61 +++
 .../src/common/query-state-indicator.spec.ts  |  56 +++
 .../src/common/query-state-indicator.tsx      |  38 ++
 .../widgets/src/common/query-state.spec.ts    |  39 ++
 packages/widgets/src/common/query-state.ts    |  22 +
 packages/widgets/src/coolify/component.tsx    |  34 +-
 packages/widgets/src/coolify/index.ts         |   1 +
 .../widgets/src/coolify/instance-card.tsx     |  22 +-
 packages/widgets/src/coolify/resource-row.tsx |  16 +-
 .../widgets/src/coolify/servers-section.tsx   |   8 +-
 .../src/coolify/single-instance-layout.tsx    |  31 +-
 .../src/coolify/use-advanced-open-sections.ts |  29 --
 packages/widgets/src/custom-api/component.tsx |  77 ++--
 .../src/custom-api/custom-jsx-display.spec.ts |  10 +
 .../src/custom-api/custom-jsx-display.tsx     |  29 +-
 packages/widgets/src/custom-api/index.ts      |  32 +-
 .../widgets/src/custom-api/jsx-whitelist.ts   |  20 +-
 packages/widgets/src/definition.spec.ts       |  24 +-
 packages/widgets/src/definition.ts            |  67 ++--
 .../src/dns-hole/controls/component.tsx       |  18 +-
 .../widgets/src/dns-hole/controls/index.ts    |   1 +
 .../src/dns-hole/summary/component.tsx        |  52 ++-
 .../widgets/src/dns-hole/summary/index.ts     |   1 +
 packages/widgets/src/docker/component.tsx     |   5 +-
 packages/widgets/src/downloads/component.tsx  |  29 +-
 packages/widgets/src/errors/component.spec.ts |  61 +++
 packages/widgets/src/errors/component.tsx     |   5 +-
 packages/widgets/src/firewall/component.tsx   |  46 ++-
 .../src/firewall/failure-state.spec.ts        |  10 +
 .../cluster/cluster-health.tsx                |  31 +-
 .../cluster/resource-table.tsx                |  24 +-
 .../src/health-monitoring/component.tsx       |   3 +-
 .../src/health-monitoring/system-health.tsx   |   7 +-
 packages/widgets/src/iframe/component.tsx     |  31 +-
 packages/widgets/src/iframe/index.ts          |  46 ++-
 .../src/immich/album-carousel/component.tsx   |  57 ++-
 .../src/immich/album-carousel/index.ts        | 109 +++--
 .../widgets/src/immich/albums-query.spec.ts   |  63 ++-
 .../immich/server-stats/component.module.css  |   5 -
 .../src/immich/server-stats/component.tsx     |  76 ++--
 packages/widgets/src/index.tsx                |   4 +
 .../src/indexer-manager/component.module.css  |  13 +
 .../widgets/src/indexer-manager/component.tsx | 123 +++---
 packages/widgets/src/indexer-manager/index.ts |  25 +-
 .../widgets/src/media-missing/component.tsx   |  53 +--
 .../widgets/src/media-releases/component.tsx  |  49 ++-
 .../src/media-requests/list/component.tsx     |  61 +--
 .../widgets/src/media-requests/list/index.ts  |  39 +-
 .../src/media-requests/stats/component.tsx    | 109 +++--
 .../widgets/src/media-requests/stats/index.ts |   9 +-
 .../widgets/src/media-server/component.tsx    |  14 +-
 .../src/media-transcoding/component.tsx       |  90 +++--
 .../src/media-transcoding/layout.spec.ts      |  19 +-
 .../src/minecraft/server-status/component.tsx |  29 +-
 .../src/minecraft/server-status/index.ts      |   1 +
 .../network-status/component.tsx              |  24 +-
 .../network-status/layout.spec.ts             |  49 +++
 .../network-status/layout.ts                  |  42 ++
 .../network-controller/summary/component.tsx  |  90 ++++-
 .../src/network-controller/summary/index.ts   |   1 +
 packages/widgets/src/notebook/index.ts        |   1 +
 packages/widgets/src/notebook/notebook.tsx    |  26 +-
 .../widgets/src/notifications/component.tsx   | 134 ++++---
 packages/widgets/src/notifications/index.ts   |   1 +
 .../widgets/src/paperless-ngx/component.tsx   |  18 +-
 packages/widgets/src/paperless-ngx/index.ts   |   1 +
 packages/widgets/src/patchmon/component.tsx   |  34 +-
 packages/widgets/src/patchmon/index.ts        |   1 +
 packages/widgets/src/releases/component.tsx   |  30 +-
 packages/widgets/src/releases/index.ts        |   1 +
 packages/widgets/src/rssFeed/component.tsx    | 128 +++---
 .../widgets/src/rssFeed/feed-display.spec.ts  |  20 +-
 packages/widgets/src/rssFeed/index.ts         |   1 +
 packages/widgets/src/runtime-hooks.ts         |  40 ++
 .../execute-automation/component.tsx          |  19 +-
 .../src/speedtest-tracker/component.tsx       |   4 +-
 packages/widgets/src/stocks/component.spec.ts |  10 +-
 packages/widgets/src/stocks/component.tsx     |  21 +-
 packages/widgets/src/stocks/index.ts          |   1 +
 .../widgets/src/system-disks/component.tsx    |  24 +-
 packages/widgets/src/system-disks/index.ts    |   1 +
 .../src/system-resources/component.tsx        |   9 +-
 packages/widgets/src/timetable/component.tsx  |  14 +-
 packages/widgets/src/tracearr/component.tsx   |   4 +-
 packages/widgets/src/traefik/component.tsx    |   3 +-
 packages/widgets/src/umami/component.tsx      |  69 ++--
 packages/widgets/src/umami/umami-content.tsx  |  53 ++-
 .../src/umami/umami-events-content.tsx        |  17 +-
 packages/widgets/src/umami/umami-top-list.tsx |  23 +-
 packages/widgets/src/ups/component.tsx        |   3 +-
 .../widgets/src/uptime-kuma/component.tsx     |   3 +-
 packages/widgets/src/video/component.tsx      |  29 +-
 packages/widgets/src/video/index.ts           |   1 +
 packages/widgets/src/vpn/component.tsx        |  62 ++-
 packages/widgets/src/vpn/index.ts             |   1 +
 .../widgets/src/weather/component.spec.ts     |   4 +-
 packages/widgets/src/weather/component.tsx    |  90 +++--
 packages/widgets/src/weather/icon.tsx         |  26 +-
 packages/widgets/src/widget-runtime.spec.ts   |  88 ++++
 198 files changed, 4209 insertions(+), 2295 deletions(-)
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/manual-surface.spec.ts
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
 create mode 100644 e2e/shared/login.ts
 create mode 100644 packages/api/src/router/custom-widget/custom-widget-access.ts
 create mode 100644 packages/api/src/router/test/custom-widget.spec.ts
 create mode 100644 packages/api/src/router/test/location.spec.ts
 create mode 100644 packages/widgets/src/advanced-focus-support.spec.ts
 create mode 100644 packages/widgets/src/common/application-url.spec.ts
 create mode 100644 packages/widgets/src/common/application-url.ts
 create mode 100644 packages/widgets/src/common/locale.spec.ts
 create mode 100644 packages/widgets/src/common/locale.ts
 create mode 100644 packages/widgets/src/common/query-state-indicator.spec.ts
 create mode 100644 packages/widgets/src/common/query-state-indicator.tsx
 create mode 100644 packages/widgets/src/common/query-state.spec.ts
 create mode 100644 packages/widgets/src/common/query-state.ts
 delete mode 100644 packages/widgets/src/coolify/use-advanced-open-sections.ts
 create mode 100644 packages/widgets/src/errors/component.spec.ts
 create mode 100644 packages/widgets/src/network-controller/network-status/layout.spec.ts
 create mode 100644 packages/widgets/src/network-controller/network-status/layout.ts
 create mode 100644 packages/widgets/src/runtime-hooks.ts
 create mode 100644 packages/widgets/src/widget-runtime.spec.ts

diff --git a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
index 1f7842fd7..2896b7a97 100644
--- a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
+++ b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
@@ -6,23 +6,23 @@ tags:
 
 Homarr has the following keyboard shortcuts:
 
-| Shortcut                                   | Description                                                |
-| ------------------------------------------ | ---------------------------------------------------------- |
-| `MOD` + `K`                                | Opens the search bar                                       |
-| `MOD` + `J`                                | Toggles Dark Mode                                          |
-| `MOD` + `E`                                | Toggles Edit Mode                                          |
-| Hold `Shift` while hovering a widget       | Opens its temporary advanced view                          |
-| `Shift` + `Enter` on a focused widget      | Opens its advanced view until it is closed                 |
-| `Esc`                                      | Closes an open advanced view or board menu                 |
-| `Shift` + `F10` on a focused board section | Opens the precise add-item menu at the next available cell |
+| Shortcut                                       | Description                                                |
+| ---------------------------------------------- | ---------------------------------------------------------- |
+| `MOD` + `K`                                    | Opens the search bar                                       |
+| `MOD` + `J`                                    | Toggles Dark Mode                                          |
+| `MOD` + `E`                                    | Toggles Edit Mode                                          |
+| Hold `Shift` while hovering a supported widget | Opens its temporary advanced view                          |
+| `Shift` + `Enter` on a supported widget        | Opens its advanced view until it is closed                 |
+| `Esc`                                          | Closes an open advanced view or board menu                 |
+| `Shift` + `F10` on a focused board section     | Opens the precise add-item menu at the next available cell |
 
 :::tip
 
 Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.
 
-Advanced view and precise placement are available outside edit mode. App tiles stay compact and do not have an
-advanced view. Precise placement still requires permission to change the board and the right-click interaction
-preference to be enabled.
+Advanced view and precise placement are available outside edit mode. Widgets without a distinct advanced experience
+adapt to their normal dimensions instead. Precise placement still requires permission to change the board and the
+right-click interaction preference to be enabled.
 
 :::
 
diff --git a/apps/docs/docs/getting-started/after-the-installation.mdx b/apps/docs/docs/getting-started/after-the-installation.mdx
index 29d56e4eb..2148af841 100644
--- a/apps/docs/docs/getting-started/after-the-installation.mdx
+++ b/apps/docs/docs/getting-started/after-the-installation.mdx
@@ -191,10 +191,10 @@ When entering the edit mode, you'll get some additional buttons to work with:
 - **Exit edit mode**: Click this button to save your changes and exit edit mode.
 
 Outside edit mode, right-click a widget for its live status, refresh, settings, quick options, and supported actions.
-Hold `Shift` while hovering a widget to expand an advanced preview in place while the rest of the board stays visible
-but dimmed. Release `Shift` to close it. You can also focus the widget and press `Shift` + `Enter` to keep its advanced
-view open until you close it. App tiles stay compact. If you can change the board, right-click empty grid space to add
-an item at that position.
+Hold `Shift` while hovering a widget that supports advanced view to expand it in place while the rest of the board
+stays visible but dimmed. Release `Shift` to close it. You can also focus that widget and press `Shift` + `Enter` to
+keep its advanced view open until you close it. Widgets without a distinct advanced experience adapt in place. If you
+can change the board, right-click empty grid space to add an item at that position.
 On a touch device, touch and hold empty grid space for the same precise-placement menu.
 
 To continue, click the option "New Item":
diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 6babee071..85a89001a 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -179,9 +179,9 @@ This will disable the status check for apps.
 
 Widgets expose their routine controls without requiring edit mode:
 
-- Hold `Shift` while hovering a widget to expand its advanced preview in place while the other widgets remain visible
-  but dimmed. Release `Shift` to close it. Focus the widget and press `Shift` + `Enter` to keep the view open until you
-  close it, or use the maximize control on touch devices. App tiles stay compact.
+- Hold `Shift` while hovering a widget that supports advanced view to expand it in place while the other widgets
+  remain visible but dimmed. Release `Shift` to close it. Focus that widget and press `Shift` + `Enter` to keep the view
+  open until you close it, or use the maximize control on touch devices. Other widgets adapt in place instead.
 - Right-click a widget to inspect its live query status, refresh its data, change quick options, open settings, or run
   supported actions. Available controls follow your board and integration permissions.
 - If you can modify the board, right-click or touch and hold an empty grid cell to add an item there. Focus a board
diff --git a/apps/docs/docs/management/custom-widgets/index.mdx b/apps/docs/docs/management/custom-widgets/index.mdx
index 0395253dc..9e7174609 100644
--- a/apps/docs/docs/management/custom-widgets/index.mdx
+++ b/apps/docs/docs/management/custom-widgets/index.mdx
@@ -50,6 +50,16 @@ To create a custom widget, navigate to the **Custom Widgets** section in the man
 | **Action Button**    | Clickable button executing the API request           | Triggers: restart, clear cache           |
 | **Custom JSX**       | Custom JSX template with Mantine v9 components       | Full layout control                      |
 
+## Security and permissions
+
+Custom widget definitions, endpoint details, authentication settings, and secrets are managed by administrators.
+Board editors can select an enabled definition without receiving its endpoint or credentials, while board viewers only
+receive the rendered widget data they are allowed to view. **Action Button** requests are administrator-only.
+
+Custom API requests accept HTTP and HTTPS endpoints without URL-embedded credentials. Redirects are rejected, requests
+time out after 10 seconds, and responses are limited to 2 MiB. Detailed upstream errors stay in the server logs; the
+dashboard only shows a generic failure.
+
 ### AI-Powered JSX Generation
 
 When editing or creating a custom widget with the **Custom JSX** display type, you'll find a **Copy Prompt** button. Clicking it copies a pre-formatted prompt describing your widget's name, API endpoint, and available Mantine components. Paste this into your preferred AI assistant (ChatGPT, Claude, Copilot, etc.) to generate a JSX template tailored to your data.
diff --git a/apps/docs/docs/widgets/bazarr/index.mdx b/apps/docs/docs/widgets/bazarr/index.mdx
index 5cd0c1532..cb35f6c71 100644
--- a/apps/docs/docs/widgets/bazarr/index.mdx
+++ b/apps/docs/docs/widgets/bazarr/index.mdx
@@ -36,7 +36,7 @@ import widgetOverview from "./img/widget-overview.png";
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/beszel-system-stats/index.mdx b/apps/docs/docs/widgets/beszel-system-stats/index.mdx
index 4bc00990e..6ac158aac 100644
--- a/apps/docs/docs/widgets/beszel-system-stats/index.mdx
+++ b/apps/docs/docs/widgets/beszel-system-stats/index.mdx
@@ -34,7 +34,7 @@ This widget displays time-series charts for a selected Beszel system, including
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/coolify/index.mdx b/apps/docs/docs/widgets/coolify/index.mdx
index ff26c0a8d..2feec3a94 100644
--- a/apps/docs/docs/widgets/coolify/index.mdx
+++ b/apps/docs/docs/widgets/coolify/index.mdx
@@ -27,7 +27,7 @@ The Coolify widget displays a compact overview of your Coolify instance. It can
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/custom-api/index.mdx b/apps/docs/docs/widgets/custom-api/index.mdx
index 94eb62116..62603dc12 100644
--- a/apps/docs/docs/widgets/custom-api/index.mdx
+++ b/apps/docs/docs/widgets/custom-api/index.mdx
@@ -26,4 +26,5 @@ See the [Custom Widgets documentation](/docs/management/custom-widgets) for full
 
 :::note
 Custom API widgets must first be created in **Management → Custom Widgets** before they appear in the widget picker.
+Action buttons can only be executed by administrators.
 :::
diff --git a/apps/docs/docs/widgets/dns-hole-controls/index.mdx b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
index c20ba99f9..9b9d1f26f 100644
--- a/apps/docs/docs/widgets/dns-hole-controls/index.mdx
+++ b/apps/docs/docs/widgets/dns-hole-controls/index.mdx
@@ -20,7 +20,7 @@ import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns
 
 <WidgetHeader widget={dnsHoleControlsWidget} categories={["DNS Hole"]} />
 
-This widget lets permitted users enable, disable, or temporarily pause one or more DNS services. It shares the summary query and cache with DNS Hole Summary. Advanced view exposes every selected source, while compact layouts reduce controls according to both widget width and height.
+This widget lets permitted users enable, disable, or temporarily pause one or more DNS services. It shares the summary query and cache with DNS Hole Summary. Every selected source stays available in the normal scrollable view, while cards and controls adapt to the widget&apos;s width and height.
 
 ### Screenshots
 
@@ -53,7 +53,7 @@ import smallSize from "./img/small.png";
 - Apply an action to all available services from the top action row. Homarr keeps successful results visible and reports how many sources failed.
 - Interaction controls only appear when the current user has permission for that integration.
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/dns-hole-summary/index.mdx b/apps/docs/docs/widgets/dns-hole-summary/index.mdx
index f4d7ca418..1e7b966b9 100644
--- a/apps/docs/docs/widgets/dns-hole-summary/index.mdx
+++ b/apps/docs/docs/widgets/dns-hole-summary/index.mdx
@@ -17,7 +17,7 @@ import { dnsHoleSummaryWidget } from ".";
 
 <WidgetHeader widget={dnsHoleSummaryWidget} categories={["DNS Hole"]} />
 
-This widget combines statistics from every selected DNS service, including total queries, blocked queries, and blocklist size. Its data is cached under the same DNS query family as DNS Hole Controls, so placing both widgets on a board does not create a second integration request. Advanced view keeps the aggregate metrics visible and adds a named status chip for each source.
+This widget combines statistics from every selected DNS service, including total queries, blocked queries, and blocklist size. Its data is cached under the same DNS query family as DNS Hole Controls, so placing both widgets on a board does not create a second integration request. When the widget has enough room, it adds a scrollable status row naming each selected source.
 
 ### Screenshots
 
@@ -52,7 +52,7 @@ import { technitiumDnsIntegration } from "@site/docs/integrations/technitium-dns
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/iframe/index.mdx b/apps/docs/docs/widgets/iframe/index.mdx
index c988e0876..5f410a7f3 100644
--- a/apps/docs/docs/widgets/iframe/index.mdx
+++ b/apps/docs/docs/widgets/iframe/index.mdx
@@ -28,7 +28,7 @@ import youtubeStream from "./img/nasa-iss-stream.png";
   <img src={youtubeStream} alt="iframe youtube-iss-stream" width={128 * 3} />
 </div>
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/indexer-manager/index.mdx b/apps/docs/docs/widgets/indexer-manager/index.mdx
index 3b81c0023..2deeecd66 100644
--- a/apps/docs/docs/widgets/indexer-manager/index.mdx
+++ b/apps/docs/docs/widgets/indexer-manager/index.mdx
@@ -39,7 +39,7 @@ import { prowlarrIntegration } from "@site/docs/integrations/prowlarr";
 
 - Test all indexers by clicking on the test button.
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/media-request-list/index.mdx b/apps/docs/docs/widgets/media-request-list/index.mdx
index 4bd3aa6d1..840315831 100644
--- a/apps/docs/docs/widgets/media-request-list/index.mdx
+++ b/apps/docs/docs/widgets/media-request-list/index.mdx
@@ -48,7 +48,7 @@ import mediaRequestList from "./img/list.png";
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
 - A warning indicator identifies unavailable integrations without hiding requests returned by healthy integrations.
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/media-request-stats/index.mdx b/apps/docs/docs/widgets/media-request-stats/index.mdx
index fe8055826..3adfcbffb 100644
--- a/apps/docs/docs/widgets/media-request-stats/index.mdx
+++ b/apps/docs/docs/widgets/media-request-stats/index.mdx
@@ -19,7 +19,7 @@ import { overseerrIntegration } from "@site/docs/integrations/overseerr";
 
 <WidgetHeader widget={mediaRequestStatsWidget} categories={["Media requests"]} />
 
-Provide an overview of your media requests, including total requests, open requests, approvals, and rejections.
+Provides an overview of media requests, including totals, availability, approvals, and rejections. Resize the widget to reveal denser stat tiles; the user ranking remains scrollable instead of being truncated.
 
 ### Supported Integrations
 
@@ -45,7 +45,7 @@ import mediaRequestStats from "./img/stats.png";
 - Hover over the widget to reveal a **search button** that opens Spotlight in media request search mode, scoped to the widget's integrations.
 - A warning indicator identifies unavailable integrations while totals from healthy integrations remain visible.
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/minecraft-server-status/index.mdx b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
index bcc6e281e..4df364116 100644
--- a/apps/docs/docs/widgets/minecraft-server-status/index.mdx
+++ b/apps/docs/docs/widgets/minecraft-server-status/index.mdx
@@ -29,7 +29,7 @@ import bedrockItem from "./img/bedrock.png";
   <img src={bedrockItem} alt="minecraft-server-status bedrock-edition" width={128 * 1.5} height={128 * 1.5} />
 </div>
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/network-controller-summary/index.mdx b/apps/docs/docs/widgets/network-controller-summary/index.mdx
index 1386fc069..a71c9233a 100644
--- a/apps/docs/docs/widgets/network-controller-summary/index.mdx
+++ b/apps/docs/docs/widgets/network-controller-summary/index.mdx
@@ -18,7 +18,7 @@ import { networkControllerSummaryWidget } from ".";
 
 <WidgetHeader widget={networkControllerSummaryWidget} categories={["Network controller"]} />
 
-Shows information whether your WAN is connected, Wi-Fi is active and several other information.
+Shows whether your WAN, internet, Wi-Fi, LAN, and VPN are available. Wider or taller layouts progressively reveal latency, ping, and connected-client counts without a separate view.
 
 ### Screenshots
 
@@ -36,7 +36,7 @@ import summaryCard from "./img/summary.png";
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/notebook/index.mdx b/apps/docs/docs/widgets/notebook/index.mdx
index df4d14ec2..887908372 100644
--- a/apps/docs/docs/widgets/notebook/index.mdx
+++ b/apps/docs/docs/widgets/notebook/index.mdx
@@ -26,7 +26,7 @@ import editOn from "./img/edit.png";
   <img src={editOn} alt="notebook edit-on" width={128 * 3} />
 </div>
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/notifications/index.mdx b/apps/docs/docs/widgets/notifications/index.mdx
index 41638ac33..89771e35b 100644
--- a/apps/docs/docs/widgets/notifications/index.mdx
+++ b/apps/docs/docs/widgets/notifications/index.mdx
@@ -34,7 +34,7 @@ import notificationsScreenshot from "./img/notifications.png";
   items={[{ integration: ntfyIntegration }, { integration: nextcloudIntegration }, { integration: gotifyIntegration }]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/paperless-ngx/index.mdx b/apps/docs/docs/widgets/paperless-ngx/index.mdx
index 4479165e2..a2ef00ebe 100644
--- a/apps/docs/docs/widgets/paperless-ngx/index.mdx
+++ b/apps/docs/docs/widgets/paperless-ngx/index.mdx
@@ -28,7 +28,7 @@ This widget displays statistics from your Paperless-ngx instance, including an i
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/patchmon/index.mdx b/apps/docs/docs/widgets/patchmon/index.mdx
index ccbcd7dab..90bb6754c 100644
--- a/apps/docs/docs/widgets/patchmon/index.mdx
+++ b/apps/docs/docs/widgets/patchmon/index.mdx
@@ -83,7 +83,7 @@ When the widget has enough space, a "last updated" timestamp appears at the bott
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/releases/index.mdx b/apps/docs/docs/widgets/releases/index.mdx
index 017ea97ca..38134344a 100644
--- a/apps/docs/docs/widgets/releases/index.mdx
+++ b/apps/docs/docs/widgets/releases/index.mdx
@@ -35,7 +35,7 @@ GitHub, Docker Hub, GitLab, NPM, Codeberg, GitHub Container Registry, Quay, and
 For GitHub Container Registry, use `owner/package` identifiers such as `homarr-labs/homarr`.
 Full image references such as `ghcr.io/homarr-labs/homarr:latest` are also accepted.
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/rss-feed/index.mdx b/apps/docs/docs/widgets/rss-feed/index.mdx
index 1c700b15c..6fe5325de 100644
--- a/apps/docs/docs/widgets/rss-feed/index.mdx
+++ b/apps/docs/docs/widgets/rss-feed/index.mdx
@@ -21,7 +21,7 @@ import screenshot from "./img/screenshot.png";
 
 <img src={screenshot} alt="rss-feed noted-lol" width={128 * 4} />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/stock-price/index.mdx b/apps/docs/docs/widgets/stock-price/index.mdx
index 4294c9cab..a95ed13bf 100644
--- a/apps/docs/docs/widgets/stock-price/index.mdx
+++ b/apps/docs/docs/widgets/stock-price/index.mdx
@@ -14,7 +14,7 @@ import { stockPriceWidget } from ".";
 <WidgetHeader widget={stockPriceWidget} categories={["Finance", "Market"]} />
 
 Using the Stocks widget, you can show the current stock prices of your favorite companies on your dashboard.
-The compact view prioritizes the symbol, current price, and trend. Company name, change, and time range appear only when both the widget width and height can support them; the advanced view always shows the complete summary.
+The widget prioritizes the symbol, current price, and trend. Company name, change, time range, and a taller chart appear progressively when both widget dimensions can support them.
 
 ### Screenshots
 
@@ -34,7 +34,7 @@ import nvidia from "./img/nvidia.png";
   <img src={nvidia} alt="stock-price nvidia" width={128 * 2 + 2} height={128 * 2 + 4} />
 </div>
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/system-disks/index.mdx b/apps/docs/docs/widgets/system-disks/index.mdx
index 5015ac725..d533fa025 100644
--- a/apps/docs/docs/widgets/system-disks/index.mdx
+++ b/apps/docs/docs/widgets/system-disks/index.mdx
@@ -44,7 +44,7 @@ This widget displays filesystem and SMART disk usage for supported server and NA
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/video/index.mdx b/apps/docs/docs/widgets/video/index.mdx
index 27fef9fb9..fbf41c4e3 100644
--- a/apps/docs/docs/widgets/video/index.mdx
+++ b/apps/docs/docs/widgets/video/index.mdx
@@ -27,7 +27,7 @@ http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp
 
 ![video big-buck-bunny](./img/bunny.png)
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/docs/widgets/vpn/index.mdx b/apps/docs/docs/widgets/vpn/index.mdx
index fb6223cbe..0e23619e5 100644
--- a/apps/docs/docs/widgets/vpn/index.mdx
+++ b/apps/docs/docs/widgets/vpn/index.mdx
@@ -38,7 +38,7 @@ import singleIntegrationImage from "./img/single.png";
   ]}
 />
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/apps/docs/src/components/widgets/interactions.tsx b/apps/docs/src/components/widgets/interactions.tsx
index 1328aa548..b0c08e51c 100644
--- a/apps/docs/src/components/widgets/interactions.tsx
+++ b/apps/docs/src/components/widgets/interactions.tsx
@@ -1,12 +1,13 @@
 import { IconArrowsMaximize, IconLayoutGrid, IconMouse2, IconPlus } from "@tabler/icons-react";
 
-const interactions = [
-  {
-    icon: IconArrowsMaximize,
-    title: "Advanced view",
-    description:
-      "Hold Shift while hovering for an in-place preview, press Shift + Enter, or choose Open advanced view from the widget menu.",
-  },
+const advancedInteraction = {
+  icon: IconArrowsMaximize,
+  title: "Advanced view",
+  description:
+    "Hold Shift while hovering for an in-place preview, press Shift + Enter, or choose Open advanced view from the widget menu.",
+} as const;
+
+const standardInteractions = [
   {
     icon: IconMouse2,
     title: "Widget actions",
@@ -27,27 +28,35 @@ const interactions = [
   },
 ] as const;
 
-export const WidgetInteractionGuide = () => (
-  <details className="group my-6 overflow-hidden rounded-xl border border-solid border-[#e5e7eb] bg-slate-50/70 dark:border-[#333] dark:bg-gray-900/40">
-    <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 font-semibold marker:hidden">
-      <span>Power-user controls</span>
-      <span className="text-xs font-normal text-[#696969] group-open:hidden dark:text-[#999]">Show shortcuts</span>
-      <span className="hidden text-xs font-normal text-[#696969] group-open:inline dark:text-[#999]">
-        Hide shortcuts
-      </span>
-    </summary>
-    <div className="grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-2 xl:grid-cols-4 dark:border-[#333]">
-      {interactions.map(({ icon: Icon, title, description }) => (
-        <div key={title} className="rounded-lg bg-white p-3 shadow-sm dark:bg-gray-950">
-          <Icon aria-hidden size={20} stroke={1.5} className="mb-2 stroke-red-500" />
-          <div className="font-semibold">{title}</div>
-          <p className="mb-0 mt-1 text-sm text-[#696969] dark:text-[#999]">{description}</p>
-        </div>
-      ))}
-    </div>
-    <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
-      Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed. Touch
-      devices expose a maximize control; app tiles stay compact.
-    </p>
-  </details>
-);
+export const WidgetInteractionGuide = ({ advancedView = true }: { advancedView?: boolean }) => {
+  const interactions = advancedView ? [advancedInteraction, ...standardInteractions] : standardInteractions;
+
+  return (
+    <details className="group my-6 overflow-hidden rounded-xl border border-solid border-[#e5e7eb] bg-slate-50/70 dark:border-[#333] dark:bg-gray-900/40">
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 font-semibold marker:hidden">
+        <span>Power-user controls</span>
+        <span className="text-xs font-normal text-[#696969] group-open:hidden dark:text-[#999]">Show shortcuts</span>
+        <span className="hidden text-xs font-normal text-[#696969] group-open:inline dark:text-[#999]">
+          Hide shortcuts
+        </span>
+      </summary>
+      <div
+        className={`grid gap-3 border-0 border-t border-solid border-[#e5e7eb] p-4 md:grid-cols-2 ${advancedView ? "xl:grid-cols-4" : "xl:grid-cols-3"} dark:border-[#333]`}
+      >
+        {interactions.map(({ icon: Icon, title, description }) => (
+          <div key={title} className="rounded-lg bg-white p-3 shadow-sm dark:bg-gray-950">
+            <Icon aria-hidden size={20} stroke={1.5} className="mb-2 stroke-red-500" />
+            <div className="font-semibold">{title}</div>
+            <p className="mb-0 mt-1 text-sm text-[#696969] dark:text-[#999]">{description}</p>
+          </div>
+        ))}
+      </div>
+      {advancedView && (
+        <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
+          Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed.
+          Touch devices expose a maximize control; compact-only widgets adapt in place instead.
+        </p>
+      )}
+    </details>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx
index ec8ba59c9..00e75d158 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-actions.tsx
@@ -42,7 +42,7 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
       {
         onSuccess: () => {
           void utils.customWidget.all.invalidate();
-          void utils.widget.customApi.getData.invalidate({ definitionId: widget.id });
+          void utils.widget.customApi.getData.invalidate();
           void revalidatePathActionAsync("/manage/custom-widgets");
         },
         onError: () => {
@@ -103,7 +103,7 @@ export const CustomWidgetRowActions = ({ widget }: { widget: WidgetRef }) => {
                 message: t("notification.deleted", { name: widget.name }),
               });
               void utils.customWidget.all.invalidate();
-              void utils.widget.customApi.getData.invalidate({ definitionId: widget.id });
+              void utils.widget.customApi.getData.invalidate();
               void revalidatePathActionAsync("/manage/custom-widgets");
             },
             onError: () => {
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
index c2820757f..c42230742 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
@@ -611,7 +611,7 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
         setPreviewRefreshSignal((n) => n + 1);
         await utils.customWidget.all.invalidate();
         await utils.customWidget.byId.invalidate({ id: definitionId });
-        await utils.widget.customApi.getData.invalidate({ definitionId });
+        await utils.widget.customApi.getData.invalidate();
       }
     } catch (err) {
       const serverErrors = extractServerErrors(err, values.displayType);
@@ -657,7 +657,7 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
       hasTestedRef.current = true;
       setPreviewFetchResult({
         success: res.success,
-        error: res.success ? undefined : res.error,
+        error: res.success ? undefined : t("notification.previewError"),
         responseInfo: res.responseInfo,
         rawResponse: res.rawResponse,
       });
@@ -679,7 +679,7 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
       });
       setPreviewJson(null);
     }
-  }, [getPreviewInput, previewMutation]);
+  }, [getPreviewInput, previewMutation, t]);
 
   useEffect(() => {
     if (previewRefreshSignal > 0 && hasTestedRef.current) {
@@ -816,7 +816,7 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
               cachedJson={previewJson}
               onTest={() => void handlePreviewTest()}
               isTesting={previewMutation.isPending}
-              testError={previewMutation.error?.message ?? null}
+              testError={previewMutation.error ? t("notification.previewError") : null}
             />
           </Box>
 
@@ -866,7 +866,7 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
               cachedJson={previewJson}
               onTest={() => void handlePreviewTest()}
               isTesting={previewMutation.isPending}
-              testError={previewMutation.error?.message ?? null}
+              testError={previewMutation.error ? t("notification.previewError") : null}
             />
           </Stack>
         </Box>
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
index 383d74795..c95e2e91a 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-preview.tsx
@@ -24,7 +24,7 @@ interface PreviewInput {
 export interface PreviewFetchResult {
   success: boolean;
   error?: string;
-  responseInfo: { status: number; statusText: string } | null;
+  responseInfo: { status: number } | null;
   rawResponse: string | null;
 }
 
@@ -93,7 +93,7 @@ export function CustomWidgetPreview({
             </Text>
             {fetchResult.responseInfo && (
               <Badge size="xs" color="red" variant="light" mt={4}>
-                {fetchResult.responseInfo.status} {fetchResult.responseInfo.statusText}
+                {fetchResult.responseInfo.status}
               </Badge>
             )}
           </Alert>
@@ -104,7 +104,7 @@ export function CustomWidgetPreview({
             {fetchResult?.success && (
               <Group gap="xs">
                 <Badge size="xs" color="green" variant="light">
-                  {fetchResult.responseInfo?.status} {fetchResult.responseInfo?.statusText}
+                  {fetchResult.responseInfo?.status}
                 </Badge>
               </Group>
             )}
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index 60cc31954..a16e2ba12 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -3,6 +3,10 @@
   animation: focus-backdrop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+.manualBackdrop {
+  pointer-events: auto;
+}
+
 .surface {
   position: fixed;
   z-index: 1;
@@ -15,6 +19,25 @@
   transform-origin: top left;
 }
 
+.manualSurface {
+  position: fixed;
+  max-width: none;
+  max-height: none;
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+  overscroll-behavior: contain;
+  animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top left;
+}
+
+.manualSurface > div {
+  width: 100%;
+  height: 100%;
+  max-height: none !important;
+  overflow: visible;
+}
+
 .backdropClosing {
   animation: focus-backdrop-out 180ms ease-in forwards;
 }
@@ -32,6 +55,18 @@
   height: 100%;
 }
 
+.surfacePortalTarget,
+.manualSurfaceMount {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.manualSurfaceMount {
+  overflow: hidden;
+  border-radius: inherit;
+}
+
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
@@ -49,7 +84,7 @@
 }
 
 .closeButton {
-  position: fixed;
+  position: absolute;
   z-index: 2;
   pointer-events: auto;
 }
@@ -99,7 +134,8 @@
 
 @media (prefers-reduced-motion: reduce) {
   .backdrop,
-  .surface {
+  .surface,
+  .manualSurface {
     animation: none;
   }
 }
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 3f38bdc44..39143a2a8 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -16,6 +16,7 @@ interface ActiveFocus {
   sourceRect: FocusRect;
   activation: "preview" | "manual";
   autofocusClose: boolean;
+  restorePreviewFocus: boolean;
   phase: "visible" | "closing";
 }
 
@@ -79,6 +80,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
         sourceRect: { left: rect.left, top: rect.top, width: rect.width, height: rect.height },
         activation: options.activation ?? "manual",
         autofocusClose: options.autofocusClose ?? false,
+        restorePreviewFocus: options.activation === "preview" && document.activeElement === source,
         phase: "visible",
       });
     },
@@ -118,12 +120,46 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
       if (current?.activation === "preview" && current.itemId !== itemId) {
         cancelCloseTimer();
         updateActive(null);
+        if (current.restorePreviewFocus && current.source.isConnected) current.source.focus({ preventScroll: true });
       }
       startHoverTimer();
     },
     [cancelCloseTimer, startHoverTimer, updateActive],
   );
 
+  useEffect(() => {
+    const handlePointerMove = (event: PointerEvent) => {
+      const current = activeRef.current;
+      if (!shiftHeldRef.current || current?.activation !== "preview") return;
+
+      const underlyingSource = document
+        .elementsFromPoint(event.clientX, event.clientY)
+        .map((element) =>
+          element instanceof HTMLElement
+            ? element.matches(".grid-stack-item-content")
+              ? element
+              : element.closest<HTMLElement>(".grid-stack-item-content")
+            : null,
+        )
+        .find((source) => source !== null && source !== current.source);
+      const itemId = underlyingSource?.closest<HTMLElement>(".grid-stack-item[data-id]")?.dataset.id;
+      if (!underlyingSource || !itemId) return;
+
+      if (underlyingSource.hasAttribute("aria-keyshortcuts")) {
+        hover(itemId, underlyingSource);
+        return;
+      }
+
+      hoveredRef.current = null;
+      cancelHoverTimer();
+      cancelCloseTimer();
+      updateActive(null);
+    };
+
+    window.addEventListener("pointermove", handlePointerMove, { capture: true });
+    return () => window.removeEventListener("pointermove", handlePointerMove, { capture: true });
+  }, [cancelCloseTimer, cancelHoverTimer, hover, updateActive]);
+
   const leave = useCallback(
     (itemId: string) => {
       if (hoveredRef.current?.itemId === itemId) hoveredRef.current = null;
@@ -145,7 +181,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === "Escape" && activeRef.current) {
-        const advancedSurface = document.querySelector(`.${classes.surface}`);
+        const advancedSurface = document.querySelector("[data-advanced-focus-surface]");
         if (event.defaultPrevented || event.isComposing || isEscapeOwnedByNestedOverlay(event.target, advancedSurface))
           return;
         event.preventDefault();
@@ -170,11 +206,11 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
       if (activeRef.current?.activation === "preview") close(false);
     };
 
-    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
     window.addEventListener("keyup", handleKeyUp);
     window.addEventListener("blur", handleBlur);
     return () => {
-      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
       window.removeEventListener("keyup", handleKeyUp);
       window.removeEventListener("blur", handleBlur);
       cancelHoverTimer();
@@ -194,7 +230,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
   return (
     <AdvancedFocusContext.Provider value={value}>
       {children}
-      {active && (
+      {active?.activation === "preview" && (
         <Portal>
           <Overlay
             fixed
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
index 7704ef8be..e3c8a23ec 100644
--- a/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.spec.ts
@@ -5,7 +5,7 @@ import { isEscapeOwnedByNestedOverlay } from "./escape";
 describe("isEscapeOwnedByNestedOverlay", () => {
   test("allows Escape from the advanced surface itself", () => {
     const surface = document.createElement("section");
-    surface.setAttribute("role", "region");
+    surface.setAttribute("role", "dialog");
     const button = document.createElement("button");
     surface.append(button);
 
@@ -44,6 +44,24 @@ describe("isEscapeOwnedByNestedOverlay", () => {
     expect(isEscapeOwnedByNestedOverlay(target, surface)).toBe(true);
   });
 
+  test("leaves Escape to a visible portalled menu when focus stays in the advanced surface", () => {
+    const surface = document.createElement("section");
+    surface.setAttribute("role", "dialog");
+    const target = document.createElement("button");
+    surface.append(target);
+    document.body.append(surface);
+
+    const menu = document.createElement("div");
+    menu.setAttribute("role", "menu");
+    menu.getClientRects = () => [{ width: 100, height: 100 }] as unknown as DOMRectList;
+    document.body.append(menu);
+
+    expect(isEscapeOwnedByNestedOverlay(target, surface)).toBe(true);
+
+    menu.remove();
+    surface.remove();
+  });
+
   test("does not mistake the compact widget source for a nested overlay", () => {
     const surface = document.createElement("section");
     surface.setAttribute("role", "region");
diff --git a/apps/nextjs/src/components/board/advanced-focus/escape.ts b/apps/nextjs/src/components/board/advanced-focus/escape.ts
index 47bd86dd1..8e58947a2 100644
--- a/apps/nextjs/src/components/board/advanced-focus/escape.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/escape.ts
@@ -6,8 +6,14 @@ const escapeOwnerSelector = [
 ].join(", ");
 
 export const isEscapeOwnedByNestedOverlay = (target: EventTarget | null, advancedSurface: Element | null) => {
-  if (!(target instanceof Element)) return false;
+  const escapeOwner = target instanceof Element ? target.closest(escapeOwnerSelector) : null;
+  if (escapeOwner !== null && escapeOwner !== advancedSurface) return true;
 
-  const escapeOwner = target.closest(escapeOwnerSelector);
-  return escapeOwner !== null && escapeOwner !== advancedSurface;
+  return Array.from(document.querySelectorAll(escapeOwnerSelector)).some(
+    (owner) =>
+      owner !== advancedSurface &&
+      owner.getAttribute("aria-hidden") !== "true" &&
+      owner.closest('[aria-hidden="true"]') === null &&
+      owner.getClientRects().length > 0,
+  );
 };
diff --git a/apps/nextjs/src/components/board/advanced-focus/manual-surface.spec.ts b/apps/nextjs/src/components/board/advanced-focus/manual-surface.spec.ts
new file mode 100644
index 000000000..3d5827aef
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/manual-surface.spec.ts
@@ -0,0 +1,107 @@
+// @vitest-environment jsdom
+
+import { act, createElement, Fragment, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { AdvancedFocusManualSurface } from "./manual-surface";
+
+const sourceRect = { left: 100, top: 120, width: 240, height: 160 };
+const rect = { left: 40, top: 80, width: 640, height: 480 };
+const closePosition = { left: 688, top: 80 };
+
+describe("AdvancedFocusManualSurface", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    document.querySelectorAll("[data-portal]").forEach((portal) => portal.remove());
+    vi.unstubAllGlobals();
+  });
+
+  test("portals dialog semantics, traps focus, closes from the backdrop, and restores focus", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    );
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    const Harness = () => {
+      const [opened, setOpened] = useState(false);
+      const contentRef = useRef<HTMLDivElement>(null);
+
+      return createElement(
+        Fragment,
+        null,
+        createElement("button", { type: "button", onClick: () => setOpened(true) }, "Open advanced view"),
+        createElement(
+          AdvancedFocusManualSurface,
+          {
+            opened,
+            phase: "visible",
+            id: "advanced-focus-test",
+            label: "Test widget advanced view",
+            closeLabel: "Close advanced view",
+            rect,
+            closePosition,
+            sourceRect,
+            radius: "md",
+            contentRef,
+            onClose: () => setOpened(false),
+          },
+          createElement("button", { type: "button" }, "First widget action"),
+          createElement("button", { type: "button" }, "Last widget action"),
+        ),
+      );
+    };
+
+    await act(async () => root?.render(createElement(MantineProvider, null, createElement(Harness))));
+    const trigger = document.querySelector<HTMLButtonElement>("button");
+    expect(trigger).not.toBeNull();
+    trigger?.focus();
+    await act(async () => trigger?.click());
+    await act(async () => await new Promise((resolve) => setTimeout(resolve, 20)));
+
+    const dialog = document.querySelector<HTMLElement>("[role='dialog']");
+    const closeButton = dialog?.querySelector<HTMLButtonElement>("[aria-label='Close advanced view']");
+    const actions = dialog?.querySelectorAll<HTMLButtonElement>("button");
+    expect(dialog?.id).toBe("advanced-focus-test");
+    expect(dialog?.getAttribute("aria-modal")).toBe("true");
+    expect(dialog?.closest("[data-portal]")).not.toBeNull();
+    expect(dialog?.closest(".grid-stack-item")).toBeNull();
+    expect(document.getElementById(dialog?.getAttribute("aria-labelledby") ?? "")?.textContent).toBe(
+      "Test widget advanced view",
+    );
+    expect(document.activeElement).toBe(closeButton);
+
+    const lastAction = actions?.item((actions?.length ?? 1) - 1);
+    lastAction?.focus();
+    document.dispatchEvent(new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true }));
+    expect(document.activeElement).toBe(closeButton);
+    closeButton?.focus();
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true, cancelable: true }),
+    );
+    expect(document.activeElement).toBe(lastAction);
+
+    const backdrop = document.querySelector<HTMLElement>("[data-advanced-focus-overlay]");
+    await act(async () => backdrop?.click());
+    await act(async () => await new Promise((resolve) => setTimeout(resolve, 20)));
+    expect(document.activeElement).toBe(trigger);
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx b/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
new file mode 100644
index 000000000..7772f0d6f
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import type { CSSProperties, PropsWithChildren, Ref } from "react";
+import { Modal, VisuallyHidden } from "@mantine/core";
+import { useReducedMotion } from "@mantine/hooks";
+
+import classes from "./advanced-focus.module.css";
+import type { FocusClosePosition, FocusRect } from "./geometry";
+
+interface AdvancedFocusManualSurfaceProps extends PropsWithChildren {
+  opened: boolean;
+  phase: "visible" | "closing";
+  id: string;
+  label: string;
+  closeLabel: string;
+  rect: FocusRect;
+  closePosition: FocusClosePosition;
+  sourceRect: FocusRect;
+  radius: string | number;
+  contentRef: Ref<HTMLDivElement>;
+  onClose: () => void;
+}
+
+export const AdvancedFocusManualSurface = ({
+  opened,
+  phase,
+  id,
+  label,
+  closeLabel,
+  rect,
+  closePosition,
+  sourceRect,
+  radius,
+  contentRef,
+  onClose,
+  children,
+}: AdvancedFocusManualSurfaceProps) => {
+  const reduceMotion = useReducedMotion();
+  const transitionDuration = reduceMotion ? 0 : 180;
+  const geometryStyle = {
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    "--focus-translate-x": `${sourceRect.left - rect.left}px`,
+    "--focus-translate-y": `${sourceRect.top - rect.top}px`,
+    "--focus-scale-x": rect.width > 0 ? sourceRect.width / rect.width : 1,
+    "--focus-scale-y": rect.height > 0 ? sourceRect.height / rect.height : 1,
+  } as CSSProperties;
+  const relativeClosePosition = {
+    left: closePosition.left - rect.left,
+    top: closePosition.top - rect.top,
+  };
+
+  return (
+    <Modal.Root
+      opened={opened}
+      onClose={onClose}
+      radius={radius}
+      padding={0}
+      shadow="none"
+      zIndex="calc(var(--mantine-z-index-modal) - 1)"
+      closeOnEscape={false}
+      closeOnClickOutside
+      lockScroll
+      trapFocus
+      returnFocus
+      removeScrollProps={{ allowPinchZoom: true }}
+      transitionProps={{ duration: transitionDuration, transition: "fade" }}
+    >
+      <Modal.Overlay
+        data-advanced-focus-overlay
+        backgroundOpacity={0.38}
+        blur={0}
+        className={`${classes.backdrop} ${classes.manualBackdrop} ${
+          phase === "closing" ? classes.backdropClosing : ""
+        }`}
+      />
+      <Modal.Content
+        ref={contentRef}
+        id={id}
+        data-advanced-focus-surface
+        className={`${classes.manualSurface} ${phase === "closing" ? classes.surfaceClosing : ""}`}
+        style={geometryStyle}
+      >
+        <Modal.Title>
+          <VisuallyHidden>{label}</VisuallyHidden>
+        </Modal.Title>
+        <Modal.CloseButton
+          className={classes.closeButton}
+          variant="default"
+          size={44}
+          aria-label={closeLabel}
+          aria-controls={id}
+          style={relativeClosePosition}
+        />
+        {children}
+      </Modal.Content>
+    </Modal.Root>
+  );
+};
diff --git a/apps/nextjs/src/components/board/advanced-focus/wheel.ts b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
index 193fa5dde..e6cb1946e 100644
--- a/apps/nextjs/src/components/board/advanced-focus/wheel.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
@@ -13,10 +13,8 @@ export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null
   if (delta === 0) return false;
 
   let current = target instanceof Element ? target : null;
-  let startedInScrollContainer = false;
   while (current && root.contains(current)) {
     const isCurrentScrollContainer = isVerticalScrollContainer(current);
-    startedInScrollContainer ||= isCurrentScrollContainer;
     if (isCurrentScrollContainer && canScrollVertically(current, delta)) {
       current.scrollTop += delta;
       return true;
@@ -24,8 +22,9 @@ export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null
     if (current === root) break;
     current = current.parentElement;
   }
-  if (startedInScrollContainer) return false;
 
+  // A nested control can reach its edge before the widget's main Mantine viewport.
+  // Hand the gesture to that viewport instead of making Shift+wheel feel stuck.
   const viewport = [...root.querySelectorAll<HTMLElement>("[data-scrollbars='y'], [data-scrollbars='xy']")].find(
     (element) => isVerticalScrollContainer(element) && canScrollVertically(element, delta),
   );
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 32e71fe0a..3e458909f 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,8 +1,9 @@
-import type { CSSProperties, KeyboardEvent, MutableRefObject } from "react";
-import { useEffect, useRef } from "react";
-import { ActionIcon, Badge, Box, Card } from "@mantine/core";
-import { useElementSize, useViewportSize } from "@mantine/hooks";
-import { IconMaximize, IconX } from "@tabler/icons-react";
+import type { CSSProperties, KeyboardEvent } from "react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ActionIcon, Badge, Box, Card, Portal } from "@mantine/core";
+import { useElementSize, useIsomorphicEffect, useViewportSize } from "@mantine/hooks";
+import { IconMaximize } from "@tabler/icons-react";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
@@ -12,8 +13,9 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import { useEditMode } from "@homarr/boards/edit-mode";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
-import type { WidgetDefinition } from "@homarr/widgets";
+import type { WidgetRuntimeRef } from "@homarr/widgets";
 import {
+  createWidgetRuntimeState,
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,
   supportsAdvancedFocus as definitionSupportsAdvancedFocus,
@@ -25,6 +27,7 @@ import type { SectionItem } from "~/app/[locale]/boards/_types";
 import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
 import { useAdvancedFocus } from "../advanced-focus/context";
 import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "../advanced-focus/geometry";
+import { AdvancedFocusManualSurface } from "../advanced-focus/manual-surface";
 import { redirectShiftWheel } from "../advanced-focus/wheel";
 import classes from "../sections/item.module.css";
 import { useItemActions } from "./item-actions";
@@ -52,13 +55,12 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   const widgetName = t(`widget.${item.kind}.name`);
   const advancedViewLabel = t("item.advancedFocus.label", { widget: widgetName });
   const [isEditMode] = useEditMode();
-  const widgetStateRef = useRef<Record<string, unknown> | null>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-  const surfaceRef = useRef<HTMLDivElement>(null);
+  const widgetRuntimeRef = useRef(createWidgetRuntimeState());
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [manualSurface, setManualSurface] = useState<HTMLDivElement | null>(null);
+  const [surfacePortalTarget, setSurfacePortalTarget] = useState<HTMLDivElement | null>(null);
   const { active, open, close, dismiss, hover, leave } = useAdvancedFocus();
-  const supportsAdvancedFocus = definitionSupportsAdvancedFocus(
-    widgetImports[item.kind].definition as WidgetDefinition,
-  );
+  const supportsAdvancedFocus = definitionSupportsAdvancedFocus(widgetImports[item.kind].definition);
   const advancedViewId = `advanced-focus-${item.id}`;
   const activeFocus = supportsAdvancedFocus && active?.itemId === item.id ? active : null;
   const isAdvanced = activeFocus !== null;
@@ -66,16 +68,21 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
     ? getAdvancedFocusRect(activeFocus.sourceRect, { width: viewportWidth, height: viewportHeight })
     : null;
   const closePosition = advancedRect ? getAdvancedFocusClosePosition(advancedRect, viewportWidth) : null;
+  const isPreview = activeFocus?.activation === "preview";
+  const isManual = activeFocus?.activation === "manual";
+
+  // Keep one widget subtree mounted while moving its stable portal target between the grid and viewport layers.
+  // This preserves iframe/editor state and escapes Gridstack's transformed containing block.
+  useIsomorphicEffect(() => {
+    const target = document.createElement("div");
+    target.className = advancedFocusClasses.surfacePortalTarget ?? "";
+    setSurfacePortalTarget(target);
+    return () => target.remove();
+  }, []);
 
   // Responsive layout changes remount grid items. Never leave their focus backdrop orphaned.
   useEffect(() => () => dismiss(item.id), [dismiss, item.id]);
 
-  useEffect(() => {
-    if (!activeFocus?.autofocusClose || activeFocus.phase !== "visible") return;
-    const frame = requestAnimationFrame(() => closeButtonRef.current?.focus());
-    return () => cancelAnimationFrame(frame);
-  }, [activeFocus?.autofocusClose, activeFocus?.phase]);
-
   const openAdvanced = (autofocusClose = false) => {
     if (sourceRef.current) open(item.id, sourceRef.current, { activation: "manual", autofocusClose });
   };
@@ -92,7 +99,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
     openAdvanced(true);
   };
   useEffect(() => {
-    const surface = surfaceRef.current;
+    const surface = isManual ? manualSurface : cardRef.current;
     if (!isAdvanced || !surface) return;
 
     const handleWheel = (event: WheelEvent) => {
@@ -106,11 +113,87 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
 
     surface.addEventListener("wheel", handleWheel, { capture: true, passive: false });
     return () => surface.removeEventListener("wheel", handleWheel, { capture: true });
-  }, [isAdvanced]);
+  }, [isAdvanced, isManual, manualSurface]);
+
+  const mountPortalTarget = (node: HTMLDivElement | null, activation: "compact" | "preview" | "manual") => {
+    if (!node || !surfacePortalTarget) return;
+    const shouldMount =
+      (activation === "compact" && !isAdvanced) ||
+      (activation === "preview" && isPreview) ||
+      (activation === "manual" && isManual);
+    if (shouldMount) node.append(surfacePortalTarget);
+  };
+
+  const previewStyle =
+    isPreview && advancedRect
+      ? ({
+          left: advancedRect.left,
+          top: advancedRect.top,
+          width: advancedRect.width,
+          height: advancedRect.height,
+          "--focus-translate-x": `${activeFocus.sourceRect.left - advancedRect.left}px`,
+          "--focus-translate-y": `${activeFocus.sourceRect.top - advancedRect.top}px`,
+          "--focus-scale-x": advancedRect.width > 0 ? activeFocus.sourceRect.width / advancedRect.width : 1,
+          "--focus-scale-y": advancedRect.height > 0 ? activeFocus.sourceRect.height / advancedRect.height : 1,
+        } as CSSProperties)
+      : undefined;
+
+  const widgetCard = (
+    <Card
+      ref={cardRef}
+      id={isPreview ? advancedViewId : undefined}
+      role={isPreview ? "region" : undefined}
+      aria-label={isPreview ? advancedViewLabel : undefined}
+      data-advanced-focus-surface={isPreview || undefined}
+      radius={board.itemRadius}
+      p={isAdvanced ? undefined : 0}
+      h={isManual ? "100%" : isAdvanced ? undefined : "100%"}
+      w={isManual ? "100%" : isAdvanced ? undefined : "100%"}
+      className={combineClasses(
+        classes.itemCard,
+        `${item.kind}-wrapper`,
+        isPreview && advancedFocusClasses.surface,
+        activeFocus?.phase === "closing" && isPreview && advancedFocusClasses.surfaceClosing,
+        item.advancedOptions.customCssClasses.join(" "),
+      )}
+      styles={{
+        root: {
+          "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
+          containerType: "size",
+          overflow: getOverflowFromKind(item.kind),
+          "--border-color": item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
+        },
+      }}
+      style={previewStyle}
+    >
+      <div className={advancedFocusClasses.surfaceControls}>
+        {!isEditMode && supportsAdvancedFocus && !isAdvanced && (
+          <ActionIcon
+            className={advancedFocusClasses.touchButton}
+            variant="default"
+            size={44}
+            aria-label={t("item.advancedFocus.open")}
+            onClick={() => openAdvanced()}
+          >
+            <IconMaximize size={18} />
+          </ActionIcon>
+        )}
+      </div>
+      <Box ref={contentRef} w="100%" h="100%" mih={0}>
+        <InnerContent
+          item={item}
+          width={width}
+          height={height}
+          widgetRuntimeRef={widgetRuntimeRef}
+          displayMode={isAdvanced ? "advanced" : "compact"}
+        />
+      </Box>
+    </Card>
+  );
 
   return (
     <>
-      <WidgetContextMenu item={item} widgetStateRef={widgetStateRef} sourceRef={sourceRef}>
+      <WidgetContextMenu item={item} widgetRuntimeRef={widgetRuntimeRef} sourceRef={sourceRef}>
         <Box
           ref={sourceRef}
           tabIndex={!isEditMode && supportsAdvancedFocus ? 0 : undefined}
@@ -130,99 +213,44 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
           }}
           className={combineClasses("grid-stack-item-content", isAdvanced && advancedFocusClasses.sourcePlaceholder)}
         >
-          <div
-            className={combineClasses(
-              advancedFocusClasses.surfaceHost,
-              isAdvanced && advancedFocusClasses.surfaceHostAdvanced,
-            )}
-          >
-            {activeFocus?.activation === "manual" && closePosition && (
-              <ActionIcon
-                ref={closeButtonRef}
-                className={advancedFocusClasses.closeButton}
-                variant="default"
-                size={44}
-                aria-label={t("item.advancedFocus.close")}
-                aria-controls={advancedViewId}
-                style={closePosition}
-                onClick={() => close()}
-              >
-                <IconX size={18} />
-              </ActionIcon>
-            )}
-            <Card
-              ref={surfaceRef}
-              id={isAdvanced ? advancedViewId : undefined}
-              role={isAdvanced ? "region" : undefined}
-              aria-label={isAdvanced ? advancedViewLabel : undefined}
-              data-advanced-focus-surface={isAdvanced || undefined}
-              radius={board.itemRadius}
-              p={isAdvanced ? undefined : 0}
-              h={isAdvanced ? undefined : "100%"}
-              w={isAdvanced ? undefined : "100%"}
-              className={combineClasses(
-                classes.itemCard,
-                `${item.kind}-wrapper`,
-                isAdvanced && advancedFocusClasses.surface,
-                activeFocus?.phase === "closing" && advancedFocusClasses.surfaceClosing,
-                item.advancedOptions.customCssClasses.join(" "),
-              )}
-              styles={{
-                root: {
-                  "--opacity": isAdvanced ? 0.98 : board.opacity / 100,
-                  containerType: "size",
-                  overflow: getOverflowFromKind(item.kind),
-                  "--border-color":
-                    item.advancedOptions.borderColor !== "" ? item.advancedOptions.borderColor : undefined,
-                },
-              }}
-              style={
-                activeFocus && advancedRect
-                  ? ({
-                      left: advancedRect.left,
-                      top: advancedRect.top,
-                      width: advancedRect.width,
-                      height: advancedRect.height,
-                      "--focus-translate-x": `${activeFocus.sourceRect.left - advancedRect.left}px`,
-                      "--focus-translate-y": `${activeFocus.sourceRect.top - advancedRect.top}px`,
-                      "--focus-scale-x": advancedRect.width > 0 ? activeFocus.sourceRect.width / advancedRect.width : 1,
-                      "--focus-scale-y":
-                        advancedRect.height > 0 ? activeFocus.sourceRect.height / advancedRect.height : 1,
-                    } as CSSProperties)
-                  : undefined
-              }
-            >
-              <div className={advancedFocusClasses.surfaceControls}>
-                {!isEditMode && supportsAdvancedFocus && !isAdvanced && (
-                  <ActionIcon
-                    className={advancedFocusClasses.touchButton}
-                    variant="default"
-                    size={44}
-                    aria-label={t("item.advancedFocus.open")}
-                    onClick={() => openAdvanced()}
-                  >
-                    <IconMaximize size={18} />
-                  </ActionIcon>
-                )}
-              </div>
-              <Box ref={contentRef} w="100%" h="100%" mih={0}>
-                <InnerContent
-                  item={item}
-                  width={width}
-                  height={height}
-                  widgetStateRef={widgetStateRef}
-                  displayMode={isAdvanced ? "advanced" : "compact"}
-                />
-              </Box>
-            </Card>
+          <div ref={(node) => mountPortalTarget(node, "compact")} className={advancedFocusClasses.surfaceHost}>
+            {!surfacePortalTarget && widgetCard}
           </div>
+          {surfacePortalTarget && createPortal(widgetCard, surfacePortalTarget)}
+          {isPreview && (
+            <Portal reuseTargetNode={false}>
+              <div
+                ref={(node) => mountPortalTarget(node, "preview")}
+                className={advancedFocusClasses.surfaceHostAdvanced}
+              />
+            </Portal>
+          )}
+          {isManual && advancedRect && closePosition && (
+            <AdvancedFocusManualSurface
+              opened={activeFocus.phase === "visible"}
+              phase={activeFocus.phase}
+              id={advancedViewId}
+              label={advancedViewLabel}
+              closeLabel={t("item.advancedFocus.close")}
+              rect={advancedRect}
+              closePosition={closePosition}
+              sourceRect={activeFocus.sourceRect}
+              radius={board.itemRadius}
+              contentRef={setManualSurface}
+              onClose={() => close()}
+            >
+              <div
+                ref={(node) => mountPortalTarget(node, "manual")}
+                className={advancedFocusClasses.manualSurfaceMount}
+              />
+            </AdvancedFocusManualSurface>
+          )}
         </Box>
       </WidgetContextMenu>
       {!isAdvanced && item.advancedOptions.title?.trim() && (
         <Badge
           pos="absolute"
-          // It's 4 because of the mantine-react-table that has z-index 3
-          style={{ zIndex: 4 }}
+          style={{ zIndex: "var(--mantine-z-index-app)" }}
           top={2}
           left={16}
           size="xs"
@@ -247,7 +275,7 @@ interface InnerContentProps {
   item: SectionItem;
   width: number;
   height: number;
-  widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef: WidgetRuntimeRef;
   displayMode: "compact" | "advanced";
 }
 
diff --git a/apps/nextjs/src/components/board/items/item-menu.tsx b/apps/nextjs/src/components/board/items/item-menu.tsx
index b8a136bbb..153de4f96 100644
--- a/apps/nextjs/src/components/board/items/item-menu.tsx
+++ b/apps/nextjs/src/components/board/items/item-menu.tsx
@@ -115,7 +115,7 @@ const BoardItemMenuInner = ({ offset, item, resetErrorBoundary }: BoardItemMenuP
           pos="absolute"
           top={offset}
           right={offset}
-          style={{ zIndex: 10 }}
+          style={{ zIndex: "var(--mantine-z-index-popover)" }}
           aria-label={tItem("menu.label.settings")}
         >
           <IconDotsVertical size={"1rem"} />
diff --git a/apps/nextjs/src/components/board/items/item-select-modal.tsx b/apps/nextjs/src/components/board/items/item-select-modal.tsx
index 04ed92b17..787e7c1b0 100644
--- a/apps/nextjs/src/components/board/items/item-select-modal.tsx
+++ b/apps/nextjs/src/components/board/items/item-select-modal.tsx
@@ -33,7 +33,7 @@ export const ItemSelectModal = createModal<ItemSelectModalProps>(({ actions, inn
   const { createItem } = useItemActions();
   const { openModal: openEditModal } = useModalAction(WidgetEditModal);
   const { data: integrationData } = clientApi.integration.all.useQuery();
-  const { data: customWidgetDefs } = clientApi.customWidget.all.useQuery();
+  const { data: customWidgetDefs } = clientApi.customWidget.available.useQuery({ boardId: innerProps.board.id });
   const settings = useSettings();
   const { updateAndPersistBoard } = usePersistBoard(innerProps.board);
 
@@ -208,7 +208,7 @@ export const ItemSelectModal = createModal<ItemSelectModalProps>(({ actions, inn
                   </Text>
                 </Group>
                 <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" c="dimmed" lineClamp={1}>
-                  {def.description ?? def.url}
+                  {def.description}
                 </Text>
               </Stack>
               <Box
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index 2619371d2..7509caad6 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { MutableRefObject, ReactNode, RefObject } from "react";
+import type { ReactNode, RefObject } from "react";
 import { useCallback, useMemo, useState } from "react";
 import { Group, Loader, Menu, Text, Tooltip } from "@mantine/core";
 import {
@@ -28,7 +28,7 @@ import { useSettings } from "@homarr/settings";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { TranslationFunction } from "@homarr/translation";
-import type { WidgetContextMenuAction, WidgetDefinition } from "@homarr/widgets";
+import type { WidgetDefinition, WidgetRuntimeRef } from "@homarr/widgets";
 import {
   getWidgetQueryKeys,
   getWidgetRuntimeQueries,
@@ -48,12 +48,12 @@ import { matchesWidgetItemQuery } from "./widget-query-scope";
 
 interface WidgetContextMenuProps {
   item: SectionItem;
-  widgetStateRef: MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef: WidgetRuntimeRef;
   sourceRef: RefObject<HTMLElement | null>;
   children: ReactNode;
 }
 
-export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }: WidgetContextMenuProps) => {
+export const WidgetContextMenu = ({ item, widgetRuntimeRef, sourceRef, children }: WidgetContextMenuProps) => {
   const { data: session } = useSession();
   const [isEditMode] = useEditMode();
   const board = useRequiredBoard();
@@ -70,8 +70,11 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
   const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, duplicateItem, removeItem } =
     useItemActions();
   const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
-  const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
-  const canOpenAdvancedFocus = supportsAdvancedFocus(currentDefinition as WidgetDefinition);
+  const currentDefinition = useMemo(
+    () => widgetImports[item.kind].definition as WidgetDefinition & { kind: string },
+    [item.kind],
+  );
+  const canOpenAdvancedFocus = supportsAdvancedFocus(currentDefinition);
   const { gridstack } = useSectionContext().refs;
   const queryClient = useQueryClient();
   const { open: openAdvancedFocus } = useAdvancedFocus();
@@ -93,15 +96,12 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
   );
 
   const options = useMemo(
-    () => reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options) as Record<string, unknown>,
+    () => reduceWidgetOptionsWithDefaultValues(item.kind, settings, item.options),
     [item.kind, settings, item.options],
   );
 
-  const widgetQueryKeys = useMemo(
-    () => getWidgetQueryKeys(currentDefinition as Parameters<typeof getWidgetQueryKeys>[0]),
-    [currentDefinition],
-  );
-  const widgetQueryMatcher = (currentDefinition as WidgetDefinition).queryMatcher;
+  const widgetQueryKeys = useMemo(() => getWidgetQueryKeys(currentDefinition), [currentDefinition]);
+  const widgetQueryMatcher = "queryMatcher" in currentDefinition ? currentDefinition.queryMatcher : undefined;
   const matchesWidgetQuery = useCallback(
     (queryKey: QueryKey) =>
       matchesWidgetItemQuery(
@@ -112,11 +112,11 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
           boardId: board.id,
           integrationIds: item.integrationIds,
           options,
-          runtimeQueries: getWidgetRuntimeQueries(widgetStateRef),
+          runtimeQueries: getWidgetRuntimeQueries(widgetRuntimeRef),
         },
         widgetQueryMatcher,
       ),
-    [board.id, item.id, item.integrationIds, options, widgetQueryKeys, widgetQueryMatcher, widgetStateRef],
+    [board.id, item.id, item.integrationIds, options, widgetQueryKeys, widgetQueryMatcher, widgetRuntimeRef],
   );
   const isWidgetFetching =
     useIsFetching({
@@ -156,11 +156,8 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
     return Object.entries(rawOptions).filter(([, def]) => def.type === "switch" && !def.skipContextMenu);
   }, [currentDefinition, hasChangeAccess, settings]);
 
-  const widgetContextActions = (() => {
-    const def = currentDefinition as Record<string, unknown>;
-    if (typeof def.contextActions !== "function") return [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const actions = (def.contextActions as any)({
+  const widgetContextActions =
+    currentDefinition.contextActions?.({
       options,
       setOptions: setItemOptions,
       integrationIds: item.integrationIds,
@@ -170,10 +167,8 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
         itemId: item.id,
         canInteractWithSelectedIntegrations,
       },
-      widgetStateRef,
-    });
-    return (Array.isArray(actions) ? actions : []) as WidgetContextMenuAction[];
-  })();
+      widgetRuntimeRef,
+    }) ?? [];
 
   const openEditModal = useCallback(() => {
     openModal(
@@ -294,7 +289,7 @@ export const WidgetContextMenu = ({ item, widgetStateRef, sourceRef, children }:
                   disabled={action.disabled}
                   color={action.color}
                 >
-                  {String(translateIfNecessary(t, action.label))}
+                  {t(action.label as never)}
                 </Menu.Item>
               );
             })}
@@ -416,14 +411,8 @@ const WidgetQueryStatus = ({ queryClient, matchesQuery, isFetching, t }: WidgetQ
   const hasError = queries.some((q) => q.state.status === "error");
 
   if (hasError) {
-    const errorQuery = queries.find((q) => q.state.status === "error");
-    const errorMessage =
-      errorQuery?.state.error instanceof Error
-        ? errorQuery.state.error.message
-        : String(errorQuery?.state.error ?? "Unknown error");
-
     return (
-      <Tooltip label={errorMessage} multiline position="left" w={250}>
+      <Tooltip label={t("item.menu.status.error")} position="left">
         <Group gap={4} wrap="nowrap">
           <IconAlertTriangle size={12} color="var(--mantine-color-red-6)" />
           <Text size="xs" c="red.6">
diff --git a/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css b/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
index f6ec2600f..d0c32701c 100644
--- a/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
+++ b/apps/nextjs/src/components/board/items/widget-hover-overlay.module.css
@@ -4,7 +4,7 @@
   right: 10px;
   bottom: calc(100% - 10px);
   margin-bottom: 1px;
-  z-index: 200;
+  z-index: var(--mantine-z-index-app);
   pointer-events: none;
   opacity: 0;
   transform: translateY(6px);
@@ -101,6 +101,15 @@
   overflow: hidden;
 }
 
+@media (forced-colors: active) {
+  .panel {
+    border-color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+}
+
 .metadataLabel {
   color: var(--mantine-color-dimmed);
   flex-shrink: 0;
diff --git a/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx b/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
index 906abdea6..baaceb69e 100644
--- a/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
+++ b/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 
 import { fetchApi } from "@homarr/api/client";
 import { getCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
-import { createId } from "@homarr/common";
+import { createId, getSafeApplicationUrl } from "@homarr/common";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
@@ -116,10 +116,13 @@ export const useCategoryMenuActions = (category: CategorySection) => {
     });
 
     const apps = await fetchApi.app.byIds.query(appIds);
-    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
+    const safeUrls = apps.flatMap((app) => {
+      const href = getSafeApplicationUrl(app.href);
+      return href ? [href] : [];
+    });
 
-    for (const app of appsWithUrls) {
-      const openedWindow = window.open(app.href ?? undefined);
+    for (const href of safeUrls) {
+      const openedWindow = window.open(href, "_blank", "noopener,noreferrer");
       if (openedWindow) {
         continue;
       }
diff --git a/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx b/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx
index cffc3446f..fef149d36 100644
--- a/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx
+++ b/apps/nextjs/src/components/board/sections/dynamic/dynamic-menu.tsx
@@ -51,7 +51,7 @@ export const BoardDynamicSectionMenu = ({ section }: { section: DynamicSectionIt
           pos="absolute"
           top={4}
           right={4}
-          style={{ zIndex: 10 }}
+          style={{ zIndex: "var(--mantine-z-index-popover)" }}
           aria-label={tItem("menu.label.settings")}
         >
           <IconDotsVertical size={"1rem"} />
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index c37e34e2b..e94f6cfb6 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -19,6 +19,7 @@ import {
 import type { SqliteDatabase } from "./shared/e2e-db";
 import { createSqliteDbFileAsync } from "./shared/e2e-db";
 import { createHomarrContainer } from "./shared/create-homarr-container";
+import { loginAsync } from "./shared/login";
 import { seedAdminUserAsync } from "./shared/seed-admin-user";
 
 const ownerCredentials = { username: "owner", password: "Comp(exP4sswOrd" };
@@ -68,11 +69,12 @@ describe("Board advanced interactions", () => {
 
     try {
       const widget = page.locator(".grid-stack-item[data-kind='clock'] > .grid-stack-item-content").first();
-      const compactSurface = widget.locator(".clock-wrapper");
-      const advancedSurface = page.getByRole("region", { name: "Date and time advanced view" });
-      const iframeAdvancedSurface = page.getByRole("region", { name: "iFrame advanced view" });
+      const compactSurface = page.locator(".clock-wrapper").first();
+      const previewSurface = page.getByRole("region", { name: "Date and time advanced view" });
+      const manualSurface = page.getByRole("dialog", { name: "Date and time advanced view" });
+      const bookmarksPreviewSurface = page.getByRole("region", { name: "Bookmarks advanced view" });
       const dimmingOverlay = page.locator("[data-advanced-focus-overlay]");
-      const otherWidget = page.locator(".grid-stack-item[data-kind='iframe'] > .grid-stack-item-content").first();
+      const otherWidget = page.locator(".grid-stack-item[data-kind='bookmarks'] > .grid-stack-item-content").first();
 
       await compactSurface.evaluate((element) => {
         element.setAttribute("data-lifecycle-probe", "same-instance");
@@ -80,42 +82,54 @@ describe("Board advanced interactions", () => {
       await widget.focus();
       await page.keyboard.down("Shift");
       await widget.hover();
-      await expect(advancedSurface).toBeVisible({ timeout: 2_000 });
-      await expect(advancedSurface).toHaveCSS("animation-name", "none");
+      await expect(previewSurface).toBeVisible({ timeout: 2_000 });
+      await expect(previewSurface).toHaveCSS("animation-name", "none");
       const compactBounds = await widget.boundingBox();
-      const advancedBounds = await advancedSurface.boundingBox();
+      const advancedBounds = await previewSurface.boundingBox();
       expect(advancedBounds?.width).toBeGreaterThan(compactBounds?.width ?? 0);
-      await expect(advancedSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(previewSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
       await expect(dimmingOverlay).toBeVisible();
       await expect(dimmingOverlay).toHaveCSS("pointer-events", "none");
       await expect(otherWidget).toBeVisible();
       await expect(widget).toBeFocused();
 
-      await advancedSurface.click({ button: "right", position: { x: 80, y: 80 } });
+      await previewSurface.click({ button: "right", position: { x: 80, y: 80 } });
       const portalledMenuItem = page.getByRole("menuitem", { name: "Open advanced view" });
       await expect(portalledMenuItem).toBeVisible();
       await portalledMenuItem.hover();
-      await expect(advancedSurface).toBeVisible();
+      await expect(previewSurface).toBeVisible();
       await page.keyboard.press("Escape");
       await expect(portalledMenuItem).toBeHidden();
-      await expect(advancedSurface).toBeVisible();
+      await expect(previewSurface).toBeVisible();
 
-      await otherWidget.hover();
-      await expect(advancedSurface).toBeHidden();
-      await expect(iframeAdvancedSurface).toBeVisible({ timeout: 2_000 });
+      const otherBounds = await otherWidget.boundingBox();
+      expect(otherBounds).not.toBeNull();
+      if (!otherBounds) throw new Error("Bookmarks widget has no bounds");
+      await page.mouse.move(otherBounds.x + otherBounds.width / 2, otherBounds.y + otherBounds.height / 2);
+      await expect(previewSurface).toBeHidden();
+      await expect(bookmarksPreviewSurface).toBeVisible({ timeout: 2_000 });
       await page.keyboard.up("Shift");
-      await expect(iframeAdvancedSurface).toBeHidden();
+      await expect(bookmarksPreviewSurface).toBeHidden();
       await expect(dimmingOverlay).toBeHidden();
       await expect(compactSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
       await expect(widget).toBeFocused();
 
       await page.keyboard.press("Shift+Enter");
-      await expect(advancedSurface).toBeVisible();
+      await expect(manualSurface).toBeVisible();
+      await expect(manualSurface).toHaveAttribute("aria-modal", "true");
+      expect(await manualSurface.evaluate((element) => element.closest(".grid-stack-item"))).toBeNull();
+      await expect(manualSurface.locator(".clock-wrapper")).toHaveAttribute("data-lifecycle-probe", "same-instance");
+      await expect(dimmingOverlay).toHaveCSS("pointer-events", "auto");
+      expect(await page.evaluate(() => getComputedStyle(document.body).overflow)).toBe("hidden");
+      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+      await page.keyboard.press("Tab");
+      await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
+      await page.keyboard.press("Shift+Tab");
       await expect(page.getByRole("button", { name: "Close advanced view" })).toBeFocused();
       await expect(page.getByRole("button", { name: /advanced view is pinned|keep advanced view open/i })).toHaveCount(
         0,
       );
-      await advancedSurface.evaluate((element) => {
+      await manualSurface.evaluate((element) => {
         const probe = document.createElement("div");
         probe.dataset.shiftScrollProbe = "true";
         probe.style.cssText = "height:80px;overflow-y:auto";
@@ -123,11 +137,19 @@ describe("Board advanced interactions", () => {
         probe.addEventListener("wheel", (event) => event.stopPropagation());
         element.append(probe);
 
-        const unrelated = probe.cloneNode(true) as HTMLDivElement;
+        const mainViewport = document.createElement("div");
+        mainViewport.dataset.scrollbars = "y";
+        mainViewport.style.cssText = "height:80px;overflow-y:auto";
+        mainViewport.innerHTML = '<div style="height:600px"></div>';
+        element.append(mainViewport);
+
+        const unrelated = document.createElement("div");
         unrelated.dataset.shiftScrollProbe = "unrelated";
+        unrelated.style.cssText = "height:80px;overflow-y:hidden";
+        unrelated.innerHTML = '<div style="height:600px"></div>';
         element.append(unrelated);
       });
-      const scrollProbe = advancedSurface.locator("[data-shift-scroll-probe='true']");
+      const scrollProbe = manualSurface.locator("[data-shift-scroll-probe='true']");
       await page.keyboard.down("Shift");
       const pixelEventCancelled = await scrollProbe.evaluate(
         (element) =>
@@ -156,56 +178,78 @@ describe("Board advanced interactions", () => {
           new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 120 }),
         );
       });
+      expect(await manualSurface.locator("[data-scrollbars='y']").evaluate((element) => element.scrollTop)).toBe(120);
       expect(
-        await advancedSurface.locator("[data-shift-scroll-probe='unrelated']").evaluate((element) => element.scrollTop),
+        await manualSurface.locator("[data-shift-scroll-probe='unrelated']").evaluate((element) => element.scrollTop),
       ).toBe(0);
+
+      await manualSurface.click({ button: "right", position: { x: 80, y: 80 } });
+      await expect(portalledMenuItem).toBeVisible();
       await page.keyboard.press("Escape");
-      await expect(advancedSurface).toBeHidden();
+      await expect(portalledMenuItem).toBeHidden();
+      await expect(manualSurface).toBeVisible();
+      await page.keyboard.press("Escape");
+      await expect(manualSurface).toBeHidden();
       await expect(widget).toBeFocused();
+      expect(await page.evaluate(() => getComputedStyle(document.body).overflow)).not.toBe("hidden");
 
       await widget.click({ button: "right" });
       await page.getByRole("menuitem", { name: "Open advanced view" }).click();
-      await expect(advancedSurface).toBeVisible();
-      await page.keyboard.press("Escape");
-      await expect(advancedSurface).toBeHidden();
+      await expect(manualSurface).toBeVisible();
+      const viewport = page.viewportSize();
+      if (!viewport) throw new Error("Board page has no viewport");
+      await page.mouse.click(4, viewport.height - 4);
+      await expect(manualSurface).toBeHidden();
+      await expect(widget).toBeFocused();
 
-      const appWidget = page.locator(".grid-stack-item[data-kind='app'] > .grid-stack-item-content").first();
-      await expect(appWidget).not.toHaveAttribute("aria-keyshortcuts", "Shift+Enter");
-      await appWidget.click({ button: "right" });
-      await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
-      await page.keyboard.press("Escape");
-      await page.keyboard.down("Shift");
-      await appWidget.hover();
-      await expect(advancedSurface).toBeHidden();
-      await page.keyboard.up("Shift");
+      for (const compactOnlyKind of ["app", "iframe"]) {
+        const compactOnlyWidget = page
+          .locator(`.grid-stack-item[data-kind='${compactOnlyKind}'] > .grid-stack-item-content`)
+          .first();
+        await expect(compactOnlyWidget).not.toHaveAttribute("aria-keyshortcuts", "Shift+Enter");
+        await compactOnlyWidget.dispatchEvent("contextmenu", { button: 2 });
+        await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
+        await page.keyboard.press("Escape");
+        await page.keyboard.down("Shift");
+        await compactOnlyWidget.hover({ position: { x: 4, y: 4 } });
+        await expect(previewSurface).toBeHidden();
+        await expect(dimmingOverlay).toBeHidden();
+        await page.keyboard.up("Shift");
+      }
     } finally {
       await context.close();
     }
   }, 60_000);
 
-  test("preserves iframe browsing state and dismisses focus when a responsive layout remounts", async () => {
+  test("keeps compact-only iframe state and dismisses retained focus when a responsive layout remounts", async () => {
     const { context, page } = await openBoardAsync(browser, baseUrl, ownerCredentials);
 
     try {
       const iframeSlot = page.locator(".grid-stack-item[data-kind='iframe'] > .grid-stack-item-content").first();
       const iframe = iframeSlot.locator("iframe");
       await iframe.evaluate((element) => {
-        element.srcdoc = '<label>State <input id="state" value="initial"></label>';
+        (element as HTMLIFrameElement).srcdoc = '<label>State <input id="state" value="initial"></label>';
+        (element as HTMLIFrameElement).dataset.advancedFocusProbe = "true";
       });
-      const frame = page.frameLocator(".grid-stack-item[data-kind='iframe'] iframe");
+      const frame = page.frameLocator("iframe[data-advanced-focus-probe='true']");
       await frame.locator("#state").fill("changed");
 
-      await iframeSlot.focus();
-      await page.keyboard.press("Shift+Enter");
-      await expect(page.getByRole("region", { name: "iFrame advanced view" })).toBeVisible();
-      await expect(frame.locator("#state")).toHaveValue("changed");
+      await expect(iframeSlot).not.toHaveAttribute("aria-keyshortcuts", "Shift+Enter");
+      await iframeSlot.dispatchEvent("contextmenu", { button: 2 });
+      await expect(page.getByRole("menuitem", { name: "Open advanced view" })).toHaveCount(0);
       await page.keyboard.press("Escape");
+      await page.keyboard.down("Shift");
+      await iframeSlot.hover({ position: { x: 4, y: 4 } });
+      await expect(page.getByRole("region", { name: "iFrame advanced view" })).toHaveCount(0);
+      await page.keyboard.up("Shift");
       await expect(frame.locator("#state")).toHaveValue("changed");
 
-      await iframeSlot.focus();
+      const bookmarksSlot = page.locator(".grid-stack-item[data-kind='bookmarks'] > .grid-stack-item-content").first();
+      await bookmarksSlot.focus();
       await page.keyboard.press("Shift+Enter");
+      await expect(page.getByRole("dialog", { name: "Bookmarks advanced view" })).toBeVisible();
       await page.setViewportSize({ width: 800, height: 900 });
-      await expect(page.getByRole("region", { name: "iFrame advanced view" })).toBeHidden();
+      await expect(page.getByRole("dialog", { name: "Bookmarks advanced view" })).toBeHidden();
       await expect(page.locator(".grid-stack-item[data-kind='iframe'] iframe")).toBeVisible();
     } finally {
       await context.close();
@@ -229,7 +273,7 @@ describe("Board advanced interactions", () => {
       expect(bounds.height).toBeGreaterThanOrEqual(44);
       expect(bounds.x + bounds.width).toBeLessThanOrEqual(1366);
       expect(bounds.y + bounds.height).toBeLessThanOrEqual(768);
-      const surfaceBounds = await page.getByRole("region", { name: "Date and time advanced view" }).boundingBox();
+      const surfaceBounds = await page.getByRole("dialog", { name: "Date and time advanced view" }).boundingBox();
       const contentBounds = await page.locator(".clock-widget-container").boundingBox();
       expect(surfaceBounds).not.toBeNull();
       expect(contentBounds).not.toBeNull();
@@ -240,7 +284,7 @@ describe("Board advanced interactions", () => {
         );
       }
       await closeButton.click();
-      await expect(page.getByRole("region", { name: "Date and time advanced view" })).toBeHidden();
+      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeHidden();
     } finally {
       await context.close();
     }
@@ -304,7 +348,7 @@ describe("Board advanced interactions", () => {
 
       await widget.click({ button: "right" });
       await page.getByRole("menuitem", { name: "Open advanced view" }).click();
-      await expect(page.getByRole("region", { name: "Date and time advanced view" })).toBeVisible();
+      await expect(page.getByRole("dialog", { name: "Date and time advanced view" })).toBeVisible();
       await page.keyboard.press("Escape");
 
       await expect(grid).not.toHaveAttribute("aria-label", "Add item here");
@@ -325,14 +369,8 @@ const openBoardAsync = async (
   const context = await browser.newContext({ reducedMotion: "reduce", viewport });
   const page = await context.newPage();
 
-  await page.goto(`${baseUrl}/auth/login`);
-  await page.getByLabel("Username").fill(credentials.username);
-  await page.locator("#password").fill(credentials.password);
-  const loginRedirect = page.waitForURL(baseUrl, { timeout: 15_000, waitUntil: "commit" });
-  await page.locator("css=button[type='submit']").click();
-  await loginRedirect;
-  await page.goto(`${baseUrl}/boards/${boardName}`);
-  await expect(page.locator(".grid-stack-item[data-kind='clock'] .clock-wrapper").first()).toBeVisible({
+  await loginAsync({ page, baseUrl, credentials, destination: `/boards/${boardName}` });
+  await expect(page.locator(".clock-wrapper").first()).toBeVisible({
     timeout: 15_000,
   });
 
@@ -368,6 +406,7 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
   const desktopLayoutId = createId();
   const sectionId = createId();
   const clockItemId = createId();
+  const bookmarksItemId = createId();
   const iframeItemId = createId();
   const appItemId = createId();
   const appId = createId();
@@ -392,6 +431,22 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
       options: stringify({ is24HourFormat: true, showSeconds: false, showDate: true }),
       advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
     },
+    {
+      id: bookmarksItemId,
+      kind: "bookmarks",
+      boardId,
+      options: stringify({
+        title: "",
+        layout: "column",
+        hideTitle: false,
+        hideIcon: false,
+        hideHostname: false,
+        openNewTab: true,
+        withBorder: false,
+        items: [appId],
+      }),
+      advancedOptions: stringify({ title: null, customCssClasses: [], borderColor: "" }),
+    },
     {
       id: iframeItemId,
       kind: "iframe",
@@ -418,6 +473,15 @@ const seedInteractionBoardAsync = async (db: SqliteDatabase, ownerId: string) =>
         width: 4,
         height: 3,
       },
+      {
+        itemId: bookmarksItemId,
+        sectionId,
+        layoutId,
+        xOffset: 0,
+        yOffset: 3,
+        width: 4,
+        height: 3,
+      },
       {
         itemId: iframeItemId,
         sectionId,
diff --git a/e2e/custom-widgets-custom-jsx.spec.ts b/e2e/custom-widgets-custom-jsx.spec.ts
index 51013aea9..1f2bc31fe 100644
--- a/e2e/custom-widgets-custom-jsx.spec.ts
+++ b/e2e/custom-widgets-custom-jsx.spec.ts
@@ -3,6 +3,7 @@ import { describe, test } from "vitest";
 
 import { createHomarrContainer } from "./shared/create-homarr-container";
 import { createSqliteDbFileAsync } from "./shared/e2e-db";
+import { loginAsync } from "./shared/login";
 import { startMockApiServerAsync } from "./shared/mock-api-server";
 import { seedAdminUserAsync } from "./shared/seed-admin-user";
 
@@ -17,7 +18,7 @@ const initialTemplate =
 const updatedTemplate = '<Stack gap="xs"><Text>{data.title}</Text><Badge color="green">{data.value}</Badge></Stack>';
 
 describe("Custom JSX custom widgets", () => {
-  test("creates, previews, and edits a customJsx widget", async () => {
+  test("reliably creates, previews, and edits a customJsx widget", async () => {
     const mockApi = await startMockApiServerAsync({
       title: "E2E Widget",
       status: "online",
@@ -38,48 +39,56 @@ describe("Custom JSX custom widgets", () => {
 
     const baseUrl = `http://${homarrContainer.getHost()}:${homarrContainer.getMappedPort(7575)}`;
     const browser = await chromium.launch();
-    const context = await browser.newContext();
-    const page = await context.newPage();
     const destination = "/manage/custom-widgets/new";
 
     try {
-      await page.goto(`${baseUrl}/auth/login?callbackUrl=${encodeURIComponent(destination)}`, {
-        waitUntil: "networkidle",
-      });
-      await page.getByLabel("Username").fill(adminCredentials.username);
-      await page.locator("#password").fill(adminCredentials.password);
-      await Promise.all([
-        page.waitForURL(`**${destination}`, { timeout: 30_000 }),
-        page.locator("css=button[type='submit']").click(),
-      ]);
-      await expect(page.getByRole("textbox", { name: "Name" })).toBeVisible({ timeout: 30_000 });
-      await page.getByRole("textbox", { name: "Name" }).fill("E2E Custom JSX");
-      await page.getByRole("textbox", { name: "URL", exact: true }).fill(`${mockApi.url}/status`);
-      await page.getByRole("combobox", { name: "Display Type" }).click();
-      await page.getByRole("option", { name: "Custom JSX" }).click();
-      await page.getByLabel("JSX Template").fill(initialTemplate);
+      for (const attempt of [1, 2, 3]) {
+        const context = await browser.newContext();
+        const page = await context.newPage();
+        const widgetName = `E2E Custom JSX ${attempt}`;
 
-      await page.getByRole("button", { name: "Test" }).first().click();
-      const previewPanel = page.locator(".mantine-Card-root").filter({ hasText: "Preview" });
-      await expect(previewPanel.getByRole("heading", { name: "E2E Widget" }).first()).toBeVisible({
-        timeout: 15_000,
-      });
+        try {
+          await loginAsync({ page, baseUrl, credentials: adminCredentials, destination });
+          await expect(page.getByRole("textbox", { name: "Name" })).toBeVisible({ timeout: 30_000 });
+          await page.getByRole("textbox", { name: "Name" }).fill(widgetName);
+          await page.getByRole("textbox", { name: "URL", exact: true }).fill(`${mockApi.url}/status`);
+          await page.getByRole("combobox", { name: "Display Type" }).click();
+          await page.getByRole("option", { name: "Custom JSX" }).click();
+          await page.getByLabel("JSX Template").fill(initialTemplate);
 
-      await page.getByRole("button", { name: "Create" }).first().click();
-      await expect(page.getByText('Widget "E2E Custom JSX" created successfully.')).toBeVisible({ timeout: 15_000 });
-      await page.waitForURL("**/manage/custom-widgets/edit/**", { timeout: 15_000 });
-      await expect(page.getByLabel("JSX Template")).toHaveValue(initialTemplate);
+          await page.getByRole("button", { name: "Test" }).first().click();
+          const previewPanel = page.locator(".mantine-Card-root").filter({ hasText: "Preview" });
+          await expect(previewPanel.getByRole("heading", { name: "E2E Widget" }).first()).toBeVisible({
+            timeout: 15_000,
+          });
 
-      await page.getByLabel("JSX Template").fill(updatedTemplate);
-      await expect(page.getByLabel("JSX Template")).toHaveValue(updatedTemplate);
+          const editNavigation = page.waitForURL((url) => url.pathname.startsWith("/manage/custom-widgets/edit/"), {
+            timeout: 15_000,
+            waitUntil: "domcontentloaded",
+          });
+          await page.getByRole("button", { name: "Create" }).first().click();
+          await editNavigation;
+          await expect(page.getByText(`Widget "${widgetName}" created successfully.`)).toBeVisible({
+            timeout: 15_000,
+          });
+          await expect(page.getByLabel("JSX Template")).toHaveValue(initialTemplate);
 
-      await page.getByRole("button", { name: "Save" }).first().click();
-      await expect(page.getByText('Widget "E2E Custom JSX" updated successfully.')).toBeVisible({ timeout: 15_000 });
-      await expect(page.getByLabel("JSX Template")).toHaveValue(updatedTemplate);
+          await page.getByLabel("JSX Template").fill(updatedTemplate);
+          await expect(page.getByLabel("JSX Template")).toHaveValue(updatedTemplate);
+
+          await page.getByRole("button", { name: "Save" }).first().click();
+          await expect(page.getByText(`Widget "${widgetName}" updated successfully.`)).toBeVisible({
+            timeout: 15_000,
+          });
+          await expect(page.getByLabel("JSX Template")).toHaveValue(updatedTemplate);
+        } finally {
+          await context.close();
+        }
+      }
     } finally {
       await browser.close();
       await homarrContainer.stop();
       await mockApi.close();
     }
-  }, 120_000);
+  }, 180_000);
 });
diff --git a/e2e/shared/login.ts b/e2e/shared/login.ts
new file mode 100644
index 000000000..37684299b
--- /dev/null
+++ b/e2e/shared/login.ts
@@ -0,0 +1,51 @@
+import type { Page } from "@playwright/test";
+
+interface LoginInput {
+  page: Page;
+  baseUrl: string;
+  credentials: {
+    username: string;
+    password: string;
+  };
+  destination?: string;
+}
+
+export const loginAsync = async ({ page, baseUrl, credentials, destination = "/" }: LoginInput) => {
+  const destinationUrl = new URL(destination, baseUrl);
+  const loginUrl = new URL("/auth/login", baseUrl);
+  loginUrl.searchParams.set("callbackUrl", destinationUrl.href);
+
+  await page.goto(loginUrl.href, { waitUntil: "load" });
+  await page.waitForFunction(() => {
+    const form = document.querySelector("form");
+    return form !== null && Object.keys(form).some((key) => key.startsWith("__reactProps$"));
+  });
+  await page.getByLabel("Username").fill(credentials.username);
+  await page.locator("#password").fill(credentials.password);
+
+  await page.locator("button[type='submit']").click();
+  await waitForAuthenticatedSessionAsync(page, baseUrl);
+
+  await page.goto(destinationUrl.href, { waitUntil: "domcontentloaded" });
+  const currentUrl = new URL(page.url());
+  if (currentUrl.origin !== destinationUrl.origin || currentUrl.pathname !== destinationUrl.pathname) {
+    throw new Error("Authenticated destination was not reached");
+  }
+};
+
+const waitForAuthenticatedSessionAsync = async (page: Page, baseUrl: string) => {
+  const sessionUrl = new URL("/api/auth/session", baseUrl).href;
+  const deadline = Date.now() + 30_000;
+
+  while (Date.now() < deadline) {
+    const response = await page.request.get(sessionUrl);
+    if (response.ok()) {
+      const session = (await response.json()) as { user?: unknown } | null;
+      if (session?.user !== undefined) return;
+    }
+
+    await page.waitForTimeout(100);
+  }
+
+  throw new Error("Authentication session was not established");
+};
diff --git a/packages/api/src/router/custom-widget/custom-widget-access.ts b/packages/api/src/router/custom-widget/custom-widget-access.ts
new file mode 100644
index 000000000..90abeebc3
--- /dev/null
+++ b/packages/api/src/router/custom-widget/custom-widget-access.ts
@@ -0,0 +1,45 @@
+import { TRPCError } from "@trpc/server";
+import { parse } from "superjson";
+import { z } from "zod/v4";
+
+import type { Session } from "@homarr/auth";
+import type { Database } from "@homarr/db";
+import { and, eq } from "@homarr/db";
+import { boards, items } from "@homarr/db/schema";
+import type { BoardPermission } from "@homarr/definitions";
+
+import { throwIfActionForbiddenAsync } from "../board/board-access";
+
+export const customApiItemInputSchema = z.object({
+  boardId: z.string().min(1).max(100),
+  itemId: z.string().min(1).max(100),
+  definitionId: z.string().min(1).max(100),
+});
+
+const customApiOptionsSchema = z.object({ definitionId: z.string() }).passthrough();
+
+export async function assertCustomApiItemBindingAsync(
+  ctx: { db: Database; session: Session | null },
+  input: z.infer<typeof customApiItemInputSchema>,
+  permission?: BoardPermission,
+) {
+  const item = await ctx.db.query.items.findFirst({
+    columns: { options: true },
+    where: and(eq(items.id, input.itemId), eq(items.boardId, input.boardId), eq(items.kind, "customApi")),
+  });
+
+  if (!item) throwCustomApiWidgetNotFound();
+  if (permission) await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), permission);
+
+  try {
+    const options = customApiOptionsSchema.parse(parse<unknown>(item.options));
+    if (options.definitionId !== input.definitionId) throwCustomApiWidgetNotFound();
+  } catch (error) {
+    if (error instanceof TRPCError) throw error;
+    throwCustomApiWidgetNotFound();
+  }
+}
+
+function throwCustomApiWidgetNotFound(): never {
+  throw new TRPCError({ code: "NOT_FOUND", message: "Custom API widget not found" });
+}
diff --git a/packages/api/src/router/custom-widget/custom-widget-router.ts b/packages/api/src/router/custom-widget/custom-widget-router.ts
index dc15b6759..286cb6cd8 100644
--- a/packages/api/src/router/custom-widget/custom-widget-router.ts
+++ b/packages/api/src/router/custom-widget/custom-widget-router.ts
@@ -4,7 +4,7 @@ import { z } from "zod/v4";
 
 import { createId } from "@homarr/common";
 import { decryptSecret, encryptSecret } from "@homarr/common/server";
-import { customWidgetDefinitions, customWidgetSecrets } from "@homarr/db/schema";
+import { boards, customWidgetDefinitions, customWidgetSecrets } from "@homarr/db/schema";
 import { eq } from "@homarr/db";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import {
@@ -19,17 +19,23 @@ import {
 } from "@homarr/validation/custom-widget";
 
 import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../../trpc";
+import { throwIfActionForbiddenAsync } from "../board/board-access";
+import { assertCustomApiItemBindingAsync, customApiItemInputSchema } from "./custom-widget-access";
 import { applyAuth } from "./auth";
 import { extractDisplayDataWithFallback } from "./display-data";
 import { parseDisplayConfig } from "./parse-display-config";
+import {
+  consumeBoundedResponseAsync,
+  readBoundedJsonResponseAsync,
+  validateCustomApiUrl,
+  withCustomApiResponseAsync,
+} from "../widgets/custom-api-security";
 
 const adminProcedure = permissionRequiredProcedure.requiresPermission("admin");
 
 const logger = createLogger({ module: "custom-widget" });
 
-const FETCH_TIMEOUT_MS = 10_000;
-
-const validateUrl = (urlString: string): URL => new URL(urlString);
+const PUBLIC_PREVIEW_ERROR = "Custom API preview failed";
 
 const updateFieldSerializers: Record<string, (value: unknown) => unknown> = {
   displayConfig: (value) => superjson.stringify(value),
@@ -54,7 +60,7 @@ function getImportJsonSchema() {
 export const customWidgetRouter = createTRPCRouter({
   schema: publicProcedure.query(() => getImportJsonSchema()),
 
-  all: protectedProcedure.query(async ({ ctx }) => {
+  all: adminProcedure.query(async ({ ctx }) => {
     const definitions = await ctx.db.query.customWidgetDefinitions.findMany({
       orderBy: (table, { asc }) => asc(table.name),
     });
@@ -72,7 +78,24 @@ export const customWidgetRouter = createTRPCRouter({
     }));
   }),
 
-  byId: protectedProcedure.input(z.object({ id: z.string() })).query(async ({ ctx, input }) => {
+  available: protectedProcedure
+    .input(z.object({ boardId: z.string().min(1).max(100) }))
+    .query(async ({ ctx, input }) => {
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.boardId), "modify");
+      return await ctx.db.query.customWidgetDefinitions.findMany({
+        columns: {
+          id: true,
+          name: true,
+          description: true,
+          iconUrl: true,
+          displayType: true,
+          enabled: true,
+        },
+        orderBy: (table, { asc }) => asc(table.name),
+      });
+    }),
+
+  byId: adminProcedure.input(z.object({ id: z.string() })).query(async ({ ctx, input }) => {
     const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
       where: eq(customWidgetDefinitions.id, input.id),
       with: { secrets: true },
@@ -275,75 +298,65 @@ export const customWidgetRouter = createTRPCRouter({
       }),
     )
     .mutation(async ({ ctx, input }) => {
-      const secrets = [...input.secrets];
-
-      if (input.definitionId) {
-        const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
-          where: eq(customWidgetDefinitions.id, input.definitionId),
-          with: { secrets: true },
-        });
-        if (existing) {
-          for (const dbSecret of existing.secrets) {
-            if (!secrets.some((s) => s.kind === dbSecret.kind)) {
-              secrets.push({ kind: dbSecret.kind, value: decryptSecret(dbSecret.value) });
+      try {
+        const secrets = [...input.secrets];
+        if (input.definitionId) {
+          const existing = await ctx.db.query.customWidgetDefinitions.findFirst({
+            where: eq(customWidgetDefinitions.id, input.definitionId),
+            with: { secrets: true },
+          });
+          if (existing) {
+            for (const dbSecret of existing.secrets) {
+              if (!secrets.some((s) => s.kind === dbSecret.kind)) {
+                secrets.push({ kind: dbSecret.kind, value: decryptSecret(dbSecret.value) });
+              }
             }
           }
         }
-      }
 
-      const url = validateUrl(input.url);
-      const headers = new Headers({ Accept: "application/json" });
+        const url = validateCustomApiUrl(input.url);
+        const headers = new Headers({ Accept: "application/json" });
+        if (input.method !== "GET" && input.requestBody) headers.set("Content-Type", "application/json");
+        applyAuth(headers, url, input.authType, secrets, input.headerName);
 
-      if (input.method !== "GET" && input.requestBody) {
-        headers.set("Content-Type", "application/json");
-      }
+        return await withCustomApiResponseAsync(
+          url,
+          {
+            method: input.method,
+            headers,
+            body: input.method !== "GET" ? input.requestBody : undefined,
+          },
+          async (response) => {
+            const responseInfo = { status: response.status };
+            if (!response.ok) {
+              await consumeBoundedResponseAsync(response);
+              return {
+                success: false as const,
+                error: PUBLIC_PREVIEW_ERROR,
+                responseInfo,
+                rawResponse: null,
+              };
+            }
 
-      applyAuth(headers, url, input.authType, secrets, input.headerName);
-
-      const controller = new AbortController();
-      const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
-      try {
-        const response = await fetch(url.toString(), {
-          method: input.method,
-          headers,
-          body: input.method !== "GET" ? input.requestBody : undefined,
-          redirect: "follow",
-          signal: controller.signal,
-        });
-
-        const responseInfo = { status: response.status, statusText: response.statusText };
-
-        if (!response.ok) {
-          const body = await response.text().catch(() => "");
-          return {
-            success: false as const,
-            error: `HTTP ${response.status}: ${response.statusText}`,
-            responseInfo,
-            rawResponse: body,
-          };
-        }
-
-        const json: unknown = await response.json();
-        const displayData = extractDisplayDataWithFallback(json, input.displayType, input.displayConfig);
-
-        return {
-          success: true as const,
-          responseInfo,
-          rawResponse: JSON.stringify(json, null, 2),
-          displayData,
-        };
+            const json = await readBoundedJsonResponseAsync(response);
+            const displayData = extractDisplayDataWithFallback(json, input.displayType, input.displayConfig);
+            return {
+              success: true as const,
+              responseInfo,
+              rawResponse: JSON.stringify(json, null, 2),
+              displayData,
+            };
+          },
+        );
       } catch (error) {
-        if (error instanceof TRPCError) throw error;
-        logger.error("Custom widget preview failed", { error });
+        const errorId = createId();
+        logger.error("Custom widget preview failed", { errorId, error });
         return {
           success: false as const,
-          error: error instanceof Error ? error.message : "Failed to fetch data",
+          error: PUBLIC_PREVIEW_ERROR,
           responseInfo: null,
           rawResponse: null,
         };
-      } finally {
-        clearTimeout(timeout);
       }
     }),
 
@@ -389,7 +402,8 @@ export const customWidgetRouter = createTRPCRouter({
     return { id: newId, name: `${definition.name} (copy)` };
   }),
 
-  execute: protectedProcedure.input(z.object({ definitionId: z.string() })).mutation(async ({ ctx, input }) => {
+  execute: adminProcedure.input(customApiItemInputSchema).mutation(async ({ ctx, input }) => {
+    await assertCustomApiItemBindingAsync(ctx, input);
     const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
       where: eq(customWidgetDefinitions.id, input.definitionId),
       with: { secrets: true },
@@ -407,50 +421,41 @@ export const customWidgetRouter = createTRPCRouter({
       throw new TRPCError({ code: "BAD_REQUEST", message: "Only actionButton widgets can be executed" });
     }
 
-    const decryptedSecrets = definition.secrets.map((s) => ({
-      kind: s.kind,
-      value: decryptSecret(s.value),
-    }));
-
-    const url = validateUrl(definition.url);
-    const headers = new Headers({ Accept: "application/json" });
-
-    if (definition.method !== "GET" && definition.requestBody) {
-      headers.set("Content-Type", "application/json");
-    }
-
-    applyAuth(headers, url, definition.authType, decryptedSecrets, definition.headerName);
-
-    const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
     try {
-      const response = await fetch(url.toString(), {
-        method: definition.method,
-        headers,
-        body: definition.method !== "GET" ? definition.requestBody : undefined,
-        redirect: "follow",
-        signal: controller.signal,
-      });
+      const decryptedSecrets = definition.secrets.map((s) => ({
+        kind: s.kind,
+        value: decryptSecret(s.value),
+      }));
+      const url = validateCustomApiUrl(definition.url);
+      const headers = new Headers({ Accept: "application/json" });
+      if (definition.method !== "GET" && definition.requestBody) headers.set("Content-Type", "application/json");
+      applyAuth(headers, url, definition.authType, decryptedSecrets, definition.headerName);
 
-      const responseInfo = { status: response.status, statusText: response.statusText };
-
-      if (!response.ok) {
-        return { success: false as const, error: `HTTP ${response.status}: ${response.statusText}`, responseInfo };
-      }
-
-      logger.info("Executed custom widget action", { definitionId: input.definitionId, status: response.status });
-      return { success: true as const, responseInfo };
+      return await withCustomApiResponseAsync(
+        url,
+        {
+          method: definition.method,
+          headers,
+          body: definition.method !== "GET" ? definition.requestBody : undefined,
+        },
+        async (response) => {
+          await consumeBoundedResponseAsync(response);
+          const responseInfo = { status: response.status };
+          if (!response.ok) {
+            return { success: false as const, errorCode: "UPSTREAM_REJECTED" as const, responseInfo };
+          }
+          logger.info("Executed custom widget action", { definitionId: input.definitionId, status: response.status });
+          return { success: true as const, responseInfo };
+        },
+      );
     } catch (error) {
-      if (error instanceof TRPCError) throw error;
-      logger.error("Custom widget execute failed", { definitionId: input.definitionId, error });
+      const errorId = createId();
+      logger.error("Custom widget execute failed", { errorId, definitionId: input.definitionId, error });
       return {
         success: false as const,
-        error: error instanceof Error ? error.message : "Request failed",
+        errorCode: "REQUEST_FAILED" as const,
         responseInfo: null,
       };
-    } finally {
-      clearTimeout(timeout);
     }
   }),
 });
diff --git a/packages/api/src/router/custom-widget/display-data.ts b/packages/api/src/router/custom-widget/display-data.ts
index 627530d20..d04550d83 100644
--- a/packages/api/src/router/custom-widget/display-data.ts
+++ b/packages/api/src/router/custom-widget/display-data.ts
@@ -111,13 +111,7 @@ const extractors: Record<string, Extractor> = {
     data: query(json, (c.jsonPath as string) ?? "$"),
     maxHeight: c.maxHeight ?? 300,
   }),
-  actionButton: (_json, c) => ({
-    type: "actionButton",
-    buttonLabel: c.buttonLabel ?? "Execute",
-    buttonColor: c.buttonColor ?? "blue",
-    confirmText: c.confirmText ?? "",
-    successMessage: c.successMessage ?? "",
-  }),
+  actionButton: (_json, c) => extractActionButtonDisplay(c),
   customJsx: (json, config) => ({
     type: "customJsx" as const,
     template: config.template as string,
@@ -140,6 +134,20 @@ export function extractDisplayDataWithFallback(json: unknown, displayType: strin
   return extractor?.(json, displayConfig);
 }
 
-export function extractActionButtonDisplay(displayConfig: Config): unknown {
-  return extractors.actionButton?.(null, displayConfig);
+export interface ActionButtonDisplayData {
+  type: "actionButton";
+  buttonLabel: string;
+  buttonColor: string;
+  confirmText: string;
+  successMessage: string;
+}
+
+export function extractActionButtonDisplay(displayConfig: Config): ActionButtonDisplayData {
+  return {
+    type: "actionButton",
+    buttonLabel: typeof displayConfig.buttonLabel === "string" ? displayConfig.buttonLabel : "Execute",
+    buttonColor: typeof displayConfig.buttonColor === "string" ? displayConfig.buttonColor : "blue",
+    confirmText: typeof displayConfig.confirmText === "string" ? displayConfig.confirmText : "",
+    successMessage: typeof displayConfig.successMessage === "string" ? displayConfig.successMessage : "",
+  };
 }
diff --git a/packages/api/src/router/location.ts b/packages/api/src/router/location.ts
index 99bb9c3af..050d66cb4 100644
--- a/packages/api/src/router/location.ts
+++ b/packages/api/src/router/location.ts
@@ -37,11 +37,10 @@ export const locationRouter = createTRPCRouter({
     .input(locationSearchCityInput)
     .output(locationSearchCityOutput)
     .query(async ({ input }) => {
+      const url = new URL("https://geocoding-api.open-meteo.com/v1/search");
+      url.searchParams.set("name", input.query);
       const res = await withTimeoutAsync(async (signal) => {
-        return await fetchWithTrustedCertificatesAsync(
-          `https://geocoding-api.open-meteo.com/v1/search?name=${input.query}`,
-          { signal },
-        );
+        return await fetchWithTrustedCertificatesAsync(url.toString(), { signal });
       });
       return (await res.json()) as z.infer<typeof locationSearchCityOutput>;
     }),
diff --git a/packages/api/src/router/test/custom-widget.spec.ts b/packages/api/src/router/test/custom-widget.spec.ts
new file mode 100644
index 000000000..b026b2f68
--- /dev/null
+++ b/packages/api/src/router/test/custom-widget.spec.ts
@@ -0,0 +1,376 @@
+// @vitest-environment node
+
+import { stringify } from "superjson";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/common";
+import type { Database } from "@homarr/db";
+import { eq } from "@homarr/db";
+import { boards, boardUserPermissions, customWidgetDefinitions, items, users } from "@homarr/db/schema";
+import { createDb } from "@homarr/db/test";
+import type { GroupPermissionKey } from "@homarr/definitions";
+
+import { customWidgetRouter } from "../custom-widget/custom-widget-router";
+import { customApiRouter } from "../widgets/custom-api";
+
+const createSession = (userId: string, permissions: GroupPermissionKey[] = []): Session => ({
+  user: { id: userId, permissions, colorScheme: "light" },
+  expires: new Date().toISOString(),
+});
+
+const createCustomWidgetCaller = (db: Database, session: Session | null) =>
+  customWidgetRouter.createCaller({ db, deviceType: undefined, session });
+
+const createCustomApiCaller = (db: Database, session: Session | null) =>
+  customApiRouter.createCaller({ db, deviceType: undefined, session });
+
+async function createFixtureAsync(db: Database) {
+  const ownerId = createId();
+  const viewerId = createId();
+  const modifierId = createId();
+  const unrelatedId = createId();
+  const adminId = createId();
+  const boardId = createId();
+  const itemId = createId();
+  const definitionId = createId();
+
+  await db.insert(users).values(
+    [ownerId, viewerId, modifierId, unrelatedId, adminId].map((id) => ({
+      id,
+      name: id,
+    })),
+  );
+  await db.insert(boards).values({ id: boardId, name: `board-${boardId}`, creatorId: ownerId, isPublic: false });
+  await db.insert(boardUserPermissions).values([
+    { boardId, userId: viewerId, permission: "view" },
+    { boardId, userId: modifierId, permission: "modify" },
+  ]);
+  await db.insert(customWidgetDefinitions).values({
+    id: definitionId,
+    name: "Restart service",
+    description: "Restarts a service",
+    url: "https://api.example.com/restart",
+    method: "POST",
+    displayType: "actionButton",
+    displayConfig: stringify({
+      type: "actionButton",
+      buttonLabel: "Restart",
+      confirmText: "Continue?",
+    }),
+    creatorId: adminId,
+  });
+  await db.insert(items).values({
+    id: itemId,
+    boardId,
+    kind: "customApi",
+    options: stringify({ definitionId, refreshInterval: 30 }),
+  });
+
+  return { ownerId, viewerId, modifierId, unrelatedId, adminId, boardId, itemId, definitionId };
+}
+
+beforeEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  vi.useRealTimers();
+});
+
+describe("custom widget definition authorization", () => {
+  it("restricts the full definition list to administrators", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+
+    await expect(createCustomWidgetCaller(db, null).all()).rejects.toMatchObject({ code: "UNAUTHORIZED" });
+    for (const userId of [fixture.ownerId, fixture.viewerId, fixture.modifierId, fixture.unrelatedId]) {
+      await expect(createCustomWidgetCaller(db, createSession(userId)).all()).rejects.toMatchObject({
+        code: "FORBIDDEN",
+      });
+    }
+
+    await expect(createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"])).all()).resolves.toEqual([
+      expect.objectContaining({ id: fixture.definitionId, url: "https://api.example.com/restart" }),
+    ]);
+  });
+
+  it("returns only safe definition summaries to board modifiers", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+
+    const result = await createCustomWidgetCaller(db, createSession(fixture.modifierId)).available({
+      boardId: fixture.boardId,
+    });
+    expect(result).toEqual([
+      {
+        id: fixture.definitionId,
+        name: "Restart service",
+        description: "Restarts a service",
+        iconUrl: null,
+        displayType: "actionButton",
+        enabled: true,
+      },
+    ]);
+    expect(JSON.stringify(result)).not.toContain("api.example.com");
+
+    for (const userId of [fixture.viewerId, fixture.unrelatedId]) {
+      await expect(
+        createCustomWidgetCaller(db, createSession(userId)).available({ boardId: fixture.boardId }),
+      ).rejects.toMatchObject({ code: "NOT_FOUND" });
+    }
+  });
+});
+
+describe("custom widget action authorization", () => {
+  it("requires an administrator even for users who can view or modify the board", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    const input = {
+      boardId: fixture.boardId,
+      itemId: fixture.itemId,
+      definitionId: fixture.definitionId,
+    };
+
+    await expect(createCustomWidgetCaller(db, null).execute(input)).rejects.toMatchObject({ code: "UNAUTHORIZED" });
+    for (const userId of [fixture.ownerId, fixture.viewerId, fixture.modifierId, fixture.unrelatedId]) {
+      await expect(createCustomWidgetCaller(db, createSession(userId)).execute(input)).rejects.toMatchObject({
+        code: "FORBIDDEN",
+      });
+    }
+  });
+
+  it("executes for an administrator only when board, item, and definition are bound", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    const fetchMock = vi.fn().mockResolvedValue(new Response(null, { status: 204 }));
+    vi.stubGlobal("fetch", fetchMock);
+    const caller = createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"]));
+
+    await expect(
+      caller.execute({
+        boardId: fixture.boardId,
+        itemId: fixture.itemId,
+        definitionId: fixture.definitionId,
+      }),
+    ).resolves.toEqual({ success: true, responseInfo: { status: 204 } });
+    expect(fetchMock).toHaveBeenCalledWith(
+      "https://api.example.com/restart",
+      expect.objectContaining({ method: "POST", redirect: "error", signal: expect.any(AbortSignal) }),
+    );
+  });
+
+  it.each(["board", "item", "definition"] as const)("rejects a mismatched %s binding", async (mismatch) => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+    const input = {
+      boardId: mismatch === "board" ? createId() : fixture.boardId,
+      itemId: mismatch === "item" ? createId() : fixture.itemId,
+      definitionId: mismatch === "definition" ? createId() : fixture.definitionId,
+    };
+
+    await expect(
+      createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"])).execute(input),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("rejects disabled definitions before sending a request", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    await db
+      .update(customWidgetDefinitions)
+      .set({ enabled: false })
+      .where(eq(customWidgetDefinitions.id, fixture.definitionId));
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+
+    await expect(
+      createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"])).execute({
+        boardId: fixture.boardId,
+        itemId: fixture.itemId,
+        definitionId: fixture.definitionId,
+      }),
+    ).rejects.toMatchObject({ code: "FORBIDDEN" });
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});
+
+describe("custom API outbound request hardening", () => {
+  it("rejects credential-bearing action URLs without exposing the credential", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    await db
+      .update(customWidgetDefinitions)
+      .set({ url: "https://operator:super-secret@private.example.com/restart" })
+      .where(eq(customWidgetDefinitions.id, fixture.definitionId));
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+
+    const result = await createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"])).execute({
+      boardId: fixture.boardId,
+      itemId: fixture.itemId,
+      definitionId: fixture.definitionId,
+    });
+    expect(result).toEqual({ success: false, errorCode: "REQUEST_FAILED", responseInfo: null });
+    expect(JSON.stringify(result)).not.toMatch(/super-secret|private\.example\.com/);
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  it("rejects redirects and redacts fetch errors", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    const fetchMock = vi
+      .fn()
+      .mockRejectedValue(
+        new TypeError("Redirect to http://token:secret@internal.example.local/admin?apiKey=top-secret was rejected"),
+      );
+    vi.stubGlobal("fetch", fetchMock);
+
+    const result = await createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"])).execute({
+      boardId: fixture.boardId,
+      itemId: fixture.itemId,
+      definitionId: fixture.definitionId,
+    });
+    expect(fetchMock).toHaveBeenCalledWith(
+      "https://api.example.com/restart",
+      expect.objectContaining({ redirect: "error" }),
+    );
+    expect(result).toEqual({ success: false, errorCode: "REQUEST_FAILED", responseInfo: null });
+    expect(JSON.stringify(result)).not.toMatch(/top-secret|internal\.example\.local|apiKey/);
+  });
+
+  it("aborts timed-out action requests and returns a stable failure", async () => {
+    vi.useFakeTimers();
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    const started = Promise.withResolvers<void>();
+    const fetchMock = vi.fn((_url: string, init: RequestInit) => {
+      started.resolve();
+      return new Promise<Response>((_resolve, reject) => {
+        init.signal?.addEventListener("abort", () => {
+          reject(new Error("Timed out calling http://internal.example.local?secret=timeout-secret"));
+        });
+      });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const request = createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"])).execute({
+      boardId: fixture.boardId,
+      itemId: fixture.itemId,
+      definitionId: fixture.definitionId,
+    });
+    await started.promise;
+    await vi.advanceTimersByTimeAsync(10_000);
+
+    const result = await request;
+    expect(result).toEqual({ success: false, errorCode: "REQUEST_FAILED", responseInfo: null });
+    expect(JSON.stringify(result)).not.toMatch(/timeout-secret|internal\.example\.local/);
+  });
+
+  it("bounds action responses before reporting success", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(new Response("x".repeat(2 * 1024 * 1024 + 1))));
+
+    await expect(
+      createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"])).execute({
+        boardId: fixture.boardId,
+        itemId: fixture.itemId,
+        definitionId: fixture.definitionId,
+      }),
+    ).resolves.toEqual({ success: false, errorCode: "REQUEST_FAILED", responseInfo: null });
+  });
+
+  it("binds data requests to a viewable item and never exposes backend error text", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    await db
+      .update(customWidgetDefinitions)
+      .set({
+        displayType: "singleValue",
+        method: "GET",
+        displayConfig: stringify({ type: "singleValue", jsonPath: "$.value" }),
+      })
+      .where(eq(customWidgetDefinitions.id, fixture.definitionId));
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockRejectedValue(new Error("Backend http://private.example.local/path?token=super-secret\nstack trace")),
+    );
+
+    const input = {
+      boardId: fixture.boardId,
+      itemId: fixture.itemId,
+      definitionId: fixture.definitionId,
+    };
+    const error = await createCustomApiCaller(db, createSession(fixture.viewerId))
+      .getData(input)
+      .catch((caught: unknown) => caught);
+    expect(error).toMatchObject({ code: "INTERNAL_SERVER_ERROR", message: "Custom API request failed" });
+    expect(JSON.stringify(error)).not.toMatch(/super-secret|private\.example\.local|stack trace/);
+
+    await expect(createCustomApiCaller(db, createSession(fixture.unrelatedId)).getData(input)).rejects.toMatchObject({
+      code: "NOT_FOUND",
+    });
+    await expect(
+      createCustomApiCaller(db, createSession(fixture.viewerId)).getData({ ...input, definitionId: createId() }),
+    ).rejects.toMatchObject({ code: "NOT_FOUND" });
+  });
+
+  it("bounds and disposes non-success data responses", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    await db
+      .update(customWidgetDefinitions)
+      .set({
+        displayType: "singleValue",
+        method: "GET",
+        displayConfig: stringify({ type: "singleValue", jsonPath: "$.value" }),
+      })
+      .where(eq(customWidgetDefinitions.id, fixture.definitionId));
+    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(new Response("x".repeat(2 * 1024 * 1024 + 1), { status: 502 })));
+
+    const error = await createCustomApiCaller(db, createSession(fixture.viewerId))
+      .getData({
+        boardId: fixture.boardId,
+        itemId: fixture.itemId,
+        definitionId: fixture.definitionId,
+      })
+      .catch((caught: unknown) => caught);
+
+    expect(error).toMatchObject({ code: "INTERNAL_SERVER_ERROR", message: "Custom API request failed" });
+    expect(JSON.stringify(error)).not.toContain("x".repeat(100));
+  });
+
+  it("redacts unsafe preview failures and rejects redirects", async () => {
+    const db = createDb();
+    const fixture = await createFixtureAsync(db);
+    const fetchMock = vi.fn().mockRejectedValue(new Error("redirected to http://private.local?secret=value"));
+    vi.stubGlobal("fetch", fetchMock);
+    const caller = createCustomWidgetCaller(db, createSession(fixture.adminId, ["admin"]));
+
+    const result = await caller.preview({
+      url: "https://api.example.com/data",
+      method: "GET",
+      authType: "none",
+      displayType: "singleValue",
+      displayConfig: { type: "singleValue", jsonPath: "$.value", label: "Value", unit: "" },
+      secrets: [],
+    });
+    expect(fetchMock).toHaveBeenCalledWith(
+      "https://api.example.com/data",
+      expect.objectContaining({ redirect: "error" }),
+    );
+    expect(result).toEqual({
+      success: false,
+      error: "Custom API preview failed",
+      responseInfo: null,
+      rawResponse: null,
+    });
+    expect(JSON.stringify(result)).not.toMatch(/private\.local|secret=value/);
+  });
+});
diff --git a/packages/api/src/router/test/location.spec.ts b/packages/api/src/router/test/location.spec.ts
new file mode 100644
index 000000000..64c6cdfb4
--- /dev/null
+++ b/packages/api/src/router/test/location.spec.ts
@@ -0,0 +1,36 @@
+// @vitest-environment node
+
+import { beforeEach, describe, expect, test, vi } from "vitest";
+
+import { createDb } from "@homarr/db/test";
+
+import { locationRouter } from "../location";
+
+const mocks = vi.hoisted(() => ({ fetch: vi.fn() }));
+
+vi.mock("@homarr/core/infrastructure/http", () => ({
+  fetchWithTrustedCertificatesAsync: mocks.fetch,
+}));
+
+vi.mock("@homarr/core/infrastructure/http/timeout", () => ({
+  withTimeoutAsync: async (callback: (signal: AbortSignal) => Promise<Response>) =>
+    await callback(new AbortController().signal),
+}));
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mocks.fetch.mockResolvedValue(new Response(JSON.stringify({ results: [] })));
+});
+
+describe("locationRouter", () => {
+  test("encodes the complete search text as one name parameter", async () => {
+    const caller = locationRouter.createCaller({ db: createDb(), deviceType: undefined, session: null });
+
+    await caller.searchCity({ query: "Paris&language=xx&token=secret" });
+
+    const requestedUrl = new URL(mocks.fetch.mock.calls[0]?.[0] as string);
+    expect(requestedUrl.searchParams.get("name")).toBe("Paris&language=xx&token=secret");
+    expect(requestedUrl.searchParams.has("language")).toBe(false);
+    expect(requestedUrl.searchParams.has("token")).toBe(false);
+  });
+});
diff --git a/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
index 4e3db53fc..d72d125d2 100644
--- a/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
+++ b/packages/api/src/router/test/widgets/partial-integration-failures.spec.ts
@@ -12,8 +12,14 @@ import type { MediaRequest, MediaRequestStats } from "@homarr/integrations/types
 import type * as MediaRequestListHandlerModule from "@homarr/request-handler/media-request-list";
 
 import { calendarRouter } from "../../widgets/calendar";
+import { beszelRouter } from "../../widgets/beszel";
+import { firewallRouter } from "../../widgets/firewall";
+import { indexerManagerRouter } from "../../widgets/indexer-manager";
+import { mediaOrganizerRouter } from "../../widgets/media-organizer";
 import { mediaRequestsRouter } from "../../widgets/media-requests";
 import { mediaServerRouter } from "../../widgets/media-server";
+import { notificationsRouter } from "../../widgets/notifications";
+import { vpnRouter } from "../../widgets/vpn";
 
 vi.hoisted(() => {
   process.env.SKIP_ENV_VALIDATION = "true";
@@ -21,7 +27,11 @@ vi.hoisted(() => {
 
 const createHandler = <T>(integration: { name: string }, data: T) => ({
   getDataAsync: async () => {
-    if (integration.name === "Offline") throw new Error("offline https://internal.example?token=secret");
+    if (integration.name === "Offline") {
+      throw new Error(
+        "GET http://admin:password@internal.example/private/path?token=secret returned\nprivate response body",
+      );
+    }
     return { data, timestamp: new Date() };
   },
 });
@@ -34,6 +44,40 @@ vi.mock("@homarr/request-handler/media-server", () => ({
   mediaServerRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
 }));
 
+vi.mock("@homarr/request-handler/media-organizer", () => ({
+  mediaOrganizerRequestHandler: {
+    handler: (integration: { name: string }) =>
+      createHandler(integration, { missing: [], missingCount: 0, queued: [], queuedCount: 0 }),
+  },
+}));
+
+vi.mock("@homarr/request-handler/beszel", () => ({
+  beszelSystemsRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/firewall", () => ({
+  firewallCpuRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, { total: 1 }) },
+  firewallInterfacesRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+  firewallMemoryRequestHandler: {
+    handler: (integration: { name: string }) => createHandler(integration, { used: 1, total: 2, percent: 50 }),
+  },
+  firewallVersionRequestHandler: {
+    handler: (integration: { name: string }) => createHandler(integration, { version: "1.0" }),
+  },
+}));
+
+vi.mock("@homarr/request-handler/indexer-manager", () => ({
+  indexerManagerRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/notifications", () => ({
+  notificationsRequestHandler: { handler: (integration: { name: string }) => createHandler(integration, []) },
+}));
+
+vi.mock("@homarr/request-handler/vpn", () => ({
+  vpnSummaryHandler: { handler: (integration: { name: string }) => createHandler(integration, { connected: true }) },
+}));
+
 vi.mock("@homarr/request-handler/media-request-list", async (importOriginal) => {
   const actual = await importOriginal<typeof MediaRequestListHandlerModule>();
   return {
@@ -121,7 +165,7 @@ describe("partial integration failures", () => {
       expect.arrayContaining([
         expect.objectContaining({
           integration: expect.objectContaining({ id: calendar.offlineId }),
-          error: "Integration request failed",
+          error: "INTEGRATION_REQUEST_FAILED",
         }),
       ]),
     );
@@ -136,7 +180,7 @@ describe("partial integration failures", () => {
         expect.objectContaining({
           integrationId: mediaServer.offlineId,
           sessions: [],
-          error: "Integration request failed",
+          error: "INTEGRATION_REQUEST_FAILED",
         }),
       ]),
     );
@@ -165,13 +209,13 @@ describe("partial integration failures", () => {
       }),
     ]);
     expect(latest.failedIntegrations).toEqual([
-      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "Integration request failed" }),
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "INTEGRATION_REQUEST_FAILED" }),
     ]);
     expect(JSON.stringify(latest)).not.toContain("secret");
 
     const stats = await caller.getStats({ integrationIds: mediaRequests.integrationIds });
     expect(stats.failedIntegrations).toEqual([
-      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "Integration request failed" }),
+      expect.objectContaining({ integrationId: mediaRequests.offlineId, error: "INTEGRATION_REQUEST_FAILED" }),
     ]);
     expect(JSON.stringify(stats)).not.toContain("secret");
     expect(stats.stats).toHaveLength(1);
@@ -183,4 +227,58 @@ describe("partial integration failures", () => {
       }),
     ]);
   });
+
+  test("aggregate widget payloads never expose sensitive partial-failure details", async () => {
+    const cases = [
+      {
+        kind: "sonarr" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await mediaOrganizerRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getData({ integrationIds: setup.integrationIds, pageSize: 10 }),
+      },
+      {
+        kind: "beszel" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await beszelRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getSystems({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "opnsense" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await firewallRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getFirewallCpuStatus({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "prowlarr" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await indexerManagerRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getIndexersStatus({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "ntfy" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await notificationsRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getNotifications({ integrationIds: setup.integrationIds }),
+      },
+      {
+        kind: "gluetun" as const,
+        run: async (setup: Awaited<ReturnType<typeof setupAsync>>) =>
+          await vpnRouter
+            .createCaller({ db: setup.db, deviceType: undefined, session: setup.session })
+            .getSummaries({ integrationIds: setup.integrationIds }),
+      },
+    ];
+
+    for (const testCase of cases) {
+      const setup = await setupAsync(testCase.kind);
+      const payload = JSON.stringify(await testCase.run(setup));
+      expect(payload).toContain("INTEGRATION_REQUEST_FAILED");
+      expect(payload).not.toMatch(/internal\.example|token=secret|\/private\/|response body|password/i);
+    }
+  });
 });
diff --git a/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts b/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
index 12fbe5778..729e5f4c8 100644
--- a/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
+++ b/packages/api/src/router/widgets/__tests__/custom-api-security.spec.ts
@@ -1,3 +1,5 @@
+// @vitest-environment node
+
 import { describe, expect, it } from "vitest";
 
 import { readBoundedJsonResponseAsync, validateCustomApiUrl } from "../custom-api-security";
diff --git a/packages/api/src/router/widgets/beszel.ts b/packages/api/src/router/widgets/beszel.ts
index 8cfc3e166..c52ca1717 100644
--- a/packages/api/src/router/widgets/beszel.ts
+++ b/packages/api/src/router/widgets/beszel.ts
@@ -10,7 +10,7 @@ import {
   beszelSystemsRequestHandler,
 } from "@homarr/request-handler/beszel";
 
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 import { BoundedAsyncQueue } from "./bounded-async-queue";
@@ -18,8 +18,6 @@ import { BoundedAsyncQueue } from "./bounded-async-queue";
 const logger = createLogger({ module: "beszelRouter" });
 const MAX_PENDING_LIVE_EVENTS = 4;
 
-const errorMessage = (error: unknown) => (error instanceof Error ? error.message : String(error));
-
 export const beszelRouter = createTRPCRouter({
   getSystems: publicProcedure
     .meta({
@@ -41,7 +39,6 @@ export const beszelRouter = createTRPCRouter({
           return {
             integrationId: integration.id,
             integrationName: integration.name,
-            integrationUrl: integration.url,
             systems: data,
             updatedAt: timestamp,
           };
@@ -50,10 +47,9 @@ export const beszelRouter = createTRPCRouter({
           fallback: (integration, error) => ({
             integrationId: integration.id,
             integrationName: integration.name,
-            integrationUrl: integration.url,
             systems: [],
             updatedAt: new Date(0),
-            error: errorMessage(error),
+            error: toPublicIntegrationError(error),
           }),
           throwOnAllFailures: true,
         },
@@ -127,7 +123,7 @@ export const beszelRouter = createTRPCRouter({
             history: [],
             systemNameMap: {},
             updatedAt: new Date(0),
-            error: errorMessage(error),
+            error: toPublicIntegrationError(error),
           }),
           throwOnAllFailures: true,
         },
@@ -194,7 +190,7 @@ export const beszelRouter = createTRPCRouter({
           systemStats: [],
           containerStats: [],
           updatedAt: new Date(0),
-          error: errorMessage(error),
+          error: toPublicIntegrationError(error),
         };
       }
     }),
@@ -271,15 +267,14 @@ export const beszelRouter = createTRPCRouter({
               integrationId: integration.id,
               systemId: input.systemId,
               emittedEventCount,
-              error: errorMessage(error),
+              error,
             });
             queue.fail(
-              error instanceof TRPCError
-                ? error
-                : new TRPCError({
-                    code: "INTERNAL_SERVER_ERROR",
-                    message: error instanceof Error ? error.message : String(error),
-                  }),
+              new TRPCError({
+                code: "BAD_GATEWAY",
+                message: "Live integration request failed",
+                cause: error,
+              }),
             );
           }
         })();
diff --git a/packages/api/src/router/widgets/calendar.ts b/packages/api/src/router/widgets/calendar.ts
index 4265064b7..8e9ee31ef 100644
--- a/packages/api/src/router/widgets/calendar.ts
+++ b/packages/api/src/router/widgets/calendar.ts
@@ -5,7 +5,7 @@ import { radarrReleaseTypes } from "@homarr/integrations/types";
 import { calendarMonthRequestHandler } from "@homarr/request-handler/calendar";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const calendarRouter = createTRPCRouter({
@@ -52,7 +52,7 @@ export const calendarRouter = createTRPCRouter({
               name: integration.name,
               kind: integration.kind,
             },
-            error: "Integration request failed",
+            error: PUBLIC_INTEGRATION_ERROR,
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/custom-api-security.ts b/packages/api/src/router/widgets/custom-api-security.ts
index ec2d5c81f..abe005055 100644
--- a/packages/api/src/router/widgets/custom-api-security.ts
+++ b/packages/api/src/router/widgets/custom-api-security.ts
@@ -1,6 +1,7 @@
 import { readBoundedJsonResponseAsync as readBoundedJsonResponse } from "@homarr/common/server";
 
 export const MAX_CUSTOM_API_RESPONSE_BYTES = 2 * 1024 * 1024;
+export const CUSTOM_API_FETCH_TIMEOUT_MS = 10_000;
 
 export function validateCustomApiUrl(urlString: string): URL {
   if (urlString.length > 2_048) throw new Error("Custom API URL is too long");
@@ -19,3 +20,48 @@ export async function readBoundedJsonResponseAsync(
 ): Promise<unknown> {
   return await readBoundedJsonResponse(response, maxBytes, "Custom API response");
 }
+
+export async function consumeBoundedResponseAsync(
+  response: Response,
+  maxBytes = MAX_CUSTOM_API_RESPONSE_BYTES,
+): Promise<void> {
+  const declaredLength = Number(response.headers.get("content-length"));
+  if (Number.isFinite(declaredLength) && declaredLength > maxBytes) {
+    await response.body?.cancel();
+    throw new Error(`Custom API response exceeds ${maxBytes} bytes`);
+  }
+
+  if (!response.body) return;
+  const reader = response.body.getReader();
+  let byteLength = 0;
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) return;
+    byteLength += value?.byteLength ?? 0;
+    if (byteLength > maxBytes) {
+      await reader.cancel();
+      throw new Error(`Custom API response exceeds ${maxBytes} bytes`);
+    }
+  }
+}
+
+export async function withCustomApiResponseAsync<TResult>(
+  url: URL,
+  init: Omit<RequestInit, "redirect" | "signal">,
+  consumeResponseAsync: (response: Response) => Promise<TResult>,
+  timeoutMs = CUSTOM_API_FETCH_TIMEOUT_MS,
+): Promise<TResult> {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url.toString(), {
+      ...init,
+      redirect: "error",
+      signal: controller.signal,
+    });
+    return await consumeResponseAsync(response);
+  } finally {
+    clearTimeout(timeout);
+  }
+}
diff --git a/packages/api/src/router/widgets/custom-api.ts b/packages/api/src/router/widgets/custom-api.ts
index a306e71ca..68e2ccad7 100644
--- a/packages/api/src/router/widgets/custom-api.ts
+++ b/packages/api/src/router/widgets/custom-api.ts
@@ -1,22 +1,27 @@
 import { TRPCError } from "@trpc/server";
-import superjson from "superjson";
-import { z } from "zod/v4";
+import { parse } from "superjson";
 
+import { createId } from "@homarr/common";
 import { decryptSecret } from "@homarr/common/server";
 import { customWidgetDefinitions } from "@homarr/db/schema";
 import { eq } from "@homarr/db";
 import { createLogger } from "@homarr/core/infrastructure/logs";
 import { createTRPCRouter, protectedProcedure } from "../../trpc";
 import { applyAuth } from "../custom-widget/auth";
+import { assertCustomApiItemBindingAsync, customApiItemInputSchema } from "../custom-widget/custom-widget-access";
 import { extractActionButtonDisplay, extractDisplayDataWithFallback } from "../custom-widget/display-data";
-import { readBoundedJsonResponseAsync, validateCustomApiUrl } from "./custom-api-security";
+import {
+  consumeBoundedResponseAsync,
+  readBoundedJsonResponseAsync,
+  validateCustomApiUrl,
+  withCustomApiResponseAsync,
+} from "./custom-api-security";
 
 const logger = createLogger({ module: "widget:customApi" });
 
-const FETCH_TIMEOUT_MS = 10_000;
-
 export const customApiRouter = createTRPCRouter({
-  getData: protectedProcedure.input(z.object({ definitionId: z.string() })).query(async ({ ctx, input }) => {
+  getData: protectedProcedure.input(customApiItemInputSchema).query(async ({ ctx, input }) => {
+    await assertCustomApiItemBindingAsync(ctx, input, "view");
     const definition = await ctx.db.query.customWidgetDefinitions.findFirst({
       where: eq(customWidgetDefinitions.id, input.definitionId),
       with: { secrets: true },
@@ -32,59 +37,52 @@ export const customApiRouter = createTRPCRouter({
 
     let displayConfig: Record<string, unknown>;
     try {
-      displayConfig = superjson.parse(definition.displayConfig) as Record<string, unknown>;
+      displayConfig = parse(definition.displayConfig) as Record<string, unknown>;
     } catch {
       throw new TRPCError({ code: "INTERNAL_SERVER_ERROR", message: "Widget has corrupt display configuration" });
     }
 
     if (definition.displayType === "actionButton") {
-      return extractActionButtonDisplay(displayConfig);
+      const actionDisplay = extractActionButtonDisplay(displayConfig);
+      return {
+        ...actionDisplay,
+        canExecute: ctx.session.user.permissions.includes("admin"),
+      };
     }
 
-    const decryptedSecrets = definition.secrets.map((s) => ({
-      kind: s.kind,
-      value: decryptSecret(s.value),
-    }));
-
-    const url = validateCustomApiUrl(definition.url);
-    const headers = new Headers({ Accept: "application/json" });
-
-    if (definition.method !== "GET" && definition.requestBody) {
-      headers.set("Content-Type", "application/json");
-    }
-
-    applyAuth(headers, url, definition.authType, decryptedSecrets, definition.headerName);
-
-    const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
-
     try {
-      const response = await fetch(url.toString(), {
-        method: definition.method,
-        headers,
-        body: definition.method !== "GET" ? definition.requestBody : undefined,
-        redirect: "error",
-        signal: controller.signal,
-      });
+      const decryptedSecrets = definition.secrets.map((s) => ({
+        kind: s.kind,
+        value: decryptSecret(s.value),
+      }));
+      const url = validateCustomApiUrl(definition.url);
+      const headers = new Headers({ Accept: "application/json" });
+      if (definition.method !== "GET" && definition.requestBody) headers.set("Content-Type", "application/json");
+      applyAuth(headers, url, definition.authType, decryptedSecrets, definition.headerName);
 
-      if (!response.ok) {
-        throw new TRPCError({
-          code: "BAD_REQUEST",
-          message: `API returned ${response.status}: ${response.statusText}`,
-        });
-      }
-
-      const json = await readBoundedJsonResponseAsync(response);
-      return extractDisplayDataWithFallback(json, definition.displayType, displayConfig);
+      return await withCustomApiResponseAsync(
+        url,
+        {
+          method: definition.method,
+          headers,
+          body: definition.method !== "GET" ? definition.requestBody : undefined,
+        },
+        async (response) => {
+          if (!response.ok) {
+            await consumeBoundedResponseAsync(response);
+            throw new Error(`Custom API returned HTTP ${response.status}`);
+          }
+          const json = await readBoundedJsonResponseAsync(response);
+          return extractDisplayDataWithFallback(json, definition.displayType, displayConfig);
+        },
+      );
     } catch (error) {
-      if (error instanceof TRPCError) throw error;
-      logger.error("Failed to fetch custom API data", { definitionId: input.definitionId, error });
+      const errorId = createId();
+      logger.error("Failed to fetch custom API data", { errorId, definitionId: input.definitionId, error });
       throw new TRPCError({
         code: "INTERNAL_SERVER_ERROR",
-        message: error instanceof Error ? error.message : "Failed to fetch data from external API",
+        message: "Custom API request failed",
       });
-    } finally {
-      clearTimeout(timeout);
     }
   }),
 });
diff --git a/packages/api/src/router/widgets/firewall.ts b/packages/api/src/router/widgets/firewall.ts
index fdeb77831..335f75d09 100644
--- a/packages/api/src/router/widgets/firewall.ts
+++ b/packages/api/src/router/widgets/firewall.ts
@@ -7,7 +7,7 @@ import {
 } from "@homarr/request-handler/firewall";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const firewallMiddleware = createManyIntegrationMiddleware("query", ...getIntegrationKindsByCategory("firewall"));
@@ -35,7 +35,7 @@ const queryFirewall = <
         fallback: (integration, error) => ({
           integration: { id: integration.id, name: integration.name, kind: integration.kind, updatedAt: new Date(0) },
           summary: createFallback(),
-          error: error instanceof Error ? error.message : "Integration request failed",
+          error: toPublicIntegrationError(error),
         }),
         throwOnAllFailures: true,
       },
diff --git a/packages/api/src/router/widgets/indexer-manager.ts b/packages/api/src/router/widgets/indexer-manager.ts
index fe411d9be..4d1d893d8 100644
--- a/packages/api/src/router/widgets/indexer-manager.ts
+++ b/packages/api/src/router/widgets/indexer-manager.ts
@@ -6,7 +6,7 @@ import { indexerManagerRequestHandler } from "@homarr/request-handler/indexer-ma
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
 
 const createIndexerManagerIntegrationMiddleware = (action: IntegrationAction) =>
@@ -34,7 +34,7 @@ export const indexerManagerRouter = createTRPCRouter({
             integrationId: integration.id,
             integrationName: integration.name,
             indexers: [],
-            error: error instanceof Error ? error.message : String(error),
+            error: toPublicIntegrationError(error),
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/media-organizer.ts b/packages/api/src/router/widgets/media-organizer.ts
index 2f38423f1..91738b4a8 100644
--- a/packages/api/src/router/widgets/media-organizer.ts
+++ b/packages/api/src/router/widgets/media-organizer.ts
@@ -4,7 +4,7 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { mediaOrganizerRequestHandler } from "@homarr/request-handler/media-organizer";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const mediaOrganizerRouter = createTRPCRouter({
@@ -39,7 +39,7 @@ export const mediaOrganizerRouter = createTRPCRouter({
             missingCount: 0,
             queued: [],
             queuedCount: 0,
-            error: error instanceof Error ? error.message : String(error),
+            error: toPublicIntegrationError(error),
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/media-requests.ts b/packages/api/src/router/widgets/media-requests.ts
index 4a68adb12..28d0cb15a 100644
--- a/packages/api/src/router/widgets/media-requests.ts
+++ b/packages/api/src/router/widgets/media-requests.ts
@@ -12,7 +12,7 @@ import {
 import { mediaRequestStatsRequestHandler } from "@homarr/request-handler/media-request-stats";
 
 import { createManyIntegrationMiddleware, createOneIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../../trpc";
 
 interface IntegrationQueryResult<TData> {
@@ -47,7 +47,7 @@ export const mediaRequestsRouter = createTRPCRouter({
           fallback: (integration) => ({
             integration: { id: integration.id, name: integration.name, kind: integration.kind },
             data: [],
-            error: "Integration request failed",
+            error: PUBLIC_INTEGRATION_ERROR,
           }),
           throwOnAllFailures: true,
         },
@@ -104,7 +104,7 @@ export const mediaRequestsRouter = createTRPCRouter({
           fallback: (integration) => ({
             integration: { id: integration.id, name: integration.name, kind: integration.kind },
             data: { stats: null, users: [] },
-            error: "Integration request failed",
+            error: PUBLIC_INTEGRATION_ERROR,
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/media-server.ts b/packages/api/src/router/widgets/media-server.ts
index 1ce8b863f..77e00204b 100644
--- a/packages/api/src/router/widgets/media-server.ts
+++ b/packages/api/src/router/widgets/media-server.ts
@@ -5,7 +5,7 @@ import { mediaServerRequestHandler } from "@homarr/request-handler/media-server"
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const createMediaServerIntegrationMiddleware = (action: IntegrationAction) =>
@@ -43,7 +43,7 @@ export const mediaServerRouter = createTRPCRouter({
             integrationName: integration.name,
             integrationKind: integration.kind,
             sessions: [],
-            error: "Integration request failed",
+            error: PUBLIC_INTEGRATION_ERROR,
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/notifications.ts b/packages/api/src/router/widgets/notifications.ts
index 86124164c..3453b47a6 100644
--- a/packages/api/src/router/widgets/notifications.ts
+++ b/packages/api/src/router/widgets/notifications.ts
@@ -3,7 +3,7 @@ import { notificationsRequestHandler } from "@homarr/request-handler/notificatio
 
 import type { IntegrationAction } from "../../middlewares/integration";
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 const createNotificationsIntegrationMiddleware = (action: IntegrationAction) =>
@@ -39,7 +39,7 @@ export const notificationsRouter = createTRPCRouter({
               updatedAt: new Date(0),
             },
             data: [],
-            error: error instanceof Error ? error.message : String(error),
+            error: toPublicIntegrationError(error),
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/router/widgets/releases.ts b/packages/api/src/router/widgets/releases.ts
index d234a75c1..8101fefbb 100644
--- a/packages/api/src/router/widgets/releases.ts
+++ b/packages/api/src/router/widgets/releases.ts
@@ -13,6 +13,7 @@ import { createTRPCRouter, publicProcedure } from "../../trpc";
 import { throwIfActionForbiddenAsync } from "../board/board-access";
 
 const logger = createLogger({ module: "releasesRouter" });
+const PUBLIC_RELEASE_ERROR_MESSAGE: string = "Release provider request failed";
 
 const formatVersionFilterRegex = (versionFilter: z.infer<typeof releaseVersionFilterSchema> | undefined) => {
   if (!versionFilter) return undefined;
@@ -100,19 +101,38 @@ export const releasesRouter = createTRPCRouter({
               })
               .getDataAsync();
 
+            const data = response.data.success
+              ? response.data
+              : {
+                  success: false as const,
+                  error: { code: response.data.error.code, message: PUBLIC_RELEASE_ERROR_MESSAGE },
+                };
+            if (!response.data.success) {
+              logger.warn("Release provider request failed", {
+                repositoryId,
+                provider: repository.provider,
+                error: response.data.error,
+              });
+            }
+
             return {
               id: repositoryId,
               provider: repository.provider,
               timestamp: response.timestamp,
-              ...response.data,
+              ...data,
             };
           } catch (error) {
+            logger.warn("Release provider request failed", {
+              repositoryId,
+              provider: repository.provider,
+              error,
+            });
             return {
               id: repositoryId,
               provider: repository.provider,
               timestamp: new Date(),
               success: false as const,
-              error: { code: "unexpected" as const, message: String(error) },
+              error: { code: "unexpected" as const, message: PUBLIC_RELEASE_ERROR_MESSAGE },
             };
           }
         }),
diff --git a/packages/api/src/router/widgets/vpn.ts b/packages/api/src/router/widgets/vpn.ts
index 79ee5308b..276367440 100644
--- a/packages/api/src/router/widgets/vpn.ts
+++ b/packages/api/src/router/widgets/vpn.ts
@@ -2,7 +2,7 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { vpnSummaryHandler } from "@homarr/request-handler/vpn";
 
 import { createManyIntegrationMiddleware } from "../../middlewares/integration";
-import { settleIntegrationQueries } from "../../settle-integrations";
+import { settleIntegrationQueries, toPublicIntegrationError } from "../../settle-integrations";
 import { createTRPCRouter, publicProcedure } from "../../trpc";
 
 export const vpnRouter = createTRPCRouter({
@@ -33,7 +33,7 @@ export const vpnRouter = createTRPCRouter({
               updatedAt: new Date(0),
             },
             summary: null,
-            error: error instanceof Error ? error.message : String(error),
+            error: toPublicIntegrationError(error),
           }),
           throwOnAllFailures: true,
         },
diff --git a/packages/api/src/settle-integrations.ts b/packages/api/src/settle-integrations.ts
index ec16b955d..c095c7715 100644
--- a/packages/api/src/settle-integrations.ts
+++ b/packages/api/src/settle-integrations.ts
@@ -5,6 +5,10 @@ import { ErrorWithMetadata } from "@homarr/core/infrastructure/logs/error";
 
 const logger = createLogger({ module: "settleIntegrations" });
 
+export const PUBLIC_INTEGRATION_ERROR: string = "INTEGRATION_REQUEST_FAILED";
+
+export const toPublicIntegrationError = (_error: unknown): string => PUBLIC_INTEGRATION_ERROR;
+
 interface IntegrationLike {
   id: string;
   name: string;
diff --git a/packages/api/src/test/settle-integrations.spec.ts b/packages/api/src/test/settle-integrations.spec.ts
index 372c2889e..37e7c3640 100644
--- a/packages/api/src/test/settle-integrations.spec.ts
+++ b/packages/api/src/test/settle-integrations.spec.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test, vi } from "vitest";
 
-import { settleIntegrationQueries } from "../settle-integrations";
+import { PUBLIC_INTEGRATION_ERROR, settleIntegrationQueries, toPublicIntegrationError } from "../settle-integrations";
 
 const mocks = vi.hoisted(() => ({
   logger: { warn: vi.fn() },
@@ -22,6 +22,17 @@ const integrations = [
 beforeEach(() => vi.clearAllMocks());
 
 describe("settleIntegrationQueries", () => {
+  test("maps sensitive integration failures to a stable public code", () => {
+    const error = new Error(
+      "GET http://admin:password@nas.internal.local/private/path?token=secret returned\nprivate response body",
+    );
+
+    const publicError = toPublicIntegrationError(error);
+
+    expect(publicError).toBe(PUBLIC_INTEGRATION_ERROR);
+    expect(publicError).not.toMatch(/admin|password|nas\.internal|private|token|secret|response body/i);
+  });
+
   test("returns an empty result when no integrations are configured", async () => {
     await expect(settleIntegrationQueries([], vi.fn())).resolves.toEqual([]);
   });
diff --git a/packages/common/src/url.ts b/packages/common/src/url.ts
index f13cc1efc..079de8418 100644
--- a/packages/common/src/url.ts
+++ b/packages/common/src/url.ts
@@ -48,3 +48,38 @@ const absoluteUrlRegex = /^[a-z]+:(\/\/)?/;
 export const isAbsoluteUrl = (urlOrPath: string): boolean => {
   return absoluteUrlRegex.test(urlOrPath.toLowerCase());
 };
+
+export const SAFE_NEW_TAB_REL = "noopener noreferrer";
+
+interface SafeApplicationUrlOptions {
+  baseUrl?: unknown;
+}
+
+/** Returns an absolute, credential-free HTTP(S) URL suitable for application navigation. */
+export const getSafeApplicationUrl = (value: unknown, options: SafeApplicationUrlOptions = {}): string | undefined => {
+  if (typeof value !== "string" || value.trim() === "") return undefined;
+
+  try {
+    let baseUrl: string | undefined;
+    if (options.baseUrl !== undefined) {
+      const parsedBase = parseHttpUrl(options.baseUrl);
+      if (!parsedBase) return undefined;
+      parsedBase.search = "";
+      parsedBase.hash = "";
+      baseUrl = parsedBase.toString();
+    }
+
+    return parseHttpUrl(value, baseUrl)?.toString();
+  } catch {
+    return undefined;
+  }
+};
+
+const parseHttpUrl = (value: unknown, baseUrl?: string): URL | undefined => {
+  if (typeof value !== "string") return undefined;
+  const url = new URL(value, baseUrl);
+  if ((url.protocol !== "http:" && url.protocol !== "https:") || url.username !== "" || url.password !== "") {
+    return undefined;
+  }
+  return url;
+};
diff --git a/packages/spotlight/src/components/actions/items/children-action-item.tsx b/packages/spotlight/src/components/actions/items/children-action-item.tsx
index 3d5427506..f56e46a23 100644
--- a/packages/spotlight/src/components/actions/items/children-action-item.tsx
+++ b/packages/spotlight/src/components/actions/items/children-action-item.tsx
@@ -1,5 +1,6 @@
 import { Spotlight } from "@mantine/spotlight";
 
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "@homarr/common";
 import { Link } from "@homarr/ui";
 
 import type { inferSearchInteractionOptions } from "../../../lib/interaction";
@@ -15,10 +16,18 @@ interface ChildrenActionItemProps {
 export const ChildrenActionItem = ({ childrenOptions, action, query, setChildrenOptions }: ChildrenActionItemProps) => {
   const interaction = action.useInteraction(childrenOptions.option, query);
 
+  const safeHref = interaction.type === "link" ? getSafeApplicationUrl(interaction.href) : undefined;
   const renderRoot =
-    interaction.type === "link"
+    interaction.type === "link" && safeHref
       ? (props: Record<string, unknown>) => {
-          return <Link href={interaction.href} target={interaction.newTab ? "_blank" : undefined} {...props} />;
+          return (
+            <Link
+              href={safeHref}
+              target={interaction.newTab ? "_blank" : undefined}
+              rel={interaction.newTab ? SAFE_NEW_TAB_REL : undefined}
+              {...props}
+            />
+          );
         }
       : undefined;
 
diff --git a/packages/spotlight/src/components/actions/items/group-action-item.tsx b/packages/spotlight/src/components/actions/items/group-action-item.tsx
index e6a802c26..bc7cfaf41 100644
--- a/packages/spotlight/src/components/actions/items/group-action-item.tsx
+++ b/packages/spotlight/src/components/actions/items/group-action-item.tsx
@@ -2,6 +2,7 @@ import { Spotlight } from "@mantine/spotlight";
 
 import type { TranslationObject } from "@homarr/translation";
 import { Link } from "@homarr/ui";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "@homarr/common";
 
 import type { SearchGroup } from "../../../lib/group";
 import type { inferSearchInteractionOptions } from "../../../lib/interaction";
@@ -30,10 +31,18 @@ export const SpotlightGroupActionItem = <TOption extends Record<string, unknown>
 
   const { key: _reactKey, ...optionProps } = option as unknown as { key?: unknown } & Record<string, unknown>;
 
+  const safeHref = interaction.type === "link" ? getSafeApplicationUrl(interaction.href) : undefined;
   const renderRoot =
-    interaction.type === "link"
+    interaction.type === "link" && safeHref
       ? (props: Record<string, unknown>) => {
-          return <Link href={interaction.href} target={interaction.newTab ? "_blank" : undefined} {...props} />;
+          return (
+            <Link
+              href={safeHref}
+              target={interaction.newTab ? "_blank" : undefined}
+              rel={interaction.newTab ? SAFE_NEW_TAB_REL : undefined}
+              {...props}
+            />
+          );
         }
       : undefined;
 
diff --git a/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx b/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx
index b177b20b4..cb2098505 100644
--- a/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx
+++ b/packages/widgets/src/_inputs/widget-custom-widget-select-input.tsx
@@ -13,10 +13,14 @@ export const WidgetCustomWidgetSelectInput = ({
   property,
   kind,
   options,
+  boardId,
 }: CommonWidgetInputProps<"customWidgetSelect">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
-  const { data, isLoading } = clientApi.customWidget.all.useQuery();
+  const { data, isLoading } = clientApi.customWidget.available.useQuery(
+    { boardId: boardId ?? "" },
+    { enabled: Boolean(boardId) },
+  );
   const [search, setSearch] = useState("");
 
   const currentValue = form.values.options[property] as string;
diff --git a/packages/widgets/src/_inputs/widget-location-input.tsx b/packages/widgets/src/_inputs/widget-location-input.tsx
index 37d26cf2e..91501aa2c 100644
--- a/packages/widgets/src/_inputs/widget-location-input.tsx
+++ b/packages/widgets/src/_inputs/widget-location-input.tsx
@@ -21,8 +21,9 @@ import { IconClick, IconListSearch } from "@tabler/icons-react";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { createModal, useModalAction } from "@homarr/modals";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
+import { formatLocalizedCompactNumber } from "../common/locale";
 import type { OptionLocation } from "../options";
 import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
@@ -128,7 +129,7 @@ const LocationSearchModal = createModal<LocationSearchInnerProps>(({ actions, in
   if (error) {
     return (
       <Alert title={tCommon("error")} color="red">
-        {error.message}
+        {tCommon("action.tryAgain")}
       </Alert>
     );
   }
@@ -187,6 +188,7 @@ interface LocationSearchTableRowProps {
 
 const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: LocationSearchTableRowProps) => {
   const t = useScopedI18n("widget.common.location.table");
+  const locale = useCurrentIntlLocale();
   const onSelect = useCallback(() => {
     onLocationSelect({
       name: city.name,
@@ -196,8 +198,6 @@ const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: Location
     closeModal();
   }, [city, onLocationSelect, closeModal]);
 
-  const formatter = Intl.NumberFormat("en", { notation: "compact" });
-
   return (
     <Table.Tr>
       <Table.Td>
@@ -215,7 +215,7 @@ const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: Location
       </Table.Td>
       <Table.Td>
         {city.population ? (
-          <Text style={{ whiteSpace: "nowrap" }}>{formatter.format(city.population)}</Text>
+          <Text style={{ whiteSpace: "nowrap" }}>{formatLocalizedCompactNumber(city.population, locale)}</Text>
         ) : (
           <Text c="gray"> {t("population.fallback")}</Text>
         )}
diff --git a/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx b/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx
index 45c9ed595..9e3b925e4 100644
--- a/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx
+++ b/packages/widgets/src/_inputs/widget-multiReleasesRepositories-input.tsx
@@ -272,19 +272,19 @@ const ProviderTokensSection = ({ itemId, repositories }: { itemId: string; repos
   const { data: configuredKinds = [], refetch } = clientApi.widget.secrets.getConfiguredKinds.useQuery({ itemId });
   const setSecret = clientApi.widget.secrets.setSecret.useMutation({
     onSuccess: () => refetch(),
-    onError: (error) => {
+    onError: () => {
       showErrorNotification({
-        title: "Failed to save token",
-        message: error.message,
+        title: tRepository("tokens.label"),
+        message: tRepository("tokens.notConfigured"),
       });
     },
   });
   const deleteSecret = clientApi.widget.secrets.deleteSecret.useMutation({
     onSuccess: () => refetch(),
-    onError: (error) => {
+    onError: () => {
       showErrorNotification({
-        title: "Failed to delete token",
-        message: error.message,
+        title: tRepository("tokens.label"),
+        message: tRepository("tokens.notConfigured"),
       });
     },
   });
diff --git a/packages/widgets/src/advanced-focus-support.spec.ts b/packages/widgets/src/advanced-focus-support.spec.ts
new file mode 100644
index 000000000..1b8e7a73f
--- /dev/null
+++ b/packages/widgets/src/advanced-focus-support.spec.ts
@@ -0,0 +1,42 @@
+import { describe, expect, test } from "vitest";
+
+import { supportsAdvancedFocus } from "./definition";
+import { widgetImports } from ".";
+
+const compactOnlyWidgetKinds = [
+  "app",
+  "bazarr",
+  "beszelSystemGrid",
+  "beszelSystemStats",
+  "beszelSystemTable",
+  "coolify",
+  "dnsHoleControls",
+  "dnsHoleSummary",
+  "iframe",
+  "indexerManager",
+  "mediaRequests-requestList",
+  "mediaRequests-requestStats",
+  "minecraftServerStatus",
+  "networkControllerSummary",
+  "notebook",
+  "notifications",
+  "paperlessNgx",
+  "patchmon",
+  "releases",
+  "rssFeed",
+  "stockPrice",
+  "systemDisks",
+  "video",
+  "vpn",
+] as const;
+
+describe("advanced focus support", () => {
+  test("is reserved for widgets with a distinct advanced experience", () => {
+    const actualCompactOnlyKinds = Object.entries(widgetImports)
+      .filter(([, widgetImport]) => !supportsAdvancedFocus(widgetImport.definition))
+      .map(([kind]) => kind)
+      .toSorted();
+
+    expect(actualCompactOnlyKinds).toEqual([...compactOnlyWidgetKinds].toSorted());
+  });
+});
diff --git a/packages/widgets/src/anchor-note/component.tsx b/packages/widgets/src/anchor-note/component.tsx
index 945a2de55..9e786afa8 100644
--- a/packages/widgets/src/anchor-note/component.tsx
+++ b/packages/widgets/src/anchor-note/component.tsx
@@ -18,6 +18,7 @@ import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client"
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import actionTargetClasses from "../common/action-target.module.css";
 
 import "react-quill-new/dist/quill.snow.css";
@@ -181,10 +182,12 @@ const AnchorNoteWidgetContent = ({
 }: AnchorNoteWidgetContentProps) => {
   const t = useScopedI18n("widget.anchorNote");
   const locale = useCurrentIntlLocale();
-  const { data: note, refetch } = clientApi.widget.anchorNotes.getNote.useQuery({
+  const noteQuery = clientApi.widget.anchorNotes.getNote.useQuery({
     integrationId,
     noteId,
   });
+  const note = getUsableWidgetQueryData(noteQuery);
+  const { refetch } = noteQuery;
   const { mutateAsync: updateNoteAsync, isPending: isUpdating } = clientApi.widget.anchorNotes.updateNote.useMutation();
 
   const [isEditing, setIsEditing] = useState(false);
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 40e9064c1..6e84876fd 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import { Fragment, Suspense } from "react";
-import { Flex, rem, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
+import { Box, Flex, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconMinus } from "@tabler/icons-react";
 import combineClasses from "clsx";
 
@@ -14,6 +14,9 @@ import { useI18n } from "@homarr/translation/client";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./app.module.css";
 import { PingDot } from "./ping/ping-dot";
@@ -23,12 +26,12 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
   const t = useI18n();
   const settings = useSettings();
   const board = useRequiredBoard();
-  const { data: app } = clientApi.app.byId.useQuery({
-    id: options.appId,
-  });
+  const appQuery = clientApi.app.byId.useQuery({ id: options.appId });
+  const app = getUsableWidgetQueryData(appQuery);
+  const href = getSafeApplicationUrl(app?.href);
   useRegisterSpotlightContextResults(
     `app-${app?.id ?? options.appId}`,
-    app?.href
+    app && href
       ? [
           {
             id: app.id,
@@ -37,99 +40,102 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
             interaction() {
               return {
                 type: "link",
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                href: app.href!,
+                href,
                 newTab: options.openInNewTab,
               };
             },
           },
         ]
       : [],
-    [app, options.openInNewTab],
+    [app, href, options.openInNewTab],
   );
 
+  if (isInitialWidgetQueryPending(appQuery)) return <WidgetQueryLoadingState />;
   if (!app) return <WidgetEmptyState />;
 
   const isTiny = height < 100 || width < 100;
   const isColumnLayout = options.layout.startsWith("column");
 
   return (
-    <AppLink
-      href={app.href ?? undefined}
-      openInNewTab={options.openInNewTab}
-      enabled={Boolean(app.href) && !isEditMode}
-    >
-      <Tooltip.Floating
-        label={app.description?.split("\n").map((line, index) => (
-          <Fragment key={index}>
-            {line}
-            <br />
-          </Fragment>
-        ))}
-        position="right-start"
-        multiline
-        disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode}
-        styles={{ tooltip: { maxWidth: 300 } }}
-      >
-        <Flex
-          p={isTiny ? 4 : "sm"}
-          className={combineClasses("app-flex-wrapper", app.name, app.id, app.href && classes.appWithUrl)}
-          h="100%"
-          w="100%"
-          direction={options.layout}
-          justify="center"
-          align="center"
-          gap={isColumnLayout ? 0 : "sm"}
-          onContextMenu={isEditMode ? (e) => e.preventDefault() : undefined}
+    <Box h="100%" w="100%" pos="relative">
+      <AppLink href={href} openInNewTab={options.openInNewTab} enabled={Boolean(href) && !isEditMode}>
+        <Tooltip.Floating
+          label={app.description?.split("\n").map((line, index) => (
+            <Fragment key={index}>
+              {line}
+              <br />
+            </Fragment>
+          ))}
+          position="right-start"
+          multiline
+          disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode}
+          styles={{ tooltip: { maxWidth: 300 } }}
         >
-          <Stack gap={0}>
-            {options.showTitle && (
-              <Text
-                className="app-title"
-                fw={700}
-                size={isTiny ? rem(8) : "sm"}
-                ta={isColumnLayout ? "center" : undefined}
-              >
-                {app.name}
-              </Text>
-            )}
-            {options.descriptionDisplayMode === "normal" && (
-              <Text
-                className="app-description"
-                size={isTiny ? rem(8) : "sm"}
-                ta={isColumnLayout ? "center" : undefined}
-                c="dimmed"
-                lineClamp={Math.max(1, Math.floor((height - 48) / 18))}
-              >
-                {app.description?.split("\n").map((line, index) => (
-                  <Fragment key={index}>
-                    {line}
-                    <br />
-                  </Fragment>
-                ))}
-              </Text>
-            )}
-          </Stack>
-          <MaskedOrNormalImage
-            imageUrl={app.iconUrl}
-            hasColor={board.iconColor !== null}
-            alt={app.name}
-            className={combineClasses(classes.appIcon, "app-icon")}
-            style={{
-              height: "100%",
-              width: "100%",
-              minWidth: "20%",
-              maxWidth: isColumnLayout ? undefined : isTiny ? "38%" : "50%",
-            }}
-          />
-        </Flex>
-      </Tooltip.Floating>
-      {options.pingEnabled && !settings.forceDisableStatus && !board.disableStatus && app.href ? (
-        <Suspense fallback={<PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />}>
-          <PingIndicator appId={app.id} />
-        </Suspense>
-      ) : null}
-    </AppLink>
+          <Flex
+            p={isTiny ? 4 : "sm"}
+            className={combineClasses("app-flex-wrapper", app.name, app.id, href && classes.appWithUrl)}
+            h="100%"
+            w="100%"
+            direction={options.layout}
+            justify="center"
+            align="center"
+            gap={isColumnLayout ? 0 : "sm"}
+            onContextMenu={isEditMode ? (e) => e.preventDefault() : undefined}
+          >
+            <Stack gap={0}>
+              {options.showTitle && (
+                <Text
+                  className="app-title"
+                  fw={700}
+                  size={isTiny ? "xs" : "sm"}
+                  ta={isColumnLayout ? "center" : undefined}
+                >
+                  {app.name}
+                </Text>
+              )}
+              {options.descriptionDisplayMode === "normal" && !isTiny && (
+                <Text
+                  className="app-description"
+                  size="sm"
+                  ta={isColumnLayout ? "center" : undefined}
+                  c="dimmed"
+                  lineClamp={Math.max(1, Math.floor((height - 48) / 18))}
+                >
+                  {app.description?.split("\n").map((line, index) => (
+                    <Fragment key={index}>
+                      {line}
+                      <br />
+                    </Fragment>
+                  ))}
+                </Text>
+              )}
+            </Stack>
+            <MaskedOrNormalImage
+              imageUrl={app.iconUrl}
+              hasColor={board.iconColor !== null}
+              alt={app.name}
+              className={combineClasses(classes.appIcon, "app-icon")}
+              style={{
+                height: "100%",
+                width: "100%",
+                minWidth: "20%",
+                maxWidth: isColumnLayout ? undefined : isTiny ? "38%" : "50%",
+              }}
+            />
+          </Flex>
+        </Tooltip.Floating>
+        {options.pingEnabled && !settings.forceDisableStatus && !board.disableStatus && app.href ? (
+          <Suspense fallback={<PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />}>
+            <PingIndicator appId={app.id} />
+          </Suspense>
+        ) : null}
+      </AppLink>
+      {appQuery.error && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator error={appQuery.error} label={t("widget.app.name")} />
+        </Box>
+      )}
+    </Box>
   );
 }
 
@@ -145,7 +151,7 @@ const AppLink = ({ href, openInNewTab, enabled, children }: PropsWithChildren<Ap
       component="a"
       href={href}
       target={openInNewTab ? "_blank" : undefined}
-      rel="noreferrer"
+      rel={openInNewTab ? SAFE_NEW_TAB_REL : undefined}
       h="100%"
       w="100%"
     >
diff --git a/packages/widgets/src/app/ping/ping-indicator.tsx b/packages/widgets/src/app/ping/ping-indicator.tsx
index 75dc38974..1548881b5 100644
--- a/packages/widgets/src/app/ping/ping-indicator.tsx
+++ b/packages/widgets/src/app/ping/ping-indicator.tsx
@@ -11,7 +11,9 @@ interface PingIndicatorProps {
 
 export const PingIndicator = ({ appId }: PingIndicatorProps) => {
   const t = useI18n();
-  const { data: pingResult } = clientApi.widget.app.ping.useQuery({ id: appId }, { refetchOnMount: false });
+  const { data: pingResult, error } = clientApi.widget.app.ping.useQuery({ id: appId }, { refetchOnMount: false });
+
+  if (error) return <PingDot icon={IconX} color="red" tooltip={t("common.error")} />;
 
   if (!pingResult) return <PingDot icon={IconMinus} color="gray" tooltip={`${t("common.action.loading")}…`} />;
 
diff --git a/packages/widgets/src/audio-stats/component.tsx b/packages/widgets/src/audio-stats/component.tsx
index 1c6266b8e..16ff58069 100644
--- a/packages/widgets/src/audio-stats/component.tsx
+++ b/packages/widgets/src/audio-stats/component.tsx
@@ -8,9 +8,9 @@ import { formatBytes, formatDuration } from "@homarr/common";
 import type { AudiobookshelfDashboardData } from "@homarr/integrations/types";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
-import { NoIntegrationDataError } from "../errors/no-data-integration";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { AudioStatsContent } from "./audio-stats-content";
 
 export default function AudioStatsWidget({
@@ -19,7 +19,7 @@ export default function AudioStatsWidget({
   width,
   height,
   displayMode = "compact",
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"audioStats">) {
   const statsInput = { integrationId: integrationIds[0] ?? "" };
   const { data: response, error: statsError } = clientApi.widget.audioStats.getStats.useQuery(statsInput);
@@ -29,7 +29,7 @@ export default function AudioStatsWidget({
     streamsInput,
     { enabled: streamsEnabled },
   );
-  setWidgetRuntimeQueries(widgetStateRef, [
+  useWidgetRuntimeQueries(widgetRuntimeRef, [
     getQueryKey(clientApi.widget.audioStats.getStats, statsInput, "query"),
     ...(streamsEnabled ? [getQueryKey(clientApi.widget.mediaServer.getCurrentStreams, streamsInput, "query")] : []),
   ]);
@@ -37,7 +37,6 @@ export default function AudioStatsWidget({
   if (statsError && response === undefined) throw statsError;
   if (streamsEnabled && streamsError && streamResults === undefined) throw streamsError;
   const currentStreams = streamResults ?? [];
-  if (streamsEnabled && currentStreams.some(({ error }) => Boolean(error))) throw new NoIntegrationDataError();
   if (!response) return <WidgetEmptyState />;
 
   const summary = (
@@ -56,9 +55,15 @@ export default function AudioStatsWidget({
   );
   const audiobookStats = response.kind === "audiobookshelf" ? (response.data as AudiobookshelfDashboardData) : null;
   const advancedGridColumns = width >= 760 ? 2 : 1;
+  const hasStreamErrors = currentStreams.some(({ error }) => Boolean(error));
   return (
     <Stack h="100%" gap="lg" p="md">
       <div style={{ minHeight: 150 }}>{summary}</div>
+      {hasStreamErrors && (
+        <Group justify="flex-end">
+          <IntegrationErrorIndicator results={currentStreams} />
+        </Group>
+      )}
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>
         {response.kind === "navidrome" ? (
           <SimpleGrid cols={advancedGridColumns} spacing="xs">
diff --git a/packages/widgets/src/bazarr/component.tsx b/packages/widgets/src/bazarr/component.tsx
index 3538ecc2f..c4914bfff 100644
--- a/packages/widgets/src/bazarr/component.tsx
+++ b/packages/widgets/src/bazarr/component.tsx
@@ -36,19 +36,14 @@ const iconSizeByWidth = [
   { minWidth: 0, size: 16 },
 ] as const;
 
-export default function BazarrWidget({
-  integrationIds,
-  options,
-  width,
-  height,
-  displayMode,
-}: WidgetComponentProps<"bazarr">) {
+export default function BazarrWidget({ integrationIds, options, width, height }: WidgetComponentProps<"bazarr">) {
   const t = useScopedI18n("widget.bazarr");
-  const { data: badges } = clientApi.widget.bazarr.getBadges.useQuery(
+  const { data: badges, error } = clientApi.widget.bazarr.getBadges.useQuery(
     { integrationId: integrationIds[0] ?? "" },
     { enabled: Boolean(integrationIds[0]) },
   );
 
+  if (error && !badges) throw error;
   if (!badges) return <WidgetEmptyState />;
 
   const statValues = {
@@ -59,10 +54,10 @@ export default function BazarrWidget({
   } as const;
 
   const visibleStatKeys = Object.entries(statVisibilityByOption)
-    .filter(([optionKey]) => displayMode === "advanced" || options[optionKey as keyof typeof options])
+    .filter(([optionKey]) => options[optionKey as keyof typeof options])
     .map(([, statKey]) => statKey);
 
-  const gridCols = getGridCols(width, height, visibleStatKeys.length, displayMode === "advanced");
+  const gridCols = getGridCols(width, height, visibleStatKeys.length);
   const iconSize = getIconSize(Math.min(width, height));
 
   if (visibleStatKeys.length === 0) {
@@ -100,14 +95,14 @@ export default function BazarrWidget({
   );
 }
 
-export function getGridCols(width: number, height: number, itemCount: number, isAdvanced = false): number {
+export function getGridCols(width: number, height: number, itemCount: number): number {
   if (itemCount <= 1) return 1;
-  if (isAdvanced && width >= 640) return Math.min(itemCount, 4);
 
-  const widthMatch = gridColsByWidth.find(({ minWidth }) => width >= minWidth)?.cols ?? 1;
-  const rowsAtWidth = Math.ceil(itemCount / widthMatch);
-  const rowHeight = height / rowsAtWidth;
-  return rowHeight >= 72 ? widthMatch : Math.min(itemCount, Math.max(widthMatch, 2));
+  const preferredColumns = gridColsByWidth.find(({ minWidth }) => width >= minWidth)?.cols ?? 1;
+  const maxColumnsByWidth = Math.max(1, Math.floor(width / 160));
+  const maxRowsByHeight = Math.max(1, Math.floor(height / 72));
+  const columnsNeededToFit = Math.ceil(itemCount / maxRowsByHeight);
+  return Math.min(itemCount, maxColumnsByWidth, Math.max(preferredColumns, columnsNeededToFit));
 }
 
 export function getIconSize(width: number): number {
diff --git a/packages/widgets/src/bazarr/index.ts b/packages/widgets/src/bazarr/index.ts
index a4c10a540..3a63fe4bd 100644
--- a/packages/widgets/src/bazarr/index.ts
+++ b/packages/widgets/src/bazarr/index.ts
@@ -4,6 +4,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("bazarr", {
+  supportsAdvancedFocus: false,
   icon: IconBadgeCc,
   supportedIntegrations: ["bazarr"],
   integrationsRequired: true,
diff --git a/packages/widgets/src/bazarr/layout.spec.ts b/packages/widgets/src/bazarr/layout.spec.ts
index 2401ce4e6..e3552a737 100644
--- a/packages/widgets/src/bazarr/layout.spec.ts
+++ b/packages/widgets/src/bazarr/layout.spec.ts
@@ -4,11 +4,11 @@ import { getGridCols, getIconSize } from "./component";
 
 describe("Bazarr responsive layout", () => {
   test("uses two columns for a short widget so all stats remain visible", () => {
-    expect(getGridCols(220, 100, 4)).toBe(2);
+    expect(getGridCols(220, 100, 4)).toBe(1);
   });
 
   test("uses four columns in a wide advanced surface", () => {
-    expect(getGridCols(800, 400, 4, true)).toBe(4);
+    expect(getGridCols(800, 400, 4)).toBe(2);
   });
 
   test("sizes icons from the constrained dimension", () => {
diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index ae5d20769..f7743b935 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -26,6 +26,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
 const alertIconMap: Record<string, LucideIcon> = {
   CPU: Cpu,
@@ -56,7 +57,9 @@ export default function BeszelAlertsWidget({
     () => ({ integrationIds, includeHistory: options.showHistory, maxHistoryItems: options.maxHistoryItems }),
     [integrationIds, options.showHistory, options.maxHistoryItems],
   );
-  const { data: results = [], error: alertsError, isPending } = clientApi.widget.beszel.getAlerts.useQuery(alertsInput);
+  const alertsQuery = clientApi.widget.beszel.getAlerts.useQuery(alertsInput);
+  const results = getUsableWidgetQueryData(alertsQuery) ?? [];
+  const { isPending } = alertsQuery;
 
   const systemNameMap = useMemo(() => {
     const map: Record<string, string> = {};
@@ -86,8 +89,6 @@ export default function BeszelAlertsWidget({
   const showHistory = options.showHistory && (displayMode === "advanced" || height >= 360);
   const showAlertDescriptions = displayMode === "advanced" || height >= 190;
 
-  if (alertsError) throw alertsError;
-
   if (isPending) {
     return (
       <Center h="100%">
diff --git a/packages/widgets/src/beszel-system-grid/component.tsx b/packages/widgets/src/beszel-system-grid/component.tsx
index d7fcbb21c..66f32dc35 100644
--- a/packages/widgets/src/beszel-system-grid/component.tsx
+++ b/packages/widgets/src/beszel-system-grid/component.tsx
@@ -37,6 +37,7 @@ import {
 } from "../beszel/_shared/format";
 import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
 
@@ -385,22 +386,17 @@ export default function BeszelSystemGridWidget({
   isEditMode,
   width,
   height,
-  displayMode = "compact",
 }: WidgetComponentProps<"beszelSystemGrid">) {
   const t = useScopedI18n("widget.beszelSystemGrid");
   const board = useRequiredBoard();
   const { openModal } = useModalAction(BeszelSystemStatsModal);
 
-  const {
-    data: results = [],
-    error: systemsError,
-    isPending,
-  } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const results = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const { isPending } = systemsQuery;
 
   const filteredSystems = useBeszelFilteredSystems(results, options.statusFilter);
 
-  if (systemsError) throw systemsError;
-
   if (isPending) {
     return (
       <Center h="100%">
@@ -425,20 +421,15 @@ export default function BeszelSystemGridWidget({
     );
   }
 
-  const advanced = displayMode === "advanced";
-  const cols = advanced
-    ? Math.min(filteredSystems.length, width >= 900 ? 2 : 1)
-    : getColCount(width, height, filteredSystems.length);
+  const cols = getColCount(width, height, filteredSystems.length);
   const rows = Math.ceil(filteredSystems.length / cols) || 1;
   const rawCellHeight = height / rows;
-  const minimumCellHeight = advanced ? 320 : MIN_CELL_HEIGHT;
+  const minimumCellHeight = MIN_CELL_HEIGHT;
   const scrollEnabled = rawCellHeight < minimumCellHeight;
   const effectiveCellHeight = scrollEnabled ? minimumCellHeight : rawCellHeight;
   const cellWidth = width / cols;
   const size = getSizeConfig(cellWidth, effectiveCellHeight);
-  const maxMetrics = advanced
-    ? Math.min(metricRenderers.length, getMaxVisibleMetrics(effectiveCellHeight, size))
-    : getMaxVisibleMetrics(effectiveCellHeight, size);
+  const maxMetrics = getMaxVisibleMetrics(effectiveCellHeight, size);
 
   return (
     <Box h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
diff --git a/packages/widgets/src/beszel-system-stats/component.tsx b/packages/widgets/src/beszel-system-stats/component.tsx
index a448bb76a..a4031e865 100644
--- a/packages/widgets/src/beszel-system-stats/component.tsx
+++ b/packages/widgets/src/beszel-system-stats/component.tsx
@@ -15,9 +15,10 @@ import { useScopedI18n } from "@homarr/translation/client";
 import classes from "./component.module.css";
 
 import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import type { BeszelTimePeriod } from "../beszel/_shared/chart";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { BeszelStatsView } from "../beszel/_shared/stats-view";
 import { createBeszelSystemChoices, resolveBeszelSystemChoice } from "./selection";
 
@@ -26,12 +27,10 @@ export default function BeszelSystemStatsWidget({
   integrationIds,
   isEditMode,
   width,
-  height,
-  displayMode = "compact",
   boardId,
   itemId,
   setOptions,
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"beszelSystemStats">) {
   const t = useScopedI18n("widget.beszelSystemStats");
   const board = useOptionalBoard();
@@ -46,22 +45,26 @@ export default function BeszelSystemStatsWidget({
           message: t("error.selectionSaveMessage"),
         }),
     });
-  const {
-    data: systemsResult = [],
-    isPending: systemsPending,
-    error: systemsError,
-  } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systemsResult = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const { isPending: systemsPending } = systemsQuery;
 
   const systems = useMemo(() => createBeszelSystemChoices(systemsResult), [systemsResult]);
   const selectedSystem = resolveBeszelSystemChoice(systems, options.systemId);
   const selectedValue = selectedSystem?.value ?? "";
   const selectedLabel = selectedSystem?.label;
   const systemExists = selectedSystem !== undefined;
-  const includeDocker =
-    (displayMode === "advanced" || height >= 380) &&
-    (options.showDockerCpu || options.showDockerMemory || options.showDockerNetwork);
-  setWidgetRuntimeQueries(
-    widgetStateRef,
+  const includeDocker = options.showDockerCpu || options.showDockerMemory || options.showDockerNetwork;
+  const periodOptions = [
+    { value: "1m", label: t("period.live") },
+    { value: "1h", label: t("period.oneHour") },
+    { value: "12h", label: t("period.twelveHours") },
+    { value: "24h", label: t("period.oneDay") },
+    { value: "1w", label: t("period.oneWeek") },
+    { value: "30d", label: t("period.thirtyDays") },
+  ];
+  useWidgetRuntimeQueries(
+    widgetRuntimeRef,
     selectedSystem && options.timePeriod !== "1m"
       ? [
           getQueryKey(
@@ -127,7 +130,6 @@ export default function BeszelSystemStatsWidget({
     [boardId, hasChangeAccess, itemId, options.timePeriod, saveItemOptions, setOptions],
   );
 
-  if (systemsError) throw systemsError;
   if (systemsPending)
     return (
       <Center h="100%">
@@ -212,36 +214,39 @@ export default function BeszelSystemStatsWidget({
               </Menu.Dropdown>
             </Menu>
           )}
-          {!isEditMode && displayMode === "advanced" && (
-            <SegmentedControl
-              size="xs"
-              value={options.timePeriod}
-              onChange={handleTimePeriod}
-              disabled={isSelectionSavePending}
-              data={[
-                { value: "1m", label: t("period.live") },
-                { value: "1h", label: t("period.oneHour") },
-                { value: "12h", label: t("period.twelveHours") },
-                { value: "24h", label: t("period.oneDay") },
-                { value: "1w", label: t("period.oneWeek") },
-                { value: "30d", label: t("period.thirtyDays") },
-              ]}
-            />
-          )}
+          {!isEditMode &&
+            (width >= 560 ? (
+              <SegmentedControl
+                size="xs"
+                fullWidth
+                value={options.timePeriod}
+                onChange={handleTimePeriod}
+                disabled={isSelectionSavePending}
+                data={periodOptions}
+              />
+            ) : (
+              <Select
+                size="xs"
+                value={options.timePeriod}
+                onChange={(value) => value && handleTimePeriod(value)}
+                disabled={isSelectionSavePending}
+                data={periodOptions}
+              />
+            ))}
           <BeszelStatsView
             integrationIds={selectedSystem ? [selectedSystem.integrationId] : []}
             systemId={selectedSystem?.systemId ?? ""}
             timePeriod={options.timePeriod as BeszelTimePeriod}
-            columns={displayMode === "advanced" || width > 600 ? 2 : 1}
+            columns={width > 600 ? 2 : 1}
             visibility={{
               cpu: options.showCpu,
               memory: options.showMemory,
               disk: options.showDisk,
-              diskIO: options.showDiskIO && (displayMode === "advanced" || height >= 260),
-              network: options.showNetwork && (displayMode === "advanced" || height >= 260),
-              dockerCpu: options.showDockerCpu && (displayMode === "advanced" || height >= 380),
-              dockerMemory: options.showDockerMemory && (displayMode === "advanced" || height >= 380),
-              dockerNetwork: options.showDockerNetwork && (displayMode === "advanced" || height >= 380),
+              diskIO: options.showDiskIO,
+              network: options.showNetwork,
+              dockerCpu: options.showDockerCpu,
+              dockerMemory: options.showDockerMemory,
+              dockerNetwork: options.showDockerNetwork,
             }}
             onSwitchToHistorical={() => handleTimePeriod("1h")}
           />
diff --git a/packages/widgets/src/beszel-system-stats/index.ts b/packages/widgets/src/beszel-system-stats/index.ts
index 71a696750..d3df5734b 100644
--- a/packages/widgets/src/beszel-system-stats/index.ts
+++ b/packages/widgets/src/beszel-system-stats/index.ts
@@ -16,6 +16,7 @@ const timePeriodOptions = [
 ];
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelSystemStats", {
+  supportsAdvancedFocus: false,
   icon: IconChartAreaLine,
   queryKeys: [[["widget", "beszel", "getSystems"]], [["widget", "beszel", "getSystemStats"]]],
   queryMatcher(query, scope) {
diff --git a/packages/widgets/src/beszel-system-table/component.tsx b/packages/widgets/src/beszel-system-table/component.tsx
index 02c55d3ce..44c03ec70 100644
--- a/packages/widgets/src/beszel-system-table/component.tsx
+++ b/packages/widgets/src/beszel-system-table/component.tsx
@@ -1,9 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Center, Group, Indicator, Loader, Progress, ScrollArea, Stack, Text } from "@mantine/core";
+import { Center, Group, Indicator, Loader, Progress, Text } from "@mantine/core";
 import type { DataTableColumn, DataTableSortStatus } from "mantine-datatable";
-import { getQueryKey } from "@trpc/react-query";
 import {
   Activity,
   Battery,
@@ -26,8 +25,8 @@ import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
 import { HomarrDataTable } from "../common/homarr-data-table";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
 import type { BeszelSystemRow } from "../beszel/_shared/types";
 import { loadAvgColor, statusColorMap, thresholdColor } from "../beszel/_shared/colors";
@@ -43,7 +42,6 @@ import { useBeszelFilteredSystems } from "../beszel/_shared/hooks";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { BeszelSystemStatsModal } from "../beszel/_shared/system-stats-modal";
 import { DiskUsage } from "../beszel/_shared/disk-usage";
-import { BeszelStatsView } from "../beszel/_shared/stats-view";
 
 const directionMultiplier: Record<string, number> = { asc: 1, desc: -1 };
 
@@ -96,8 +94,6 @@ export default function BeszelSystemTableWidget({
   integrationIds,
   isEditMode,
   width,
-  displayMode = "compact",
-  widgetStateRef,
   boardId,
   itemId,
   setOptions,
@@ -107,14 +103,10 @@ export default function BeszelSystemTableWidget({
   const board = useOptionalBoard();
   const { data: session } = useSession();
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
-  const {
-    data: results = [],
-    error: systemsError,
-    isPending,
-  } = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const systemsQuery = clientApi.widget.beszel.getSystems.useQuery({ integrationIds });
+  const results = getUsableWidgetQueryData(systemsQuery) ?? [];
+  const { isPending } = systemsQuery;
   const size = useMemo(() => getSizeConfig(width), [width]);
-  const [selectedSystem, setSelectedSystem] = useState<SystemRowWithKey | null>(null);
-
   const visibleMetricKeys = useMemo(() => {
     const enabled = [
       "showCpu",
@@ -129,18 +121,9 @@ export default function BeszelSystemTableWidget({
       "showUptime",
       "showAgent",
     ].filter((key) => options[key as keyof typeof options]) as string[];
-    const budget =
-      displayMode === "advanced"
-        ? enabled.length
-        : width < 360
-          ? 1
-          : width < 560
-            ? 2
-            : width < 760
-              ? 4
-              : enabled.length;
+    const budget = width < 360 ? 1 : width < 560 ? 2 : width < 760 ? 4 : enabled.length;
     return new Set(enabled.slice(0, budget));
-  }, [displayMode, options, width]);
+  }, [options, width]);
 
   const { mutate: saveItemOptions } = clientApi.widget.options.saveItemOptions.useMutation({
     onError: () =>
@@ -383,38 +366,12 @@ export default function BeszelSystemTableWidget({
 
   const handleRowClick = useCallback(
     ({ record }: { record: SystemRowWithKey }) => {
-      if (displayMode === "advanced") {
-        setSelectedSystem(record);
-        return;
-      }
       const integrationId = record._key.split(":")[0] ?? "";
       openModal({ integrationId, systemId: record.id }, { title: record.name });
     },
-    [displayMode, openModal],
+    [openModal],
   );
 
-  const activeSystem = selectedSystem ?? sortedSystems[0];
-  const activeIntegrationId = activeSystem?._key.split(":")[0] ?? "";
-  setWidgetRuntimeQueries(
-    widgetStateRef,
-    displayMode === "advanced" && activeSystem
-      ? [
-          getQueryKey(
-            clientApi.widget.beszel.getSystemStats,
-            {
-              integrationIds: [activeIntegrationId],
-              systemId: activeSystem.id,
-              timePeriod: "1h",
-              includeDocker: false,
-            },
-            "query",
-          ),
-        ]
-      : [],
-  );
-
-  if (systemsError) throw systemsError;
-
   if (isPending) {
     return (
       <Center h="100%">
@@ -444,42 +401,5 @@ export default function BeszelSystemTableWidget({
     </div>
   );
 
-  if (displayMode === "compact") return table;
-
-  return (
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: width >= 900 ? "minmax(0, 3fr) minmax(320px, 2fr)" : "1fr",
-        height: "100%",
-        gap: 12,
-        padding: 12,
-      }}
-    >
-      {table}
-      {activeSystem && (
-        <ScrollArea h="100%">
-          <Stack gap="sm">
-            <Text fw={700}>{activeSystem.name}</Text>
-            <BeszelStatsView
-              integrationIds={[activeIntegrationId]}
-              systemId={activeSystem.id}
-              timePeriod="1h"
-              columns={1}
-              visibility={{
-                cpu: options.showCpu,
-                memory: options.showMemory,
-                disk: options.showDisk,
-                diskIO: options.showDisk,
-                network: options.showNet,
-                dockerCpu: false,
-                dockerMemory: false,
-                dockerNetwork: false,
-              }}
-            />
-          </Stack>
-        </ScrollArea>
-      )}
-    </div>
-  );
+  return table;
 }
diff --git a/packages/widgets/src/beszel/_shared/chart.tsx b/packages/widgets/src/beszel/_shared/chart.tsx
index 7ba5b66fe..73601b7b6 100644
--- a/packages/widgets/src/beszel/_shared/chart.tsx
+++ b/packages/widgets/src/beszel/_shared/chart.tsx
@@ -8,33 +8,38 @@ import dayjs from "dayjs";
 
 import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homarr/integrations/types";
 
+import { formatLocalizedDate } from "../../common/locale";
+
 export type BeszelTimePeriod = "1m" | "1h" | "12h" | "24h" | "1w" | "30d";
 
-const timeFormats: Record<BeszelTimePeriod, string> = {
-  "1m": "HH:mm:ss",
-  "1h": "HH:mm",
-  "12h": "HH:mm",
-  "24h": "HH:mm",
-  "1w": "MMM D",
-  "30d": "MMM D",
+const timeFormatOptions: Record<BeszelTimePeriod, Intl.DateTimeFormatOptions> = {
+  "1m": { hour: "numeric", minute: "2-digit", second: "2-digit" },
+  "1h": { hour: "numeric", minute: "2-digit" },
+  "12h": { hour: "numeric", minute: "2-digit" },
+  "24h": { hour: "numeric", minute: "2-digit" },
+  "1w": { month: "short", day: "numeric" },
+  "30d": { month: "short", day: "numeric" },
 };
 
 const periodDays: Partial<Record<BeszelTimePeriod, number>> = { "1w": 7, "30d": 30 };
 
-function prepareRecords<T>(records: T[], timePeriod: BeszelTimePeriod) {
-  const fmt = (timestamp: string) => dayjs(timestamp).format(timeFormats[timePeriod]);
+export const formatBeszelChartTimestamp = (timestamp: string, timePeriod: BeszelTimePeriod, locale: string): string =>
+  formatLocalizedDate(timestamp, locale, timeFormatOptions[timePeriod]);
+
+function prepareRecords<T>(records: T[], timePeriod: BeszelTimePeriod, locale: string) {
+  const fmt = (timestamp: string) => formatBeszelChartTimestamp(timestamp, timePeriod, locale);
   if (timePeriod === "1m") {
     return { fmt, ordered: records };
   }
   return { fmt, ordered: [...records].toReversed() };
 }
 
-function padTimeGrid(data: Record<string, unknown>[], timePeriod: BeszelTimePeriod) {
-  if (timePeriod === "1m") return padLiveTimeGrid(data);
+function padTimeGrid(data: Record<string, unknown>[], timePeriod: BeszelTimePeriod, locale: string) {
+  if (timePeriod === "1m") return padLiveTimeGrid(data, 60, locale);
   const days = periodDays[timePeriod];
   if (!days) return data;
 
-  const fmt = (ts: string) => dayjs(ts).format(timeFormats[timePeriod]);
+  const fmt = (timestamp: string) => formatBeszelChartTimestamp(timestamp, timePeriod, locale);
   const now = dayjs();
   const existingDays = new Set(data.map((d) => dayjs(d.rawTime as string).format("YYYY-MM-DD")));
   const result = [...data];
@@ -51,7 +56,7 @@ function padTimeGrid(data: Record<string, unknown>[], timePeriod: BeszelTimePeri
   return result.toSorted((a, b) => new Date(a.rawTime as string).getTime() - new Date(b.rawTime as string).getTime());
 }
 
-export function padLiveTimeGrid(data: Record<string, unknown>[], pointCount = 60) {
+export function padLiveTimeGrid(data: Record<string, unknown>[], pointCount = 60, locale = "en-US") {
   if (data.length === 0) return data;
 
   const end = dayjs(
@@ -76,7 +81,7 @@ export function padLiveTimeGrid(data: Record<string, unknown>[], pointCount = 60
     const timestamp = end.subtract(pointCount - index - 1, "second");
     return (
       pointsBySecond.get(timestamp.valueOf()) ?? {
-        time: timestamp.format(timeFormats["1m"]),
+        time: formatBeszelChartTimestamp(timestamp.toISOString(), "1m", locale),
         rawTime: timestamp.toISOString(),
       }
     );
@@ -162,17 +167,18 @@ export const useSystemChartData = (
   systemStats: BeszelSystemStatsRecord[] | undefined,
   mapFn: (stats: BeszelSystemStatsRecord["stats"]) => Record<string, unknown>,
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) =>
   useMemo(() => {
     if (!systemStats) return [];
-    const { fmt, ordered } = prepareRecords(systemStats, timePeriod);
+    const { fmt, ordered } = prepareRecords(systemStats, timePeriod, locale);
     const mapped = ordered.map((r) => ({
       time: fmt(r.created),
       rawTime: r.created,
       ...mapFn(r.stats),
     }));
-    return padTimeGrid(mapped, timePeriod);
-  }, [systemStats, mapFn, timePeriod]);
+    return padTimeGrid(mapped, timePeriod, locale);
+  }, [systemStats, mapFn, timePeriod, locale]);
 
 export const useContainerNames = (containerStats: BeszelContainerStatsRecord[] | undefined, max = 15) => {
   const prevRef = useRef<string[]>([]);
@@ -212,10 +218,11 @@ export const useDiskChartData = (
   efsPaths: string[],
   rootSeriesName: string,
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) =>
   useMemo(
-    () => buildDiskChartData(systemStats, efsPaths, rootSeriesName, timePeriod),
-    [systemStats, efsPaths, rootSeriesName, timePeriod],
+    () => buildDiskChartData(systemStats, efsPaths, rootSeriesName, timePeriod, locale),
+    [systemStats, efsPaths, rootSeriesName, timePeriod, locale],
   );
 
 export const buildDiskChartData = (
@@ -223,9 +230,10 @@ export const buildDiskChartData = (
   efsPaths: string[],
   rootSeriesName: string,
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) => {
   if (!systemStats?.length) return [];
-  const { fmt, ordered } = prepareRecords(systemStats, timePeriod);
+  const { fmt, ordered } = prepareRecords(systemStats, timePeriod, locale);
   const mapped = ordered.map((record) => {
     const point: Record<string, unknown> = {
       time: fmt(record.created),
@@ -238,7 +246,7 @@ export const buildDiskChartData = (
     }
     return point;
   });
-  return padTimeGrid(mapped, timePeriod);
+  return padTimeGrid(mapped, timePeriod, locale);
 };
 
 export const useDockerChartData = (
@@ -246,12 +254,13 @@ export const useDockerChartData = (
   containerNames: string[],
   metric: "cpu" | "memory" | "network",
   timePeriod: BeszelTimePeriod = "1h",
+  locale = "en-US",
 ) =>
   useMemo(() => {
     if (!containerStats?.length) return [];
     const extract = defaultContainerExtractors[metric];
     if (!extract) return [];
-    const { fmt, ordered } = prepareRecords(containerStats, timePeriod);
+    const { fmt, ordered } = prepareRecords(containerStats, timePeriod, locale);
     const mapped = ordered.map((record) => {
       const point: Record<string, unknown> = { time: fmt(record.created), rawTime: record.created };
       const byName = new Map(record.stats.map((c) => [c.n, c]));
@@ -260,5 +269,5 @@ export const useDockerChartData = (
       }
       return point;
     });
-    return padTimeGrid(mapped, timePeriod);
-  }, [containerStats, containerNames, metric, timePeriod]);
+    return padTimeGrid(mapped, timePeriod, locale);
+  }, [containerStats, containerNames, metric, timePeriod, locale]);
diff --git a/packages/widgets/src/beszel/_shared/stats-view.tsx b/packages/widgets/src/beszel/_shared/stats-view.tsx
index 48706d4ad..548902ce9 100644
--- a/packages/widgets/src/beszel/_shared/stats-view.tsx
+++ b/packages/widgets/src/beszel/_shared/stats-view.tsx
@@ -6,8 +6,9 @@ import { IconPlugConnectedX, IconServerOff } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import type { BeszelContainerStatsRecord, BeszelSystemStatsRecord } from "@homarr/integrations/types";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import { containerColors } from "./colors";
 import type { BeszelTimePeriod } from "./chart";
 import {
@@ -71,13 +72,15 @@ export function BeszelStatsView({
   onSwitchToHistorical,
 }: BeszelStatsViewProps) {
   const t = useScopedI18n("widget.beszelSystemStats");
+  const locale = useCurrentIntlLocale();
   const showDocker = visibility.dockerCpu || visibility.dockerMemory || visibility.dockerNetwork;
   const isLive = timePeriod === "1m";
 
-  const { data: historicalData, error: historicalError } = clientApi.widget.beszel.getSystemStats.useQuery(
+  const historicalQuery = clientApi.widget.beszel.getSystemStats.useQuery(
     { integrationIds, systemId, timePeriod, includeDocker: showDocker },
     { refetchInterval: isLive ? false : 5_000, enabled: !isLive && systemId !== "" },
   );
+  const historicalData = isLive ? historicalQuery.data : getUsableWidgetQueryData(historicalQuery);
   const { data: liveData, error: liveError } = useLiveStats(integrationIds, systemId, isLive && systemId !== "");
 
   const activeStats:
@@ -125,10 +128,25 @@ export function BeszelStatsView({
 
   const systemStats = activeStats?.systemStats;
   const containerStats = activeStats?.containerStats;
-  const cpuData = useSystemChartData(whenVisible(visibility.cpu, systemStats), mappers.cpu, timePeriod);
-  const memoryData = useSystemChartData(whenVisible(visibility.memory, systemStats), mappers.memory, timePeriod);
-  const diskIOData = useSystemChartData(whenVisible(visibility.diskIO, systemStats), mappers.diskIO, timePeriod);
-  const networkData = useSystemChartData(whenVisible(visibility.network, systemStats), mappers.network, timePeriod);
+  const cpuData = useSystemChartData(whenVisible(visibility.cpu, systemStats), mappers.cpu, timePeriod, locale);
+  const memoryData = useSystemChartData(
+    whenVisible(visibility.memory, systemStats),
+    mappers.memory,
+    timePeriod,
+    locale,
+  );
+  const diskIOData = useSystemChartData(
+    whenVisible(visibility.diskIO, systemStats),
+    mappers.diskIO,
+    timePeriod,
+    locale,
+  );
+  const networkData = useSystemChartData(
+    whenVisible(visibility.network, systemStats),
+    mappers.network,
+    timePeriod,
+    locale,
+  );
 
   const efsPaths = useMemo(() => {
     const paths = new Set<string>();
@@ -138,7 +156,13 @@ export function BeszelStatsView({
     return [...paths];
   }, [systemStats]);
   const rootSeriesName = t("chart.disk.series");
-  const diskData = useDiskChartData(whenVisible(visibility.disk, systemStats), efsPaths, rootSeriesName, timePeriod);
+  const diskData = useDiskChartData(
+    whenVisible(visibility.disk, systemStats),
+    efsPaths,
+    rootSeriesName,
+    timePeriod,
+    locale,
+  );
   const diskSeries = useMemo(
     () => [
       { name: rootSeriesName, color: "grape.6" },
@@ -161,22 +185,23 @@ export function BeszelStatsView({
     containerNames,
     "cpu",
     timePeriod,
+    locale,
   );
   const dockerMemoryData = useDockerChartData(
     whenVisible(visibility.dockerMemory, containerStats),
     containerNames,
     "memory",
     timePeriod,
+    locale,
   );
   const dockerNetworkData = useDockerChartData(
     whenVisible(visibility.dockerNetwork, containerStats),
     containerNames,
     "network",
     timePeriod,
+    locale,
   );
 
-  if (historicalError) throw historicalError;
-
   if (isLive && liveError) {
     return (
       <Center h={CHART_HEIGHT}>
@@ -198,7 +223,7 @@ export function BeszelStatsView({
   if (!activeStats) {
     const visibleChartCount = Object.values(visibility).filter(Boolean).length;
     return (
-      <SimpleGrid cols={columns} spacing="md" aria-label="Loading system statistics">
+      <SimpleGrid cols={columns} spacing="md" aria-label={t("name")}>
         {Array.from({ length: visibleChartCount }, (_, index) => (
           <ChartSkeleton key={index} />
         ))}
@@ -212,7 +237,7 @@ export function BeszelStatsView({
         <Stack align="center" gap="xs">
           <IconServerOff size={24} opacity={0.5} />
           <Text size="sm" c="dimmed">
-            {activeStats.error}
+            {t("error.internalServerError")}
           </Text>
         </Stack>
       </Center>
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index c40ffbee3..7b33e86da 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -4,10 +4,10 @@ import type { CSSProperties } from "react";
 import { createPortal } from "react-dom";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { getDefaultZIndex } from "@mantine/core";
-import dayjs from "dayjs";
-import localizedFormat from "dayjs/plugin/localizedFormat";
 
-dayjs.extend(localizedFormat);
+import { useCurrentIntlLocale } from "@homarr/translation/client";
+
+import { formatLocalizedDate } from "../../common/locale";
 
 const styles: Record<string, CSSProperties> = {
   wrapper: {
@@ -60,6 +60,7 @@ const MARGIN = 14;
 const BACKGROUND_TOOLTIP_Z_INDEX = getDefaultZIndex("modal") - 3;
 
 const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }: PortalTooltipProps) => {
+  const locale = useCurrentIntlLocale();
   const mouseRef = useRef({ x: 0, y: 0 });
   const [pos, setPos] = useState({ x: 0, y: 0, isAdvanced: false });
   const rafRef = useRef(0);
@@ -116,7 +117,9 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
   if (!sorted.length) return null;
 
   const rawTime = sorted[0]?.payload?.rawTime as string | undefined;
-  const tooltipLabel = rawTime ? dayjs(rawTime).format("MMM D, LT") : label;
+  const tooltipLabel = rawTime
+    ? formatLocalizedDate(rawTime, locale, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" })
+    : label;
   const total = sorted.reduce((sum, p) => sum + p.value, 0);
 
   const portalStyle: CSSProperties = {
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index 87cda56b4..aadf8b3b2 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -22,6 +22,8 @@ import { useRegisterSpotlightContextResults } from "@homarr/spotlight";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import classes from "./bookmark.module.css";
 
 type BookmarkLayout = WidgetComponentProps<"bookmarks">["options"]["layout"];
@@ -64,30 +66,36 @@ export default function BookmarksWidget({
   displayMode,
 }: WidgetComponentProps<"bookmarks">) {
   const board = useRequiredBoard();
-  const { data = [] } = clientApi.app.byIds.useQuery(options.items, {
-    select(apps) {
-      return apps.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
-    },
-  });
+  const data =
+    getUsableWidgetQueryData(
+      clientApi.app.byIds.useQuery(options.items, {
+        select(apps) {
+          return apps.toSorted((appA, appB) => options.items.indexOf(appA.id) - options.items.indexOf(appB.id));
+        },
+      }),
+    ) ?? [];
 
   useRegisterSpotlightContextResults(
     `bookmark-${itemId}`,
-    data
-      .filter((app) => app.href !== null)
-      .map((app) => ({
-        id: app.id,
-        name: app.name,
-        icon: app.iconUrl,
-        interaction() {
-          return {
-            type: "link",
-            // We checked above that app.href is defined
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            href: app.href!,
-            newTab: false,
-          };
-        },
-      })),
+    data.flatMap((app) => {
+      const href = getSafeApplicationUrl(app.href);
+      return href
+        ? [
+            {
+              id: app.id,
+              name: app.name,
+              icon: app.iconUrl,
+              interaction() {
+                return {
+                  type: "link",
+                  href,
+                  newTab: false,
+                };
+              },
+            },
+          ]
+        : [];
+    }),
     [data],
   );
 
@@ -174,47 +182,50 @@ const FlexLayout = ({
   const board = useRequiredBoard();
   return (
     <Flex direction={direction} gap={4} w="100%" mih="100%" wrap="nowrap">
-      {data.map((app) => (
-        <div key={app.id} style={{ display: "flex", flex: `1 0 ${minimumItemSize}px`, flexDirection: direction }}>
-          <UnstyledButton
-            className={classes.bookmarkButton}
-            component="a"
-            href={app.href ?? undefined}
-            target={openNewTab ? "_blank" : "_self"}
-            rel="noopener noreferrer"
-            key={app.id}
-            w="100%"
-          >
-            <Card
-              radius={board.itemRadius}
-              className={classes.card}
+      {data.map((app) => {
+        const href = getSafeApplicationUrl(app.href);
+        return (
+          <div key={app.id} style={{ display: "flex", flex: `1 0 ${minimumItemSize}px`, flexDirection: direction }}>
+            <UnstyledButton
+              className={classes.bookmarkButton}
+              component={href ? "a" : "div"}
+              href={href}
+              target={href ? (openNewTab ? "_blank" : "_self") : undefined}
+              rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
+              key={app.id}
               w="100%"
-              display="flex"
-              p={4}
-              h="100%"
-              withBorder={withBorder}
             >
-              {direction === "row" ? (
-                <VerticalItem
-                  app={app}
-                  hideTitle={hideTitle}
-                  hideIcon={hideIcon}
-                  hideHostname={hideHostname}
-                  hasIconColor={hasIconColor}
-                />
-              ) : (
-                <HorizontalItem
-                  app={app}
-                  hideTitle={hideTitle}
-                  hideIcon={hideIcon}
-                  hideHostname={hideHostname}
-                  hasIconColor={hasIconColor}
-                />
-              )}
-            </Card>
-          </UnstyledButton>
-        </div>
-      ))}
+              <Card
+                radius={board.itemRadius}
+                className={classes.card}
+                w="100%"
+                display="flex"
+                p={4}
+                h="100%"
+                withBorder={withBorder}
+              >
+                {direction === "row" ? (
+                  <VerticalItem
+                    app={app}
+                    hideTitle={hideTitle}
+                    hideIcon={hideIcon}
+                    hideHostname={hideHostname}
+                    hasIconColor={hasIconColor}
+                  />
+                ) : (
+                  <HorizontalItem
+                    app={app}
+                    hideTitle={hideTitle}
+                    hideIcon={hideIcon}
+                    hideHostname={hideHostname}
+                    hasIconColor={hasIconColor}
+                  />
+                )}
+              </Card>
+            </UnstyledButton>
+          </div>
+        );
+      })}
     </Flex>
   );
 };
@@ -231,12 +242,8 @@ export const getAdvancedBookmarkColumns = (width: number, itemCount: number): nu
   Math.max(1, Math.min(itemCount || 1, Math.floor(width / 280)));
 
 export const getBookmarkHostname = (href: string | null): string | undefined => {
-  if (!href) return undefined;
-  try {
-    return new URL(href).hostname;
-  } catch {
-    return href;
-  }
+  const safeHref = getSafeApplicationUrl(href);
+  return safeHref ? new URL(safeHref).hostname : undefined;
 };
 
 const AdvancedBookmarksLayout = ({
@@ -251,41 +258,44 @@ const AdvancedBookmarksLayout = ({
   return (
     <ScrollArea h="100%" style={{ flex: 1 }}>
       <SimpleGrid cols={getAdvancedBookmarkColumns(width, data.length)} spacing="sm">
-        {data.map((app) => (
-          <UnstyledButton
-            key={app.id}
-            className={classes.bookmarkButton}
-            component="a"
-            href={app.href ?? undefined}
-            target={openNewTab ? "_blank" : "_self"}
-            rel="noopener noreferrer"
-          >
-            <Card radius={board.itemRadius} className={classes.card} withBorder={withBorder} p="md" h="100%">
-              <Group align="flex-start" wrap="nowrap">
-                <MaskedOrNormalImage
-                  imageUrl={app.iconUrl}
-                  hasColor={hasIconColor}
-                  alt={app.name}
-                  className={classes.bookmarkIcon}
-                  style={{ width: 40, height: 40, flex: "0 0 auto" }}
-                />
-                <Stack gap={3} miw={0}>
-                  <Text fw={700} size="sm" truncate="end">
-                    {app.name}
-                  </Text>
-                  <Anchor component="span" size="xs" truncate="end">
-                    {getBookmarkHostname(app.href)}
-                  </Anchor>
-                  {app.description && (
-                    <Text size="xs" c="dimmed" lineClamp={3}>
-                      {app.description}
+        {data.map((app) => {
+          const href = getSafeApplicationUrl(app.href);
+          return (
+            <UnstyledButton
+              key={app.id}
+              className={classes.bookmarkButton}
+              component={href ? "a" : "div"}
+              href={href}
+              target={href ? (openNewTab ? "_blank" : "_self") : undefined}
+              rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
+            >
+              <Card radius={board.itemRadius} className={classes.card} withBorder={withBorder} p="md" h="100%">
+                <Group align="flex-start" wrap="nowrap">
+                  <MaskedOrNormalImage
+                    imageUrl={app.iconUrl}
+                    hasColor={hasIconColor}
+                    alt={app.name}
+                    className={classes.bookmarkIcon}
+                    style={{ width: 40, height: 40, flex: "0 0 auto" }}
+                  />
+                  <Stack gap={3} miw={0}>
+                    <Text fw={700} size="sm" truncate="end">
+                      {app.name}
                     </Text>
-                  )}
-                </Stack>
-              </Group>
-            </Card>
-          </UnstyledButton>
-        ))}
+                    <Anchor component="span" size="xs" truncate="end">
+                      {getBookmarkHostname(app.href)}
+                    </Anchor>
+                    {app.description && (
+                      <Text size="xs" c="dimmed" lineClamp={3}>
+                        {app.description}
+                      </Text>
+                    )}
+                  </Stack>
+                </Group>
+              </Card>
+            </UnstyledButton>
+          );
+        })}
       </SimpleGrid>
     </ScrollArea>
   );
@@ -327,43 +337,46 @@ const GridLayout = ({
       mih="100%"
       style={{ gridAutoRows: `minmax(${minimumItemHeight}px, 1fr)` }}
     >
-      {data.map((app) => (
-        <UnstyledButton
-          className={classes.bookmarkButton}
-          component="a"
-          href={app.href ?? undefined}
-          target={openNewTab ? "_blank" : "_self"}
-          rel="noopener noreferrer"
-          key={app.id}
-          h="100%"
-        >
-          <Card
+      {data.map((app) => {
+        const href = getSafeApplicationUrl(app.href);
+        return (
+          <UnstyledButton
+            className={classes.bookmarkButton}
+            component={href ? "a" : "div"}
+            href={href}
+            target={href ? (openNewTab ? "_blank" : "_self") : undefined}
+            rel={href && openNewTab ? SAFE_NEW_TAB_REL : undefined}
+            key={app.id}
             h="100%"
-            className={combineClasses(classes.card, classes["card-grid"])}
-            radius={board.itemRadius}
-            withBorder={withBorder}
-            p="xs"
           >
-            {itemDirection === "horizontal" ? (
-              <HorizontalItem
-                app={app}
-                hideTitle={hideTitle}
-                hideIcon={hideIcon}
-                hideHostname={hideHostname}
-                hasIconColor={hasIconColor}
-              />
-            ) : (
-              <VerticalItem
-                app={app}
-                hideTitle={hideTitle}
-                hideIcon={hideIcon}
-                hideHostname={hideHostname}
-                hasIconColor={hasIconColor}
-              />
-            )}
-          </Card>
-        </UnstyledButton>
-      ))}
+            <Card
+              h="100%"
+              className={combineClasses(classes.card, classes["card-grid"])}
+              radius={board.itemRadius}
+              withBorder={withBorder}
+              p="xs"
+            >
+              {itemDirection === "horizontal" ? (
+                <HorizontalItem
+                  app={app}
+                  hideTitle={hideTitle}
+                  hideIcon={hideIcon}
+                  hideHostname={hideHostname}
+                  hasIconColor={hasIconColor}
+                />
+              ) : (
+                <VerticalItem
+                  app={app}
+                  hideTitle={hideTitle}
+                  hideIcon={hideIcon}
+                  hideHostname={hideHostname}
+                  hasIconColor={hasIconColor}
+                />
+              )}
+            </Card>
+          </UnstyledButton>
+        );
+      })}
     </SimpleGrid>
   );
 };
diff --git a/packages/widgets/src/bookmarks/layout.spec.ts b/packages/widgets/src/bookmarks/layout.spec.ts
index 8e98c3e56..5ff6eeb33 100644
--- a/packages/widgets/src/bookmarks/layout.spec.ts
+++ b/packages/widgets/src/bookmarks/layout.spec.ts
@@ -27,7 +27,7 @@ describe("bookmark display helpers", () => {
 
   test("does not crash on malformed bookmark URLs", () => {
     expect(getBookmarkHostname("https://homarr.dev/docs")).toBe("homarr.dev");
-    expect(getBookmarkHostname("not a URL")).toBe("not a URL");
+    expect(getBookmarkHostname("not a URL")).toBeUndefined();
     expect(getBookmarkHostname(null)).toBeUndefined();
   });
 });
diff --git a/packages/widgets/src/calendar/calendar-event-list.tsx b/packages/widgets/src/calendar/calendar-event-list.tsx
index 14270322b..95187b3e3 100644
--- a/packages/widgets/src/calendar/calendar-event-list.tsx
+++ b/packages/widgets/src/calendar/calendar-event-list.tsx
@@ -17,9 +17,11 @@ import dayjs from "dayjs";
 
 import { isNullOrWhitespace } from "@homarr/common";
 import type { CalendarEvent } from "@homarr/integrations/types";
-import { useI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import { groupEventsByDate } from "./calendar-events";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { formatLocalizedTime } from "../common/locale";
 import classes from "./calendar-event-list.module.css";
 
 interface CalendarEventListProps {
@@ -36,7 +38,9 @@ export const CalendarEventList = ({
   locale,
 }: CalendarEventListProps) => {
   const headingIdPrefix = useId();
-  const dateFormatter = new Intl.DateTimeFormat(locale, {
+  const currentLocale = useCurrentIntlLocale();
+  const effectiveLocale = locale ?? currentLocale;
+  const dateFormatter = new Intl.DateTimeFormat(effectiveLocale, {
     weekday: "long",
     year: "numeric",
     month: "long",
@@ -66,20 +70,20 @@ export const CalendarEventList = ({
                   {dateFormatter.format(groupedEvents[0]?.startDate)}
                 </Text>
                 <Stack mt="xs">
-                  <CalendarEventRows events={groupedEvents} />
+                  <CalendarEventRows events={groupedEvents} locale={effectiveLocale} />
                 </Stack>
               </Box>
             );
           })
         ) : (
-          <CalendarEventRows events={events} />
+          <CalendarEventRows events={events} locale={effectiveLocale} />
         )}
       </Stack>
     </ScrollArea>
   );
 };
 
-const CalendarEventRows = ({ events }: Pick<CalendarEventListProps, "events">) => {
+const CalendarEventRows = ({ events, locale }: Pick<CalendarEventListProps, "events"> & { locale: string }) => {
   const { colorScheme } = useMantineColorScheme();
   const t = useI18n();
   return (
@@ -136,14 +140,14 @@ const CalendarEventRows = ({ events }: Pick<CalendarEventListProps, "events">) =
                 ) : (
                   <>
                     <Text c={"dimmed"} size={"sm"}>
-                      {dayjs(event.startDate).format("HH:mm")}
+                      {formatLocalizedTime(event.startDate, locale)}
                     </Text>
 
                     {event.endDate !== null && (
                       <>
                         -{" "}
                         <Text c={"dimmed"} size={"sm"}>
-                          {dayjs(event.endDate).format("HH:mm")}
+                          {formatLocalizedTime(event.endDate, locale)}
                         </Text>
                       </>
                     )}
@@ -171,31 +175,35 @@ const CalendarEventRows = ({ events }: Pick<CalendarEventListProps, "events">) =
               <Group pt={5} gap={5} mt={"auto"} wrap="nowrap">
                 {event.links
                   .filter((link) => link.href)
-                  .map((link) => (
-                    <Button
-                      key={link.href}
-                      component={"a"}
-                      href={link.href.toString()}
-                      target={"_blank"}
-                      size={"xs"}
-                      radius={"xl"}
-                      variant={link.color ? undefined : "default"}
-                      styles={{
-                        root: {
-                          backgroundColor: link.color,
-                          color: link.isDark && colorScheme === "dark" ? "white" : "black",
-                          "&:hover": link.color
-                            ? {
-                                backgroundColor: link.isDark ? lighten(link.color, 0.1) : darken(link.color, 0.1),
-                              }
-                            : undefined,
-                        },
-                      }}
-                      leftSection={link.logo ? <Image src={link.logo} fit="contain" w={20} h={20} /> : undefined}
-                    >
-                      <Text>{link.name}</Text>
-                    </Button>
-                  ))}
+                  .map((link) => {
+                    const href = getSafeApplicationUrl(link.href.toString());
+                    return (
+                      <Button
+                        key={link.href}
+                        component={href ? "a" : "div"}
+                        href={href}
+                        target={href ? "_blank" : undefined}
+                        rel={href ? SAFE_NEW_TAB_REL : undefined}
+                        size={"xs"}
+                        radius={"xl"}
+                        variant={link.color ? undefined : "default"}
+                        styles={{
+                          root: {
+                            backgroundColor: link.color,
+                            color: link.isDark && colorScheme === "dark" ? "white" : "black",
+                            "&:hover": link.color
+                              ? {
+                                  backgroundColor: link.isDark ? lighten(link.color, 0.1) : darken(link.color, 0.1),
+                                }
+                              : undefined,
+                          },
+                        }}
+                        leftSection={link.logo ? <Image src={link.logo} fit="contain" w={20} h={20} /> : undefined}
+                      >
+                        <Text>{link.name}</Text>
+                      </Button>
+                    );
+                  })}
               </Group>
             )}
           </Stack>
diff --git a/packages/widgets/src/calendar/component.tsx b/packages/widgets/src/calendar/component.tsx
index ced224eb7..5cc0cfd58 100644
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -16,7 +16,8 @@ import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client"
 
 import actionTargetClasses from "../common/action-target.module.css";
 import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import { CalendarDay } from "./calender-day";
 import {
@@ -31,9 +32,21 @@ import classes from "./component.module.css";
 
 export default function CalendarWidget(props: WidgetComponentProps<"calendar">) {
   const [month, setMonth] = useState(() => new Date());
+  const runtimeInput = {
+    integrationIds: props.integrationIds,
+    month: month.getMonth(),
+    year: month.getFullYear(),
+    releaseType: props.options.releaseType,
+    showUnmonitored: props.options.showUnmonitored,
+  };
+  useWidgetRuntimeQueries(
+    props.widgetRuntimeRef,
+    props.integrationIds.length > 0
+      ? [getQueryKey(clientApi.widget.calendar.findAllEvents, runtimeInput, "query")]
+      : [],
+  );
 
   if (props.integrationIds.length === 0) {
-    setWidgetRuntimeQueries(props.widgetStateRef, []);
     return (
       <CalendarBase
         {...props}
@@ -54,15 +67,7 @@ interface FetchCalendarProps extends WidgetComponentProps<"calendar"> {
   setMonth: (date: Date) => void;
 }
 
-const FetchCalendar = ({
-  month,
-  setMonth,
-  isEditMode,
-  integrationIds,
-  options,
-  displayMode,
-  widgetStateRef,
-}: FetchCalendarProps) => {
+const FetchCalendar = ({ month, setMonth, isEditMode, integrationIds, options, displayMode }: FetchCalendarProps) => {
   const input = {
     integrationIds,
     month: month.getMonth(),
@@ -70,8 +75,9 @@ const FetchCalendar = ({
     releaseType: options.releaseType,
     showUnmonitored: options.showUnmonitored,
   };
-  setWidgetRuntimeQueries(widgetStateRef, [getQueryKey(clientApi.widget.calendar.findAllEvents, input, "query")]);
-  const { data, isPending } = clientApi.widget.calendar.findAllEvents.useQuery(input);
+  const calendarQuery = clientApi.widget.calendar.findAllEvents.useQuery(input);
+  const data = getUsableWidgetQueryData(calendarQuery);
+  const { isPending } = calendarQuery;
 
   const events = useMemo(() => data?.flatMap((item) => item.events) ?? [], [data]);
   const failedIntegrations =
diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index 091115bd8..91a4904b0 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Box, Stack, Text, Title } from "@mantine/core";
+import { Box, Loader, Stack, Text, Title } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import timezones from "dayjs/plugin/timezone";
@@ -9,8 +9,10 @@ import utc from "dayjs/plugin/utc";
 
 import { clientApi } from "@homarr/api/client";
 import { metricToImperial } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
+import { isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "../weather/animated-icon";
 
@@ -79,10 +81,22 @@ interface ClockWeatherCornerProps {
 }
 
 const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit, showDetails }: ClockWeatherCornerProps) => {
+  const t = useI18n();
   const tCommon = useScopedI18n("common");
-  const { data: weather } = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
+  const weatherQuery = clientApi.widget.weather.atLocation.useQuery({ latitude, longitude });
+  const weather = weatherQuery.data;
 
-  if (!weather) return null;
+  if (!weather) {
+    return (
+      <Box pos="absolute" top={4} left={4}>
+        {isInitialWidgetQueryPending(weatherQuery) ? (
+          <Loader size="xs" aria-label={tCommon("action.loading")} />
+        ) : (
+          <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
+        )}
+      </Box>
+    );
+  }
 
   const temp = isFahrenheit ? weather.current.temperature * (9 / 5) + 32 : weather.current.temperature;
   const unit = isFahrenheit ? "°F" : "°C";
@@ -100,6 +114,7 @@ const ClockWeatherCorner = ({ latitude, longitude, isFahrenheit, showDetails }:
           {isFahrenheit ? tCommon("unit.speed.milesPerHour") : tCommon("unit.speed.kilometersPerHour")}
         </Text>
       )}
+      <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("widget.weather.name")} />
     </Stack>
   );
 };
diff --git a/packages/widgets/src/common/application-url.spec.ts b/packages/widgets/src/common/application-url.spec.ts
new file mode 100644
index 000000000..7866461bc
--- /dev/null
+++ b/packages/widgets/src/common/application-url.spec.ts
@@ -0,0 +1,30 @@
+import { describe, expect, test } from "vitest";
+
+import { getSafeApplicationUrl } from "./application-url";
+
+describe("getSafeApplicationUrl", () => {
+  test.each(["javascript:alert(1)", "data:text/html,test", "not a URL", "/relative", "./relative"])(
+    "rejects unsafe or non-absolute URL %s",
+    (value) => expect(getSafeApplicationUrl(value)).toBeUndefined(),
+  );
+
+  test("rejects credential-bearing URLs", () => {
+    expect(getSafeApplicationUrl("https://user:password@example.com/path")).toBeUndefined();
+    expect(getSafeApplicationUrl("/path", { baseUrl: "https://user:password@example.com" })).toBeUndefined();
+  });
+
+  test("allows absolute HTTP and HTTPS URLs", () => {
+    expect(getSafeApplicationUrl("http://example.com/path")).toBe("http://example.com/path");
+    expect(getSafeApplicationUrl("https://example.com/path?q=1#result")).toBe("https://example.com/path?q=1#result");
+  });
+
+  test("resolves feed-relative URLs only against a safe HTTP(S) base", () => {
+    expect(getSafeApplicationUrl("/story", { baseUrl: "https://example.com/feed.xml?token=secret" })).toBe(
+      "https://example.com/story",
+    );
+  });
+
+  test.each([undefined, null, ""])("rejects missing URL %s", (value) => {
+    expect(getSafeApplicationUrl(value)).toBeUndefined();
+  });
+});
diff --git a/packages/widgets/src/common/application-url.ts b/packages/widgets/src/common/application-url.ts
new file mode 100644
index 000000000..cfbef8abc
--- /dev/null
+++ b/packages/widgets/src/common/application-url.ts
@@ -0,0 +1 @@
+export { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "@homarr/common";
diff --git a/packages/widgets/src/common/locale.spec.ts b/packages/widgets/src/common/locale.spec.ts
new file mode 100644
index 000000000..d9fa119c7
--- /dev/null
+++ b/packages/widgets/src/common/locale.spec.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from "vitest";
+
+import { formatLocalizedCompactNumber, formatLocalizedDate, formatLocalizedTime, getBinaryStatusKey } from "./locale";
+
+const sample = new Date("2026-01-02T13:05:09.000Z");
+
+describe("localized widget formatting", () => {
+  test.each([
+    ["en-US", /Jan/],
+    ["fr-FR", /janv/i],
+    ["de-DE", /Jan/],
+    ["he-IL", /[\u0590-\u05ff]/],
+  ])("formats dates for %s", (locale, expected) => {
+    expect(
+      formatLocalizedDate(sample, locale, { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" }),
+    ).toMatch(expected);
+  });
+
+  test("supports explicit 12-hour and 24-hour clocks", () => {
+    expect(formatLocalizedTime(sample, "en-US", { hour12: true, timeZone: "UTC" })).toBe("1:05 PM");
+    expect(formatLocalizedTime(sample, "en-US", { hour12: false, timeZone: "UTC" })).toBe("13:05");
+  });
+
+  test("localizes compact numbers", () => {
+    expect(formatLocalizedCompactNumber(1_234_567, "en-US")).toBe("1.2M");
+    expect(formatLocalizedCompactNumber(1_234_567, "fr-FR")).toContain("1,2");
+    expect(formatLocalizedCompactNumber(1_234_567, "de-DE")).toContain("Mio.");
+  });
+
+  test("normalizes binary status for translated accessibility labels", () => {
+    expect(getBinaryStatusKey("enabled")).toBe("enabled");
+    expect(getBinaryStatusKey("disabled")).toBe("disabled");
+    expect(getBinaryStatusKey()).toBe("unknown");
+  });
+});
diff --git a/packages/widgets/src/common/locale.ts b/packages/widgets/src/common/locale.ts
new file mode 100644
index 000000000..e076cedd2
--- /dev/null
+++ b/packages/widgets/src/common/locale.ts
@@ -0,0 +1,61 @@
+export type LocalizedDateValue = Date | number | string;
+
+interface LocalizedTimeOptions {
+  hour12?: boolean;
+  includeSeconds?: boolean;
+  timeZone?: string;
+}
+
+const toValidDate = (value: LocalizedDateValue): Date | undefined => {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+};
+
+export const formatLocalizedDate = (
+  value: LocalizedDateValue,
+  locale: string,
+  options: Intl.DateTimeFormatOptions,
+  fallback = "?",
+): string => {
+  const date = toValidDate(value);
+  return date ? new Intl.DateTimeFormat(locale, options).format(date) : fallback;
+};
+
+export const formatLocalizedTime = (
+  value: LocalizedDateValue,
+  locale: string,
+  { hour12, includeSeconds = false, timeZone }: LocalizedTimeOptions = {},
+  fallback = "?",
+): string =>
+  formatLocalizedDate(
+    value,
+    locale,
+    {
+      hour: "numeric",
+      minute: "2-digit",
+      second: includeSeconds ? "2-digit" : undefined,
+      hour12,
+      timeZone,
+    },
+    fallback,
+  );
+
+export const formatLocalizedDateTime = (
+  value: LocalizedDateValue,
+  locale: string,
+  options: Pick<LocalizedTimeOptions, "hour12" | "timeZone"> = {},
+  fallback = "?",
+): string =>
+  formatLocalizedDate(
+    value,
+    locale,
+    { dateStyle: "medium", timeStyle: "short", hour12: options.hour12, timeZone: options.timeZone },
+    fallback,
+  );
+
+export const formatLocalizedCompactNumber = (value: number, locale: string): string =>
+  new Intl.NumberFormat(locale, { notation: "compact" }).format(value);
+
+export type BinaryStatusKey = "enabled" | "disabled" | "unknown";
+
+export const getBinaryStatusKey = (status?: "enabled" | "disabled"): BinaryStatusKey => status ?? "unknown";
diff --git a/packages/widgets/src/common/query-state-indicator.spec.ts b/packages/widgets/src/common/query-state-indicator.spec.ts
new file mode 100644
index 000000000..f902aafc9
--- /dev/null
+++ b/packages/widgets/src/common/query-state-indicator.spec.ts
@@ -0,0 +1,56 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { WidgetQueryErrorIndicator } from "./query-state-indicator";
+
+vi.mock("@homarr/translation/client", () => ({
+  useScopedI18n: () => (key: string) => key,
+}));
+
+const matchMedia = (query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: () => undefined,
+  removeListener: () => undefined,
+  addEventListener: () => undefined,
+  removeEventListener: () => undefined,
+  dispatchEvent: () => false,
+});
+
+describe("WidgetQueryErrorIndicator", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("uses a localized label without exposing the raw failure", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", matchMedia);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    const secret = "http://admin:password@private.local/path?token=secret";
+
+    await act(async () =>
+      root?.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(WidgetQueryErrorIndicator, { error: new Error(secret), label: "Weather" }),
+        ),
+      ),
+    );
+
+    expect(host.querySelector("[aria-label='Weather']")).not.toBeNull();
+    expect(host.textContent).not.toMatch(/password|private\.local|token=secret/);
+  });
+});
diff --git a/packages/widgets/src/common/query-state-indicator.tsx b/packages/widgets/src/common/query-state-indicator.tsx
new file mode 100644
index 000000000..9196c2c69
--- /dev/null
+++ b/packages/widgets/src/common/query-state-indicator.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Box, Center, Loader, Tooltip } from "@mantine/core";
+import { IconAlertTriangle } from "@tabler/icons-react";
+
+interface WidgetQueryErrorIndicatorProps {
+  error: unknown;
+  label: string;
+}
+
+/** Localized warning for stale or optional-query failures. Never renders the raw error. */
+export function WidgetQueryErrorIndicator({ error, label }: WidgetQueryErrorIndicatorProps) {
+  if (!error) return null;
+
+  const accessibleLabel = label;
+  return (
+    <Tooltip label={accessibleLabel} position="left" withArrow>
+      <Box
+        component="span"
+        c="orange"
+        role="img"
+        aria-label={accessibleLabel}
+        tabIndex={0}
+        style={{ display: "inline-flex", cursor: "help" }}
+      >
+        <IconAlertTriangle aria-hidden size={14} />
+      </Box>
+    </Tooltip>
+  );
+}
+
+export function WidgetQueryLoadingState() {
+  return (
+    <Center h="100%" w="100%" p="sm" role="status" aria-live="polite">
+      <Loader size="sm" />
+    </Center>
+  );
+}
diff --git a/packages/widgets/src/common/query-state.spec.ts b/packages/widgets/src/common/query-state.spec.ts
new file mode 100644
index 000000000..5e49af84a
--- /dev/null
+++ b/packages/widgets/src/common/query-state.spec.ts
@@ -0,0 +1,39 @@
+import { describe, expect, test } from "vitest";
+
+import { getUsableWidgetQueryData, hasStaleWidgetQueryError, isInitialWidgetQueryPending } from "./query-state";
+
+describe("getUsableWidgetQueryData", () => {
+  test.each([[], null, 0, false, ""])("preserves successful empty value %#", (data) => {
+    expect(getUsableWidgetQueryData({ data, error: null })).toBe(data);
+  });
+
+  test("preserves stale cached data when a refetch fails", () => {
+    const data = [{ id: "healthy" }];
+    expect(getUsableWidgetQueryData({ data, error: new Error("offline") })).toBe(data);
+  });
+
+  test("throws a terminal failure when no usable data exists", () => {
+    const error = new Error("offline");
+    expect(() => getUsableWidgetQueryData({ data: undefined, error })).toThrow(error);
+  });
+
+  test("keeps the initial pending state when neither data nor an error exists", () => {
+    expect(getUsableWidgetQueryData({ data: undefined, error: null })).toBeUndefined();
+  });
+});
+
+describe("isInitialWidgetQueryPending", () => {
+  test("only marks the unresolved first request as initial pending", () => {
+    expect(isInitialWidgetQueryPending({ data: undefined, error: null, isPending: true })).toBe(true);
+    expect(isInitialWidgetQueryPending({ data: [], error: null, isPending: true })).toBe(false);
+    expect(isInitialWidgetQueryPending({ data: undefined, error: new Error("offline"), isPending: true })).toBe(false);
+  });
+});
+
+describe("hasStaleWidgetQueryError", () => {
+  test("only marks failures that retain usable cached data", () => {
+    expect(hasStaleWidgetQueryError({ data: [{ id: "cached" }], error: new Error("offline") })).toBe(true);
+    expect(hasStaleWidgetQueryError({ data: undefined, error: new Error("offline") })).toBe(false);
+    expect(hasStaleWidgetQueryError({ data: [], error: null })).toBe(false);
+  });
+});
diff --git a/packages/widgets/src/common/query-state.ts b/packages/widgets/src/common/query-state.ts
new file mode 100644
index 000000000..d49ea600b
--- /dev/null
+++ b/packages/widgets/src/common/query-state.ts
@@ -0,0 +1,22 @@
+interface WidgetQueryState {
+  data: unknown;
+  error: unknown;
+}
+
+interface PendingWidgetQueryState extends WidgetQueryState {
+  isPending: boolean;
+}
+
+/** Throws terminal query failures while preserving successful empty values and stale cached data. */
+export const getUsableWidgetQueryData = <TQuery extends WidgetQueryState>(query: TQuery): TQuery["data"] => {
+  if (query.error && query.data === undefined) throw query.error;
+  return query.data;
+};
+
+/** True only before the first result; successful empty values and cached data are both ready to render. */
+export const isInitialWidgetQueryPending = ({ data, error, isPending }: PendingWidgetQueryState): boolean =>
+  isPending && data === undefined && !error;
+
+/** A failed background refresh still has usable cached data, but should remain visible to the user. */
+export const hasStaleWidgetQueryError = ({ data, error }: WidgetQueryState): boolean =>
+  error !== null && error !== undefined && data !== undefined;
diff --git a/packages/widgets/src/coolify/component.tsx b/packages/widgets/src/coolify/component.tsx
index 6d3f84828..83449f190 100644
--- a/packages/widgets/src/coolify/component.tsx
+++ b/packages/widgets/src/coolify/component.tsx
@@ -6,17 +6,12 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { createWidgetKey } from "./coolify-utils";
 import { InstanceCard } from "./instance-card";
 import { SingleInstanceLayout } from "./single-instance-layout";
 
-export default function CoolifyWidget({
-  options,
-  integrationIds,
-  width,
-  height,
-  displayMode,
-}: WidgetComponentProps<"coolify">) {
+export default function CoolifyWidget({ options, integrationIds, width, height }: WidgetComponentProps<"coolify">) {
   const t = useScopedI18n("widget.coolify");
 
   if (integrationIds.length === 0) {
@@ -27,15 +22,7 @@ export default function CoolifyWidget({
     );
   }
 
-  return (
-    <CoolifyContent
-      integrationIds={integrationIds}
-      options={options}
-      width={width}
-      height={height}
-      isAdvanced={displayMode === "advanced"}
-    />
-  );
+  return <CoolifyContent integrationIds={integrationIds} options={options} width={width} height={height} />;
 }
 
 interface CoolifyContentProps {
@@ -43,17 +30,18 @@ interface CoolifyContentProps {
   options: WidgetComponentProps<"coolify">["options"];
   width: number;
   height: number;
-  isAdvanced: boolean;
 }
 
-function CoolifyContent({ integrationIds, options, width, height, isAdvanced }: CoolifyContentProps) {
+function CoolifyContent({ integrationIds, options, width, height }: CoolifyContentProps) {
   const t = useScopedI18n("common");
-  const { data: instancesData = [], isPending } = clientApi.widget.coolify.getInstancesInfo.useQuery({
+  const instancesQuery = clientApi.widget.coolify.getInstancesInfo.useQuery({
     integrationIds,
   });
+  const instancesData = getUsableWidgetQueryData(instancesQuery) ?? [];
+  const { isPending } = instancesQuery;
 
-  const isTiny = !isAdvanced && (width < 256 || height < 144);
-  const hideFooter = !isAdvanced && height < 112;
+  const isTiny = width < 256 || height < 144;
+  const hideFooter = height < 112;
   const [firstInstance] = instancesData;
   const widgetKey = createWidgetKey(integrationIds);
 
@@ -74,7 +62,6 @@ function CoolifyContent({ integrationIds, options, width, height, isAdvanced }:
         options={options}
         isTiny={isTiny}
         widgetKey={widgetKey}
-        isAdvanced={isAdvanced}
         hideFooter={hideFooter}
       />
     );
@@ -82,7 +69,7 @@ function CoolifyContent({ integrationIds, options, width, height, isAdvanced }:
 
   return (
     <ScrollArea h="100%">
-      <SimpleGrid cols={isAdvanced && width >= 760 ? 2 : 1} spacing="sm" p="xs">
+      <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="sm" p="xs">
         {instancesData.map((instance) => (
           <InstanceCard
             key={instance.integrationId}
@@ -90,7 +77,6 @@ function CoolifyContent({ integrationIds, options, width, height, isAdvanced }:
             options={options}
             isTiny={isTiny}
             widgetKey={widgetKey}
-            isAdvanced={isAdvanced}
             hideFooter={hideFooter}
           />
         ))}
diff --git a/packages/widgets/src/coolify/index.ts b/packages/widgets/src/coolify/index.ts
index cebf9de05..5aad13a33 100644
--- a/packages/widgets/src/coolify/index.ts
+++ b/packages/widgets/src/coolify/index.ts
@@ -4,6 +4,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("coolify", {
+  supportsAdvancedFocus: false,
   icon: IconCloud,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/coolify/instance-card.tsx b/packages/widgets/src/coolify/instance-card.tsx
index 4cec5c1f8..a085f0ef5 100644
--- a/packages/widgets/src/coolify/instance-card.tsx
+++ b/packages/widgets/src/coolify/instance-card.tsx
@@ -7,23 +7,22 @@ import { useTimeAgo } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { ApplicationsSection } from "./applications-section";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { buildServerResourceCounts, getBadgeColor, parseStatus } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
 import type { CoolifyOptions, InstanceData } from "./types";
 import { COOLIFY_ICON_URL } from "./types";
-import { useAdvancedOpenSections } from "./use-advanced-open-sections";
 
 interface InstanceCardProps {
   instance: InstanceData;
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
-  isAdvanced: boolean;
   hideFooter: boolean;
 }
 
-export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced, hideFooter }: InstanceCardProps) {
+export function InstanceCard({ instance, options, isTiny, widgetKey, hideFooter }: InstanceCardProps) {
   const t = useScopedI18n("widget.coolify");
   const tCommon = useScopedI18n("common");
   const cardKey = `${widgetKey}-${instance.integrationId}`;
@@ -35,15 +34,13 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced,
     key: `coolify-sections-${cardKey}`,
     defaultValue: ["applications"],
   });
-  const [advancedOpenSections, setAdvancedOpenSections] = useAdvancedOpenSections(options);
-
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
     instance.instanceInfo.applications,
     instance.instanceInfo.services,
   );
 
-  const baseUrl = instance.integrationUrl.replace(/\/+$/, "");
+  const baseUrl = getSafeApplicationUrl(instance.integrationUrl)?.replace(/\/+$/, "") ?? "";
   const relativeTime = useTimeAgo(instance.updatedAt);
 
   const onlineServers = instance.instanceInfo.servers.filter((s) => s.is_reachable !== false).length;
@@ -82,9 +79,10 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced,
         <Group gap={4} wrap="nowrap">
           <Image src={COOLIFY_ICON_URL} alt="Coolify" w={16} h={16} />
           <Anchor
+            component={baseUrl ? "a" : "span"}
             href={baseUrl}
-            target="_blank"
-            rel="noopener noreferrer"
+            target={baseUrl ? "_blank" : undefined}
+            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
             fz={isTiny ? "10px" : "xs"}
             fw={600}
             c="inherit"
@@ -127,13 +125,7 @@ export function InstanceCard({ instance, options, isTiny, widgetKey, isAdvanced,
         </Group>
       </Group>
 
-      <Accordion
-        variant="filled"
-        chevronPosition="right"
-        multiple
-        value={isAdvanced ? advancedOpenSections : openSections}
-        onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
-      >
+      <Accordion variant="filled" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
         {options.showServers && (
           <ServersSection
             servers={instance.instanceInfo.servers}
diff --git a/packages/widgets/src/coolify/resource-row.tsx b/packages/widgets/src/coolify/resource-row.tsx
index b7a18f05e..b13c629c1 100644
--- a/packages/widgets/src/coolify/resource-row.tsx
+++ b/packages/widgets/src/coolify/resource-row.tsx
@@ -13,6 +13,7 @@ import {
 import { useScopedI18n } from "@homarr/translation/client";
 
 import actionTargetClasses from "../common/action-target.module.css";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { cleanFqdn, getResourceTimestamp, getStatusColor, parseStatus } from "./coolify-utils";
 
 interface ResourceRowProps {
@@ -59,13 +60,14 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
               ? t("status.restarting")
               : t("status.unknown");
 
-  const resourceUrl =
+  const resourceUrl = getSafeApplicationUrl(
     item.projectUuid && item.environmentUuid
       ? `${baseUrl}/project/${item.projectUuid}/environment/${item.environmentUuid}/${resourceType}/${item.uuid}`
-      : undefined;
+      : undefined,
+  );
 
-  const logsUrl = resourceUrl ? `${resourceUrl}/logs` : undefined;
-  const publicUrl = cleanFqdn(item.fqdn);
+  const logsUrl = getSafeApplicationUrl(resourceUrl ? `${resourceUrl}/logs` : undefined);
+  const publicUrl = getSafeApplicationUrl(cleanFqdn(item.fqdn));
   const resourceTimestamp = getResourceTimestamp(item, resourceType);
 
   return (
@@ -77,7 +79,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             className={actionTargetClasses.root}
             href={resourceUrl}
             target="_blank"
-            rel="noopener noreferrer"
+            rel={SAFE_NEW_TAB_REL}
             fz="xs"
             c="inherit"
             truncate="end"
@@ -98,7 +100,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             component="a"
             href={publicUrl}
             target="_blank"
-            rel="noopener noreferrer"
+            rel={SAFE_NEW_TAB_REL}
             aria-label={t("action.openResource", { name: item.name })}
             size="xs"
             variant="subtle"
@@ -113,7 +115,7 @@ export function ResourceRow({ item, baseUrl, isTiny, resourceType }: ResourceRow
             component="a"
             href={logsUrl}
             target="_blank"
-            rel="noopener noreferrer"
+            rel={SAFE_NEW_TAB_REL}
             aria-label={t("action.openLogs", { name: item.name })}
             size="xs"
             variant="subtle"
diff --git a/packages/widgets/src/coolify/servers-section.tsx b/packages/widgets/src/coolify/servers-section.tsx
index 50496eb6d..2e79bfdf0 100644
--- a/packages/widgets/src/coolify/servers-section.tsx
+++ b/packages/widgets/src/coolify/servers-section.tsx
@@ -7,6 +7,7 @@ import type { CoolifyServer } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import actionTargetClasses from "../common/action-target.module.css";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { getBadgeColor } from "./coolify-utils";
 
 interface ServersSectionProps {
@@ -92,7 +93,7 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
   const t = useScopedI18n("widget.coolify");
   const isBuildServer = server.settings?.is_build_server === true;
   const isOnline = server.is_reachable !== false;
-  const serverUrl = `${baseUrl}/server/${server.uuid}`;
+  const serverUrl = getSafeApplicationUrl(`${baseUrl}/server/${server.uuid}`);
   const StatusIcon = isOnline ? IconCircleCheckFilled : IconCircleXFilled;
 
   return (
@@ -105,9 +106,10 @@ function ServerRow({ server, counts, baseUrl, isTiny, showIp }: ServerRowProps)
         />
         <Anchor
           className={actionTargetClasses.root}
+          component={serverUrl ? "a" : "span"}
           href={serverUrl}
-          target="_blank"
-          rel="noopener noreferrer"
+          target={serverUrl ? "_blank" : undefined}
+          rel={serverUrl ? SAFE_NEW_TAB_REL : undefined}
           fz="xs"
           c="inherit"
           truncate="end"
diff --git a/packages/widgets/src/coolify/single-instance-layout.tsx b/packages/widgets/src/coolify/single-instance-layout.tsx
index dda35b351..fc3455b2d 100644
--- a/packages/widgets/src/coolify/single-instance-layout.tsx
+++ b/packages/widgets/src/coolify/single-instance-layout.tsx
@@ -7,30 +7,22 @@ import { useTimeAgo } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { ApplicationsSection } from "./applications-section";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { buildServerResourceCounts } from "./coolify-utils";
 import { ServersSection } from "./servers-section";
 import { ServicesSection } from "./services-section";
 import type { CoolifyOptions, InstanceData } from "./types";
 import { COOLIFY_BRAND_COLOR, COOLIFY_ICON_URL } from "./types";
-import { useAdvancedOpenSections } from "./use-advanced-open-sections";
 
 interface SingleInstanceLayoutProps {
   instance: InstanceData;
   options: CoolifyOptions;
   isTiny: boolean;
   widgetKey: string;
-  isAdvanced: boolean;
   hideFooter: boolean;
 }
 
-export function SingleInstanceLayout({
-  instance,
-  options,
-  isTiny,
-  widgetKey,
-  isAdvanced,
-  hideFooter,
-}: SingleInstanceLayoutProps) {
+export function SingleInstanceLayout({ instance, options, isTiny, widgetKey, hideFooter }: SingleInstanceLayoutProps) {
   const t = useScopedI18n("widget.coolify");
   const [showIp, setShowIp] = useLocalStorage({
     key: `coolify-show-ip-${widgetKey}`,
@@ -40,16 +32,14 @@ export function SingleInstanceLayout({
     key: `coolify-sections-${widgetKey}`,
     defaultValue: ["applications"],
   });
-  const [advancedOpenSections, setAdvancedOpenSections] = useAdvancedOpenSections(options);
-
   const serverResourceCounts = buildServerResourceCounts(
     instance.instanceInfo.servers,
     instance.instanceInfo.applications,
     instance.instanceInfo.services,
   );
 
-  const baseUrl = instance.integrationUrl.replace(/\/+$/, "");
-  const displayUrl = baseUrl.replace(/^https?:\/\//, "");
+  const baseUrl = getSafeApplicationUrl(instance.integrationUrl)?.replace(/\/+$/, "") ?? "";
+  const displayUrl = baseUrl ? baseUrl.replace(/^https?:\/\//, "") : "—";
   const relativeTime = useTimeAgo(instance.updatedAt);
 
   return (
@@ -63,9 +53,10 @@ export function SingleInstanceLayout({
             </Text>
           </Group>
           <Anchor
+            component={baseUrl ? "a" : "span"}
             href={baseUrl}
-            target="_blank"
-            rel="noopener noreferrer"
+            target={baseUrl ? "_blank" : undefined}
+            rel={baseUrl ? SAFE_NEW_TAB_REL : undefined}
             fz={isTiny ? "xs" : "sm"}
             fw={500}
             c="dimmed"
@@ -75,13 +66,7 @@ export function SingleInstanceLayout({
           </Anchor>
         </Group>
 
-        <Accordion
-          variant="contained"
-          chevronPosition="right"
-          multiple
-          value={isAdvanced ? advancedOpenSections : openSections}
-          onChange={isAdvanced ? setAdvancedOpenSections : setOpenSections}
-        >
+        <Accordion variant="contained" chevronPosition="right" multiple value={openSections} onChange={setOpenSections}>
           {options.showServers && (
             <ServersSection
               servers={instance.instanceInfo.servers}
diff --git a/packages/widgets/src/coolify/use-advanced-open-sections.ts b/packages/widgets/src/coolify/use-advanced-open-sections.ts
deleted file mode 100644
index 7818ca9f6..000000000
--- a/packages/widgets/src/coolify/use-advanced-open-sections.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-
-import type { CoolifyOptions } from "./types";
-
-export function useAdvancedOpenSections(options: CoolifyOptions) {
-  const visibleSections = useMemo(
-    () =>
-      [
-        options.showServers ? "servers" : null,
-        options.showApplications ? "applications" : null,
-        options.showServices ? "services" : null,
-      ].filter((section): section is string => section !== null),
-    [options.showApplications, options.showServers, options.showServices],
-  );
-  const [openSections, setOpenSections] = useState(visibleSections);
-  const previousVisibleSectionsRef = useRef(visibleSections);
-
-  useEffect(() => {
-    const newlyVisibleSections = visibleSections.filter(
-      (section) => !previousVisibleSectionsRef.current.includes(section),
-    );
-    previousVisibleSectionsRef.current = visibleSections;
-    if (newlyVisibleSections.length === 0) return;
-
-    setOpenSections((current) => [...new Set([...current, ...newlyVisibleSections])]);
-  }, [visibleSections]);
-
-  return [openSections, setOpenSections] as const;
-}
diff --git a/packages/widgets/src/custom-api/component.tsx b/packages/widgets/src/custom-api/component.tsx
index d13bbd809..e5aee6497 100644
--- a/packages/widgets/src/custom-api/component.tsx
+++ b/packages/widgets/src/custom-api/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import dynamic from "next/dynamic";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import type { ComponentType } from "react";
 import {
   ActionIcon,
@@ -32,6 +32,8 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetRuntimeActions } from "../runtime-hooks";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import actionTargetClasses from "../common/action-target.module.css";
 
 const CustomJsxDisplay = dynamic(() => import("./custom-jsx-display"), { ssr: false });
@@ -383,18 +385,21 @@ function ActionButtonDisplay({ data, width, height }: CustomDisplayProps) {
   const confirmText = (data.confirmText as string) || "";
   const successMessage = (data.successMessage as string) || t("executeSuccess");
   const definitionId = data.widgetDefinitionId as string | undefined;
+  const boardId = data.boardId as string | undefined;
+  const itemId = data.itemId as string | undefined;
+  const canExecute = data.canExecute === true;
 
   const handleExecute = async () => {
-    if (!definitionId) return;
+    if (!definitionId || !boardId || !itemId || !canExecute) return;
     setLastSuccess(false);
     try {
-      const result = await executeMutation.mutateAsync({ definitionId });
+      const result = await executeMutation.mutateAsync({ boardId, itemId, definitionId });
       if (result.success) {
         setLastSuccess(true);
         showSuccessNotification({ title: buttonLabel, message: successMessage });
         setTimeout(() => setLastSuccess(false), 3000);
       } else {
-        showErrorNotification({ title: buttonLabel, message: result.error ?? t("executeFailed") });
+        showErrorNotification({ title: buttonLabel, message: t("executeFailed") });
       }
     } catch {
       showErrorNotification({ title: buttonLabel, message: t("executeFailed") });
@@ -420,6 +425,7 @@ function ActionButtonDisplay({ data, width, height }: CustomDisplayProps) {
         color={buttonColor}
         onClick={handleClick}
         loading={executeMutation.isPending}
+        disabled={!canExecute || !boardId || !itemId || !definitionId}
         leftSection={lastSuccess ? <IconCheck size={18} /> : <IconPlayerPlay size={18} />}
         variant={lastSuccess ? "light" : "filled"}
         maw="calc(100% - var(--mantine-spacing-sm) * 2)"
@@ -460,10 +466,12 @@ const displayTypeTranslationKeys = {
 
 export default function CustomApiWidget({
   options,
+  boardId,
+  itemId,
   width,
   height,
   displayMode = "compact",
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"customApi">) {
   const t = useScopedI18n("widget.customApi");
   const { definitionId, refreshInterval } = options;
@@ -481,40 +489,48 @@ export default function CustomApiWidget({
     );
   }
 
+  if (!boardId || !itemId) return null;
+
   return (
     <CustomApiWidgetInner
+      boardId={boardId}
+      itemId={itemId}
       definitionId={definitionId}
       refreshInterval={refreshInterval as number}
       width={width}
       height={height}
       displayMode={displayMode}
-      widgetStateRef={widgetStateRef}
+      widgetRuntimeRef={widgetRuntimeRef}
     />
   );
 }
 
 function CustomApiWidgetInner({
+  boardId,
+  itemId,
   definitionId,
   refreshInterval,
   width,
   height,
   displayMode,
-  widgetStateRef,
+  widgetRuntimeRef,
 }: {
+  boardId: string;
+  itemId: string;
   definitionId: string;
   refreshInterval: number;
   width: number;
   height: number;
   displayMode: "compact" | "advanced";
-  widgetStateRef?: WidgetComponentProps<"customApi">["widgetStateRef"];
+  widgetRuntimeRef?: WidgetComponentProps<"customApi">["widgetRuntimeRef"];
 }) {
   const t = useScopedI18n("widget.customApi");
   const tCustomWidget = useScopedI18n("customWidget");
   const safeInterval = Number.isFinite(refreshInterval) ? refreshInterval : 30;
   const intervalMs = Math.max(1000, safeInterval * 1000);
   const [pollingPaused, setPollingPaused] = useState(false);
-  const { data, isLoading, error, refetch, isFetching } = clientApi.widget.customApi.getData.useQuery(
-    { definitionId },
+  const query = clientApi.widget.customApi.getData.useQuery(
+    { boardId, itemId, definitionId },
     {
       refetchInterval: (query) => {
         const result = query.state.data as Record<string, unknown> | undefined;
@@ -527,6 +543,8 @@ function CustomApiWidgetInner({
       },
     },
   );
+  const data = getUsableWidgetQueryData(query);
+  const { isLoading, refetch, isFetching } = query;
 
   const widgetData = (data ?? {}) as Record<string, unknown>;
   const dataType = widgetData.type as string | undefined;
@@ -536,19 +554,7 @@ function CustomApiWidgetInner({
     setPollingPaused((value) => !value);
   }, [pollingPaused, refetch]);
 
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    if (canTogglePolling) {
-      widgetStateRef.current = { ...widgetStateRef.current, togglePolling };
-    } else if (widgetStateRef.current) {
-      delete widgetStateRef.current.togglePolling;
-    }
-    return () => {
-      if (widgetStateRef.current?.togglePolling === togglePolling) {
-        delete widgetStateRef.current.togglePolling;
-      }
-    };
-  }, [canTogglePolling, togglePolling, widgetStateRef]);
+  useWidgetRuntimeActions(widgetRuntimeRef, canTogglePolling ? { togglePolling } : {});
 
   if (isLoading) {
     return (
@@ -558,28 +564,6 @@ function CustomApiWidgetInner({
     );
   }
 
-  if (error) {
-    const isNotFound = error.data?.code === "NOT_FOUND";
-    return (
-      <Center h="100%">
-        <Stack align="center" gap="xs">
-          <IconAlertTriangle size={32} color={`var(--mantine-color-${isNotFound ? "yellow" : "red"}-6)`} />
-          {isNotFound ? (
-            <Text c="dimmed" size="sm" ta="center">
-              {t("definitionNotFound")}
-            </Text>
-          ) : (
-            <Tooltip label={error.message} multiline>
-              <Text c="dimmed" size="sm" ta="center" tabIndex={0} aria-label={`${t("fetchFailed")}. ${error.message}`}>
-                {t("fetchFailed")}
-              </Text>
-            </Tooltip>
-          )}
-        </Stack>
-      </Center>
-    );
-  }
-
   if (!data) return null;
 
   if (dataType === "disabled") {
@@ -596,7 +580,8 @@ function CustomApiWidgetInner({
   if (Component) {
     const displayTypeKey = displayTypeTranslationKeys[dataType as keyof typeof displayTypeTranslationKeys];
     const pollingLabel = pollingPaused ? t("actions.resumePolling") : t("actions.pausePolling");
-    const enrichedData = dataType === "actionButton" ? { ...widgetData, widgetDefinitionId: definitionId } : widgetData;
+    const enrichedData =
+      dataType === "actionButton" ? { ...widgetData, boardId, itemId, widgetDefinitionId: definitionId } : widgetData;
     const content = <Component data={enrichedData} displayMode={displayMode} width={width} height={height} />;
     if (displayMode === "compact") return content;
     return (
diff --git a/packages/widgets/src/custom-api/custom-jsx-display.spec.ts b/packages/widgets/src/custom-api/custom-jsx-display.spec.ts
index d8839ff06..dfd71a4d5 100644
--- a/packages/widgets/src/custom-api/custom-jsx-display.spec.ts
+++ b/packages/widgets/src/custom-api/custom-jsx-display.spec.ts
@@ -64,6 +64,16 @@ describe("CustomJsxDisplay", () => {
     expect(container.textContent).toContain("Safe");
   });
 
+  it("does not expose parser failures in rendered or accessible text", async () => {
+    await renderDisplay({
+      template: "<Text>http://admin:password@nas.internal/private/path?token=secret",
+      data: {},
+    });
+
+    expect(container.textContent).not.toMatch(/admin|password|nas\.internal|private\/path|token|secret/i);
+    expect(container.innerHTML).not.toMatch(/admin|password|nas\.internal|private\/path|token|secret/i);
+  });
+
   describe("safe bindings security", () => {
     it("exposes wrapper functions, not native constructors", () => {
       const bindings = SAFE_BINDINGS({ value: 7 });
diff --git a/packages/widgets/src/custom-api/custom-jsx-display.tsx b/packages/widgets/src/custom-api/custom-jsx-display.tsx
index 1a6bf2f93..06fd5fb3d 100644
--- a/packages/widgets/src/custom-api/custom-jsx-display.tsx
+++ b/packages/widgets/src/custom-api/custom-jsx-display.tsx
@@ -7,27 +7,17 @@ import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { WHITELISTED_COMPONENTS, SAFE_BINDINGS } from "./jsx-whitelist";
 
-const MAX_PARSE_ERRORS = 5;
-
-function appendParseError(prev: string[], message: string): string[] {
-  if (prev.length >= MAX_PARSE_ERRORS) return prev;
-  if (prev.includes(message)) return prev;
-  return [...prev, message];
-}
-
 export default function CustomJsxDisplay({ data }: { data: Record<string, unknown> }) {
   const template = String(data.template ?? "");
   const apiData = data.data;
-  const [parseErrors, setParseErrors] = useState<string[]>([]);
+  const [hasParseError, setHasParseError] = useState(false);
   const bindings = useMemo(() => SAFE_BINDINGS(apiData), [apiData]);
 
   useEffect(() => {
-    setParseErrors([]);
+    setHasParseError(false);
   }, [template, bindings]);
 
-  const handleError = useCallback((error: Error) => {
-    setParseErrors((prev) => appendParseError(prev, error.message));
-  }, []);
+  const handleError = useCallback(() => setHasParseError(true), []);
 
   if (!template.trim()) {
     return (
@@ -51,22 +41,17 @@ export default function CustomJsxDisplay({ data }: { data: Record<string, unknow
         blacklistedAttrs={[/^on.+/i, /^dangerously/i]}
         blacklistedTags={["script", "iframe", "object", "embed", "form", "style", "link", "meta", "base"]}
         onError={handleError}
-        renderError={({ error }) => (
+        renderError={() => (
           <Alert color="red" variant="light" icon={<IconAlertTriangle size={16} />} p="xs">
-            <Text size="xs">{String(error)}</Text>
+            <Text size="xs">Invalid widget template</Text>
           </Alert>
         )}
       />
-      {parseErrors.length > 0 && (
+      {hasParseError && (
         <Alert color="yellow" variant="light" p="xs" mt="xs">
           <Text size="xs" c="dimmed">
-            {parseErrors.length} template warning(s):
+            Invalid widget template
           </Text>
-          {parseErrors.map((msg) => (
-            <Text key={msg} size="xs" c="dimmed" style={{ fontFamily: "monospace" }}>
-              {msg}
-            </Text>
-          ))}
         </Alert>
       )}
     </Stack>
diff --git a/packages/widgets/src/custom-api/index.ts b/packages/widgets/src/custom-api/index.ts
index 2fc7e1849..c54b1c4c7 100644
--- a/packages/widgets/src/custom-api/index.ts
+++ b/packages/widgets/src/custom-api/index.ts
@@ -4,34 +4,34 @@ import { z } from "zod/v4";
 import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    definitionId: factory.customWidgetSelect({ defaultValue: "" }),
+    refreshInterval: factory.slider({
+      defaultValue: 30,
+      validate: z.number().min(1).max(3600),
+      step: 1,
+      withDescription: true,
+    }),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("customApi", {
   icon: IconApi,
   queryKey: [["widget", "customApi", "getData"]],
   queryMatcher: ({ input }, scope) => widgetQueryInputMatches(input, { definitionId: scope.options.definitionId }),
-  contextActions({ options, widgetStateRef }) {
+  contextActions: ({ options, widgetRuntimeRef }) => {
     return [
       {
         key: "togglePolling",
-        label: (t) => t("widget.customApi.actions.togglePolling"),
+        label: "widget.customApi.actions.togglePolling",
         icon: IconPlayerPause,
         hidden: typeof options.definitionId !== "string" || options.definitionId.trim() === "",
-        disabled: typeof widgetStateRef?.current?.togglePolling !== "function",
+        disabled: typeof widgetRuntimeRef.current.actions.togglePolling !== "function",
         onClick: () => {
-          const action = widgetStateRef?.current?.togglePolling;
-          if (typeof action === "function") action();
+          widgetRuntimeRef.current.actions.togglePolling?.();
         },
       },
     ];
   },
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      definitionId: factory.customWidgetSelect({ defaultValue: "" }),
-      refreshInterval: factory.slider({
-        defaultValue: 30,
-        validate: z.number().min(1).max(3600),
-        step: 1,
-        withDescription: true,
-      }),
-    }));
-  },
+  createOptions,
 }).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/custom-api/jsx-whitelist.ts b/packages/widgets/src/custom-api/jsx-whitelist.ts
index 983821955..939c9ff64 100644
--- a/packages/widgets/src/custom-api/jsx-whitelist.ts
+++ b/packages/widgets/src/custom-api/jsx-whitelist.ts
@@ -54,19 +54,19 @@ import {
   Sparkline,
 } from "@mantine/charts";
 
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { PaginatedList, TabsContainer, TabPanel, Collapsible, StatBar, TypeBadge } from "./jsx-interactive-components";
 
-const SAFE_URL_PATTERN = /^https?:\/\//i;
-
-function isSafeUrl(url: unknown): boolean {
-  if (typeof url !== "string") return false;
-  return SAFE_URL_PATTERN.test(url) || url.startsWith("/") || url.startsWith("#");
-}
-
 function SafeAnchor(props: Record<string, unknown>) {
-  const href = props.href;
-  const safeHref = href && isSafeUrl(href) ? href : undefined;
-  return createElement(Anchor as never, { ...props, href: safeHref });
+  const safeHref = getSafeApplicationUrl(props.href);
+  const target = safeHref ? props.target : undefined;
+  return createElement(Anchor as never, {
+    ...props,
+    component: safeHref ? "a" : "span",
+    href: safeHref,
+    target,
+    rel: target === "_blank" ? SAFE_NEW_TAB_REL : undefined,
+  });
 }
 
 export const WHITELISTED_COMPONENTS: Record<string, ComponentType<never>> = {
diff --git a/packages/widgets/src/definition.spec.ts b/packages/widgets/src/definition.spec.ts
index 314be143f..7f976692c 100644
--- a/packages/widgets/src/definition.spec.ts
+++ b/packages/widgets/src/definition.spec.ts
@@ -1,19 +1,8 @@
 import { describe, expect, test } from "vitest";
-import { getQueryKey } from "@trpc/react-query";
-
-import { clientApi } from "@homarr/api/client";
-
 import { definition as appDefinition } from "./app";
 import { definition as beszelSystemGridDefinition } from "./beszel-system-grid";
 import { definition as beszelSystemTableDefinition } from "./beszel-system-table";
-import {
-  getWidgetQueryKeys,
-  getWidgetRuntimeQueries,
-  setWidgetRuntimeQueries,
-  supportsAdvancedFocus,
-} from "./definition";
-
-const togglePolling = () => undefined;
+import { getWidgetQueryKeys, supportsAdvancedFocus } from "./definition";
 
 describe("getWidgetQueryKeys", () => {
   test("falls back to the widget router namespace", () => {
@@ -32,17 +21,6 @@ describe("getWidgetQueryKeys", () => {
 
     expect(getWidgetQueryKeys({ kind: "audioStats", queryKeys })).toBe(queryKeys);
   });
-
-  test("registers runtime queries without replacing imperative widget actions", () => {
-    const widgetStateRef = { current: { togglePolling } };
-    const input = { integrationIds: [], month: 7, year: 2026, releaseType: [], showUnmonitored: false };
-    const queryKey = getQueryKey(clientApi.widget.calendar.findAllEvents, input, "query");
-
-    setWidgetRuntimeQueries(widgetStateRef, [queryKey]);
-
-    expect(widgetStateRef.current.togglePolling).toBe(togglePolling);
-    expect(getWidgetRuntimeQueries(widgetStateRef)).toEqual([{ path: ["widget", "calendar", "findAllEvents"], input }]);
-  });
 });
 
 describe("supportsAdvancedFocus", () => {
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index 2153efda5..3975bd9cd 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -11,11 +11,11 @@ import type { stringOrTranslation } from "@homarr/translation";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetImports } from ".";
-import type { inferOptionsFromCreator, inferOptionsFromDefinition, WidgetOptionsRecord } from "./options";
+import type { inferOptionsFromCreator, WidgetOptionsRecord } from "./options";
 
 export interface WidgetContextMenuAction {
   key: string;
-  label: stringOrTranslation;
+  label: string;
   icon?: TablerIcon;
   onClick: () => void;
   hidden?: boolean;
@@ -30,6 +30,26 @@ export interface WidgetContextMenuContext {
   canInteractWithSelectedIntegrations: boolean;
 }
 
+export interface WidgetRuntimeActions {
+  togglePolling?: () => void;
+  testAllIndexers?: () => void;
+  previousPhoto?: () => void;
+  nextPhoto?: () => void;
+  toggleSlideshow?: () => void;
+}
+
+export interface WidgetRuntimeState {
+  queries: readonly NormalizedWidgetQuery[];
+  actions: WidgetRuntimeActions;
+}
+
+export type WidgetRuntimeRef = React.MutableRefObject<WidgetRuntimeState>;
+
+export const createWidgetRuntimeState = (): WidgetRuntimeState => ({
+  queries: [],
+  actions: {},
+});
+
 export interface NormalizedWidgetQuery {
   path: readonly string[];
   input: unknown;
@@ -45,16 +65,12 @@ export interface WidgetQueryMatcherScope {
 
 export type WidgetQueryMatcher = (query: NormalizedWidgetQuery, scope: WidgetQueryMatcherScope) => boolean;
 
-export interface WidgetContextActionProps<
-  TKind extends WidgetKind,
-  TOptions extends WidgetOptionsRecord = WidgetOptionsRecord,
-> {
-  kind: TKind;
-  options: inferOptionsFromDefinition<TOptions>;
-  setOptions: (partial: Partial<inferOptionsFromDefinition<TOptions>>) => void;
+export interface WidgetContextActionProps {
+  options: Record<string, unknown>;
+  setOptions: (partial: Record<string, unknown>) => void;
   integrationIds: string[];
   context: WidgetContextMenuContext;
-  widgetStateRef: React.MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef: WidgetRuntimeRef;
 }
 
 const createWithDynamicImport =
@@ -107,10 +123,11 @@ export interface WidgetDefinition {
       }
     >
   >;
-  contextActions?: (props: Omit<WidgetContextActionProps<WidgetKind>, "kind">) => WidgetContextMenuAction[];
+  contextActions?: (props: WidgetContextActionProps) => WidgetContextMenuAction[];
 }
 
-export const supportsAdvancedFocus = (definition: WidgetDefinition) => definition.supportsAdvancedFocus !== false;
+export const supportsAdvancedFocus = (definition: object) =>
+  !("supportsAdvancedFocus" in definition) || definition.supportsAdvancedFocus !== false;
 
 export const getWidgetQueryKeys = (definition: {
   kind: string;
@@ -121,8 +138,6 @@ export const getWidgetQueryKeys = (definition: {
   return [definition.queryKey ?? [["widget", definition.kind]]];
 };
 
-const runtimeQueriesStateKey = "__homarrRuntimeQueries";
-
 export const normalizeWidgetQuery = (queryKey: QueryKey): NormalizedWidgetQuery | null => {
   const path = queryKey[0];
   if (!Array.isArray(path) || !path.every((part): part is string => typeof part === "string")) return null;
@@ -132,26 +147,8 @@ export const normalizeWidgetQuery = (queryKey: QueryKey): NormalizedWidgetQuery
   return { path, input };
 };
 
-export const setWidgetRuntimeQueries = (
-  widgetStateRef: React.MutableRefObject<Record<string, unknown> | null> | undefined,
-  queryKeys: readonly QueryKey[],
-) => {
-  if (!widgetStateRef) return;
-  // This render-time ref write is idempotent and does not trigger a render.
-  const state = widgetStateRef.current ?? {};
-  state[runtimeQueriesStateKey] = queryKeys.flatMap((queryKey) => {
-    const query = normalizeWidgetQuery(queryKey);
-    return query ? [query] : [];
-  });
-  widgetStateRef.current = state;
-};
-
-export const getWidgetRuntimeQueries = (
-  widgetStateRef: React.MutableRefObject<Record<string, unknown> | null>,
-): readonly NormalizedWidgetQuery[] => {
-  const queries = widgetStateRef.current?.[runtimeQueriesStateKey];
-  return Array.isArray(queries) ? (queries as NormalizedWidgetQuery[]) : [];
-};
+export const getWidgetRuntimeQueries = (widgetRuntimeRef: WidgetRuntimeRef): readonly NormalizedWidgetQuery[] =>
+  widgetRuntimeRef.current.queries;
 
 export const matchesWidgetRuntimeQuery: WidgetQueryMatcher = (query, scope) =>
   scope.runtimeQueries.some(
@@ -180,7 +177,7 @@ export type WidgetComponentProps<TKind extends WidgetKind> = WidgetProps<TKind>
   setOptions: ({ newOptions }: { newOptions: Partial<inferOptionsFromCreator<WidgetOptionsRecordOf<TKind>>> }) => void;
   width: number;
   height: number;
-  widgetStateRef?: React.MutableRefObject<Record<string, unknown> | null>;
+  widgetRuntimeRef?: WidgetRuntimeRef;
 };
 
 export type WidgetOptionsRecordOf<TKind extends WidgetKind> = WidgetImports[TKind]["definition"]["createOptions"];
diff --git a/packages/widgets/src/dns-hole/controls/component.tsx b/packages/widgets/src/dns-hole/controls/component.tsx
index 00cca22e5..13977a5a0 100644
--- a/packages/widgets/src/dns-hole/controls/component.tsx
+++ b/packages/widgets/src/dns-hole/controls/component.tsx
@@ -33,6 +33,7 @@ import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { widgetKind } from ".";
 import type { WidgetComponentProps } from "../../definition";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import actionTargetClasses from "../../common/action-target.module.css";
 import classes from "./component.module.css";
 import TimerModal from "./TimerModal";
@@ -46,7 +47,6 @@ export default function DnsHoleControlsWidget({
   isEditMode,
   width,
   height,
-  displayMode,
 }: WidgetComponentProps<typeof widgetKind>) {
   const board = useRequiredBoard();
   // DnsHole integrations with interaction permissions
@@ -54,9 +54,9 @@ export default function DnsHoleControlsWidget({
     .map(({ id }) => id)
     .filter((id) => integrationIds.includes(id));
 
-  const { data: summaries = [], isPending: isSummaryPending } = clientApi.widget.dnsHole.summary.useQuery({
-    integrationIds,
-  });
+  const summaryQuery = clientApi.widget.dnsHole.summary.useQuery({ integrationIds });
+  const summaries = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const { isPending: isSummaryPending } = summaryQuery;
   const utils = clientApi.useUtils();
 
   const {
@@ -118,8 +118,7 @@ export default function DnsHoleControlsWidget({
   const [bulkFailureCount, setBulkFailureCount] = useState(0);
   const [opened, { close, open }] = useDisclosure(false);
 
-  const controlAllButtonsVisible =
-    (options.showToggleAllButtons || displayMode === "advanced") && integrationsWithInteractions.length > 0;
+  const controlAllButtonsVisible = options.showToggleAllButtons && integrationsWithInteractions.length > 0;
   const actionsPending = bulkPending || isEnabling || isDisabling;
   const actionError = enableError ?? disableError;
   const runBulkToggle = async (integrationIdsToToggle: string[]) => {
@@ -229,7 +228,6 @@ export default function DnsHoleControlsWidget({
               hasIconColor={board.iconColor !== null}
               rootWidth={width}
               rootHeight={height}
-              isAdvanced={displayMode === "advanced"}
               actionsPending={actionsPending}
             />
           ))}
@@ -242,7 +240,7 @@ export default function DnsHoleControlsWidget({
         </Text>
       )}
       {actionError && (
-        <Tooltip label={actionError.message} multiline>
+        <Tooltip label={t("widget.dnsHoleControls.error.internalServerError")}>
           <Text size="xs" c="red" ta="center" lineClamp={2} tabIndex={0}>
             {t("widget.dnsHoleControls.error.internalServerError")}
           </Text>
@@ -269,7 +267,6 @@ interface ControlsCardProps {
   hasIconColor: boolean;
   rootWidth: number;
   rootHeight: number;
-  isAdvanced: boolean;
   actionsPending: boolean;
 }
 
@@ -283,7 +280,6 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
   hasIconColor,
   rootWidth,
   rootHeight,
-  isAdvanced,
   actionsPending,
 }) => {
   const isConnected = useIntegrationConnected(data.integration.updatedAt, { timeout: 30000 });
@@ -294,7 +290,7 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
   const board = useRequiredBoard();
 
   const iconUrl = integrationDefs[data.integration.kind].iconUrl;
-  const layout = !isAdvanced && (rootWidth < 256 || rootHeight < 112) ? "sm" : "md";
+  const layout = rootWidth < 256 || rootHeight < 112 ? "sm" : "md";
 
   return (
     <Indicator
diff --git a/packages/widgets/src/dns-hole/controls/index.ts b/packages/widgets/src/dns-hole/controls/index.ts
index 9340a642a..8e5a3ee02 100644
--- a/packages/widgets/src/dns-hole/controls/index.ts
+++ b/packages/widgets/src/dns-hole/controls/index.ts
@@ -8,6 +8,7 @@ import { optionsBuilder } from "../../options";
 export const widgetKind = "dnsHoleControls";
 
 export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
+  supportsAdvancedFocus: false,
   icon: IconDeviceGamepad,
   queryKey: [["widget", "dnsHole"]],
   refetchInterval: 5,
diff --git a/packages/widgets/src/dns-hole/summary/component.tsx b/packages/widgets/src/dns-hole/summary/component.tsx
index 86c03dd7c..38c0eceea 100644
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -2,7 +2,19 @@
 
 import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
-import { Avatar, AvatarGroup, Badge, Card, Flex, Group, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
+import {
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Card,
+  Flex,
+  Group,
+  ScrollArea,
+  SimpleGrid,
+  Stack,
+  Text,
+  Tooltip,
+} from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";
 
@@ -18,20 +30,25 @@ import type { TablerIcon } from "@homarr/ui";
 
 import type { widgetKind } from ".";
 import type { WidgetComponentProps, WidgetProps } from "../../definition";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 
 export default function DnsHoleSummaryWidget({
   options,
   integrationIds,
-  displayMode,
+  width,
+  height,
 }: WidgetComponentProps<typeof widgetKind>) {
-  const { data: summaries = [], isPending } = clientApi.widget.dnsHole.summary.useQuery({
+  const summaryQuery = clientApi.widget.dnsHole.summary.useQuery({
     integrationIds,
   });
+  const summaries = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const { isPending } = summaryQuery;
 
   const t = useI18n();
 
   const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
   const layoutProps = boxPropsByLayout(options.layout);
+  const showSourceStatuses = summaries.length > 1 && width >= 240 && height >= 220;
 
   if (isPending) {
     return (
@@ -74,18 +91,21 @@ export default function DnsHoleSummaryWidget({
           </Stack>
         )}
       </SimpleGrid>
-      {displayMode === "advanced" && summaries.length > 0 && (
-        <Group px="xs" pb="xs" gap="xs">
-          {summaries.map(({ integration, summary }) => (
-            <Badge
-              key={integration.id}
-              variant="light"
-              color={summary.status === "enabled" ? "green" : summary.status === "disabled" ? "red" : "gray"}
-            >
-              {integration.name}: {t(`widget.dnsHoleSummary.status.${summary.status ?? "unknown"}`)}
-            </Badge>
-          ))}
-        </Group>
+      {showSourceStatuses && (
+        <ScrollArea type="auto" scrollbarSize={4} px="xs" pb="xs">
+          <Group gap="xs" wrap="nowrap">
+            {summaries.map(({ integration, summary }) => (
+              <Badge
+                key={integration.id}
+                variant="light"
+                color={summary.status === "enabled" ? "green" : summary.status === "disabled" ? "red" : "gray"}
+                style={{ flexShrink: 0 }}
+              >
+                {integration.name}: {t(`widget.dnsHoleSummary.status.${summary.status ?? "unknown"}` as never)}
+              </Badge>
+            ))}
+          </Group>
+        </ScrollArea>
       )}
     </Stack>
   );
@@ -174,7 +194,7 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
         className="summary-card"
         p="sm"
         radius={board.itemRadius}
-        bg={usePiHoleColors ? item.color : "rgba(96, 96, 96, 0.1)"}
+        bg={usePiHoleColors ? item.color : "var(--mantine-color-default-hover)"}
         style={{
           flex: 1,
         }}
diff --git a/packages/widgets/src/dns-hole/summary/index.ts b/packages/widgets/src/dns-hole/summary/index.ts
index 0d605e8e9..dcc77a041 100644
--- a/packages/widgets/src/dns-hole/summary/index.ts
+++ b/packages/widgets/src/dns-hole/summary/index.ts
@@ -8,6 +8,7 @@ import { optionsBuilder } from "../../options";
 export const widgetKind = "dnsHoleSummary";
 
 export const { definition, componentLoader } = createWidgetDefinition(widgetKind, {
+  supportsAdvancedFocus: false,
   icon: IconAd,
   queryKey: [["widget", "dnsHole"]],
   refetchInterval: 5,
diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index 1e09cdd75..9ade953fd 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -43,6 +43,7 @@ import { showErrorNotification, showSuccessNotification } from "@homarr/notifica
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import actionTargetClasses from "../common/action-target.module.css";
 import { HomarrDataTable } from "../common/homarr-data-table";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
@@ -240,7 +241,9 @@ export default function DockerWidget({
   const hasChangeAccess = board ? constructBoardPermissions(board, session).hasChangeAccess : false;
   const isAdvanced = displayMode === "advanced";
 
-  const { data, refetch, isFetching } = clientApi.docker.getContainers.useQuery();
+  const containersQuery = clientApi.docker.getContainers.useQuery();
+  const data = getUsableWidgetQueryData(containersQuery);
+  const { refetch, isFetching } = containersQuery;
   const containers = useMemo(() => data?.containers ?? [], [data?.containers]);
   const timestamp = useMemo(() => data?.timestamp ?? new Date(), [data?.timestamp]);
   const relativeTime = useTimeAgo(timestamp);
diff --git a/packages/widgets/src/downloads/component.tsx b/packages/widgets/src/downloads/component.tsx
index aba330f62..a3957a587 100644
--- a/packages/widgets/src/downloads/component.tsx
+++ b/packages/widgets/src/downloads/component.tsx
@@ -50,10 +50,12 @@ import { formatByteRate, formatBytes, useIntegrationConnected } from "@homarr/co
 import { getIconUrl, getIntegrationKindsByCategory } from "@homarr/definitions";
 import type { ExtendedClientStatus, ExtendedDownloadClientItem } from "@homarr/integrations";
 import { showErrorNotification } from "@homarr/notifications";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { HomarrDataTable } from "../common/homarr-data-table";
+import { formatLocalizedDateTime } from "../common/locale";
 import { usePersistedTableLayout, useTableLayoutPersistence } from "../common/use-persisted-table-layout";
 import { filterDownloadItemsByStatus, getAvailableDownloadStates } from "./helpers";
 
@@ -133,8 +135,8 @@ const stateColorMap: Record<DownloadState, string> = {
 };
 
 const rowBgAlpha: Partial<Record<DownloadState, string>> = {
-  failed: "rgba(255, 0, 0, 0.04)",
-  paused: "rgba(255, 200, 0, 0.03)",
+  failed: "var(--mantine-color-red-light)",
+  paused: "var(--mantine-color-yellow-light)",
 };
 
 const columnVisibilityChecks: Partial<Record<string, (ctx: ColumnContext) => boolean>> = {
@@ -314,14 +316,12 @@ export default function DownloadClientsWidget({
     [allInteractAccess, integrationIds],
   );
 
-  const {
-    data: currentItems = [],
-    isFetching,
-    isError,
-  } = clientApi.widget.downloads.getJobsAndStatuses.useQuery({
+  const downloadsQuery = clientApi.widget.downloads.getJobsAndStatuses.useQuery({
     integrationIds,
     limitPerIntegration: options.limitPerIntegration,
   });
+  const currentItems = getUsableWidgetQueryData(downloadsQuery) ?? [];
+  const { isFetching } = downloadsQuery;
 
   const t = useScopedI18n("widget.downloads");
 
@@ -733,14 +733,6 @@ export default function DownloadClientsWidget({
     );
   }
 
-  if (isError && currentItems.length === 0) {
-    return (
-      <Center h="100%">
-        <Text c="red">{t("errors.noCommunications")}</Text>
-      </Center>
-    );
-  }
-
   let rowContextMenuHandler: typeof handleContextMenu | undefined = handleContextMenu;
   if (isEditMode) rowContextMenuHandler = undefined;
 
@@ -859,6 +851,7 @@ function buildHoverTooltip(record: ExtendedDownloadClientItem, t: DownloadsT): R
 
 function ExpandedRow({ item, collapse }: { item: ExtendedDownloadClientItem; collapse: () => void }) {
   const t = useScopedI18n("widget.downloads");
+  const locale = useCurrentIntlLocale();
   const progressPercent = Math.floor(item.progress * 100);
   const categoryDisplay = formatCategoryDisplay(item.category);
 
@@ -921,7 +914,7 @@ function ExpandedRow({ item, collapse }: { item: ExtendedDownloadClientItem; col
               <DetailPair label={t("items.sent.detailsTitle")} value={formatBytes(item.sent)} />
             )}
             {item.added !== undefined && (
-              <DetailPair label={t("items.added.detailsTitle")} value={dayjs(item.added).format("YYYY-MM-DD HH:mm")} />
+              <DetailPair label={t("items.added.detailsTitle")} value={formatLocalizedDateTime(item.added, locale)} />
             )}
             {categoryDisplay && <DetailPair label={t("items.category.detailsTitle")} value={categoryDisplay} />}
             <DetailPair label={t("items.id.detailsTitle")} value={item.id} />
@@ -1058,7 +1051,7 @@ function RowContextMenu({ state, onClose, t }: { state: ContextMenuState; onClos
         left={0}
         w="100vw"
         h="100vh"
-        style={{ zIndex: 1000 }}
+        style={{ zIndex: "var(--mantine-z-index-popover)" }}
         onClick={onClose}
         onContextMenu={(e) => {
           e.preventDefault();
diff --git a/packages/widgets/src/errors/component.spec.ts b/packages/widgets/src/errors/component.spec.ts
new file mode 100644
index 000000000..abe6ca0db
--- /dev/null
+++ b/packages/widgets/src/errors/component.spec.ts
@@ -0,0 +1,61 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { WidgetError } from "./component";
+
+vi.mock("@homarr/translation/client", () => ({
+  useI18n: () => (key: string) => key,
+}));
+
+const matchMedia = (query: string) => ({
+  matches: false,
+  media: query,
+  onchange: null,
+  addListener: () => undefined,
+  removeListener: () => undefined,
+  addEventListener: () => undefined,
+  removeEventListener: () => undefined,
+  dispatchEvent: () => false,
+});
+
+describe("WidgetError", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("never renders an unmapped backend error", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", matchMedia);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    const secret = "http://admin:password@private.local/path?token=secret";
+
+    await act(async () =>
+      root?.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(WidgetError, {
+            kind: "app",
+            error: new Error(secret),
+            resetErrorBoundary: vi.fn(),
+          }),
+        ),
+      ),
+    );
+
+    expect(host.textContent).toContain("common.error");
+    expect(host.textContent).not.toContain(secret);
+    expect(host.textContent).not.toMatch(/password|private\.local|token=secret/);
+  });
+});
diff --git a/packages/widgets/src/errors/component.tsx b/packages/widgets/src/errors/component.tsx
index 57f77d62a..9f96ebed0 100644
--- a/packages/widgets/src/errors/component.tsx
+++ b/packages/widgets/src/errors/component.tsx
@@ -37,7 +37,8 @@ export const WidgetError = ({ error, resetErrorBoundary, kind }: WidgetErrorProp
   return (
     <BaseWidgetError
       icon={IconExclamationCircle}
-      message={(error as { toString: () => string }).toString()}
+      message={(t) => t("common.error")}
+      showLogsLink
       onRetry={resetErrorBoundary}
     />
   );
@@ -72,7 +73,7 @@ const handleCommonTrpcError = (error: unknown): Omit<BaseWidgetErrorProps, "onRe
   if (errorData.code === "UNAUTHORIZED" || errorData.code === "FORBIDDEN") {
     return {
       icon: IconShield,
-      message: "You don't have permission to access this widget",
+      message: (t) => t("integration.testConnection.error.certificate.alert.permission.title"),
       showLogsLink: false,
     };
   }
diff --git a/packages/widgets/src/firewall/component.tsx b/packages/widgets/src/firewall/component.tsx
index ba0779d0d..62a553c4f 100644
--- a/packages/widgets/src/firewall/component.tsx
+++ b/packages/widgets/src/firewall/component.tsx
@@ -44,7 +44,8 @@ export const hasTotalFirewallFailure = (queries: readonly FirewallQueryState[])
   queries.every((query) => !query.isPending && !query.isFetching) &&
   queries.every(
     (query) =>
-      query.isError || (query.data !== undefined && query.data.length > 0 && query.data.every(({ error }) => error)),
+      (query.isError && query.data === undefined) ||
+      (query.data !== undefined && query.data.length > 0 && query.data.every(({ error }) => error)),
   );
 
 export const hasFirewallPartialFailure = (firewallId: string, queries: readonly FirewallQueryState[]) =>
@@ -65,7 +66,7 @@ export default function FirewallWidget({
   const isAdvanced = displayMode === "advanced";
   const isTiny = !isAdvanced && (width < 256 || height < 180);
   const ringSize = isAdvanced ? 100 : height < 120 ? 44 : isTiny ? 64 : 100;
-  const showInterfaces = isAdvanced || height >= 120;
+  const showInterfaces = isAdvanced || (!isTiny && height >= 120);
   const t = useI18n();
 
   const handleSelect = useCallback((value: string | null) => {
@@ -174,7 +175,6 @@ export default function FirewallWidget({
                 interfacesError={interfacesQuery.isError || Boolean(interfaces?.error)}
                 hasError={hasError}
                 isAdvanced={isAdvanced}
-                isTiny={isTiny}
                 ringSize={ringSize}
                 showInterfaces={showInterfaces}
                 accordionValue={accordionValue}
@@ -205,7 +205,6 @@ interface FirewallPanelProps {
   interfacesError: boolean;
   hasError: boolean;
   isAdvanced: boolean;
-  isTiny: boolean;
   ringSize: number;
   showInterfaces: boolean;
   accordionValue: string | null;
@@ -229,7 +228,6 @@ const FirewallPanel = ({
   interfacesError,
   hasError,
   isAdvanced,
-  isTiny,
   ringSize,
   showInterfaces,
   accordionValue,
@@ -291,7 +289,6 @@ const FirewallPanel = ({
           hasResult={interfacesLoaded}
           hasError={interfacesError}
           isAdvanced={isAdvanced}
-          isTiny={isTiny}
           accordionValue={accordionValue}
           setAccordionValue={setAccordionValue}
           errorLabel={errorLabel}
@@ -317,6 +314,8 @@ const MetricRing = ({ value, icon: Icon, size, label, t }: MetricRingProps) => {
   const safeValue = Math.max(0, Math.min(100, Number.isFinite(value) ? value : 0));
   const status = getMetricStatus(safeValue);
   const statusLabel = t(`widget.firewall.status.${status}`);
+  const showIcon = size >= 64;
+  const showStatus = size >= 96;
 
   return (
     <RingProgress
@@ -330,9 +329,9 @@ const MetricRing = ({ value, icon: Icon, size, label, t }: MetricRingProps) => {
       thickness={size < 72 ? 4 : 8}
       label={
         <Center style={{ flexDirection: "column" }}>
-          <Text size={size < 72 ? "8px" : "xs"}>{safeValue.toFixed(1)}%</Text>
-          <Icon size={size < 72 ? 8 : 16} />
-          {size >= 72 && <Text size="8px">{statusLabel}</Text>}
+          <Text size="xs">{safeValue.toFixed(1)}%</Text>
+          {showIcon && <Icon size={size < 96 ? 12 : 16} />}
+          {showStatus && <Text size="xs">{statusLabel}</Text>}
         </Center>
       }
       sections={[
@@ -356,7 +355,6 @@ interface InterfacesPanelProps {
   hasResult: boolean;
   hasError: boolean;
   isAdvanced: boolean;
-  isTiny: boolean;
   accordionValue: string | null;
   setAccordionValue: (value: string | null) => void;
   errorLabel: string;
@@ -371,7 +369,6 @@ const InterfacesPanel = ({
   hasResult,
   hasError,
   isAdvanced,
-  isTiny,
   accordionValue,
   setAccordionValue,
   errorLabel,
@@ -389,9 +386,9 @@ const InterfacesPanel = ({
       variant={isAdvanced ? "contained" : "default"}
     >
       <Accordion.Item value="interfaces">
-        <Accordion.Control icon={isTiny ? null : <IconTopologyBus size={16} />}>
+        <Accordion.Control icon={<IconTopologyBus size={16} />}>
           <Group justify="space-between" wrap="nowrap" gap="xs">
-            <Text size={isTiny ? "8px" : "xs"}>{label}</Text>
+            <Text size="xs">{label}</Text>
             {hasError && (
               <Badge color="red" variant="light" size="xs">
                 {errorBadgeLabel}
@@ -402,19 +399,30 @@ const InterfacesPanel = ({
         <Accordion.Panel>
           <Stack gap={4}>
             {bandwidth.map(({ name, receive, transmit }) => (
-              <Group key={name} gap="xs" wrap={isTiny ? "wrap" : "nowrap"} justify="space-between">
-                <Text size={isTiny ? "8px" : "xs"} c="blue.3" truncate="end" style={{ flex: 1 }}>
+              <Group key={name} gap="xs" wrap="nowrap" justify="space-between">
+                <Text
+                  size="xs"
+                  c="light-dark(var(--mantine-color-blue-8), var(--mantine-color-blue-3))"
+                  truncate="end"
+                  style={{ flex: 1 }}
+                >
                   {name}
                 </Text>
                 <Group gap={4} wrap="nowrap">
-                  <IconArrowBarUp size={isTiny ? 8 : 12} color="lightgreen" />
-                  <Text size={isTiny ? "8px" : "xs"} c="green.3">
+                  <IconArrowBarUp
+                    size={12}
+                    color="light-dark(var(--mantine-color-green-8), var(--mantine-color-green-3))"
+                  />
+                  <Text size="xs" c="light-dark(var(--mantine-color-green-8), var(--mantine-color-green-3))">
                     {formatBitsPerSec(transmit, 2)}
                   </Text>
                 </Group>
                 <Group gap={4} wrap="nowrap">
-                  <IconArrowBarDown size={isTiny ? 8 : 12} color="yellow" />
-                  <Text size={isTiny ? "8px" : "xs"} c="yellow.3">
+                  <IconArrowBarDown
+                    size={12}
+                    color="light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-3))"
+                  />
+                  <Text size="xs" c="light-dark(var(--mantine-color-yellow-9), var(--mantine-color-yellow-3))">
                     {formatBitsPerSec(receive, 2)}
                   </Text>
                 </Group>
diff --git a/packages/widgets/src/firewall/failure-state.spec.ts b/packages/widgets/src/firewall/failure-state.spec.ts
index c73528c9e..eb4743ccc 100644
--- a/packages/widgets/src/firewall/failure-state.spec.ts
+++ b/packages/widgets/src/firewall/failure-state.spec.ts
@@ -28,6 +28,16 @@ describe("firewall failure state", () => {
     );
   });
 
+  it("preserves stale cached data when a query-wide refetch fails", () => {
+    const staleQuery = {
+      ...failedQuery,
+      isError: true,
+      data: [{ integration: { id: "firewall-1" }, error: undefined }],
+    };
+
+    expect(hasTotalFirewallFailure([staleQuery, failedQuery, failedQuery, failedQuery])).toBe(false);
+  });
+
   it("surfaces query-wide and integration-specific partial failures", () => {
     const successfulQuery = {
       isPending: false,
diff --git a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
index d14f63521..08d053e60 100644
--- a/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
+++ b/packages/widgets/src/health-monitoring/cluster/cluster-health.tsx
@@ -7,6 +7,7 @@ import type { Resource } from "@homarr/integrations/types";
 import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import type { WidgetComponentProps } from "../../definition";
 import { formatUptime } from "../system-health";
 import { getClusterAccordionDefault } from "./accordion-state";
@@ -38,9 +39,9 @@ export const ClusterHealthMonitoring = ({
   displayMode,
 }: WidgetComponentProps<"healthMonitoring"> & { integrationId: string }) => {
   const t = useI18n();
-  const { data: healthData } = clientApi.widget.healthMonitoring.getClusterHealthStatus.useQuery({
-    integrationId,
-  });
+  const healthData = getUsableWidgetQueryData(
+    clientApi.widget.healthMonitoring.getClusterHealthStatus.useQuery({ integrationId }),
+  );
   const accordionScope = `${displayMode}:${options.visibleClusterSections.join(",")}`;
   const accordionDefault = getClusterAccordionDefault(displayMode, options.visibleClusterSections);
   const [accordionValues, setAccordionValues] = useState<Record<string, string[]>>({});
@@ -67,9 +68,9 @@ export const ClusterHealthMonitoring = ({
   const isTiny = displayMode !== "advanced" && width < 256;
   return (
     <Stack h={displayMode === "advanced" ? "auto" : "100%"} p="xs" gap={isTiny ? "xs" : "md"}>
-      {options.showUptime && (
+      {options.showUptime && !isTiny && (
         <Group justify="center" wrap="nowrap">
-          <Text fz={isTiny ? 8 : "xs"} fw={700} c="dimmed" ta="center">
+          <Text fz="xs" fw={700} c="dimmed" ta="center">
             {formatUptime(uptime, t)}
           </Text>
         </Group>
@@ -190,10 +191,12 @@ const SummaryHeader = ({ cpu, memory, isTiny }: SummaryHeaderProps) => {
               sections={[{ value: cpu.value, color: cpu.value > 75 ? "orange" : "green" }]}
             />
             <Stack align="center" justify="center" gap={0}>
-              <Text fw={500} size={isTiny ? "xs" : "sm"}>
-                {t("widget.healthMonitoring.cluster.summary.cpu")}
-              </Text>
-              <Text size={isTiny ? "8px" : "xs"}>{cpu.value.toFixed(1)}%</Text>
+              {!isTiny && (
+                <Text fw={500} size="sm">
+                  {t("widget.healthMonitoring.cluster.summary.cpu")}
+                </Text>
+              )}
+              <Text size="xs">{cpu.value.toFixed(1)}%</Text>
             </Stack>
           </Flex>
         )}
@@ -211,10 +214,12 @@ const SummaryHeader = ({ cpu, memory, isTiny }: SummaryHeaderProps) => {
               sections={[{ value: memory.value, color: memory.value > 75 ? "orange" : "green" }]}
             />
             <Stack align="center" justify="center" gap={0}>
-              <Text size={isTiny ? "xs" : "sm"} fw={500}>
-                {t("widget.healthMonitoring.cluster.summary.memory")}
-              </Text>
-              <Text size={isTiny ? "8px" : "xs"}>{memory.value.toFixed(1)}%</Text>
+              {!isTiny && (
+                <Text size="sm" fw={500}>
+                  {t("widget.healthMonitoring.cluster.summary.memory")}
+                </Text>
+              )}
+              <Text size="xs">{memory.value.toFixed(1)}%</Text>
             </Stack>
           </Flex>
         )}
diff --git a/packages/widgets/src/health-monitoring/cluster/resource-table.tsx b/packages/widgets/src/health-monitoring/cluster/resource-table.tsx
index 2c2b17e0e..18f7a0fa0 100644
--- a/packages/widgets/src/health-monitoring/cluster/resource-table.tsx
+++ b/packages/widgets/src/health-monitoring/cluster/resource-table.tsx
@@ -27,21 +27,21 @@ export const ResourceTable = ({ type, data, isTiny }: ResourceTableProps) => {
   return (
     <Table highlightOnHover>
       <TableThead>
-        <TableTr fz={isTiny ? "8px" : "xs"}>
+        <TableTr fz="xs">
           <TableTh ta="start" p={0}>
             {t("widget.healthMonitoring.cluster.table.header.name")}
           </TableTh>
-          {type !== "storage" ? (
+          {!isTiny && type !== "storage" ? (
             <TableTh ta="start" p={0}>
               {t("widget.healthMonitoring.cluster.table.header.cpu")}
             </TableTh>
           ) : null}
-          {type !== "storage" ? (
+          {!isTiny && type !== "storage" ? (
             <TableTh ta="start" p={0}>
               {t("widget.healthMonitoring.cluster.table.header.memory")}
             </TableTh>
           ) : null}
-          {type === "storage" ? (
+          {!isTiny && type === "storage" ? (
             <TableTh ta="start" p={0}>
               {t("widget.healthMonitoring.cluster.table.header.node")}
             </TableTh>
@@ -59,25 +59,25 @@ export const ResourceTable = ({ type, data, isTiny }: ResourceTableProps) => {
             return (
               <ResourcePopover key={item.id} item={item}>
                 <Popover.Target>
-                  <TableTr fz={isTiny ? "8px" : "xs"}>
+                  <TableTr fz="xs">
                     <TableTd>
                       <Group wrap="nowrap" gap={isTiny ? 8 : "xs"}>
-                        <Indicator size={isTiny ? 4 : 8} color={item.isRunning ? "green" : "yellow"}>
+                        <Indicator size={isTiny ? 6 : 8} color={item.isRunning ? "green" : "yellow"}>
                           {null}
                         </Indicator>
-                        <Text lineClamp={1} fz={isTiny ? "8px" : "xs"}>
+                        <Text lineClamp={1} fz="xs">
                           {item.name}
                         </Text>
                       </Group>
                     </TableTd>
-                    {item.type === "storage" ? (
-                      <td style={{ WebkitLineClamp: "1" }}>{item.node}</td>
+                    {isTiny ? null : item.type === "storage" ? (
+                      <TableTd style={{ WebkitLineClamp: "1" }}>{item.node}</TableTd>
                     ) : (
                       <>
-                        <td style={{ whiteSpace: "nowrap" }}>{(item.cpu.utilization * 100).toFixed(1)}%</td>
-                        <td style={{ whiteSpace: "nowrap" }}>
+                        <TableTd style={{ whiteSpace: "nowrap" }}>{(item.cpu.utilization * 100).toFixed(1)}%</TableTd>
+                        <TableTd style={{ whiteSpace: "nowrap" }}>
                           {(item.memory.total ? (item.memory.used / item.memory.total) * 100 : 0).toFixed(1)}%
-                        </td>
+                        </TableTd>
                       </>
                     )}
                   </TableTr>
diff --git a/packages/widgets/src/health-monitoring/component.tsx b/packages/widgets/src/health-monitoring/component.tsx
index 6fff62e24..8aff3c1fa 100644
--- a/packages/widgets/src/health-monitoring/component.tsx
+++ b/packages/widgets/src/health-monitoring/component.tsx
@@ -8,6 +8,7 @@ import { clientApi } from "@homarr/api/client";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { ClusterHealthMonitoring } from "./cluster/cluster-health";
 import { partitionHealthMonitoringIntegrations } from "./integration-selection";
 import { SystemHealthMonitoring } from "./system-health";
@@ -15,7 +16,7 @@ import { SystemHealthMonitoring } from "./system-health";
 dayjs.extend(duration);
 
 export default function HealthMonitoringWidget(props: WidgetComponentProps<"healthMonitoring">) {
-  const { data: integrations = [] } = clientApi.integration.byIds.useQuery(props.integrationIds);
+  const integrations = getUsableWidgetQueryData(clientApi.integration.byIds.useQuery(props.integrationIds)) ?? [];
   const t = useI18n();
 
   const { clusterIntegrationIds, systemIntegrationIds } = partitionHealthMonitoringIntegrations(integrations);
diff --git a/packages/widgets/src/health-monitoring/system-health.tsx b/packages/widgets/src/health-monitoring/system-health.tsx
index 81989a1a5..f8cfafda0 100644
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -41,6 +41,7 @@ import { useI18n } from "@homarr/translation/client";
 
 import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { WidgetEmptyState } from "../common/empty-state";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import type { WidgetComponentProps } from "../definition";
 import actionTargetClasses from "../common/action-target.module.css";
 import { CpuRing } from "./rings/cpu-ring";
@@ -59,9 +60,9 @@ export const SystemHealthMonitoring = ({
   withScrollArea = true,
 }: WidgetComponentProps<"healthMonitoring"> & { withScrollArea?: boolean }) => {
   const t = useI18n();
-  const { data: healthData = [] } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({
-    integrationIds,
-  });
+  const healthData =
+    getUsableWidgetQueryData(clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds })) ??
+    [];
   const [openedIntegrationId, setOpenedIntegrationId] = useState<string | null>(null);
   const board = useRequiredBoard();
 
diff --git a/packages/widgets/src/iframe/component.tsx b/packages/widgets/src/iframe/component.tsx
index 96cf210b7..7dce2c91b 100644
--- a/packages/widgets/src/iframe/component.tsx
+++ b/packages/widgets/src/iframe/component.tsx
@@ -1,43 +1,35 @@
 "use client";
 
-import { Anchor, Box, Group, Stack, Text, Title } from "@mantine/core";
+import { Box, Stack, Text, Title } from "@mantine/core";
 import { IconBrowserOff, IconProtocol } from "@tabler/icons-react";
 
 import { objectEntries } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl } from "../common/application-url";
 import classes from "./component.module.css";
 
-export default function IFrameWidget({ options, isEditMode, displayMode }: WidgetComponentProps<"iframe">) {
+export default function IFrameWidget({ options, isEditMode }: WidgetComponentProps<"iframe">) {
   const t = useI18n();
   const { embedUrl, allowScrolling, ...permissions } = options;
+  const safeEmbedUrl = getSafeApplicationUrl(embedUrl);
   const allowedPermissions = getAllowedPermissions(permissions);
   const sandboxFlags = getSandboxFlags(permissions);
 
   if (embedUrl.trim() === "") return <NoUrl />;
-  if (!isSupportedProtocol(embedUrl)) {
+  if (!safeEmbedUrl) {
     return <UnsupportedProtocol />;
   }
 
   return (
     <Stack h="100%" w="100%" gap={0}>
-      {displayMode === "advanced" && (
-        <Group key="advanced-header" px="xs" py={4} wrap="nowrap" justify="space-between">
-          <Text size="xs" c="dimmed" truncate>
-            {getFrameTitle(embedUrl)}
-          </Text>
-          <Anchor href={embedUrl} target="_blank" rel="noreferrer" size="xs">
-            {t("widget.app.option.openInNewTab.label")}
-          </Anchor>
-        </Group>
-      )}
-      <Box key="frame" style={{ flex: 1, minHeight: 0 }}>
+      <Box style={{ flex: 1, minHeight: 0 }}>
         <iframe
           style={isEditMode ? { userSelect: "none", pointerEvents: "none" } : undefined}
           className={classes.iframe}
-          src={embedUrl}
-          title={getFrameTitle(embedUrl)}
+          src={safeEmbedUrl}
+          title={getFrameTitle(safeEmbedUrl)}
           allow={allowedPermissions}
           scrolling={allowScrolling ? "yes" : "no"}
           sandbox={sandboxFlags.join(" ")}
@@ -52,12 +44,7 @@ export default function IFrameWidget({ options, isEditMode, displayMode }: Widge
 const supportedProtocols = ["http", "https"];
 
 export const isSupportedProtocol = (url: string) => {
-  try {
-    const parsedUrl = new URL(url);
-    return supportedProtocols.map((protocol) => `${protocol}:`).includes(`${parsedUrl.protocol}`);
-  } catch {
-    return false;
-  }
+  return getSafeApplicationUrl(url) !== undefined;
 };
 
 const NoUrl = () => {
diff --git a/packages/widgets/src/iframe/index.ts b/packages/widgets/src/iframe/index.ts
index d4313aebe..fb30b51ea 100644
--- a/packages/widgets/src/iframe/index.ts
+++ b/packages/widgets/src/iframe/index.ts
@@ -1,23 +1,39 @@
-import { IconBrowser } from "@tabler/icons-react";
+import { IconBrowser, IconExternalLink } from "@tabler/icons-react";
 
 import { createWidgetDefinition } from "../definition";
+import { getSafeApplicationUrl } from "../common/application-url";
 import { optionsBuilder } from "../options";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    embedUrl: factory.text(),
+    allowFullScreen: factory.switch(),
+    allowScrolling: factory.switch({
+      defaultValue: true,
+    }),
+    allowPayment: factory.switch(),
+    allowAutoPlay: factory.switch(),
+    allowMicrophone: factory.switch(),
+    allowCamera: factory.switch(),
+    allowGeolocation: factory.switch(),
+    allowModals: factory.switch(),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("iframe", {
+  supportsAdvancedFocus: false,
   icon: IconBrowser,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      embedUrl: factory.text(),
-      allowFullScreen: factory.switch(),
-      allowScrolling: factory.switch({
-        defaultValue: true,
-      }),
-      allowPayment: factory.switch(),
-      allowAutoPlay: factory.switch(),
-      allowMicrophone: factory.switch(),
-      allowCamera: factory.switch(),
-      allowGeolocation: factory.switch(),
-      allowModals: factory.switch(),
-    }));
+  contextActions: ({ options }) => {
+    const embedUrl = getSafeApplicationUrl(options.embedUrl);
+    return embedUrl
+      ? [
+          {
+            key: "open-iframe",
+            label: "widget.app.option.openInNewTab.label",
+            icon: IconExternalLink,
+            onClick: () => window.open(embedUrl, "_blank", "noopener,noreferrer"),
+          },
+        ]
+      : [];
   },
+  createOptions,
 }).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/immich/album-carousel/component.tsx b/packages/widgets/src/immich/album-carousel/component.tsx
index 61c8c57e2..a0bb5f416 100644
--- a/packages/widgets/src/immich/album-carousel/component.tsx
+++ b/packages/widgets/src/immich/album-carousel/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import type { Dispatch, SetStateAction } from "react";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { ActionIcon, Box, Center, Group, Image, ScrollArea, Stack, Text, UnstyledButton } from "@mantine/core";
 import { useReducedMotion } from "@mantine/hooks";
 import {
@@ -18,6 +18,8 @@ import { useCurrentIntlLocale, useI18n, useScopedI18n } from "@homarr/translatio
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
+import { useWidgetRuntimeActions } from "../../runtime-hooks";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import classes from "./component.module.css";
 import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 
@@ -25,17 +27,19 @@ export default function ImmichAlbumCarouselWidget({
   integrationIds,
   options,
   displayMode = "compact",
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"immich-albumCarousel">) {
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
   const [paused, setPaused] = useState(false);
 
-  const { data: album } = clientApi.widget.immich.getAlbum.useQuery(
-    {
-      integrationId: integrationIds[0] ?? "",
-      albumId: options.albumId && options.albumId !== ALL_PHOTOS_ALBUM_ID ? options.albumId : undefined,
-    },
-    { enabled: integrationIds.length > 0 },
+  const album = getUsableWidgetQueryData(
+    clientApi.widget.immich.getAlbum.useQuery(
+      {
+        integrationId: integrationIds[0] ?? "",
+        albumId: options.albumId && options.albumId !== ALL_PHOTOS_ALBUM_ID ? options.albumId : undefined,
+      },
+      { enabled: integrationIds.length > 0 },
+    ),
   );
 
   const photoAssets = useMemo(() => {
@@ -48,30 +52,19 @@ export default function ImmichAlbumCarouselWidget({
     setCurrentPhotoIndex((current) => Math.min(current, photoAssets.length - 1));
   }, [photoAssets.length]);
 
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    const clearActions = () => {
-      if (!widgetStateRef.current) return;
-      delete widgetStateRef.current.previousPhoto;
-      delete widgetStateRef.current.nextPhoto;
-      delete widgetStateRef.current.toggleSlideshow;
-    };
-    if (photoAssets.length <= 1) {
-      clearActions();
-      return;
-    }
-    const previousPhoto = () =>
-      setCurrentPhotoIndex((current) => (current - 1 + photoAssets.length) % photoAssets.length);
-    const nextPhoto = () => setCurrentPhotoIndex((current) => (current + 1) % photoAssets.length);
-    const toggleSlideshow = () => setPaused((value) => !value);
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      previousPhoto,
-      nextPhoto,
-      toggleSlideshow,
-    };
-    return clearActions;
-  }, [photoAssets.length, widgetStateRef]);
+  const previousPhoto = useCallback(
+    () => setCurrentPhotoIndex((current) => (current - 1 + photoAssets.length) % photoAssets.length),
+    [photoAssets.length],
+  );
+  const nextPhoto = useCallback(
+    () => setCurrentPhotoIndex((current) => (current + 1) % photoAssets.length),
+    [photoAssets.length],
+  );
+  const toggleSlideshow = useCallback(() => setPaused((value) => !value), []);
+  useWidgetRuntimeActions(
+    widgetRuntimeRef,
+    photoAssets.length > 1 ? { previousPhoto, nextPhoto, toggleSlideshow } : {},
+  );
 
   if (!album) return <WidgetEmptyState />;
 
diff --git a/packages/widgets/src/immich/album-carousel/index.ts b/packages/widgets/src/immich/album-carousel/index.ts
index eeb0d611a..f18585280 100644
--- a/packages/widgets/src/immich/album-carousel/index.ts
+++ b/packages/widgets/src/immich/album-carousel/index.ts
@@ -8,6 +8,47 @@ import { createWidgetDefinition, widgetQueryInputMatches } from "../../definitio
 import { optionsBuilder } from "../../options";
 import { ALL_PHOTOS_ALBUM_ID } from "./constants";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    albumId: factory.integrationSelect({
+      defaultValue: ALL_PHOTOS_ALBUM_ID,
+      withDescription: true,
+      clearable: true,
+      useOptions: (integrationIds: string[]) => {
+        const t = useScopedI18n("widget.immich-albumCarousel");
+        const {
+          data = [],
+          isPending,
+          isError,
+        } = clientApi.widget.immich.getAlbums.useQuery(
+          { integrationId: integrationIds[0] ?? "" },
+          { enabled: integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
+        );
+        return {
+          data: [
+            { value: ALL_PHOTOS_ALBUM_ID, label: t("allPhotos") },
+            ...data.map((album) => ({ value: album.id, label: album.albumName })),
+          ],
+          isPending,
+          isError,
+        };
+      },
+    }),
+    rotationIntervalSeconds: factory.number({
+      defaultValue: 5,
+      validate: z.number().min(1).max(3600),
+      withDescription: true,
+    }),
+    showPhotoInfo: factory.switch({
+      defaultValue: false,
+      withDescription: true,
+    }),
+    randomizePhotos: factory.switch({
+      defaultValue: false,
+      withDescription: true,
+    }),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
   icon: IconPhoto,
   queryKey: [["widget", "immich", "getAlbum"]],
@@ -23,75 +64,31 @@ export const { definition, componentLoader } = createWidgetDefinition("immich-al
   supportedIntegrations: ["immich"],
   integrationsRequired: true,
   maxIntegrations: 1,
-  contextActions({ widgetStateRef }) {
-    const call = (key: string) => () => {
-      const action = widgetStateRef?.current?.[key];
-      if (typeof action === "function") action();
-    };
-    const disabled = (key: string) => typeof widgetStateRef?.current?.[key] !== "function";
+  contextActions: ({ widgetRuntimeRef }) => {
+    const actions = widgetRuntimeRef.current.actions;
     return [
       {
         key: "previousPhoto",
-        label: (t) => t("widget.immich-albumCarousel.actions.previousPhoto"),
+        label: "widget.immich-albumCarousel.actions.previousPhoto",
         icon: IconChevronLeft,
-        disabled: disabled("previousPhoto"),
-        onClick: call("previousPhoto"),
+        disabled: typeof actions.previousPhoto !== "function",
+        onClick: () => actions.previousPhoto?.(),
       },
       {
         key: "nextPhoto",
-        label: (t) => t("widget.immich-albumCarousel.actions.nextPhoto"),
+        label: "widget.immich-albumCarousel.actions.nextPhoto",
         icon: IconChevronRight,
-        disabled: disabled("nextPhoto"),
-        onClick: call("nextPhoto"),
+        disabled: typeof actions.nextPhoto !== "function",
+        onClick: () => actions.nextPhoto?.(),
       },
       {
         key: "toggleSlideshow",
-        label: (t) => t("widget.immich-albumCarousel.actions.toggleSlideshow"),
+        label: "widget.immich-albumCarousel.actions.toggleSlideshow",
         icon: IconPlayerPause,
-        disabled: disabled("toggleSlideshow"),
-        onClick: call("toggleSlideshow"),
+        disabled: typeof actions.toggleSlideshow !== "function",
+        onClick: () => actions.toggleSlideshow?.(),
       },
     ];
   },
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      albumId: factory.integrationSelect({
-        defaultValue: ALL_PHOTOS_ALBUM_ID,
-        withDescription: true,
-        clearable: true,
-        useOptions: (integrationIds: string[]) => {
-          const t = useScopedI18n("widget.immich-albumCarousel");
-          const {
-            data = [],
-            isPending,
-            isError,
-          } = clientApi.widget.immich.getAlbums.useQuery(
-            { integrationId: integrationIds[0] ?? "" },
-            { enabled: integrationIds.length > 0, staleTime: 15 * 60 * 1000 },
-          );
-          return {
-            data: [
-              { value: ALL_PHOTOS_ALBUM_ID, label: t("allPhotos") },
-              ...data.map((album) => ({ value: album.id, label: album.albumName })),
-            ],
-            isPending,
-            isError,
-          };
-        },
-      }),
-      rotationIntervalSeconds: factory.number({
-        defaultValue: 5,
-        validate: z.number().min(1).max(3600),
-        withDescription: true,
-      }),
-      showPhotoInfo: factory.switch({
-        defaultValue: false,
-        withDescription: true,
-      }),
-      randomizePhotos: factory.switch({
-        defaultValue: false,
-        withDescription: true,
-      }),
-    }));
-  },
+  createOptions,
 }).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/immich/albums-query.spec.ts b/packages/widgets/src/immich/albums-query.spec.ts
index c52187716..85faa58bc 100644
--- a/packages/widgets/src/immich/albums-query.spec.ts
+++ b/packages/widgets/src/immich/albums-query.spec.ts
@@ -1,4 +1,9 @@
-import { beforeEach, describe, expect, test, vi } from "vitest";
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 
 import type { WidgetComponentProps } from "../definition";
 import ImmichServerStatsWidget from "./server-stats/component";
@@ -33,20 +38,52 @@ vi.mock("@homarr/translation/client", () => ({
 }));
 
 describe("Immich album queries", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
   beforeEach(() => vi.clearAllMocks());
 
-  test("server stats requests a bounded album response", () => {
-    ImmichServerStatsWidget({
-      integrationIds: ["immich-id"],
-      options: { showUsers: true, showPhotos: true, showVideos: true, showStorage: true },
-      displayMode: "advanced",
-      width: 800,
-      height: 600,
-      isEditMode: false,
-      boardId: "board-id",
-      itemId: "item-id",
-      setOptions: vi.fn(),
-    } satisfies WidgetComponentProps<"immich-serverStats">);
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("server stats requests a bounded album response", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => undefined,
+      removeListener: () => undefined,
+      addEventListener: () => undefined,
+      removeEventListener: () => undefined,
+      dispatchEvent: () => false,
+    }));
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    await act(async () =>
+      root?.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(ImmichServerStatsWidget, {
+            integrationIds: ["immich-id"],
+            options: { showUsers: true, showPhotos: true, showVideos: true, showStorage: true },
+            displayMode: "advanced",
+            width: 800,
+            height: 600,
+            isEditMode: false,
+            boardId: "board-id",
+            itemId: "item-id",
+            setOptions: vi.fn(),
+          } satisfies WidgetComponentProps<"immich-serverStats">),
+        ),
+      ),
+    );
 
     expect(mocks.getAlbums).toHaveBeenCalledWith(
       { integrationId: "immich-id", limit: 50 },
diff --git a/packages/widgets/src/immich/server-stats/component.module.css b/packages/widgets/src/immich/server-stats/component.module.css
index 66608badc..6ef6260c4 100644
--- a/packages/widgets/src/immich/server-stats/component.module.css
+++ b/packages/widgets/src/immich/server-stats/component.module.css
@@ -2,11 +2,6 @@
   padding: 12px;
   border-radius: var(--mantine-radius-md);
   background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-  transition: all 0.2s ease;
-
-  &:hover {
-    background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
-  }
 }
 
 .statItemDense {
diff --git a/packages/widgets/src/immich/server-stats/component.tsx b/packages/widgets/src/immich/server-stats/component.tsx
index 9a09ffb3a..8f58fb108 100644
--- a/packages/widgets/src/immich/server-stats/component.tsx
+++ b/packages/widgets/src/immich/server-stats/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Group, Progress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
+import { Box, Center, Group, Progress, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconDatabase, IconPhoto, IconUsers, IconVideo } from "@tabler/icons-react";
 import { getQueryKey } from "@trpc/react-query";
 
@@ -11,7 +11,9 @@ import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
 import type { WidgetComponentProps } from "../../definition";
-import { setWidgetRuntimeQueries } from "../../definition";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../../common/query-state-indicator";
+import { useWidgetRuntimeQueries } from "../../runtime-hooks";
 import classes from "./component.module.css";
 
 const MAX_ADVANCED_ALBUMS = 50;
@@ -22,7 +24,7 @@ export default function ImmichServerStatsWidget({
   displayMode = "compact",
   width,
   height,
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"immich-serverStats">) {
   const t = useI18n();
   const locale = useCurrentIntlLocale();
@@ -30,16 +32,19 @@ export default function ImmichServerStatsWidget({
   const albumsInput = { ...input, limit: MAX_ADVANCED_ALBUMS };
   const isAdvanced = displayMode === "advanced";
   const albumsEnabled = isAdvanced && integrationIds.length > 0;
-  const { data: stats } = clientApi.widget.immich.getServerStats.useQuery(input);
-  const { data: albums = [] } = clientApi.widget.immich.getAlbums.useQuery(albumsInput, {
+  const statsQuery = clientApi.widget.immich.getServerStats.useQuery(input);
+  const stats = getUsableWidgetQueryData(statsQuery);
+  const albumsQuery = clientApi.widget.immich.getAlbums.useQuery(albumsInput, {
     enabled: albumsEnabled,
     staleTime: 15 * 60 * 1000,
   });
-  setWidgetRuntimeQueries(widgetStateRef, [
+  const albums = albumsQuery.data ?? [];
+  useWidgetRuntimeQueries(widgetRuntimeRef, [
     getQueryKey(clientApi.widget.immich.getServerStats, input, "query"),
     ...(albumsEnabled ? [getQueryKey(clientApi.widget.immich.getAlbums, albumsInput, "query")] : []),
   ]);
 
+  if (isInitialWidgetQueryPending(statsQuery)) return <WidgetQueryLoadingState />;
   if (!stats) return <WidgetEmptyState />;
 
   const statCount =
@@ -85,8 +90,13 @@ export default function ImmichServerStatsWidget({
 
   if (!isAdvanced) {
     return (
-      <Stack gap="md" h="100%" p={statsLayout.dense ? "xs" : "md"} justify="center">
+      <Stack gap="md" h="100%" p={statsLayout.dense ? "xs" : "md"} justify="center" pos="relative">
         {statsContent}
+        {statsQuery.error && (
+          <Box pos="absolute" top={4} right={4}>
+            <WidgetQueryErrorIndicator error={statsQuery.error} label={t("widget.immich-serverStats.name")} />
+          </Box>
+        )}
       </Stack>
     );
   }
@@ -96,25 +106,41 @@ export default function ImmichServerStatsWidget({
   return (
     <Stack gap="lg" h="100%" p="lg">
       {statsContent}
-      <Text size="xs" c="dimmed">
-        {t("widget.immich-serverStats.albumLimit", { count: MAX_ADVANCED_ALBUMS })}
-      </Text>
+      <Group justify="space-between" wrap="nowrap">
+        <Text size="xs" c="dimmed">
+          {t("widget.immich-serverStats.albumLimit", { count: MAX_ADVANCED_ALBUMS })}
+        </Text>
+        <WidgetQueryErrorIndicator
+          error={statsQuery.error ?? albumsQuery.error}
+          label={t("widget.immich-serverStats.name")}
+        />
+      </Group>
       <ScrollArea style={{ flex: 1, minHeight: 0 }}>
-        <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="xs">
-          {sortedAlbums.map((album) => (
-            <Stack key={album.id} gap={4} p="xs">
-              <Group justify="space-between" wrap="nowrap">
-                <Text size="sm" fw={600} truncate>
-                  {album.albumName}
-                </Text>
-                <Text size="xs" c="dimmed">
-                  {album.assetCount.toLocaleString(locale)}
-                </Text>
-              </Group>
-              <Progress value={(album.assetCount / Math.max(maxAssets, 1)) * 100} size="sm" />
-            </Stack>
-          ))}
-        </SimpleGrid>
+        {isInitialWidgetQueryPending(albumsQuery) ? (
+          <WidgetQueryLoadingState />
+        ) : albumsQuery.error && albumsQuery.data === undefined ? (
+          <Center h="100%" p="md">
+            <WidgetQueryErrorIndicator error={albumsQuery.error} label={t("widget.immich-serverStats.name")} />
+          </Center>
+        ) : albums.length === 0 ? (
+          <WidgetEmptyState />
+        ) : (
+          <SimpleGrid cols={width >= 900 ? 2 : 1} spacing="xs">
+            {sortedAlbums.map((album) => (
+              <Stack key={album.id} gap={4} p="xs">
+                <Group justify="space-between" wrap="nowrap">
+                  <Text size="sm" fw={600} truncate>
+                    {album.albumName}
+                  </Text>
+                  <Text size="xs" c="dimmed">
+                    {album.assetCount.toLocaleString(locale)}
+                  </Text>
+                </Group>
+                <Progress value={(album.assetCount / Math.max(maxAssets, 1)) * 100} size="sm" />
+              </Stack>
+            ))}
+          </SimpleGrid>
+        )}
       </ScrollArea>
     </Stack>
   );
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index 6b420f413..4ab6ccb4d 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -73,8 +73,12 @@ export type {
   WidgetOptionsSettings,
   WidgetQueryMatcher,
   WidgetQueryMatcherScope,
+  WidgetRuntimeActions,
+  WidgetRuntimeRef,
+  WidgetRuntimeState,
 } from "./definition";
 export {
+  createWidgetRuntimeState,
   getWidgetQueryKeys,
   getWidgetRuntimeQueries,
   normalizeWidgetQuery,
diff --git a/packages/widgets/src/indexer-manager/component.module.css b/packages/widgets/src/indexer-manager/component.module.css
index b6473e5a1..a2ffdd407 100644
--- a/packages/widgets/src/indexer-manager/component.module.css
+++ b/packages/widgets/src/indexer-manager/component.module.css
@@ -35,10 +35,23 @@
   }
 }
 
+.indexerLink {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  min-width: 0;
+  flex: 1;
+}
+
 @media (any-pointer: coarse) {
   .testAction {
     opacity: 1;
   }
+
+  .indexerRow {
+    min-height: 44px;
+    padding-block: 8px;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/packages/widgets/src/indexer-manager/component.tsx b/packages/widgets/src/indexer-manager/component.tsx
index a47abc3dc..54758dfe3 100644
--- a/packages/widgets/src/indexer-manager/component.tsx
+++ b/packages/widgets/src/indexer-manager/component.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { ActionIcon, Anchor, Badge, Card, Flex, Group, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
 import combineClasses from "clsx";
@@ -10,6 +10,9 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { useWidgetRuntimeActions } from "../runtime-hooks";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import actionTargetClasses from "../common/action-target.module.css";
 import classes from "./component.module.css";
 
@@ -18,36 +21,27 @@ export default function IndexerManagerWidget({
   integrationIds,
   width,
   height,
-  displayMode,
   isEditMode,
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"indexerManager">) {
   const t = useI18n();
-  const { data: indexersData = [] } = clientApi.widget.indexerManager.getIndexersStatus.useQuery({ integrationIds });
+  const indexersData =
+    getUsableWidgetQueryData(clientApi.widget.indexerManager.getIndexersStatus.useQuery({ integrationIds })) ?? [];
 
   const utils = clientApi.useUtils();
   const { mutate: testAll, isPending } = clientApi.widget.indexerManager.testAllIndexers.useMutation({
     onSettled: () => void utils.widget.indexerManager.getIndexersStatus.invalidate(),
   });
   const board = useRequiredBoard();
-  const isAdvanced = displayMode === "advanced";
-  const hasSmallWidth = !isAdvanced && width < 256;
-  const isDense = !isAdvanced && (width < 280 || height < 180);
+  const hasSmallWidth = width < 256;
+  const isDense = width < 280 || height < 180;
+  const showHealthCounts = width >= 200 && height >= 100;
   const allIndexers = useMemo(() => indexersData.flatMap((entry) => entry.indexers), [indexersData]);
   const unavailableCount = allIndexers.filter(
     (indexer) => indexer.status === false || indexer.enabled === false,
   ).length;
 
-  useEffect(() => {
-    if (!widgetStateRef) return;
-    widgetStateRef.current = {
-      ...widgetStateRef.current,
-      testAllIndexers: () => testAll({ integrationIds }),
-    };
-    return () => {
-      if (widgetStateRef.current) delete widgetStateRef.current.testAllIndexers;
-    };
-  }, [integrationIds, testAll, widgetStateRef]);
+  useWidgetRuntimeActions(widgetRuntimeRef, { testAllIndexers: () => testAll({ integrationIds }) });
 
   return (
     <Flex
@@ -70,7 +64,7 @@ export default function IndexerManagerWidget({
             {t("widget.indexerManager.title")}
           </Text>
         )}
-        {isAdvanced && (
+        {showHealthCounts && (
           <Group gap={4} wrap="nowrap">
             <Badge size="xs" color="green" variant="light">
               {allIndexers.length - unavailableCount}
@@ -110,64 +104,61 @@ export default function IndexerManagerWidget({
         <ScrollArea className="indexer-manager-list-scroll-area" h="100%" scrollbars="y">
           {indexersData.map(({ integrationId, integrationName, indexers, error }) => (
             <Stack gap={4} className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
-              {(isAdvanced || indexersData.length > 1) && (
+              {indexersData.length > 1 && (
                 <Group justify="space-between" wrap="nowrap" py={4}>
                   <Text size="xs" fw={600} truncate="end">
                     {integrationName}
                   </Text>
                   {error && (
-                    <Tooltip label={error} multiline maw={360}>
-                      <Badge size="xs" color="red" variant="light">
-                        {t("common.error")}
-                      </Badge>
-                    </Tooltip>
+                    <Badge size="xs" color="red" variant="light">
+                      {t("common.error")}
+                    </Badge>
                   )}
                 </Group>
               )}
-              {indexers.map((indexer) => (
-                <Group
-                  className={`indexer-manager-line indexer-manager-${indexer.name} ${classes.indexerRow}`}
-                  key={indexer.id}
-                  justify="space-between"
-                  gap="xs"
-                  wrap="nowrap"
-                >
-                  <Anchor
-                    className="indexer-manager-line-anchor"
-                    href={indexer.url}
-                    target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
-                    rel={options.openIndexerSiteInNewTab ? "noopener noreferrer" : undefined}
-                    style={{ minWidth: 0, flex: 1 }}
+              {indexers.map((indexer) => {
+                const href = getSafeApplicationUrl(indexer.url);
+                return (
+                  <Group
+                    className={`indexer-manager-line indexer-manager-${indexer.name} ${classes.indexerRow}`}
+                    key={indexer.id}
+                    justify="space-between"
+                    gap="xs"
+                    wrap="nowrap"
                   >
-                    <Text
-                      className="indexer-manager-line-anchor-text"
-                      c="dimmed"
-                      size={hasSmallWidth ? "xs" : "sm"}
-                      truncate="end"
+                    <Anchor
+                      className={combineClasses("indexer-manager-line-anchor", classes.indexerLink)}
+                      component={href ? "a" : "span"}
+                      href={href}
+                      target={href ? (options.openIndexerSiteInNewTab ? "_blank" : "_self") : undefined}
+                      rel={href && options.openIndexerSiteInNewTab ? SAFE_NEW_TAB_REL : undefined}
+                      title={href}
                     >
-                      {indexer.name}
-                    </Text>
-                  </Anchor>
-                  {isAdvanced && (
-                    <Text size="xs" c="dimmed" truncate="end" style={{ flex: 1 }}>
-                      {indexer.url}
-                    </Text>
-                  )}
-                  {indexer.status === false || indexer.enabled === false ? (
-                    <IconCircleX
-                      className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
-                      color="#d9534f"
-                      size={hasSmallWidth ? 12 : 16}
-                    />
-                  ) : (
-                    <IconCircleCheck
-                      className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
-                      color="#2ecc71"
-                      size={hasSmallWidth ? 12 : 16}
-                    />
-                  )}
-                </Group>
-              ))}
+                      <Text
+                        className="indexer-manager-line-anchor-text"
+                        c="dimmed"
+                        size={hasSmallWidth ? "xs" : "sm"}
+                        truncate="end"
+                      >
+                        {indexer.name}
+                      </Text>
+                    </Anchor>
+                    {indexer.status === false || indexer.enabled === false ? (
+                      <IconCircleX
+                        className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
+                        color="var(--mantine-color-red-6)"
+                        size={hasSmallWidth ? 12 : 16}
+                      />
+                    ) : (
+                      <IconCircleCheck
+                        className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
+                        color="var(--mantine-color-green-6)"
+                        size={hasSmallWidth ? 12 : 16}
+                      />
+                    )}
+                  </Group>
+                );
+              })}
             </Stack>
           ))}
         </ScrollArea>
diff --git a/packages/widgets/src/indexer-manager/index.ts b/packages/widgets/src/indexer-manager/index.ts
index 861d1b7f8..c61bd84c1 100644
--- a/packages/widgets/src/indexer-manager/index.ts
+++ b/packages/widgets/src/indexer-manager/index.ts
@@ -5,31 +5,32 @@ import { getIntegrationKindsByCategory } from "@homarr/definitions";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    openIndexerSiteInNewTab: factory.switch({
+      defaultValue: true,
+    }),
+  }));
+
 export const { definition, componentLoader } = createWidgetDefinition("indexerManager", {
+  supportsAdvancedFocus: false,
   icon: IconReportSearch,
-  contextActions: ({ widgetStateRef, context }) => [
+  contextActions: ({ widgetRuntimeRef, context }) => [
     {
       key: "test-all-indexers",
-      label: (t) => t("widget.indexerManager.testAll"),
+      label: "widget.indexerManager.testAll",
       icon: IconTestPipe,
       disabled:
         context.isEditMode ||
         !context.canInteractWithSelectedIntegrations ||
-        typeof widgetStateRef?.current?.testAllIndexers !== "function",
+        typeof widgetRuntimeRef.current.actions.testAllIndexers !== "function",
       onClick: () => {
-        const action = widgetStateRef?.current?.testAllIndexers;
-        if (typeof action === "function") action();
+        widgetRuntimeRef.current.actions.testAllIndexers?.();
       },
     },
   ],
   refetchInterval: null,
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      openIndexerSiteInNewTab: factory.switch({
-        defaultValue: true,
-      }),
-    }));
-  },
+  createOptions,
   supportedIntegrations: getIntegrationKindsByCategory("indexerManager"),
   errors: {
     INTERNAL_SERVER_ERROR: {
diff --git a/packages/widgets/src/media-missing/component.tsx b/packages/widgets/src/media-missing/component.tsx
index b170b9061..be7366f3a 100644
--- a/packages/widgets/src/media-missing/component.tsx
+++ b/packages/widgets/src/media-missing/component.tsx
@@ -26,8 +26,10 @@ import type { MissingMediaItem, QueuedMediaItem } from "@homarr/integrations/typ
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
 import type { MediaMissingTab } from "./tabs";
@@ -39,18 +41,20 @@ export default function MediaMissingWidget({
   width,
   height,
   displayMode,
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"mediaMissing">) {
   const t = useScopedI18n("widget.mediaMissing");
   const isAdvanced = displayMode === "advanced";
   const pageSize = isAdvanced ? Math.max(Number(options.pageSize), 50) : Number(options.pageSize);
   const input = { integrationIds, pageSize };
-  setWidgetRuntimeQueries(widgetStateRef, [getQueryKey(clientApi.widget.mediaOrganizer.getData, input, "query")]);
-  const { data } = clientApi.widget.mediaOrganizer.getData.useQuery(input, {
-    staleTime: 60 * 1000,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  });
+  useWidgetRuntimeQueries(widgetRuntimeRef, [getQueryKey(clientApi.widget.mediaOrganizer.getData, input, "query")]);
+  const data = getUsableWidgetQueryData(
+    clientApi.widget.mediaOrganizer.getData.useQuery(input, {
+      staleTime: 60 * 1000,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    }),
+  );
   const [selectedTab, setSelectedTab] = useState<MediaMissingTab>(options.showMissing ? "missing" : "queued");
   const activeTab = resolveMediaMissingTab(selectedTab, options.showMissing, options.showQueued);
 
@@ -109,7 +113,7 @@ export default function MediaMissingWidget({
   const partialFailures = failedIntegrations.length > 0 && (
     <Group gap={4} p={4} wrap="wrap">
       {failedIntegrations.map((entry) => (
-        <Tooltip key={entry.integrationId} label={entry.error} multiline maw={360}>
+        <Tooltip key={entry.integrationId} label={`${entry.integrationName}: ${t("name")}`}>
           <Badge size="xs" color="red" variant="light">
             {entry.integrationName}
           </Badge>
@@ -284,20 +288,23 @@ const CardShell = ({
   item: MissingMediaItem | QueuedMediaItem;
   density: Density;
   children: ReactNode;
-}) => (
-  <Paper
-    className={classes.card}
-    component="a"
-    href={item.link}
-    target="_blank"
-    rel="noreferrer"
-    radius="sm"
-    p="xs"
-    h={CARD_HEIGHT[density]}
-  >
-    <div className={classes.content}>{children}</div>
-  </Paper>
-);
+}) => {
+  const href = getSafeApplicationUrl(item.link);
+  return (
+    <Paper
+      className={classes.card}
+      component={href ? "a" : "div"}
+      href={href}
+      target={href ? "_blank" : undefined}
+      rel={href ? SAFE_NEW_TAB_REL : undefined}
+      radius="sm"
+      p="xs"
+      h={CARD_HEIGHT[density]}
+    >
+      <div className={classes.content}>{children}</div>
+    </Paper>
+  );
+};
 
 const MediaCard = ({ item, density }: { item: MissingMediaItem | QueuedMediaItem; density: Density }) => {
   const isQueued = "percentComplete" in item;
diff --git a/packages/widgets/src/media-releases/component.tsx b/packages/widgets/src/media-releases/component.tsx
index c2ac70573..9893a91fb 100644
--- a/packages/widgets/src/media-releases/component.tsx
+++ b/packages/widgets/src/media-releases/component.tsx
@@ -28,7 +28,11 @@ import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 import { OverflowBadge } from "@homarr/ui";
 
+import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import classes from "./component.module.css";
 
 export default function MediaReleasesWidget({
@@ -38,23 +42,33 @@ export default function MediaReleasesWidget({
   height,
   displayMode,
 }: WidgetComponentProps<"mediaReleases">) {
-  const { data: releases = [] } = clientApi.widget.mediaRelease.getMediaReleases.useQuery({
-    integrationIds,
-  });
+  const t = useI18n();
+  const releasesQuery = clientApi.widget.mediaRelease.getMediaReleases.useQuery({ integrationIds });
+  const releases = getUsableWidgetQueryData(releasesQuery);
+
+  if (isInitialWidgetQueryPending(releasesQuery)) return <WidgetQueryLoadingState />;
+  if (!releases || releases.length === 0) return <WidgetEmptyState />;
 
   const isAdvanced = displayMode === "advanced";
 
   return (
-    <ScrollArea h="100%">
-      <SimpleGrid cols={isAdvanced ? Math.max(1, Math.floor(width / 360)) : 1} p="xs" spacing="sm">
-        {releases.map((item, index) => (
-          <Fragment key={`${item.integration.id}:${item.id}`}>
-            {!isAdvanced && index !== 0 && options.layout === "poster" && <Divider />}
-            <Item item={item} options={options} isAdvanced={isAdvanced} width={width} height={height} />
-          </Fragment>
-        ))}
-      </SimpleGrid>
-    </ScrollArea>
+    <Box h="100%" pos="relative">
+      <ScrollArea h="100%">
+        <SimpleGrid cols={isAdvanced ? Math.max(1, Math.floor(width / 360)) : 1} p="xs" spacing="sm">
+          {releases.map((item, index) => (
+            <Fragment key={`${item.integration.id}:${item.id}`}>
+              {!isAdvanced && index !== 0 && options.layout === "poster" && <Divider />}
+              <Item item={item} options={options} isAdvanced={isAdvanced} width={width} height={height} />
+            </Fragment>
+          ))}
+        </SimpleGrid>
+      </ScrollArea>
+      {releasesQuery.error && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator error={releasesQuery.error} label={t("widget.mediaReleases.name")} />
+        </Box>
+      )}
+    </Box>
   );
 }
 
@@ -86,6 +100,7 @@ const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
   const showPoster = (isAdvanced || options.layout === "poster") && !isTiny;
   const showExtendedMetadata = isAdvanced || (!isCompact && width >= 360);
   const showSide = isAdvanced || (!isTiny && (options.showType || options.showSource));
+  const href = getSafeApplicationUrl(item.href);
 
   return (
     <Tooltip
@@ -102,10 +117,10 @@ const Item = ({ item, options, isAdvanced, width, height }: ItemProps) => {
     >
       <UnstyledButton
         className={classes.item}
-        component="a"
-        href={item.href}
-        target="_blank"
-        rel="noopener noreferrer"
+        component={href ? "a" : "div"}
+        href={href}
+        target={href ? "_blank" : undefined}
+        rel={href ? SAFE_NEW_TAB_REL : undefined}
         pos="relative"
         p={isAdvanced ? "sm" : options.layout === "poster" ? 4 : isTiny ? 4 : 6}
         h="100%"
diff --git a/packages/widgets/src/media-requests/list/component.tsx b/packages/widgets/src/media-requests/list/component.tsx
index 9e2f6537f..92beaf0d0 100644
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -14,6 +14,8 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../../common/application-url";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import actionTargetClasses from "../../common/action-target.module.css";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
@@ -27,25 +29,27 @@ export default function MediaServerWidget({
   options,
   width,
   height,
-  displayMode,
 }: WidgetComponentProps<"mediaRequests-requestList">) {
   const interactIntegrationIds = new Set(
     useIntegrationsWithInteractAccess()
       .filter(({ id }) => integrationIds.includes(id))
       .map(({ id }) => id),
   );
-  const { data: mediaRequestData } = clientApi.widget.mediaRequests.getLatestRequests.useQuery({
-    integrationIds,
-    statuses:
-      options.statusFilter.length > 0
-        ? options.statusFilter
-        : ["pending", "approved", "declined", "failed", "completed"],
-    recentDays: options.recentDays,
-  });
+  const mediaRequestData = getUsableWidgetQueryData(
+    clientApi.widget.mediaRequests.getLatestRequests.useQuery({
+      integrationIds,
+      statuses:
+        options.statusFilter.length > 0
+          ? options.statusFilter
+          : ["pending", "approved", "declined", "failed", "completed"],
+      recentDays: options.recentDays,
+    }),
+  );
 
   if (!mediaRequestData) return <WidgetEmptyState />;
   const { requests: mediaRequests, failedIntegrations } = mediaRequestData;
   if (mediaRequests.length === 0 && failedIntegrations.length === 0) throw new NoIntegrationDataError();
+  const showIntegrationSource = new Set(mediaRequests.map(({ integrationId }) => integrationId)).size > 1;
 
   return (
     <Stack className={searchClasses.searchRoot} gap={0}>
@@ -65,9 +69,9 @@ export default function MediaServerWidget({
             <MediaRequestCard
               key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
               request={mediaRequest}
-              isTiny={displayMode !== "advanced" && (width <= 256 || height < 96)}
-              isDense={displayMode !== "advanced" && (width < 340 || height < 150)}
-              isAdvanced={displayMode === "advanced"}
+              isTiny={width <= 256 || height < 96}
+              isDense={width < 340 || height < 150}
+              showIntegrationSource={showIntegrationSource}
               canInteract={interactIntegrationIds.has(mediaRequest.integrationId)}
               options={options}
             />
@@ -100,14 +104,23 @@ interface MediaRequestCardProps {
   request: RouterOutputs["widget"]["mediaRequests"]["getLatestRequests"]["requests"][number];
   isTiny: boolean;
   isDense: boolean;
-  isAdvanced: boolean;
+  showIntegrationSource: boolean;
   canInteract: boolean;
   options: WidgetComponentProps<"mediaRequests-requestList">["options"];
 }
 
-const MediaRequestCard = ({ request, isTiny, isDense, isAdvanced, canInteract, options }: MediaRequestCardProps) => {
+const MediaRequestCard = ({
+  request,
+  isTiny,
+  isDense,
+  showIntegrationSource,
+  canInteract,
+  options,
+}: MediaRequestCardProps) => {
   const board = useRequiredBoard();
   const t = useScopedI18n("widget.mediaRequests-requestList");
+  const requestHref = getSafeApplicationUrl(request.href);
+  const requestedByHref = getSafeApplicationUrl(request.requestedBy?.link);
 
   return (
     <Card
@@ -148,10 +161,11 @@ const MediaRequestCard = ({ request, isTiny, isDense, isAdvanced, canInteract, o
             <Group gap="xs" justify="space-between" wrap="nowrap" className="mediaRequests-list-item-top-group">
               <Anchor
                 className="mediaRequests-list-item-info-second-line mediaRequests-list-item-media-title"
-                href={request.href}
+                component={requestHref ? "a" : "span"}
+                href={requestHref}
                 c="var(--mantine-color-text)"
-                target={options.linksTargetNewTab ? "_blank" : "_self"}
-                rel={options.linksTargetNewTab ? "noopener noreferrer" : undefined}
+                target={requestHref ? (options.linksTargetNewTab ? "_blank" : "_self") : undefined}
+                rel={requestHref && options.linksTargetNewTab ? SAFE_NEW_TAB_REL : undefined}
                 fz={isTiny ? "xs" : "sm"}
                 fw={600}
                 title={request.name}
@@ -186,7 +200,7 @@ const MediaRequestCard = ({ request, isTiny, isDense, isAdvanced, canInteract, o
                     {t(`availability.${request.availability}`)}
                   </Badge>
                 )}
-                {isAdvanced && (
+                {showIntegrationSource && !isTiny && (
                   <Badge size="xs" variant="outline">
                     {request.integration.name}
                   </Badge>
@@ -201,13 +215,14 @@ const MediaRequestCard = ({ request, isTiny, isDense, isAdvanced, canInteract, o
                   />
                   <Anchor
                     className="mediaRequests-list-item-request-user-name"
-                    href={request.requestedBy?.link}
+                    component={requestedByHref ? "a" : "span"}
+                    href={requestedByHref}
                     c="dimmed"
-                    target={options.linksTargetNewTab ? "_blank" : "_self"}
-                    rel={options.linksTargetNewTab ? "noopener noreferrer" : undefined}
+                    target={requestedByHref ? (options.linksTargetNewTab ? "_blank" : "_self") : undefined}
+                    rel={requestedByHref && options.linksTargetNewTab ? SAFE_NEW_TAB_REL : undefined}
                     fz="xs"
                     truncate="end"
-                    style={{ minWidth: 0, maxWidth: isAdvanced ? 180 : 100 }}
+                    style={{ minWidth: 0, maxWidth: isDense ? 100 : 180 }}
                   >
                     {(request.requestedBy?.displayName ?? "") || "unknown"}
                   </Anchor>
@@ -252,7 +267,7 @@ const DecisionButtons = ({ requestId, integrationId, canInteract, alwaysVisible
       className={`mediaRequests-list-item-pending-buttons ${classes.pendingActions} ${alwaysVisible ? classes.pendingActionsVisible : ""}`}
       gap={4}
       wrap="nowrap"
-      title={error?.message}
+      aria-invalid={Boolean(error)}
     >
       <Tooltip label={t("pending.approve")}>
         <ActionIcon
diff --git a/packages/widgets/src/media-requests/list/index.ts b/packages/widgets/src/media-requests/list/index.ts
index f8f90a10f..8b67f6eed 100644
--- a/packages/widgets/src/media-requests/list/index.ts
+++ b/packages/widgets/src/media-requests/list/index.ts
@@ -8,8 +8,26 @@ import { createWidgetDefinition, widgetQueryInputMatches } from "../../definitio
 import { optionsBuilder } from "../../options";
 
 const mediaRequestStatusValues = ["pending", "approved", "declined", "failed", "completed"] as const;
+const createOptions = () =>
+  optionsBuilder.from((factory) => ({
+    linksTargetNewTab: factory.switch({
+      defaultValue: true,
+    }),
+    statusFilter: factory.multiSelect({
+      defaultValue: [...mediaRequestStatusValues],
+      options: mediaRequestStatusValues.map((value) => ({
+        value,
+        label: (t) => t(`widget.mediaRequests-requestList.status.${value}`),
+      })),
+    }),
+    recentDays: factory.number({
+      validate: z.number().min(0).max(365),
+      defaultValue: 0,
+    }),
+  }));
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestList", {
+  supportsAdvancedFocus: false,
   icon: IconZoomQuestion,
   queryKey: [["widget", "mediaRequests", "getLatestRequests"]],
   queryMatcher: ({ input }, scope) =>
@@ -21,28 +39,11 @@ export const { componentLoader, definition } = createWidgetDefinition("mediaRequ
           : mediaRequestStatusValues,
       recentDays: scope.options.recentDays,
     }),
-  createOptions() {
-    return optionsBuilder.from((factory) => ({
-      linksTargetNewTab: factory.switch({
-        defaultValue: true,
-      }),
-      statusFilter: factory.multiSelect({
-        defaultValue: [...mediaRequestStatusValues],
-        options: mediaRequestStatusValues.map((value) => ({
-          value,
-          label: (t) => t(`widget.mediaRequests-requestList.status.${value}`),
-        })),
-      }),
-      recentDays: factory.number({
-        validate: z.number().min(0).max(365),
-        defaultValue: 0,
-      }),
-    }));
-  },
+  createOptions,
   contextActions: ({ integrationIds }) => [
     {
       key: "search",
-      label: (t) => t("search.mode.media.action.search.label"),
+      label: "search.mode.media.action.search.label",
       icon: IconSearch,
       onClick: () => {
         openMediaRequestSearch({ integrationIds });
diff --git a/packages/widgets/src/media-requests/stats/component.tsx b/packages/widgets/src/media-requests/stats/component.tsx
index c287c32d1..ea96b099f 100644
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -22,6 +22,8 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../../common/empty-state";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../../common/application-url";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 import actionTargetClasses from "../../common/action-target.module.css";
 import { IntegrationErrorIndicator } from "../../common/integration-error-indicator";
 import type { WidgetComponentProps } from "../../definition";
@@ -37,12 +39,9 @@ export default function MediaServerWidget({
   isEditMode,
   width,
   height,
-  displayMode,
 }: WidgetComponentProps<"mediaRequests-requestStats">) {
   const t = useScopedI18n("widget.mediaRequests-requestStats");
-  const { data: requestStats } = clientApi.widget.mediaRequests.getStats.useQuery({
-    integrationIds,
-  });
+  const requestStats = getUsableWidgetQueryData(clientApi.widget.mediaRequests.getStats.useQuery({ integrationIds }));
 
   const board = useRequiredBoard();
 
@@ -97,13 +96,10 @@ export default function MediaServerWidget({
     },
   ] satisfies { name: keyof RequestStats; icon: Icon; number: number }[];
 
-  const isTiny = displayMode !== "advanced" && (width < 256 || height < 180);
-  const showSectionTitles = displayMode === "advanced" || height >= 180;
-  const visibleStats = displayMode === "advanced" ? data : data.slice(0, height < 120 ? 4 : 8);
-  const visibleUsers = requestStats.users.slice(
-    0,
-    displayMode === "advanced" ? 50 : Math.max(1, Math.floor(height / 44) - 3),
-  );
+  const isTiny = width < 256 || height < 180;
+  const showSectionTitles = height >= 180;
+  const visibleStats = data.slice(0, height < 120 ? 4 : 8);
+  const showIntegrationLegend = requestStats.integrations.length > 1 && height >= 240;
 
   return (
     <Box className={searchClasses.searchRoot}>
@@ -118,7 +114,7 @@ export default function MediaServerWidget({
         p="sm"
         align="center"
         justify="space-between"
-        style={{ pointerEvents: isEditMode ? "none" : undefined }}
+        style={{ pointerEvents: isEditMode ? "none" : undefined, overflow: "hidden" }}
       >
         <Stack gap={4} w="100%">
           {showSectionTitles && (
@@ -147,60 +143,63 @@ export default function MediaServerWidget({
             ))}
           </Grid>
         </Stack>
-        <Stack gap={4} w="100%">
+        <Stack gap={4} w="100%" style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
           {showSectionTitles && (
             <Text className="mediaRequests-stats-users-title" fw={600} ta="center" size={isTiny ? "xs" : "sm"}>
               {t("titles.users.main")} ({t("titles.users.requests")})
             </Text>
           )}
-          <ScrollArea className="mediaRequests-stats-users-wrapper" flex={1} w="100%">
+          <ScrollArea className="mediaRequests-stats-users-wrapper" flex={1} mih={0} w="100%">
             <Stack gap={4}>
-              {visibleUsers.map((user) => (
-                <Card
-                  component="a"
-                  href={user.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={combineClasses(
-                    "mediaRequests-stats-users-user-wrapper",
-                    `mediaRequests-stats-users-user-${user.id}`,
-                    classes.card,
-                    classes.userCard,
-                  )}
-                  key={`${user.integration.id}:${user.id}`}
-                  p="xs"
-                  radius={board.itemRadius}
-                >
-                  <Group
-                    className="mediaRequests-stats-users-user-group"
-                    h="100%"
-                    p={0}
-                    gap="sm"
-                    justify="space-between"
+              {requestStats.users.map((user) => {
+                const href = getSafeApplicationUrl(user.link);
+                return (
+                  <Card
+                    component={href ? "a" : "div"}
+                    href={href}
+                    target={href ? "_blank" : undefined}
+                    rel={href ? SAFE_NEW_TAB_REL : undefined}
+                    className={combineClasses(
+                      "mediaRequests-stats-users-user-wrapper",
+                      `mediaRequests-stats-users-user-${user.id}`,
+                      classes.card,
+                      classes.userCard,
+                    )}
+                    key={`${user.integration.id}:${user.id}`}
+                    p="xs"
+                    radius={board.itemRadius}
                   >
-                    <Group gap={4} wrap="nowrap" miw={0}>
-                      <Tooltip label={user.integration.name}>
-                        <Avatar
-                          className="mediaRequests-stats-users-user-avatar"
-                          size={20}
-                          src={user.avatar}
-                          bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
-                        />
-                      </Tooltip>
-                      <Text className="mediaRequests-stats-users-user-userName" size="sm" truncate="end">
-                        {user.displayName}
+                    <Group
+                      className="mediaRequests-stats-users-user-group"
+                      h="100%"
+                      p={0}
+                      gap="sm"
+                      justify="space-between"
+                    >
+                      <Group gap={4} wrap="nowrap" miw={0}>
+                        <Tooltip label={user.integration.name}>
+                          <Avatar
+                            className="mediaRequests-stats-users-user-avatar"
+                            size={20}
+                            src={user.avatar}
+                            bd={`2px solid ${user.integration.kind === "overseerr" ? OVERSEERR_COLOR : JELLYSEERR_COLOR}`}
+                          />
+                        </Tooltip>
+                        <Text className="mediaRequests-stats-users-user-userName" size="sm" truncate="end">
+                          {user.displayName}
+                        </Text>
+                      </Group>
+
+                      <Text className="mediaRequests-stats-users-user-request-count" size="md" fw={500}>
+                        {user.requestCount}
                       </Text>
                     </Group>
-
-                    <Text className="mediaRequests-stats-users-user-request-count" size="md" fw={500}>
-                      {user.requestCount}
-                    </Text>
-                  </Group>
-                </Card>
-              ))}
+                  </Card>
+                );
+              })}
             </Stack>
           </ScrollArea>
-          {displayMode === "advanced" && (
+          {showIntegrationLegend && (
             <Group justify="center" gap={4}>
               {requestStats.integrations.map((integration) => (
                 <Badge key={integration.id} size="xs" variant="light">
diff --git a/packages/widgets/src/media-requests/stats/index.ts b/packages/widgets/src/media-requests/stats/index.ts
index 2f3929877..0c264e78a 100644
--- a/packages/widgets/src/media-requests/stats/index.ts
+++ b/packages/widgets/src/media-requests/stats/index.ts
@@ -5,16 +5,17 @@ import { openMediaRequestSearch } from "@homarr/spotlight";
 
 import { createWidgetDefinition } from "../../definition";
 
+const createOptions = () => ({});
+
 export const { componentLoader, definition } = createWidgetDefinition("mediaRequests-requestStats", {
+  supportsAdvancedFocus: false,
   icon: IconChartBar,
   queryKey: [["widget", "mediaRequests", "getStats"]],
-  createOptions() {
-    return {};
-  },
+  createOptions,
   contextActions: ({ integrationIds }) => [
     {
       key: "search",
-      label: (t) => t("search.mode.media.action.search.label"),
+      label: "search.mode.media.action.search.label",
       icon: IconSearch,
       onClick: () => {
         openMediaRequestSearch({ integrationIds });
diff --git a/packages/widgets/src/media-server/component.tsx b/packages/widgets/src/media-server/component.tsx
index 2d9697aeb..a932091a1 100644
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -25,6 +25,7 @@ import type { TablerIcon } from "@homarr/ui";
 import { useTranslatedMantineReactTable } from "@homarr/ui/hooks";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { IntegrationErrorIndicator } from "../common/integration-error-indicator";
 import classes from "./component.module.css";
 
@@ -63,10 +64,13 @@ export default function MediaServerWidget({
   isEditMode,
   displayMode,
 }: WidgetComponentProps<"mediaServer">) {
-  const { data: currentStreams = [] } = clientApi.widget.mediaServer.getCurrentStreams.useQuery({
-    integrationIds,
-    showOnlyPlaying: options.showOnlyPlaying,
-  });
+  const currentStreams =
+    getUsableWidgetQueryData(
+      clientApi.widget.mediaServer.getCurrentStreams.useQuery({
+        integrationIds,
+        showOnlyPlaying: options.showOnlyPlaying,
+      }),
+    ) ?? [];
 
   const t = useScopedI18n("widget.mediaServer");
   const isAdvanced = displayMode === "advanced";
@@ -149,7 +153,7 @@ export default function MediaServerWidget({
                   value={progressPercent}
                   size={4}
                   color={isPaused ? "yellow" : "green"}
-                  style={{ backgroundColor: "rgba(255, 255, 255, 0.15)" }}
+                  style={{ backgroundColor: "var(--mantine-color-default-border)" }}
                 />
               )}
             </Stack>
diff --git a/packages/widgets/src/media-transcoding/component.tsx b/packages/widgets/src/media-transcoding/component.tsx
index 724ddc05a..eddf8adea 100644
--- a/packages/widgets/src/media-transcoding/component.tsx
+++ b/packages/widgets/src/media-transcoding/component.tsx
@@ -25,7 +25,8 @@ import type { TablerIcon } from "@homarr/ui";
 import { views } from ".";
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { HealthCheckStatus } from "./health-check-status";
 import { QueuePanel } from "./panels/queue.panel";
 import { StatisticsPanel } from "./panels/statistics.panel";
@@ -47,7 +48,7 @@ export default function MediaTranscodingWidget({
   width,
   height,
   displayMode,
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"mediaTranscoding">) {
   const isAdvanced = displayMode === "advanced";
   const queuePageSize = getQueuePageSize(height, isAdvanced);
@@ -62,10 +63,10 @@ export default function MediaTranscodingWidget({
     pageSize: queuePageSize,
     page: requestPagination.page,
   };
-  setWidgetRuntimeQueries(widgetStateRef, [
+  useWidgetRuntimeQueries(widgetRuntimeRef, [
     getQueryKey(clientApi.widget.mediaTranscoding.getDataAsync, input, "query"),
   ]);
-  const { data: transcodingData } = clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input);
+  const transcodingData = getUsableWidgetQueryData(clientApi.widget.mediaTranscoding.getDataAsync.useQuery(input));
 
   const [view, setView] = useState<View>(options.defaultView);
   const t = useI18n("widget.mediaTranscoding");
@@ -92,6 +93,7 @@ export default function MediaTranscodingWidget({
 
   const queuePageCount = totalQueuePages ?? 1;
   const isTiny = !isAdvanced && (width < 280 || height < 140);
+  const footerLayout = getTranscodingFooterLayout(width, height);
 
   if (isAdvanced) {
     return (
@@ -109,8 +111,15 @@ export default function MediaTranscodingWidget({
             </AdvancedPanel>
           </SimpleGrid>
         </ScrollArea>
-        <Group gap="xs" justify="space-between" wrap="nowrap">
-          <Pagination total={queuePageCount} value={queuePage} onChange={handleQueuePageChange} size="xs" />
+        <Group gap="xs" justify={queuePageCount > 1 ? "space-between" : "flex-end"} wrap="nowrap">
+          {queuePageCount > 1 && (
+            <QueuePaginationControls
+              total={queuePageCount}
+              value={queuePage}
+              onChange={handleQueuePageChange}
+              layout={footerLayout}
+            />
+          )}
           <HealthCheckStatus statistics={transcodingData.data.statistics} />
         </Group>
       </Stack>
@@ -127,7 +136,7 @@ export default function MediaTranscodingWidget({
         <StatisticsPanel statistics={transcodingData.data.statistics} />
       )}
       <Divider />
-      <Group gap="xs" mb={4} ms={4} me={8}>
+      <Group gap="xs" mb={4} ms={4} me={8} wrap="nowrap">
         <SegmentedControl
           data={views.map((value) => {
             const Icon = viewIcons[value];
@@ -135,12 +144,12 @@ export default function MediaTranscodingWidget({
               label: (
                 <Center style={{ gap: 4 }}>
                   <Icon size={12} />
-                  {isTiny ? (
-                    <VisuallyHidden>{t(`tab.${value}`)}</VisuallyHidden>
-                  ) : (
+                  {footerLayout.showTabLabels ? (
                     <Text span size="xs">
                       {t(`tab.${value}`)}
                     </Text>
+                  ) : (
+                    <VisuallyHidden>{t(`tab.${value}`)}</VisuallyHidden>
                   )}
                 </Center>
               ),
@@ -155,26 +164,27 @@ export default function MediaTranscodingWidget({
             }
           }}
           size="xs"
+          style={{ minWidth: 0, flexShrink: footerLayout.showTabLabels ? 1 : 0 }}
         />
 
-        <Group gap="xs" ml="auto">
-          {view === "queue" && (
+        <Group gap="xs" ml="auto" wrap="nowrap">
+          {view === "queue" && queuePageCount > 1 && (
             <>
-              <Pagination.Root total={queuePageCount} value={queuePage} onChange={handleQueuePageChange} size="xs">
-                <Group gap={2} justify="center">
-                  {!isTiny && <Pagination.First disabled={queuePage === 1} />}
-                  <Pagination.Previous disabled={queuePage === 1} />
-                  <Pagination.Next disabled={queuePage === queuePageCount} />
-                  {!isTiny && <Pagination.Last disabled={queuePage === queuePageCount} />}
-                </Group>
-              </Pagination.Root>
-              <Text size="xs">
-                {t("currentIndex", {
-                  start: String(transcodingData.data.queue.startIndex + 1),
-                  end: String(transcodingData.data.queue.endIndex + 1),
-                  total: String(transcodingData.data.queue.totalCount),
-                })}
-              </Text>
+              <QueuePaginationControls
+                total={queuePageCount}
+                value={queuePage}
+                onChange={handleQueuePageChange}
+                layout={footerLayout}
+              />
+              {footerLayout.showPageRange && (
+                <Text size="xs" style={{ whiteSpace: "nowrap" }}>
+                  {t("currentIndex", {
+                    start: String(transcodingData.data.queue.startIndex + 1),
+                    end: String(transcodingData.data.queue.endIndex + 1),
+                    total: String(transcodingData.data.queue.totalCount),
+                  })}
+                </Text>
+              )}
             </>
           )}
 
@@ -190,6 +200,32 @@ export const getQueuePageSize = (height: number, isAdvanced: boolean): number =>
   return Math.max(3, Math.min(15, Math.floor((height - 84) / 28)));
 };
 
+export const getTranscodingFooterLayout = (width: number, height: number) => ({
+  showTabLabels: width >= 420 && height >= 160,
+  showPageEdges: width >= 360,
+  showPageItems: width >= 600,
+  showPageRange: width >= 760,
+});
+
+interface QueuePaginationControlsProps {
+  total: number;
+  value: number;
+  onChange: (page: number) => void;
+  layout: ReturnType<typeof getTranscodingFooterLayout>;
+}
+
+const QueuePaginationControls = ({ total, value, onChange, layout }: QueuePaginationControlsProps) => (
+  <Pagination.Root total={total} value={value} onChange={onChange} size="xs">
+    <Group gap={2} justify="center" wrap="nowrap">
+      {layout.showPageEdges && <Pagination.First disabled={value === 1} />}
+      <Pagination.Previous disabled={value === 1} />
+      {layout.showPageItems && <Pagination.Items />}
+      <Pagination.Next disabled={value === total} />
+      {layout.showPageEdges && <Pagination.Last disabled={value === total} />}
+    </Group>
+  </Pagination.Root>
+);
+
 interface QueuePaginationState {
   page: number;
   pageSize: number;
diff --git a/packages/widgets/src/media-transcoding/layout.spec.ts b/packages/widgets/src/media-transcoding/layout.spec.ts
index 44f2d2306..e90a06f51 100644
--- a/packages/widgets/src/media-transcoding/layout.spec.ts
+++ b/packages/widgets/src/media-transcoding/layout.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { getQueuePageSize, resolveQueuePagination } from "./component";
+import { getQueuePageSize, getTranscodingFooterLayout, resolveQueuePagination } from "./component";
 import { toRingProgressSections } from "./panels/statistics.panel";
 
 describe("media transcoding layout", () => {
@@ -14,6 +14,23 @@ describe("media transcoding layout", () => {
     expect(getQueuePageSize(200, true)).toBe(25);
   });
 
+  test("reveals footer detail only as space becomes available", () => {
+    expect(getTranscodingFooterLayout(280, 220)).toEqual({
+      showTabLabels: false,
+      showPageEdges: false,
+      showPageItems: false,
+      showPageRange: false,
+    });
+    expect(getTranscodingFooterLayout(600, 220)).toEqual({
+      showTabLabels: true,
+      showPageEdges: true,
+      showPageItems: true,
+      showPageRange: false,
+    });
+    expect(getTranscodingFooterLayout(760, 220).showPageRange).toBe(true);
+    expect(getTranscodingFooterLayout(760, 120).showTabLabels).toBe(false);
+  });
+
   test("resets the queue when display mode or page size changes", () => {
     const compact = { page: 7, pageSize: 10, isAdvanced: false };
 
diff --git a/packages/widgets/src/minecraft/server-status/component.tsx b/packages/widgets/src/minecraft/server-status/component.tsx
index 303b8f614..39bbfbf06 100644
--- a/packages/widgets/src/minecraft/server-status/component.tsx
+++ b/packages/widgets/src/minecraft/server-status/component.tsx
@@ -14,9 +14,8 @@ export default function MinecraftServerStatusWidget({
   options,
   width,
   height,
-  displayMode,
 }: WidgetComponentProps<"minecraftServerStatus">) {
-  const { data: result, isPending } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
+  const { data: result, isPending, error } = clientApi.widget.minecraft.getServerStatus.useQuery(options);
   const t = useI18n();
 
   if (isPending) {
@@ -28,14 +27,16 @@ export default function MinecraftServerStatusWidget({
       </Flex>
     );
   }
+  if (error && !result) throw error;
   if (!result) return <WidgetEmptyState />;
   const { data } = result;
 
   const title = options.title.trim().length > 0 ? options.title : options.domain;
-  const isAdvanced = displayMode === "advanced";
-  const isDense = !isAdvanced && (width < 220 || height < 120);
-  const showServerIcon = isAdvanced || (!isDense && height >= 144);
-  const iconSize = Math.max(40, Math.min(isAdvanced ? 128 : 80, width * 0.45, height * 0.45));
+  const isDense = width < 220 || height < 120;
+  const showServerIcon = !isDense && height >= 144;
+  const showMetadata = width >= 260 && height >= 180;
+  const showCapacity = width >= 180 && height >= 140;
+  const iconSize = Math.max(40, Math.min(80, width * 0.45, height * 0.45));
   const playerPercent = data.online && data.players.max > 0 ? (data.players.online / data.players.max) * 100 : 0;
 
   return (
@@ -44,7 +45,7 @@ export default function MinecraftServerStatusWidget({
       h="100%"
       w="100%"
       direction="column"
-      p={isAdvanced ? "lg" : isDense ? "xs" : "sm"}
+      p={isDense ? "xs" : "sm"}
       justify="center"
       align="center"
     >
@@ -63,11 +64,11 @@ export default function MinecraftServerStatusWidget({
             ? t("widget.minecraftServerStatus.status.online")
             : t("widget.minecraftServerStatus.status.offline")}
         </VisuallyHidden>
-        <Text size={isAdvanced ? "xl" : "md"} fw="bold" truncate="end">
+        <Text size={showMetadata ? "lg" : "md"} fw="bold" truncate="end">
           {title}
         </Text>
       </Group>
-      {isAdvanced && (
+      {showMetadata && (
         <Group gap="xs" mt="xs" wrap="wrap" justify="center">
           <Badge variant="light">{options.domain}</Badge>
           {options.isBedrockServer && (
@@ -97,18 +98,18 @@ export default function MinecraftServerStatusWidget({
                 <IconCube size={iconSize} color="var(--mantine-color-gray-5)" />
               </Box>
             ))}
-          <Stack gap={4} w={isAdvanced ? "min(100%, 420px)" : "auto"} align="stretch">
+          <Stack gap={4} w={showCapacity ? "min(100%, 420px)" : "auto"} align="stretch">
             <Group gap={5} c="dimmed" align="center" justify="center">
-              <IconUsersGroup size={isAdvanced ? "1.25rem" : "1rem"} />
-              <Text size={isAdvanced ? "lg" : isDense ? "sm" : "md"}>
+              <IconUsersGroup size={showMetadata ? "1.25rem" : "1rem"} />
+              <Text size={showMetadata ? "lg" : isDense ? "sm" : "md"}>
                 {formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
               </Text>
             </Group>
-            {isAdvanced && <Progress value={playerPercent} color={playerPercent >= 90 ? "orange" : "teal"} />}
+            {showCapacity && <Progress value={playerPercent} color={playerPercent >= 90 ? "orange" : "teal"} />}
           </Stack>
         </>
       )}
-      {isAdvanced && !data.online && (
+      {showMetadata && !data.online && (
         <Text mt="md" c="dimmed" size="sm">
           {options.domain}
         </Text>
diff --git a/packages/widgets/src/minecraft/server-status/index.ts b/packages/widgets/src/minecraft/server-status/index.ts
index 1215c1731..91f3e6cdc 100644
--- a/packages/widgets/src/minecraft/server-status/index.ts
+++ b/packages/widgets/src/minecraft/server-status/index.ts
@@ -5,6 +5,7 @@ import { createWidgetDefinition, widgetQueryInputMatches } from "../../definitio
 import { optionsBuilder } from "../../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("minecraftServerStatus", {
+  supportsAdvancedFocus: false,
   icon: IconBrandMinecraft,
   queryKey: [["widget", "minecraft", "getServerStatus"]],
   queryMatcher: ({ input }, scope) =>
diff --git a/packages/widgets/src/network-controller/network-status/component.tsx b/packages/widgets/src/network-controller/network-status/component.tsx
index 3f58108be..bfd25dec5 100644
--- a/packages/widgets/src/network-controller/network-status/component.tsx
+++ b/packages/widgets/src/network-controller/network-status/component.tsx
@@ -11,6 +11,7 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { getNetworkControllerStatusLayout } from "./layout";
 import { WifiVariant } from "./variants/wifi-variant";
 import { WiredVariant } from "./variants/wired-variant";
 
@@ -36,12 +37,11 @@ export default function NetworkControllerNetworkStatusWidget({
   const tCommon = useScopedI18n("common");
 
   const data = useMemo(() => (summaries ?? []).flatMap(({ summary }) => summary), [summaries]);
-  const isAdvanced = displayMode === "advanced";
   const countWifiGuests = data.reduce((sum, summary) => sum + summary.wifi.guests, 0);
   const countWifiUsers = data.reduce((sum, summary) => sum + summary.wifi.users, 0);
   const countLanGuests = data.reduce((sum, summary) => sum + summary.lan.guests, 0);
   const countLanUsers = data.reduce((sum, summary) => sum + summary.lan.users, 0);
-  const useHorizontalStats = !isAdvanced && height < 150 && width >= 200;
+  const layout = getNetworkControllerStatusLayout({ width, height, displayMode, content: options.content });
 
   if (error && summaries === undefined) throw error;
 
@@ -56,25 +56,25 @@ export default function NetworkControllerNetworkStatusWidget({
   }
 
   return (
-    <Box p={isAdvanced ? "md" : height < 120 ? "xs" : "sm"} h="100%">
-      <SimpleGrid cols={isAdvanced && width >= 560 ? 2 : 1} h="100%" spacing="sm">
-        {(isAdvanced || options.content === "wifi") && (
-          <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
+    <Box p={layout.padding} h="100%">
+      <SimpleGrid cols={layout.columns} h="100%" spacing="sm">
+        {layout.showWifi && (
+          <Card p={layout.cardPadding} withBorder={layout.withBorder}>
             <WifiVariant
               countGuests={countWifiGuests}
               countUsers={countWifiUsers}
-              compact={!isAdvanced}
-              horizontal={useHorizontalStats}
+              compact={layout.compact}
+              horizontal={layout.horizontalStats}
             />
           </Card>
         )}
-        {(isAdvanced || options.content === "wired") && (
-          <Card p={isAdvanced ? "md" : 0} withBorder={isAdvanced}>
+        {layout.showWired && (
+          <Card p={layout.cardPadding} withBorder={layout.withBorder}>
             <WiredVariant
               countGuests={countLanGuests}
               countUsers={countLanUsers}
-              compact={!isAdvanced}
-              horizontal={useHorizontalStats}
+              compact={layout.compact}
+              horizontal={layout.horizontalStats}
             />
           </Card>
         )}
diff --git a/packages/widgets/src/network-controller/network-status/layout.spec.ts b/packages/widgets/src/network-controller/network-status/layout.spec.ts
new file mode 100644
index 000000000..8e6376f8b
--- /dev/null
+++ b/packages/widgets/src/network-controller/network-status/layout.spec.ts
@@ -0,0 +1,49 @@
+import { describe, expect, test } from "vitest";
+
+import { getNetworkControllerStatusLayout } from "./layout";
+
+describe("network controller status layout", () => {
+  test.each([
+    {
+      name: "minimum compact",
+      input: { width: 160, height: 90, displayMode: "compact" as const, content: "wifi" as const },
+      expected: { padding: "xs", columns: 1, showWifi: true, showWired: false, horizontalStats: false },
+    },
+    {
+      name: "short compact",
+      input: { width: 200, height: 149, displayMode: "compact" as const, content: "wired" as const },
+      expected: { padding: "sm", columns: 1, showWifi: false, showWired: true, horizontalStats: true },
+    },
+    {
+      name: "typical compact",
+      input: { width: 320, height: 220, displayMode: "compact" as const, content: "wifi" as const },
+      expected: { padding: "sm", columns: 1, showWifi: true, showWired: false, horizontalStats: false },
+    },
+    {
+      name: "advanced below wide boundary",
+      input: { width: 559, height: 320, displayMode: "advanced" as const, content: "wifi" as const },
+      expected: { padding: "md", columns: 1, showWifi: true, showWired: true, horizontalStats: false },
+    },
+    {
+      name: "wide advanced",
+      input: { width: 560, height: 320, displayMode: "advanced" as const, content: "wired" as const },
+      expected: { padding: "md", columns: 2, showWifi: true, showWired: true, horizontalStats: false },
+    },
+    {
+      name: "advanced at 200 percent zoom",
+      input: { width: 280, height: 320, displayMode: "advanced" as const, content: "wired" as const },
+      expected: { padding: "md", columns: 1, showWifi: true, showWired: true, horizontalStats: false },
+    },
+  ])("selects the $name tier", ({ input, expected }) => {
+    expect(getNetworkControllerStatusLayout(input)).toMatchObject(expected);
+  });
+
+  test("keeps breakpoint boundaries explicit", () => {
+    expect(
+      getNetworkControllerStatusLayout({ width: 200, height: 150, displayMode: "compact", content: "wifi" }),
+    ).toMatchObject({ padding: "sm", horizontalStats: false });
+    expect(
+      getNetworkControllerStatusLayout({ width: 199, height: 119, displayMode: "compact", content: "wifi" }),
+    ).toMatchObject({ padding: "xs", horizontalStats: false });
+  });
+});
diff --git a/packages/widgets/src/network-controller/network-status/layout.ts b/packages/widgets/src/network-controller/network-status/layout.ts
new file mode 100644
index 000000000..549ec1f62
--- /dev/null
+++ b/packages/widgets/src/network-controller/network-status/layout.ts
@@ -0,0 +1,42 @@
+import type { WidgetComponentProps } from "../../definition";
+
+type NetworkStatusContent = WidgetComponentProps<"networkControllerStatus">["options"]["content"];
+type NetworkStatusDisplayMode = WidgetComponentProps<"networkControllerStatus">["displayMode"];
+
+interface NetworkControllerStatusLayoutInput {
+  width: number;
+  height: number;
+  displayMode: NetworkStatusDisplayMode;
+  content: NetworkStatusContent;
+}
+
+export interface NetworkControllerStatusLayout {
+  padding: "xs" | "sm" | "md";
+  columns: 1 | 2;
+  showWifi: boolean;
+  showWired: boolean;
+  cardPadding: 0 | "md";
+  withBorder: boolean;
+  compact: boolean;
+  horizontalStats: boolean;
+}
+
+export const getNetworkControllerStatusLayout = ({
+  width,
+  height,
+  displayMode,
+  content,
+}: NetworkControllerStatusLayoutInput): NetworkControllerStatusLayout => {
+  const isAdvanced = displayMode === "advanced";
+
+  return {
+    padding: isAdvanced ? "md" : height < 120 ? "xs" : "sm",
+    columns: isAdvanced && width >= 560 ? 2 : 1,
+    showWifi: isAdvanced || content === "wifi",
+    showWired: isAdvanced || content === "wired",
+    cardPadding: isAdvanced ? "md" : 0,
+    withBorder: isAdvanced,
+    compact: !isAdvanced,
+    horizontalStats: !isAdvanced && height < 150 && width >= 200,
+  };
+};
diff --git a/packages/widgets/src/network-controller/summary/component.tsx b/packages/widgets/src/network-controller/summary/component.tsx
index 2d123ab5d..7f1a355b1 100644
--- a/packages/widgets/src/network-controller/summary/component.tsx
+++ b/packages/widgets/src/network-controller/summary/component.tsx
@@ -11,6 +11,8 @@ import { clientApi } from "@homarr/api/client";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { getBinaryStatusKey } from "../../common/locale";
+import { getUsableWidgetQueryData } from "../../common/query-state";
 
 dayjs.extend(objectSupport);
 dayjs.extend(relativeTime);
@@ -20,17 +22,23 @@ export default function NetworkControllerSummaryWidget({
   integrationIds,
   width,
   height,
-  displayMode,
 }: WidgetComponentProps<"networkControllerSummary">) {
-  const { data: summaries = [], isPending } = clientApi.widget.networkController.summary.useQuery({
+  const summaryQuery = clientApi.widget.networkController.summary.useQuery({
     integrationIds,
   });
+  const summaries = getUsableWidgetQueryData(summaryQuery) ?? [];
+  const { isPending } = summaryQuery;
 
   const t = useI18n();
+  const statusLabels = {
+    enabled: t("widget.dnsHoleSummary.status.enabled"),
+    disabled: t("widget.dnsHoleSummary.status.disabled"),
+    unknown: t("widget.dnsHoleSummary.status.unknown"),
+  };
 
-  const isAdvanced = displayMode === "advanced";
-  const isDense = !isAdvanced && height < 160;
-  const columns = isAdvanced && width >= 720 ? 2 : 1;
+  const isDense = height < 160;
+  const showDetails = height >= 180 && width >= 240;
+  const columns = width >= 720 ? 2 : 1;
 
   if (isPending || summaries.length === 0) {
     return (
@@ -43,12 +51,12 @@ export default function NetworkControllerSummaryWidget({
   }
 
   return (
-    <ScrollArea h="100%" p={isAdvanced ? "md" : isDense ? "xs" : "sm"}>
+    <ScrollArea h="100%" p={isDense ? "xs" : "sm"}>
       <SimpleGrid cols={columns} spacing="sm">
         {summaries.map(({ integration, summary }) => (
-          <Card key={integration.id} p={isAdvanced ? "md" : "xs"} withBorder={summaries.length > 1 || isAdvanced}>
+          <Card key={integration.id} p={isDense ? "xs" : "sm"} withBorder={summaries.length > 1}>
             <Stack gap="xs">
-              {(isAdvanced || summaries.length > 1) && (
+              {summaries.length > 1 && (
                 <Group justify="space-between" wrap="nowrap">
                   <Text fw={600} size="sm" truncate="end">
                     {integration.name}
@@ -59,24 +67,66 @@ export default function NetworkControllerSummaryWidget({
                 </Group>
               )}
               <List spacing={isDense ? 2 : "xs"} center size={isDense ? "sm" : undefined}>
-                <List.Item icon={<StatusIcon status={summary.wanStatus} size={isDense ? 16 : 20} />}>WAN</List.Item>
-                <List.Item icon={<StatusIcon status={summary.www.status} size={isDense ? 16 : 20} />}>
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.wanStatus}
+                      label={statusLabels[getBinaryStatusKey(summary.wanStatus)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
+                  WAN
+                </List.Item>
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.www.status}
+                      label={statusLabels[getBinaryStatusKey(summary.www.status)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
                   <Text>
                     WWW
                     <Text c="dimmed" size="sm" ms="xs" span>
-                      {summary.www.latency}ms{isAdvanced ? ` · ${summary.www.ping}ms` : ""}
+                      {summary.www.latency}ms{showDetails ? ` · ${summary.www.ping}ms` : ""}
                     </Text>
                   </Text>
                 </List.Item>
-                <List.Item icon={<StatusIcon status={summary.wifi.status} size={isDense ? 16 : 20} />}>
-                  Wi-Fi{isAdvanced ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.wifi.status}
+                      label={statusLabels[getBinaryStatusKey(summary.wifi.status)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
+                  Wi-Fi{showDetails ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
                 </List.Item>
-                {isAdvanced && (
-                  <List.Item icon={<StatusIcon status={summary.lan.status} size={20} />}>
+                {showDetails && (
+                  <List.Item
+                    icon={
+                      <StatusIcon
+                        status={summary.lan.status}
+                        label={statusLabels[getBinaryStatusKey(summary.lan.status)]}
+                        size={20}
+                      />
+                    }
+                  >
                     LAN · {summary.lan.users + summary.lan.guests}
                   </List.Item>
                 )}
-                <List.Item icon={<StatusIcon status={summary.vpn.status} size={isDense ? 16 : 20} />}>
+                <List.Item
+                  icon={
+                    <StatusIcon
+                      status={summary.vpn.status}
+                      label={statusLabels[getBinaryStatusKey(summary.vpn.status)]}
+                      size={isDense ? 16 : 20}
+                    />
+                  }
+                >
                   <Text>
                     VPN
                     <Text c="dimmed" size="sm" ms="xs" span>
@@ -93,13 +143,13 @@ export default function NetworkControllerSummaryWidget({
   );
 }
 
-const StatusIcon = ({ status, size }: { status?: "enabled" | "disabled"; size: number }) => {
+const StatusIcon = ({ status, label, size }: { status?: "enabled" | "disabled"; label: string; size: number }) => {
   const mantineTheme = useMantineTheme();
   if (status === "enabled") {
-    return <IconCircleCheckFilled aria-label={status} size={size} color={mantineTheme.colors.green[6]} />;
+    return <IconCircleCheckFilled aria-label={label} size={size} color={mantineTheme.colors.green[6]} />;
   }
   if (status === "disabled") {
-    return <IconCircleXFilled aria-label={status} size={size} color={mantineTheme.colors.red[6]} />;
+    return <IconCircleXFilled aria-label={label} size={size} color={mantineTheme.colors.red[6]} />;
   }
-  return <IconCircleXFilled aria-label="unknown" size={size} color={mantineTheme.colors.gray[6]} />;
+  return <IconCircleXFilled aria-label={label} size={size} color={mantineTheme.colors.gray[6]} />;
 };
diff --git a/packages/widgets/src/network-controller/summary/index.ts b/packages/widgets/src/network-controller/summary/index.ts
index cadc7b5f8..1a4544b30 100644
--- a/packages/widgets/src/network-controller/summary/index.ts
+++ b/packages/widgets/src/network-controller/summary/index.ts
@@ -6,6 +6,7 @@ import { createWidgetDefinition } from "../../definition";
 import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("networkControllerSummary", {
+  supportsAdvancedFocus: false,
   icon: IconTopologyFull,
   queryKey: [["widget", "networkController"]],
   refetchInterval: null,
diff --git a/packages/widgets/src/notebook/index.ts b/packages/widgets/src/notebook/index.ts
index 6b85f3e33..7b01c83a7 100644
--- a/packages/widgets/src/notebook/index.ts
+++ b/packages/widgets/src/notebook/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 import { defaultContent } from "./default-content";
 
 export const { definition, componentLoader } = createWidgetDefinition("notebook", {
+  supportsAdvancedFocus: false,
   icon: IconNotes,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index cede6ffe4..6ecaae51b 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -97,7 +97,6 @@ export function Notebook({
   isEditMode,
   boardId,
   itemId,
-  displayMode,
   height,
 }: WidgetComponentProps<"notebook">) {
   const [content, setContent] = useState(options.content);
@@ -146,8 +145,8 @@ export function Notebook({
         previousContentRef.current = contentUpdate;
         setOptions({ newOptions: { content: contentUpdate } });
         return true;
-      } catch (error) {
-        setSaveError(error instanceof Error ? error.message : t("widget.notebook.saveFailed"));
+      } catch {
+        setSaveError(t("widget.notebook.saveFailed"));
         return false;
       } finally {
         savingRef.current = false;
@@ -366,7 +365,7 @@ export function Notebook({
           },
           content: {
             backgroundColor: "transparent",
-            padding: height < 120 && displayMode !== "advanced" ? "0.25rem" : "0.5rem",
+            padding: height < 120 ? "0.25rem" : "0.5rem",
             height: "100%",
           },
           typographyStylesProvider: {
@@ -376,8 +375,9 @@ export function Notebook({
       >
         <RichTextEditor.Toolbar
           style={{
-            display:
-              isEditing && !isSaving && options.showToolbar === true && displayMode === "advanced" ? "flex" : "none",
+            display: isEditing && !isSaving && options.showToolbar === true ? "flex" : "none",
+            maxHeight: height < 180 ? "4.5rem" : "10rem",
+            overflowY: "auto",
           }}
         >
           <RichTextEditor.ControlsGroup>
@@ -505,8 +505,8 @@ export function Notebook({
           <RichTextEditor.Content />
         </ScrollArea>
       </RichTextEditor>
-      {displayMode === "advanced" && (
-        <Group pos="absolute" bottom={4} right={8} gap="xs">
+      {(saveError || height >= 180) && (
+        <Group pos="absolute" bottom={4} right={8} gap="xs" style={{ pointerEvents: saveError ? undefined : "none" }}>
           {saveError && (
             <Tooltip label={saveError} multiline>
               <Text
@@ -521,16 +521,18 @@ export function Notebook({
               </Text>
             </Tooltip>
           )}
-          <Text size="xs" c="dimmed">
-            {t("widget.notebook.documentStats", documentStats)}
-          </Text>
+          {height >= 180 && (
+            <Text size="xs" c="dimmed">
+              {t("widget.notebook.documentStats", documentStats)}
+            </Text>
+          )}
         </Group>
       )}
       {canChange && (
         <Stack pos="absolute" top={7} right={7} gap={7} style={{ zIndex: 1 }}>
           <ActionIcon
             className={`homarr-notebook-action ${actionTargetClasses.root}`}
-            data-visible={isEditing || displayMode === "advanced" || undefined}
+            data-visible={isEditing || undefined}
             title={isEditing ? t("common.action.save") : t("common.action.edit")}
             aria-label={isEditing ? t("common.action.save") : t("common.action.edit")}
             color={primaryColor}
diff --git a/packages/widgets/src/notifications/component.tsx b/packages/widgets/src/notifications/component.tsx
index a20809c51..59f42bd96 100644
--- a/packages/widgets/src/notifications/component.tsx
+++ b/packages/widgets/src/notifications/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useMemo } from "react";
-import { Avatar, Badge, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
+import { Avatar, Badge, Card, Flex, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconClock } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -10,18 +10,21 @@ import { useTimeAgo } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
 export default function NotificationsWidget({
   options,
   integrationIds,
   width,
   height,
-  displayMode,
 }: WidgetComponentProps<"notifications">) {
-  const { data: notificationIntegrations = [], isPending } = clientApi.widget.notifications.getNotifications.useQuery({
+  const notificationsQuery = clientApi.widget.notifications.getNotifications.useQuery({
     ...options,
     integrationIds,
   });
+  const notificationIntegrations = getUsableWidgetQueryData(notificationsQuery) ?? [];
+  const { isPending } = notificationsQuery;
 
   const t = useI18n();
 
@@ -43,22 +46,21 @@ export default function NotificationsWidget({
   const failedIntegrations = notificationIntegrations.filter(
     (integration): integration is typeof integration & { error: string } => Boolean(integration.error),
   );
-  const isAdvanced = displayMode === "advanced";
-  const isDense = !isAdvanced && (width < 280 || height < 180);
-  const bodyLineClamp = isAdvanced ? 12 : height < 112 ? 1 : isDense ? 2 : 4;
-  const columns = isAdvanced && width >= 720 ? 2 : 1;
+  const isDense = width < 280 || height < 180;
+  const isRoomy = width >= 360 && height >= 220;
+  const bodyLineClamp = height < 112 ? 1 : isDense ? 2 : height >= 300 ? 8 : 4;
+  const columns = width >= 720 ? 2 : 1;
+  const spacing = isRoomy ? "sm" : "xs";
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : "xs"}>
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p="xs">
       <Stack w="100%" gap="xs">
         {failedIntegrations.length > 0 && (
           <Group gap={4} wrap="wrap">
             {failedIntegrations.map((integration) => (
-              <Tooltip key={integration.integration.id} label={integration.error} multiline maw={360}>
-                <Badge color="red" variant="light" size="xs">
-                  {integration.integration.name}: {t("common.error")}
-                </Badge>
-              </Tooltip>
+              <Badge key={integration.integration.id} color="red" variant="light" size="xs">
+                {integration.integration.name}: {t("common.error")}
+              </Badge>
             ))}
           </Group>
         )}
@@ -69,60 +71,64 @@ export default function NotificationsWidget({
             </Text>
           </Flex>
         ) : sortedNotifications.length > 0 ? (
-          <SimpleGrid cols={columns} spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
-            {sortedNotifications.map((notification) => (
-              <Card
-                key={notification.compositeKey}
-                component={notification.href ? "a" : "div"}
-                href={notification.href}
-                target={notification.href ? "_blank" : undefined}
-                rel={notification.href ? "noopener noreferrer" : undefined}
-                radius={board.itemRadius}
-                w="100%"
-                p={isAdvanced ? "md" : isDense ? 6 : "xs"}
-                bg={isAdvanced ? undefined : "transparent"}
-                style={{
-                  color: "inherit",
-                  textDecoration: "none",
-                  borderBottom: isAdvanced
-                    ? undefined
-                    : "1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))",
-                }}
-              >
-                <Flex gap={isDense ? "xs" : "sm"} align="flex-start" w="100%">
-                  {!options.hideLogos && notification.source?.iconUrl && (
-                    <Avatar
-                      src={notification.source.iconUrl}
-                      alt={notification.source.name}
-                      size={isDense ? "xs" : "sm"}
-                      radius={board.itemRadius}
-                    />
-                  )}
-
-                  <Flex gap={isAdvanced ? "sm" : isDense ? 4 : 6} direction="column" w="100%" miw={0}>
-                    {notification.title && (
-                      <Text fz={isAdvanced ? "md" : "sm"} fw={600} lh={1.25} lineClamp={isDense ? 1 : 2}>
-                        {notification.title}
-                      </Text>
+          <SimpleGrid cols={columns} spacing={spacing} verticalSpacing={spacing}>
+            {sortedNotifications.map((notification) => {
+              const href = getSafeApplicationUrl(notification.href);
+              return (
+                <Card
+                  key={notification.compositeKey}
+                  component={href ? "a" : "div"}
+                  href={href}
+                  target={href ? "_blank" : undefined}
+                  rel={href ? SAFE_NEW_TAB_REL : undefined}
+                  radius={board.itemRadius}
+                  w="100%"
+                  p={isRoomy ? "sm" : isDense ? 6 : "xs"}
+                  bg={columns > 1 ? undefined : "transparent"}
+                  style={{
+                    color: "inherit",
+                    textDecoration: "none",
+                    borderBottom:
+                      columns > 1
+                        ? undefined
+                        : "1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4))",
+                  }}
+                >
+                  <Flex gap={isDense ? "xs" : "sm"} align="flex-start" w="100%">
+                    {!options.hideLogos && notification.source?.iconUrl && (
+                      <Avatar
+                        src={notification.source.iconUrl}
+                        alt={notification.source.name}
+                        size={isDense ? "xs" : "sm"}
+                        radius={board.itemRadius}
+                      />
                     )}
-                    <Text
-                      c="dimmed"
-                      size={isDense ? "xs" : "sm"}
-                      lineClamp={bodyLineClamp}
-                      style={{ whiteSpace: "pre-line" }}
-                    >
-                      {notification.body}
-                    </Text>
 
-                    <InfoDisplay
-                      date={notification.time}
-                      source={isAdvanced ? (notification.source?.name ?? notification.integrationName) : undefined}
-                      dense={isDense}
-                    />
+                    <Flex gap={isRoomy ? "sm" : isDense ? 4 : 6} direction="column" w="100%" miw={0}>
+                      {notification.title && (
+                        <Text fz={isRoomy ? "md" : "sm"} fw={600} lh={1.25} lineClamp={isDense ? 1 : 2}>
+                          {notification.title}
+                        </Text>
+                      )}
+                      <Text
+                        c="dimmed"
+                        size={isDense ? "xs" : "sm"}
+                        lineClamp={bodyLineClamp}
+                        style={{ whiteSpace: "pre-line" }}
+                      >
+                        {notification.body}
+                      </Text>
+
+                      <InfoDisplay
+                        date={notification.time}
+                        source={isRoomy ? (notification.source?.name ?? notification.integrationName) : undefined}
+                        dense={isDense}
+                      />
+                    </Flex>
                   </Flex>
-                </Flex>
-              </Card>
-            ))}
+                </Card>
+              );
+            })}
           </SimpleGrid>
         ) : (
           <Flex justify="center" align="center" mih={96} p="sm">
diff --git a/packages/widgets/src/notifications/index.ts b/packages/widgets/src/notifications/index.ts
index 0f34f5609..77b1bff47 100644
--- a/packages/widgets/src/notifications/index.ts
+++ b/packages/widgets/src/notifications/index.ts
@@ -6,6 +6,7 @@ import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
+  supportsAdvancedFocus: false,
   icon: IconMessage,
   queryKey: [["widget", "notifications", "getNotifications"]],
   queryMatcher: ({ input }, scope) =>
diff --git a/packages/widgets/src/paperless-ngx/component.tsx b/packages/widgets/src/paperless-ngx/component.tsx
index ae22402d8..ea9499679 100644
--- a/packages/widgets/src/paperless-ngx/component.tsx
+++ b/packages/widgets/src/paperless-ngx/component.tsx
@@ -75,7 +75,6 @@ export default function PaperlessNgxWidget({
   options,
   width,
   height,
-  displayMode = "compact",
 }: WidgetComponentProps<"paperlessNgx">) {
   const t = useScopedI18n("widget.paperlessNgx");
   const tCommon = useScopedI18n("common");
@@ -116,16 +115,15 @@ export default function PaperlessNgxWidget({
     .map(([, statKey]) => statKey)
     .filter((statKey) => !(showHero && gridHiddenWhenHeroShown.has(statKey)));
 
-  const advanced = displayMode === "advanced";
-  const gridCols = advanced ? Math.max(1, Math.min(5, visibleStatKeys.length)) : getGridCols(width);
-  const ringSize = advanced ? 112 : getRingSize(width);
+  const gridCols = Math.max(1, Math.min(visibleStatKeys.length, getGridCols(width, height)));
+  const ringSize = getRingSize(Math.min(width, height * 2));
   const iconSize = getIconSize(width);
   const ringLabelSize = getRingLabelSize(ringSize);
   const hasContent = showHero || visibleStatKeys.length > 0;
 
   const heroLayoutClass =
     heroLayoutBySecondaryStats[String(visibleStatKeys.length > 0) as keyof typeof heroLayoutBySecondaryStats];
-  const showInboxRing = options.showInboxRing && (advanced || height >= 120);
+  const showInboxRing = options.showInboxRing && height >= 120;
   const heroRingClass = heroVariantByRing[String(showInboxRing) as keyof typeof heroVariantByRing];
 
   const visibleHeroParts = Object.entries(heroPartVisibility).filter(
@@ -163,11 +161,7 @@ export default function PaperlessNgxWidget({
   } as const;
 
   return (
-    <div
-      className={classes.root}
-      data-display-mode={displayMode}
-      style={advanced ? { padding: 16, gap: 16 } : undefined}
-    >
+    <div className={classes.root}>
       {showHero && (
         <div className={`${classes.hero} ${heroLayoutClass} ${heroRingClass}`}>
           {visibleHeroParts.map(([partKey]) => (
@@ -210,9 +204,9 @@ function computeInboxProgress(total: number, inbox: number): number {
   return Math.round((inbox / total) * 100);
 }
 
-function getGridCols(width: number): number {
+function getGridCols(width: number, height: number): number {
   const match = gridColsByWidth.find(({ minWidth }) => width >= minWidth);
-  return match?.cols ?? 1;
+  return Math.min(match?.cols ?? 1, height < 140 ? 2 : 5);
 }
 
 function getRingSize(width: number): number {
diff --git a/packages/widgets/src/paperless-ngx/index.ts b/packages/widgets/src/paperless-ngx/index.ts
index bd13d28ec..600ee4652 100644
--- a/packages/widgets/src/paperless-ngx/index.ts
+++ b/packages/widgets/src/paperless-ngx/index.ts
@@ -4,6 +4,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("paperlessNgx", {
+  supportsAdvancedFocus: false,
   icon: IconFileText,
   refetchInterval: null,
   supportedIntegrations: ["paperlessNgx"],
diff --git a/packages/widgets/src/patchmon/component.tsx b/packages/widgets/src/patchmon/component.tsx
index 951412254..9889b0797 100644
--- a/packages/widgets/src/patchmon/component.tsx
+++ b/packages/widgets/src/patchmon/component.tsx
@@ -75,17 +75,15 @@ const getLayoutMode = (width: number, height: number): LayoutMode => {
   return "comfortable";
 };
 
-export default function PatchMonWidget({
-  integrationIds,
-  options,
-  width,
-  height,
-  displayMode = "compact",
-}: WidgetComponentProps<"patchmon">) {
+export default function PatchMonWidget({ integrationIds, options, width, height }: WidgetComponentProps<"patchmon">) {
   const t = useScopedI18n("widget.patchmon");
   const integrationId = integrationIds[0] ?? "";
-  const { data: stats } = clientApi.widget.patchmon.getStats.useQuery({ integrationId }, { staleTime: 60 * 1000 });
+  const { data: stats, error } = clientApi.widget.patchmon.getStats.useQuery(
+    { integrationId },
+    { staleTime: 60 * 1000 },
+  );
 
+  if (error && !stats) throw error;
   if (!stats) return <WidgetEmptyState />;
 
   const statValues: Record<PatchMonStatKey, number> = {
@@ -104,20 +102,18 @@ export default function PatchMonWidget({
     .map(([, statKey]) => statKey);
 
   const colorContext = { totalHosts: stats.totalHosts };
-  const advanced = displayMode === "advanced";
-  const layout = advanced ? "spacious" : getLayoutMode(width, height);
-  const isLandscape = !advanced && width / height > 2.5;
+  const layout = getLayoutMode(width, height);
+  const isLandscape = width / height > 2.5;
   const isTinySquare = width < 160 && height < 160;
   const isShortLandscape = width >= 160 && height < 160;
-  const isCompactSurface = !advanced && (isTinySquare || isShortLandscape);
+  const isCompactSurface = isTinySquare || isShortLandscape;
   const isNarrow = width < 180;
   const osDisplayMode = options.osDisplayMode as "bars" | "donut";
   const showOsData = options.showOsDistribution && stats.osDistribution.length > 0;
 
   const showIcons = layout !== "mini";
   const showLabels = layout !== "mini";
-  const showHero =
-    options.showComplianceHero && (advanced || !isLandscape || isCompactSurface) && width >= 90 && height >= 90;
+  const showHero = options.showComplianceHero && (!isLandscape || isCompactSurface) && width >= 90 && height >= 90;
   const showHeroText = showHero && shouldShowComplianceHeroText(width);
   const showHeroRingOnly = showHero && !showHeroText;
   const compactPrimaryContent = isCompactSurface
@@ -128,10 +124,10 @@ export default function PatchMonWidget({
       })
     : null;
   const showStats = visibleStatKeys.length > 0 && !isCompactSurface;
-  const showOsSection = showOsData && !isCompactSurface && (advanced || height > 200);
+  const showOsSection = showOsData && !isCompactSurface && height > 200;
   const showCompactFooter = isCompactSurface && height >= 110;
-  const showFooter = advanced || (isCompactSurface ? showCompactFooter : !isLandscape && height > 220);
-  const showOsLegend = osDisplayMode === "donut" && (advanced || (width >= 380 && height >= 300));
+  const showFooter = isCompactSurface ? showCompactFooter : !isLandscape && height > 220;
+  const showOsLegend = osDisplayMode === "donut" && width >= 380 && height >= 300;
 
   const hasContent = compactPrimaryContent !== null || showStats || showOsSection || showHero;
 
@@ -280,10 +276,10 @@ export default function PatchMonWidget({
     </div>
   );
 
-  const needsScroll = !advanced && (layout === "mini" || layout === "compact");
+  const needsScroll = layout === "mini" || layout === "compact";
 
   return (
-    <div className={classes.root} data-display-mode={displayMode}>
+    <div className={classes.root}>
       {showHero && (
         <ComplianceHero
           compliancePercent={compliancePercent}
diff --git a/packages/widgets/src/patchmon/index.ts b/packages/widgets/src/patchmon/index.ts
index 49fd32629..868a804e5 100644
--- a/packages/widgets/src/patchmon/index.ts
+++ b/packages/widgets/src/patchmon/index.ts
@@ -7,6 +7,7 @@ import { PATCHMON_STAT_COLOR_PRESETS } from "./stat-colors";
 import { patchmonOptionsSuperRefine } from "./threshold-validation";
 
 export const { definition, componentLoader } = createWidgetDefinition("patchmon", {
+  supportsAdvancedFocus: false,
   icon: IconShieldCheck,
   supportedIntegrations: ["patchmon"],
   integrationsRequired: true,
diff --git a/packages/widgets/src/releases/component.tsx b/packages/widgets/src/releases/component.tsx
index 3481f6172..c7295ec59 100644
--- a/packages/widgets/src/releases/component.tsx
+++ b/packages/widgets/src/releases/component.tsx
@@ -38,6 +38,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import classes from "./component.module.scss";
 import type { ReleasesRepository, ReleasesRepositoryResponse } from "./releases-repository";
 import { getReleasesQueryStaleTimeMs } from "./query-options";
@@ -48,7 +49,7 @@ const formatRelativeDate = (value: string): string => {
   return isMonths ? value.toUpperCase() : isOtherUnits ? value.toLowerCase() : value;
 };
 
-export default function ReleasesWidget({ options, itemId, width, displayMode }: WidgetComponentProps<"releases">) {
+export default function ReleasesWidget({ options, itemId, width }: WidgetComponentProps<"releases">) {
   const t = useScopedI18n("widget.releases");
   const now = useNow();
   const formatter = useFormatter();
@@ -59,7 +60,7 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
     key: "releases-viewed-versions",
     defaultValue: {},
   });
-  const isAdvanced = displayMode === "advanced";
+  const columns = Math.max(1, Math.floor(width / 420));
 
   const relativeDateOptions = useMemo(
     () => ({
@@ -187,11 +188,7 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
 
   return (
     <ScrollArea h="100%" className="releases">
-      <SimpleGrid
-        cols={isAdvanced ? Math.max(1, Math.floor(width / 420)) : 1}
-        spacing={isAdvanced ? "sm" : 0}
-        p={isAdvanced ? "xs" : 0}
-      >
+      <SimpleGrid cols={columns} spacing={columns > 1 ? "sm" : 0} p={columns > 1 ? "xs" : 0}>
         {repositories.map((repository: ReleasesRepositoryResponse) => {
           const isActive = expandedRepositoryId === repository.id;
           const hasError = repository.error !== undefined;
@@ -207,7 +204,7 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
               )}
               gap={0}
               style={
-                isAdvanced
+                columns > 1
                   ? {
                       border: "1px solid var(--mantine-color-default-border)",
                       borderRadius: "var(--mantine-radius-sm)",
@@ -324,7 +321,7 @@ export default function ReleasesWidget({ options, itemId, width, displayMode }:
                   </Group>
                 </Group>
               </UnstyledButton>
-              {(options.showDetails || isAdvanced) && (
+              {options.showDetails && (
                 <DetailsDisplay
                   repository={repository}
                   isExpanded={isActive}
@@ -582,6 +579,8 @@ const ExpandedDisplay = ({
   const t = useScopedI18n("widget.releases");
   const now = useNow();
   const formatter = useFormatter();
+  const releaseUrl = getSafeApplicationUrl(repository.releaseUrl);
+  const repositoryUrl = releaseUrl ?? getSafeApplicationUrl(repository.projectUrl);
 
   return (
     <>
@@ -651,19 +650,19 @@ const ExpandedDisplay = ({
           </Group>
         </Button>
 
-        {(repository.releaseUrl ?? repository.projectUrl) && (
+        {repositoryUrl && (
           <Button
             className="releases-repository-expanded-openButton"
             variant="light"
             component="a"
-            href={repository.releaseUrl ?? repository.projectUrl}
+            href={repositoryUrl}
             target="_blank"
-            rel="noreferrer"
+            rel={SAFE_NEW_TAB_REL}
           >
             <Group className="releases-repository-expanded-openButton-wrapper" gap={5} justify="center" align="center">
               <IconExternalLink className="releases-repository-expanded-openButton-icon" size="1.5em" />
               <Text className="releases-repository-expanded-openButton-text">
-                {repository.releaseUrl ? t("openReleasePage") : t("openProjectPage")}
+                {releaseUrl ? t("openReleasePage") : t("openProjectPage")}
               </Text>
             </Group>
           </Button>
@@ -682,8 +681,9 @@ const ExpandedDisplay = ({
               c="red"
               style={{ whiteSpace: "pre-wrap" }}
             >
-              {repository.error.message ??
-                (repository.error.code ? t(`error.messages.${repository.error.code}` as never) : null)}
+              {repository.error.code
+                ? t(`error.messages.${repository.error.code}` as never)
+                : t("error.messages.unexpected")}
             </Text>
           </>
         )}
diff --git a/packages/widgets/src/releases/index.ts b/packages/widgets/src/releases/index.ts
index f190ed9dc..0507e8f42 100644
--- a/packages/widgets/src/releases/index.ts
+++ b/packages/widgets/src/releases/index.ts
@@ -13,6 +13,7 @@ const relativeDateSchema = z
   .or(z.literal(""));
 
 export const { definition, componentLoader } = createWidgetDefinition("releases", {
+  supportsAdvancedFocus: false,
   icon: IconRocket,
   queryKey: [["widget", "releases", "getLatest"]],
   queryMatcher: ({ input }, scope) => widgetQueryInputMatches(input, { itemId: scope.itemId }),
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 0da7d7c70..1d38d3ed3 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -10,6 +10,7 @@ import { useRequiredBoard } from "@homarr/boards/context";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
 import classes from "./component.module.scss";
 
 const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
@@ -33,7 +34,7 @@ const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
   };
 };
 
-export default function RssFeed({ options, width, height, displayMode }: WidgetComponentProps<"rssFeed">) {
+export default function RssFeed({ options, width, height }: WidgetComponentProps<"rssFeed">) {
   const {
     entries: feedEntries,
     failedFeedCount,
@@ -53,64 +54,68 @@ export default function RssFeed({ options, width, height, displayMode }: WidgetC
 
   const languageDir = options.enableRtl ? "RTL" : "LTR";
 
-  const isAdvanced = displayMode === "advanced";
-  const isDense = !isAdvanced && (width < 420 || height < 180);
-  const isTiny = !isAdvanced && (width < 260 || height < 110);
-  const columns = isAdvanced && width >= 720 ? 2 : 1;
-  const descriptionLines = isAdvanced ? Math.max(options.textLinesClamp, 8) : isDense ? 1 : options.textLinesClamp;
+  const isDense = width < 420 || height < 180;
+  const isTiny = width < 260 || height < 110;
+  const isRoomy = width >= 420 && height >= 240;
+  const columns = width >= 720 && height >= 260 ? 2 : 1;
+  const descriptionLines = isRoomy ? Math.max(options.textLinesClamp, 6) : isDense ? 1 : options.textLinesClamp;
+  const spacing = isRoomy ? "sm" : "xs";
 
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isAdvanced ? "md" : isTiny ? 4 : "xs"}>
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" p={isTiny ? 4 : "xs"}>
       {warning && (
         <Alert role="presentation" color="orange" icon={<IconAlertTriangle aria-hidden size={16} />} p="xs" mb="xs">
           <output>{warning}</output>
         </Alert>
       )}
-      <SimpleGrid cols={columns} w="100%" spacing={isAdvanced ? "md" : "xs"} verticalSpacing={isAdvanced ? "md" : "xs"}>
-        {feedEntries.map((feedEntry) => (
-          <Card
-            key={feedEntry.id}
-            className={classes.entry}
-            component={"a"}
-            href={getSafeExternalUrl(feedEntry.link, feedEntry.feedUrl)}
-            radius={board.itemRadius}
-            target="_blank"
-            rel="noopener noreferrer"
-            w="100%"
-            p={isAdvanced ? "md" : isDense ? 6 : "xs"}
-            title={feedEntry.title}
-          >
-            <Group wrap="nowrap" align="flex-start" gap={isDense ? "xs" : "md"}>
-              {feedEntry.enclosure !== undefined && options.showPosterImage && !isTiny && (
-                <Image
-                  className={classes.poster}
-                  src={feedEntry.enclosure}
-                  alt=""
-                  w={isAdvanced ? 180 : isDense ? 64 : 96}
-                  h={isAdvanced ? 120 : isDense ? 64 : 96}
-                  radius="sm"
-                  fit="cover"
-                />
-              )}
-
-              <Flex gap={isAdvanced ? "sm" : 6} direction="column" w="100%" miw={0}>
-                <Text dir={languageDir} fz={isAdvanced ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
-                  {feedEntry.title}
-                </Text>
-                {!options.hideDescription && feedEntry.description && !isTiny && (
-                  <Text dir={languageDir} c="dimmed" size="sm" lineClamp={descriptionLines}>
-                    {feedDescriptionToText(feedEntry.description)}
-                  </Text>
+      <SimpleGrid cols={columns} w="100%" spacing={spacing} verticalSpacing={spacing}>
+        {feedEntries.map((feedEntry) => {
+          const href = getSafeApplicationUrl(feedEntry.link, { baseUrl: feedEntry.feedUrl });
+          return (
+            <Card
+              key={feedEntry.id}
+              className={classes.entry}
+              component={href ? "a" : "div"}
+              href={href}
+              radius={board.itemRadius}
+              target={href ? "_blank" : undefined}
+              rel={href ? SAFE_NEW_TAB_REL : undefined}
+              w="100%"
+              p={isDense ? 6 : "xs"}
+              title={feedEntry.title}
+            >
+              <Group wrap="nowrap" align="flex-start" gap={isDense ? "xs" : "md"}>
+                {feedEntry.enclosure !== undefined && options.showPosterImage && !isTiny && (
+                  <Image
+                    className={classes.poster}
+                    src={feedEntry.enclosure}
+                    alt=""
+                    w={isRoomy ? 140 : isDense ? 64 : 96}
+                    h={isRoomy ? 96 : isDense ? 64 : 96}
+                    radius="sm"
+                    fit="cover"
+                  />
                 )}
 
-                <InfoDisplay
-                  source={isAdvanced || !isDense ? getHostname(feedEntry.feedUrl) : undefined}
-                  date={feedEntry.published ? dayjs(feedEntry.published).fromNow() : undefined}
-                />
-              </Flex>
-            </Group>
-          </Card>
-        ))}
+                <Flex gap={isRoomy ? "sm" : 6} direction="column" w="100%" miw={0}>
+                  <Text dir={languageDir} fz={isRoomy ? "md" : "sm"} fw={600} lh={1.25} lineClamp={2}>
+                    {feedEntry.title}
+                  </Text>
+                  {!options.hideDescription && feedEntry.description && !isTiny && (
+                    <Text dir={languageDir} c="dimmed" size="sm" lineClamp={descriptionLines}>
+                      {feedDescriptionToText(feedEntry.description)}
+                    </Text>
+                  )}
+
+                  <InfoDisplay
+                    source={!isDense ? getHostname(feedEntry.feedUrl) : undefined}
+                    date={feedEntry.published ? dayjs(feedEntry.published).fromNow() : undefined}
+                  />
+                </Flex>
+              </Group>
+            </Card>
+          );
+        })}
       </SimpleGrid>
     </ScrollArea>
   );
@@ -134,29 +139,6 @@ export const getHostname = (url: string): string => {
   }
 };
 
-export const getSafeExternalUrl = (value: unknown, baseUrl?: string): string | undefined => {
-  if (typeof value !== "string") return undefined;
-  try {
-    let sanitizedBaseUrl: string | undefined;
-    if (baseUrl) {
-      const parsedBaseUrl = new URL(baseUrl);
-      parsedBaseUrl.username = "";
-      parsedBaseUrl.password = "";
-      parsedBaseUrl.search = "";
-      parsedBaseUrl.hash = "";
-      sanitizedBaseUrl = parsedBaseUrl.toString();
-    }
-
-    const url = new URL(value, sanitizedBaseUrl);
-    if (url.protocol !== "http:" && url.protocol !== "https:") return undefined;
-    url.username = "";
-    url.password = "";
-    return url.toString();
-  } catch {
-    return undefined;
-  }
-};
-
 const InfoDisplay = ({ date, source }: { date?: string; source?: string }) => (
   <Group gap={5} align="center" wrap="nowrap">
     {date && <IconClock size="1rem" color="var(--mantine-color-dimmed)" />}
diff --git a/packages/widgets/src/rssFeed/feed-display.spec.ts b/packages/widgets/src/rssFeed/feed-display.spec.ts
index 3348ef91f..d18a7c9e0 100644
--- a/packages/widgets/src/rssFeed/feed-display.spec.ts
+++ b/packages/widgets/src/rssFeed/feed-display.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { feedDescriptionToText, getHostname, getSafeExternalUrl } from "./component";
+import { feedDescriptionToText, getHostname } from "./component";
 
 describe("RSS feed display helpers", () => {
   test("renders feed markup as inert text", () => {
@@ -13,22 +13,4 @@ describe("RSS feed display helpers", () => {
     expect(getHostname("not a URL")).toBe("not a URL");
     expect(getHostname("https://example.com/feed.xml")).toBe("example.com");
   });
-
-  test("only exposes credential-free HTTP links from untrusted feed entries", () => {
-    expect(getSafeExternalUrl("https://example.com/story")).toBe("https://example.com/story");
-    expect(getSafeExternalUrl("/story", "https://example.com/feed.xml")).toBe("https://example.com/story");
-    expect(getSafeExternalUrl("/story", "https://user:password@example.com/feed.xml")).toBe(
-      "https://example.com/story",
-    );
-    expect(getSafeExternalUrl("https://user:password@example.com/story")).toBe("https://example.com/story");
-    expect(getSafeExternalUrl(undefined, "https://example.com/feed?token=secret")).toBeUndefined();
-    expect(getSafeExternalUrl("#story", "https://example.com/feed?token=secret#old")).toBe(
-      "https://example.com/feed#story",
-    );
-    expect(getSafeExternalUrl("?story=1", "https://example.com/feed?token=secret")).toBe(
-      "https://example.com/feed?story=1",
-    );
-    expect(getSafeExternalUrl("javascript:alert(1)")).toBeUndefined();
-    expect(getSafeExternalUrl("not a URL")).toBeUndefined();
-  });
 });
diff --git a/packages/widgets/src/rssFeed/index.ts b/packages/widgets/src/rssFeed/index.ts
index a00124fc5..683dd07ef 100644
--- a/packages/widgets/src/rssFeed/index.ts
+++ b/packages/widgets/src/rssFeed/index.ts
@@ -11,6 +11,7 @@ import { optionsBuilder } from "../options";
  * - https://www.jsonfeed.org/version/1.1/
  */
 export const { definition, componentLoader } = createWidgetDefinition("rssFeed", {
+  supportsAdvancedFocus: false,
   icon: IconRss,
   queryKey: [["widget", "rssFeed", "getFeeds"]],
   queryMatcher: ({ input }, scope) =>
diff --git a/packages/widgets/src/runtime-hooks.ts b/packages/widgets/src/runtime-hooks.ts
new file mode 100644
index 000000000..684c33db1
--- /dev/null
+++ b/packages/widgets/src/runtime-hooks.ts
@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+
+import type { QueryKey } from "@tanstack/react-query";
+
+import type { WidgetRuntimeActions, WidgetRuntimeRef } from "./definition";
+import { normalizeWidgetQuery } from "./definition";
+
+export const useWidgetRuntimeQueries = (
+  widgetRuntimeRef: WidgetRuntimeRef | undefined,
+  queryKeys: readonly QueryKey[],
+) => {
+  useEffect(() => {
+    if (!widgetRuntimeRef) return;
+    const runtime = widgetRuntimeRef.current;
+    const queries = queryKeys.flatMap((queryKey) => {
+      const query = normalizeWidgetQuery(queryKey);
+      return query ? [query] : [];
+    });
+    runtime.queries = queries;
+    return () => {
+      if (runtime.queries === queries) runtime.queries = [];
+    };
+  }, [queryKeys, widgetRuntimeRef]);
+};
+
+export const useWidgetRuntimeActions = (
+  widgetRuntimeRef: WidgetRuntimeRef | undefined,
+  actions: WidgetRuntimeActions,
+) => {
+  useEffect(() => {
+    if (!widgetRuntimeRef) return;
+    const runtime = widgetRuntimeRef.current;
+    runtime.actions = actions;
+    return () => {
+      if (runtime.actions === actions) runtime.actions = {};
+    };
+  }, [actions, widgetRuntimeRef]);
+};
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index 87ab84265..4fa6fdda7 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -9,7 +9,6 @@ import {
   Stack,
   Text,
   ThemeIcon,
-  Tooltip,
   UnstyledButton,
   VisuallyHidden,
 } from "@mantine/core";
@@ -106,7 +105,7 @@ export default function SmartHomeTriggerAutomationWidget({
           cursor: !isEditMode && integrationId && canInteract ? "pointer" : "initial",
           pointerEvents: isEditMode ? "none" : undefined,
         }}
-        aria-description={error?.message}
+        aria-description={error ? t("widget.smartHome-executeAutomation.error.executeFailed") : undefined}
         w="100%"
         h="100%"
       >
@@ -123,11 +122,9 @@ export default function SmartHomeTriggerAutomationWidget({
         {error && displayMode !== "advanced" && (
           <Overlay>
             <Center w="100%" h="100%" p="xs">
-              <Tooltip label={error.message} multiline>
-                <Text size="xs" c="red" ta="center" lineClamp={3}>
-                  {t("widget.smartHome-executeAutomation.error.executeFailed")}
-                </Text>
-              </Tooltip>
+              <Text size="xs" c="red" ta="center" lineClamp={3}>
+                {t("widget.smartHome-executeAutomation.error.executeFailed")}
+              </Text>
             </Center>
           </Overlay>
         )}
@@ -142,11 +139,9 @@ export default function SmartHomeTriggerAutomationWidget({
             {displayMode === "advanced" && (
               <>
                 {error ? (
-                  <Tooltip label={error.message} multiline>
-                    <Text ta="center" size="xs" c="red">
-                      {t("widget.smartHome-executeAutomation.error.executeFailed")}
-                    </Text>
-                  </Tooltip>
+                  <Text ta="center" size="xs" c="red">
+                    {t("widget.smartHome-executeAutomation.error.executeFailed")}
+                  </Text>
                 ) : (
                   <Text ta="center" size="xs" c="dimmed">
                     {lastExecutedAt
diff --git a/packages/widgets/src/speedtest-tracker/component.tsx b/packages/widgets/src/speedtest-tracker/component.tsx
index 8c3c4350d..f1b096e4a 100644
--- a/packages/widgets/src/speedtest-tracker/component.tsx
+++ b/packages/widgets/src/speedtest-tracker/component.tsx
@@ -7,6 +7,7 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { WidgetEmptyState } from "../common/empty-state";
 import { AveragesSection } from "./averages";
 import { combineSpeedtestDashboards, getCompactSections } from "./helpers";
@@ -21,7 +22,8 @@ export default function SpeedtestTrackerWidget({
   displayMode = "compact",
 }: WidgetComponentProps<"speedtestTracker">) {
   const t = useScopedI18n("widget.speedtestTracker");
-  const { data: dashboardData = [] } = clientApi.widget.speedtestTracker.getDashboard.useQuery({ integrationIds });
+  const dashboardData =
+    getUsableWidgetQueryData(clientApi.widget.speedtestTracker.getDashboard.useQuery({ integrationIds })) ?? [];
   const [advancedRange, setAdvancedRange] = useState("24");
 
   const combined = useMemo(
diff --git a/packages/widgets/src/stocks/component.spec.ts b/packages/widgets/src/stocks/component.spec.ts
index 5f74928ef..f7a39e0b1 100644
--- a/packages/widgets/src/stocks/component.spec.ts
+++ b/packages/widgets/src/stocks/component.spec.ts
@@ -19,7 +19,7 @@ describe("stock summary", () => {
 
 describe("stock layout", () => {
   it("keeps compact widgets focused on symbol and price", () => {
-    expect(getStockLayout(320, 100, false)).toMatchObject({
+    expect(getStockLayout(320, 100)).toMatchObject({
       showName: false,
       showChange: false,
       showRange: false,
@@ -28,12 +28,12 @@ describe("stock layout", () => {
   });
 
   it("reveals secondary data only when both axes have room", () => {
-    expect(getStockLayout(320, 160, false)).toMatchObject({
+    expect(getStockLayout(320, 160)).toMatchObject({
       showName: false,
       showChange: true,
       showRange: true,
     });
-    expect(getStockLayout(320, 220, false)).toMatchObject({
+    expect(getStockLayout(320, 220)).toMatchObject({
       showName: true,
       showChange: true,
       showRange: true,
@@ -41,8 +41,8 @@ describe("stock layout", () => {
     });
   });
 
-  it("always exposes the complete advanced summary", () => {
-    expect(getStockLayout(120, 80, true)).toEqual({
+  it("exposes the complete summary when the widget is roomy", () => {
+    expect(getStockLayout(640, 360)).toEqual({
       showName: true,
       showChange: true,
       showRange: true,
diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx
index 6fb401185..a66f216e9 100644
--- a/packages/widgets/src/stocks/component.tsx
+++ b/packages/widgets/src/stocks/component.tsx
@@ -38,22 +38,12 @@ export interface StockLayout {
   priceOrder: 1 | 2;
 }
 
-export function getStockLayout(width: number, height: number, isAdvanced: boolean): StockLayout {
-  if (isAdvanced) {
-    return {
-      showName: true,
-      showChange: true,
-      showRange: true,
-      graphHeight: "75%",
-      priceOrder: 1,
-    };
-  }
-
+export function getStockLayout(width: number, height: number): StockLayout {
   return {
     showName: width >= 300 && height >= 190,
     showChange: width >= 260 && height >= 130,
     showRange: width >= 220 && height >= 130,
-    graphHeight: height >= 220 ? "68%" : "48%",
+    graphHeight: height >= 320 ? "75%" : height >= 220 ? "68%" : "48%",
     priceOrder: width >= 280 && height >= 120 ? 1 : 2,
   };
 }
@@ -71,13 +61,14 @@ export function getStockSummary(priceHistory: number[], previousClose: number):
   };
 }
 
-export default function StockPriceWidget({ options, width, height, displayMode }: WidgetComponentProps<"stockPrice">) {
+export default function StockPriceWidget({ options, width, height }: WidgetComponentProps<"stockPrice">) {
   const t = useScopedI18n("widget.stockPrice");
   const locale = useCurrentIntlLocale();
   const numberFormatter = new Intl.NumberFormat(locale);
   const theme = useMantineTheme();
-  const { data: result } = clientApi.widget.stockPrice.getPriceHistory.useQuery(options);
+  const { data: result, error } = clientApi.widget.stockPrice.getPriceHistory.useQuery(options);
 
+  if (error && !result) throw error;
   if (!result) return <WidgetEmptyState />;
   const { data } = result;
 
@@ -87,7 +78,7 @@ export default function StockPriceWidget({ options, width, height, displayMode }
   const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
   const stockGraphValues = summary.graphValues;
   const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
-  const layout = getStockLayout(width, height, displayMode === "advanced");
+  const layout = getStockLayout(width, height);
 
   return (
     <Flex h="100%" w="100%">
diff --git a/packages/widgets/src/stocks/index.ts b/packages/widgets/src/stocks/index.ts
index 7cdcbb37e..2b6e637e6 100644
--- a/packages/widgets/src/stocks/index.ts
+++ b/packages/widgets/src/stocks/index.ts
@@ -12,6 +12,7 @@ const timeRangeOptions = stockPriceTimeFrames.range;
 const timeIntervalOptions = stockPriceTimeFrames.interval;
 
 export const { definition, componentLoader } = createWidgetDefinition("stockPrice", {
+  supportsAdvancedFocus: false,
   icon: IconBuildingBank,
   queryKey: [["widget", "stockPrice", "getPriceHistory"]],
   queryMatcher: ({ input }, scope) =>
diff --git a/packages/widgets/src/system-disks/component.tsx b/packages/widgets/src/system-disks/component.tsx
index 7977318c2..80e0dd1e8 100644
--- a/packages/widgets/src/system-disks/component.tsx
+++ b/packages/widgets/src/system-disks/component.tsx
@@ -9,6 +9,7 @@ import { formatBytesPair } from "@homarr/common";
 import { useI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import type { WidgetComponentProps } from "../definition";
 import { filterStorageVolumes, normalizeStorageDeviceName } from "../filter-storage-volumes";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
@@ -57,7 +58,7 @@ interface SystemDiskCardProps {
   showBackgroundBar: boolean;
   integrationName?: string;
   secondaryText?: string;
-  isAdvanced: boolean;
+  showSecondaryText: boolean;
   showTemperature: boolean;
 }
 
@@ -70,7 +71,7 @@ const SystemDiskCard = ({
   showBackgroundBar,
   integrationName,
   secondaryText,
-  isAdvanced,
+  showSecondaryText,
   showTemperature,
 }: SystemDiskCardProps) => {
   const board = useRequiredBoard();
@@ -98,8 +99,10 @@ const SystemDiskCard = ({
 
   const unhealthyLabel = t("widget.systemDisks.status.unhealthy");
   const hasHiddenTemperature = temperature !== null && temperature !== undefined && !showTemperature;
+  const hasHiddenSecondaryText = Boolean(secondaryText && secondaryText !== displayText && !showSecondaryText);
   const tooltipLabel = [
     healthy ? displayText : `${displayText} (${unhealthyLabel})`,
+    hasHiddenSecondaryText ? secondaryText : null,
     hasHiddenTemperature ? `${temperature}°C` : null,
   ]
     .filter(Boolean)
@@ -108,7 +111,7 @@ const SystemDiskCard = ({
   return (
     <Tooltip
       label={tooltipLabel}
-      disabled={(valueFits && !hasHiddenTemperature) || isAdvanced}
+      disabled={valueFits && !hasHiddenTemperature && !hasHiddenSecondaryText}
       position="top"
       withinPortal
     >
@@ -132,7 +135,7 @@ const SystemDiskCard = ({
               <span>{displayText}</span>
               {!healthy && <span style={{ marginLeft: 5 }}>{unhealthyLabel}</span>}
             </Text>
-            {isAdvanced && secondaryText && (
+            {showSecondaryText && secondaryText && secondaryText !== displayText && (
               <Text size="xs" c="dimmed">
                 {secondaryText}
               </Text>
@@ -166,10 +169,10 @@ export default function SystemResources({
   options,
   width,
   height,
-  displayMode: surfaceMode,
 }: WidgetComponentProps<"systemDisks">) {
   const queryInput = { integrationIds };
-  const { data = [] } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery(queryInput);
+  const data =
+    getUsableWidgetQueryData(clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery(queryInput)) ?? [];
 
   if (data.length === 0) return <WidgetEmptyState />;
 
@@ -193,8 +196,7 @@ export default function SystemResources({
   if (data.every((entry) => entry.healthInfo.fileSystem.length === 0)) throw new NoIntegrationDataError();
   if (disks.length === 0) return <WidgetEmptyState />;
 
-  const isAdvanced = surfaceMode === "advanced";
-  const minimumCardWidth = isAdvanced ? 320 : 260;
+  const minimumCardWidth = 260;
   const columns = Math.max(1, Math.min(disks.length, Math.floor(width / minimumCardWidth)));
   const cellWidth = width / columns;
 
@@ -210,10 +212,10 @@ export default function SystemResources({
             temperature={options.showTemperatureIfAvailable ? smartItem?.temperature : undefined}
             healthy={smartItem?.healthy ?? true} // fall back to healthy if no information is available
             showBackgroundBar={options.showBackgroundBar}
-            integrationName={isAdvanced || data.length > 1 ? integrationName : undefined}
+            integrationName={data.length > 1 ? integrationName : undefined}
             secondaryText={getAbsoluteText(item)}
-            isAdvanced={isAdvanced}
-            showTemperature={isAdvanced || (height >= 100 && cellWidth >= 220)}
+            showSecondaryText={height >= 160 && cellWidth >= 260}
+            showTemperature={height >= 100 && cellWidth >= 220}
           />
         ))}
       </SimpleGrid>
diff --git a/packages/widgets/src/system-disks/index.ts b/packages/widgets/src/system-disks/index.ts
index 66ffcc286..375d51232 100644
--- a/packages/widgets/src/system-disks/index.ts
+++ b/packages/widgets/src/system-disks/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options";
 
 export const { definition, componentLoader } = createWidgetDefinition("systemDisks", {
+  supportsAdvancedFocus: false,
   icon: IconServer2,
   queryKey: [["widget", "healthMonitoring"]],
   refetchInterval: 5,
diff --git a/packages/widgets/src/system-resources/component.tsx b/packages/widgets/src/system-resources/component.tsx
index a34d5cd81..018a3388f 100644
--- a/packages/widgets/src/system-resources/component.tsx
+++ b/packages/widgets/src/system-resources/component.tsx
@@ -7,6 +7,7 @@ import { clientApi } from "@homarr/api/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { CombinedNetworkTrafficChart } from "./chart/combined-network-traffic";
 import { SystemResourceCPUChart } from "./chart/cpu-chart";
 import { SystemResourceGPUChart } from "./chart/gpu-chart";
@@ -57,11 +58,9 @@ export default function SystemResources({
   height,
   displayMode,
 }: WidgetComponentProps<"systemResources">) {
-  const {
-    data = [],
-    dataUpdatedAt,
-    isPending,
-  } = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
+  const healthQuery = clientApi.widget.healthMonitoring.getSystemHealthStatus.useQuery({ integrationIds });
+  const data = getUsableWidgetQueryData(healthQuery) ?? [];
+  const { dataUpdatedAt, isPending } = healthQuery;
   const isAdvanced = displayMode === "advanced";
   const integrationKey = useMemo(() => integrationIds.join("\u0000"), [integrationIds]);
   const [historyByIntegration, setHistoryByIntegration] = useState<Record<string, ChartItem[]>>({});
diff --git a/packages/widgets/src/timetable/component.tsx b/packages/widgets/src/timetable/component.tsx
index bc6b62d20..29602c9a8 100644
--- a/packages/widgets/src/timetable/component.tsx
+++ b/packages/widgets/src/timetable/component.tsx
@@ -1,11 +1,11 @@
 import { Alert, Badge, Center, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
-import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { DynamicSelectOption } from "../_inputs/widget-dynamic-select-input";
+import { formatLocalizedTime } from "../common/locale";
 import type { WidgetComponentProps } from "../definition";
 
 export default function TimetableWidget({
@@ -55,11 +55,12 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, he
   });
   const t = useScopedI18n("widget.timetable");
   const tCommon = useScopedI18n("common");
+  const locale = useCurrentIntlLocale();
 
   if (error && timetable === undefined) throw error;
 
   const entries = timetable?.entries ?? [];
-  const staleTime = timetable ? dayjs(timetable.timestamp).format("HH:mm:ss") : undefined;
+  const staleTime = timetable ? formatLocalizedTime(timetable.timestamp, locale, { includeSeconds: true }) : undefined;
   const staleWarning = error && staleTime ? t("warning.stale", { time: staleTime }) : undefined;
   const compactStaleWarning = error && staleTime ? t("warning.staleCompact") : undefined;
   const isAdvanced = displayMode === "advanced";
@@ -104,6 +105,7 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, he
                 dense={isDense}
                 showLine={showLine}
                 showPlatform={showPlatform}
+                locale={locale}
               />
             ))
           ) : (
@@ -117,7 +119,7 @@ const TimetableWidgetInner = ({ station, baseUrl, itemId, displayMode, width, he
       </ScrollArea>
       {displayMode === "advanced" && timetable && (
         <Text size="xs" c="dimmed" ta="right">
-          {dayjs(timetable.timestamp).format("HH:mm:ss")}
+          {formatLocalizedTime(timetable.timestamp, locale, { includeSeconds: true })}
         </Text>
       )}
     </Stack>
@@ -137,11 +139,13 @@ function DepartureRow({
   dense,
   showLine,
   showPlatform,
+  locale,
 }: {
   entry: TimetableEntryView;
   dense: boolean;
   showLine: boolean;
   showPlatform: boolean;
+  locale: string;
 }) {
   return (
     <Group justify="space-between" w="100%" wrap="nowrap">
@@ -159,7 +163,7 @@ function DepartureRow({
           </Badge>
         )}
         <Text size={dense ? "xs" : "sm"} fw={dense ? 600 : undefined} style={{ whiteSpace: "nowrap" }}>
-          {dayjs(entry.timestamp).format("HH:mm")}{" "}
+          {formatLocalizedTime(entry.timestamp, locale)}{" "}
           {entry.delay >= 1 && (
             <Text size={dense ? "xs" : "sm"} span c="red">
               +{entry.delay}&apos;
diff --git a/packages/widgets/src/tracearr/component.tsx b/packages/widgets/src/tracearr/component.tsx
index 3992fe4f7..04687c823 100644
--- a/packages/widgets/src/tracearr/component.tsx
+++ b/packages/widgets/src/tracearr/component.tsx
@@ -7,6 +7,7 @@ import type { TracearrDashboardData } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import { formatTotalTracearrBitrate } from "./bitrate";
 import { RecentActivityList } from "./recent-activity-section";
@@ -67,7 +68,8 @@ interface TracearrContentProps {
 
 function TracearrContent({ integrationIds, options, width, height, displayMode }: TracearrContentProps) {
   const t = useScopedI18n("widget.tracearr");
-  const { data: dashboardData = [] } = clientApi.widget.tracearr.getDashboard.useQuery({ integrationIds });
+  const dashboardData =
+    getUsableWidgetQueryData(clientApi.widget.tracearr.getDashboard.useQuery({ integrationIds })) ?? [];
 
   // Merge data from all integrations
   const combinedData = dashboardData.reduce<TracearrDashboardData>(
diff --git a/packages/widgets/src/traefik/component.tsx b/packages/widgets/src/traefik/component.tsx
index a5503583c..5af263385 100644
--- a/packages/widgets/src/traefik/component.tsx
+++ b/packages/widgets/src/traefik/component.tsx
@@ -17,6 +17,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
 
@@ -65,7 +66,7 @@ function TraefikWidgetContent({
   displayMode = "compact",
 }: WidgetComponentProps<"traefik">) {
   const t = useScopedI18n("widget.traefik");
-  const { data } = clientApi.widget.traefik.getDashboard.useQuery({ integrationIds });
+  const data = getUsableWidgetQueryData(clientApi.widget.traefik.getDashboard.useQuery({ integrationIds }));
 
   if (!data) return <WidgetEmptyState />;
 
diff --git a/packages/widgets/src/umami/component.tsx b/packages/widgets/src/umami/component.tsx
index 553550b98..e4fbbe52e 100644
--- a/packages/widgets/src/umami/component.tsx
+++ b/packages/widgets/src/umami/component.tsx
@@ -7,7 +7,7 @@ import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
-import { setWidgetRuntimeQueries } from "../definition";
+import { useWidgetRuntimeQueries } from "../runtime-hooks";
 import { UmamiContent } from "./umami-content";
 
 export default function UmamiWidget({
@@ -16,13 +16,8 @@ export default function UmamiWidget({
   width,
   height,
   displayMode = "compact",
-  widgetStateRef,
+  widgetRuntimeRef,
 }: WidgetComponentProps<"umami">) {
-  if (!options.websiteId || options.websiteId.trim() === "") {
-    setWidgetRuntimeQueries(widgetStateRef, []);
-    return <NoWebsiteConfigured />;
-  }
-
   const integrationId = integrationIds[0] ?? "";
   const commonTopInput = {
     integrationId,
@@ -30,39 +25,51 @@ export default function UmamiWidget({
     timeFrame: options.timeFrame,
     limit: options.topCount,
   };
-  setWidgetRuntimeQueries(widgetStateRef, [
-    getQueryKey(
-      clientApi.widget.umami.getVisitorStats,
-      {
-        integrationIds,
-        websiteId: options.websiteId,
-        timeFrame: options.timeFrame,
-        eventName: options.eventName || undefined,
-      },
-      "query",
-    ),
-    getQueryKey(clientApi.widget.umami.getActiveVisitors, { integrationId, websiteId: options.websiteId }, "query"),
-    ...(options.viewMode === "events" && options.eventNames.length > 0
+  const hasWebsite = Boolean(options.websiteId?.trim());
+  useWidgetRuntimeQueries(
+    widgetRuntimeRef,
+    hasWebsite
       ? [
           getQueryKey(
-            clientApi.widget.umami.getMultiEventTimeSeries,
+            clientApi.widget.umami.getVisitorStats,
             {
-              integrationId,
+              integrationIds,
               websiteId: options.websiteId,
               timeFrame: options.timeFrame,
-              eventNames: [...options.eventNames].toSorted(),
+              eventName: options.eventName || undefined,
             },
             "query",
           ),
+          getQueryKey(
+            clientApi.widget.umami.getActiveVisitors,
+            { integrationId, websiteId: options.websiteId },
+            "query",
+          ),
+          ...(options.viewMode === "events" && options.eventNames.length > 0
+            ? [
+                getQueryKey(
+                  clientApi.widget.umami.getMultiEventTimeSeries,
+                  {
+                    integrationId,
+                    websiteId: options.websiteId,
+                    timeFrame: options.timeFrame,
+                    eventNames: [...options.eventNames].toSorted(),
+                  },
+                  "query",
+                ),
+              ]
+            : []),
+          ...(displayMode === "advanced" || options.viewMode === "topPages"
+            ? [getQueryKey(clientApi.widget.umami.getTopPages, commonTopInput, "query")]
+            : []),
+          ...(displayMode === "advanced" || options.viewMode === "topReferrers"
+            ? [getQueryKey(clientApi.widget.umami.getTopReferrers, commonTopInput, "query")]
+            : []),
         ]
-      : []),
-    ...(displayMode === "advanced" || options.viewMode === "topPages"
-      ? [getQueryKey(clientApi.widget.umami.getTopPages, commonTopInput, "query")]
-      : []),
-    ...(displayMode === "advanced" || options.viewMode === "topReferrers"
-      ? [getQueryKey(clientApi.widget.umami.getTopReferrers, commonTopInput, "query")]
-      : []),
-  ]);
+      : [],
+  );
+
+  if (!hasWebsite) return <NoWebsiteConfigured />;
 
   return (
     <UmamiContent
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 08d782df9..493520d04 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { BarChart, LineChart } from "@mantine/charts";
-import { Box, Group, ScrollArea, SimpleGrid, Stack, Text, useMantineColorScheme } from "@mantine/core";
+import { Box, Group, ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { formatDuration } from "@homarr/common";
@@ -12,6 +12,8 @@ import { UmamiEventsContent } from "./umami-events-content";
 import { UmamiTopPagesContent, UmamiTopReferrersContent } from "./umami-top-list";
 import { formatTimeFrameLabel, formatXLabel, umamiQueryOptions } from "./umami-utils";
 import type { TimeFrame } from "./umami-utils";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 
 interface UmamiContentProps {
   integrationIds: string[];
@@ -43,46 +45,31 @@ export function UmamiContent({
   displayMode,
 }: UmamiContentProps) {
   const t = useScopedI18n("widget.umami");
-  const tCommon = useScopedI18n("common");
   const locale = useCurrentIntlLocale();
-  const { colorScheme } = useMantineColorScheme();
-  const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
+  const tickColor = "var(--mantine-color-dimmed)";
 
-  const {
-    data: results,
-    isPending: isStatsPending,
-    error: statsError,
-  } = clientApi.widget.umami.getVisitorStats.useQuery(
+  const statsQuery = clientApi.widget.umami.getVisitorStats.useQuery(
     { integrationIds, websiteId, timeFrame, eventName },
     umamiQueryOptions,
   );
+  const results = getUsableWidgetQueryData(statsQuery);
 
   const activeVisitorsInput = { integrationId: integrationIds[0] ?? "", websiteId };
-  const { data: activeVisitors = 0 } = clientApi.widget.umami.getActiveVisitors.useQuery(
-    activeVisitorsInput,
-    umamiQueryOptions,
-  );
+  const activeVisitorsQuery = clientApi.widget.umami.getActiveVisitors.useQuery(activeVisitorsInput, umamiQueryOptions);
+  const activeVisitors = activeVisitorsQuery.data;
 
-  const { data: multiEventSeries } = clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
+  const multiEventQuery = clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
     { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, eventNames: [...eventNames].toSorted() },
     { enabled: viewMode === "events" && eventNames.length > 0, ...umamiQueryOptions },
   );
+  const multiEventSeries = multiEventQuery.data;
 
   const multiEventTotal = multiEventSeries
     ? multiEventSeries.flatMap(({ dataPoints }) => dataPoints).reduce((sum, { y }) => sum + y, 0)
     : undefined;
 
   const firstResult = results?.[0];
-  if (isStatsPending) {
-    return (
-      <Stack align="center" justify="center" h="100%">
-        <Text c="dimmed" size="sm">
-          {tCommon("action.loading")}
-        </Text>
-      </Stack>
-    );
-  }
-  if (statsError && results === undefined) throw statsError;
+  if (isInitialWidgetQueryPending(statsQuery)) return <WidgetQueryLoadingState />;
   if (!firstResult) {
     return (
       <Stack align="center" justify="center" h="100%">
@@ -212,7 +199,7 @@ export function UmamiContent({
     );
 
   return (
-    <Stack gap={isDense ? 2 : 4} p={isDense ? 4 : "xs"} h="100%">
+    <Stack gap={isDense ? 2 : 4} p={isDense ? 4 : "xs"} h="100%" pos="relative">
       <Group justify="space-between" align="baseline" wrap="nowrap">
         <Text size="xs" c="dimmed" truncate="end" style={{ maxWidth: "55%" }}>
           {visitorStats.domain} ({formatTimeFrameLabel(timeFrame, t)})
@@ -255,9 +242,11 @@ export function UmamiContent({
       </Group>
       {showSecondaryStats && (
         <Group wrap="wrap" style={{ columnGap: 12, rowGap: 4 }}>
-          <Text size="xs" c="green">
-            ● {activeVisitors.toLocaleString(locale)} {t("active")}
-          </Text>
+          {activeVisitors !== undefined && (
+            <Text size="xs" c="green">
+              ● {activeVisitors.toLocaleString(locale)} {t("active")}
+            </Text>
+          )}
           <Text size="xs" c="dimmed">
             {visitorStats.totalPageviews.toLocaleString(locale)} {t("pageviews")}
           </Text>
@@ -279,6 +268,14 @@ export function UmamiContent({
       <Box mt={4} style={{ flex: 1, minHeight: 0 }}>
         {displayMode === "advanced" ? advancedContent : selectedView}
       </Box>
+      {(statsQuery.error || activeVisitorsQuery.error || multiEventQuery.error) && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator
+            error={statsQuery.error ?? activeVisitorsQuery.error ?? multiEventQuery.error}
+            label={t("name")}
+          />
+        </Box>
+      )}
     </Stack>
   );
 }
diff --git a/packages/widgets/src/umami/umami-events-content.tsx b/packages/widgets/src/umami/umami-events-content.tsx
index a1af745e2..752d5f33b 100644
--- a/packages/widgets/src/umami/umami-events-content.tsx
+++ b/packages/widgets/src/umami/umami-events-content.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { BarChart, LineChart } from "@mantine/charts";
-import { Box, Group, Stack, Text, useMantineColorScheme } from "@mantine/core";
+import { Box, Group, Stack, Text } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import type { UmamiEventSeries } from "@homarr/integrations/types";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { EVENT_COLORS, formatXLabel, umamiQueryOptions } from "./umami-utils";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
 interface UmamiEventsContentProps {
   integrationIds: string[];
@@ -28,13 +29,15 @@ export function UmamiEventsContent({
 }: UmamiEventsContentProps) {
   const t = useScopedI18n("widget.umami");
   const locale = useCurrentIntlLocale();
-  const { colorScheme } = useMantineColorScheme();
-  const tickColor = colorScheme === "dark" ? "#c1c2c5" : "#495057";
+  const tickColor = "var(--mantine-color-dimmed)";
 
-  const { data: series = [] } = clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
-    { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, eventNames: [...eventNames].toSorted() },
-    umamiQueryOptions,
-  );
+  const series =
+    getUsableWidgetQueryData(
+      clientApi.widget.umami.getMultiEventTimeSeries.useQuery(
+        { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, eventNames: [...eventNames].toSorted() },
+        umamiQueryOptions,
+      ),
+    ) ?? [];
 
   if (eventNames.length === 0) {
     return (
diff --git a/packages/widgets/src/umami/umami-top-list.tsx b/packages/widgets/src/umami/umami-top-list.tsx
index 3d17d257a..7824602c4 100644
--- a/packages/widgets/src/umami/umami-top-list.tsx
+++ b/packages/widgets/src/umami/umami-top-list.tsx
@@ -7,6 +7,7 @@ import type { UmamiMetricItem } from "@homarr/integrations/types";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { umamiQueryOptions } from "./umami-utils";
+import { getUsableWidgetQueryData } from "../common/query-state";
 
 interface UmamiTopListProps {
   integrationIds: string[];
@@ -17,19 +18,25 @@ interface UmamiTopListProps {
 
 export function UmamiTopPagesContent({ integrationIds, websiteId, timeFrame, limit }: UmamiTopListProps) {
   const t = useScopedI18n("widget.umami");
-  const { data = [] } = clientApi.widget.umami.getTopPages.useQuery(
-    { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
-    umamiQueryOptions,
-  );
+  const data =
+    getUsableWidgetQueryData(
+      clientApi.widget.umami.getTopPages.useQuery(
+        { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
+        umamiQueryOptions,
+      ),
+    ) ?? [];
   return <UmamiTopList items={data} heading={t("option.viewMode.option.topPages")} emptyLabel={t("topPages.direct")} />;
 }
 
 export function UmamiTopReferrersContent({ integrationIds, websiteId, timeFrame, limit }: UmamiTopListProps) {
   const t = useScopedI18n("widget.umami");
-  const { data = [] } = clientApi.widget.umami.getTopReferrers.useQuery(
-    { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
-    umamiQueryOptions,
-  );
+  const data =
+    getUsableWidgetQueryData(
+      clientApi.widget.umami.getTopReferrers.useQuery(
+        { integrationId: integrationIds[0] ?? "", websiteId, timeFrame, limit },
+        umamiQueryOptions,
+      ),
+    ) ?? [];
   return (
     <UmamiTopList
       items={data}
diff --git a/packages/widgets/src/ups/component.tsx b/packages/widgets/src/ups/component.tsx
index a7d140ce7..b291c5937 100644
--- a/packages/widgets/src/ups/component.tsx
+++ b/packages/widgets/src/ups/component.tsx
@@ -22,6 +22,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationSelectedError } from "../errors/no-integration-selected";
 
 const statusColors: Record<UpsStatus, string> = {
@@ -66,7 +67,7 @@ interface UpsContentProps {
 
 function UpsContent({ integrationIds, options, width, height, displayMode }: UpsContentProps) {
   const t = useScopedI18n("widget.ups");
-  const { data } = clientApi.widget.ups.getSummaries.useQuery({ integrationIds });
+  const data = getUsableWidgetQueryData(clientApi.widget.ups.getSummaries.useQuery({ integrationIds }));
 
   if (!data) return <WidgetEmptyState />;
 
diff --git a/packages/widgets/src/uptime-kuma/component.tsx b/packages/widgets/src/uptime-kuma/component.tsx
index 838ce7eaa..6dccbbb11 100644
--- a/packages/widgets/src/uptime-kuma/component.tsx
+++ b/packages/widgets/src/uptime-kuma/component.tsx
@@ -10,6 +10,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { NoIntegrationDataError } from "../errors/no-data-integration";
 import classes from "./component.module.css";
 import { aggregateUptimeKumaDashboards } from "./aggregate";
@@ -127,7 +128,7 @@ interface UptimeKumaContentProps {
 
 function UptimeKumaContent({ integrationIds, options, width, height, displayMode }: UptimeKumaContentProps) {
   const t = useScopedI18n("widget.uptimeKuma");
-  const { data: dashboardData } = clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds });
+  const dashboardData = getUsableWidgetQueryData(clientApi.widget.uptimeKuma.getDashboard.useQuery({ integrationIds }));
 
   if (!dashboardData) return <WidgetEmptyState />;
 
diff --git a/packages/widgets/src/video/component.tsx b/packages/widgets/src/video/component.tsx
index 954065e01..bc0bdf1b9 100644
--- a/packages/widgets/src/video/component.tsx
+++ b/packages/widgets/src/video/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { Anchor, Badge, Box, Center, Group, Stack, Title } from "@mantine/core";
+import { Anchor, Box, Center, Group, Stack, Title } from "@mantine/core";
 import { IconBrandYoutube, IconDeviceCctvOff } from "@tabler/icons-react";
 import videojs from "video.js";
 
@@ -16,7 +16,7 @@ import type Player from "video.js/dist/types/player";
 
 import { createDocumentationLink } from "@homarr/definitions";
 
-export default function VideoWidget({ options, isEditMode, displayMode }: WidgetComponentProps<"video">) {
+export default function VideoWidget({ options, isEditMode }: WidgetComponentProps<"video">) {
   if (options.feedUrl.trim() === "") {
     return <NoUrl />;
   }
@@ -25,7 +25,7 @@ export default function VideoWidget({ options, isEditMode, displayMode }: Widget
     return <ForYoutubeUseIframe />;
   }
 
-  return <Feed options={options} isEditMode={isEditMode} isAdvanced={displayMode === "advanced"} />;
+  return <Feed options={options} isEditMode={isEditMode} />;
 }
 
 export const isYouTubeUrl = (value: string): boolean => {
@@ -64,11 +64,7 @@ const ForYoutubeUseIframe = () => {
   );
 };
 
-const Feed = ({
-  options,
-  isEditMode,
-  isAdvanced,
-}: Pick<WidgetComponentProps<"video">, "options"> & { isEditMode: boolean; isAdvanced: boolean }) => {
+const Feed = ({ options, isEditMode }: Pick<WidgetComponentProps<"video">, "options"> & { isEditMode: boolean }) => {
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Player>(null);
 
@@ -111,8 +107,8 @@ const Feed = ({
 
   useEffect(() => {
     if (!playerRef.current) return;
-    playerRef.current.controls(!isEditMode && (options.hasControls || isAdvanced));
-  }, [isAdvanced, isEditMode, options.hasControls]);
+    playerRef.current.controls(!isEditMode && options.hasControls);
+  }, [isEditMode, options.hasControls]);
 
   useEffect(() => {
     const player = playerRef.current;
@@ -128,19 +124,6 @@ const Feed = ({
   return (
     <Group justify="center" w="100%" h="100%" pos="relative" style={{ pointerEvents: isEditMode ? "none" : undefined }}>
       <Box w="100%" h="100%" ref={videoRef} />
-      {isAdvanced && (
-        <Badge pos="absolute" top={8} left={8} variant="filled" color="dark" maw="calc(100% - 16px)">
-          {getVideoHost(options.feedUrl)}
-        </Badge>
-      )}
     </Group>
   );
 };
-
-const getVideoHost = (value: string) => {
-  try {
-    return new URL(value).host;
-  } catch {
-    return value;
-  }
-};
diff --git a/packages/widgets/src/video/index.ts b/packages/widgets/src/video/index.ts
index d35a83dd5..36f3ea677 100644
--- a/packages/widgets/src/video/index.ts
+++ b/packages/widgets/src/video/index.ts
@@ -4,6 +4,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("video", {
+  supportsAdvancedFocus: false,
   icon: IconDeviceCctv,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/vpn/component.tsx b/packages/widgets/src/vpn/component.tsx
index 399264bbe..2c2a7bbe5 100644
--- a/packages/widgets/src/vpn/component.tsx
+++ b/packages/widgets/src/vpn/component.tsx
@@ -6,23 +6,20 @@ import { clientApi } from "@homarr/api/client";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
+import { getUsableWidgetQueryData } from "../common/query-state";
 import { VpnIntegrationCard } from "./vpn-card";
 
-export default function VpnWidget({
-  options,
-  integrationIds,
-  width,
-  height,
-  displayMode = "compact",
-}: WidgetComponentProps<"vpn">) {
-  const { data: integrations = [], isPending } = clientApi.widget.vpn.getSummaries.useQuery({
+export default function VpnWidget({ options, integrationIds, width, height }: WidgetComponentProps<"vpn">) {
+  const summariesQuery = clientApi.widget.vpn.getSummaries.useQuery({
     ...options,
     integrationIds,
   });
+  const integrations = getUsableWidgetQueryData(summariesQuery) ?? [];
+  const { isPending } = summariesQuery;
   const t = useScopedI18n("widget.vpn");
   const tCommon = useScopedI18n("common");
   const locale = useCurrentIntlLocale();
-  const dense = displayMode === "compact" && (width < 240 || height < 120);
+  const dense = width < 240 || height < 120;
 
   if (isPending || integrations.length === 0) {
     return (
@@ -35,7 +32,7 @@ export default function VpnWidget({
   }
 
   const [vpn] = integrations;
-  if (displayMode === "compact" && integrations.length === 1 && vpn) {
+  if (integrations.length === 1 && vpn) {
     return (
       <Flex align="center" justify="center" w="100%" h="100%" px="xs" py="sm">
         <VpnIntegrationCard
@@ -48,38 +45,25 @@ export default function VpnWidget({
     );
   }
 
-  if (displayMode === "advanced") {
-    return (
-      <ScrollArea h="100%" p="md">
-        <SimpleGrid cols={width >= 760 ? 2 : 1} spacing="md">
-          {integrations.map((result) => (
-            <Stack key={result.integration.id} gap={4} p="sm">
-              <VpnIntegrationCard vpn={result.summary} integrationName={result.integration.name} variant="list" />
-              {!result.error && new Date(result.integration.updatedAt).getTime() > 0 && (
-                <Text size="xs" c="dimmed" ta="right">
-                  {new Date(result.integration.updatedAt).toLocaleString(locale)}
-                </Text>
-              )}
-            </Stack>
-          ))}
-        </SimpleGrid>
-      </ScrollArea>
-    );
-  }
-
   return (
-    <ScrollArea className="scroll-area-w100" w="100%" h="100%" offsetScrollbars>
-      <Stack w="100%" gap="sm" py="xs" px="xs">
+    <ScrollArea className="scroll-area-w100" w="100%" h="100%" offsetScrollbars p="xs">
+      <SimpleGrid cols={width >= 640 ? 2 : 1} spacing="sm">
         {integrations.map((result) => (
-          <VpnIntegrationCard
-            key={result.integration.id}
-            vpn={result.summary}
-            integrationName={result.integration.name}
-            variant="list"
-            dense={dense}
-          />
+          <Stack key={result.integration.id} gap={4}>
+            <VpnIntegrationCard
+              vpn={result.summary}
+              integrationName={result.integration.name}
+              variant="list"
+              dense={dense}
+            />
+            {height >= 180 && !result.error && new Date(result.integration.updatedAt).getTime() > 0 && (
+              <Text size="xs" c="dimmed" ta="right">
+                {new Date(result.integration.updatedAt).toLocaleString(locale)}
+              </Text>
+            )}
+          </Stack>
         ))}
-      </Stack>
+      </SimpleGrid>
     </ScrollArea>
   );
 }
diff --git a/packages/widgets/src/vpn/index.ts b/packages/widgets/src/vpn/index.ts
index b3cbe8c73..f8418d86f 100644
--- a/packages/widgets/src/vpn/index.ts
+++ b/packages/widgets/src/vpn/index.ts
@@ -6,6 +6,7 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("vpn", {
+  supportsAdvancedFocus: false,
   icon: IconShieldLock,
   refetchInterval: null,
   createOptions() {
diff --git a/packages/widgets/src/weather/component.spec.ts b/packages/widgets/src/weather/component.spec.ts
index 44bfe8847..0340625ad 100644
--- a/packages/widgets/src/weather/component.spec.ts
+++ b/packages/widgets/src/weather/component.spec.ts
@@ -11,8 +11,8 @@ describe("weather formatting", () => {
   it("keeps zero wind speeds and missing forecast values truthful", () => {
     expect(getPreferredWindSpeed(0)).toBe("0.0");
     expect(getPreferredWindSpeed(undefined)).toBe("?");
-    expect(getPreferredTime(undefined)).toBe("?");
-    expect(getPreferredTime("invalid")).toBe("?");
+    expect(getPreferredTime(undefined, "en-US")).toBe("?");
+    expect(getPreferredTime("invalid", "en-US")).toBe("?");
   });
 
   it("limits compact forecasts by both axes", () => {
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index 249c09f3c..97a414604 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useId } from "react";
-import { Group, Popover, Stack, Table, Text, UnstyledButton } from "@mantine/core";
+import { Box, Group, Popover, Stack, Table, Text, UnstyledButton } from "@mantine/core";
 import {
   IconArrowDownRight,
   IconArrowUpRight,
@@ -17,12 +17,15 @@ import dayjs from "dayjs";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { metricToImperial } from "@homarr/common";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { WidgetEmptyState } from "../common/empty-state";
+import { formatLocalizedDate, formatLocalizedTime } from "../common/locale";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
 import { AnimatedWeatherIcon } from "./animated-icon";
-import { WeatherDescription } from "./icon";
+import { formatWeatherDate, WeatherDescription } from "./icon";
 import classes from "./component.module.css";
 
 export default function WeatherWidget({
@@ -36,34 +39,46 @@ export default function WeatherWidget({
     latitude: options.location.latitude,
     longitude: options.location.longitude,
   };
-  const { data: weather } = clientApi.widget.weather.atLocation.useQuery(input);
+  const weatherQuery = clientApi.widget.weather.atLocation.useQuery(input);
+  const weather = getUsableWidgetQueryData(weatherQuery);
 
+  if (isInitialWidgetQueryPending(weatherQuery)) return <WidgetQueryLoadingState />;
   if (!weather) return <WidgetEmptyState />;
 
-  if (displayMode === "advanced") {
-    return <AdvancedWeather weather={weather} options={options} />;
-  }
+  const content =
+    displayMode === "advanced" ? (
+      <AdvancedWeather weather={weather} options={options} />
+    ) : (
+      <Stack
+        align="center"
+        gap="sm"
+        justify="center"
+        w="100%"
+        h="100%"
+        style={{ pointerEvents: isEditMode ? "none" : undefined }}
+      >
+        {options.hasForecast ? (
+          <WeeklyForecast
+            weather={weather}
+            options={options}
+            isEditMode={isEditMode}
+            maxDays={getVisibleForecastDays(options.forecastDayCount, width, height)}
+          />
+        ) : (
+          <DailyWeather weather={weather} options={options} isEditMode={isEditMode} />
+        )}
+      </Stack>
+    );
 
   return (
-    <Stack
-      align="center"
-      gap="sm"
-      justify="center"
-      w="100%"
-      h="100%"
-      style={{ pointerEvents: isEditMode ? "none" : undefined }}
-    >
-      {options.hasForecast ? (
-        <WeeklyForecast
-          weather={weather}
-          options={options}
-          isEditMode={isEditMode}
-          maxDays={getVisibleForecastDays(options.forecastDayCount, width, height)}
-        />
-      ) : (
-        <DailyWeather weather={weather} options={options} isEditMode={isEditMode} />
+    <Box h="100%" w="100%" pos="relative">
+      {content}
+      {weatherQuery.error && (
+        <Box pos="absolute" top={4} right={4}>
+          <WidgetQueryErrorIndicator error={weatherQuery.error} label="Weather" />
+        </Box>
       )}
-    </Stack>
+    </Box>
   );
 }
 
@@ -77,6 +92,7 @@ interface CompactWeatherProps extends WeatherProps {
 
 const AdvancedWeather = ({ options, weather }: WeatherProps) => {
   const forecastHeadingId = useId();
+  const locale = useCurrentIntlLocale();
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
 
@@ -164,10 +180,10 @@ const AdvancedWeather = ({ options, weather }: WeatherProps) => {
                   <Table.Td>
                     <Stack gap={0}>
                       <Text size="sm" fw={600} tt="capitalize">
-                        {dayjs(dayWeather.time).format("ddd")}
+                        {formatLocalizedDate(dayWeather.time, locale, { weekday: "short" })}
                       </Text>
                       <Text size="xs" c="dimmed">
-                        {dayjs(dayWeather.time).format("MMM D")}
+                        {formatLocalizedDate(dayWeather.time, locale, { month: "short", day: "numeric" })}
                       </Text>
                     </Stack>
                   </Table.Td>
@@ -219,14 +235,14 @@ const AdvancedWeather = ({ options, weather }: WeatherProps) => {
                     <Group gap="xs" wrap="nowrap">
                       <Group gap={3} wrap="nowrap">
                         <IconSunrise size={15} aria-hidden />
-                        <Text size="sm">{getPreferredTime(dayWeather.sunrise)}</Text>
+                        <Text size="sm">{getPreferredTime(dayWeather.sunrise, locale)}</Text>
                       </Group>
                       <Text size="sm" c="dimmed">
                         /
                       </Text>
                       <Group gap={3} wrap="nowrap">
                         <IconSunset size={15} aria-hidden />
-                        <Text size="sm">{getPreferredTime(dayWeather.sunset)}</Text>
+                        <Text size="sm">{getPreferredTime(dayWeather.sunset, locale)}</Text>
                       </Group>
                     </Group>
                   </Table.Td>
@@ -367,6 +383,7 @@ const WeeklyForecast = ({ options, weather, isEditMode, maxDays }: CompactWeathe
 function Forecast({ weather, options, isEditMode, maxDays }: CompactWeatherProps & { maxDays: number }) {
   const dateFormat = options.dateFormat;
   const t = useScopedI18n("widget.weather");
+  const locale = useCurrentIntlLocale();
   return (
     <Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="sm">
       {weather.daily.slice(0, maxDays).map((dayWeather, index) => (
@@ -374,7 +391,7 @@ function Forecast({ weather, options, isEditMode, maxDays }: CompactWeatherProps
           <Popover.Target>
             <UnstyledButton
               className={classes.forecastButton}
-              aria-label={t("detailsFor", { date: dayjs(dayWeather.time).format(dateFormat) })}
+              aria-label={t("detailsFor", { date: formatWeatherDate(dayWeather.time, locale, dateFormat) })}
               disabled={isEditMode}
             >
               <Stack
@@ -388,7 +405,7 @@ function Forecast({ weather, options, isEditMode, maxDays }: CompactWeatherProps
                 align="center"
               >
                 <Text component="span" fz="xl">
-                  {dayjs(dayWeather.time).format("dd")}
+                  {formatLocalizedDate(dayWeather.time, locale, { weekday: "short" })}
                 </Text>
                 <AnimatedWeatherIcon size={16} code={dayWeather.weatherCode} />
                 <Text component="span" fz={16}>
@@ -413,8 +430,8 @@ function Forecast({ weather, options, isEditMode, maxDays }: CompactWeatherProps
                 options.isFormatFahrenheit,
                 options.disableTemperatureDecimals,
               )}
-              sunrise={dayjs(dayWeather.sunrise).format("HH:mm")}
-              sunset={dayjs(dayWeather.sunset).format("HH:mm")}
+              sunrise={getPreferredTime(dayWeather.sunrise, locale)}
+              sunset={getPreferredTime(dayWeather.sunset, locale)}
               maxWindSpeed={dayWeather.maxWindSpeed}
               maxWindGusts={dayWeather.maxWindGusts}
               humidity={dayWeather.humidity}
@@ -436,11 +453,8 @@ export const getPreferredUnit = (value?: number, isFahrenheit = false, disableTe
 export const getPreferredWindSpeed = (value: number | undefined, useImperialSpeed = false): string =>
   value === undefined ? "?" : (useImperialSpeed ? metricToImperial(value) : value).toFixed(1);
 
-export const getPreferredTime = (value: string | undefined): string => {
-  if (!value) return "?";
-  const time = dayjs(value);
-  return time.isValid() ? time.format("HH:mm") : "?";
-};
+export const getPreferredTime = (value: string | undefined, locale = "en-US"): string =>
+  value ? formatLocalizedTime(value, locale) : "?";
 
 export const getVisibleForecastDays = (configuredDays: number, width: number, height: number): number => {
   const widthBudget = Math.max(1, Math.floor(width / 58));
diff --git a/packages/widgets/src/weather/icon.tsx b/packages/widgets/src/weather/icon.tsx
index 6153484f0..1389281ed 100644
--- a/packages/widgets/src/weather/icon.tsx
+++ b/packages/widgets/src/weather/icon.tsx
@@ -14,13 +14,12 @@ import {
   IconTemperaturePlus,
   IconWind,
 } from "@tabler/icons-react";
-import dayjs from "dayjs";
-
 import { metricToImperial } from "@homarr/common";
 import type { TranslationObject } from "@homarr/translation";
-import { useScopedI18n } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
+import { formatLocalizedDate } from "../common/locale";
 import type { WidgetProps } from "../definition";
 
 interface WeatherIconProps {
@@ -84,6 +83,7 @@ export const WeatherDescription = ({
 }: WeatherDescriptionProps) => {
   const t = useScopedI18n("widget.weather");
   const tCommon = useScopedI18n("common");
+  const locale = useCurrentIntlLocale();
 
   const { name } = weatherDefinitions.find((definition) => definition.codes.includes(weatherCode)) ?? unknownWeather;
 
@@ -93,7 +93,7 @@ export const WeatherDescription = ({
 
   return (
     <Stack align="center" gap="0">
-      <Text fz="24px">{dayjs(time).format(dateFormat)}</Text>
+      <Text fz="24px">{formatWeatherDate(time, locale, dateFormat)}</Text>
       <Text fz="16px">{t(`kind.${name}`)}</Text>
       <List>
         <List.Item icon={<IconTemperaturePlus size={15} />}>{`${tCommon("information.max")}: ${maxTemp}`}</List.Item>
@@ -124,6 +124,24 @@ export const WeatherDescription = ({
   );
 };
 
+export const formatWeatherDate = (
+  value: string | undefined,
+  locale: string,
+  pattern: WidgetProps<"weather">["options"]["dateFormat"] | undefined,
+) => {
+  if (!value) return "?";
+
+  const options: Intl.DateTimeFormatOptions = pattern?.includes("dddd")
+    ? { weekday: "long", month: "long", day: "numeric" }
+    : pattern?.includes("YYYY")
+      ? { year: "numeric", month: "2-digit", day: "2-digit" }
+      : pattern?.includes("MMM")
+        ? { month: "short", day: "numeric" }
+        : { month: "2-digit", day: "2-digit" };
+
+  return formatLocalizedDate(value, locale, options);
+};
+
 interface WeatherDefinitionType {
   icon: TablerIcon;
   name: keyof TranslationObject["widget"]["weather"]["kind"];
diff --git a/packages/widgets/src/widget-runtime.spec.ts b/packages/widgets/src/widget-runtime.spec.ts
new file mode 100644
index 000000000..6e32ef457
--- /dev/null
+++ b/packages/widgets/src/widget-runtime.spec.ts
@@ -0,0 +1,88 @@
+// @vitest-environment jsdom
+
+import { act, createElement, StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { renderToString } from "react-dom/server";
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import type { WidgetRuntimeRef } from "./definition";
+import { createWidgetRuntimeState, getWidgetRuntimeQueries } from "./definition";
+import { useWidgetRuntimeActions, useWidgetRuntimeQueries } from "./runtime-hooks";
+
+const queryPath = ["widget", "calendar", "findAllEvents"] as const;
+
+const RuntimeRegistration = ({
+  runtimeRef,
+  month,
+  action,
+}: {
+  runtimeRef: WidgetRuntimeRef;
+  month: number;
+  action?: () => void;
+}) => {
+  useWidgetRuntimeQueries(runtimeRef, [[queryPath, { input: { month } }]]);
+  useWidgetRuntimeActions(runtimeRef, action ? { togglePolling: action } : {});
+  return null;
+};
+
+describe("widget runtime registration", () => {
+  let host: HTMLDivElement | undefined;
+  let root: ReturnType<typeof createRoot> | undefined;
+
+  afterEach(async () => {
+    if (root) await act(async () => root?.unmount());
+    host?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  test("does not publish query identity from an uncommitted render", () => {
+    const runtimeRef = { current: createWidgetRuntimeState() };
+
+    renderToString(createElement(RuntimeRegistration, { runtimeRef, month: 6 }));
+
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([]);
+    expect(runtimeRef.current.actions).toEqual({});
+  });
+
+  test("survives StrictMode, replaces option-dependent queries, and cleans up on remount", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    const runtimeRef = { current: createWidgetRuntimeState() };
+    const action = vi.fn();
+
+    await act(async () =>
+      root?.render(
+        createElement(StrictMode, null, createElement(RuntimeRegistration, { runtimeRef, month: 6, action })),
+      ),
+    );
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([{ path: queryPath, input: { month: 6 } }]);
+    expect(runtimeRef.current.actions.togglePolling).toBe(action);
+
+    await act(async () =>
+      root?.render(
+        createElement(StrictMode, null, createElement(RuntimeRegistration, { runtimeRef, month: 7, action })),
+      ),
+    );
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([{ path: queryPath, input: { month: 7 } }]);
+    expect(runtimeRef.current.actions.togglePolling).toBe(action);
+
+    await act(async () => root?.render(null));
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([]);
+    expect(runtimeRef.current.actions).toEqual({});
+
+    await act(async () => root?.render(createElement(RuntimeRegistration, { runtimeRef, month: 8, action })));
+    expect(getWidgetRuntimeQueries(runtimeRef)).toEqual([{ path: queryPath, input: { month: 8 } }]);
+    expect(runtimeRef.current.actions.togglePolling).toBe(action);
+  });
+});
+
+const assertRuntimeActionTypes = () => {
+  const runtime = createWidgetRuntimeState();
+  runtime.actions.togglePolling = () => undefined;
+  // @ts-expect-error Unknown runtime actions are rejected.
+  runtime.actions.unknownAction = () => undefined;
+};
+
+void assertRuntimeActionTypes;

From fbe381cbb537af277c75a3b517865a141ad52e86 Mon Sep 17 00:00:00 2001
From: ajnart <49837342+ajnart@users.noreply.github.com>
Date: Mon, 3 Aug 2026 15:39:36 +0000
Subject: [PATCH 34/75] style: auto-fix lint and format

---
 packages/definitions/src/docs/homarr-docs-sitemap.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/definitions/src/docs/homarr-docs-sitemap.ts b/packages/definitions/src/docs/homarr-docs-sitemap.ts
index 22bc5f75b..7185a2fdd 100644
--- a/packages/definitions/src/docs/homarr-docs-sitemap.ts
+++ b/packages/definitions/src/docs/homarr-docs-sitemap.ts
@@ -119,6 +119,7 @@ export type HomarrDocumentationPath =
   | "/docs/tags/variables"
   | "/docs/tags/widgets"
   | "/docs/advanced/command-line"
+  | "/docs/advanced/command-line/development"
   | "/docs/advanced/command-line/fix-usernames"
   | "/docs/advanced/command-line/integrations"
   | "/docs/advanced/command-line/password-recovery"

From 7847eea1a39ac467e06d0e89b63b287173fb6388 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 18:44:30 +0200
Subject: [PATCH 35/75] fix: refine widget interactions

---
 apps/docs/docs/management/boards/index.mdx    |  2 +-
 .../src/components/widgets/interactions.tsx   |  2 +-
 .../advanced-focus/advanced-focus.module.css  | 22 ----------
 .../board/advanced-focus/context.tsx          |  3 ++
 .../components/board/advanced-focus/wheel.ts  | 11 +----
 .../components/board/items/item-content.tsx   | 21 ++-------
 .../board/items/widget-context-menu.tsx       |  2 +-
 .../board/items/widget-query-scope.spec.ts    | 11 +++--
 e2e/board-advanced-interactions.spec.ts       | 31 ++++++++++---
 packages/translation/src/lang/en.json         |  4 ++
 .../src/advanced-focus-support.spec.ts        |  1 +
 .../widgets/src/bazarr/component.module.css   | 10 +++++
 packages/widgets/src/bazarr/component.tsx     |  9 +++-
 packages/widgets/src/bazarr/layout.spec.ts    |  4 +-
 .../widgets/src/beszel-alerts/component.tsx   |  7 ++-
 packages/widgets/src/beszel-alerts/index.ts   |  1 +
 packages/widgets/src/common/locale.spec.ts    |  4 ++
 packages/widgets/src/common/locale.ts         | 12 +++++-
 .../src/common/query-state-indicator.spec.ts  | 22 ++++++++--
 .../src/common/query-state-indicator.tsx      | 23 ++++++----
 .../widgets/src/common/query-state.spec.ts    | 10 +----
 packages/widgets/src/common/query-state.ts    |  4 --
 .../src/custom-api/custom-jsx-display.tsx     | 17 +-------
 packages/widgets/src/custom-api/index.ts      |  7 ++-
 packages/widgets/src/definition.ts            |  2 +-
 .../widgets/src/weather/component.spec.ts     | 14 ++++++
 packages/widgets/src/weather/icon.tsx         | 43 +++++++++++++++----
 27 files changed, 177 insertions(+), 122 deletions(-)

diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 85a89001a..956e73825 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -181,7 +181,7 @@ Widgets expose their routine controls without requiring edit mode:
 
 - Hold `Shift` while hovering a widget that supports advanced view to expand it in place while the other widgets
   remain visible but dimmed. Release `Shift` to close it. Focus that widget and press `Shift` + `Enter` to keep the view
-  open until you close it, or use the maximize control on touch devices. Other widgets adapt in place instead.
+  open until you close it. On touch devices, open it from the widget menu. Other widgets adapt in place instead.
 - Right-click a widget to inspect its live query status, refresh its data, change quick options, open settings, or run
   supported actions. Available controls follow your board and integration permissions.
 - If you can modify the board, right-click or touch and hold an empty grid cell to add an item there. Focus a board
diff --git a/apps/docs/src/components/widgets/interactions.tsx b/apps/docs/src/components/widgets/interactions.tsx
index b0c08e51c..86aeb5451 100644
--- a/apps/docs/src/components/widgets/interactions.tsx
+++ b/apps/docs/src/components/widgets/interactions.tsx
@@ -54,7 +54,7 @@ export const WidgetInteractionGuide = ({ advancedView = true }: { advancedView?:
       {advancedView && (
         <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
           Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed.
-          Touch devices expose a maximize control; compact-only widgets adapt in place instead.
+          On touch devices, use the widget menu; compact-only widgets adapt in place instead.
         </p>
       )}
     </details>
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index a16e2ba12..388212e33 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -76,34 +76,12 @@
   pointer-events: none;
 }
 
-.surfaceControls {
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-  pointer-events: none;
-}
-
 .closeButton {
   position: absolute;
   z-index: 2;
   pointer-events: auto;
 }
 
-.touchButton {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  z-index: 2;
-  display: none;
-  pointer-events: auto;
-}
-
-@media (any-pointer: coarse) {
-  .touchButton {
-    display: inline-flex;
-  }
-}
-
 @keyframes focus-backdrop-in {
   from {
     opacity: 0;
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 39143a2a8..d034b9c36 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -37,6 +37,8 @@ interface AdvancedFocusContextValue {
 const AdvancedFocusContext = createContext<AdvancedFocusContextValue | null>(null);
 const HOVER_DELAY_MS = 150;
 const CLOSE_DURATION_MS = 180;
+const interactiveSelector =
+  "a[href], button, input, textarea, select, [contenteditable='true'], [role='button'], [role='link'], [role='menuitem'], [role='option']";
 
 const isEditableTarget = (target: EventTarget | null) =>
   target instanceof HTMLElement &&
@@ -131,6 +133,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     const handlePointerMove = (event: PointerEvent) => {
       const current = activeRef.current;
       if (!shiftHeldRef.current || current?.activation !== "preview") return;
+      if (event.target instanceof Element && event.target.closest(interactiveSelector)) return;
 
       const underlyingSource = document
         .elementsFromPoint(event.clientX, event.clientY)
diff --git a/apps/nextjs/src/components/board/advanced-focus/wheel.ts b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
index e6cb1946e..6f5d598de 100644
--- a/apps/nextjs/src/components/board/advanced-focus/wheel.ts
+++ b/apps/nextjs/src/components/board/advanced-focus/wheel.ts
@@ -22,14 +22,5 @@ export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null
     if (current === root) break;
     current = current.parentElement;
   }
-
-  // A nested control can reach its edge before the widget's main Mantine viewport.
-  // Hand the gesture to that viewport instead of making Shift+wheel feel stuck.
-  const viewport = [...root.querySelectorAll<HTMLElement>("[data-scrollbars='y'], [data-scrollbars='xy']")].find(
-    (element) => isVerticalScrollContainer(element) && canScrollVertically(element, delta),
-  );
-  if (!viewport) return false;
-
-  viewport.scrollTop += delta;
-  return true;
+  return false;
 };
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 3e458909f..458e6fc5a 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,9 +1,8 @@
 import type { CSSProperties, KeyboardEvent } from "react";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { ActionIcon, Badge, Box, Card, Portal } from "@mantine/core";
+import { Badge, Box, Card, Portal } from "@mantine/core";
 import { useElementSize, useIsomorphicEffect, useViewportSize } from "@mantine/hooks";
-import { IconMaximize } from "@tabler/icons-react";
 import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import combineClasses from "clsx";
 import { NoIntegrationSelectedError } from "@homarr/widgets/errors/classes";
@@ -74,11 +73,12 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
   // Keep one widget subtree mounted while moving its stable portal target between the grid and viewport layers.
   // This preserves iframe/editor state and escapes Gridstack's transformed containing block.
   useIsomorphicEffect(() => {
+    if (!supportsAdvancedFocus) return;
     const target = document.createElement("div");
     target.className = advancedFocusClasses.surfacePortalTarget ?? "";
     setSurfacePortalTarget(target);
     return () => target.remove();
-  }, []);
+  }, [supportsAdvancedFocus]);
 
   // Responsive layout changes remount grid items. Never leave their focus backdrop orphaned.
   useEffect(() => () => dismiss(item.id), [dismiss, item.id]);
@@ -166,19 +166,6 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
       }}
       style={previewStyle}
     >
-      <div className={advancedFocusClasses.surfaceControls}>
-        {!isEditMode && supportsAdvancedFocus && !isAdvanced && (
-          <ActionIcon
-            className={advancedFocusClasses.touchButton}
-            variant="default"
-            size={44}
-            aria-label={t("item.advancedFocus.open")}
-            onClick={() => openAdvanced()}
-          >
-            <IconMaximize size={18} />
-          </ActionIcon>
-        )}
-      </div>
       <Box ref={contentRef} w="100%" h="100%" mih={0}>
         <InnerContent
           item={item}
@@ -214,7 +201,7 @@ export const BoardItemContent = ({ item }: BoardItemContentProps) => {
           className={combineClasses("grid-stack-item-content", isAdvanced && advancedFocusClasses.sourcePlaceholder)}
         >
           <div ref={(node) => mountPortalTarget(node, "compact")} className={advancedFocusClasses.surfaceHost}>
-            {!surfacePortalTarget && widgetCard}
+            {!supportsAdvancedFocus && widgetCard}
           </div>
           {surfacePortalTarget && createPortal(widgetCard, surfacePortalTarget)}
           {isPreview && (
diff --git a/apps/nextjs/src/components/board/items/widget-context-menu.tsx b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
index 7509caad6..331669868 100644
--- a/apps/nextjs/src/components/board/items/widget-context-menu.tsx
+++ b/apps/nextjs/src/components/board/items/widget-context-menu.tsx
@@ -289,7 +289,7 @@ export const WidgetContextMenu = ({ item, widgetRuntimeRef, sourceRef, children
                   disabled={action.disabled}
                   color={action.color}
                 >
-                  {t(action.label as never)}
+                  {translateIfNecessary(t, action.label)}
                 </Menu.Item>
               );
             })}
diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
index 027ed719e..138e7ad86 100644
--- a/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
@@ -27,11 +27,16 @@ const matches = (kind: WidgetKind, path: readonly string[], input: unknown, scop
 describe("matchesWidgetItemQuery", () => {
   test("matches only the current Custom API definition", () => {
     const scope = createScope({ options: { definitionId: "definition-1" } });
+    const input = { boardId: "board-1", itemId: "item-1", definitionId: "definition-1" };
 
-    expect(matches("customApi", ["widget", "customApi", "getData"], { definitionId: "definition-1" }, scope)).toBe(
-      true,
+    expect(matches("customApi", ["widget", "customApi", "getData"], input, scope)).toBe(true);
+    expect(
+      matches("customApi", ["widget", "customApi", "getData"], { ...input, definitionId: "definition-2" }, scope),
+    ).toBe(false);
+    expect(matches("customApi", ["widget", "customApi", "getData"], { ...input, itemId: "item-2" }, scope)).toBe(
+      false,
     );
-    expect(matches("customApi", ["widget", "customApi", "getData"], { definitionId: "definition-2" }, scope)).toBe(
+    expect(matches("customApi", ["widget", "customApi", "getData"], { ...input, boardId: "board-2" }, scope)).toBe(
       false,
     );
   });
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index e94f6cfb6..6f2731629 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -86,6 +86,7 @@ describe("Board advanced interactions", () => {
       await expect(previewSurface).toHaveCSS("animation-name", "none");
       const compactBounds = await widget.boundingBox();
       const advancedBounds = await previewSurface.boundingBox();
+      if (!compactBounds || !advancedBounds) throw new Error("Advanced widget has no bounds");
       expect(advancedBounds?.width).toBeGreaterThan(compactBounds?.width ?? 0);
       await expect(previewSurface).toHaveAttribute("data-lifecycle-probe", "same-instance");
       await expect(dimmingOverlay).toBeVisible();
@@ -105,6 +106,24 @@ describe("Board advanced interactions", () => {
       const otherBounds = await otherWidget.boundingBox();
       expect(otherBounds).not.toBeNull();
       if (!otherBounds) throw new Error("Bookmarks widget has no bounds");
+      await previewSurface.evaluate(
+        (element, position) => {
+          const probe = document.createElement("button");
+          probe.dataset.interactivePreviewProbe = "true";
+          probe.style.cssText = `position:absolute;z-index:20;width:40px;height:40px;left:${position.left}px;top:${position.top}px`;
+          element.append(probe);
+        },
+        {
+          left: otherBounds.x + otherBounds.width / 2 - advancedBounds.x - 20,
+          top: otherBounds.y + otherBounds.height / 2 - advancedBounds.y - 20,
+        },
+      );
+      const interactivePreviewProbe = previewSurface.locator("[data-interactive-preview-probe='true']");
+      await interactivePreviewProbe.hover();
+      await expect(previewSurface).toBeVisible();
+      await expect(bookmarksPreviewSurface).toBeHidden();
+      await interactivePreviewProbe.evaluate((element) => element.remove());
+      await page.mouse.move(compactBounds.x + 4, compactBounds.y + 4);
       await page.mouse.move(otherBounds.x + otherBounds.width / 2, otherBounds.y + otherBounds.height / 2);
       await expect(previewSurface).toBeHidden();
       await expect(bookmarksPreviewSurface).toBeVisible({ timeout: 2_000 });
@@ -130,17 +149,17 @@ describe("Board advanced interactions", () => {
         0,
       );
       await manualSurface.evaluate((element) => {
+        const mainViewport = document.createElement("div");
+        mainViewport.dataset.scrollbars = "y";
+        mainViewport.style.cssText = "height:80px;overflow-y:auto";
+
         const probe = document.createElement("div");
         probe.dataset.shiftScrollProbe = "true";
         probe.style.cssText = "height:80px;overflow-y:auto";
         probe.innerHTML = '<svg data-shift-scroll-target="true"></svg><div style="height:600px"></div>';
         probe.addEventListener("wheel", (event) => event.stopPropagation());
-        element.append(probe);
-
-        const mainViewport = document.createElement("div");
-        mainViewport.dataset.scrollbars = "y";
-        mainViewport.style.cssText = "height:80px;overflow-y:auto";
-        mainViewport.innerHTML = '<div style="height:600px"></div>';
+        mainViewport.append(probe);
+        mainViewport.insertAdjacentHTML("beforeend", '<div style="height:600px"></div>');
         element.append(mainViewport);
 
         const unrelated = document.createElement("div");
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index f019eab5f..ac2d8ad9b 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1406,6 +1406,10 @@
     "success": "Success",
     "beta": "Beta",
     "error": "Error",
+    "widgetQuery": {
+      "loading": "Loading widget data",
+      "stale": "Could not refresh {widget}; showing saved data"
+    },
     "action": {
       "add": "Add",
       "apply": "Apply",
diff --git a/packages/widgets/src/advanced-focus-support.spec.ts b/packages/widgets/src/advanced-focus-support.spec.ts
index 1b8e7a73f..2ee1dcc84 100644
--- a/packages/widgets/src/advanced-focus-support.spec.ts
+++ b/packages/widgets/src/advanced-focus-support.spec.ts
@@ -6,6 +6,7 @@ import { widgetImports } from ".";
 const compactOnlyWidgetKinds = [
   "app",
   "bazarr",
+  "beszelAlerts",
   "beszelSystemGrid",
   "beszelSystemStats",
   "beszelSystemTable",
diff --git a/packages/widgets/src/bazarr/component.module.css b/packages/widgets/src/bazarr/component.module.css
index 9b5857379..a41eeb5bf 100644
--- a/packages/widgets/src/bazarr/component.module.css
+++ b/packages/widgets/src/bazarr/component.module.css
@@ -33,6 +33,16 @@
   overflow: hidden;
 }
 
+.grid[data-short] .statTile {
+  flex-direction: row;
+  gap: 3px;
+  padding: 3px 4px;
+}
+
+.grid[data-short] .statLabel {
+  text-align: left;
+}
+
 .statTileWarning {
   background-color: light-dark(var(--mantine-color-orange-0), var(--mantine-color-dark-5));
 }
diff --git a/packages/widgets/src/bazarr/component.tsx b/packages/widgets/src/bazarr/component.tsx
index c4914bfff..4d4e9cedd 100644
--- a/packages/widgets/src/bazarr/component.tsx
+++ b/packages/widgets/src/bazarr/component.tsx
@@ -26,6 +26,7 @@ const statIcons = {
 } as const;
 
 const gridColsByWidth = [
+  { minWidth: 640, cols: 4 },
   { minWidth: 380, cols: 2 },
   { minWidth: 0, cols: 1 },
 ] as const;
@@ -74,7 +75,11 @@ export default function BazarrWidget({ integrationIds, options, width, height }:
 
   return (
     <div className={classes.root}>
-      <div className={classes.grid} style={{ "--stat-cols": gridCols } as CSSProperties}>
+      <div
+        className={classes.grid}
+        data-short={height < 120 || undefined}
+        style={{ "--stat-cols": gridCols } as CSSProperties}
+      >
         {visibleStatKeys.map((statKey) => {
           const Icon = statIcons[statKey];
           const value = statValues[statKey];
@@ -99,7 +104,7 @@ export function getGridCols(width: number, height: number, itemCount: number): n
   if (itemCount <= 1) return 1;
 
   const preferredColumns = gridColsByWidth.find(({ minWidth }) => width >= minWidth)?.cols ?? 1;
-  const maxColumnsByWidth = Math.max(1, Math.floor(width / 160));
+  const maxColumnsByWidth = Math.max(1, Math.floor(width / 100));
   const maxRowsByHeight = Math.max(1, Math.floor(height / 72));
   const columnsNeededToFit = Math.ceil(itemCount / maxRowsByHeight);
   return Math.min(itemCount, maxColumnsByWidth, Math.max(preferredColumns, columnsNeededToFit));
diff --git a/packages/widgets/src/bazarr/layout.spec.ts b/packages/widgets/src/bazarr/layout.spec.ts
index e3552a737..f5e03fba4 100644
--- a/packages/widgets/src/bazarr/layout.spec.ts
+++ b/packages/widgets/src/bazarr/layout.spec.ts
@@ -4,11 +4,11 @@ import { getGridCols, getIconSize } from "./component";
 
 describe("Bazarr responsive layout", () => {
   test("uses two columns for a short widget so all stats remain visible", () => {
-    expect(getGridCols(220, 100, 4)).toBe(1);
+    expect(getGridCols(220, 100, 4)).toBe(2);
   });
 
   test("uses four columns in a wide advanced surface", () => {
-    expect(getGridCols(800, 400, 4)).toBe(2);
+    expect(getGridCols(800, 400, 4)).toBe(4);
   });
 
   test("sizes icons from the constrained dimension", () => {
diff --git a/packages/widgets/src/beszel-alerts/component.tsx b/packages/widgets/src/beszel-alerts/component.tsx
index f7743b935..23243f35e 100644
--- a/packages/widgets/src/beszel-alerts/component.tsx
+++ b/packages/widgets/src/beszel-alerts/component.tsx
@@ -50,7 +50,6 @@ export default function BeszelAlertsWidget({
   integrationIds,
   isEditMode,
   height,
-  displayMode = "compact",
 }: WidgetComponentProps<"beszelAlerts">) {
   const t = useScopedI18n("widget.beszelAlerts");
   const alertsInput = useMemo(
@@ -85,9 +84,9 @@ export default function BeszelAlertsWidget({
 
   const triggeredAlerts = alerts.filter((a) => a.triggered);
   const okAlerts = alerts.filter((a) => !a.triggered);
-  const showOkAlerts = displayMode === "advanced" || triggeredAlerts.length === 0 || height >= 260;
-  const showHistory = options.showHistory && (displayMode === "advanced" || height >= 360);
-  const showAlertDescriptions = displayMode === "advanced" || height >= 190;
+  const showOkAlerts = triggeredAlerts.length === 0 || height >= 260;
+  const showHistory = options.showHistory && height >= 360;
+  const showAlertDescriptions = height >= 190;
 
   if (isPending) {
     return (
diff --git a/packages/widgets/src/beszel-alerts/index.ts b/packages/widgets/src/beszel-alerts/index.ts
index f5fdc9d01..db1e791b2 100644
--- a/packages/widgets/src/beszel-alerts/index.ts
+++ b/packages/widgets/src/beszel-alerts/index.ts
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("beszelAlerts", {
   icon: IconBell,
+  supportsAdvancedFocus: false,
   queryKey: [["widget", "beszel", "getAlerts"]],
   queryMatcher: ({ input }, scope) =>
     widgetQueryInputMatches(input, {
diff --git a/packages/widgets/src/common/locale.spec.ts b/packages/widgets/src/common/locale.spec.ts
index d9fa119c7..9cae44936 100644
--- a/packages/widgets/src/common/locale.spec.ts
+++ b/packages/widgets/src/common/locale.spec.ts
@@ -21,6 +21,10 @@ describe("localized widget formatting", () => {
     expect(formatLocalizedTime(sample, "en-US", { hour12: false, timeZone: "UTC" })).toBe("13:05");
   });
 
+  test("keeps date-only values on the requested calendar day", () => {
+    expect(formatLocalizedDate("2026-08-03", "en-US", { month: "long", day: "numeric" })).toBe("August 3");
+  });
+
   test("localizes compact numbers", () => {
     expect(formatLocalizedCompactNumber(1_234_567, "en-US")).toBe("1.2M");
     expect(formatLocalizedCompactNumber(1_234_567, "fr-FR")).toContain("1,2");
diff --git a/packages/widgets/src/common/locale.ts b/packages/widgets/src/common/locale.ts
index e076cedd2..c0f478f47 100644
--- a/packages/widgets/src/common/locale.ts
+++ b/packages/widgets/src/common/locale.ts
@@ -1,5 +1,7 @@
 export type LocalizedDateValue = Date | number | string;
 
+const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
+
 interface LocalizedTimeOptions {
   hour12?: boolean;
   includeSeconds?: boolean;
@@ -7,7 +9,7 @@ interface LocalizedTimeOptions {
 }
 
 const toValidDate = (value: LocalizedDateValue): Date | undefined => {
-  const date = value instanceof Date ? value : new Date(value);
+  const date = value instanceof Date ? value : new Date(typeof value === "string" && dateOnlyPattern.test(value) ? `${value}T00:00:00Z` : value);
   return Number.isNaN(date.getTime()) ? undefined : date;
 };
 
@@ -18,7 +20,13 @@ export const formatLocalizedDate = (
   fallback = "?",
 ): string => {
   const date = toValidDate(value);
-  return date ? new Intl.DateTimeFormat(locale, options).format(date) : fallback;
+  if (!date) return fallback;
+
+  const normalizedOptions =
+    typeof value === "string" && dateOnlyPattern.test(value) && options.timeZone === undefined
+      ? { ...options, timeZone: "UTC" }
+      : options;
+  return new Intl.DateTimeFormat(locale, normalizedOptions).format(date);
 };
 
 export const formatLocalizedTime = (
diff --git a/packages/widgets/src/common/query-state-indicator.spec.ts b/packages/widgets/src/common/query-state-indicator.spec.ts
index f902aafc9..86da6f64b 100644
--- a/packages/widgets/src/common/query-state-indicator.spec.ts
+++ b/packages/widgets/src/common/query-state-indicator.spec.ts
@@ -5,10 +5,14 @@ import { createRoot } from "react-dom/client";
 import { MantineProvider } from "@mantine/core";
 import { afterEach, describe, expect, test, vi } from "vitest";
 
-import { WidgetQueryErrorIndicator } from "./query-state-indicator";
+import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "./query-state-indicator";
 
 vi.mock("@homarr/translation/client", () => ({
-  useScopedI18n: () => (key: string) => key,
+  useScopedI18n: () => (key: string, values?: { widget?: string }) => {
+    if (key === "stale") return `Could not refresh ${values?.widget}; showing saved data`;
+    if (key === "loading") return "Loading widget data";
+    return key;
+  },
 }));
 
 const matchMedia = (query: string) => ({
@@ -50,7 +54,19 @@ describe("WidgetQueryErrorIndicator", () => {
       ),
     );
 
-    expect(host.querySelector("[aria-label='Weather']")).not.toBeNull();
+    expect(host.querySelector("[aria-label='Could not refresh Weather; showing saved data']")).not.toBeNull();
     expect(host.textContent).not.toMatch(/password|private\.local|token=secret/);
   });
+
+  test("announces the loading state to assistive technology", async () => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    vi.stubGlobal("matchMedia", matchMedia);
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    await act(async () => root?.render(createElement(MantineProvider, null, createElement(WidgetQueryLoadingState))));
+
+    expect(host.querySelector("output")?.textContent).toContain("Loading widget data");
+  });
 });
diff --git a/packages/widgets/src/common/query-state-indicator.tsx b/packages/widgets/src/common/query-state-indicator.tsx
index 9196c2c69..dbd2c5a69 100644
--- a/packages/widgets/src/common/query-state-indicator.tsx
+++ b/packages/widgets/src/common/query-state-indicator.tsx
@@ -1,8 +1,10 @@
 "use client";
 
-import { Box, Center, Loader, Tooltip } from "@mantine/core";
+import { ActionIcon, Center, Loader, Tooltip, VisuallyHidden } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
+import { useScopedI18n } from "@homarr/translation/client";
+
 interface WidgetQueryErrorIndicatorProps {
   error: unknown;
   label: string;
@@ -10,29 +12,34 @@ interface WidgetQueryErrorIndicatorProps {
 
 /** Localized warning for stale or optional-query failures. Never renders the raw error. */
 export function WidgetQueryErrorIndicator({ error, label }: WidgetQueryErrorIndicatorProps) {
+  const t = useScopedI18n("common.widgetQuery");
   if (!error) return null;
 
-  const accessibleLabel = label;
+  const accessibleLabel = t("stale", { widget: label });
   return (
     <Tooltip label={accessibleLabel} position="left" withArrow>
-      <Box
+      <ActionIcon
         component="span"
-        c="orange"
-        role="img"
+        color="orange"
+        variant="subtle"
+        size="sm"
+        role="note"
         aria-label={accessibleLabel}
         tabIndex={0}
-        style={{ display: "inline-flex", cursor: "help" }}
+        style={{ cursor: "help" }}
       >
         <IconAlertTriangle aria-hidden size={14} />
-      </Box>
+      </ActionIcon>
     </Tooltip>
   );
 }
 
 export function WidgetQueryLoadingState() {
+  const t = useScopedI18n("common.widgetQuery");
   return (
-    <Center h="100%" w="100%" p="sm" role="status" aria-live="polite">
+    <Center component="output" h="100%" w="100%" p="sm" aria-live="polite">
       <Loader size="sm" />
+      <VisuallyHidden>{t("loading")}</VisuallyHidden>
     </Center>
   );
 }
diff --git a/packages/widgets/src/common/query-state.spec.ts b/packages/widgets/src/common/query-state.spec.ts
index 5e49af84a..c90c0ae50 100644
--- a/packages/widgets/src/common/query-state.spec.ts
+++ b/packages/widgets/src/common/query-state.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { getUsableWidgetQueryData, hasStaleWidgetQueryError, isInitialWidgetQueryPending } from "./query-state";
+import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "./query-state";
 
 describe("getUsableWidgetQueryData", () => {
   test.each([[], null, 0, false, ""])("preserves successful empty value %#", (data) => {
@@ -29,11 +29,3 @@ describe("isInitialWidgetQueryPending", () => {
     expect(isInitialWidgetQueryPending({ data: undefined, error: new Error("offline"), isPending: true })).toBe(false);
   });
 });
-
-describe("hasStaleWidgetQueryError", () => {
-  test("only marks failures that retain usable cached data", () => {
-    expect(hasStaleWidgetQueryError({ data: [{ id: "cached" }], error: new Error("offline") })).toBe(true);
-    expect(hasStaleWidgetQueryError({ data: undefined, error: new Error("offline") })).toBe(false);
-    expect(hasStaleWidgetQueryError({ data: [], error: null })).toBe(false);
-  });
-});
diff --git a/packages/widgets/src/common/query-state.ts b/packages/widgets/src/common/query-state.ts
index d49ea600b..a83066c0b 100644
--- a/packages/widgets/src/common/query-state.ts
+++ b/packages/widgets/src/common/query-state.ts
@@ -16,7 +16,3 @@ export const getUsableWidgetQueryData = <TQuery extends WidgetQueryState>(query:
 /** True only before the first result; successful empty values and cached data are both ready to render. */
 export const isInitialWidgetQueryPending = ({ data, error, isPending }: PendingWidgetQueryState): boolean =>
   isPending && data === undefined && !error;
-
-/** A failed background refresh still has usable cached data, but should remain visible to the user. */
-export const hasStaleWidgetQueryError = ({ data, error }: WidgetQueryState): boolean =>
-  error !== null && error !== undefined && data !== undefined;
diff --git a/packages/widgets/src/custom-api/custom-jsx-display.tsx b/packages/widgets/src/custom-api/custom-jsx-display.tsx
index 06fd5fb3d..7b2d1b9b4 100644
--- a/packages/widgets/src/custom-api/custom-jsx-display.tsx
+++ b/packages/widgets/src/custom-api/custom-jsx-display.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import JsxParser from "react-jsx-parser";
 import { Alert, Stack, Text } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
@@ -10,15 +10,8 @@ import { WHITELISTED_COMPONENTS, SAFE_BINDINGS } from "./jsx-whitelist";
 export default function CustomJsxDisplay({ data }: { data: Record<string, unknown> }) {
   const template = String(data.template ?? "");
   const apiData = data.data;
-  const [hasParseError, setHasParseError] = useState(false);
   const bindings = useMemo(() => SAFE_BINDINGS(apiData), [apiData]);
 
-  useEffect(() => {
-    setHasParseError(false);
-  }, [template, bindings]);
-
-  const handleError = useCallback(() => setHasParseError(true), []);
-
   if (!template.trim()) {
     return (
       <Alert color="gray" variant="light" p="xs">
@@ -40,20 +33,12 @@ export default function CustomJsxDisplay({ data }: { data: Record<string, unknow
         allowUnknownElements={false}
         blacklistedAttrs={[/^on.+/i, /^dangerously/i]}
         blacklistedTags={["script", "iframe", "object", "embed", "form", "style", "link", "meta", "base"]}
-        onError={handleError}
         renderError={() => (
           <Alert color="red" variant="light" icon={<IconAlertTriangle size={16} />} p="xs">
             <Text size="xs">Invalid widget template</Text>
           </Alert>
         )}
       />
-      {hasParseError && (
-        <Alert color="yellow" variant="light" p="xs" mt="xs">
-          <Text size="xs" c="dimmed">
-            Invalid widget template
-          </Text>
-        </Alert>
-      )}
     </Stack>
   );
 }
diff --git a/packages/widgets/src/custom-api/index.ts b/packages/widgets/src/custom-api/index.ts
index c54b1c4c7..1d2d3db1d 100644
--- a/packages/widgets/src/custom-api/index.ts
+++ b/packages/widgets/src/custom-api/index.ts
@@ -18,7 +18,12 @@ const createOptions = () =>
 export const { definition, componentLoader } = createWidgetDefinition("customApi", {
   icon: IconApi,
   queryKey: [["widget", "customApi", "getData"]],
-  queryMatcher: ({ input }, scope) => widgetQueryInputMatches(input, { definitionId: scope.options.definitionId }),
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      boardId: scope.boardId,
+      itemId: scope.itemId,
+      definitionId: scope.options.definitionId,
+    }),
   contextActions: ({ options, widgetRuntimeRef }) => {
     return [
       {
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index 3975bd9cd..17e40c46d 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -15,7 +15,7 @@ import type { inferOptionsFromCreator, WidgetOptionsRecord } from "./options";
 
 export interface WidgetContextMenuAction {
   key: string;
-  label: string;
+  label: stringOrTranslation;
   icon?: TablerIcon;
   onClick: () => void;
   hidden?: boolean;
diff --git a/packages/widgets/src/weather/component.spec.ts b/packages/widgets/src/weather/component.spec.ts
index 0340625ad..fc0d219a2 100644
--- a/packages/widgets/src/weather/component.spec.ts
+++ b/packages/widgets/src/weather/component.spec.ts
@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 
 import { getPreferredTime, getPreferredUnit, getPreferredWindSpeed, getVisibleForecastDays } from "./component";
+import { formatWeatherDate } from "./icon";
 
 describe("weather formatting", () => {
   it("preserves valid zero temperatures", () => {
@@ -19,4 +20,17 @@ describe("weather formatting", () => {
     expect(getVisibleForecastDays(7, 120, 100)).toBe(2);
     expect(getVisibleForecastDays(7, 600, 100)).toBe(3);
   });
+
+  it.each([
+    ["dddd, MMMM D", "Monday, August 3"],
+    ["dddd, D MMMM", "Monday, 3 August"],
+    ["MMM D", "Aug 3"],
+    ["D MMM", "3 Aug"],
+    ["DD/MM/YYYY", "03/08/2026"],
+    ["MM/DD/YYYY", "08/03/2026"],
+    ["DD/MM", "03/08"],
+    ["MM/DD", "08/03"],
+  ] as const)("honors the saved %s date format", (pattern, expected) => {
+    expect(formatWeatherDate("2026-08-03", "en-US", pattern)).toBe(expected);
+  });
 });
diff --git a/packages/widgets/src/weather/icon.tsx b/packages/widgets/src/weather/icon.tsx
index 1389281ed..d2c5a28b7 100644
--- a/packages/widgets/src/weather/icon.tsx
+++ b/packages/widgets/src/weather/icon.tsx
@@ -19,7 +19,6 @@ import type { TranslationObject } from "@homarr/translation";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 import type { TablerIcon } from "@homarr/ui";
 
-import { formatLocalizedDate } from "../common/locale";
 import type { WidgetProps } from "../definition";
 
 interface WeatherIconProps {
@@ -130,16 +129,42 @@ export const formatWeatherDate = (
   pattern: WidgetProps<"weather">["options"]["dateFormat"] | undefined,
 ) => {
   if (!value) return "?";
+  const resolvedPattern = pattern ?? "dddd, MMMM D";
+  const date = new Date(/^\d{4}-\d{2}-\d{2}$/.test(value) ? `${value}T00:00:00Z` : value);
+  if (Number.isNaN(date.getTime())) return "?";
 
-  const options: Intl.DateTimeFormatOptions = pattern?.includes("dddd")
-    ? { weekday: "long", month: "long", day: "numeric" }
-    : pattern?.includes("YYYY")
-      ? { year: "numeric", month: "2-digit", day: "2-digit" }
-      : pattern?.includes("MMM")
-        ? { month: "short", day: "numeric" }
-        : { month: "2-digit", day: "2-digit" };
+  const parts = new Intl.DateTimeFormat(locale, {
+    weekday: "long",
+    year: "numeric",
+    month: resolvedPattern.includes("MMMM") ? "long" : resolvedPattern.includes("MMM") ? "short" : "2-digit",
+    day: resolvedPattern.includes("DD") ? "2-digit" : "numeric",
+    timeZone: "UTC",
+  })
+    .formatToParts(date)
+    .reduce<Record<string, string>>((result, part) => {
+      if (part.type !== "literal") result[part.type] = part.value;
+      return result;
+    }, {});
 
-  return formatLocalizedDate(value, locale, options);
+  switch (resolvedPattern) {
+    case "dddd, D MMMM":
+      return `${parts.weekday}, ${parts.day} ${parts.month}`;
+    case "MMM D":
+      return `${parts.month} ${parts.day}`;
+    case "D MMM":
+      return `${parts.day} ${parts.month}`;
+    case "DD/MM/YYYY":
+      return `${parts.day}/${parts.month}/${parts.year}`;
+    case "MM/DD/YYYY":
+      return `${parts.month}/${parts.day}/${parts.year}`;
+    case "DD/MM":
+      return `${parts.day}/${parts.month}`;
+    case "MM/DD":
+      return `${parts.month}/${parts.day}`;
+    case "dddd, MMMM D":
+    default:
+      return `${parts.weekday}, ${parts.month} ${parts.day}`;
+  }
 };
 
 interface WeatherDefinitionType {

From 30344bdaae69cc012a9a5740f64a1ef927d62555 Mon Sep 17 00:00:00 2001
From: ajnart <49837342+ajnart@users.noreply.github.com>
Date: Mon, 3 Aug 2026 16:46:35 +0000
Subject: [PATCH 36/75] style: auto-fix lint and format

---
 apps/docs/src/components/widgets/interactions.tsx            | 4 ++--
 .../src/components/board/items/widget-query-scope.spec.ts    | 4 +---
 packages/widgets/src/common/locale.ts                        | 5 ++++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/apps/docs/src/components/widgets/interactions.tsx b/apps/docs/src/components/widgets/interactions.tsx
index 86aeb5451..c75102f92 100644
--- a/apps/docs/src/components/widgets/interactions.tsx
+++ b/apps/docs/src/components/widgets/interactions.tsx
@@ -53,8 +53,8 @@ export const WidgetInteractionGuide = ({ advancedView = true }: { advancedView?:
       </div>
       {advancedView && (
         <p className="m-0 px-4 pb-4 text-xs text-[#696969] dark:text-[#999]">
-          Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed.
-          On touch devices, use the widget menu; compact-only widgets adapt in place instead.
+          Advanced view reuses the widget&apos;s live data and cache. The rest of the board stays visible but dimmed. On
+          touch devices, use the widget menu; compact-only widgets adapt in place instead.
         </p>
       )}
     </details>
diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
index 138e7ad86..ec667102e 100644
--- a/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.spec.ts
@@ -33,9 +33,7 @@ describe("matchesWidgetItemQuery", () => {
     expect(
       matches("customApi", ["widget", "customApi", "getData"], { ...input, definitionId: "definition-2" }, scope),
     ).toBe(false);
-    expect(matches("customApi", ["widget", "customApi", "getData"], { ...input, itemId: "item-2" }, scope)).toBe(
-      false,
-    );
+    expect(matches("customApi", ["widget", "customApi", "getData"], { ...input, itemId: "item-2" }, scope)).toBe(false);
     expect(matches("customApi", ["widget", "customApi", "getData"], { ...input, boardId: "board-2" }, scope)).toBe(
       false,
     );
diff --git a/packages/widgets/src/common/locale.ts b/packages/widgets/src/common/locale.ts
index c0f478f47..3d1c6bf3f 100644
--- a/packages/widgets/src/common/locale.ts
+++ b/packages/widgets/src/common/locale.ts
@@ -9,7 +9,10 @@ interface LocalizedTimeOptions {
 }
 
 const toValidDate = (value: LocalizedDateValue): Date | undefined => {
-  const date = value instanceof Date ? value : new Date(typeof value === "string" && dateOnlyPattern.test(value) ? `${value}T00:00:00Z` : value);
+  const date =
+    value instanceof Date
+      ? value
+      : new Date(typeof value === "string" && dateOnlyPattern.test(value) ? `${value}T00:00:00Z` : value);
   return Number.isNaN(date.getTime()) ? undefined : date;
 };
 

From db7c85059627dcd3f4523ba7f2604346b3db9941 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 18:51:35 +0200
Subject: [PATCH 37/75] fix: remove stale notifications import

---
 packages/widgets/src/notifications/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/widgets/src/notifications/index.ts b/packages/widgets/src/notifications/index.ts
index 45c484c82..8b01c7bcf 100644
--- a/packages/widgets/src/notifications/index.ts
+++ b/packages/widgets/src/notifications/index.ts
@@ -2,7 +2,7 @@ import { IconMessage } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
+import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {

From ee51227a5582b3bba3f82c12c0408c4b95bf2175 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 18:53:26 +0200
Subject: [PATCH 38/75] fix: restore notifications query scope

---
 packages/widgets/src/notifications/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/widgets/src/notifications/index.ts b/packages/widgets/src/notifications/index.ts
index 8b01c7bcf..6358d8303 100644
--- a/packages/widgets/src/notifications/index.ts
+++ b/packages/widgets/src/notifications/index.ts
@@ -2,12 +2,18 @@ import { IconMessage } from "@tabler/icons-react";
 
 import { getIntegrationKindsByCategory } from "@homarr/definitions";
 
-import { createWidgetDefinition } from "../definition";
+import { createWidgetDefinition, widgetQueryInputMatches } from "../definition";
 import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("notifications", {
   supportsAdvancedFocus: false,
   icon: IconMessage,
+  queryKey: [["widget", "notifications", "getNotifications"]],
+  queryMatcher: ({ input }, scope) =>
+    widgetQueryInputMatches(input, {
+      hideLogos: scope.options.hideLogos,
+      integrationIds: scope.integrationIds,
+    }),
   createOptions() {
     return optionsBuilder.from((factory) => ({
       hideLogos: factory.switch({ defaultValue: false }),

From 97444d209aa7b184d3c04914032a83f1e62a8fdf Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 19:17:28 +0200
Subject: [PATCH 39/75] ci: limit turbo concurrency

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index dcbb352c3..addcf5e7d 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -82,7 +82,7 @@ jobs:
         run: cp .env.example .env
 
       - name: Lint, typecheck, and build affected workspaces
-        run: pnpm turbo run lint typecheck build --affected --continue=dependencies-successful
+        run: pnpm turbo run lint typecheck build --affected --continue=dependencies-successful --concurrency=4
 
       - name: Validate workspace configuration
         run: pnpm lint:ws

From 596bfc317d3641d841522a6711d99c90fc9b2722 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 19:42:43 +0200
Subject: [PATCH 40/75] fix: scope advanced preview controls

---
 apps/nextjs/src/components/board/advanced-focus/context.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index d034b9c36..4f8746632 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -133,7 +133,11 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     const handlePointerMove = (event: PointerEvent) => {
       const current = activeRef.current;
       if (!shiftHeldRef.current || current?.activation !== "preview") return;
-      if (event.target instanceof Element && event.target.closest(interactiveSelector)) return;
+      if (
+        event.target instanceof Element &&
+        event.target.closest(interactiveSelector)?.closest("[data-advanced-focus-surface]")
+      )
+        return;
 
       const underlyingSource = document
         .elementsFromPoint(event.clientX, event.clientY)

From 454752e46d80f368c7cb5e6766c5db5c72341ba5 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 20:04:56 +0200
Subject: [PATCH 41/75] fix: address widget review feedback

---
 packages/widgets/src/bookmarks/component.tsx |  6 ++-
 packages/widgets/src/rssFeed/component.tsx   | 42 +++++++++++++-------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index aadf8b3b2..c241549ae 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useMemo } from "react";
 import {
   Anchor,
   Box,
@@ -99,7 +100,10 @@ export default function BookmarksWidget({
     [data],
   );
 
-  const compactLayout = getCompactBookmarkLayout(width, height, data.length, options.layout);
+  const compactLayout = useMemo(
+    () => getCompactBookmarkLayout(width, height, data.length, options.layout),
+    [width, height, data.length, options.layout],
+  );
   const compactHideTitle = options.hideTitle || (compactLayout.hideTitle && !options.hideIcon);
   const compactHideHostname =
     options.hideHostname || (compactLayout.hideHostname && !(options.hideTitle && options.hideIcon));
diff --git a/packages/widgets/src/rssFeed/component.tsx b/packages/widgets/src/rssFeed/component.tsx
index 1d38d3ed3..5bcd3bfd3 100644
--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Alert, Card, Flex, Group, Image, ScrollArea, SimpleGrid, Text } from "@mantine/core";
-import { IconAlertTriangle, IconClock } from "@tabler/icons-react";
+import { IconAlertTriangle, IconClock, IconServerOff } from "@tabler/icons-react";
 import dayjs from "dayjs";
 
 import type { RouterInputs, RouterOutputs } from "@homarr/api";
@@ -11,45 +11,57 @@ import { useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../definition";
 import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { BaseWidgetError } from "../errors/base-component";
 import classes from "./component.module.scss";
 
 const useLiveFeed = (input: RouterInputs["widget"]["rssFeed"]["getFeeds"]) => {
-  const { data, error } = clientApi.widget.rssFeed.getFeeds.useQuery(input);
-  if (error && data === undefined) throw error;
+  const query = clientApi.widget.rssFeed.getFeeds.useQuery(input);
+  if (query.error && query.data === undefined) {
+    return { hasError: true as const, refetch: query.refetch };
+  }
 
   // Persisted query caches can still contain the array response used before failed-feed metadata was added.
-  const normalizedData = data as typeof data | RouterOutputs["widget"]["rssFeed"]["getFeeds"]["entries"];
+  const normalizedData = query.data as typeof query.data | RouterOutputs["widget"]["rssFeed"]["getFeeds"]["entries"];
   if (Array.isArray(normalizedData)) {
     return {
+      hasError: false as const,
       entries: normalizedData,
       failedFeedCount: 0,
-      isStale: Boolean(error),
+      isStale: Boolean(query.error),
     };
   }
 
   return {
+    hasError: false as const,
     entries: normalizedData?.entries ?? [],
     failedFeedCount: normalizedData?.failedFeedCount ?? 0,
-    isStale: Boolean(error),
+    isStale: Boolean(query.error),
   };
 };
 
 export default function RssFeed({ options, width, height }: WidgetComponentProps<"rssFeed">) {
-  const {
-    entries: feedEntries,
-    failedFeedCount,
-    isStale,
-  } = useLiveFeed({
+  const feed = useLiveFeed({
     urls: options.feedUrls,
     maximumAmountPosts: typeof options.maximumAmountPosts === "number" ? options.maximumAmountPosts : 100,
   });
 
   const board = useRequiredBoard();
   const t = useScopedI18n("widget.rssFeed");
-  const warning = isStale
+  if (feed.hasError) {
+    return (
+      <BaseWidgetError
+        icon={IconServerOff}
+        message={t("error.allFeedsFailed")}
+        showLogsLink
+        onRetry={() => void feed.refetch()}
+      />
+    );
+  }
+
+  const warning = feed.isStale
     ? t("warning.stale")
-    : failedFeedCount > 0
-      ? t("warning.partial", { count: failedFeedCount })
+    : feed.failedFeedCount > 0
+      ? t("warning.partial", { count: feed.failedFeedCount })
       : undefined;
 
   const languageDir = options.enableRtl ? "RTL" : "LTR";
@@ -69,7 +81,7 @@ export default function RssFeed({ options, width, height }: WidgetComponentProps
         </Alert>
       )}
       <SimpleGrid cols={columns} w="100%" spacing={spacing} verticalSpacing={spacing}>
-        {feedEntries.map((feedEntry) => {
+        {feed.entries.map((feedEntry) => {
           const href = getSafeApplicationUrl(feedEntry.link, { baseUrl: feedEntry.feedUrl });
           return (
             <Card

From 0c5251a971c466651a4007710af2da308924f552 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 20:44:28 +0200
Subject: [PATCH 42/75] fix: finish widget modernization audit

---
 .../app/[locale]/boards/_layout-creator.tsx   |  2 +-
 .../advanced-focus/advanced-focus.module.css  |  2 +-
 .../board/advanced-focus/context.tsx          | 15 ++-
 .../board/advanced-focus/manual-surface.tsx   |  2 +-
 apps/nextjs/src/components/layout/header.tsx  |  7 +-
 e2e/board-advanced-interactions.spec.ts       |  8 ++
 packages/translation/src/lang/de.json         | 15 ++-
 packages/translation/src/lang/en.json         | 15 ++-
 packages/translation/src/lang/fr.json         | 15 ++-
 packages/translation/src/lang/he.json         | 15 ++-
 packages/ui/src/styles.css                    |  8 ++
 .../src/beszel/_shared/disk-usage.module.css  | 11 +++
 .../widgets/src/beszel/_shared/disk-usage.tsx | 92 +++++++++++--------
 .../widgets/src/beszel/_shared/stats-view.tsx | 36 +++++---
 .../src/beszel/_shared/system-stats-modal.tsx |  1 +
 .../widgets/src/beszel/_shared/tooltip.tsx    | 32 ++++---
 .../src/dns-hole/summary/component.tsx        | 11 +--
 .../network-controller/summary/component.tsx  | 13 +--
 .../src/smart-home/entity-state/component.tsx | 12 ++-
 .../src/smart-home/entity-state/state.spec.ts | 16 ++++
 .../src/smart-home/entity-state/state.ts      | 11 +++
 .../execute-automation/component.tsx          |  3 +-
 .../widgets/src/smart-home/layout.spec.ts     | 14 +++
 packages/widgets/src/smart-home/layout.ts     |  1 +
 packages/widgets/src/umami/umami-content.tsx  | 42 ++++-----
 .../widgets/src/umami/umami-layout.spec.ts    | 30 ++++++
 packages/widgets/src/umami/umami-layout.ts    | 16 ++++
 packages/widgets/src/weather/component.tsx    |  3 +-
 28 files changed, 336 insertions(+), 112 deletions(-)
 create mode 100644 packages/widgets/src/beszel/_shared/disk-usage.module.css
 create mode 100644 packages/widgets/src/smart-home/entity-state/state.spec.ts
 create mode 100644 packages/widgets/src/smart-home/entity-state/state.ts
 create mode 100644 packages/widgets/src/smart-home/layout.spec.ts
 create mode 100644 packages/widgets/src/smart-home/layout.ts
 create mode 100644 packages/widgets/src/umami/umami-layout.spec.ts
 create mode 100644 packages/widgets/src/umami/umami-layout.ts

diff --git a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx b/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
index 3cddc6685..67a84d26b 100644
--- a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
@@ -76,7 +76,7 @@ export const createBoardLayout = <TParams extends Params>({
                     actions={headerActions}
                     hasNavigation={false}
                   />
-                  <AppShellMain>{children}</AppShellMain>
+                  <AppShellMain data-advanced-focus-background>{children}</AppShellMain>
                 </ClientShell>
               </BoardTourWrapper>
             </BoardMantineProvider>
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index 388212e33..1293638ba 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -70,7 +70,7 @@
 .surfaceHostAdvanced {
   position: fixed;
   inset: 0;
-  z-index: calc(var(--mantine-z-index-modal) - 1);
+  z-index: var(--homarr-z-index-widget-focus);
   width: auto;
   height: auto;
   pointer-events: none;
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 4f8746632..5cf3135f0 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -229,6 +229,19 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     if (isEditMode && activeRef.current) close(false);
   }, [close, isEditMode]);
 
+  useEffect(() => {
+    if (active?.activation !== "manual") return;
+    const background = document.querySelectorAll<HTMLElement>("[data-advanced-focus-background]");
+    background.forEach((element) => {
+      element.inert = true;
+    });
+    return () => {
+      background.forEach((element) => {
+        element.inert = false;
+      });
+    };
+  }, [active?.activation]);
+
   const value = useMemo(
     () => ({ active, open, close, dismiss, hover, leave }),
     [active, close, dismiss, hover, leave, open],
@@ -244,7 +257,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
             data-advanced-focus-overlay
             backgroundOpacity={0.38}
             blur={0}
-            zIndex="calc(var(--mantine-z-index-modal) - 2)"
+            zIndex="var(--homarr-z-index-widget-preview-backdrop)"
             className={`${classes.backdrop} ${active.phase === "closing" ? classes.backdropClosing : ""}`}
             aria-hidden
           />
diff --git a/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx b/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
index 7772f0d6f..9cd01848b 100644
--- a/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/manual-surface.tsx
@@ -59,7 +59,7 @@ export const AdvancedFocusManualSurface = ({
       radius={radius}
       padding={0}
       shadow="none"
-      zIndex="calc(var(--mantine-z-index-modal) - 1)"
+      zIndex="var(--homarr-z-index-widget-focus)"
       closeOnEscape={false}
       closeOnClickOutside
       lockScroll
diff --git a/apps/nextjs/src/components/layout/header.tsx b/apps/nextjs/src/components/layout/header.tsx
index e9d93f7fc..fd932b079 100644
--- a/apps/nextjs/src/components/layout/header.tsx
+++ b/apps/nextjs/src/components/layout/header.tsx
@@ -18,7 +18,12 @@ interface Props {
 
 export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
   return (
-    <AppShellHeader maw="100vw" zIndex={201} style={{ overflowX: "hidden" }}>
+    <AppShellHeader
+      maw="100vw"
+      zIndex="var(--homarr-z-index-board-header)"
+      style={{ overflowX: "hidden" }}
+      data-advanced-focus-background
+    >
       <Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
         <Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
           {hasNavigation && <ClientBurger />}
diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 6f2731629..eb067e693 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -75,6 +75,8 @@ describe("Board advanced interactions", () => {
       const bookmarksPreviewSurface = page.getByRole("region", { name: "Bookmarks advanced view" });
       const dimmingOverlay = page.locator("[data-advanced-focus-overlay]");
       const otherWidget = page.locator(".grid-stack-item[data-kind='bookmarks'] > .grid-stack-item-content").first();
+      const header = page.locator("header[data-advanced-focus-background]");
+      const boardMain = page.locator("main[data-advanced-focus-background]");
 
       await compactSurface.evaluate((element) => {
         element.setAttribute("data-lifecycle-probe", "same-instance");
@@ -93,6 +95,8 @@ describe("Board advanced interactions", () => {
       await expect(dimmingOverlay).toHaveCSS("pointer-events", "none");
       await expect(otherWidget).toBeVisible();
       await expect(widget).toBeFocused();
+      await expect(header).not.toHaveAttribute("inert", "");
+      await expect(boardMain).not.toHaveAttribute("inert", "");
 
       await previewSurface.click({ button: "right", position: { x: 80, y: 80 } });
       const portalledMenuItem = page.getByRole("menuitem", { name: "Open advanced view" });
@@ -136,6 +140,8 @@ describe("Board advanced interactions", () => {
       await page.keyboard.press("Shift+Enter");
       await expect(manualSurface).toBeVisible();
       await expect(manualSurface).toHaveAttribute("aria-modal", "true");
+      await expect(header).toHaveAttribute("inert", "");
+      await expect(boardMain).toHaveAttribute("inert", "");
       expect(await manualSurface.evaluate((element) => element.closest(".grid-stack-item"))).toBeNull();
       await expect(manualSurface.locator(".clock-wrapper")).toHaveAttribute("data-lifecycle-probe", "same-instance");
       await expect(dimmingOverlay).toHaveCSS("pointer-events", "auto");
@@ -210,6 +216,8 @@ describe("Board advanced interactions", () => {
       await page.keyboard.press("Escape");
       await expect(manualSurface).toBeHidden();
       await expect(widget).toBeFocused();
+      await expect(header).not.toHaveAttribute("inert", "");
+      await expect(boardMain).not.toHaveAttribute("inert", "");
       expect(await page.evaluate(() => getComputedStyle(document.body).overflow)).not.toBe("hidden");
 
       await widget.click({ button: "right" });
diff --git a/packages/translation/src/lang/de.json b/packages/translation/src/lang/de.json
index 924f7f877..043f66a07 100644
--- a/packages/translation/src/lang/de.json
+++ b/packages/translation/src/lang/de.json
@@ -1405,6 +1405,8 @@
     "success": "Erfolgreich",
     "beta": "Beta",
     "error": "Fehler",
+    "total": "Gesamt",
+    "filesystemUsage": "{count, plural, one {Auslastung für # Dateisystem anzeigen} other {Auslastung für # Dateisysteme anzeigen}}",
     "action": {
       "add": "Hinzufügen",
       "apply": "Übernehmen",
@@ -2108,6 +2110,12 @@
         "clickable": {
           "label": "Anklickbar"
         }
+      },
+      "state": {
+        "on": "Ein",
+        "off": "Aus",
+        "unavailable": "Nicht verfügbar",
+        "unknown": "Unbekannt"
       }
     },
     "smartHome-executeAutomation": {
@@ -3547,8 +3555,13 @@
     "networkControllerSummary": {
       "option": {},
       "card": {
+        "wan": "WAN",
+        "web": "Web",
+        "wifi": "WLAN",
+        "lan": "LAN",
         "vpn": {
-          "countConnected": "{count} verbunden"
+          "label": "VPN",
+          "countConnected": "{count, plural, one {# verbunden} other {# verbunden}}"
         }
       },
       "error": {
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index ac2d8ad9b..2dfc86a92 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -1410,6 +1410,8 @@
       "loading": "Loading widget data",
       "stale": "Could not refresh {widget}; showing saved data"
     },
+    "total": "Total",
+    "filesystemUsage": "{count, plural, one {Show usage for # filesystem} other {Show usage for # filesystems}}",
     "action": {
       "add": "Add",
       "apply": "Apply",
@@ -2179,6 +2181,12 @@
           "label": "Clickable"
         }
       },
+      "state": {
+        "on": "On",
+        "off": "Off",
+        "unavailable": "Unavailable",
+        "unknown": "Unknown"
+      },
       "advanced": {
         "entityId": "Entity ID: {id}",
         "lastUpdated": "Updated {date}",
@@ -3740,8 +3748,13 @@
     "networkControllerSummary": {
       "option": {},
       "card": {
+        "wan": "WAN",
+        "web": "Web",
+        "wifi": "Wi-Fi",
+        "lan": "LAN",
         "vpn": {
-          "countConnected": "{count} connected"
+          "label": "VPN",
+          "countConnected": "{count, plural, one {# connected} other {# connected}}"
         }
       },
       "error": {
diff --git a/packages/translation/src/lang/fr.json b/packages/translation/src/lang/fr.json
index 024c774d2..68b7034c9 100644
--- a/packages/translation/src/lang/fr.json
+++ b/packages/translation/src/lang/fr.json
@@ -1405,6 +1405,8 @@
     "success": "Succès",
     "beta": "Bêta",
     "error": "Erreur",
+    "total": "Total",
+    "filesystemUsage": "{count, plural, one {Afficher l’utilisation de # système de fichiers} other {Afficher l’utilisation de # systèmes de fichiers}}",
     "action": {
       "add": "Ajouter",
       "apply": "Appliquer",
@@ -2108,6 +2110,12 @@
         "clickable": {
           "label": "Cliquable"
         }
+      },
+      "state": {
+        "on": "Activé",
+        "off": "Désactivé",
+        "unavailable": "Indisponible",
+        "unknown": "Inconnu"
       }
     },
     "smartHome-executeAutomation": {
@@ -3547,8 +3555,13 @@
     "networkControllerSummary": {
       "option": {},
       "card": {
+        "wan": "WAN",
+        "web": "Web",
+        "wifi": "Wi-Fi",
+        "lan": "LAN",
         "vpn": {
-          "countConnected": "{count} connecté"
+          "label": "VPN",
+          "countConnected": "{count, plural, one {# connecté} other {# connectés}}"
         }
       },
       "error": {
diff --git a/packages/translation/src/lang/he.json b/packages/translation/src/lang/he.json
index 47fc7f26b..5b8d09058 100644
--- a/packages/translation/src/lang/he.json
+++ b/packages/translation/src/lang/he.json
@@ -1405,6 +1405,8 @@
     "success": "הצלחה",
     "beta": "בטא",
     "error": "שגיאה",
+    "total": "סה״כ",
+    "filesystemUsage": "{count, plural, one {הצגת השימוש במערכת קבצים אחת} other {הצגת השימוש ב-# מערכות קבצים}}",
     "action": {
       "add": "הוסף",
       "apply": "החל",
@@ -2108,6 +2110,12 @@
         "clickable": {
           "label": "ניתן ללחיצה"
         }
+      },
+      "state": {
+        "on": "פעיל",
+        "off": "כבוי",
+        "unavailable": "לא זמין",
+        "unknown": "לא ידוע"
       }
     },
     "smartHome-executeAutomation": {
@@ -3547,8 +3555,13 @@
     "networkControllerSummary": {
       "option": {},
       "card": {
+        "wan": "WAN",
+        "web": "אינטרנט",
+        "wifi": "אלחוטי",
+        "lan": "LAN",
         "vpn": {
-          "countConnected": "{count} מחובר"
+          "label": "VPN",
+          "countConnected": "{count, plural, one {אחד מחובר} other {# מחוברים}}"
         }
       },
       "error": {
diff --git a/packages/ui/src/styles.css b/packages/ui/src/styles.css
index 07a86f6a3..2a3d7b0eb 100644
--- a/packages/ui/src/styles.css
+++ b/packages/ui/src/styles.css
@@ -3,3 +3,11 @@
 @import "@mantine/dates/styles.css";
 @import "@gfazioli/mantine-onboarding-tour/styles.css";
 @import "mantine-react-table/styles.css";
+
+:root {
+  --homarr-z-index-widget-background-tooltip: calc(var(--mantine-z-index-modal) - 4);
+  --homarr-z-index-widget-preview-backdrop: calc(var(--mantine-z-index-modal) - 3);
+  --homarr-z-index-board-header: calc(var(--mantine-z-index-modal) - 2);
+  --homarr-z-index-widget-focus: calc(var(--mantine-z-index-modal) - 1);
+  --homarr-z-index-modal-tooltip: calc(var(--mantine-z-index-modal) + 2);
+}
diff --git a/packages/widgets/src/beszel/_shared/disk-usage.module.css b/packages/widgets/src/beszel/_shared/disk-usage.module.css
new file mode 100644
index 000000000..68cfb396e
--- /dev/null
+++ b/packages/widgets/src/beszel/_shared/disk-usage.module.css
@@ -0,0 +1,11 @@
+.target {
+  min-width: 24px;
+  min-height: 24px;
+}
+
+@media (pointer: coarse) {
+  .target {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
diff --git a/packages/widgets/src/beszel/_shared/disk-usage.tsx b/packages/widgets/src/beszel/_shared/disk-usage.tsx
index 934981daf..ce7ec95f8 100644
--- a/packages/widgets/src/beszel/_shared/disk-usage.tsx
+++ b/packages/widgets/src/beszel/_shared/disk-usage.tsx
@@ -1,8 +1,12 @@
-import { Box, getDefaultZIndex, Group, HoverCard, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { Box, Group, Popover, Progress, Stack, Text, UnstyledButton } from "@mantine/core";
+
+import { useScopedI18n } from "@homarr/translation/client";
 
 import type { BeszelSystemRow } from "./types";
 import { thresholdColor } from "./colors";
 import { formatPercent, getProgressTrackSize } from "./format";
+import classes from "./disk-usage.module.css";
 
 interface DiskUsageProps {
   system: BeszelSystemRow;
@@ -17,34 +21,44 @@ const mountLabel = (path: string) =>
 const severityColor = (value: number) => `var(--mantine-color-${thresholdColor(value)}-6)`;
 
 export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap = 6 }: DiskUsageProps) => {
+  const t = useScopedI18n("common");
+  const [opened, setOpened] = useState(false);
   const filesystems = Object.entries(system.extraFilesystems).filter(([path]) => path !== "/");
+  const filesystemUsageLabel = t("filesystemUsage", { count: filesystems.length + 1 });
   const trackSize = getProgressTrackSize(progressSize);
   const dotSize = progressSize === "xs" ? 2 : 3;
   const dotGap = 2;
 
+  useEffect(() => {
+    if (filesystems.length === 0) setOpened(false);
+  }, [filesystems.length]);
+
   return (
     <Group gap={valueGap} wrap="nowrap" style={{ flex: 1, minWidth: 0, marginLeft: "auto" }}>
       <Text size={fontSize} fw={500} w={valueMiw} ta="left" style={{ whiteSpace: "nowrap", flexShrink: 0 }}>
         {formatPercent(system.disk)}
       </Text>
-      <HoverCard
-        zIndex={getDefaultZIndex("modal") - 3}
-        position="right"
-        withArrow
-        shadow="md"
-        openDelay={200}
-        closeDelay={100}
-        disabled={filesystems.length === 0}
-      >
-        <HoverCard.Target>
-          {filesystems.length > 0 ? (
+      {filesystems.length > 0 ? (
+        <Popover
+          opened={opened}
+          onChange={setOpened}
+          zIndex="var(--homarr-z-index-widget-background-tooltip)"
+          position="right"
+          withArrow
+          shadow="md"
+        >
+          <Popover.Target>
             <UnstyledButton
-              aria-label={`Show usage for ${filesystems.length + 1} filesystems`}
+              aria-label={filesystemUsageLabel}
+              className={classes.target}
+              onMouseEnter={() => setOpened(true)}
+              onMouseLeave={() => setOpened(false)}
+              onBlur={() => setOpened(false)}
+              onClick={() => setOpened(true)}
               style={{
                 display: "flex",
                 alignItems: "center",
                 flex: 1,
-                minWidth: 24,
                 cursor: "pointer",
               }}
             >
@@ -75,32 +89,32 @@ export const DiskUsage = ({ system, fontSize, progressSize, valueMiw, valueGap =
                 </Group>
               </Box>
             </UnstyledButton>
-          ) : (
-            <Box style={{ display: "flex", alignItems: "center", flex: 1, minWidth: 24 }}>
-              <Box pos="relative" style={{ flex: 1, minWidth: 24 }}>
-                <Progress value={system.disk} color={thresholdColor(system.disk)} size={trackSize} />
-              </Box>
-            </Box>
-          )}
-        </HoverCard.Target>
-        <HoverCard.Dropdown p={8}>
-          <Stack gap={6} miw={145}>
-            {[["/", system.disk] as const, ...filesystems].map(([path, value]) => (
-              <Stack key={path} gap={1}>
-                <Text size="10px" c="dimmed" fw={500} lh={1.2}>
-                  {mountLabel(path)}
-                </Text>
-                <Group gap={8} wrap="nowrap">
-                  <Text size="sm" fw={600} miw={48} lh={1.25}>
-                    {formatPercent(value)}
+          </Popover.Target>
+          <Popover.Dropdown aria-label={filesystemUsageLabel} p={8}>
+            <Stack gap={6} miw={145}>
+              {[["/", system.disk] as const, ...filesystems].map(([path, value]) => (
+                <Stack key={path} gap={1}>
+                  <Text size="10px" c="dimmed" fw={500} lh={1.2}>
+                    {mountLabel(path)}
                   </Text>
-                  <Progress value={value} color={thresholdColor(value)} size="xs" style={{ flex: 1 }} />
-                </Group>
-              </Stack>
-            ))}
-          </Stack>
-        </HoverCard.Dropdown>
-      </HoverCard>
+                  <Group gap={8} wrap="nowrap">
+                    <Text size="sm" fw={600} miw={48} lh={1.25}>
+                      {formatPercent(value)}
+                    </Text>
+                    <Progress value={value} color={thresholdColor(value)} size="xs" style={{ flex: 1 }} />
+                  </Group>
+                </Stack>
+              ))}
+            </Stack>
+          </Popover.Dropdown>
+        </Popover>
+      ) : (
+        <Box style={{ display: "flex", alignItems: "center", flex: 1, minWidth: 24 }}>
+          <Box pos="relative" style={{ flex: 1, minWidth: 24 }}>
+            <Progress value={system.disk} color={thresholdColor(system.disk)} size={trackSize} />
+          </Box>
+        </Box>
+      )}
     </Group>
   );
 };
diff --git a/packages/widgets/src/beszel/_shared/stats-view.tsx b/packages/widgets/src/beszel/_shared/stats-view.tsx
index 548902ce9..c2042a4a9 100644
--- a/packages/widgets/src/beszel/_shared/stats-view.tsx
+++ b/packages/widgets/src/beszel/_shared/stats-view.tsx
@@ -20,16 +20,23 @@ import {
   useSystemChartData,
 } from "./chart";
 import { chartAxisFormatters, formatByteRate, formatGB, formatPercent, formatStorageBytes } from "./format";
+import type { BeszelTooltipLayer } from "./tooltip";
 import { makeTooltipProps } from "./tooltip";
 import { useLiveStats } from "./use-live-stats";
 
 const CHART_HEIGHT = 180;
 const MB = 1024 * 1024;
-const tooltipPercent = makeTooltipProps(formatPercent);
-const tooltipGB = makeTooltipProps(formatGB, true);
-const tooltipRate = makeTooltipProps(formatByteRate, true);
-const tooltipPercentTotal = makeTooltipProps(formatPercent, true);
-const tooltipBytesTotal = makeTooltipProps(formatStorageBytes, true);
+const makeTooltipSet = (layer: BeszelTooltipLayer) => ({
+  percent: makeTooltipProps(formatPercent, false, layer),
+  gigabytes: makeTooltipProps(formatGB, true, layer),
+  rate: makeTooltipProps(formatByteRate, true, layer),
+  percentTotal: makeTooltipProps(formatPercent, true, layer),
+  bytesTotal: makeTooltipProps(formatStorageBytes, true, layer),
+});
+const tooltipSets = {
+  background: makeTooltipSet("background"),
+  modal: makeTooltipSet("modal"),
+};
 
 const ChartSkeleton = () => (
   <Stack gap={4} style={{ minWidth: 0 }}>
@@ -59,6 +66,7 @@ interface BeszelStatsViewProps {
   visibility: BeszelStatsVisibility;
   columns: 1 | 2;
   onSwitchToHistorical?: () => void;
+  tooltipLayer?: BeszelTooltipLayer;
 }
 
 const whenVisible = <T,>(visible: boolean, data: T | undefined) => (visible ? data : undefined);
@@ -70,11 +78,13 @@ export function BeszelStatsView({
   visibility,
   columns,
   onSwitchToHistorical,
+  tooltipLayer = "background",
 }: BeszelStatsViewProps) {
   const t = useScopedI18n("widget.beszelSystemStats");
   const locale = useCurrentIntlLocale();
   const showDocker = visibility.dockerCpu || visibility.dockerMemory || visibility.dockerNetwork;
   const isLive = timePeriod === "1m";
+  const tooltips = tooltipSets[tooltipLayer];
 
   const historicalQuery = clientApi.widget.beszel.getSystemStats.useQuery(
     { integrationIds, systemId, timePeriod, includeDocker: showDocker },
@@ -256,7 +266,7 @@ export function BeszelStatsView({
             series: series.cpu,
             yAxisFormatter: chartAxisFormatters.percent,
             yAxisDomain: CPU_Y_AXIS_DOMAIN,
-            tooltipProps: tooltipPercent,
+            tooltipProps: tooltips.percent,
           }}
         />
       )}
@@ -270,7 +280,7 @@ export function BeszelStatsView({
             type: "stacked",
             series: series.memory,
             yAxisFormatter: chartAxisFormatters.gb,
-            tooltipProps: tooltipGB,
+            tooltipProps: tooltips.gigabytes,
           }}
         />
       )}
@@ -284,7 +294,7 @@ export function BeszelStatsView({
             type: "stacked",
             series: diskSeries,
             yAxisFormatter: chartAxisFormatters.gb,
-            tooltipProps: tooltipGB,
+            tooltipProps: tooltips.gigabytes,
           }}
         />
       )}
@@ -297,7 +307,7 @@ export function BeszelStatsView({
             data: diskIOData,
             series: series.diskIO,
             yAxisFormatter: chartAxisFormatters.rate,
-            tooltipProps: tooltipRate,
+            tooltipProps: tooltips.rate,
           }}
         />
       )}
@@ -310,7 +320,7 @@ export function BeszelStatsView({
             data: networkData,
             series: series.network,
             yAxisFormatter: chartAxisFormatters.rate,
-            tooltipProps: tooltipRate,
+            tooltipProps: tooltips.rate,
           }}
         />
       )}
@@ -326,7 +336,7 @@ export function BeszelStatsView({
                 type: "stacked",
                 series: containerSeries,
                 yAxisFormatter: chartAxisFormatters.percent,
-                tooltipProps: tooltipPercentTotal,
+                tooltipProps: tooltips.percentTotal,
               }}
             />
           )}
@@ -340,7 +350,7 @@ export function BeszelStatsView({
                 type: "stacked",
                 series: containerSeries,
                 yAxisFormatter: chartAxisFormatters.bytes,
-                tooltipProps: tooltipBytesTotal,
+                tooltipProps: tooltips.bytesTotal,
               }}
             />
           )}
@@ -353,7 +363,7 @@ export function BeszelStatsView({
                 data: dockerNetworkData,
                 series: containerSeries,
                 yAxisFormatter: chartAxisFormatters.rate,
-                tooltipProps: tooltipRate,
+                tooltipProps: tooltips.rate,
               }}
             />
           )}
diff --git a/packages/widgets/src/beszel/_shared/system-stats-modal.tsx b/packages/widgets/src/beszel/_shared/system-stats-modal.tsx
index fda3146d2..bc13d498b 100644
--- a/packages/widgets/src/beszel/_shared/system-stats-modal.tsx
+++ b/packages/widgets/src/beszel/_shared/system-stats-modal.tsx
@@ -50,6 +50,7 @@ export const BeszelSystemStatsModal = createModal<BeszelSystemStatsModalProps>((
         timePeriod={timePeriod}
         visibility={allCharts}
         columns={2}
+        tooltipLayer="modal"
         onSwitchToHistorical={() => setTimePeriod("1h")}
       />
     </Stack>
diff --git a/packages/widgets/src/beszel/_shared/tooltip.tsx b/packages/widgets/src/beszel/_shared/tooltip.tsx
index 7b33e86da..f6f7b35c6 100644
--- a/packages/widgets/src/beszel/_shared/tooltip.tsx
+++ b/packages/widgets/src/beszel/_shared/tooltip.tsx
@@ -3,9 +3,7 @@
 import type { CSSProperties } from "react";
 import { createPortal } from "react-dom";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { getDefaultZIndex } from "@mantine/core";
-
-import { useCurrentIntlLocale } from "@homarr/translation/client";
+import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { formatLocalizedDate } from "../../common/locale";
 
@@ -54,15 +52,17 @@ interface PortalTooltipProps {
   payload?: TooltipPayloadItem[];
   formatter: (value: number) => string;
   showTotal?: boolean;
+  layer: BeszelTooltipLayer;
 }
 
-const MARGIN = 14;
-const BACKGROUND_TOOLTIP_Z_INDEX = getDefaultZIndex("modal") - 3;
+export type BeszelTooltipLayer = "background" | "modal";
 
-const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }: PortalTooltipProps) => {
+const MARGIN = 14;
+const PortalTooltipContent = ({ active, label, payload, formatter, showTotal, layer }: PortalTooltipProps) => {
   const locale = useCurrentIntlLocale();
+  const t = useScopedI18n("common");
   const mouseRef = useRef({ x: 0, y: 0 });
-  const [pos, setPos] = useState({ x: 0, y: 0, isAdvanced: false });
+  const [pos, setPos] = useState({ x: 0, y: 0 });
   const rafRef = useRef(0);
   const tooltipRef = useRef<HTMLDivElement>(null);
 
@@ -73,10 +73,8 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
       const el = tooltipRef.current;
       const mx = mouseRef.current.x;
       const my = mouseRef.current.y;
-      const isAdvanced = Boolean(document.elementFromPoint(mx, my)?.closest("[data-advanced-focus-surface]"));
-
       if (!el) {
-        setPos({ x: mx + MARGIN, y: my, isAdvanced });
+        setPos({ x: mx + MARGIN, y: my });
         return;
       }
 
@@ -91,7 +89,7 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
       if (y < MARGIN) y = MARGIN;
       if (y + height > vh - MARGIN) y = vh - MARGIN - height;
 
-      setPos({ x, y, isAdvanced });
+      setPos({ x, y });
     });
   }, []);
 
@@ -126,7 +124,8 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
     position: "fixed",
     left: pos.x,
     top: pos.y,
-    zIndex: pos.isAdvanced ? getDefaultZIndex("modal") : BACKGROUND_TOOLTIP_Z_INDEX,
+    zIndex:
+      layer === "modal" ? "var(--homarr-z-index-modal-tooltip)" : "var(--homarr-z-index-widget-background-tooltip)",
     pointerEvents: "none",
   };
 
@@ -143,7 +142,7 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
         ))}
         {showTotal && sorted.length > 1 && (
           <div style={{ ...styles.row, ...styles.separator }}>
-            <span style={styles.name}>Total</span>
+            <span style={styles.name}>{t("total")}</span>
             <span style={styles.value}>{formatter(total)}</span>
           </div>
         )}
@@ -154,7 +153,11 @@ const PortalTooltipContent = ({ active, label, payload, formatter, showTotal }:
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const makeTooltipProps = (formatter: (v: number) => string, showTotal = false) => ({
+export const makeTooltipProps = (
+  formatter: (v: number) => string,
+  showTotal = false,
+  layer: BeszelTooltipLayer = "background",
+) => ({
   content: (props: any) => (
     <PortalTooltipContent
       active={props.active}
@@ -162,6 +165,7 @@ export const makeTooltipProps = (formatter: (v: number) => string, showTotal = f
       payload={props.payload}
       formatter={formatter}
       showTotal={showTotal}
+      layer={layer}
     />
   ),
   wrapperStyle: { visibility: "hidden" as const, position: "absolute" as const, width: 0, height: 0 },
diff --git a/packages/widgets/src/dns-hole/summary/component.tsx b/packages/widgets/src/dns-hole/summary/component.tsx
index 38c0eceea..f61991d27 100644
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
 import {
   Avatar,
@@ -46,7 +45,7 @@ export default function DnsHoleSummaryWidget({
 
   const t = useI18n();
 
-  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);
+  const data = summaries.flatMap(({ summary }) => summary);
   const layoutProps = boxPropsByLayout(options.layout);
   const showSourceStatuses = summaries.length > 1 && width >= 240 && height >= 220;
 
@@ -120,7 +119,7 @@ const stats = [
         size === "sm" ? 0 : 2,
       ),
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedToday"),
-    color: "rgba(240, 82, 60, 0.4)", // RED
+    color: "var(--mantine-color-red-light)",
   },
   {
     icon: IconPercentage,
@@ -130,7 +129,7 @@ const stats = [
       return `${formatNumber(totalCount === 0 ? 0 : (blocked / totalCount) * 100, size === "sm" ? 0 : 2)}%`;
     },
     label: (t) => t("widget.dnsHoleSummary.data.adsBlockedTodayPercentage"),
-    color: "rgba(255, 165, 20, 0.4)", // YELLOW
+    color: "var(--mantine-color-yellow-light)",
   },
   {
     icon: IconSearch,
@@ -140,7 +139,7 @@ const stats = [
         size === "sm" ? 0 : 2,
       ),
     label: (t) => t("widget.dnsHoleSummary.data.dnsQueriesToday"),
-    color: "rgba(0, 175, 218, 0.4)", // BLUE
+    color: "var(--mantine-color-cyan-light)",
   },
   {
     icon: IconWorldWww,
@@ -156,7 +155,7 @@ const stats = [
     },
     tooltip: (data, t) => (data.length >= 2 ? t("widget.dnsHoleSummary.domainsTooltip") : undefined),
     label: (t) => t("widget.dnsHoleSummary.data.domainsBeingBlocked"),
-    color: "rgba(0, 176, 96, 0.4)", // GREEN
+    color: "var(--mantine-color-green-light)",
   },
 ] satisfies StatItem[];
 
diff --git a/packages/widgets/src/network-controller/summary/component.tsx b/packages/widgets/src/network-controller/summary/component.tsx
index 7f1a355b1..1584e70a7 100644
--- a/packages/widgets/src/network-controller/summary/component.tsx
+++ b/packages/widgets/src/network-controller/summary/component.tsx
@@ -76,7 +76,7 @@ export default function NetworkControllerSummaryWidget({
                     />
                   }
                 >
-                  WAN
+                  {t("widget.networkControllerSummary.card.wan")}
                 </List.Item>
                 <List.Item
                   icon={
@@ -88,7 +88,7 @@ export default function NetworkControllerSummaryWidget({
                   }
                 >
                   <Text>
-                    WWW
+                    {t("widget.networkControllerSummary.card.web")}
                     <Text c="dimmed" size="sm" ms="xs" span>
                       {summary.www.latency}ms{showDetails ? ` · ${summary.www.ping}ms` : ""}
                     </Text>
@@ -103,7 +103,8 @@ export default function NetworkControllerSummaryWidget({
                     />
                   }
                 >
-                  Wi-Fi{showDetails ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
+                  {t("widget.networkControllerSummary.card.wifi")}
+                  {showDetails ? ` · ${summary.wifi.users + summary.wifi.guests}` : ""}
                 </List.Item>
                 {showDetails && (
                   <List.Item
@@ -115,7 +116,7 @@ export default function NetworkControllerSummaryWidget({
                       />
                     }
                   >
-                    LAN · {summary.lan.users + summary.lan.guests}
+                    {t("widget.networkControllerSummary.card.lan")} · {summary.lan.users + summary.lan.guests}
                   </List.Item>
                 )}
                 <List.Item
@@ -128,9 +129,9 @@ export default function NetworkControllerSummaryWidget({
                   }
                 >
                   <Text>
-                    VPN
+                    {t("widget.networkControllerSummary.card.vpn.label")}
                     <Text c="dimmed" size="sm" ms="xs" span>
-                      {t("widget.networkControllerSummary.card.vpn.countConnected", { count: `${summary.vpn.users}` })}
+                      {t("widget.networkControllerSummary.card.vpn.countConnected", { count: summary.vpn.users })}
                     </Text>
                   </Text>
                 </List.Item>
diff --git a/packages/widgets/src/smart-home/entity-state/component.tsx b/packages/widgets/src/smart-home/entity-state/component.tsx
index 38ea95bbb..f5d6a2ed9 100644
--- a/packages/widgets/src/smart-home/entity-state/component.tsx
+++ b/packages/widgets/src/smart-home/entity-state/component.tsx
@@ -11,6 +11,8 @@ import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { isSmartHomeTiny } from "../layout";
+import { getEntityStateLabel } from "./state";
 
 export default function SmartHomeEntityStateWidget({
   options,
@@ -95,7 +97,7 @@ export default function SmartHomeEntityStateWidget({
 
   if (entityError && entity === undefined) throw entityError;
 
-  const isTiny = width < 128 || height < 96;
+  const isTiny = isSmartHomeTiny(width, height);
   const advancedAttributes = [
     { key: "unit" as const, value: entity?.attributes.unit_of_measurement },
     { key: "deviceClass" as const, value: entity?.attributes.device_class },
@@ -105,7 +107,13 @@ export default function SmartHomeEntityStateWidget({
     displayMode === "advanced" && typeof entity?.attributes.friendly_name === "string"
       ? entity.attributes.friendly_name
       : options.displayName;
-  const state = entity?.state ?? "—";
+  const knownStates = {
+    on: t("state.on"),
+    off: t("state.off"),
+    unavailable: t("state.unavailable"),
+    unknown: t("state.unknown"),
+  };
+  const state = getEntityStateLabel(entity?.state, knownStates);
 
   return (
     <UnstyledButton
diff --git a/packages/widgets/src/smart-home/entity-state/state.spec.ts b/packages/widgets/src/smart-home/entity-state/state.spec.ts
new file mode 100644
index 000000000..072b5dde4
--- /dev/null
+++ b/packages/widgets/src/smart-home/entity-state/state.spec.ts
@@ -0,0 +1,16 @@
+import { describe, expect, test } from "vitest";
+
+import { getEntityStateLabel } from "./state";
+
+const labels = { on: "On", off: "Off", unavailable: "Unavailable", unknown: "Unknown" };
+
+describe("getEntityStateLabel", () => {
+  test("localizes known states and preserves custom states", () => {
+    expect(getEntityStateLabel("on", labels)).toBe("On");
+    expect(getEntityStateLabel("heating", labels)).toBe("heating");
+  });
+
+  test.each(["__proto__", "constructor", "toString"])("preserves prototype-like state %s", (state) => {
+    expect(getEntityStateLabel(state, labels)).toBe(state);
+  });
+});
diff --git a/packages/widgets/src/smart-home/entity-state/state.ts b/packages/widgets/src/smart-home/entity-state/state.ts
new file mode 100644
index 000000000..6100221d1
--- /dev/null
+++ b/packages/widgets/src/smart-home/entity-state/state.ts
@@ -0,0 +1,11 @@
+export interface LocalizedEntityStates {
+  on: string;
+  off: string;
+  unavailable: string;
+  unknown: string;
+}
+
+export const getEntityStateLabel = (state: string | undefined, labels: LocalizedEntityStates) => {
+  if (!state) return "—";
+  return Object.hasOwn(labels, state) ? labels[state as keyof LocalizedEntityStates] : state;
+};
diff --git a/packages/widgets/src/smart-home/execute-automation/component.tsx b/packages/widgets/src/smart-home/execute-automation/component.tsx
index 4fa6fdda7..40e5a3487 100644
--- a/packages/widgets/src/smart-home/execute-automation/component.tsx
+++ b/packages/widgets/src/smart-home/execute-automation/component.tsx
@@ -21,6 +21,7 @@ import { useRegisterSpotlightContextActions } from "@homarr/spotlight";
 import { useCurrentIntlLocale, useI18n } from "@homarr/translation/client";
 
 import type { WidgetComponentProps } from "../../definition";
+import { isSmartHomeTiny } from "../layout";
 
 export default function SmartHomeTriggerAutomationWidget({
   options,
@@ -83,7 +84,7 @@ export default function SmartHomeTriggerAutomationWidget({
     [canInteract, handleClick, integrationId, isPending, options.automationId, options.displayName],
   );
 
-  const isTiny = width < 128 || height < 96;
+  const isTiny = isSmartHomeTiny(width, height);
 
   return (
     <Box pos="relative" w="100%" h="100%">
diff --git a/packages/widgets/src/smart-home/layout.spec.ts b/packages/widgets/src/smart-home/layout.spec.ts
new file mode 100644
index 000000000..e9643d677
--- /dev/null
+++ b/packages/widgets/src/smart-home/layout.spec.ts
@@ -0,0 +1,14 @@
+import { describe, expect, test } from "vitest";
+
+import { isSmartHomeTiny } from "./layout";
+
+describe("smart home layout", () => {
+  test.each([
+    { width: 127, height: 96, expected: true },
+    { width: 128, height: 95, expected: true },
+    { width: 128, height: 96, expected: false },
+    { width: 256, height: 192, expected: false },
+  ])("classifies $width x $height", ({ width, height, expected }) => {
+    expect(isSmartHomeTiny(width, height)).toBe(expected);
+  });
+});
diff --git a/packages/widgets/src/smart-home/layout.ts b/packages/widgets/src/smart-home/layout.ts
new file mode 100644
index 000000000..488330549
--- /dev/null
+++ b/packages/widgets/src/smart-home/layout.ts
@@ -0,0 +1 @@
+export const isSmartHomeTiny = (width: number, height: number) => width < 128 || height < 96;
diff --git a/packages/widgets/src/umami/umami-content.tsx b/packages/widgets/src/umami/umami-content.tsx
index 493520d04..d88e3beca 100644
--- a/packages/widgets/src/umami/umami-content.tsx
+++ b/packages/widgets/src/umami/umami-content.tsx
@@ -9,6 +9,7 @@ import type { UmamiVisitorStats } from "@homarr/integrations/types";
 import { useCurrentIntlLocale, useScopedI18n } from "@homarr/translation/client";
 
 import { UmamiEventsContent } from "./umami-events-content";
+import { getUmamiLayout } from "./umami-layout";
 import { UmamiTopPagesContent, UmamiTopReferrersContent } from "./umami-top-list";
 import { formatTimeFrameLabel, formatXLabel, umamiQueryOptions } from "./umami-utils";
 import type { TimeFrame } from "./umami-utils";
@@ -96,11 +97,11 @@ export function UmamiContent({
 
   const isOverlay = chartStyle === "overlay" && hasEventSeries;
   const overlayBarSize = 16;
-  const isAdvanced = displayMode === "advanced";
-  const isDense = !isAdvanced && height < 120;
-  const showXAxis = isAdvanced || height >= 140;
-  const showSecondaryStats = isAdvanced || height >= 96;
-  const showDetailedStats = isAdvanced || (width >= 260 && height >= 150);
+  const { isDense, showXAxis, showSecondaryStats, showDetailedStats, stackAdvancedContent } = getUmamiLayout({
+    width,
+    height,
+    displayMode,
+  });
 
   const selectedView =
     viewMode === "events" ? (
@@ -181,22 +182,21 @@ export function UmamiContent({
     </SimpleGrid>
   );
 
-  const advancedContent =
-    width < 900 ? (
-      <ScrollArea h="100%">
-        <Stack gap="md">
-          <Box h={Math.max(280, Math.min(420, height - 160))}>{selectedView}</Box>
-          {advancedLists}
-        </Stack>
-      </ScrollArea>
-    ) : (
-      <SimpleGrid cols={2} spacing="md" h="100%" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
-        <Box h="100%" mih={260}>
-          {selectedView}
-        </Box>
-        <ScrollArea h="100%">{advancedLists}</ScrollArea>
-      </SimpleGrid>
-    );
+  const advancedContent = stackAdvancedContent ? (
+    <ScrollArea h="100%">
+      <Stack gap="md">
+        <Box h={Math.max(280, Math.min(420, height - 160))}>{selectedView}</Box>
+        {advancedLists}
+      </Stack>
+    </ScrollArea>
+  ) : (
+    <SimpleGrid cols={2} spacing="md" h="100%" style={{ gridTemplateRows: "minmax(0, 1fr)" }}>
+      <Box h="100%" mih={260}>
+        {selectedView}
+      </Box>
+      <ScrollArea h="100%">{advancedLists}</ScrollArea>
+    </SimpleGrid>
+  );
 
   return (
     <Stack gap={isDense ? 2 : 4} p={isDense ? 4 : "xs"} h="100%" pos="relative">
diff --git a/packages/widgets/src/umami/umami-layout.spec.ts b/packages/widgets/src/umami/umami-layout.spec.ts
new file mode 100644
index 000000000..b03f5af51
--- /dev/null
+++ b/packages/widgets/src/umami/umami-layout.spec.ts
@@ -0,0 +1,30 @@
+import { describe, expect, test } from "vitest";
+
+import { getUmamiLayout } from "./umami-layout";
+
+describe("Umami layout", () => {
+  test.each([
+    { width: 260, height: 119, property: "isDense" as const, expected: true },
+    { width: 260, height: 120, property: "isDense" as const, expected: false },
+    { width: 260, height: 139, property: "showXAxis" as const, expected: false },
+    { width: 260, height: 140, property: "showXAxis" as const, expected: true },
+    { width: 260, height: 95, property: "showSecondaryStats" as const, expected: false },
+    { width: 260, height: 96, property: "showSecondaryStats" as const, expected: true },
+    { width: 259, height: 150, property: "showDetailedStats" as const, expected: false },
+    { width: 260, height: 149, property: "showDetailedStats" as const, expected: false },
+    { width: 260, height: 150, property: "showDetailedStats" as const, expected: true },
+  ])("sets $property to $expected at $width x $height", ({ width, height, property, expected }) => {
+    expect(getUmamiLayout({ width, height, displayMode: "compact" })[property]).toBe(expected);
+  });
+
+  test("keeps advanced details visible and changes columns at 900px", () => {
+    expect(getUmamiLayout({ width: 899, height: 80, displayMode: "advanced" })).toEqual({
+      isDense: false,
+      showXAxis: true,
+      showSecondaryStats: true,
+      showDetailedStats: true,
+      stackAdvancedContent: true,
+    });
+    expect(getUmamiLayout({ width: 900, height: 80, displayMode: "advanced" }).stackAdvancedContent).toBe(false);
+  });
+});
diff --git a/packages/widgets/src/umami/umami-layout.ts b/packages/widgets/src/umami/umami-layout.ts
new file mode 100644
index 000000000..05f02140f
--- /dev/null
+++ b/packages/widgets/src/umami/umami-layout.ts
@@ -0,0 +1,16 @@
+interface UmamiLayoutInput {
+  width: number;
+  height: number;
+  displayMode: "compact" | "advanced";
+}
+
+export const getUmamiLayout = ({ width, height, displayMode }: UmamiLayoutInput) => {
+  const isAdvanced = displayMode === "advanced";
+  return {
+    isDense: !isAdvanced && height < 120,
+    showXAxis: isAdvanced || height >= 140,
+    showSecondaryStats: isAdvanced || height >= 96,
+    showDetailedStats: isAdvanced || (width >= 260 && height >= 150),
+    stackAdvancedContent: isAdvanced && width < 900,
+  };
+};
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index 97a414604..7f4bab963 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -35,6 +35,7 @@ export default function WeatherWidget({
   height,
   displayMode,
 }: WidgetComponentProps<"weather">) {
+  const t = useScopedI18n("widget.weather");
   const input = {
     latitude: options.location.latitude,
     longitude: options.location.longitude,
@@ -75,7 +76,7 @@ export default function WeatherWidget({
       {content}
       {weatherQuery.error && (
         <Box pos="absolute" top={4} right={4}>
-          <WidgetQueryErrorIndicator error={weatherQuery.error} label="Weather" />
+          <WidgetQueryErrorIndicator error={weatherQuery.error} label={t("name")} />
         </Box>
       )}
     </Box>

From 4bb862ee7607180ba057b3832467f77b3d1cd459 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Mon, 3 Aug 2026 21:40:59 +0200
Subject: [PATCH 43/75] fix: stabilize advanced widget interactions

---
 .../board/advanced-focus/context.tsx          |  3 +-
 e2e/shared/login.ts                           | 35 ++++++-------------
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 5cf3135f0..50ac3dd65 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -3,6 +3,7 @@
 import type { PropsWithChildren } from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Overlay, Portal } from "@mantine/core";
+import { useIsomorphicEffect } from "@mantine/hooks";
 
 import { useEditMode } from "@homarr/boards/edit-mode";
 
@@ -229,7 +230,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     if (isEditMode && activeRef.current) close(false);
   }, [close, isEditMode]);
 
-  useEffect(() => {
+  useIsomorphicEffect(() => {
     if (active?.activation !== "manual") return;
     const background = document.querySelectorAll<HTMLElement>("[data-advanced-focus-background]");
     background.forEach((element) => {
diff --git a/e2e/shared/login.ts b/e2e/shared/login.ts
index 37684299b..7a3e3be1c 100644
--- a/e2e/shared/login.ts
+++ b/e2e/shared/login.ts
@@ -13,7 +13,7 @@ interface LoginInput {
 export const loginAsync = async ({ page, baseUrl, credentials, destination = "/" }: LoginInput) => {
   const destinationUrl = new URL(destination, baseUrl);
   const loginUrl = new URL("/auth/login", baseUrl);
-  loginUrl.searchParams.set("callbackUrl", destinationUrl.href);
+  loginUrl.searchParams.set("callbackUrl", `${destinationUrl.pathname}${destinationUrl.search}${destinationUrl.hash}`);
 
   await page.goto(loginUrl.href, { waitUntil: "load" });
   await page.waitForFunction(() => {
@@ -23,29 +23,14 @@ export const loginAsync = async ({ page, baseUrl, credentials, destination = "/"
   await page.getByLabel("Username").fill(credentials.username);
   await page.locator("#password").fill(credentials.password);
 
+  const destinationNavigation = page.waitForURL(
+    (url) =>
+      url.origin === destinationUrl.origin &&
+      url.pathname === destinationUrl.pathname &&
+      url.search === destinationUrl.search &&
+      url.hash === destinationUrl.hash,
+    { timeout: 60_000 },
+  );
   await page.locator("button[type='submit']").click();
-  await waitForAuthenticatedSessionAsync(page, baseUrl);
-
-  await page.goto(destinationUrl.href, { waitUntil: "domcontentloaded" });
-  const currentUrl = new URL(page.url());
-  if (currentUrl.origin !== destinationUrl.origin || currentUrl.pathname !== destinationUrl.pathname) {
-    throw new Error("Authenticated destination was not reached");
-  }
-};
-
-const waitForAuthenticatedSessionAsync = async (page: Page, baseUrl: string) => {
-  const sessionUrl = new URL("/api/auth/session", baseUrl).href;
-  const deadline = Date.now() + 30_000;
-
-  while (Date.now() < deadline) {
-    const response = await page.request.get(sessionUrl);
-    if (response.ok()) {
-      const session = (await response.json()) as { user?: unknown } | null;
-      if (session?.user !== undefined) return;
-    }
-
-    await page.waitForTimeout(100);
-  }
-
-  throw new Error("Authentication session was not established");
+  await destinationNavigation;
 };

From f24d757ec8dfba236dba32bf543bae20e6d9a696 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 8 Aug 2026 21:42:13 +0200
Subject: [PATCH 44/75] fix: preserve app links and hover previews

---
 .../board/advanced-focus/context.tsx           |  3 ++-
 .../board/sections/use-open-section-apps.ts    |  7 ++++---
 packages/common/src/url.ts                     | 16 ++++++++++++++++
 packages/widgets/src/app/component.tsx         |  4 ++--
 packages/widgets/src/bookmarks/component.tsx   | 10 +++++-----
 .../widgets/src/common/application-url.spec.ts | 18 +++++++++++++++++-
 packages/widgets/src/common/application-url.ts |  2 +-
 7 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 6043a1a95..5a6d42131 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -170,7 +170,8 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
 
   const leave = useCallback(
     (itemId: string) => {
-      if (hoveredRef.current?.itemId === itemId) hoveredRef.current = null;
+      if (hoveredRef.current?.itemId !== itemId) return;
+      hoveredRef.current = null;
       cancelHoverTimer();
     },
     [cancelHoverTimer],
diff --git a/apps/nextjs/src/components/board/sections/use-open-section-apps.ts b/apps/nextjs/src/components/board/sections/use-open-section-apps.ts
index b8f7bb64f..d462fdda9 100644
--- a/apps/nextjs/src/components/board/sections/use-open-section-apps.ts
+++ b/apps/nextjs/src/components/board/sections/use-open-section-apps.ts
@@ -2,6 +2,7 @@ import { use, useCallback, useMemo } from "react";
 
 import { clientApi } from "@homarr/api/client";
 import { useCurrentLayout, useRequiredBoard } from "@homarr/boards/context";
+import { getSafeAppHref } from "@homarr/common";
 import { useConfirmModal } from "@homarr/modals";
 import { useSettings } from "@homarr/settings";
 import { useI18n } from "@homarr/translation/client";
@@ -107,10 +108,10 @@ export const useOpenSectionApps = (sectionId: string, enabled: boolean) => {
   });
 
   const open = useCallback(() => {
-    const appsWithUrls = apps.filter((app) => app.href && app.href.length > 0);
+    const appUrls = apps.map((app) => getSafeAppHref(app.href)).filter((href) => href !== undefined);
 
-    for (const app of appsWithUrls) {
-      const openedWindow = window.open(app.href ?? undefined);
+    for (const href of appUrls) {
+      const openedWindow = window.open(href);
       if (openedWindow) continue;
 
       openConfirmModal({
diff --git a/packages/common/src/url.ts b/packages/common/src/url.ts
index 079de8418..271d380e0 100644
--- a/packages/common/src/url.ts
+++ b/packages/common/src/url.ts
@@ -75,6 +75,22 @@ export const getSafeApplicationUrl = (value: unknown, options: SafeApplicationUr
   }
 };
 
+/** Returns a safe user-configured app link, including same-origin paths and custom URI schemes. */
+export const getSafeAppHref = (value: unknown): string | undefined => {
+  if (typeof value !== "string" || value.trim() === "") return undefined;
+
+  const href = value.trim();
+  if (/^(?:javascript|data|vbscript|file|blob):/i.test(href)) return undefined;
+
+  try {
+    const url = new URL(href);
+    if (url.username !== "" || url.password !== "") return undefined;
+    return url.toString();
+  } catch {
+    return /^(?:[#?]|\/(?![\\/])|\.{1,2}\/)/.test(href) ? href : undefined;
+  }
+};
+
 const parseHttpUrl = (value: unknown, baseUrl?: string): URL | undefined => {
   if (typeof value !== "string") return undefined;
   const url = new URL(value, baseUrl);
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 6e84876fd..acda12e12 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -14,7 +14,7 @@ import { useI18n } from "@homarr/translation/client";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import { WidgetEmptyState } from "../common/empty-state";
-import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getSafeAppHref, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { getUsableWidgetQueryData, isInitialWidgetQueryPending } from "../common/query-state";
 import { WidgetQueryErrorIndicator, WidgetQueryLoadingState } from "../common/query-state-indicator";
 import type { WidgetComponentProps } from "../definition";
@@ -28,7 +28,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget
   const board = useRequiredBoard();
   const appQuery = clientApi.app.byId.useQuery({ id: options.appId });
   const app = getUsableWidgetQueryData(appQuery);
-  const href = getSafeApplicationUrl(app?.href);
+  const href = getSafeAppHref(app?.href);
   useRegisterSpotlightContextResults(
     `app-${app?.id ?? options.appId}`,
     app && href
diff --git a/packages/widgets/src/bookmarks/component.tsx b/packages/widgets/src/bookmarks/component.tsx
index c241549ae..13e211f53 100644
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -23,7 +23,7 @@ import { useRegisterSpotlightContextResults } from "@homarr/spotlight";
 import { MaskedOrNormalImage } from "@homarr/ui";
 
 import type { WidgetComponentProps } from "../definition";
-import { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "../common/application-url";
+import { getSafeApplicationUrl, getSafeAppHref, SAFE_NEW_TAB_REL } from "../common/application-url";
 import { getUsableWidgetQueryData } from "../common/query-state";
 import classes from "./bookmark.module.css";
 
@@ -79,7 +79,7 @@ export default function BookmarksWidget({
   useRegisterSpotlightContextResults(
     `bookmark-${itemId}`,
     data.flatMap((app) => {
-      const href = getSafeApplicationUrl(app.href);
+      const href = getSafeAppHref(app.href);
       return href
         ? [
             {
@@ -187,7 +187,7 @@ const FlexLayout = ({
   return (
     <Flex direction={direction} gap={4} w="100%" mih="100%" wrap="nowrap">
       {data.map((app) => {
-        const href = getSafeApplicationUrl(app.href);
+        const href = getSafeAppHref(app.href);
         return (
           <div key={app.id} style={{ display: "flex", flex: `1 0 ${minimumItemSize}px`, flexDirection: direction }}>
             <UnstyledButton
@@ -263,7 +263,7 @@ const AdvancedBookmarksLayout = ({
     <ScrollArea h="100%" style={{ flex: 1 }}>
       <SimpleGrid cols={getAdvancedBookmarkColumns(width, data.length)} spacing="sm">
         {data.map((app) => {
-          const href = getSafeApplicationUrl(app.href);
+          const href = getSafeAppHref(app.href);
           return (
             <UnstyledButton
               key={app.id}
@@ -342,7 +342,7 @@ const GridLayout = ({
       style={{ gridAutoRows: `minmax(${minimumItemHeight}px, 1fr)` }}
     >
       {data.map((app) => {
-        const href = getSafeApplicationUrl(app.href);
+        const href = getSafeAppHref(app.href);
         return (
           <UnstyledButton
             className={classes.bookmarkButton}
diff --git a/packages/widgets/src/common/application-url.spec.ts b/packages/widgets/src/common/application-url.spec.ts
index 7866461bc..a990c53b6 100644
--- a/packages/widgets/src/common/application-url.spec.ts
+++ b/packages/widgets/src/common/application-url.spec.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { getSafeApplicationUrl } from "./application-url";
+import { getSafeApplicationUrl, getSafeAppHref } from "./application-url";
 
 describe("getSafeApplicationUrl", () => {
   test.each(["javascript:alert(1)", "data:text/html,test", "not a URL", "/relative", "./relative"])(
@@ -28,3 +28,19 @@ describe("getSafeApplicationUrl", () => {
     expect(getSafeApplicationUrl(value)).toBeUndefined();
   });
 });
+
+describe("getSafeAppHref", () => {
+  test.each(["#section", "/boards/home", "./relative", "vscode://file/example.ts", "https://example.com/path"])(
+    "allows configured app link %s",
+    (value) => expect(getSafeAppHref(value)).toBe(value),
+  );
+
+  test.each([
+    "javascript:alert(1)",
+    "data:text/html,test",
+    "file:///etc/passwd",
+    "//example.com/path",
+    "not a URL",
+    "https://user:password@example.com/path",
+  ])("rejects unsafe app link %s", (value) => expect(getSafeAppHref(value)).toBeUndefined());
+});
diff --git a/packages/widgets/src/common/application-url.ts b/packages/widgets/src/common/application-url.ts
index cfbef8abc..b43d335f3 100644
--- a/packages/widgets/src/common/application-url.ts
+++ b/packages/widgets/src/common/application-url.ts
@@ -1 +1 @@
-export { getSafeApplicationUrl, SAFE_NEW_TAB_REL } from "@homarr/common";
+export { getSafeApplicationUrl, getSafeAppHref, SAFE_NEW_TAB_REL } from "@homarr/common";

From b937d4eb18ea7c6062159a26e5d33dcdd5a0734b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 8 Aug 2026 21:52:51 +0200
Subject: [PATCH 45/75] style: format modernization notes

---
 MANTINE.md |   3 +-
 REVIEW.md  | 180 ++++++++++++++++++++++++++---------------------------
 2 files changed, 92 insertions(+), 91 deletions(-)

diff --git a/MANTINE.md b/MANTINE.md
index a87cbbd48..fa9c8a3e7 100644
--- a/MANTINE.md
+++ b/MANTINE.md
@@ -4,6 +4,7 @@ This index lists Mantine documentation pages formatted for LLMs.
 Each link points to a standalone Markdown file under the /llms path.
 
 For a single consolidated file with all content, use:
+
 - https://mantine.dev/llms-full.txt
 
 ## FAQ
@@ -53,7 +54,7 @@ For a single consolidated file with all content, use:
 - [How to integrate custom input with use-form hook?](https://mantine.dev/llms/q-custom-input-use-form.md): Learn how to add use-form support for custom inputs
 - [How to prevent Modal from closing?](https://mantine.dev/llms/q-how-to-prevent-modal-from-closing.md): Learn how to prevent Modal from closing when the user clicks outside of it or presses the Escape key
 - [How to scroll to the top of the form if the form is submitted with errors?](https://mantine.dev/llms/q-scroll-to-the-top-of-the-form.md): Learn how to call a function when the form is submitted with errors
-- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/*, @mantinex/* and postcss-preset-mantine dependencies manually or with ncu script
+- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/_, @mantinex/_ and postcss-preset-mantine dependencies manually or with ncu script
 - [How to use Dropzone with @mantine/form?](https://mantine.dev/llms/q-how-to-use-dropzone-with-form.md): Learn how to use Dropzone with @mantine/form to handle file selection state
 - [How to use Mantine template on GitHub?](https://mantine.dev/llms/q-templates-usage.md): Learn how to create a new repository based on Mantine template
 - [I get hydration warning about data-mantine-color-scheme attribute, what does it mean?](https://mantine.dev/llms/q-color-scheme-hydration-warning.md): Learn how hydration works and how to fix warnings
diff --git a/REVIEW.md b/REVIEW.md
index d78b4fc5e..cb32a60d2 100644
--- a/REVIEW.md
+++ b/REVIEW.md
@@ -8,37 +8,37 @@ Audit health (Impeccable rubric): accessibility 1/4, performance 2/4, responsive
 
 ## Reviewed revision and environment
 
-| Item | Value |
-| --- | --- |
-| PR | #6502, `feat: modernize dashboard widgets` |
-| Reviewed head | `96e92485a5fd45f3648cfac0453e614779c414ba` |
-| Base branch / fetched base | `dev` / `d58a47b776a55d04dee2220f59d072b9af8bbed3` |
-| Merge base | `d58a47b776a55d04dee2220f59d072b9af8bbed3` |
-| Diff | 359 files, +15,721/-4,478 |
-| PR state | open, non-draft, `BLOCKED`; no approval decision |
+| Item                         | Value                                                                                          |
+| ---------------------------- | ---------------------------------------------------------------------------------------------- |
+| PR                           | #6502, `feat: modernize dashboard widgets`                                                     |
+| Reviewed head                | `96e92485a5fd45f3648cfac0453e614779c414ba`                                                     |
+| Base branch / fetched base   | `dev` / `d58a47b776a55d04dee2220f59d072b9af8bbed3`                                             |
+| Merge base                   | `d58a47b776a55d04dee2220f59d072b9af8bbed3`                                                     |
+| Diff                         | 359 files, +15,721/-4,478                                                                      |
+| PR state                     | open, non-draft, `BLOCKED`; no approval decision                                               |
 | Hosted checks at audit start | Fast gate, Container and E2E, CodeQL, JS/TS analysis, Actions analysis, title, auto-fix: green |
-| Inline threads | 34 total, 7 unresolved; only 2 remain substantively valid |
-| Mantine | repository lock: `@mantine/core`, hooks, charts and dates 9.4.1 |
-| Local tools | Node 24.16.0 and pnpm 9.5.0; repository requires Node >=24.18.0 and pnpm >=11.15.1 |
+| Inline threads               | 34 total, 7 unresolved; only 2 remain substantively valid                                      |
+| Mantine                      | repository lock: `@mantine/core`, hooks, charts and dates 9.4.1                                |
+| Local tools                  | Node 24.16.0 and pnpm 9.5.0; repository requires Node >=24.18.0 and pnpm >=11.15.1             |
 
 The former red baseline `7b7045202d289b7d83946befcee5d2845ea4a706` had a green Fast gate and a failed Container/E2E run (`30748255760`, job `91498308523`). The latest head has a green Container/E2E job (`30756067198`, job `91519039504`). This proves the current suite passed once; it does not satisfy the requested three-run flake characterization.
 
 ## PR-description traceability
 
-| Claim | Result | Evidence / correction |
-| --- | --- | --- |
-| “all 54 widget renderers with compact and advanced modes” | **Inaccurate** | 54 `WidgetKind` values exist. `displayMode="advanced"` reaches 53; `app` is deliberately excluded in `item-content.tsx:51` and documented as compact-only. Change copy to “53 widget renderers; app tiles remain compact,” or implement app advanced mode. |
-| advanced focus: hover, keyboard, touch, geometry | **Partial** | Entry paths, Escape ownership, reduced motion, close focus, touch button and zero-dimension guards exist. WID-002/003 remain. |
-| richer widget context actions | **Partial** | `Menu.ContextMenu` is a good Mantine choice and query scope is item-aware. Dispatch still crosses `any`; Custom API action authorization is not represented. |
-| standardized query identity/cache/status | **Partial** | Query keys, matchers, runtime capture, recovery and tests exist. Thirty-nine of 53 renderer query calls do not read errors; runtime ref registration is render-time mutable state. |
-| safe polling | **Mostly confirmed** | defaults are limited to `widget` namespace; Custom API resume immediately refetches; per-widget intervals exist. State/ref typing still needs redesign. |
-| partial-failure rendering | **Partial** | settlement helper and several routers are strong; many renderer-level total failures still appear empty/disconnected. |
-| bounded integration responses | **Mostly confirmed** | common bounded reader, Custom API 2 MiB, timetable 512 KiB, Traefik bounds and Beszel queue bounds exist. Custom action execution remains outside the hardened fetch path. |
-| timetable hardening | **Confirmed** | board/item permission checks, saved-value comparison, public-address resolution, private ranges, per-request DNS re-resolution, pinned dispatcher, redirect rejection, timeouts, response bounds and schemas are present. |
-| precise placement | **Mostly confirmed** | mouse, touch tolerance, keyboard, occupied-cell validation, dynamic bounds, nearest fit and immediate persistence exist. Failure/race/live responsive coverage remains insufficient. |
-| widget catalog documentation | **Partial** | all kinds have pages and shared interactions; wording overclaims focus behavior and validation counts are stale. |
-| validation: 40 files/162 tests, 6/6 E2E | **Stale** | current diff contains 57 changed unit-spec files (including three E2E specs); repository has 42 widget spec files and six E2E specs. Update from the exact final run. |
-| independent reviews “pass” | **Not supported** | unresolved valid findings, current P1s, and unavailable live QA contradict an unqualified pass. |
+| Claim                                                     | Result               | Evidence / correction                                                                                                                                                                                                                                      |
+| --------------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| “all 54 widget renderers with compact and advanced modes” | **Inaccurate**       | 54 `WidgetKind` values exist. `displayMode="advanced"` reaches 53; `app` is deliberately excluded in `item-content.tsx:51` and documented as compact-only. Change copy to “53 widget renderers; app tiles remain compact,” or implement app advanced mode. |
+| advanced focus: hover, keyboard, touch, geometry          | **Partial**          | Entry paths, Escape ownership, reduced motion, close focus, touch button and zero-dimension guards exist. WID-002/003 remain.                                                                                                                              |
+| richer widget context actions                             | **Partial**          | `Menu.ContextMenu` is a good Mantine choice and query scope is item-aware. Dispatch still crosses `any`; Custom API action authorization is not represented.                                                                                               |
+| standardized query identity/cache/status                  | **Partial**          | Query keys, matchers, runtime capture, recovery and tests exist. Thirty-nine of 53 renderer query calls do not read errors; runtime ref registration is render-time mutable state.                                                                         |
+| safe polling                                              | **Mostly confirmed** | defaults are limited to `widget` namespace; Custom API resume immediately refetches; per-widget intervals exist. State/ref typing still needs redesign.                                                                                                    |
+| partial-failure rendering                                 | **Partial**          | settlement helper and several routers are strong; many renderer-level total failures still appear empty/disconnected.                                                                                                                                      |
+| bounded integration responses                             | **Mostly confirmed** | common bounded reader, Custom API 2 MiB, timetable 512 KiB, Traefik bounds and Beszel queue bounds exist. Custom action execution remains outside the hardened fetch path.                                                                                 |
+| timetable hardening                                       | **Confirmed**        | board/item permission checks, saved-value comparison, public-address resolution, private ranges, per-request DNS re-resolution, pinned dispatcher, redirect rejection, timeouts, response bounds and schemas are present.                                  |
+| precise placement                                         | **Mostly confirmed** | mouse, touch tolerance, keyboard, occupied-cell validation, dynamic bounds, nearest fit and immediate persistence exist. Failure/race/live responsive coverage remains insufficient.                                                                       |
+| widget catalog documentation                              | **Partial**          | all kinds have pages and shared interactions; wording overclaims focus behavior and validation counts are stale.                                                                                                                                           |
+| validation: 40 files/162 tests, 6/6 E2E                   | **Stale**            | current diff contains 57 changed unit-spec files (including three E2E specs); repository has 42 widget spec files and six E2E specs. Update from the exact final run.                                                                                      |
+| independent reviews “pass”                                | **Not supported**    | unresolved valid findings, current P1s, and unavailable live QA contradict an unqualified pass.                                                                                                                                                            |
 
 ## Mantine suitability ledger
 
@@ -72,62 +72,62 @@ Legend: **U** already used appropriately; **C** consolidation/replacement candid
 
 “Test” means a focused widget-local spec exists, not that all required states are covered. Every row still requires the common contract suite in WID-013.
 
-| WidgetKind | Family | Advanced | Focused test | Principal audit gap |
-| --- | --- | --- | --- | --- |
-| clock | basic | yes | no | query error, locale-format options |
-| weather | basic/feed | yes | yes | query error; dayjs locale/time patterns |
-| app | basic/link | **no** | no | PR wording; URL contract |
-| iframe | custom content | yes | yes | manual focus/iframe trapping; URL privacy thread now fixed |
-| video | custom content | yes | no | media/focus/live behavior |
-| notebook | notes | yes (inner) | yes | editor focus inside manual surface |
-| anchorNote | notes | yes | no | query error, save/error regression |
-| dnsHoleSummary | network | yes | no | total query error, hard-coded chart colors |
-| dnsHoleControls | network/security | yes | no | total error and permission matrix |
-| smartHome-entityState | smart home | yes | no | raw state in aria; action permissions |
-| smartHome-executeAutomation | smart home | yes | no | mutation/permission/edit-mode E2E |
-| stockPrice | analytics | yes | yes | total error |
-| mediaServer | media | yes | no | total error and table a11y |
-| calendar | calendar | yes | yes | total error; fixed HH:mm; schedule tradeoff |
-| downloads | media | yes | yes | four-state/component coverage, arbitrary z-index |
-| mediaRequests-requestList | media | yes | no | total error; external URLs/actions |
-| mediaRequests-requestStats | media | yes | no | total error; links/colors |
-| mediaTranscoding | media | yes | yes | total error and responsive table |
-| mediaMissing | media | yes | yes | total error and external URL |
-| minecraftServerStatus | infrastructure | yes | no | total error/malformed payload |
-| networkControllerSummary | networking | yes | no | total error; WAN/unknown localization |
-| networkControllerStatus | networking | yes | no | responsive rule duplication |
-| rssFeed | feed | yes | yes | strong stale/partial state; locale relative time |
-| bookmarks | basic/link | yes | yes | recomputation; URL contract |
-| indexerManager | media | yes | no | total error; runtime action ref |
-| healthMonitoring | infrastructure | yes | yes | integration query error |
-| releases | infrastructure/feed | yes | yes | secret/item authorization needs E2E |
-| mediaReleases | media | yes | no | total error; external URLs |
-| dockerContainers | infrastructure | yes | yes | total error; z-index/table semantics |
-| firewall | networking/security | yes | yes | partial-query matrix; loose router generics |
-| notifications | infrastructure | yes | no | total error; untrusted href |
-| systemResources | infrastructure | yes | yes | total error; previous network thread fixed |
-| coolify | infrastructure | yes | yes | total error; URL validation |
-| systemDisks | infrastructure | yes | yes | total error |
-| timetable | calendar | yes | no | backend strong; component locale/live tests absent |
-| immich-serverStats | media | yes | yes | two ignored query errors |
-| immich-albumCarousel | media | yes | yes (query) | query error and nested overlay/focus E2E |
-| paperlessNgx | analytics | yes | no | former error thread fixed, no regression spec |
-| patchmon | infrastructure | yes | yes | total error |
-| bazarr | media | yes | yes | total error |
-| tracearr | analytics | yes | yes | total error |
-| speedtestTracker | analytics | yes | yes | total error |
-| uptimeKuma | infrastructure | yes | yes | total error |
-| audioStats | media | yes | yes | good dual-error handling; partial-state tests needed |
-| umami | analytics | yes | no | runtime query registration; chart a11y |
-| vpn | networking/security | yes | no | total error; status/permission matrix |
-| archiveTeamWarrior | infrastructure | yes | yes | suspense path; docs present |
-| ups | infrastructure | yes | no | total error |
-| beszelSystemTable | monitoring | yes | yes | nested chart/focus and live subscription |
-| beszelSystemGrid | monitoring | yes | no | live/error UI; no focused renderer test |
-| beszelAlerts | monitoring | yes | no | partial error and status semantics |
-| beszelSystemStats | monitoring | yes | yes | runtime refs, locale tooltip |
-| traefik | networking | yes | no | total error; bounded backend positive |
-| customApi | custom content/security | yes | yes | WID-001/007/008; polling resume fixed |
+| WidgetKind                  | Family                  | Advanced    | Focused test | Principal audit gap                                        |
+| --------------------------- | ----------------------- | ----------- | ------------ | ---------------------------------------------------------- |
+| clock                       | basic                   | yes         | no           | query error, locale-format options                         |
+| weather                     | basic/feed              | yes         | yes          | query error; dayjs locale/time patterns                    |
+| app                         | basic/link              | **no**      | no           | PR wording; URL contract                                   |
+| iframe                      | custom content          | yes         | yes          | manual focus/iframe trapping; URL privacy thread now fixed |
+| video                       | custom content          | yes         | no           | media/focus/live behavior                                  |
+| notebook                    | notes                   | yes (inner) | yes          | editor focus inside manual surface                         |
+| anchorNote                  | notes                   | yes         | no           | query error, save/error regression                         |
+| dnsHoleSummary              | network                 | yes         | no           | total query error, hard-coded chart colors                 |
+| dnsHoleControls             | network/security        | yes         | no           | total error and permission matrix                          |
+| smartHome-entityState       | smart home              | yes         | no           | raw state in aria; action permissions                      |
+| smartHome-executeAutomation | smart home              | yes         | no           | mutation/permission/edit-mode E2E                          |
+| stockPrice                  | analytics               | yes         | yes          | total error                                                |
+| mediaServer                 | media                   | yes         | no           | total error and table a11y                                 |
+| calendar                    | calendar                | yes         | yes          | total error; fixed HH:mm; schedule tradeoff                |
+| downloads                   | media                   | yes         | yes          | four-state/component coverage, arbitrary z-index           |
+| mediaRequests-requestList   | media                   | yes         | no           | total error; external URLs/actions                         |
+| mediaRequests-requestStats  | media                   | yes         | no           | total error; links/colors                                  |
+| mediaTranscoding            | media                   | yes         | yes          | total error and responsive table                           |
+| mediaMissing                | media                   | yes         | yes          | total error and external URL                               |
+| minecraftServerStatus       | infrastructure          | yes         | no           | total error/malformed payload                              |
+| networkControllerSummary    | networking              | yes         | no           | total error; WAN/unknown localization                      |
+| networkControllerStatus     | networking              | yes         | no           | responsive rule duplication                                |
+| rssFeed                     | feed                    | yes         | yes          | strong stale/partial state; locale relative time           |
+| bookmarks                   | basic/link              | yes         | yes          | recomputation; URL contract                                |
+| indexerManager              | media                   | yes         | no           | total error; runtime action ref                            |
+| healthMonitoring            | infrastructure          | yes         | yes          | integration query error                                    |
+| releases                    | infrastructure/feed     | yes         | yes          | secret/item authorization needs E2E                        |
+| mediaReleases               | media                   | yes         | no           | total error; external URLs                                 |
+| dockerContainers            | infrastructure          | yes         | yes          | total error; z-index/table semantics                       |
+| firewall                    | networking/security     | yes         | yes          | partial-query matrix; loose router generics                |
+| notifications               | infrastructure          | yes         | no           | total error; untrusted href                                |
+| systemResources             | infrastructure          | yes         | yes          | total error; previous network thread fixed                 |
+| coolify                     | infrastructure          | yes         | yes          | total error; URL validation                                |
+| systemDisks                 | infrastructure          | yes         | yes          | total error                                                |
+| timetable                   | calendar                | yes         | no           | backend strong; component locale/live tests absent         |
+| immich-serverStats          | media                   | yes         | yes          | two ignored query errors                                   |
+| immich-albumCarousel        | media                   | yes         | yes (query)  | query error and nested overlay/focus E2E                   |
+| paperlessNgx                | analytics               | yes         | no           | former error thread fixed, no regression spec              |
+| patchmon                    | infrastructure          | yes         | yes          | total error                                                |
+| bazarr                      | media                   | yes         | yes          | total error                                                |
+| tracearr                    | analytics               | yes         | yes          | total error                                                |
+| speedtestTracker            | analytics               | yes         | yes          | total error                                                |
+| uptimeKuma                  | infrastructure          | yes         | yes          | total error                                                |
+| audioStats                  | media                   | yes         | yes          | good dual-error handling; partial-state tests needed       |
+| umami                       | analytics               | yes         | no           | runtime query registration; chart a11y                     |
+| vpn                         | networking/security     | yes         | no           | total error; status/permission matrix                      |
+| archiveTeamWarrior          | infrastructure          | yes         | yes          | suspense path; docs present                                |
+| ups                         | infrastructure          | yes         | no           | total error                                                |
+| beszelSystemTable           | monitoring              | yes         | yes          | nested chart/focus and live subscription                   |
+| beszelSystemGrid            | monitoring              | yes         | no           | live/error UI; no focused renderer test                    |
+| beszelAlerts                | monitoring              | yes         | no           | partial error and status semantics                         |
+| beszelSystemStats           | monitoring              | yes         | yes          | runtime refs, locale tooltip                               |
+| traefik                     | networking              | yes         | no           | total error; bounded backend positive                      |
+| customApi                   | custom content/security | yes         | yes          | WID-001/007/008; polling resume fixed                      |
 
 ## Severity-ranked findings
 
@@ -216,15 +216,15 @@ Legend: **U** already used appropriately; **C** consolidation/replacement candid
 
 ### WID-013 — P2 confirmed: open review-thread state no longer matches code
 
-| Thread | Classification |
-| --- | --- |
-| iframe complete URL | already fixed/false positive at current line: only host is rendered |
-| system resources network gate | already fixed, outdated |
-| RSS total error | already fixed: no-data error throws; stale data retained |
-| bookmarks memoization | valid P3/P2-low; benchmark first |
-| network-controller total error | already fixed, outdated |
-| network-controller breakpoint consolidation | valid P2 maintainability |
-| Paperless total error | already fixed, outdated |
+| Thread                                      | Classification                                                      |
+| ------------------------------------------- | ------------------------------------------------------------------- |
+| iframe complete URL                         | already fixed/false positive at current line: only host is rendered |
+| system resources network gate               | already fixed, outdated                                             |
+| RSS total error                             | already fixed: no-data error throws; stale data retained            |
+| bookmarks memoization                       | valid P3/P2-low; benchmark first                                    |
+| network-controller total error              | already fixed, outdated                                             |
+| network-controller breakpoint consolidation | valid P2 maintainability                                            |
+| Paperless total error                       | already fixed, outdated                                             |
 
 Resolve the five stale threads with evidence; address or explicitly disposition the two live suggestions. Re-run review because CodeRabbit was paused during active development.
 

From e65c98c29063d80cbfd39c48c699de7018892624 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 8 Aug 2026 22:19:20 +0200
Subject: [PATCH 46/75] fix(ci): make modernization independently installable

---
 apps/docs/docs/advanced/keyboard-shortcuts/index.mdx     | 5 +----
 .../docs/docs/getting-started/after-the-installation.mdx | 7 ++-----
 apps/docs/docs/management/api/index.mdx                  | 9 +++------
 pnpm-lock.yaml                                           | 2 +-
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
index 8436de8a2..bc971bc4a 100644
--- a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
+++ b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
@@ -1,10 +1,7 @@
 ---
-
 title: Keyboard Shortcuts
 tags:
-
-- Advanced
-
+  - Advanced
 ---
 
 Homarr has the following keyboard shortcuts:
diff --git a/apps/docs/docs/getting-started/after-the-installation.mdx b/apps/docs/docs/getting-started/after-the-installation.mdx
index e922bb5e1..3785aac56 100644
--- a/apps/docs/docs/getting-started/after-the-installation.mdx
+++ b/apps/docs/docs/getting-started/after-the-installation.mdx
@@ -1,12 +1,9 @@
 ---
-
 title: After the installation
 sidebar_position: 3
 tags:
-
-- Getting started
-- Configuration
-
+  - Getting started
+  - Configuration
 ---
 
 import imageStartFromScratchStepServerSettings from "./img/onboarding-from-scratch-step-server-settings.png";
diff --git a/apps/docs/docs/management/api/index.mdx b/apps/docs/docs/management/api/index.mdx
index 67585c63b..359d189e6 100644
--- a/apps/docs/docs/management/api/index.mdx
+++ b/apps/docs/docs/management/api/index.mdx
@@ -1,12 +1,9 @@
 ---
-
 title: API
 tags:
-
-- API
-- Development
-- Interface
-
+  - API
+  - Development
+  - Interface
 ---
 
 Using the Homarr API, you can interface with the application with your own code and business logic.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af64124fd..06968df00 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2902,7 +2902,7 @@ importers:
         version: 3.27.3
       '@trpc/react-query':
         specifier: 'catalog:'
-        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2))(@trpc/server@11.18.0(@typescript/typescript6@6.0.2))(@typescript/typescript6@6.0.2)(react@19.2.7)
+        version: 11.18.0(@tanstack/react-query@5.101.2(react@19.2.7))(@trpc/client@11.18.0(@trpc/server@11.18.0(typescript@7.0.2))(typescript@7.0.2))(@trpc/server@11.18.0(typescript@7.0.2))(react@19.2.7)(typescript@7.0.2)
       acorn:
         specifier: 'catalog:'
         version: 8.16.0

From bc896c0b0383e2b1ca7a4007017d20bac6e505cc Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 8 Aug 2026 23:21:35 +0200
Subject: [PATCH 47/75] fix(widgets): keep board graph imports scoped

---
 .../src/components/board/items/widget-query-scope.ts      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.ts b/apps/nextjs/src/components/board/items/widget-query-scope.ts
index fd7c9edb3..687984c9f 100644
--- a/apps/nextjs/src/components/board/items/widget-query-scope.ts
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.ts
@@ -1,7 +1,11 @@
 import type { QueryKey } from "@tanstack/react-query";
 
-import type { WidgetQueryMatcher, WidgetQueryMatcherScope } from "@homarr/widgets";
-import { normalizeWidgetQuery, widgetQueryValueEquals } from "@homarr/widgets";
+import {
+  normalizeWidgetQuery,
+  type WidgetQueryMatcher,
+  type WidgetQueryMatcherScope,
+  widgetQueryValueEquals,
+} from "@homarr/widgets/definition";
 
 export const matchesWidgetItemQuery = (
   queryKey: QueryKey,

From 0bd9c6f290990c6adbbbfe7a6a1f8bdf4e5dc739 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 8 Aug 2026 23:28:33 +0200
Subject: [PATCH 48/75] style(widgets): split query matcher type imports

---
 .../src/components/board/items/widget-query-scope.ts      | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/apps/nextjs/src/components/board/items/widget-query-scope.ts b/apps/nextjs/src/components/board/items/widget-query-scope.ts
index 687984c9f..973f50794 100644
--- a/apps/nextjs/src/components/board/items/widget-query-scope.ts
+++ b/apps/nextjs/src/components/board/items/widget-query-scope.ts
@@ -1,11 +1,7 @@
 import type { QueryKey } from "@tanstack/react-query";
 
-import {
-  normalizeWidgetQuery,
-  type WidgetQueryMatcher,
-  type WidgetQueryMatcherScope,
-  widgetQueryValueEquals,
-} from "@homarr/widgets/definition";
+import type { WidgetQueryMatcher, WidgetQueryMatcherScope } from "@homarr/widgets/definition";
+import { normalizeWidgetQuery, widgetQueryValueEquals } from "@homarr/widgets/definition";
 
 export const matchesWidgetItemQuery = (
   queryKey: QueryKey,

From 05eebc097f03e9782bece22f52a9fa9c30befa61 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sat, 8 Aug 2026 23:39:15 +0200
Subject: [PATCH 49/75] test(mcp): review smart home entity details tool

---
 packages/api/src/test/mcp.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/api/src/test/mcp.spec.ts b/packages/api/src/test/mcp.spec.ts
index 21165dd13..5df3a9f06 100644
--- a/packages/api/src/test/mcp.spec.ts
+++ b/packages/api/src/test/mcp.spec.ts
@@ -53,6 +53,7 @@ const MCP_TOOL_ALLOWLIST = {
     "mediaServer_getCurrentStreams",
     "patchmon_getStats",
     "serverSettings_getBoardSettings",
+    "smartHome_entityDetails",
     "smartHome_entityState",
     "widgetSecrets_getConfiguredKinds",
   ],

From 1367e07f20113a3699b3d10d1710e3ea33a1edc4 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 00:39:38 +0200
Subject: [PATCH 50/75] test(widgets): stabilize advanced focus hover

---
 e2e/board-advanced-interactions.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 6f08a1a23..9b2448b91 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -82,9 +82,9 @@ describe("Board advanced interactions", () => {
       await compactSurface.evaluate((element) => {
         element.setAttribute("data-lifecycle-probe", "same-instance");
       });
+      await widget.hover();
       await widget.focus();
       await page.keyboard.down("Shift");
-      await widget.hover();
       await expect(previewSurface).toBeVisible({ timeout: 2_000 });
       await expect(previewSurface).toHaveCSS("animation-name", "none");
       const compactBounds = await widget.boundingBox();

From f214c25e9cf1b83cac1e0f4a799c21ace6cbe070 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:19:54 +0200
Subject: [PATCH 51/75] fix: require advanced widget focus opt-in

---
 apps/docs/docs/widgets/custom-api/index.mdx   |  2 +-
 .../src/advanced-focus-support.spec.ts        | 61 ++++++++++---------
 packages/widgets/src/anchor-note/index.ts     |  1 +
 .../widgets/src/archive-team-warrior/index.ts |  1 +
 packages/widgets/src/audio-stats/index.ts     |  1 +
 packages/widgets/src/bookmarks/index.tsx      |  1 +
 packages/widgets/src/calendar/index.ts        |  1 +
 packages/widgets/src/clock/index.ts           |  1 +
 packages/widgets/src/definition.spec.ts       |  9 ++-
 packages/widgets/src/definition.ts            |  2 +-
 packages/widgets/src/docker/index.ts          |  1 +
 packages/widgets/src/downloads/index.ts       |  1 +
 packages/widgets/src/firewall/index.ts        |  1 +
 .../widgets/src/health-monitoring/index.ts    |  1 +
 .../src/immich/album-carousel/index.ts        |  1 +
 .../widgets/src/immich/server-stats/index.ts  |  1 +
 packages/widgets/src/media-missing/index.ts   |  1 +
 packages/widgets/src/media-releases/index.ts  |  1 +
 packages/widgets/src/media-server/index.ts    |  1 +
 .../widgets/src/media-transcoding/index.ts    |  1 +
 .../network-status/index.ts                   |  1 +
 .../src/smart-home/entity-state/index.ts      |  1 +
 .../smart-home/execute-automation/index.ts    |  1 +
 .../widgets/src/speedtest-tracker/index.ts    |  1 +
 .../widgets/src/system-resources/index.ts     |  1 +
 packages/widgets/src/timetable/index.ts       |  1 +
 packages/widgets/src/tracearr/index.ts        |  1 +
 packages/widgets/src/traefik/index.ts         |  1 +
 packages/widgets/src/umami/index.ts           |  1 +
 packages/widgets/src/ups/index.ts             |  1 +
 packages/widgets/src/uptime-kuma/index.ts     |  1 +
 packages/widgets/src/weather/index.ts         |  1 +
 32 files changed, 70 insertions(+), 32 deletions(-)

diff --git a/apps/docs/docs/widgets/custom-api/index.mdx b/apps/docs/docs/widgets/custom-api/index.mdx
index 9325a86fe..4217f2369 100644
--- a/apps/docs/docs/widgets/custom-api/index.mdx
+++ b/apps/docs/docs/widgets/custom-api/index.mdx
@@ -18,7 +18,7 @@ Temporary inputs exist only while the tile is mounted. Homarr encrypts source cr
 
 Homarr does not send these credentials to the browser. Homarr does not include them in an export.
 
-<WidgetInteractionGuide />
+<WidgetInteractionGuide advancedView={false} />
 
 ### Adding the widget
 
diff --git a/packages/widgets/src/advanced-focus-support.spec.ts b/packages/widgets/src/advanced-focus-support.spec.ts
index 2ee1dcc84..5e69c39fb 100644
--- a/packages/widgets/src/advanced-focus-support.spec.ts
+++ b/packages/widgets/src/advanced-focus-support.spec.ts
@@ -3,41 +3,44 @@ import { describe, expect, test } from "vitest";
 import { supportsAdvancedFocus } from "./definition";
 import { widgetImports } from ".";
 
-const compactOnlyWidgetKinds = [
-  "app",
-  "bazarr",
-  "beszelAlerts",
-  "beszelSystemGrid",
-  "beszelSystemStats",
-  "beszelSystemTable",
-  "coolify",
-  "dnsHoleControls",
-  "dnsHoleSummary",
-  "iframe",
-  "indexerManager",
-  "mediaRequests-requestList",
-  "mediaRequests-requestStats",
-  "minecraftServerStatus",
-  "networkControllerSummary",
-  "notebook",
-  "notifications",
-  "paperlessNgx",
-  "patchmon",
-  "releases",
-  "rssFeed",
-  "stockPrice",
-  "systemDisks",
-  "video",
-  "vpn",
+const advancedFocusWidgetKinds = [
+  "anchorNote",
+  "archiveTeamWarrior",
+  "audioStats",
+  "bookmarks",
+  "calendar",
+  "clock",
+  "dockerContainers",
+  "downloads",
+  "firewall",
+  "healthMonitoring",
+  "immich-albumCarousel",
+  "immich-serverStats",
+  "mediaMissing",
+  "mediaReleases",
+  "mediaServer",
+  "mediaTranscoding",
+  "networkControllerStatus",
+  "smartHome-entityState",
+  "smartHome-executeAutomation",
+  "speedtestTracker",
+  "systemResources",
+  "timetable",
+  "tracearr",
+  "traefik",
+  "umami",
+  "ups",
+  "uptimeKuma",
+  "weather",
 ] as const;
 
 describe("advanced focus support", () => {
   test("is reserved for widgets with a distinct advanced experience", () => {
-    const actualCompactOnlyKinds = Object.entries(widgetImports)
-      .filter(([, widgetImport]) => !supportsAdvancedFocus(widgetImport.definition))
+    const actualAdvancedFocusKinds = Object.entries(widgetImports)
+      .filter(([, widgetImport]) => supportsAdvancedFocus(widgetImport.definition))
       .map(([kind]) => kind)
       .toSorted();
 
-    expect(actualCompactOnlyKinds).toEqual([...compactOnlyWidgetKinds].toSorted());
+    expect(actualAdvancedFocusKinds).toEqual([...advancedFocusWidgetKinds].toSorted());
   });
 });
diff --git a/packages/widgets/src/anchor-note/index.ts b/packages/widgets/src/anchor-note/index.ts
index 9baaccf2d..4eac1a441 100644
--- a/packages/widgets/src/anchor-note/index.ts
+++ b/packages/widgets/src/anchor-note/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("anchorNote", {
   icon: IconNotes,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "anchorNotes"]],
   maxIntegrations: 1,
   supportedIntegrations: ["anchor"],
diff --git a/packages/widgets/src/archive-team-warrior/index.ts b/packages/widgets/src/archive-team-warrior/index.ts
index 1eaf0a691..38a3eef36 100644
--- a/packages/widgets/src/archive-team-warrior/index.ts
+++ b/packages/widgets/src/archive-team-warrior/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("archiveTeamWarrior", {
   icon: IconArchive,
+  supportsAdvancedFocus: true,
   maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/audio-stats/index.ts b/packages/widgets/src/audio-stats/index.ts
index a21e70278..6fb3b2014 100644
--- a/packages/widgets/src/audio-stats/index.ts
+++ b/packages/widgets/src/audio-stats/index.ts
@@ -13,6 +13,7 @@ const hideUnlessAudiobookshelf = {
 
 export const { definition, componentLoader } = createWidgetDefinition("audioStats", {
   icon: IconHeadphones,
+  supportsAdvancedFocus: true,
   queryKeys: [[["widget", "audioStats", "getStats"]], [["widget", "mediaServer", "getCurrentStreams"]]],
   queryMatcher: matchesWidgetRuntimeQuery,
   supportedIntegrations: ["navidrome", "audiobookshelf"],
diff --git a/packages/widgets/src/bookmarks/index.tsx b/packages/widgets/src/bookmarks/index.tsx
index c18ff796e..85fc442cf 100644
--- a/packages/widgets/src/bookmarks/index.tsx
+++ b/packages/widgets/src/bookmarks/index.tsx
@@ -10,6 +10,7 @@ import { BookmarkAddButton } from "./add-button";
 
 export const { definition, componentLoader } = createWidgetDefinition("bookmarks", {
   icon: IconBookmark,
+  supportsAdvancedFocus: true,
   queryKey: [["app", "byIds"]],
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/calendar/index.ts b/packages/widgets/src/calendar/index.ts
index 270981f5d..471c50f17 100644
--- a/packages/widgets/src/calendar/index.ts
+++ b/packages/widgets/src/calendar/index.ts
@@ -9,6 +9,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("calendar", {
   icon: IconCalendar,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "calendar", "findAllEvents"]],
   queryMatcher: matchesWidgetRuntimeQuery,
   createOptions() {
diff --git a/packages/widgets/src/clock/index.ts b/packages/widgets/src/clock/index.ts
index e7657b918..45b040009 100644
--- a/packages/widgets/src/clock/index.ts
+++ b/packages/widgets/src/clock/index.ts
@@ -6,6 +6,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("clock", {
   icon: IconClock,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "weather", "atLocation"]],
   queryMatcher: ({ input }, scope) => {
     const location = scope.options.weatherLocation;
diff --git a/packages/widgets/src/definition.spec.ts b/packages/widgets/src/definition.spec.ts
index 7f976692c..215c884ef 100644
--- a/packages/widgets/src/definition.spec.ts
+++ b/packages/widgets/src/definition.spec.ts
@@ -2,7 +2,9 @@ import { describe, expect, test } from "vitest";
 import { definition as appDefinition } from "./app";
 import { definition as beszelSystemGridDefinition } from "./beszel-system-grid";
 import { definition as beszelSystemTableDefinition } from "./beszel-system-table";
+import { definition as customApiDefinition } from "./custom-api";
 import { getWidgetQueryKeys, supportsAdvancedFocus } from "./definition";
+import { definition as downloadsDefinition } from "./downloads";
 
 describe("getWidgetQueryKeys", () => {
   test("falls back to the widget router namespace", () => {
@@ -24,10 +26,15 @@ describe("getWidgetQueryKeys", () => {
 });
 
 describe("supportsAdvancedFocus", () => {
-  test.each([appDefinition, beszelSystemGridDefinition, beszelSystemTableDefinition])(
+  test.each([appDefinition, beszelSystemGridDefinition, beszelSystemTableDefinition, customApiDefinition])(
     "keeps non-enhanced widgets compact",
     (widgetDefinition) => {
       expect(supportsAdvancedFocus(widgetDefinition)).toBe(false);
     },
   );
+
+  test("requires an explicit opt-in", () => {
+    expect(supportsAdvancedFocus({})).toBe(false);
+    expect(supportsAdvancedFocus(downloadsDefinition)).toBe(true);
+  });
 });
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index 3f148ce77..6ef443999 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -127,7 +127,7 @@ export interface WidgetDefinition {
 }
 
 export const supportsAdvancedFocus = (definition: object) =>
-  !("supportsAdvancedFocus" in definition) || definition.supportsAdvancedFocus !== false;
+  "supportsAdvancedFocus" in definition && definition.supportsAdvancedFocus === true;
 
 export const getWidgetQueryKeys = (
   definition: {
diff --git a/packages/widgets/src/docker/index.ts b/packages/widgets/src/docker/index.ts
index bc229fed5..2ca930913 100644
--- a/packages/widgets/src/docker/index.ts
+++ b/packages/widgets/src/docker/index.ts
@@ -25,6 +25,7 @@ const columnTranslationKeyMap = {
 
 export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
   icon: IconBrandDocker,
+  supportsAdvancedFocus: true,
   queryKey: [["docker", "getContainers"]],
   refetchInterval: 30,
   createOptions() {
diff --git a/packages/widgets/src/downloads/index.ts b/packages/widgets/src/downloads/index.ts
index 60064de9a..7ac9d1182 100644
--- a/packages/widgets/src/downloads/index.ts
+++ b/packages/widgets/src/downloads/index.ts
@@ -42,6 +42,7 @@ const sortColumns = [
 
 export const { definition, componentLoader } = createWidgetDefinition("downloads", {
   icon: IconDownload,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "downloads", "getJobsAndStatuses"]],
   queryMatcher: ({ input }, scope) =>
     widgetQueryInputMatches(input, {
diff --git a/packages/widgets/src/firewall/index.ts b/packages/widgets/src/firewall/index.ts
index e154fd3ac..2a6b24854 100644
--- a/packages/widgets/src/firewall/index.ts
+++ b/packages/widgets/src/firewall/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("firewall", {
   icon: IconWall,
+  supportsAdvancedFocus: true,
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from(() => ({}));
diff --git a/packages/widgets/src/health-monitoring/index.ts b/packages/widgets/src/health-monitoring/index.ts
index c322e322a..1b2e84982 100644
--- a/packages/widgets/src/health-monitoring/index.ts
+++ b/packages/widgets/src/health-monitoring/index.ts
@@ -8,6 +8,7 @@ import { createStorageVolumeMultiSelectOptions } from "../storage-volume-options
 
 export const { definition, componentLoader } = createWidgetDefinition("healthMonitoring", {
   icon: IconHeartRateMonitor,
+  supportsAdvancedFocus: true,
   queryKeys: [[["integration", "byIds"]], [["widget", "healthMonitoring"]]],
   refetchInterval: 5,
   createOptions() {
diff --git a/packages/widgets/src/immich/album-carousel/index.ts b/packages/widgets/src/immich/album-carousel/index.ts
index f18585280..34eb0e667 100644
--- a/packages/widgets/src/immich/album-carousel/index.ts
+++ b/packages/widgets/src/immich/album-carousel/index.ts
@@ -51,6 +51,7 @@ const createOptions = () =>
 
 export const { definition, componentLoader } = createWidgetDefinition("immich-albumCarousel", {
   icon: IconPhoto,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "immich", "getAlbum"]],
   queryMatcher: ({ input }, scope) =>
     widgetQueryInputMatches(input, {
diff --git a/packages/widgets/src/immich/server-stats/index.ts b/packages/widgets/src/immich/server-stats/index.ts
index a1c966664..dedd420fe 100644
--- a/packages/widgets/src/immich/server-stats/index.ts
+++ b/packages/widgets/src/immich/server-stats/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("immich-serverStats", {
   icon: IconGraphFilled,
+  supportsAdvancedFocus: true,
   queryKeys: [[["widget", "immich", "getServerStats"]], [["widget", "immich", "getAlbums"]]],
   queryMatcher: matchesWidgetRuntimeQuery,
   refetchInterval: null,
diff --git a/packages/widgets/src/media-missing/index.ts b/packages/widgets/src/media-missing/index.ts
index 69a6ecf73..38ac8cd68 100644
--- a/packages/widgets/src/media-missing/index.ts
+++ b/packages/widgets/src/media-missing/index.ts
@@ -9,6 +9,7 @@ const pageSizeOptions = ["10", "20", "30", "50"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaMissing", {
   icon: IconMovie,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "mediaOrganizer", "getData"]],
   queryMatcher: matchesWidgetRuntimeQuery,
   createOptions() {
diff --git a/packages/widgets/src/media-releases/index.ts b/packages/widgets/src/media-releases/index.ts
index 3e6cccbe5..55eff84e5 100644
--- a/packages/widgets/src/media-releases/index.ts
+++ b/packages/widgets/src/media-releases/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("mediaReleases", {
   icon: IconTicket,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "mediaRelease"]],
   refetchInterval: null,
   createOptions() {
diff --git a/packages/widgets/src/media-server/index.ts b/packages/widgets/src/media-server/index.ts
index 46f3fd489..559b029ee 100644
--- a/packages/widgets/src/media-server/index.ts
+++ b/packages/widgets/src/media-server/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaServer", {
   icon: IconVideo,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "mediaServer", "getCurrentStreams"]],
   queryMatcher: ({ input }, scope) =>
     widgetQueryInputMatches(input, {
diff --git a/packages/widgets/src/media-transcoding/index.ts b/packages/widgets/src/media-transcoding/index.ts
index fc91622e3..bff9c1ea3 100644
--- a/packages/widgets/src/media-transcoding/index.ts
+++ b/packages/widgets/src/media-transcoding/index.ts
@@ -11,6 +11,7 @@ export const views = ["workers", "queue", "statistics"] as const;
 
 export const { componentLoader, definition } = createWidgetDefinition("mediaTranscoding", {
   icon: IconTransform,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "mediaTranscoding", "getDataAsync"]],
   queryMatcher: matchesWidgetRuntimeQuery,
   maxIntegrations: 1,
diff --git a/packages/widgets/src/network-controller/network-status/index.ts b/packages/widgets/src/network-controller/network-status/index.ts
index 3ab66da82..e3741d8e1 100644
--- a/packages/widgets/src/network-controller/network-status/index.ts
+++ b/packages/widgets/src/network-controller/network-status/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("networkControllerStatus", {
   icon: IconTopologyFull,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "networkController"]],
   refetchInterval: null,
   createOptions() {
diff --git a/packages/widgets/src/smart-home/entity-state/index.ts b/packages/widgets/src/smart-home/entity-state/index.ts
index 93a12a872..551fa42de 100644
--- a/packages/widgets/src/smart-home/entity-state/index.ts
+++ b/packages/widgets/src/smart-home/entity-state/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("smartHome-entityState", {
   icon: IconBinaryTree,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "smartHome"]],
   maxIntegrations: 1,
   createOptions() {
diff --git a/packages/widgets/src/smart-home/execute-automation/index.ts b/packages/widgets/src/smart-home/execute-automation/index.ts
index e4435f892..2a349a84e 100644
--- a/packages/widgets/src/smart-home/execute-automation/index.ts
+++ b/packages/widgets/src/smart-home/execute-automation/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("smartHome-executeAutomation", {
   icon: IconBinaryTree,
+  supportsAdvancedFocus: true,
   maxIntegrations: 1,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/speedtest-tracker/index.ts b/packages/widgets/src/speedtest-tracker/index.ts
index 14cc5d118..7de41100f 100644
--- a/packages/widgets/src/speedtest-tracker/index.ts
+++ b/packages/widgets/src/speedtest-tracker/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("speedtestTracker", {
   icon: IconSpeedboat,
+  supportsAdvancedFocus: true,
   refetchInterval: null,
   createOptions() {
     return optionsBuilder.from(
diff --git a/packages/widgets/src/system-resources/index.ts b/packages/widgets/src/system-resources/index.ts
index b35bab42f..7c0e84fdc 100644
--- a/packages/widgets/src/system-resources/index.ts
+++ b/packages/widgets/src/system-resources/index.ts
@@ -14,6 +14,7 @@ const labelDisplayModeOptions = {
 
 export const { definition, componentLoader } = createWidgetDefinition("systemResources", {
   icon: IconGraphFilled,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "healthMonitoring"]],
   refetchInterval: 5,
   supportedIntegrations: ["dashDot", "openmediavault", "truenas", "unraid", "glances", "synology"],
diff --git a/packages/widgets/src/timetable/index.ts b/packages/widgets/src/timetable/index.ts
index 81ec81db8..acd3f703d 100644
--- a/packages/widgets/src/timetable/index.ts
+++ b/packages/widgets/src/timetable/index.ts
@@ -9,6 +9,7 @@ import { optionsBuilder } from "../options";
 
 export const { componentLoader, definition } = createWidgetDefinition("timetable", {
   icon: IconBusStop,
+  supportsAdvancedFocus: true,
   errors: {
     BAD_REQUEST: {
       icon: IconWorldOff,
diff --git a/packages/widgets/src/tracearr/index.ts b/packages/widgets/src/tracearr/index.ts
index 9c34eb548..13851a846 100644
--- a/packages/widgets/src/tracearr/index.ts
+++ b/packages/widgets/src/tracearr/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("tracearr", {
   icon: IconActivityHeartbeat,
+  supportsAdvancedFocus: true,
   refetchInterval: 5,
   createOptions() {
     return optionsBuilder.from((factory) => ({
diff --git a/packages/widgets/src/traefik/index.ts b/packages/widgets/src/traefik/index.ts
index 854075121..95392a152 100644
--- a/packages/widgets/src/traefik/index.ts
+++ b/packages/widgets/src/traefik/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("traefik", {
   icon: IconRoute,
+  supportsAdvancedFocus: true,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showTcp: factory.switch({
diff --git a/packages/widgets/src/umami/index.ts b/packages/widgets/src/umami/index.ts
index 423eebebe..9c96e4a8e 100644
--- a/packages/widgets/src/umami/index.ts
+++ b/packages/widgets/src/umami/index.ts
@@ -8,6 +8,7 @@ export const timeFrameValues = ["today", "24h", "7d", "30d", "month", "lastMonth
 
 export const { definition, componentLoader } = createWidgetDefinition("umami", {
   icon: IconChartBar,
+  supportsAdvancedFocus: true,
   queryKeys: [
     [["widget", "umami", "getVisitorStats"]],
     [["widget", "umami", "getActiveVisitors"]],
diff --git a/packages/widgets/src/ups/index.ts b/packages/widgets/src/ups/index.ts
index 681daf417..0ee8c70d5 100644
--- a/packages/widgets/src/ups/index.ts
+++ b/packages/widgets/src/ups/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("ups", {
   icon: IconBatteryCharging,
+  supportsAdvancedFocus: true,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showBattery: factory.switch({
diff --git a/packages/widgets/src/uptime-kuma/index.ts b/packages/widgets/src/uptime-kuma/index.ts
index b9eebcd8c..0b0cff5ad 100644
--- a/packages/widgets/src/uptime-kuma/index.ts
+++ b/packages/widgets/src/uptime-kuma/index.ts
@@ -5,6 +5,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("uptimeKuma", {
   icon: IconHeartbeat,
+  supportsAdvancedFocus: true,
   createOptions() {
     return optionsBuilder.from((factory) => ({
       showAverageUptime: factory.switch({
diff --git a/packages/widgets/src/weather/index.ts b/packages/widgets/src/weather/index.ts
index 978c9a855..11ced3b39 100644
--- a/packages/widgets/src/weather/index.ts
+++ b/packages/widgets/src/weather/index.ts
@@ -7,6 +7,7 @@ import { optionsBuilder } from "../options";
 
 export const { definition, componentLoader } = createWidgetDefinition("weather", {
   icon: IconCloud,
+  supportsAdvancedFocus: true,
   queryKey: [["widget", "weather", "atLocation"]],
   queryMatcher: ({ input }, scope) => {
     const location = scope.options.location;

From b5dbeae86461aa32d1bf462375a64ba597e0d714 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:21:55 +0200
Subject: [PATCH 52/75] test: fix custom option repair fixture

---
 .../custom-widgets/src/test/options.spec.ts   | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/custom-widgets/src/test/options.spec.ts b/packages/custom-widgets/src/test/options.spec.ts
index 078cfc62a..628246b7a 100644
--- a/packages/custom-widgets/src/test/options.spec.ts
+++ b/packages/custom-widgets/src/test/options.spec.ts
@@ -71,17 +71,16 @@ describe("lean Custom Widget options", () => {
   });
 
   it("replaces stale values with current defaults", () => {
-    const options = customWidgetDefinitionSchema.parse({
-      $schema: "homarr-custom-widget-v2",
-      name: "Updated options",
-      sources: {},
-      requests: {},
-      options: {
-        limit: { label: "Limit", control: "slider", default: 5, min: 1, max: 10 },
-        label: { label: "Label", control: "text", default: "Default" },
-      },
-      template: "<Text>{options.limit}</Text>",
-    }).options;
+    const options = {
+      limit: customWidgetOptionSchema.parse({
+        label: "Limit",
+        control: "slider",
+        default: 5,
+        min: 1,
+        max: 10,
+      }),
+      label: customWidgetOptionSchema.parse({ label: "Label", control: "text", default: "Default" }),
+    };
 
     const normalized = normalizeCustomWidgetOptions(options, {
       limit: "5",

From b9c89c61a26853c823b3435f07c458bac0c15297 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 13:39:16 +0200
Subject: [PATCH 53/75] test: harden integration icon checks

---
 packages/definitions/src/test/integration.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/definitions/src/test/integration.spec.ts b/packages/definitions/src/test/integration.spec.ts
index bdb5194fd..3372a450d 100644
--- a/packages/definitions/src/test/integration.spec.ts
+++ b/packages/definitions/src/test/integration.spec.ts
@@ -6,7 +6,7 @@ import { integrationDefs } from "../integration";
 
 describe("Icon url's of integrations should be valid and return 200", () => {
   objectEntries(integrationDefs).forEach(([integration, { iconUrl }]) => {
-    it.concurrent(`should return 200 for ${integration}`, async () => {
+    it(`should return 200 for ${integration}`, { concurrent: true, retry: 2, timeout: 15_000 }, async () => {
       const res = await fetch(iconUrl);
       expect(res.status).toBe(200);
     });

From fc1dbd37f163d9c738a2592de13c453066ee96ea Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:36:49 +0200
Subject: [PATCH 54/75] fix: accept legacy dynamic sections

---
 packages/validation/src/board.spec.ts | 12 ++++++++++--
 packages/validation/src/shared.ts     |  6 +++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/validation/src/board.spec.ts b/packages/validation/src/board.spec.ts
index c8220f445..8a6e8b37c 100644
--- a/packages/validation/src/board.spec.ts
+++ b/packages/validation/src/board.spec.ts
@@ -44,8 +44,16 @@ describe("section behavior validation", () => {
     });
   });
 
-  it.each(["category", "dynamic"])("rejects the legacy %s kind", (kind) => {
-    expect(() => sectionSchema.parse({ id: "legacy", kind, layouts: [] })).toThrow();
+  it("normalizes the legacy dynamic kind to a container", () => {
+    expect(sectionSchema.parse({ id: "legacy", kind: "dynamic", layouts: [] })).toMatchObject({
+      id: "legacy",
+      kind: "container",
+      layouts: [],
+    });
+  });
+
+  it("rejects the legacy category kind", () => {
+    expect(() => sectionSchema.parse({ id: "legacy", kind: "category", layouts: [] })).toThrow();
   });
 
   it.each([
diff --git a/packages/validation/src/shared.ts b/packages/validation/src/shared.ts
index cd7ec8ac3..6a6a3e92d 100644
--- a/packages/validation/src/shared.ts
+++ b/packages/validation/src/shared.ts
@@ -93,4 +93,8 @@ const containerSectionSchema = z.object({
   ),
 });
 
-export const sectionSchema = z.union([emptySectionSchema, containerSectionSchema]);
+const legacyDynamicSectionSchema = containerSectionSchema
+  .extend({ kind: z.literal("dynamic") })
+  .transform((section) => ({ ...section, kind: "container" as const }));
+
+export const sectionSchema = z.union([emptySectionSchema, containerSectionSchema, legacyDynamicSectionSchema]);

From 7a97b7187bd623cb9e36e1602ef6ee797113c949 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:43:10 +0200
Subject: [PATCH 55/75] Fix board grid bounds and live growth

---
 apps/docs/docs/management/boards/index.mdx    |  3 +-
 .../src/components/board/layout/README.md     |  4 +-
 .../src/components/board/layout/constants.ts  |  1 -
 .../src/components/board/layout/geometry.ts   |  7 ++
 .../layout/scaled-board-canvas.module.css     |  4 +-
 .../board/layout/scaled-board-canvas.tsx      | 12 ++-
 .../board/layout/test/geometry.spec.ts        | 16 +++-
 .../layout/test/scaled-board-canvas.spec.ts   | 16 ++--
 .../board/sections/empty-section.tsx          |  2 +-
 .../board/sections/grid/grid-editor.css       |  4 +
 .../board/sections/grid/grid-editor.tsx       | 22 +++++-
 .../board/sections/grid/section-grid.tsx      | 29 ++++++-
 e2e/board-grid.spec.ts                        | 79 ++++++++++++-------
 13 files changed, 142 insertions(+), 57 deletions(-)

diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 3fb9467ef..9c8735c5b 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -38,7 +38,8 @@ Underscores and hyphen-minus are allowed.
 
 The column count defines how many fixed-width cells are available in each row.
 One cell contains a `200 × 200` logical-pixel tile.
-Homarr scales the whole board uniformly instead of changing widget proportions, with horizontal scrolling when further shrinking would make controls too small.
+Homarr scales the whole board uniformly instead of changing widget proportions, and always fits it to the available width without horizontal scrolling.
+The main canvas stays at least one viewport tall and grows automatically while you drag or resize items near its lower edge.
 
 ### Public
 
diff --git a/apps/nextjs/src/components/board/layout/README.md b/apps/nextjs/src/components/board/layout/README.md
index 8a12bc180..be60ab237 100644
--- a/apps/nextjs/src/components/board/layout/README.md
+++ b/apps/nextjs/src/components/board/layout/README.md
@@ -10,7 +10,9 @@ The board uses fixed logical units:
 Items keep the same logical dimensions at every viewport. The viewport reserves
 the painted size while the inner canvas remains at its logical dimensions, so a
 widget's `clientWidth`, `clientHeight`, and `ResizeObserver` measurements stay
-stable.
+stable. The visual canvas always fits the available width, the main root keeps
+at least one viewport of height, and edit-mode previews extend it downward as
+needed.
 
 The read-only renderer should:
 
diff --git a/apps/nextjs/src/components/board/layout/constants.ts b/apps/nextjs/src/components/board/layout/constants.ts
index 9c3103b4b..26e3f0765 100644
--- a/apps/nextjs/src/components/board/layout/constants.ts
+++ b/apps/nextjs/src/components/board/layout/constants.ts
@@ -5,6 +5,5 @@
 export const LOGICAL_GRID_CELL_SIZE = 200;
 export const LOGICAL_GRID_GAP = 24;
 export const LOGICAL_GRID_PITCH = LOGICAL_GRID_CELL_SIZE + LOGICAL_GRID_GAP;
-export const MIN_ACCESSIBLE_CANVAS_SCALE = 0.75;
 
 export const COLLAPSED_SECTION_ROW_COUNT = 0.5;
diff --git a/apps/nextjs/src/components/board/layout/geometry.ts b/apps/nextjs/src/components/board/layout/geometry.ts
index 32b7fced4..449e74d4d 100644
--- a/apps/nextjs/src/components/board/layout/geometry.ts
+++ b/apps/nextjs/src/components/board/layout/geometry.ts
@@ -21,6 +21,13 @@ export const getLogicalItemStyle = ({ x, y, w, h }: GridCoordinates): CSSPropert
 export const getLayoutRowCount = (placements: readonly GridCoordinates[]) =>
   placements.reduce((rowCount, placement) => Math.max(rowCount, placement.y + placement.h), 0);
 
+export const getGridRowCountForVisualHeight = (visualHeight: number, visualScale: number) => {
+  if (!Number.isFinite(visualHeight) || visualHeight <= 0) return 1;
+  if (!Number.isFinite(visualScale) || visualScale <= 0) return 1;
+
+  return Math.max(1, Math.ceil((visualHeight / visualScale + LOGICAL_GRID_GAP) / LOGICAL_GRID_PITCH));
+};
+
 export const normalizeGridPlacement = <TPlacement extends GridPlacement>(
   placement: TPlacement,
   columnCount: number,
diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
index 6c98e40a2..447cb638d 100644
--- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
+++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
@@ -2,9 +2,7 @@
   width: 100%;
   max-width: 100%;
   min-width: 0;
-  overflow: visible;
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
+  overflow: clip;
 }
 
 .viewport[data-board-hydrated="false"] {
diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
index 3d5de2b72..5844a9bd8 100644
--- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
+++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
@@ -5,11 +5,8 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { Box } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 
-import { MIN_ACCESSIBLE_CANVAS_SCALE } from "./constants";
 import classes from "./scaled-board-canvas.module.css";
 
-export { MIN_ACCESSIBLE_CANVAS_SCALE };
-
 const BoardCanvasScaleContext = createContext(1);
 
 export const useBoardCanvasScale = () => useContext(BoardCanvasScaleContext);
@@ -18,7 +15,7 @@ export const calculateBoardCanvasScale = (availableWidth: number, logicalWidth:
   if (!Number.isFinite(availableWidth) || !Number.isFinite(logicalWidth)) return 1;
   if (availableWidth <= 0 || logicalWidth <= 0) return 1;
 
-  return Math.max(MIN_ACCESSIBLE_CANVAS_SCALE, availableWidth / logicalWidth);
+  return availableWidth / logicalWidth;
 };
 
 export const calculateBoardUiScale = (canvasScale: number) => {
@@ -36,9 +33,8 @@ interface ScaledBoardCanvasProps {
 
 /**
  * Scales the complete board as one surface while keeping widget layout in
- * fixed logical pixels. The scale floor deliberately allows horizontal
- * overflow so browser zoom still magnifies content instead of being cancelled
- * by responsive downscaling.
+ * fixed logical pixels. The complete canvas always fits its viewport so board
+ * content can never widen the document or require horizontal scrolling.
  */
 export const ScaledBoardCanvas = ({
   logicalWidth,
@@ -62,6 +58,7 @@ export const ScaledBoardCanvas = ({
     [logicalWidth, resolvedAvailableWidth],
   );
   const uiScale = calculateBoardUiScale(scale);
+  const inverseScale = scale > 0 ? 1 / scale : 1;
   const visualWidth = logicalWidth * scale;
   const hasHorizontalOverflow = resolvedAvailableWidth > 0 && visualWidth - resolvedAvailableWidth > 0.5;
 
@@ -84,6 +81,7 @@ export const ScaledBoardCanvas = ({
           className={classes.canvas}
           w={logicalWidth}
           style={{
+            "--board-canvas-inverse-scale": inverseScale,
             "--board-canvas-ui-scale": uiScale,
             transform: `scale(${scale})`,
           }}
diff --git a/apps/nextjs/src/components/board/layout/test/geometry.spec.ts b/apps/nextjs/src/components/board/layout/test/geometry.spec.ts
index 66f084703..3d46398bb 100644
--- a/apps/nextjs/src/components/board/layout/test/geometry.spec.ts
+++ b/apps/nextjs/src/components/board/layout/test/geometry.spec.ts
@@ -1,6 +1,12 @@
 import { describe, expect, test } from "vitest";
 
-import { getLayoutRowCount, getLogicalItemStyle, getLogicalTrackSize, normalizeGridPlacement } from "../index";
+import {
+  getGridRowCountForVisualHeight,
+  getLayoutRowCount,
+  getLogicalItemStyle,
+  getLogicalTrackSize,
+  normalizeGridPlacement,
+} from "../index";
 
 describe("fixed dashboard geometry", () => {
   test("keeps a 1x1 item exactly 200px with a fixed 24px gap", () => {
@@ -24,4 +30,12 @@ describe("fixed dashboard geometry", () => {
     expect(placement).toEqual({ id: "wide", x: 0, y: 0, w: 4, h: 2 });
     expect(getLayoutRowCount([placement, { x: 0, y: 4, w: 1, h: 3 }])).toBe(7);
   });
+
+  test("derives enough logical rows to fill the visual viewport at any canvas scale", () => {
+    expect(getGridRowCountForVisualHeight(1200, 1)).toBe(6);
+    expect(getLogicalTrackSize(getGridRowCountForVisualHeight(1200, 1))).toBeGreaterThanOrEqual(1200);
+
+    expect(getGridRowCountForVisualHeight(1200, 0.5)).toBe(11);
+    expect(getLogicalTrackSize(getGridRowCountForVisualHeight(1200, 0.5)) * 0.5).toBeGreaterThanOrEqual(1200);
+  });
 });
diff --git a/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts b/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts
index 83e14ea02..50fae3420 100644
--- a/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts
+++ b/apps/nextjs/src/components/board/layout/test/scaled-board-canvas.spec.ts
@@ -1,9 +1,9 @@
 import { describe, expect, test } from "vitest";
 
-import { calculateBoardCanvasScale, calculateBoardUiScale, MIN_ACCESSIBLE_CANVAS_SCALE } from "../scaled-board-canvas";
+import { calculateBoardCanvasScale, calculateBoardUiScale } from "../scaled-board-canvas";
 
 describe("board canvas scale policy", () => {
-  test("fits the logical canvas exactly when the viewport can preserve the minimum scale", () => {
+  test("fits the logical canvas exactly", () => {
     const scale = calculateBoardCanvasScale(840, 1000);
 
     expect(scale).toBe(0.84);
@@ -14,16 +14,16 @@ describe("board canvas scale policy", () => {
     expect(calculateBoardCanvasScale(1800, 1000)).toBe(1.8);
   });
 
-  test("stops counter-scaling at 0.75 and lets the canvas overflow", () => {
+  test("keeps fitting narrow viewports without horizontal overflow", () => {
     const availableWidth = 600;
     const logicalWidth = 1000;
     const scale = calculateBoardCanvasScale(availableWidth, logicalWidth);
 
-    expect(scale).toBe(MIN_ACCESSIBLE_CANVAS_SCALE);
-    expect(logicalWidth * scale).toBeGreaterThan(availableWidth);
+    expect(scale).toBe(0.6);
+    expect(logicalWidth * scale).toBe(availableWidth);
   });
 
-  test("keeps content materially magnified at 200% effective zoom", () => {
+  test("keeps the board fitted at 200% effective zoom", () => {
     const logicalWidth = 1696;
     const normalAvailableWidth = 1872;
     const normalScale = calculateBoardCanvasScale(normalAvailableWidth, logicalWidth);
@@ -31,8 +31,8 @@ describe("board canvas scale policy", () => {
     const normalPaintedCellSize = 200 * normalScale;
     const zoomedPaintedCellSize = 200 * zoomedScale * 2;
 
-    expect(zoomedScale).toBe(MIN_ACCESSIBLE_CANVAS_SCALE);
-    expect(zoomedPaintedCellSize).toBeGreaterThan(normalPaintedCellSize * 1.25);
+    expect(zoomedScale).toBeCloseTo(normalScale / 2);
+    expect(zoomedPaintedCellSize).toBeCloseTo(normalPaintedCellSize);
   });
 
   test.each([
diff --git a/apps/nextjs/src/components/board/sections/empty-section.tsx b/apps/nextjs/src/components/board/sections/empty-section.tsx
index 5e4ef1d65..ab958e75f 100644
--- a/apps/nextjs/src/components/board/sections/empty-section.tsx
+++ b/apps/nextjs/src/components/board/sections/empty-section.tsx
@@ -18,7 +18,7 @@ export const BoardEmptySection = ({ section, columnCount, requestedRowCount, rai
   const [isEditMode] = useEditMode();
   const t = useScopedI18n("board.landmark");
 
-  if (totalLength === 0 && !isEditMode && requestedRowCount === 0) return null;
+  if (totalLength === 0 && !isEditMode && requestedRowCount === 0 && railPlacement !== "main") return null;
 
   return (
     <SectionGrid
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.css b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
index 82a004f73..85ad16799 100644
--- a/apps/nextjs/src/components/board/sections/grid/grid-editor.css
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
@@ -86,6 +86,10 @@ body[data-board-grid-interacting="drag"] .board-grid-placeholder {
   overflow: visible;
 }
 
+body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="true"] > .board-grid-content-mount {
+  overflow: clip;
+}
+
 .board-grid-placeholder {
   z-index: 0;
   background: color-mix(in srgb, var(--mantine-primary-color-filled) 16%, transparent);
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx b/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
index 192cbf7f9..d4d0782ab 100644
--- a/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.tsx
@@ -10,6 +10,7 @@ import { CollisionPriority } from "@dnd-kit/abstract";
 import { pointerIntersection } from "@dnd-kit/collision";
 import type { DragDropManager, Draggable as DomDraggable } from "@dnd-kit/dom";
 import { Accessibility, AutoScroller, Feedback, PointerActivationConstraints, PointerSensor } from "@dnd-kit/dom";
+import { RestrictToElement } from "@dnd-kit/dom/modifiers";
 import { getEventCoordinates, getFrameTransform, isPointerEvent } from "@dnd-kit/dom/utilities";
 import type {
   BeforeDragStartEvent,
@@ -720,6 +721,7 @@ export default function GridEditor({ sectionId, columnCount, rowCount, placement
     if (!previewGrid || !interaction) return placements;
 
     if (interaction.sourceGridId === sectionId) {
+      if (interaction.mode === "resize") return previewGrid.placements;
       const original = controlledById.get(interaction.activeId);
       if (!original) return previewGrid.placements;
       return previewGrid.placements.some((placement) => placement.id === interaction.activeId)
@@ -734,9 +736,16 @@ export default function GridEditor({ sectionId, columnCount, rowCount, placement
   );
   const targetPlacement =
     interaction?.valid && interaction.targetGridId === sectionId ? interaction.targetPlacement : null;
+  const growsDuringDrag =
+    interaction?.mode === "drag" &&
+    (interaction.targetGridId === sectionId ||
+      (interaction.targetGridId === null && interaction.sourceGridId === sectionId));
+  const participatesInInteraction =
+    interaction && (interaction.sourceGridId === sectionId || interaction.targetGridId === sectionId);
+  const previewRowCount = getLayoutRowCount(previewGrid?.placements ?? renderPlacements);
   const renderedRowCount =
-    section.kind !== "container" && interaction?.mode === "resize"
-      ? Math.max(rowCount, getLayoutRowCount(renderPlacements))
+    section.kind !== "container" && participatesInInteraction
+      ? Math.max(rowCount, previewRowCount) + (growsDuringDrag ? 1 : 0)
       : rowCount;
 
   const { ref: droppableRef, isDropTarget } = useDroppable<GridTargetData>({
@@ -876,6 +885,14 @@ const DndGridEntry = ({ sectionId, placement, label, columnCount, maxRowCount }:
     ],
     [],
   );
+  const modifiers = useMemo(
+    () => [
+      RestrictToElement.configure({
+        element: () => shellRef.current?.closest('[data-testid="board-canvas"]') ?? null,
+      }),
+    ],
+    [],
+  );
   const {
     ref: draggableRef,
     handleRef,
@@ -886,6 +903,7 @@ const DndGridEntry = ({ sectionId, placement, label, columnCount, maxRowCount }:
     type: GRID_ENTRY_TYPE,
     data: sourceData,
     sensors,
+    modifiers,
   });
   const setShellRef = useCallback(
     (element: HTMLDivElement | null) => {
diff --git a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
index 3ab7b292b..6b98efc0c 100644
--- a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
 import { Box, LoadingOverlay } from "@mantine/core";
 import combineClasses from "clsx";
@@ -13,12 +13,14 @@ import type { ContainerSectionItem, Section } from "~/app/[locale]/boards/_types
 import {
   getCollapsedDisplayLayout,
   getEditableCanvasAttributes,
+  getGridRowCountForVisualHeight,
   getLayoutRowCount,
   getLogicalItemStyle,
   getLogicalTrackSize,
   getReadonlyCanvasAttributes,
   normalizeGridPlacement,
 } from "~/components/board/layout";
+import { useBoardCanvasScale } from "~/components/board/layout/scaled-board-canvas";
 import { loadGridEditorAsync } from "./grid-editor-loader";
 import { useGridEditorRuntimeStatus } from "./grid-editor-runtime";
 import type { SectionGridPlacement } from "./use-grid-layout-actions";
@@ -81,6 +83,7 @@ export const SectionGrid = ({
   className,
 }: SectionGridProps) => {
   const [isEditMode] = useEditMode();
+  const canvasScale = useBoardCanvasScale();
   const editorRuntimeStatus = useGridEditorRuntimeStatus();
   const board = useRequiredBoard();
   const currentLayoutId = useCurrentLayout();
@@ -144,8 +147,12 @@ export const SectionGrid = ({
   );
   const displayedItems = items.map((item) => withPlacement(item, placementById.get(item.id)));
   const displayedInnerSections = innerSections.map((item) => withPlacement(item, placementById.get(item.id)));
+  const minimumViewportRowCount = useMinimumViewportRowCount(
+    section.kind === "empty" && railPlacement === "main",
+    canvasScale,
+  );
   const contentRowCount = Math.max(1, getLayoutRowCount(displayPlacements));
-  const rowCount = Math.max(contentRowCount, requestedRowCount);
+  const rowCount = Math.max(contentRowCount, requestedRowCount, minimumViewportRowCount);
   const logicalWidth = getLogicalTrackSize(columnCount);
   const logicalHeight = getLogicalTrackSize(rowCount);
   const canvasAttributes = isEditMode
@@ -199,6 +206,24 @@ export const SectionGrid = ({
   );
 };
 
+const useMinimumViewportRowCount = (enabled: boolean, canvasScale: number) => {
+  const [visualHeight, setVisualHeight] = useState(0);
+
+  useEffect(() => {
+    if (!enabled) return;
+    const update = () => setVisualHeight(window.visualViewport?.height ?? window.innerHeight);
+    update();
+    window.addEventListener("resize", update, { passive: true });
+    window.visualViewport?.addEventListener("resize", update, { passive: true });
+    return () => {
+      window.removeEventListener("resize", update);
+      window.visualViewport?.removeEventListener("resize", update);
+    };
+  }, [enabled]);
+
+  return enabled ? getGridRowCountForVisualHeight(visualHeight, canvasScale) : 0;
+};
+
 const getContainerMinimumSize = (
   board: ReturnType<typeof useRequiredBoard>,
   layoutId: string,
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 47d734263..512fddf08 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -9,7 +9,6 @@ import { describe, test } from "vitest";
 import {
   LOGICAL_GRID_CELL_SIZE,
   LOGICAL_GRID_GAP,
-  MIN_ACCESSIBLE_CANVAS_SCALE,
 } from "../apps/nextjs/src/components/board/layout/constants";
 import * as sqliteSchema from "../packages/db/schema/sqlite";
 import { createHomarrContainer } from "./shared/create-homarr-container";
@@ -26,7 +25,6 @@ const gridRuntimeMarker = "homarr-dnd-kit-v1";
 const dndKitPayloadMarker = "dnd-kit-description";
 const logicalCellSize = LOGICAL_GRID_CELL_SIZE;
 const logicalCellPitch = LOGICAL_GRID_CELL_SIZE + LOGICAL_GRID_GAP;
-const minimumCanvasScale = MIN_ACCESSIBLE_CANVAS_SCALE;
 
 describe("Board grid", () => {
   test("supports fixed, nested, rail, pointer, keyboard and reconciliation workflows", async () => {
@@ -174,21 +172,17 @@ describe("Board grid", () => {
       expect(await readLayoutShiftScoreAsync(page)).toBeLessThan(0.01);
 
       // CSS zoom exercises Chromium's browser-zoom layout path without relying
-      // on desktop browser chrome. At 200% the scale floor must preserve
-      // magnification and expose horizontal scrolling instead of shrinking the
-      // board by the inverse zoom factor.
+      // on desktop browser chrome. The board must keep fitting without adding
+      // horizontal scrolling at any effective zoom.
       await setDocumentZoomAsync(page, 2);
-      await expect(canvas).toHaveAttribute("data-canvas-scale", String(minimumCanvasScale));
-      await expect(canvas).toHaveAttribute("data-canvas-overflow", "true");
+      const zoomedCanvasScale = await readCanvasScaleAsync(canvas);
+      expect(zoomedCanvasScale).toBeCloseTo(normalCanvasScale / 2, 2);
+      await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
       await expectFixedLogicalTileAsync(logicalTile);
       await expectUniformVisualScaleAsync(logicalTile);
-      const fittedClockFontSize = await firstItem.locator(".clock-time-text").evaluate((element) => {
-        return Number.parseFloat(getComputedStyle(element).fontSize);
-      });
-      expect(fittedClockFontSize * minimumCanvasScale).toBeGreaterThanOrEqual(25);
       const zoomedTileBox = await expectBoundingBoxAsync(logicalTile);
-      expect(zoomedTileBox.width).toBeGreaterThan(normalZoomTileBox.width * 1.25);
-      await expectHorizontalOverflowAsync(canvas);
+      expect(zoomedTileBox.width).toBeCloseTo(normalZoomTileBox.width, 1);
+      await expectNoHorizontalOverflowAsync(canvas);
       await expectDocumentNotHorizontallyScrollableAsync(page);
       const overflowRailY = (await expectBoundingBoxAsync(rail)).y;
       await page.evaluate(() => window.scrollTo({ top: 300, behavior: "auto" }));
@@ -337,8 +331,11 @@ describe("Board grid", () => {
       await expect(itemSelectDialog).toHaveCount(0);
 
       const mainGrid = page.locator(`[data-grid-section-id="${fixture.sectionId}"]`);
+      const editorViewport = page.viewportSize();
+      if (!editorViewport) throw new Error("Expected a browser viewport");
+      expect((await expectBoundingBoxAsync(mainGrid)).height).toBeGreaterThanOrEqual(editorViewport.height - 1);
       const interactionSnapshot = await readEditorGridSnapshotAsync(mainGrid);
-      await expectGridBoundaryRejectsOverflowAsync(page, mainGrid, firstItem);
+      await expectGridGrowsAtBoundaryAsync(page, canvas, mainGrid, firstItem);
       await firstItem.locator("[data-grid-item-content]").evaluate((element) => {
         const iframe = document.createElement("iframe");
         iframe.dataset.e2eDragIframe = "true";
@@ -367,8 +364,8 @@ describe("Board grid", () => {
         .evaluateAll((elements) => elements.forEach((element) => element.remove()));
 
       await page.setViewportSize({ width: 600, height: 1200 });
-      await expect(canvas).toHaveAttribute("data-canvas-scale", String(minimumCanvasScale));
-      await expectHorizontalOverflowAsync(canvas);
+      await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
+      await expectNoHorizontalOverflowAsync(canvas);
       await expectDocumentNotHorizontallyScrollableAsync(page);
       for (const direction of ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const) {
         await expectTargetSizeAsync(firstItem.locator(`:scope > [data-grid-resize-handle="${direction}"]`));
@@ -718,13 +715,12 @@ describe("Board grid", () => {
       expect(continuousResizeWidth).toBeGreaterThan(logicalCellSize * canvasScale);
 
       await page.mouse.move(eastResizeStart.x - logicalCellPitch * canvasScale, eastResizeStart.y, { steps: 6 });
-      await expect(containerSection).toHaveAttribute("data-grid-w", "2");
+      await expect(containerSection).toHaveAttribute("data-grid-w", "1");
       await expect(resizePlaceholder).toHaveAttribute("data-grid-w", "1");
       expect((await expectBoundingBoxAsync(resizeOutline)).width).toBeCloseTo(logicalCellSize * canvasScale, 1);
-      const liveNestedGridBox = await expectBoundingBoxAsync(nestedEditor);
       const liveContainerBox = await expectBoundingBoxAsync(containerSection);
-      expect(liveNestedGridBox.width).toBeCloseTo(originalResizeWidth, 1);
-      expect(liveNestedGridBox.width).toBeLessThanOrEqual(liveContainerBox.width + 1);
+      expect(liveContainerBox.width).toBeCloseTo(logicalCellSize * canvasScale, 1);
+      await expect(containerSection.locator(":scope > .board-grid-content-mount")).toHaveCSS("overflow", "clip");
       await page.mouse.up();
       await expect(containerSection).toHaveAttribute("data-grid-w", "1");
       await expect(resizeOutline).toHaveCount(0);
@@ -759,15 +755,26 @@ describe("Board grid", () => {
       await expect(containerSection).toHaveAttribute("data-grid-h", "2");
 
       const southResizeHandle = containerSection.locator(':scope > [data-grid-resize-handle="s"]');
-      await dragLocatorByAsync(page, southResizeHandle, 0, logicalCellPitch * canvasScale);
+      const gridHeightBeforeSouthResize = (await expectBoundingBoxAsync(mainGrid)).height;
+      const southResizeBox = await expectBoundingBoxAsync(southResizeHandle);
+      const southResizeStart = {
+        x: southResizeBox.x + southResizeBox.width / 2,
+        y: southResizeBox.y + southResizeBox.height / 2,
+      };
+      await page.mouse.move(southResizeStart.x, southResizeStart.y);
+      await page.mouse.down();
+      await page.mouse.move(southResizeStart.x, southResizeStart.y + logicalCellPitch * canvasScale, { steps: 8 });
       await expect(containerSection).toHaveAttribute("data-grid-h", "3");
       await expect(belowItem).toHaveAttribute("data-grid-y", "3");
+      await expect
+        .poll(async () => (await expectBoundingBoxAsync(mainGrid)).height)
+        .toBeGreaterThan(gridHeightBeforeSouthResize);
+      await page.mouse.up();
       expect(
         gridLayoutsOverlap(await readGridLayoutAsync(containerSection), await readGridLayoutAsync(belowItem)),
       ).toBe(false);
 
-      // Auto-scroll needs real document overflow. Grow the canvas through an
-      // explicit resize instead of relying on edit mode to add empty rows.
+      // Grow the canvas further to exercise sustained document auto-scroll.
       await dragLocatorByAsync(page, southResizeHandle, 0, logicalCellPitch * canvasScale * 6);
       await expect(containerSection).toHaveAttribute("data-grid-h", "9");
       await expect(belowItem).toHaveAttribute("data-grid-y", "9");
@@ -1713,9 +1720,10 @@ const expectImmediateOutsideReleaseRestoresSnapshotAsync = async (page: Page, gr
   await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
 };
 
-const expectGridBoundaryRejectsOverflowAsync = async (page: Page, grid: Locator, locator: Locator) => {
+const expectGridGrowsAtBoundaryAsync = async (page: Page, canvas: Locator, grid: Locator, locator: Locator) => {
   const snapshot = await readEditorGridSnapshotAsync(grid);
   const gridBox = await expectBoundingBoxAsync(grid);
+  const canvasBox = await expectBoundingBoxAsync(canvas);
   const itemBox = await expectBoundingBoxAsync(locator);
   const start = { x: itemBox.x + itemBox.width * 0.63, y: itemBox.y + itemBox.height * 0.42 };
 
@@ -1723,11 +1731,22 @@ const expectGridBoundaryRejectsOverflowAsync = async (page: Page, grid: Locator,
   await page.mouse.down();
   await page.mouse.move(start.x + 8, start.y);
   await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
-  await page.mouse.move(gridBox.x + gridBox.width / 2, gridBox.y + gridBox.height + logicalCellPitch, { steps: 12 });
-  await expect(page.locator("[data-grid-placeholder-for]")).toHaveCount(0);
-  const activeGridBox = await expectBoundingBoxAsync(grid);
-  expect(activeGridBox.height).toBeCloseTo(gridBox.height, 1);
+  await expect
+    .poll(async () => (await expectBoundingBoxAsync(grid)).height)
+    .toBeGreaterThan(gridBox.height);
 
+  await page.mouse.move(gridBox.x + gridBox.width / 2, gridBox.y + gridBox.height + logicalCellPitch / 2, {
+    steps: 12,
+  });
+  await expect(page.locator("[data-grid-placeholder-for]")).toHaveCount(1);
+  const activeGridBox = await expectBoundingBoxAsync(grid);
+  expect(activeGridBox.height).toBeGreaterThan(gridBox.height);
+
+  await page.mouse.move(canvasBox.x + canvasBox.width + 1000, start.y, { steps: 12 });
+  const overlayBox = await expectBoundingBoxAsync(page.locator(".board-grid-drag-overlay[data-dnd-dragging]"));
+  expect(overlayBox.x + overlayBox.width).toBeLessThanOrEqual(canvasBox.x + canvasBox.width + 1);
+
+  await page.keyboard.press("Escape");
   await page.mouse.up();
   await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
   await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
@@ -2036,7 +2055,7 @@ const expectUniformVisualScaleAsync = async (locator: Locator) => {
   expect(scale.horizontal).toBeCloseTo(scale.vertical, 3);
 };
 
-const expectHorizontalOverflowAsync = async (locator: Locator) => {
+const expectNoHorizontalOverflowAsync = async (locator: Locator) => {
   const dimensions = await locator.evaluate((element) => {
     const htmlElement = element as HTMLElement;
     return {
@@ -2045,7 +2064,7 @@ const expectHorizontalOverflowAsync = async (locator: Locator) => {
     };
   });
 
-  expect(dimensions.scrollWidth).toBeGreaterThan(dimensions.clientWidth);
+  expect(dimensions.scrollWidth - dimensions.clientWidth).toBeLessThanOrEqual(1);
 };
 
 const expectDocumentNotHorizontallyScrollableAsync = async (page: Page) => {

From 0a8e4fead0ddf5cb9f15f31f5455ca7536cc44ca Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:41:08 +0200
Subject: [PATCH 56/75] fix: stabilize board rails

---
 apps/docs/docs/management/boards/index.mdx    |  4 +-
 .../boards/(content)/_client.module.css       | 40 +++++++++--
 .../app/[locale]/boards/(content)/_client.tsx | 66 ++-----------------
 e2e/board-grid.spec.ts                        |  8 +++
 4 files changed, 51 insertions(+), 67 deletions(-)

diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 3fb9467ef..0ea8d256e 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -133,8 +133,8 @@ For example, a 12-column layout with a two-column left rail leaves ten columns f
 Enabling or widening a rail reflows canvas items into the remaining columns.
 Disabling a rail moves its contents back into the next available canvas positions.
 
-Rails remain visible while the page scrolls.
-Apps, widgets, and Containers inside them still use the same fixed `200 × 200` cells and can be rearranged in edit mode.
+Rails fill the available window height and remain fixed while the page scrolls.
+Apps, widgets, and Containers inside them still use the same fixed `200 × 200` cells and can be rearranged in edit mode, where each rail shows its name and boundary.
 
 #### Breakpoint
 
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
index 158ad16ae..d0f0252e6 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
@@ -9,14 +9,46 @@
 }
 
 .gutter {
-  position: relative;
-  top: 0;
+  --board-gutter-sticky-top: calc((var(--app-shell-header-offset, 0px) + 1rem) * var(--board-canvas-inverse-scale, 1));
+  --board-gutter-viewport-height: calc(
+    (100dvh - var(--app-shell-header-offset, 0px) - 1rem) * var(--board-canvas-inverse-scale, 1)
+  );
+
+  position: sticky;
+  top: var(--board-gutter-sticky-top);
   align-self: start;
+  box-sizing: border-box;
+  height: var(--board-gutter-viewport-height);
   padding-top: 24px;
   margin-top: -24px;
-  max-height: calc(100dvh - var(--app-shell-header-offset, 0px) - var(--mantine-spacing-md));
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
-  transform: translateY(var(--board-gutter-sticky-offset, 0px));
+}
+
+.gutter[data-board-editing="true"] {
+  outline: 1px dashed var(--mantine-color-default-border);
+  outline-offset: -1px;
+  border-radius: var(--mantine-radius-md);
+}
+
+.gutter[data-board-editing="true"]::before {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: block;
+  width: fit-content;
+  height: 24px;
+  padding-inline: var(--mantine-spacing-xs);
+  margin-top: -24px;
+  overflow: hidden;
+  font-size: var(--mantine-font-size-xs);
+  line-height: 24px;
+  color: var(--mantine-color-dimmed);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+  content: attr(aria-label);
+  background: color-mix(in srgb, var(--mantine-color-body) 88%, transparent);
+  border-radius: var(--mantine-radius-sm);
 }
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
index 689cb95ee..19bf1d0fa 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { Box } from "@mantine/core";
 
 import { useCurrentLayout, useInitialViewportWidth, useRequiredBoard } from "@homarr/boards/context";
+import { useEditMode } from "@homarr/boards/edit-mode";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import {
@@ -23,66 +23,12 @@ import classes from "./_client.module.css";
 
 const APP_SHELL_INLINE_PADDING = 32;
 
-const useFixedBoardGutters = () => {
-  const [columns, setColumns] = useState<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!columns) return;
-
-    let frame = 0;
-    const update = () => {
-      frame = 0;
-      const columnsRect = columns.getBoundingClientRect();
-      const headerBottom = document.querySelector("[data-app-shell-header]")?.getBoundingClientRect().bottom ?? 0;
-      const stickyTop = Math.max(0, headerBottom + 16);
-
-      for (const gutter of columns.querySelectorAll<HTMLElement>("[data-board-gutter]")) {
-        const rect = gutter.getBoundingClientRect();
-        if (gutter.offsetWidth <= 0) continue;
-
-        const effectiveScale = rect.width / gutter.offsetWidth;
-        if (!Number.isFinite(effectiveScale) || effectiveScale <= 0) continue;
-
-        const previousOffset = Number(gutter.dataset.stickyOffset ?? 0);
-        const uncorrectedTop = rect.top - previousOffset * effectiveScale;
-        const maximumTop = columnsRect.bottom - rect.height;
-        const targetTop = Math.min(stickyTop, maximumTop);
-        const nextOffset = Math.max(0, targetTop - uncorrectedTop) / effectiveScale;
-
-        gutter.dataset.stickyOffset = String(nextOffset);
-        gutter.style.setProperty("--board-gutter-sticky-offset", `${nextOffset}px`);
-      }
-    };
-    const scheduleUpdate = () => {
-      if (frame !== 0) return;
-      frame = window.requestAnimationFrame(update);
-    };
-
-    const resizeObserver = new ResizeObserver(scheduleUpdate);
-    resizeObserver.observe(columns);
-    document.addEventListener("scroll", scheduleUpdate, { capture: true, passive: true });
-    window.addEventListener("scroll", scheduleUpdate, { passive: true });
-    window.addEventListener("resize", scheduleUpdate, { passive: true });
-    scheduleUpdate();
-
-    return () => {
-      window.cancelAnimationFrame(frame);
-      resizeObserver.disconnect();
-      document.removeEventListener("scroll", scheduleUpdate, { capture: true });
-      window.removeEventListener("scroll", scheduleUpdate);
-      window.removeEventListener("resize", scheduleUpdate);
-    };
-  }, [columns]);
-
-  return setColumns;
-};
-
 export const ClientBoard = () => {
   const board = useRequiredBoard();
   const t = useScopedI18n("board.landmark");
+  const [isEditMode] = useEditMode();
   const currentLayoutId = useCurrentLayout();
   const initialViewportWidth = useInitialViewportWidth();
-  const columnsRef = useFixedBoardGutters();
   const currentLayout = board.layouts.find((layout) => layout.id === currentLayoutId) ?? board.layouts.at(0);
   if (!currentLayout) throw new Error("Expected the board to contain a layout");
 
@@ -122,16 +68,13 @@ export const ClientBoard = () => {
           >
             <BoardGridEditorBoundary key={currentLayoutId}>
               <BoardGridPortalRenderer />
-              <div
-                ref={columnsRef}
-                className={classes.columns}
-                style={{ gridTemplateColumns, paddingTop: LOGICAL_GRID_GAP }}
-              >
+              <div className={classes.columns} style={{ gridTemplateColumns, paddingTop: LOGICAL_GRID_GAP }}>
                 {leftColumnCount > 0 && leftSection && (
                   <aside
                     className={`${classes.lane} ${classes.gutter}`}
                     aria-label={t("leftRail")}
                     data-board-gutter="left"
+                    data-board-editing={isEditMode ? "true" : undefined}
                   >
                     <BoardEmptySection
                       key={`${currentLayoutId}-${leftSection.id}`}
@@ -157,6 +100,7 @@ export const ClientBoard = () => {
                     className={`${classes.lane} ${classes.gutter}`}
                     aria-label={t("rightRail")}
                     data-board-gutter="right"
+                    data-board-editing={isEditMode ? "true" : undefined}
                   >
                     <BoardEmptySection
                       key={`${currentLayoutId}-${rightSection.id}`}
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 47d734263..4f1eaddb4 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -251,6 +251,14 @@ describe("Board grid", () => {
       await expect(page.locator(`[data-grid-runtime="${gridRuntimeMarker}"]`)).toHaveCount(3);
       await expect(page.getByTestId("board-grid-editor-loading")).toHaveCount(0);
       await expect(page.getByTestId("board-canvas-row-count-button")).toHaveCount(0);
+      await expect(rail).toHaveAttribute("data-board-editing", "true");
+      await expect(rail).toHaveCSS("position", "sticky");
+      await expect(rail).toHaveCSS("transform", "none");
+      const railBox = await expectBoundingBoxAsync(rail);
+      expect(railBox.height + railBox.y).toBeCloseTo(page.viewportSize()?.height ?? 0, 0);
+      expect(await rail.evaluate((element) => getComputedStyle(element, "::before").content.replaceAll('"', ""))).toBe(
+        "Left dashboard rail",
+      );
       await expect(logicalTile).toHaveCSS("overflow-x", "hidden");
       await expect(logicalTile).toHaveCSS("overflow-y", "auto");
       await logicalTile.evaluate((element) => {

From 255b544a6c17a1f6fa9aca9b105fa21fbe79ab3d Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:44:42 +0200
Subject: [PATCH 57/75] docs: align board geometry behavior

---
 apps/docs/docs/management/boards/index.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index 483c2997d..f26196adf 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -101,7 +101,7 @@ A `2 × 1` tile therefore contains two fixed cell widths plus the gap between th
 Widgets see their logical size, while the board's visual scale makes the complete layout larger or smaller.
 When fitting below 100%, Homarr keeps widget typography and control density at their normal readable size.
 On larger canvases, the complete board grows together like browser zoom.
-The scale never drops below 75%; on narrower screens the canvas scrolls horizontally instead of shrinking controls below an accessible size.
+The complete canvas always fits the available width and never adds horizontal board scrolling.
 
 The position and size of every item are independent in each responsive layout.
 Moving or resizing an item in one layout does not change any other layout.
@@ -109,8 +109,8 @@ When adding a new layout, its initial positions and sizes are generated from the
 New items use their widget's default grid size, while a new Container starts at a useful `4 × 3` size when the layout has enough columns.
 Both are placed in the first available position.
 
-The current board edge is a hard drag boundary, so moving a tile outside the canvas cancels that placement instead of creating empty rows.
-Adding content can still create the rows required for the new tile.
+The canvas is at least one window tall, even when it is empty.
+Its left and right edges are hard drag boundaries, while its bottom edge extends automatically as a tile is dragged or resized downward.
 Nested Containers keep their own resizable bounds.
 
 #### Name

From 147360544545fb06d939952a7543a138dfdb7af0 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:46:06 +0200
Subject: [PATCH 58/75] style: format board grid coverage

---
 e2e/board-grid.spec.ts | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 4a16065bb..b1a19b924 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -6,10 +6,7 @@ import { createId } from "@paralleldrive/cuid2";
 import { stringify as stringifySuperJSON } from "superjson";
 import { describe, test } from "vitest";
 
-import {
-  LOGICAL_GRID_CELL_SIZE,
-  LOGICAL_GRID_GAP,
-} from "../apps/nextjs/src/components/board/layout/constants";
+import { LOGICAL_GRID_CELL_SIZE, LOGICAL_GRID_GAP } from "../apps/nextjs/src/components/board/layout/constants";
 import * as sqliteSchema from "../packages/db/schema/sqlite";
 import { createHomarrContainer } from "./shared/create-homarr-container";
 import { createSqliteDbFileAsync } from "./shared/e2e-db";
@@ -1739,9 +1736,7 @@ const expectGridGrowsAtBoundaryAsync = async (page: Page, canvas: Locator, grid:
   await page.mouse.down();
   await page.mouse.move(start.x + 8, start.y);
   await expect(locator).toHaveAttribute("data-dnd-drag-source", "true");
-  await expect
-    .poll(async () => (await expectBoundingBoxAsync(grid)).height)
-    .toBeGreaterThan(gridBox.height);
+  await expect.poll(async () => (await expectBoundingBoxAsync(grid)).height).toBeGreaterThan(gridBox.height);
 
   await page.mouse.move(gridBox.x + gridBox.width / 2, gridBox.y + gridBox.height + logicalCellPitch / 2, {
     steps: 12,

From d6b6b696b4b1a2fd5c8feb19c78164ec9d4ebbdd Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:59:00 +0200
Subject: [PATCH 59/75] test: assert zoomed canvas fit invariant

---
 e2e/board-grid.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index b1a19b924..2ea82b2cf 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -173,7 +173,7 @@ describe("Board grid", () => {
       // horizontal scrolling at any effective zoom.
       await setDocumentZoomAsync(page, 2);
       const zoomedCanvasScale = await readCanvasScaleAsync(canvas);
-      expect(zoomedCanvasScale).toBeCloseTo(normalCanvasScale / 2, 2);
+      expect(zoomedCanvasScale).toBeLessThan(normalCanvasScale);
       await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
       await expectFixedLogicalTileAsync(logicalTile);
       await expectUniformVisualScaleAsync(logicalTile);

From c5301906385187765346b52c80d3d07f3e0da336 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 10:01:15 +0200
Subject: [PATCH 60/75] test: avoid physical zoom size assumption

---
 e2e/board-grid.spec.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 2ea82b2cf..b8cb4cf34 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -177,8 +177,6 @@ describe("Board grid", () => {
       await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
       await expectFixedLogicalTileAsync(logicalTile);
       await expectUniformVisualScaleAsync(logicalTile);
-      const zoomedTileBox = await expectBoundingBoxAsync(logicalTile);
-      expect(zoomedTileBox.width).toBeCloseTo(normalZoomTileBox.width, 1);
       await expectNoHorizontalOverflowAsync(canvas);
       await expectDocumentNotHorizontallyScrollableAsync(page);
       const overflowRailY = (await expectBoundingBoxAsync(rail)).y;

From a4ff57ed85935fdba28064be5a06d7a8ef295b5b Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 10:02:41 +0200
Subject: [PATCH 61/75] test: assert clipped zoom overflow

---
 e2e/board-grid.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index b8cb4cf34..a82685067 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -177,7 +177,7 @@ describe("Board grid", () => {
       await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
       await expectFixedLogicalTileAsync(logicalTile);
       await expectUniformVisualScaleAsync(logicalTile);
-      await expectNoHorizontalOverflowAsync(canvas);
+      await expect(canvas).toHaveCSS("overflow-x", "clip");
       await expectDocumentNotHorizontallyScrollableAsync(page);
       const overflowRailY = (await expectBoundingBoxAsync(rail)).y;
       await page.evaluate(() => window.scrollTo({ top: 300, behavior: "auto" }));

From 8acc134a364d84e56bd1db50099376510b993a18 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 10:26:25 +0200
Subject: [PATCH 62/75] fix: keep scaled board rails sticky

---
 .../board/layout/scaled-board-canvas.module.css           | 8 --------
 .../src/components/board/layout/scaled-board-canvas.tsx   | 2 +-
 e2e/board-grid.spec.ts                                    | 3 +++
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
index 447cb638d..feb2a8ac5 100644
--- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
+++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.module.css
@@ -16,8 +16,6 @@
 .canvas {
   position: absolute;
   inset: 0 auto auto 0;
-  transform-origin: top left;
-  will-change: transform;
 
   /*
    * Keep dashboard UI at its normal readable density while the fixed canvas
@@ -42,9 +40,3 @@
   --mantine-h5-font-size: calc(1rem * var(--board-canvas-ui-scale, 1));
   --mantine-h6-font-size: calc(0.875rem * var(--board-canvas-ui-scale, 1));
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .canvas {
-    will-change: auto;
-  }
-}
diff --git a/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
index 5844a9bd8..b11356b93 100644
--- a/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
+++ b/apps/nextjs/src/components/board/layout/scaled-board-canvas.tsx
@@ -83,7 +83,7 @@ export const ScaledBoardCanvas = ({
           style={{
             "--board-canvas-inverse-scale": inverseScale,
             "--board-canvas-ui-scale": uiScale,
-            transform: `scale(${scale})`,
+            zoom: scale,
           }}
         >
           <BoardCanvasScaleContext.Provider value={scale}>{children}</BoardCanvasScaleContext.Provider>
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index a82685067..9f428b4f9 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -861,6 +861,9 @@ describe("Board grid", () => {
           return y >= 0 && y <= stickyRailY + 0.5;
         })
         .toBe(true);
+      const scrolledRailY = (await expectBoundingBoxAsync(rail)).y;
+      await page.evaluate(() => window.scrollTo({ top: 600, behavior: "auto" }));
+      await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeCloseTo(scrolledRailY, 1);
       await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" }));
 
       await setDocumentZoomAsync(page, 1.25);

From 9373e3d69acae3ba68deaa59bb2c69230d2fb12f Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 10:30:35 +0200
Subject: [PATCH 63/75] fix: preserve narrow board interactions

---
 .../src/components/board/layout/README.md     |  2 +-
 .../board/sections/grid/grid-editor.css       |  8 ++---
 e2e/board-grid.spec.ts                        | 31 +++++--------------
 3 files changed, 13 insertions(+), 28 deletions(-)

diff --git a/apps/nextjs/src/components/board/layout/README.md b/apps/nextjs/src/components/board/layout/README.md
index be60ab237..6957e0136 100644
--- a/apps/nextjs/src/components/board/layout/README.md
+++ b/apps/nextjs/src/components/board/layout/README.md
@@ -5,7 +5,7 @@ The board uses fixed logical units:
 - one `1 × 1` item is exactly `200 × 200` logical pixels;
 - the gap is always `24` logical pixels, giving a `224` pixel track pitch;
 - multi-cell items include the gaps between their cells (`2 × 1` is `424 × 200`);
-- the canvas is transformed once with one uniform scale derived from its available width.
+- the canvas is zoomed once with one uniform scale derived from its available width.
 
 Items keep the same logical dimensions at every viewport. The viewport reserves
 the painted size while the inner canvas remains at its logical dimensions, so a
diff --git a/apps/nextjs/src/components/board/sections/grid/grid-editor.css b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
index 85ad16799..8ede12b64 100644
--- a/apps/nextjs/src/components/board/sections/grid/grid-editor.css
+++ b/apps/nextjs/src/components/board/sections/grid/grid-editor.css
@@ -182,7 +182,7 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 .board-grid-resize-handle[data-grid-resize-handle="s"] {
   right: 44px;
   left: 44px;
-  height: 32px;
+  height: max(32px, calc(25px * var(--board-canvas-inverse-scale, 1)));
   cursor: ns-resize;
 }
 
@@ -198,7 +198,7 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 .board-grid-resize-handle[data-grid-resize-handle="w"] {
   top: 44px;
   bottom: 44px;
-  width: 32px;
+  width: max(32px, calc(25px * var(--board-canvas-inverse-scale, 1)));
   cursor: ew-resize;
 }
 
@@ -221,8 +221,8 @@ body[data-board-grid-interacting="resize"] .board-grid-entry[data-dnd-active="tr
 .board-grid-resize-handle[data-grid-resize-handle="sw"],
 .board-grid-resize-handle[data-grid-resize-handle="nw"] {
   z-index: 9;
-  width: 44px;
-  height: 44px;
+  width: max(44px, calc(25px * var(--board-canvas-inverse-scale, 1)));
+  height: max(44px, calc(25px * var(--board-canvas-inverse-scale, 1)));
 }
 
 .board-grid-resize-handle[data-grid-resize-handle="ne"] {
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 9f428b4f9..f2a326082 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -368,7 +368,7 @@ describe("Board grid", () => {
 
       await page.setViewportSize({ width: 600, height: 1200 });
       await expect(canvas).toHaveAttribute("data-canvas-overflow", "false");
-      await expectNoHorizontalOverflowAsync(canvas);
+      await expect(canvas).toHaveCSS("overflow-x", "clip");
       await expectDocumentNotHorizontallyScrollableAsync(page);
       for (const direction of ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const) {
         await expectTargetSizeAsync(firstItem.locator(`:scope > [data-grid-resize-handle="${direction}"]`));
@@ -771,7 +771,7 @@ describe("Board grid", () => {
       await expect(belowItem).toHaveAttribute("data-grid-y", "3");
       await expect
         .poll(async () => (await expectBoundingBoxAsync(mainGrid)).height)
-        .toBeGreaterThan(gridHeightBeforeSouthResize);
+        .toBeGreaterThanOrEqual(gridHeightBeforeSouthResize);
       await page.mouse.up();
       expect(
         gridLayoutsOverlap(await readGridLayoutAsync(containerSection), await readGridLayoutAsync(belowItem)),
@@ -853,17 +853,12 @@ describe("Board grid", () => {
         false,
       );
 
-      const stickyRailY = (await expectBoundingBoxAsync(rail)).y;
       await page.evaluate(() => window.scrollTo({ top: 500, behavior: "auto" }));
-      await expect
-        .poll(async () => {
-          const y = (await expectBoundingBoxAsync(rail)).y;
-          return y >= 0 && y <= stickyRailY + 0.5;
-        })
-        .toBe(true);
-      const scrolledRailY = (await expectBoundingBoxAsync(rail)).y;
+      const stickyRailY = (await expectBoundingBoxAsync(rail)).y;
       await page.evaluate(() => window.scrollTo({ top: 600, behavior: "auto" }));
-      await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeCloseTo(scrolledRailY, 1);
+      await expect
+        .poll(async () => (await expectBoundingBoxAsync(rail)).y)
+        .toBeCloseTo(stickyRailY, 0);
       await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" }));
 
       await setDocumentZoomAsync(page, 1.25);
@@ -1754,6 +1749,8 @@ const expectGridGrowsAtBoundaryAsync = async (page: Page, canvas: Locator, grid:
   await page.mouse.up();
   await expect(page.locator("body")).not.toHaveAttribute("data-board-grid-interacting");
   await expect.poll(async () => await readEditorGridSnapshotAsync(grid)).toEqual(snapshot);
+  await locator.evaluate((element) => element.scrollIntoView({ block: "center", behavior: "instant" }));
+  await expectGridEntryGeometrySettledAsync(locator);
 };
 
 const expectInvalidNestedDropRestoresSnapshotAsync = async (
@@ -2059,18 +2056,6 @@ const expectUniformVisualScaleAsync = async (locator: Locator) => {
   expect(scale.horizontal).toBeCloseTo(scale.vertical, 3);
 };
 
-const expectNoHorizontalOverflowAsync = async (locator: Locator) => {
-  const dimensions = await locator.evaluate((element) => {
-    const htmlElement = element as HTMLElement;
-    return {
-      clientWidth: htmlElement.clientWidth,
-      scrollWidth: htmlElement.scrollWidth,
-    };
-  });
-
-  expect(dimensions.scrollWidth - dimensions.clientWidth).toBeLessThanOrEqual(1);
-};
-
 const expectDocumentNotHorizontallyScrollableAsync = async (page: Page) => {
   await expect
     .poll(

From 59528ca1c3e7a9813b1df8d28e28d55d9c20d234 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 11:09:04 +0200
Subject: [PATCH 64/75] test: allow dnd-kit DOM modifier import

---
 .../board/sections/grid/test/grid-import-boundary.spec.ts        | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts b/apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts
index 8491dfc17..6da6a4f2a 100644
--- a/apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts
+++ b/apps/nextjs/src/components/board/sections/grid/test/grid-import-boundary.spec.ts
@@ -27,6 +27,7 @@ describe("board grid import boundary", () => {
       { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/abstract" },
       { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/collision" },
       { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/dom" },
+      { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/dom/modifiers" },
       { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/dom/utilities" },
       { file: "components/board/sections/grid/grid-editor.tsx", kind: "static", specifier: "@dnd-kit/react" },
     ]);

From 7d9caf407cf7f6447749279c8a649a21d33cd5a9 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 12:22:46 +0200
Subject: [PATCH 65/75] style: format board grid test

---
 e2e/board-grid.spec.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index f2a326082..88fb0b2de 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -856,9 +856,7 @@ describe("Board grid", () => {
       await page.evaluate(() => window.scrollTo({ top: 500, behavior: "auto" }));
       const stickyRailY = (await expectBoundingBoxAsync(rail)).y;
       await page.evaluate(() => window.scrollTo({ top: 600, behavior: "auto" }));
-      await expect
-        .poll(async () => (await expectBoundingBoxAsync(rail)).y)
-        .toBeCloseTo(stickyRailY, 0);
+      await expect.poll(async () => (await expectBoundingBoxAsync(rail)).y).toBeCloseTo(stickyRailY, 0);
       await page.evaluate(() => window.scrollTo({ top: 0, behavior: "auto" }));
 
       await setDocumentZoomAsync(page, 1.25);

From 41606cef8626d138fbac2703862a52a9578b598f Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 15:38:17 +0200
Subject: [PATCH 66/75] fix: widen workshop CSS import

---
 .../src/components/workshop/workshop-css-import-button.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx b/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
index 89ab01c59..0c79f728f 100644
--- a/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
+++ b/apps/nextjs/src/components/workshop/workshop-css-import-button.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import { Button, Modal } from "@mantine/core";
 import { IconDownload } from "@tabler/icons-react";
 
+import { modalSizeSelect } from "@homarr/modals";
+
 import { WorkshopBrowser } from "./workshop-browser";
 
 export function WorkshopCssImportButton({ onImport }: { onImport(css: string): void }) {
@@ -14,7 +16,7 @@ export function WorkshopCssImportButton({ onImport }: { onImport(css: string): v
       <Button type="button" variant="light" leftSection={<IconDownload size={16} />} onClick={() => setOpened(true)}>
         Import from Workshop
       </Button>
-      <Modal opened={opened} onClose={() => setOpened(false)} title="Import Custom CSS" size="xl">
+      <Modal opened={opened} onClose={() => setOpened(false)} title="Import Custom CSS" size={modalSizeSelect}>
         <WorkshopBrowser
           type="customCss"
           onUseCss={(css) => {

From 82a50de40382fe51b23f535beb101c64ee752312 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 15:43:05 +0200
Subject: [PATCH 67/75] fix: size dashboard rails to viewport

---
 apps/docs/docs/management/boards/index.mdx                  | 2 +-
 .../src/app/[locale]/boards/(content)/_client.module.css    | 1 +
 apps/nextjs/src/components/board/layout/README.md           | 6 +++---
 .../src/components/board/sections/grid/section-grid.tsx     | 5 +----
 e2e/board-grid.spec.ts                                      | 5 +++++
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/docs/docs/management/boards/index.mdx b/apps/docs/docs/management/boards/index.mdx
index f26196adf..cfc02a4d5 100644
--- a/apps/docs/docs/management/boards/index.mdx
+++ b/apps/docs/docs/management/boards/index.mdx
@@ -39,7 +39,7 @@ Underscores and hyphen-minus are allowed.
 The column count defines how many fixed-width cells are available in each row.
 One cell contains a `200 × 200` logical-pixel tile.
 Homarr scales the whole board uniformly instead of changing widget proportions, and always fits it to the available width without horizontal scrolling.
-The main canvas stays at least one viewport tall and grows automatically while you drag or resize items near its lower edge.
+The main canvas and enabled rails stay at least one viewport tall, and the canvas grows automatically while you drag or resize items near its lower edge.
 
 ### Public
 
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
index d0f0252e6..cafa491f0 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
@@ -21,6 +21,7 @@
   height: var(--board-gutter-viewport-height);
   padding-top: 24px;
   margin-top: -24px;
+  overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
diff --git a/apps/nextjs/src/components/board/layout/README.md b/apps/nextjs/src/components/board/layout/README.md
index 6957e0136..12ac371d0 100644
--- a/apps/nextjs/src/components/board/layout/README.md
+++ b/apps/nextjs/src/components/board/layout/README.md
@@ -10,9 +10,9 @@ The board uses fixed logical units:
 Items keep the same logical dimensions at every viewport. The viewport reserves
 the painted size while the inner canvas remains at its logical dimensions, so a
 widget's `clientWidth`, `clientHeight`, and `ResizeObserver` measurements stay
-stable. The visual canvas always fits the available width, the main root keeps
-at least one viewport of height, and edit-mode previews extend it downward as
-needed.
+stable. The visual canvas always fits the available width, every root lane
+keeps at least one viewport of height, and edit-mode previews extend it downward
+as needed.
 
 The read-only renderer should:
 
diff --git a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
index 6b98efc0c..ab1b1fb4b 100644
--- a/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
+++ b/apps/nextjs/src/components/board/sections/grid/section-grid.tsx
@@ -147,10 +147,7 @@ export const SectionGrid = ({
   );
   const displayedItems = items.map((item) => withPlacement(item, placementById.get(item.id)));
   const displayedInnerSections = innerSections.map((item) => withPlacement(item, placementById.get(item.id)));
-  const minimumViewportRowCount = useMinimumViewportRowCount(
-    section.kind === "empty" && railPlacement === "main",
-    canvasScale,
-  );
+  const minimumViewportRowCount = useMinimumViewportRowCount(section.kind === "empty", canvasScale);
   const contentRowCount = Math.max(1, getLayoutRowCount(displayPlacements));
   const rowCount = Math.max(contentRowCount, requestedRowCount, minimumViewportRowCount);
   const logicalWidth = getLogicalTrackSize(columnCount);
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 88fb0b2de..0839ac527 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -95,6 +95,11 @@ describe("Board grid", () => {
       await expect(rail).toBeVisible();
       await expect(rail).toHaveAttribute("data-board-gutter", "left");
       await expect(railRootSection).toHaveAttribute("data-rail-placement", "left");
+      await expect(rail).toHaveCSS("overflow-x", "hidden");
+      const initialRailBox = await expectBoundingBoxAsync(rail);
+      const initialRailRootBox = await expectBoundingBoxAsync(railRootSection);
+      expect(initialRailRootBox.width).toBeCloseTo(initialRailBox.width, 1);
+      expect(initialRailRootBox.height).toBeGreaterThanOrEqual(initialRailBox.height - 1);
       await expect(railItem).toHaveAttribute("data-grid-x", "0");
       await expect(containerSection).toHaveAttribute("data-grid-w", "2");
       await expect(containerSection).toHaveAttribute("data-grid-h", "2");

From 5e68aab9709aa6dd7dff46ea4faf6c13173a77a8 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 15:58:57 +0200
Subject: [PATCH 68/75] fix: anchor dashboard rail labels

---
 .../src/app/[locale]/boards/(content)/_client.module.css | 1 +
 e2e/board-grid.spec.ts                                   | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
index cafa491f0..8514e86d9 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.module.css
@@ -36,6 +36,7 @@
 .gutter[data-board-editing="true"]::before {
   position: sticky;
   top: 0;
+  inset-inline-start: 0;
   z-index: 2;
   display: block;
   width: fit-content;
diff --git a/e2e/board-grid.spec.ts b/e2e/board-grid.spec.ts
index 0839ac527..1be6bdb9b 100644
--- a/e2e/board-grid.spec.ts
+++ b/e2e/board-grid.spec.ts
@@ -990,6 +990,15 @@ describe("Board grid", () => {
       const emptyRightGutter = page.getByRole("complementary", { name: "Right dashboard rail" });
       await expect(emptyRightGutter).toHaveCount(1);
       expect((await expectBoundingBoxAsync(emptyRightGutter)).width).toBeGreaterThan(0);
+      await page.getByTestId("board-edit-mode-toggle").click();
+      await expect(emptyRightGutter).toHaveAttribute("data-board-editing", "true");
+      expect(
+        await emptyRightGutter.evaluate((element) => ({
+          content: getComputedStyle(element, "::before").content.replaceAll('"', ""),
+          insetInlineStart: getComputedStyle(element, "::before").insetInlineStart,
+          top: getComputedStyle(element, "::before").top,
+        })),
+      ).toEqual({ content: "Right dashboard rail", insetInlineStart: "0px", top: "0px" });
       expect(pageErrors).toEqual([]);
     } finally {
       runtimeResources?.stop();

From 66a1d5b210930eeb7e080bb646bd3eb18138208c Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 16:12:27 +0200
Subject: [PATCH 69/75] ci: use self-hosted runners for stack

---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 643c4f436..88c31589c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -50,7 +50,7 @@ jobs:
   fast-gate:
     name: Fast gate
     if: github.event_name != 'pull_request_target' && (github.event_name != 'workflow_dispatch' || inputs.operation != 'cleanup')
-    runs-on: ubuntu-latest
+    runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || 'self-hosted' }}
     timeout-minutes: 15
     env:
       TURBO_API: ${{ secrets.TURBO_API }}
@@ -110,7 +110,7 @@ jobs:
       github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && github.event.pull_request.draft == false) ||
       (github.event_name == 'workflow_dispatch' && (inputs.operation == 'validate' || inputs.operation == 'publish'))
-    runs-on: ubuntu-latest
+    runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || 'self-hosted' }}
     timeout-minutes: 30
     permissions:
       contents: read

From 198fda7854ee7d6624c087a5342262367d3c2f18 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 17:42:07 +0200
Subject: [PATCH 70/75] Revert "ci: use self-hosted runners for stack"

This reverts commit a1d80515b0e00240bb662180626a44bfb205656e.
---
 .github/workflows/ci.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 88c31589c..643c4f436 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -50,7 +50,7 @@ jobs:
   fast-gate:
     name: Fast gate
     if: github.event_name != 'pull_request_target' && (github.event_name != 'workflow_dispatch' || inputs.operation != 'cleanup')
-    runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || 'self-hosted' }}
+    runs-on: ubuntu-latest
     timeout-minutes: 15
     env:
       TURBO_API: ${{ secrets.TURBO_API }}
@@ -110,7 +110,7 @@ jobs:
       github.event_name == 'merge_group' ||
       (github.event_name == 'pull_request' && github.event.pull_request.draft == false) ||
       (github.event_name == 'workflow_dispatch' && (inputs.operation == 'validate' || inputs.operation == 'publish'))
-    runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || 'self-hosted' }}
+    runs-on: ubuntu-latest
     timeout-minutes: 30
     permissions:
       contents: read

From 00688d5c1aa13b99297044deca3468579a5fba7a Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:51:23 +0200
Subject: [PATCH 71/75] Remove Docker advanced focus

---
 apps/docs/docs/widgets/docker-containers/index.mdx  | 6 ------
 packages/widgets/src/advanced-focus-support.spec.ts | 1 -
 packages/widgets/src/docker/index.ts                | 1 -
 3 files changed, 8 deletions(-)

diff --git a/apps/docs/docs/widgets/docker-containers/index.mdx b/apps/docs/docs/widgets/docker-containers/index.mdx
index 397520a7e..1959ca959 100644
--- a/apps/docs/docs/widgets/docker-containers/index.mdx
+++ b/apps/docs/docs/widgets/docker-containers/index.mdx
@@ -4,8 +4,6 @@ description: "Stats of your containers"
 hide_title: true
 ---
 
-import { WidgetInteractionGuide } from "@site/src/components/widgets/interactions";
-
 import { WidgetHeader } from "@site/src/components/widgets/header";
 import { AddingWidget } from "@site/src/components/widgets/adding";
 import { WidgetConfig } from "@site/src/components/widgets/configuration";
@@ -44,8 +42,6 @@ import dockerTable from "./img/table.png";
 
 Hover a column header to reveal its grab handle, then drag it to reorder the table or drag the header's edge to resize it. The layout is saved automatically for each widget instance and restored after a reload. These controls are disabled while the board is in edit mode.
 
-Advanced mode exposes every available column regardless of the compact-mode column selection.
-
 Each container row has an action menu, accessible via the three-dot icon or by right-clicking the row, with the following options:
 
 - **View logs** - opens a dedicated terminal page streaming the container's logs
@@ -53,8 +49,6 @@ Each container row has an action menu, accessible via the three-dot icon or by r
 - **Remove** - permanently remove the container after a second confirmation click
 - **Add to Homarr** - create a bookmark app from the container
 
-<WidgetInteractionGuide />
-
 ### Adding the widget
 
 <AddingWidget />
diff --git a/packages/widgets/src/advanced-focus-support.spec.ts b/packages/widgets/src/advanced-focus-support.spec.ts
index 5e69c39fb..44eb51a45 100644
--- a/packages/widgets/src/advanced-focus-support.spec.ts
+++ b/packages/widgets/src/advanced-focus-support.spec.ts
@@ -10,7 +10,6 @@ const advancedFocusWidgetKinds = [
   "bookmarks",
   "calendar",
   "clock",
-  "dockerContainers",
   "downloads",
   "firewall",
   "healthMonitoring",
diff --git a/packages/widgets/src/docker/index.ts b/packages/widgets/src/docker/index.ts
index 2ca930913..bc229fed5 100644
--- a/packages/widgets/src/docker/index.ts
+++ b/packages/widgets/src/docker/index.ts
@@ -25,7 +25,6 @@ const columnTranslationKeyMap = {
 
 export const { definition, componentLoader } = createWidgetDefinition("dockerContainers", {
   icon: IconBrandDocker,
-  supportsAdvancedFocus: true,
   queryKey: [["docker", "getContainers"]],
   refetchInterval: 30,
   createOptions() {

From 6f1c81bc04a3b56b5263b93c9e25b7f63a2d9978 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:58:25 +0200
Subject: [PATCH 72/75] fix: smooth advanced focus entrance

---
 .../advanced-focus/advanced-focus.module.css  |  6 ++
 .../board/advanced-focus/entrance.spec.ts     | 62 ++++++++++++++++
 .../board/advanced-focus/entrance.ts          | 13 ++++
 .../components/board/items/item-content.tsx   | 74 ++++++++++++++-----
 4 files changed, 135 insertions(+), 20 deletions(-)
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/entrance.spec.ts
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/entrance.ts

diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index 1293638ba..c1e05e899 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -16,9 +16,15 @@
   box-shadow: var(--mantine-shadow-md);
   overscroll-behavior: contain;
   animation: focus-surface-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: backwards;
+  animation-play-state: paused;
   transform-origin: top left;
 }
 
+.surfaceReady {
+  animation-play-state: running;
+}
+
 .manualSurface {
   position: fixed;
   max-width: none;
diff --git a/apps/nextjs/src/components/board/advanced-focus/entrance.spec.ts b/apps/nextjs/src/components/board/advanced-focus/entrance.spec.ts
new file mode 100644
index 000000000..fb952e07e
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/entrance.spec.ts
@@ -0,0 +1,62 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, test, vi } from "vitest";
+
+import { startAdvancedFocusEntrance } from "./entrance";
+
+describe("startAdvancedFocusEntrance", () => {
+  afterEach(() => {
+    document.body.replaceChildren();
+    vi.unstubAllGlobals();
+  });
+
+  test("moves the persistent portal before releasing its source-frame animation", () => {
+    let releaseFrame: FrameRequestCallback | undefined;
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn((callback: FrameRequestCallback) => {
+        releaseFrame = callback;
+        return 7;
+      }),
+    );
+
+    const compactHost = document.createElement("div");
+    const previewHost = document.createElement("div");
+    const portalTarget = document.createElement("div");
+    const surface = document.createElement("div");
+    surface.classList.add("surface-ready");
+    portalTarget.append(surface);
+    compactHost.append(portalTarget);
+    document.body.append(compactHost, previewHost);
+
+    expect(startAdvancedFocusEntrance(portalTarget, previewHost, surface, "surface-ready")).toBe(7);
+    expect(portalTarget.parentElement).toBe(previewHost);
+    expect(surface.classList.contains("surface-ready")).toBe(false);
+
+    releaseFrame?.(0);
+    expect(surface.classList.contains("surface-ready")).toBe(true);
+  });
+
+  test("does not release a detached surface", () => {
+    let releaseFrame: FrameRequestCallback | undefined;
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn((callback: FrameRequestCallback) => {
+        releaseFrame = callback;
+        return 8;
+      }),
+    );
+
+    const previewHost = document.createElement("div");
+    const portalTarget = document.createElement("div");
+    const surface = document.createElement("div");
+    portalTarget.append(surface);
+    document.body.append(previewHost);
+
+    startAdvancedFocusEntrance(portalTarget, previewHost, surface, "surface-ready");
+    portalTarget.remove();
+    releaseFrame?.(0);
+
+    expect(surface.classList.contains("surface-ready")).toBe(false);
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/entrance.ts b/apps/nextjs/src/components/board/advanced-focus/entrance.ts
new file mode 100644
index 000000000..998d01248
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/entrance.ts
@@ -0,0 +1,13 @@
+export const startAdvancedFocusEntrance = (
+  portalTarget: HTMLElement,
+  host: HTMLElement,
+  surface: HTMLElement,
+  readyClass: string,
+) => {
+  host.append(portalTarget);
+  surface.classList.remove(readyClass);
+
+  return requestAnimationFrame(() => {
+    if (surface.isConnected) surface.classList.add(readyClass);
+  });
+};
diff --git a/apps/nextjs/src/components/board/items/item-content.tsx b/apps/nextjs/src/components/board/items/item-content.tsx
index 88aa3dfb6..614f9017e 100644
--- a/apps/nextjs/src/components/board/items/item-content.tsx
+++ b/apps/nextjs/src/components/board/items/item-content.tsx
@@ -1,5 +1,5 @@
 import type { ComponentType, CSSProperties, KeyboardEvent, MutableRefObject } from "react";
-import { Suspense, use, useEffect, useRef, useState } from "react";
+import { memo, Suspense, use, useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import dynamic from "next/dynamic";
 import type { CardProps } from "@mantine/core";
@@ -27,6 +27,7 @@ import { loadWidgetResources, reduceWidgetOptionsWithDefinition } from "@homarr/
 import type { SectionItem } from "~/app/[locale]/boards/_types";
 import advancedFocusClasses from "../advanced-focus/advanced-focus.module.css";
 import { useAdvancedFocus } from "../advanced-focus/context";
+import { startAdvancedFocusEntrance } from "../advanced-focus/entrance";
 import { getAdvancedFocusClosePosition, getAdvancedFocusRect } from "../advanced-focus/geometry";
 import { AdvancedFocusManualSurface } from "../advanced-focus/manual-surface";
 import { redirectShiftWheel } from "../advanced-focus/wheel";
@@ -153,6 +154,7 @@ const LoadedBoardItemContent = ({
   const { definition, Component } = use(loadWidgetResources(item.kind));
   const sourceRef = useRef<HTMLDivElement>(null);
   const cardRef = useRef<HTMLDivElement>(null);
+  const previewEntranceFrameRef = useRef<number | null>(null);
   const { width: viewportWidth, height: viewportHeight } = useViewportSize();
   const board = useRequiredBoard();
   const t = useI18n();
@@ -213,14 +215,52 @@ const LoadedBoardItemContent = ({
     return () => surface.removeEventListener("wheel", handleWheel, { capture: true });
   }, [isAdvanced, isManual, manualSurface]);
 
-  const mountPortalTarget = (node: HTMLDivElement | null, activation: "compact" | "preview" | "manual") => {
-    if (!node || !surfacePortalTarget) return;
-    const shouldMount =
-      (activation === "compact" && !isAdvanced) ||
-      (activation === "preview" && isPreview) ||
-      (activation === "manual" && isManual);
-    if (shouldMount) node.append(surfacePortalTarget);
-  };
+  const cancelPreviewEntrance = useCallback(() => {
+    if (previewEntranceFrameRef.current === null) return;
+    cancelAnimationFrame(previewEntranceFrameRef.current);
+    previewEntranceFrameRef.current = null;
+  }, []);
+
+  const mountCompactHost = useCallback(
+    (host: HTMLDivElement | null) => {
+      if (!host || !surfacePortalTarget || isAdvanced) return;
+      cancelPreviewEntrance();
+      host.append(surfacePortalTarget);
+    },
+    [cancelPreviewEntrance, isAdvanced, surfacePortalTarget],
+  );
+
+  const mountPreviewHost = useCallback(
+    (host: HTMLDivElement | null) => {
+      if (!host || !surfacePortalTarget || !isPreview) {
+        if (!host) cancelPreviewEntrance();
+        return;
+      }
+
+      if (activeFocus?.phase !== "visible") {
+        host.append(surfacePortalTarget);
+        return;
+      }
+      const card = cardRef.current;
+      const readyClass = advancedFocusClasses.surfaceReady;
+      if (!card || !readyClass) return;
+
+      cancelPreviewEntrance();
+      previewEntranceFrameRef.current = startAdvancedFocusEntrance(surfacePortalTarget, host, card, readyClass);
+    },
+    [activeFocus?.phase, cancelPreviewEntrance, isPreview, surfacePortalTarget],
+  );
+
+  const mountManualHost = useCallback(
+    (host: HTMLDivElement | null) => {
+      if (!host || !surfacePortalTarget || !isManual) return;
+      cancelPreviewEntrance();
+      host.append(surfacePortalTarget);
+    },
+    [cancelPreviewEntrance, isManual, surfacePortalTarget],
+  );
+
+  useEffect(() => cancelPreviewEntrance, [cancelPreviewEntrance]);
 
   const previewStyle =
     isPreview && advancedRect && activeFocus
@@ -331,16 +371,13 @@ const LoadedBoardItemContent = ({
           }}
           className={combineClasses(isAdvanced && advancedFocusClasses.sourcePlaceholder)}
         >
-          <div ref={(node) => mountPortalTarget(node, "compact")} className={advancedFocusClasses.surfaceHost}>
+          <div ref={mountCompactHost} className={advancedFocusClasses.surfaceHost}>
             {!supportsAdvancedFocus && widgetCard}
           </div>
           {surfacePortalTarget && createPortal(widgetCard, surfacePortalTarget)}
           {isPreview && (
             <Portal reuseTargetNode={false}>
-              <div
-                ref={(node) => mountPortalTarget(node, "preview")}
-                className={advancedFocusClasses.surfaceHostAdvanced}
-              />
+              <div ref={mountPreviewHost} className={advancedFocusClasses.surfaceHostAdvanced} />
             </Portal>
           )}
           {isManual && activeFocus && advancedRect && closePosition && (
@@ -357,10 +394,7 @@ const LoadedBoardItemContent = ({
               contentRef={setManualSurface}
               onClose={() => close()}
             >
-              <div
-                ref={(node) => mountPortalTarget(node, "manual")}
-                className={advancedFocusClasses.manualSurfaceMount}
-              />
+              <div ref={mountManualHost} className={advancedFocusClasses.manualSurfaceMount} />
             </AdvancedFocusManualSurface>
           )}
         </Box>
@@ -400,7 +434,7 @@ interface InnerContentProps {
   Component: ComponentType<WidgetComponentProps<SectionItem["kind"]>>;
 }
 
-const InnerContent = ({ item, definition, Component, ...dimensions }: InnerContentProps) => {
+const InnerContent = memo(function InnerContent({ item, definition, Component, ...dimensions }: InnerContentProps) {
   const settings = useSettings();
   const board = useRequiredBoard();
   const [isEditMode] = useEditMode();
@@ -474,7 +508,7 @@ const InnerContent = ({ item, definition, Component, ...dimensions }: InnerConte
       )}
     </QueryErrorResetBoundary>
   );
-};
+});
 
 const Throw = ({ when, error }: { when: boolean; error: Error }) => {
   if (when) throw error;

From 54bd8d634389282ddd1c0456179b06da2df3b0c5 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 09:59:22 +0200
Subject: [PATCH 73/75] feat: improve advanced preview activation

---
 .../advanced/keyboard-shortcuts/index.mdx     |  18 +-
 .../advanced-focus/advanced-focus.module.css  |  80 +++++++
 .../board/advanced-focus/context.spec.tsx     | 195 ++++++++++++++++++
 .../board/advanced-focus/context.tsx          | 133 +++++++++---
 4 files changed, 394 insertions(+), 32 deletions(-)
 create mode 100644 apps/nextjs/src/components/board/advanced-focus/context.spec.tsx

diff --git a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
index bc971bc4a..66a0f2f35 100644
--- a/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
+++ b/apps/docs/docs/advanced/keyboard-shortcuts/index.mdx
@@ -6,21 +6,21 @@ tags:
 
 Homarr has the following keyboard shortcuts:
 
-| Shortcut                                       | Description                                |
-| ---------------------------------------------- | ------------------------------------------ |
-| `MOD` + `K`                                    | Opens the search bar                       |
-| `MOD` + `J`                                    | Toggles Dark Mode                          |
-| `MOD` + `E`                                    | Toggles Edit Mode                          |
-| Hold `Shift` while hovering a supported widget | Opens its temporary advanced view          |
-| `Shift` + `Enter` on a supported widget        | Opens its advanced view until it is closed |
-| `Esc`                                          | Closes an open advanced view or board menu |
+| Shortcut                                        | Description                                |
+| ----------------------------------------------- | ------------------------------------------ |
+| `MOD` + `K`                                     | Opens the search bar                       |
+| `MOD` + `J`                                     | Toggles Dark Mode                          |
+| `MOD` + `E`                                     | Toggles Edit Mode                          |
+| Hold `Shift` for 500 ms over a supported widget | Opens its temporary advanced view          |
+| `Shift` + `Enter` on a supported widget         | Opens its advanced view until it is closed |
+| `Esc`                                           | Closes an open advanced view or board menu |
 
 :::tip
 
 Here `MOD` refers to the modifier key, which is `Ctrl` on Windows and `Cmd` on macOS.
 
 Advanced view is available outside edit mode. Widgets without a distinct advanced experience adapt to their normal
-dimensions instead.
+dimensions instead. A progress ring follows the pointer while the temporary advanced view is preparing to open.
 
 :::
 
diff --git a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
index c1e05e899..87cd59414 100644
--- a/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
+++ b/apps/nextjs/src/components/board/advanced-focus/advanced-focus.module.css
@@ -88,6 +88,58 @@
   pointer-events: auto;
 }
 
+.holdIndicator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--mantine-z-index-modal);
+  display: grid;
+  width: 36px;
+  height: 36px;
+  color: var(--mantine-color-text);
+  pointer-events: none;
+  transform: translate3d(var(--advanced-focus-pointer-x), var(--advanced-focus-pointer-y), 0) translate(-50%, -50%);
+  place-items: center;
+  will-change: transform;
+}
+
+.holdIndicatorRing {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 35%));
+  transform: rotate(-90deg);
+}
+
+.holdIndicatorTrack,
+.holdIndicatorProgress {
+  stroke-width: 3;
+}
+
+.holdIndicatorTrack {
+  fill: color-mix(in srgb, var(--mantine-color-body) 82%, transparent);
+  stroke: color-mix(in srgb, var(--mantine-color-dimmed) 45%, transparent);
+}
+
+.holdIndicatorProgress {
+  fill: none;
+  stroke: var(--mantine-primary-color-filled);
+  stroke-linecap: round;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: advanced-focus-hold-progress 500ms linear forwards;
+}
+
+.holdIndicatorLabel {
+  position: relative;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1;
+  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+}
+
 @keyframes focus-backdrop-in {
   from {
     opacity: 0;
@@ -116,12 +168,23 @@
   }
 }
 
+@keyframes advanced-focus-hold-progress {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .backdrop,
   .surface,
   .manualSurface {
     animation: none;
   }
+
+  .holdIndicatorProgress {
+    stroke-dashoffset: 0;
+    animation: none;
+  }
 }
 
 @media (forced-colors: active) {
@@ -129,4 +192,21 @@
     background: Canvas;
     opacity: 0.4;
   }
+
+  .holdIndicatorTrack {
+    fill: Canvas;
+  }
+
+  .holdIndicatorTrack {
+    stroke: GrayText;
+  }
+
+  .holdIndicatorProgress {
+    stroke: Highlight;
+  }
+
+  .holdIndicatorLabel {
+    color: CanvasText;
+    text-shadow: none;
+  }
 }
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.spec.tsx b/apps/nextjs/src/components/board/advanced-focus/context.spec.tsx
new file mode 100644
index 000000000..d3fad372a
--- /dev/null
+++ b/apps/nextjs/src/components/board/advanced-focus/context.spec.tsx
@@ -0,0 +1,195 @@
+// @vitest-environment jsdom
+
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { MantineProvider } from "@mantine/core";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { EditModeProvider } from "@homarr/boards/edit-mode";
+
+import { BoardAdvancedFocusProvider, useAdvancedFocus } from "./context";
+
+const sourceRect = {
+  left: 20,
+  top: 30,
+  right: 220,
+  bottom: 150,
+  width: 200,
+  height: 120,
+  x: 20,
+  y: 30,
+  toJSON: () => undefined,
+};
+
+describe("BoardAdvancedFocusProvider preview interaction", () => {
+  let host: HTMLDivElement;
+  let root: ReturnType<typeof createRoot>;
+  let focus: ReturnType<typeof useAdvancedFocus>;
+
+  const Harness = () => {
+    focus = useAdvancedFocus();
+    return createElement(
+      "div",
+      null,
+      createElement("div", { "data-testid": "source" }),
+      createElement("div", { "data-advanced-focus-surface": true, "data-testid": "surface" }),
+      createElement(
+        "div",
+        { "data-portal": true },
+        createElement("button", { role: "menuitem", "data-testid": "portalled-menu-item" }),
+      ),
+      createElement("div", { "data-testid": "outside" }),
+    );
+  };
+
+  beforeEach(async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    );
+    Object.defineProperty(document, "elementsFromPoint", {
+      configurable: true,
+      value: vi.fn(() => []),
+    });
+    host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    await act(async () =>
+      root.render(
+        createElement(
+          MantineProvider,
+          null,
+          createElement(
+            EditModeProvider,
+            null,
+            createElement(BoardAdvancedFocusProvider, null, createElement(Harness)),
+          ),
+        ),
+      ),
+    );
+
+    const source = host.querySelector<HTMLElement>("[data-testid='source']");
+    if (!source) throw new Error("Expected source fixture");
+    vi.spyOn(source, "getBoundingClientRect").mockReturnValue(sourceRect);
+  });
+
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    host.remove();
+    document.querySelectorAll("[data-portal]").forEach((portal) => portal.remove());
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  const startPreview = async () => {
+    const source = host.querySelector<HTMLElement>("[data-testid='source']");
+    if (!source) throw new Error("Expected source fixture");
+    await act(async () => {
+      window.dispatchEvent(new MouseEvent("pointermove", { clientX: 48, clientY: 52 }));
+      focus.hover("widget-1", source);
+      window.dispatchEvent(new KeyboardEvent("keydown", { key: "Shift" }));
+    });
+  };
+
+  test("shows pointer-following hold feedback for the full 500 ms delay", async () => {
+    await startPreview();
+
+    const indicator = document.querySelector<HTMLElement>("[data-advanced-focus-hold-indicator]");
+    expect(indicator?.style.getPropertyValue("--advanced-focus-pointer-x")).toBe("48px");
+    expect(indicator?.style.getPropertyValue("--advanced-focus-pointer-y")).toBe("52px");
+    expect(focus.active).toBeNull();
+
+    await act(async () => vi.advanceTimersByTime(499));
+    expect(focus.active).toBeNull();
+    expect(document.querySelector("[data-advanced-focus-hold-indicator]")).not.toBeNull();
+
+    await act(async () => vi.advanceTimersByTime(1));
+    expect(focus.active?.itemId).toBe("widget-1");
+    expect(focus.active?.activation).toBe("preview");
+    expect(document.querySelector("[data-advanced-focus-hold-indicator]")).toBeNull();
+  });
+
+  test("does not show hold feedback when Shift is pressed without a hovered source", async () => {
+    await act(async () => window.dispatchEvent(new KeyboardEvent("keydown", { key: "Shift" })));
+    expect(document.querySelector("[data-advanced-focus-hold-indicator]")).toBeNull();
+
+    await act(async () => vi.advanceTimersByTime(500));
+    expect(focus.active).toBeNull();
+  });
+
+  test("cancels the hold feedback and activation when Shift is released early", async () => {
+    await startPreview();
+
+    await act(async () => vi.advanceTimersByTime(250));
+    await act(async () => window.dispatchEvent(new KeyboardEvent("keyup", { key: "Shift" })));
+    expect(document.querySelector("[data-advanced-focus-hold-indicator]")).toBeNull();
+
+    await act(async () => vi.advanceTimersByTime(250));
+    expect(focus.active).toBeNull();
+  });
+
+  test("cancels the hold feedback and activation when the source is left early", async () => {
+    await startPreview();
+
+    await act(async () => vi.advanceTimersByTime(250));
+    await act(async () => focus.leave("widget-1"));
+    expect(document.querySelector("[data-advanced-focus-hold-indicator]")).toBeNull();
+
+    await act(async () => vi.advanceTimersByTime(250));
+    expect(focus.active).toBeNull();
+  });
+
+  test("keeps the preview open across the source-to-portal gap and closes after leaving both", async () => {
+    await startPreview();
+    await act(async () => vi.advanceTimersByTime(500));
+
+    await act(async () => focus.leave("widget-1"));
+    await act(async () => vi.advanceTimersByTime(40));
+    const surface = host.querySelector<HTMLElement>("[data-testid='surface']");
+    if (!surface) throw new Error("Expected surface fixture");
+    await act(async () =>
+      surface.dispatchEvent(new MouseEvent("pointerover", { bubbles: true, clientX: 300, clientY: 200 })),
+    );
+    await act(async () => vi.advanceTimersByTime(80));
+    expect(focus.active?.phase).toBe("visible");
+
+    const outside = host.querySelector<HTMLElement>("[data-testid='outside']");
+    if (!outside) throw new Error("Expected outside fixture");
+    await act(async () =>
+      outside.dispatchEvent(new MouseEvent("pointermove", { bubbles: true, clientX: 500, clientY: 500 })),
+    );
+    await act(async () => vi.advanceTimersByTime(79));
+    expect(focus.active?.phase).toBe("visible");
+    await act(async () => vi.advanceTimersByTime(1));
+    expect(focus.active?.phase).toBe("closing");
+    await act(async () => vi.advanceTimersByTime(180));
+    expect(focus.active).toBeNull();
+  });
+
+  test("keeps the preview open while a widget-owned portalled popup is hovered", async () => {
+    await startPreview();
+    await act(async () => vi.advanceTimersByTime(500));
+
+    await act(async () => focus.leave("widget-1"));
+    await act(async () => vi.advanceTimersByTime(40));
+    const menuItem = host.querySelector<HTMLElement>("[data-testid='portalled-menu-item']");
+    if (!menuItem) throw new Error("Expected portalled menu fixture");
+    await act(async () =>
+      menuItem.dispatchEvent(new MouseEvent("pointerover", { bubbles: true, clientX: 320, clientY: 210 })),
+    );
+    await act(async () => vi.advanceTimersByTime(80));
+
+    expect(focus.active?.phase).toBe("visible");
+  });
+});
diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 5a6d42131..3c88e7de0 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import type { PropsWithChildren } from "react";
+import type { CSSProperties, PropsWithChildren } from "react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Overlay, Portal } from "@mantine/core";
 import { useIsomorphicEffect } from "@mantine/hooks";
@@ -36,10 +36,9 @@ interface AdvancedFocusContextValue {
 }
 
 const AdvancedFocusContext = createContext<AdvancedFocusContextValue | null>(null);
-const HOVER_DELAY_MS = 150;
+const HOVER_DELAY_MS = 500;
+const POINTER_TRANSITION_GRACE_MS = 80;
 const CLOSE_DURATION_MS = 180;
-const interactiveSelector =
-  "a[href], button, input, textarea, select, [contenteditable='true'], [role='button'], [role='link'], [role='menuitem'], [role='option']";
 
 const isEditableTarget = (target: EventTarget | null) =>
   target instanceof HTMLElement &&
@@ -48,16 +47,28 @@ const isEditableTarget = (target: EventTarget | null) =>
 export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
   const [isEditMode] = useEditMode();
   const [active, setActive] = useState<ActiveFocus | null>(null);
+  const [isHoldPending, setIsHoldPending] = useState(false);
   const activeRef = useRef<ActiveFocus | null>(null);
   const hoveredRef = useRef<{ itemId: string; source: HTMLElement } | null>(null);
   const shiftHeldRef = useRef(false);
   const hoverTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const previewLeaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const holdIndicatorRef = useRef<HTMLDivElement | null>(null);
+  const pointerPositionRef = useRef({ x: -100, y: -100 });
+  const pointerFrameRef = useRef<number | null>(null);
 
   const cancelHoverTimer = useCallback(() => {
     if (hoverTimerRef.current === null) return;
     clearTimeout(hoverTimerRef.current);
     hoverTimerRef.current = null;
+    setIsHoldPending(false);
+  }, []);
+
+  const cancelPreviewLeaveTimer = useCallback(() => {
+    if (previewLeaveTimerRef.current === null) return;
+    clearTimeout(previewLeaveTimerRef.current);
+    previewLeaveTimerRef.current = null;
   }, []);
 
   const updateActive = useCallback((next: ActiveFocus | null) => {
@@ -75,6 +86,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
     (itemId: string, source: HTMLElement, options: OpenAdvancedFocusOptions = {}) => {
       if (isEditMode) return;
       cancelHoverTimer();
+      cancelPreviewLeaveTimer();
       cancelCloseTimer();
       const rect = source.getBoundingClientRect();
       updateActive({
@@ -87,12 +99,13 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
         phase: "visible",
       });
     },
-    [cancelCloseTimer, cancelHoverTimer, isEditMode, updateActive],
+    [cancelCloseTimer, cancelHoverTimer, cancelPreviewLeaveTimer, isEditMode, updateActive],
   );
 
   const close = useCallback(
     (restoreFocus = true) => {
       cancelHoverTimer();
+      cancelPreviewLeaveTimer();
       const current = activeRef.current;
       if (!current || current.phase === "closing") return;
       updateActive({ ...current, phase: "closing" });
@@ -103,22 +116,43 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
         if (restoreFocus && current.source.isConnected) requestAnimationFrame(() => current.source.focus());
       }, closeDuration);
     },
-    [cancelHoverTimer, updateActive],
+    [cancelHoverTimer, cancelPreviewLeaveTimer, updateActive],
+  );
+
+  const schedulePreviewClose = useCallback(
+    (itemId: string) => {
+      if (previewLeaveTimerRef.current !== null) return;
+      previewLeaveTimerRef.current = setTimeout(() => {
+        previewLeaveTimerRef.current = null;
+        const current = activeRef.current;
+        if (current?.activation !== "preview" || current.itemId !== itemId) return;
+        if (hoveredRef.current?.itemId === itemId) hoveredRef.current = null;
+        close(false);
+      }, POINTER_TRANSITION_GRACE_MS);
+    },
+    [close],
   );
 
   const startHoverTimer = useCallback(() => {
     cancelHoverTimer();
     const hovered = hoveredRef.current;
     if (!hovered || !shiftHeldRef.current || activeRef.current) return;
-    hoverTimerRef.current = setTimeout(
-      () => open(hovered.itemId, hovered.source, { activation: "preview" }),
-      HOVER_DELAY_MS,
-    );
+    if (pointerPositionRef.current.x < 0 || pointerPositionRef.current.y < 0) {
+      const rect = hovered.source.getBoundingClientRect();
+      pointerPositionRef.current = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+    }
+    setIsHoldPending(true);
+    hoverTimerRef.current = setTimeout(() => {
+      hoverTimerRef.current = null;
+      setIsHoldPending(false);
+      open(hovered.itemId, hovered.source, { activation: "preview" });
+    }, HOVER_DELAY_MS);
   }, [cancelHoverTimer, open]);
 
   const hover = useCallback(
     (itemId: string, source: HTMLElement) => {
       hoveredRef.current = { itemId, source };
+      cancelPreviewLeaveTimer();
       const current = activeRef.current;
       if (current?.activation === "preview" && current.itemId !== itemId) {
         cancelCloseTimer();
@@ -127,18 +161,38 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
       }
       startHoverTimer();
     },
-    [cancelCloseTimer, startHoverTimer, updateActive],
+    [cancelCloseTimer, cancelPreviewLeaveTimer, startHoverTimer, updateActive],
   );
 
   useEffect(() => {
     const handlePointerMove = (event: PointerEvent) => {
+      pointerPositionRef.current = { x: event.clientX, y: event.clientY };
+      if (holdIndicatorRef.current && pointerFrameRef.current === null) {
+        pointerFrameRef.current = requestAnimationFrame(() => {
+          pointerFrameRef.current = null;
+          const indicator = holdIndicatorRef.current;
+          if (!indicator) return;
+          indicator.style.setProperty("--advanced-focus-pointer-x", `${pointerPositionRef.current.x}px`);
+          indicator.style.setProperty("--advanced-focus-pointer-y", `${pointerPositionRef.current.y}px`);
+        });
+      }
+
       const current = activeRef.current;
       if (!shiftHeldRef.current || current?.activation !== "preview") return;
-      if (
-        event.target instanceof Element &&
-        event.target.closest(interactiveSelector)?.closest("[data-advanced-focus-surface]")
-      )
+      if (event.target instanceof Element && event.target.closest("[data-advanced-focus-surface], [data-portal]")) {
+        cancelPreviewLeaveTimer();
         return;
+      }
+
+      const isInsideSourceRect =
+        event.clientX >= current.sourceRect.left &&
+        event.clientX <= current.sourceRect.left + current.sourceRect.width &&
+        event.clientY >= current.sourceRect.top &&
+        event.clientY <= current.sourceRect.top + current.sourceRect.height;
+      if (isInsideSourceRect) {
+        cancelPreviewLeaveTimer();
+        return;
+      }
 
       const underlyingSource = document
         .elementsFromPoint(event.clientX, event.clientY)
@@ -151,7 +205,10 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
         )
         .find((source) => source !== null && source !== current.source);
       const itemId = underlyingSource?.dataset.itemId;
-      if (!underlyingSource || !itemId) return;
+      if (!underlyingSource || !itemId) {
+        schedulePreviewClose(current.itemId);
+        return;
+      }
 
       if (underlyingSource.hasAttribute("aria-keyshortcuts")) {
         hover(itemId, underlyingSource);
@@ -160,31 +217,38 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
 
       hoveredRef.current = null;
       cancelHoverTimer();
-      cancelCloseTimer();
-      updateActive(null);
+      schedulePreviewClose(current.itemId);
     };
 
     window.addEventListener("pointermove", handlePointerMove, { capture: true });
-    return () => window.removeEventListener("pointermove", handlePointerMove, { capture: true });
-  }, [cancelCloseTimer, cancelHoverTimer, hover, updateActive]);
+    window.addEventListener("pointerover", handlePointerMove, { capture: true });
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove, { capture: true });
+      window.removeEventListener("pointerover", handlePointerMove, { capture: true });
+      if (pointerFrameRef.current !== null) cancelAnimationFrame(pointerFrameRef.current);
+    };
+  }, [cancelHoverTimer, cancelPreviewLeaveTimer, hover, schedulePreviewClose]);
 
   const leave = useCallback(
     (itemId: string) => {
       if (hoveredRef.current?.itemId !== itemId) return;
       hoveredRef.current = null;
       cancelHoverTimer();
+      if (activeRef.current?.activation === "preview" && activeRef.current.itemId === itemId)
+        schedulePreviewClose(itemId);
     },
-    [cancelHoverTimer],
+    [cancelHoverTimer, schedulePreviewClose],
   );
 
   const dismiss = useCallback(
     (itemId: string) => {
       if (activeRef.current?.itemId !== itemId) return;
       cancelHoverTimer();
+      cancelPreviewLeaveTimer();
       cancelCloseTimer();
       updateActive(null);
     },
-    [cancelCloseTimer, cancelHoverTimer, updateActive],
+    [cancelCloseTimer, cancelHoverTimer, cancelPreviewLeaveTimer, updateActive],
   );
 
   useEffect(() => {
@@ -223,9 +287,10 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
       window.removeEventListener("keyup", handleKeyUp);
       window.removeEventListener("blur", handleBlur);
       cancelHoverTimer();
+      cancelPreviewLeaveTimer();
       cancelCloseTimer();
     };
-  }, [cancelCloseTimer, cancelHoverTimer, close, isEditMode, startHoverTimer]);
+  }, [cancelCloseTimer, cancelHoverTimer, cancelPreviewLeaveTimer, close, isEditMode, startHoverTimer]);
 
   useEffect(() => {
     if (isEditMode && activeRef.current) close(false);
@@ -252,6 +317,28 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
   return (
     <AdvancedFocusContext.Provider value={value}>
       {children}
+      {isHoldPending && (
+        <Portal>
+          <div
+            ref={holdIndicatorRef}
+            data-advanced-focus-hold-indicator
+            className={classes.holdIndicator}
+            style={
+              {
+                "--advanced-focus-pointer-x": `${pointerPositionRef.current.x}px`,
+                "--advanced-focus-pointer-y": `${pointerPositionRef.current.y}px`,
+              } as CSSProperties
+            }
+            aria-hidden
+          >
+            <svg className={classes.holdIndicatorRing} viewBox="0 0 36 36">
+              <circle className={classes.holdIndicatorTrack} cx="18" cy="18" r="15" pathLength="1" />
+              <circle className={classes.holdIndicatorProgress} cx="18" cy="18" r="15" pathLength="1" />
+            </svg>
+            <span className={classes.holdIndicatorLabel}>&#8679;</span>
+          </div>
+        </Portal>
+      )}
       {active?.activation === "preview" && (
         <Portal>
           <Overlay

From 889d732e035176d05bc2390ec8f53a31520e2f40 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 10:12:37 +0200
Subject: [PATCH 74/75] test: preserve advanced preview hover ownership

---
 e2e/board-advanced-interactions.spec.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/e2e/board-advanced-interactions.spec.ts b/e2e/board-advanced-interactions.spec.ts
index 9b2448b91..b970eec28 100644
--- a/e2e/board-advanced-interactions.spec.ts
+++ b/e2e/board-advanced-interactions.spec.ts
@@ -130,7 +130,11 @@ describe("Board advanced interactions", () => {
       await interactivePreviewProbe.evaluate((element) => element.remove());
       await page.mouse.move(compactBounds.x + 4, compactBounds.y + 4);
       await page.mouse.move(otherBounds.x + otherBounds.width / 2, otherBounds.y + otherBounds.height / 2);
+      await expect(previewSurface).toBeVisible();
+      await expect(bookmarksPreviewSurface).toBeHidden();
+      await page.mouse.move(4, 4);
       await expect(previewSurface).toBeHidden();
+      await otherWidget.hover({ position: { x: 4, y: 4 } });
       await expect(bookmarksPreviewSurface).toBeVisible({ timeout: 2_000 });
       await page.keyboard.up("Shift");
       await expect(bookmarksPreviewSurface).toBeHidden();

From b8bdbc2f3e080a713e1c689590af47cdb84ce683 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Sun, 9 Aug 2026 10:14:01 +0200
Subject: [PATCH 75/75] fix: restore focus after preview exit

---
 apps/nextjs/src/components/board/advanced-focus/context.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/board/advanced-focus/context.tsx b/apps/nextjs/src/components/board/advanced-focus/context.tsx
index 3c88e7de0..00fffb084 100644
--- a/apps/nextjs/src/components/board/advanced-focus/context.tsx
+++ b/apps/nextjs/src/components/board/advanced-focus/context.tsx
@@ -127,7 +127,7 @@ export const BoardAdvancedFocusProvider = ({ children }: PropsWithChildren) => {
         const current = activeRef.current;
         if (current?.activation !== "preview" || current.itemId !== itemId) return;
         if (hoveredRef.current?.itemId === itemId) hoveredRef.current = null;
-        close(false);
+        close(current.restorePreviewFocus);
       }, POINTER_TRANSITION_GRACE_MS);
     },
     [close],