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] 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;