From 27fbabe7cfdb87a84fd6f065538c2c246edc3d7e Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Fri, 25 Sep 2026 15:53:56 +0300
Subject: [PATCH 1/2] AGH-177 design review UI fixes

---
 client_v2/AGENTS.md                           |  12 +
 client_v2/src/__locales/ar.json               |  14 +-
 client_v2/src/__locales/en.json               |  25 +-
 client_v2/src/__locales/hr.json               |  14 +-
 .../common/controls/Textarea.test.tsx         |  32 ++
 .../src/__tests__/common/ui/Banners.test.tsx  |  29 ++
 .../common/ui/ClientBlockMenuItem.test.tsx    |  44 +++
 .../__tests__/common/ui/ConfigDialog.test.tsx |  27 ++
 .../src/__tests__/common/ui/link.test.tsx     |  75 +++++
 .../common/ui/truncated-text.test.tsx         |  53 ++++
 .../components/Clients/service-icons.test.tsx | 107 +++++++
 .../Dashboard/stats-period.test.tsx           | 254 +++++++++++++++
 .../components/encryption-page.test.tsx       | 170 ++++++++++
 .../encryption-server-settings-modal.test.tsx | 217 +++++++++++--
 .../encryption-tls-cert-section.test.tsx      |  47 ++-
 .../__tests__/dashboard-show-more.test.tsx    | 150 +++++++--
 .../dashboard-stat-row-tooltips.test.tsx      | 160 ++++++++++
 .../dashboard-top-clients-actions.test.tsx    | 121 ++++++++
 .../src/__tests__/dns-config-store.test.ts    |  68 +++-
 .../src/__tests__/dynamic-leases-tab.test.tsx |   2 +-
 client_v2/src/__tests__/helpers/matchMedia.ts |  91 ++++++
 .../redirect-to-current-protocol.test.ts      |  56 ++++
 .../src/__tests__/helpers/statistics.test.ts  |  77 +++++
 .../__tests__/hooks/use-is-truncated.test.tsx |  74 +++++
 .../__tests__/hooks/use-media-query.test.tsx  | 118 +++++++
 .../__tests__/hooks/use-scroll-edges.test.tsx | 215 +++++++++++++
 .../__tests__/hooks/use-switch-state.test.tsx |  71 +++++
 .../src/__tests__/hooks/use-theme.test.tsx    |  61 ++++
 client_v2/src/__tests__/login-form.test.tsx   |  74 +++++
 .../__tests__/query-log-detail-modal.test.tsx |  94 ++++++
 client_v2/src/__tests__/select.test.tsx       |  40 +++
 client_v2/src/__tests__/setup.ts              |   6 +-
 .../src/__tests__/static-lease-modal.test.tsx |   9 +
 .../stats-pages/stat-mobile-card.test.tsx     |  58 ++++
 .../__tests__/stats-pages/stats-page.test.tsx |  79 ++++-
 client_v2/src/__tests__/stats-store.test.ts   |  68 +++-
 client_v2/src/__tests__/toasts-store.test.ts  |  22 ++
 client_v2/src/__tests__/tooltip.test.tsx      |  33 +-
 .../common/controls/Input/Input.module.pcss   |  45 ++-
 client_v2/src/common/controls/Input/Input.tsx |   2 +
 .../common/controls/Radio/Radio.module.pcss   |   6 +-
 .../src/common/controls/Select/Select.pcss    |  53 +++-
 .../src/common/controls/Select/Select.tsx     |   2 +
 client_v2/src/common/controls/Select/types.ts |   4 +
 .../common/controls/Switch/Switch.module.pcss |  24 +-
 .../src/common/controls/Textarea/Textarea.tsx |   3 +
 .../controls/Textarea/styles.module.pcss      |  32 +-
 client_v2/src/common/styles/colors/dark.css   |   1 +
 client_v2/src/common/styles/colors/light.css  |   1 +
 .../ui/AuthLayout/AuthLayout.module.pcss      |  51 +++
 .../src/common/ui/AuthLayout/AuthLayout.tsx   |  33 ++
 client_v2/src/common/ui/AuthLayout/index.ts   |   1 +
 client_v2/src/common/ui/Banners/Banners.tsx   |  11 +-
 .../src/common/ui/Breadcrumbs/Breadcrumbs.tsx |   6 +-
 .../src/common/ui/Button/Button.module.pcss   |  17 +
 client_v2/src/common/ui/Button/Button.tsx     |   3 +
 .../ClientBlockMenuItem.module.pcss           |  29 ++
 .../ClientBlockMenuItem.tsx                   |  37 +++
 .../src/common/ui/ClientBlockConfirm/index.ts |   1 +
 .../common/ui/ConfigDialog/ConfigDialog.tsx   |   5 +-
 .../common/ui/ConfirmDialog/ConfirmDialog.tsx |   1 +
 .../ui/CopiedText/CopiedText.module.pcss      |   6 +-
 .../ui/DangerLink/DangerLink.module.pcss      |  30 ++
 .../src/common/ui/DangerLink/DangerLink.tsx   |  26 ++
 client_v2/src/common/ui/DangerLink/index.ts   |   1 +
 client_v2/src/common/ui/Dialog/Dialog.pcss    |   2 +-
 .../common/ui/Dropdown/Dropdown.module.pcss   |   1 -
 .../common/ui/Dropzone/Dropzone.module.pcss   |   4 +-
 client_v2/src/common/ui/Guide/Guide.tsx       |  52 ++--
 client_v2/src/common/ui/Icon/Icon.module.pcss |   1 -
 client_v2/src/common/ui/Icons/Icons.tsx       |   3 +-
 client_v2/src/common/ui/Link/Link.tsx         |   7 +-
 .../ui/PublicHeader/PublicHeader.module.pcss  |  40 +++
 .../common/ui/PublicHeader/PublicHeader.tsx   |   9 +-
 .../ui/SettingRow/SettingRow.module.pcss      |  10 +-
 .../ui/SettingsGroup/styles.module.pcss       |   7 +-
 .../src/common/ui/Table/Table.module.pcss     |  28 +-
 client_v2/src/common/ui/Table/Table.tsx       |  84 +++--
 .../HeaderLabel/HeaderLabel.module.pcss       |   5 -
 .../Table/blocks/HeaderLabel/HeaderLabel.tsx  |  16 +-
 .../ui/Table/blocks/Pagination/Pagination.tsx |   2 +-
 client_v2/src/common/ui/Tooltip/Tooltip.tsx   |   4 +-
 .../TruncatedText/TruncatedText.module.pcss   |  13 +
 .../common/ui/TruncatedText/TruncatedText.tsx |  51 +++
 .../src/common/ui/TruncatedText/index.ts      |   1 +
 .../BlockedServices.module.pcss               |   4 +-
 .../InactivitySchedule/ScheduleModal.tsx      |   9 +
 .../PersistentClientsTable.module.pcss        |  10 +-
 .../PersistentClientsTable.tsx                |  13 +-
 .../PersistentClientsTable/ServiceIcons.tsx   |  18 +-
 .../RuntimeClientsTable.module.pcss           |  10 +-
 .../src/components/Dashboard/Dashboard.tsx    |  96 +++---
 .../GeneralStatistics/GeneralStatistics.tsx   |  18 +-
 .../Dashboard/blocks/Header/Header.tsx        |   2 +-
 .../blocks/RowTooltip/RowTooltip.module.pcss  |   9 +
 .../blocks/RowTooltip/RowTooltip.tsx          |  37 +++
 .../Dashboard/blocks/RowTooltip/index.ts      |   1 +
 .../Dashboard/blocks/StatCards/StatCards.tsx  |  15 +-
 .../blocks/StatRow/StatRow.module.pcss        |  25 +-
 .../Dashboard/blocks/StatRow/StatRow.tsx      |  72 +++--
 .../Dashboard/blocks/TableCard.module.pcss    |  56 ++--
 .../TopBlockedDomains/TopBlockedDomains.tsx   | 120 +++----
 .../blocks/TopClients/TopClients.module.pcss  | 122 ++++----
 .../blocks/TopClients/TopClients.tsx          | 293 +++++++++---------
 .../TopQueriedDomains/TopQueriedDomains.tsx   | 111 ++++---
 .../blocks/TopUpstreams/TopUpstreams.tsx      |  23 +-
 .../TrackerTooltip/TrackerTooltip.module.pcss |   9 +
 .../blocks/TrackerTooltip/TrackerTooltip.tsx  | 102 +++---
 .../UpstreamAvgTime/UpstreamAvgTime.tsx       |  23 +-
 .../Dashboard/hooks/useSortedData.ts          |   8 +-
 client_v2/src/components/Dhcp/Dhcp.tsx        |  38 +--
 .../Dhcp/LeasesPage/DynamicLeasesTab.tsx      |   2 +-
 .../Dhcp/LeasesPage/StaticLeaseModal.tsx      |   4 +
 .../Dhcp/LeasesPage/StaticLeasesTab.tsx       |   2 +-
 .../Dhcp/LeasesPage/StaticLeasesTable.tsx     |   9 +-
 .../Dhcp/blocks/DhcpV4Modal/DhcpV4Modal.tsx   |   5 +
 .../components/Dhcp/blocks/DhcpV6Modal.tsx    |   2 +
 .../Access/blocks/AllowedClientsDialog.tsx    |   1 +
 .../Access/blocks/DisallowedClientsDialog.tsx |   1 +
 .../Access/blocks/DisallowedDomainsDialog.tsx |   1 +
 .../components/DnsSettings/Cache/Cache.tsx    |  28 +-
 .../Cache/blocks/CacheInputDialog.tsx         |  20 +-
 .../PrivateReverse/PrivateReverse.tsx         |  57 +++-
 .../DnsSettings/ServerConfig/ServerConfig.tsx |  41 ++-
 .../blocks/BlockingModeDialog.tsx             |   3 +
 .../ServerConfig/blocks/EdnsDialog.tsx        |  29 +-
 .../blocks/RateLimitAllowlistDialog.tsx       |   1 +
 .../ServerConfig/blocks/RateLimitDialog.tsx   |   1 +
 .../blocks/SubnetPrefixV4Dialog.tsx           |   1 +
 .../blocks/SubnetPrefixV6Dialog.tsx           |   1 +
 .../DnsSettings/Upstream/Upstream.tsx         |  49 ++-
 .../Upstream/blocks/BootstrapDnsDialog.tsx    |   1 +
 .../Upstream/blocks/FallbackDnsDialog.tsx     |   1 +
 .../blocks/PrivateReverseServersDialog.tsx    |  26 +-
 .../Upstream/blocks/ServerAddressesDialog.tsx |   1 +
 .../Upstream/blocks/TimeoutDialog.tsx         |   1 +
 .../src/components/DnsSettings/helpers.ts     |  17 +
 .../src/components/Encryption/Encryption.tsx  |  92 ++----
 .../blocks/ServerSettingsFields.tsx           |   9 +
 .../Encryption/blocks/ServerSettingsModal.tsx |  32 +-
 .../blocks/SetupWizard/PemSourceFields.tsx    |   2 +
 .../blocks/SetupWizard/TlsSetupWizard.tsx     |   4 +-
 .../blocks/SetupWizard/mapStepResult.ts       |  65 ++--
 .../Encryption/blocks/TlsCertSection.tsx      |  16 +-
 .../components/Encryption/blocks/helpers.ts   |  32 ++
 .../Encryption/blocks/useServerNameCheck.ts   | 122 ++++++++
 .../ConfigureAllowlistModal.tsx               |   3 +
 .../ConfigureBlocklistModal.tsx               |   1 +
 .../ManualFilterForm/ManualFilterForm.tsx     |   2 +
 .../ConfigureRewritesModal.tsx                |   3 +
 .../FilterUpdateModal/FilterIntervalInput.tsx |   1 +
 .../FilterUpdateModal/FilterUpdateModal.tsx   |   1 +
 .../DetailModal/DetailModal.module.pcss       |  52 +++-
 .../blocks/DetailModal/DetailModal.tsx        |  14 +-
 .../QueryLog/blocks/Header/Header.tsx         |   2 +-
 .../blocks/LogCard/LogCard.module.pcss        |   2 -
 .../QueryLog/blocks/LogCard/LogCard.tsx       |  28 +-
 .../blocks/LogTable/LogTable.module.pcss      |  32 +-
 client_v2/src/components/Routes/Paths.ts      |   3 +
 .../IgnoredDomainsModal.tsx                   |   1 +
 .../Settings/RetentionCustomInput.tsx         |   1 +
 .../SafeSearchModal.module.pcss               |   9 +-
 .../components/Settings/Settings.module.pcss  |   8 +-
 .../SetupGuide/MobileConfigForm.module.pcss   |   7 +-
 .../SetupGuide/MobileConfigForm.tsx           |  10 +-
 .../components/Stats/StatsPage/StatsPage.tsx  |  20 +-
 .../TopBlockedDomainsPage.tsx                 |  11 +-
 .../TopClientsPage/TopClientsPage.module.pcss |  41 +--
 .../Stats/TopClientsPage/TopClientsPage.tsx   | 141 ++++-----
 .../TopQueriedDomainsPage.tsx                 |  11 +-
 .../CountWithPercent.module.pcss              |  11 -
 .../CountWithPercent/CountWithPercent.tsx     |  16 +-
 .../blocks/NameCell/NameCell.module.pcss      |  12 -
 .../Stats/blocks/NameCell/NameCell.tsx        |  38 +--
 .../StatMobileCard/StatMobileCard.module.pcss |  10 +-
 .../blocks/StatMobileCard/StatMobileCard.tsx  | 124 ++++----
 .../UserRules/blocks/CheckForm/CheckForm.tsx  |   3 +
 .../forgot_password/ForgotPassword/index.tsx  |  87 +++---
 .../ForgotPassword/styles.module.pcss         | 113 +------
 client_v2/src/helpers/breakpoints.ts          |  25 ++
 client_v2/src/helpers/helpers.tsx             |  10 +
 client_v2/src/helpers/statistics.ts           |  11 +-
 client_v2/src/helpers/useMediaQuery.ts        |  21 --
 client_v2/src/hooks/useIsMobile.ts            |  29 --
 client_v2/src/hooks/useIsTruncated.ts         |  44 ++-
 client_v2/src/hooks/useMediaQuery.ts          |  54 ++++
 client_v2/src/hooks/useScrollEdges.ts         |  66 ++++
 client_v2/src/hooks/useSwitchState.ts         |  36 +++
 client_v2/src/hooks/useTheme.ts               |  34 ++
 client_v2/src/index.pcss                      |   4 +
 .../install/Setup/blocks/Banner/DnsBanner.tsx |   2 +
 .../install/Setup/blocks/Banner/WebBanner.tsx |   2 +
 client_v2/src/lib/theme/Auth.module.pcss      |  64 ++++
 client_v2/src/lib/theme/Link.module.pcss      |   1 -
 .../src/lib/theme/Pagination.module.pcss      |   9 +-
 client_v2/src/lib/theme/Table.module.pcss     |  11 +-
 client_v2/src/lib/theme/index.ts              |   2 +
 client_v2/src/login/Login/Form.tsx            | 114 +++----
 client_v2/src/login/Login/Login.tsx           |  25 +-
 client_v2/src/login/Login/styles.module.pcss  | 125 --------
 client_v2/src/stores/dnsConfig.ts             |  70 +++--
 client_v2/src/stores/stats.ts                 |  18 +-
 client_v2/src/stores/toasts.ts                |  49 +--
 client_v2/tests/e2e/blocked-services.spec.ts  |  96 +++++-
 client_v2/tests/e2e/clients.spec.ts           | 118 ++++++-
 client_v2/tests/e2e/dns-rewrites.spec.ts      |   7 +-
 client_v2/tests/e2e/login.spec.ts             |   1 -
 client_v2/tests/e2e/query-log.spec.ts         | 102 ++----
 208 files changed, 5713 insertions(+), 1816 deletions(-)
 create mode 100644 client_v2/src/__tests__/common/ui/ClientBlockMenuItem.test.tsx
 create mode 100644 client_v2/src/__tests__/common/ui/link.test.tsx
 create mode 100644 client_v2/src/__tests__/common/ui/truncated-text.test.tsx
 create mode 100644 client_v2/src/__tests__/components/Clients/service-icons.test.tsx
 create mode 100644 client_v2/src/__tests__/components/Dashboard/stats-period.test.tsx
 create mode 100644 client_v2/src/__tests__/components/encryption-page.test.tsx
 create mode 100644 client_v2/src/__tests__/dashboard-stat-row-tooltips.test.tsx
 create mode 100644 client_v2/src/__tests__/dashboard-top-clients-actions.test.tsx
 create mode 100644 client_v2/src/__tests__/helpers/matchMedia.ts
 create mode 100644 client_v2/src/__tests__/helpers/redirect-to-current-protocol.test.ts
 create mode 100644 client_v2/src/__tests__/helpers/statistics.test.ts
 create mode 100644 client_v2/src/__tests__/hooks/use-media-query.test.tsx
 create mode 100644 client_v2/src/__tests__/hooks/use-scroll-edges.test.tsx
 create mode 100644 client_v2/src/__tests__/hooks/use-switch-state.test.tsx
 create mode 100644 client_v2/src/__tests__/hooks/use-theme.test.tsx
 create mode 100644 client_v2/src/__tests__/login-form.test.tsx
 create mode 100644 client_v2/src/__tests__/stats-pages/stat-mobile-card.test.tsx
 create mode 100644 client_v2/src/common/ui/AuthLayout/AuthLayout.module.pcss
 create mode 100644 client_v2/src/common/ui/AuthLayout/AuthLayout.tsx
 create mode 100644 client_v2/src/common/ui/AuthLayout/index.ts
 create mode 100644 client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.module.pcss
 create mode 100644 client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.tsx
 create mode 100644 client_v2/src/common/ui/DangerLink/DangerLink.module.pcss
 create mode 100644 client_v2/src/common/ui/DangerLink/DangerLink.tsx
 create mode 100644 client_v2/src/common/ui/DangerLink/index.ts
 create mode 100644 client_v2/src/common/ui/TruncatedText/TruncatedText.module.pcss
 create mode 100644 client_v2/src/common/ui/TruncatedText/TruncatedText.tsx
 create mode 100644 client_v2/src/common/ui/TruncatedText/index.ts
 create mode 100644 client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.module.pcss
 create mode 100644 client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.tsx
 create mode 100644 client_v2/src/components/Dashboard/blocks/RowTooltip/index.ts
 create mode 100644 client_v2/src/components/Encryption/blocks/useServerNameCheck.ts
 create mode 100644 client_v2/src/helpers/breakpoints.ts
 delete mode 100644 client_v2/src/helpers/useMediaQuery.ts
 delete mode 100644 client_v2/src/hooks/useIsMobile.ts
 create mode 100644 client_v2/src/hooks/useMediaQuery.ts
 create mode 100644 client_v2/src/hooks/useScrollEdges.ts
 create mode 100644 client_v2/src/hooks/useSwitchState.ts
 create mode 100644 client_v2/src/hooks/useTheme.ts
 create mode 100644 client_v2/src/lib/theme/Auth.module.pcss
 delete mode 100644 client_v2/src/login/Login/styles.module.pcss

diff --git a/client_v2/AGENTS.md b/client_v2/AGENTS.md
index d1e2caa4eb1..49b4b57d7e6 100644
--- a/client_v2/AGENTS.md
+++ b/client_v2/AGENTS.md
@@ -324,6 +324,10 @@ must not depend on stores or components. Helpers are pure and dependency-free.
 './Foo.module.pcss'` — and reference classes as `s.button`, `s[variant]`.
   Compose conditional classes with `clsx`, imported as `cn`:
   `import cn from 'clsx'` (e.g. `cn(s.button, s.primary, { [s.active]: on() })`).
+- **Hover styles**: Wrap `:hover` styling in `@media (hover: hover)` so touch
+  devices do not keep a stuck highlight after a tap. Gate `:hover` together
+  with `:focus` on row links, since a tap also focuses an `<a>` in Chrome;
+  leave `:focus-visible` outlines ungated for keyboard users.
 - **Colors**: Never hardcode color hex values in `.pcss` or inline styles.
   Always reference the CSS custom properties defined in
   `src/common/styles/vars.css` and `src/common/styles/colors/*.css`
@@ -346,6 +350,14 @@ must not depend on stores or components. Helpers are pure and dependency-free.
   a conditional class via `cn(...)`, not an inline `style`. Exception: a single
   computed pixel offset for a dragging/positioning edge case may be acceptable
   when no class-based solution exists — justify it in a comment.
+- **Comments**: Write comments only where they earn their place, and keep
+  them useful and compact — one or two lines explaining a non-obvious
+  *why*: a workaround, a browser quirk, or a cross-file constraint a
+  reader would otherwise break. Do not narrate what a rule or function
+  does, restate selector/property names, or spell out measurements,
+  arithmetic, and design history; that belongs with the value it
+  constrains or in the PR description. Applies to `.pcss`, `.tsx`, and
+  tests alike. Delete a comment once the code it describes changes.
 - **Reactivity**: Use `createSignal` for local state, `createMemo` for
   derived values, `createEffect` for side effects, `onMount` for initial data
   fetches, and `onCleanup` for teardown. Do not read signals imperatively
diff --git a/client_v2/src/__locales/ar.json b/client_v2/src/__locales/ar.json
index 4f5e0a1503f..aa79b8deffd 100644
--- a/client_v2/src/__locales/ar.json
+++ b/client_v2/src/__locales/ar.json
@@ -460,11 +460,11 @@
   "ip_address": "عنوان IP",
   "known_tracker": "متعقب معروف",
   "language": "اللغة",
-  "last_days": "| آخر 0 يوم | آخر يوم واحد | آخر يومين | آخر %count% أيام | آخر %count% يومًا | آخر %count% يوم",
-  "last_hours": "| آخر 0 ساعة | آخر ساعة واحدة | آخر ساعتين | آخر %count% ساعات | آخر %count% ساعة | آخر %count% ساعة",
+  "last_days": "| آخر يوم واحد | آخر يومين | آخر %count% أيام | آخر %count% يومًا | آخر %count% يوم",
+  "last_hours": "| آخر ساعة واحدة | آخر ساعتين | آخر %count% ساعات | آخر %count% ساعة | آخر %count% ساعة",
   "last_updated_label": "آخر تحديث",
   "light_theme": "المظهر فاتح",
-  "list_updated": "| لا توجد قوائم محدثة | تم تحديث قائمة واحدة | تم تحديث قائمتين | تم تحديث %count% قوائم | تم تحديث %count% قائمة | تم تحديث %count% قائمة",
+  "list_updated": "| تم تحديث قائمة واحدة | تم تحديث قائمتين | تم تحديث %count% قوائم | تم تحديث %count% قائمة | تم تحديث %count% قائمة",
   "login": "تسجيل الدخول",
   "logout": "تسجيل خروج",
   "make_static": "اجعلها ثابتة",
@@ -513,8 +513,8 @@
   "password_requirements_uppercase": "على الأقل 1 حرف كبير",
   "path_to_file_placeholder": "طريق الملف: عنوان محلي أو عنوان على الشبكة العنكبوتية",
   "pause_for_hour": "إيقاف مؤقت لمدة %count% ساعة",
-  "pause_for_minutes": "| إيقاف مؤقت لمدة 0 دقيقة | إيقاف مؤقت لمدة دقيقة واحدة | إيقاف مؤقت لمدة دقيقتين | إيقاف مؤقت لمدة %count% دقائق | إيقاف مؤقت لمدة %count% دقيقة | إيقاف مؤقت لمدة %count% دقيقة",
-  "pause_for_seconds": "| إيقاف مؤقت لمدة 0 ثانية | إيقاف مؤقت لمدة ثانية واحدة | إيقاف مؤقت لمدة ثانيتين | إيقاف مؤقت لمدة %count% ثوانٍ | إيقاف مؤقت لمدة %count% ثانية | إيقاف مؤقت لمدة %count% ثانية",
+  "pause_for_minutes": "| إيقاف مؤقت لمدة دقيقة واحدة | إيقاف مؤقت لمدة دقيقتين | إيقاف مؤقت لمدة %count% دقائق | إيقاف مؤقت لمدة %count% دقيقة | إيقاف مؤقت لمدة %count% دقيقة",
+  "pause_for_seconds": "| إيقاف مؤقت لمدة ثانية واحدة | إيقاف مؤقت لمدة ثانيتين | إيقاف مؤقت لمدة %count% ثوانٍ | إيقاف مؤقت لمدة %count% ثانية | إيقاف مؤقت لمدة %count% ثانية",
   "pause_until_tomorrow": "إيقاف مؤقت حتى الغد، %time%",
   "period_notify": "لتغيير المدة الزمنية المعروضة، قم بتحرير <i>الاحتفاظ بالاحصائيات</i> في <a>إعدادات الوضع العام</a>",
   "plain_dns": "عنوان DNS العادي",
@@ -635,14 +635,14 @@
   "settings_confirm_decrease_stats_rotation_interval": "تقليل فترة الاحتفاظ بالإحصائيات؟",
   "settings_confirm_decrease_stats_rotation_interval_desc": "سيؤدي هذا إلى حذف جميع الاحصائيات الأقدم من %value%",
   "settings_custom": "مخصص",
-  "settings_days": "| 0 يوم | يوم واحد | يومان | %count% أيام | %count% يومًا | %count% يوم",
+  "settings_days": "| يوم واحد | يومان | %count% أيام | %count% يومًا | %count% يوم",
   "settings_domain_names": "أسماء النطاقات، واحد في كل سطر",
   "settings_filter_requests": "تصفية الطلبات",
   "settings_filter_requests_desc": "يمكنك استخدام <a>Blocklists</a> و <b>Allowlists</b> و <c>قواعد المستخدم</c> لإعداد قواعد التصفية",
   "settings_filtering_and_security": "التصفية والأمان",
   "settings_general_short": "الوضع العام",
   "settings_global": "عالمي",
-  "settings_hours": "| 0 ساعة | ساعة واحدة | ساعتان | %count% ساعات | %count% ساعة | %count% ساعة",
+  "settings_hours": "| ساعة واحدة | ساعتان | %count% ساعات | %count% ساعة | %count% ساعة",
   "settings_log_rotation_hours": "تدوير السجل، بالساعات",
   "settings_notify_changes_saved": "تم حفظ التغييرات",
   "settings_notify_query_log_cleared": "تم مسح سجل الاستعلام",
diff --git a/client_v2/src/__locales/en.json b/client_v2/src/__locales/en.json
index bbaacddcb2f..de98913edd5 100644
--- a/client_v2/src/__locales/en.json
+++ b/client_v2/src/__locales/en.json
@@ -3,7 +3,6 @@
   "add_allowlist": "Add allowlist",
   "add_blocklist": "Add blocklist",
   "add_persistent_client": "Add as persistent client",
-  "add_to_allowlist": "Add to allowlist",
   "ads_blocked": "Blocked ads",
   "ads_blocked_card": "Blocked ads",
   "ads_blocked_tooltip": "The number of DNS queries blocked by adblock filters and hosts blocklist",
@@ -12,7 +11,6 @@
   "all_lists_up_to_date_toast": "All lists are already up-to-date",
   "all_rewrites_disabled": "All custom DNS responses will be disabled",
   "all_rewrites_enabled": "All custom DNS responses will be enabled",
-  "allow_service": "Allow service",
   "allowed": "Allowed",
   "allowlist_add": "Add allowlist",
   "allowlist_edit": "Edit allowlist",
@@ -137,7 +135,7 @@
   "dashboard": "Dashboard",
   "dashboard_statistics_disabled": "Statistics retention is disabled in General settings",
   "delete_btn": "Delete",
-  "delete_confirm": "Delete lease?",
+  "delete_confirm": "Remove lease?",
   "delete_confirm_desc": "This will free <b>%ip%</b>",
   "delete_table_action": "Delete",
   "delete_table_action_confirm": "Yes, delete",
@@ -271,6 +269,7 @@
   "dns_override_min_ttl_placeholder": "Time-to-live (TTL)",
   "dns_override_min_ttl_title": "Override minimum TTL",
   "dns_privacy": "DNS Privacy",
+  "dns_private_reverse_no_default_resolvers": "AdGuard Home could not determine suitable private reverse DNS resolvers for this system. Specify them to enable this setting.",
   "dns_private_reverse_resolve_clients_desc": "Resolves client IP addresses to their hostnames using PTR queries. Uses private DNS servers for local clients and upstream servers for clients with public IP addresses",
   "dns_private_reverse_resolve_clients_title": "Reverse lookup of client IP addresses",
   "dns_private_reverse_resolvers": "Private reverse DNS resolvers",
@@ -280,9 +279,8 @@
   "dns_private_reverse_servers_desc_2": "If this field is empty, your operating system's default DNS resolvers are used, except for AdGuard Home IP addresses. By default, AdGuard Home uses the following reverse DNS resolvers: %value_1% and %value_2%",
   "dns_private_reverse_servers_label": "Private reverse DNS servers, one per line",
   "dns_private_reverse_servers_placeholder": "IP addresses, sdns://, quic://, https://, h3://, or tls://",
+  "dns_private_reverse_servers_required": "Specify at least one private reverse DNS server or turn off private reverse DNS resolvers",
   "dns_private_reverse_servers_resolvers": "Default DNS resolvers: %value_1% and %value_2%",
-  "dns_private_reverse_servers_title": "Private reverse DNS servers",
-  "dns_protocols_title": "DNS protocols",
   "dns_queries": "DNS queries",
   "dns_queries_tooltip": "The number of DNS queries processed for the last 24 hours",
   "dns_query": "DNS queries",
@@ -299,7 +297,6 @@
   "dns_rate_limit_title": "Rate limit",
   "dns_rate_limit_value": "%value% req/s",
   "dns_rewrite_exists": "This DNS rewrite already exists",
-  "dns_rewrite_removed": "DNS rewrite removed",
   "dns_rewrite_same": "You can’t rewrite to the same domain or wildcard",
   "dns_rewrites": "DNS rewrites",
   "dns_rewrites_desc": "Lists your custom DNS responses for specific domain names",
@@ -372,8 +369,6 @@
   "encryption_server_tooltip": "The domain name of your server. It must match a DNS name in the certificate. If set, AdGuard Home will detect ClientIDs, respond to DDR queries, and perform additional connection validations",
   "encryption_subject": "Subject: %value%",
   "encryption_title": "Encryption",
-  "encryption_unable_read_cert": "Unable to read certificate file",
-  "encryption_unable_read_key": "Unable to read private key file",
   "error": "Error",
   "filter_added_successfully": "Added blocklist: <strong>%value%</strong>",
   "filter_added_successfully_allowlist": "Added allowlist: <strong>%value%</strong>",
@@ -404,7 +399,6 @@
   "form_error_answer_format": "Invalid result format",
   "form_error_client_id_format": "ClientID must contain only numbers, lowercase letters, and hyphens",
   "form_error_domain_format": "Invalid domain format",
-  "form_error_equal": "Must not be equal",
   "form_error_format": "Invalid format",
   "form_error_format_line": "Invalid format on line %line%",
   "form_error_format_lines": "Invalid format on lines %lines%",
@@ -447,15 +441,14 @@
   "inactivity_schedule_edit": "Edit schedule",
   "inactivity_schedule_no_schedules": "No schedule",
   "inactivity_schedule_replace_desc": "This schedule will replace any existing schedules for the same day of the week. Each day can have only one inactivity period",
-  "inactivity_schedule_time_from": "Time from",
-  "inactivity_schedule_time_to": "Time to",
+  "inactivity_schedule_time_from": "Time from (HH:mm)",
+  "inactivity_schedule_time_to": "Time to (HH:mm)",
   "inactivity_schedule_timezone": "Timezone",
   "install_auth_confirm": "Confirm password",
   "install_auth_password": "Password",
   "install_auth_password_enter": "Enter password",
   "install_auth_username": "Username",
   "install_auth_username_enter": "Enter username",
-  "install_saved": "Saved successfully",
   "install_settings_all_interfaces": "All interfaces",
   "install_settings_port": "Port",
   "install_static_configure": "AdGuard Home has detected that the dynamic IP address %ip% is used. Do you want it to be set as your static address?",
@@ -519,7 +512,6 @@
   "password_requirements_match": "Passwords match",
   "password_requirements_special": "English letters, numbers, and special characters",
   "password_requirements_uppercase": "At least 1 uppercase letter",
-  "path_to_file_placeholder": "Path to file: local or Internet address",
   "pause_for_hour": "Pause for %count% hour",
   "pause_for_minutes": "| Pause for %count% minute | Pause for %count% minutes",
   "pause_for_seconds": "| Pause for %count% second | Pause for %count% seconds",
@@ -582,7 +574,7 @@
   "remove": "Remove",
   "remove_tag": "Remove %value%",
   "remove_tls_certificate": "Remove TLS certificate?",
-  "remove_tls_certificate_desc": "Clients using encrypted DNS won’t be able to connect until a new TLS certificate is added",
+  "remove_tls_certificate_desc": "Removing the certificate will disable HTTPS and reset TLS settings. If you are connected over HTTPS, your session will end and you will be redirected to http://%host%:%port%",
   "report_an_issue": "Report a problem",
   "request_table_header": "Request",
   "requests_table_header": "Requests",
@@ -621,6 +613,7 @@
   "safe_search_used_tooltip": "The number of DNS queries to search engines for which Safe Search was enforced",
   "saturday": "Saturday",
   "save": "Save",
+  "save_anyway": "Save anyway",
   "save_btn": "Save",
   "search_placeholder": "Search",
   "select_language": "Select language",
@@ -658,7 +651,7 @@
   "settings_notify_query_log_cleared": "Query log cleared",
   "settings_notify_statistics_cleared": "Statistics cleared",
   "settings_parental_control": "Parental control",
-  "settings_parental_control_desc": "Block websites with content inappropriate for children",
+  "settings_parental_control_desc": "Block websites with inappropriate content, such as pornography, violence, gore, and other disturbing material, using AdGuard’s continuously updated family filter database",
   "settings_rotation_placeholder": "Use numbers",
   "settings_rule_syntax": "Rule syntax",
   "settings_safe_search": "Safe search",
@@ -793,7 +786,7 @@
   "tls_setup_config_title": "Enable encrypted DNS",
   "tls_setup_enable_anyway": "Enable anyway",
   "tls_setup_error_cert_incomplete": "Certificate is incomplete. Paste the full text, including the BEGIN and END lines",
-  "tls_setup_error_duplicate_port": "Port %port% is used by multiple DNS protocols. It must be unique",
+  "tls_setup_error_duplicate_port": "Port %port% is used by more than one protocol. Choose a different port for each encrypted DNS protocol",
   "tls_setup_error_ed25519_key": "This key type is not supported by browsers. Use an RSA or ECDSA key instead",
   "tls_setup_error_enable_failed": "Unable to enable encrypted DNS. Check the settings and try again",
   "tls_setup_error_key_incomplete": "Private key is incomplete. Paste the full text, including the BEGIN and END lines",
diff --git a/client_v2/src/__locales/hr.json b/client_v2/src/__locales/hr.json
index 2f61c282675..6cba256b700 100644
--- a/client_v2/src/__locales/hr.json
+++ b/client_v2/src/__locales/hr.json
@@ -460,11 +460,11 @@
   "ip_address": "IP adresa",
   "known_tracker": "Poznati pratitelj",
   "language": "Jezik",
-  "last_days": "| Zadnji %count% dan | Zadnjih %count% dana",
-  "last_hours": "| Zadnjih %count% sat | Zadnjih %count% sati",
+  "last_days": "| Zadnji %count% dan | Zadnja %count% dana | Zadnjih %count% dana",
+  "last_hours": "| Zadnjih %count% sat | Zadnja %count% sata | Zadnjih %count% sati",
   "last_updated_label": "Zadnja izmjena",
   "light_theme": "Svijetla tema",
-  "list_updated": "| %count% popis ažuriran | %count% popisi ažurirani",
+  "list_updated": "| %count% popis ažuriran | %count% popisa ažurirana | %count% popisi ažurirani",
   "login": "PRIJAVA",
   "logout": "Odjava",
   "make_static": "Učini statičnim",
@@ -513,8 +513,8 @@
   "password_requirements_uppercase": "Najmanje jedno veliko slovo",
   "path_to_file_placeholder": "Put do datoteke: lokalna ili internetska adresa",
   "pause_for_hour": "Pauza na %count% sat",
-  "pause_for_minutes": "| Pauza od %count% minute | Pauza od %count% minuta",
-  "pause_for_seconds": "| Pauza %count% sekunde | Pauza na %count% sekunde",
+  "pause_for_minutes": "| Pauza od %count% minute | Pauza od %count% minute | Pauza od %count% minuta",
+  "pause_for_seconds": "| Pauza %count% sekunde | Pauza na %count% sekunde | Pauza na %count% sekunde",
   "pause_until_tomorrow": "Pauza do sutra, %time%",
   "period_notify": "Za promjenu prikazanih razdoblja uredite <i>Zadržavanje statistike</i> u <a>Općim postavkama</a>",
   "plain_dns": "Obični DNS",
@@ -635,14 +635,14 @@
   "settings_confirm_decrease_stats_rotation_interval": "Smanjiti interval zadržavanja statistika?",
   "settings_confirm_decrease_stats_rotation_interval_desc": "To će izbrisati sve statistike starije od %value%",
   "settings_custom": "Prilagođeno",
-  "settings_days": "| %count% dan | %count% dana",
+  "settings_days": "| %count% dan | %count% dana | %count% dana",
   "settings_domain_names": "Domene, po jedna po liniji",
   "settings_filter_requests": "Zahtjevi za filtriranje",
   "settings_filter_requests_desc": "Možete koristiti <a>Blocklists</a>, <b>Allowlists</b> i <c>Korisnička pravila</c> za postavljanje pravila filtriranja",
   "settings_filtering_and_security": "Filtriranje i sigurnost",
   "settings_general_short": "Općenito",
   "settings_global": "Globalno",
-  "settings_hours": "| %count% sat | %count% sati",
+  "settings_hours": "| %count% sat | %count% sata | %count% sati",
   "settings_log_rotation_hours": "Rotacija trupaca, u satima",
   "settings_notify_changes_saved": "Promjene su spremljene",
   "settings_notify_query_log_cleared": "Dnevnik upita očišćen",
diff --git a/client_v2/src/__tests__/common/controls/Textarea.test.tsx b/client_v2/src/__tests__/common/controls/Textarea.test.tsx
index 1aaa17ad70f..461001beb79 100644
--- a/client_v2/src/__tests__/common/controls/Textarea.test.tsx
+++ b/client_v2/src/__tests__/common/controls/Textarea.test.tsx
@@ -115,3 +115,35 @@ describe('Textarea — comment highlight', () => {
         expect(overlay?.parentElement).toBe(textarea?.parentElement);
     });
 });
+
+describe('Textarea — onCard', () => {
+    it('applies the onCard class to the field when set', () => {
+        const { container } = render(() => <Textarea value="text" onCard />);
+
+        expect(container.querySelector('textarea')?.className).toContain('onCard');
+    });
+
+    it('does not apply the onCard class by default', () => {
+        const { container } = render(() => <Textarea value="text" />);
+
+        expect(container.querySelector('textarea')?.className).not.toContain('onCard');
+    });
+
+    it('applies the onCard class to the scroll container in highlighting mode', () => {
+        const { container } = render(() => (
+            <Textarea
+                value="# comment"
+                highlightComments
+                commentPrefixes={COMMENT_LINE_TOKENS}
+                onCard
+            />
+        ));
+
+        // The visible surface in highlighting mode is the scroll container,
+        // not the transparent textarea layered on top of it.
+        const textarea = container.querySelector('textarea');
+        const scrollArea = textarea?.closest('[class*="scrollArea"]');
+        expect(scrollArea?.className).toContain('onCard');
+        expect(textarea?.className).not.toContain('onCard');
+    });
+});
diff --git a/client_v2/src/__tests__/common/ui/Banners.test.tsx b/client_v2/src/__tests__/common/ui/Banners.test.tsx
index aee11b29d82..477f36c1bf7 100644
--- a/client_v2/src/__tests__/common/ui/Banners.test.tsx
+++ b/client_v2/src/__tests__/common/ui/Banners.test.tsx
@@ -69,6 +69,9 @@ const resetStores = () => {
 describe('Banners', () => {
     beforeEach(() => {
         resetStores();
+        // The Update buttons navigate; start every test from the root route so
+        // a previous navigation cannot hide the banner.
+        window.location.hash = '';
     });
 
     // ── Priority logic cases ──
@@ -210,6 +213,32 @@ describe('Banners', () => {
         expect(screen.queryByTestId('banner-tls-expired')).not.toBeInTheDocument();
     });
 
+    // ── Update button deep-links into the TLS setup wizard ──
+
+    it('opens the TLS setup wizard from the expired banner', async () => {
+        const user = userEvent.setup();
+        mockEncryptionState.enabled = true;
+        mockEncryptionState.valid_cert = true;
+        mockEncryptionState.not_after = new Date(Date.now() - 86400000).toISOString(); // expired
+
+        renderBanners();
+        await user.click(screen.getByRole('button', { name: copyInDom('update_button') }));
+
+        expect(window.location.hash).toBe('#/encryption?tlsWizard=true');
+    });
+
+    it('opens the TLS setup wizard from the expiring banner', async () => {
+        const user = userEvent.setup();
+        mockEncryptionState.enabled = true;
+        mockEncryptionState.valid_cert = true;
+        mockEncryptionState.not_after = new Date(Date.now() + 15 * 86400000).toISOString(); // 15 days
+
+        renderBanners();
+        await user.click(screen.getByRole('button', { name: copyInDom('update_button') }));
+
+        expect(window.location.hash).toBe('#/encryption?tlsWizard=true');
+    });
+
     // ── forceBanner (dev test override) ──
 
     it('renders forced TLS expired banner regardless of store state', () => {
diff --git a/client_v2/src/__tests__/common/ui/ClientBlockMenuItem.test.tsx b/client_v2/src/__tests__/common/ui/ClientBlockMenuItem.test.tsx
new file mode 100644
index 00000000000..390c2da3613
--- /dev/null
+++ b/client_v2/src/__tests__/common/ui/ClientBlockMenuItem.test.tsx
@@ -0,0 +1,44 @@
+import { render, screen } from '@solidjs/testing-library';
+import { describe, it, expect, vi } from 'vitest';
+import userEvent from '@testing-library/user-event';
+
+import { ClientBlockMenuItem } from 'panel/common/ui/ClientBlockConfirm';
+import { copyInDom } from 'panel/__tests__/helpers/copy';
+
+describe('ClientBlockMenuItem', () => {
+    it('renders the block action as a button', async () => {
+        const onClick = vi.fn();
+        render(() => <ClientBlockMenuItem action="block" onClick={onClick} />);
+
+        const button = screen.getByRole('button', { name: copyInDom('block_client') });
+        expect(button.tagName).toBe('BUTTON');
+        expect(button.getAttribute('type')).toBe('button');
+
+        await userEvent.click(button);
+        expect(onClick).toHaveBeenCalledWith('block');
+    });
+
+    it('renders the unblock action as a button', async () => {
+        const onClick = vi.fn();
+        render(() => <ClientBlockMenuItem action="unblock" onClick={onClick} />);
+
+        const button = screen.getByRole('button', { name: copyInDom('unblock_client') });
+        expect(button.tagName).toBe('BUTTON');
+        expect(button.getAttribute('type')).toBe('button');
+
+        await userEvent.click(button);
+        expect(onClick).toHaveBeenCalledWith('unblock');
+    });
+
+    it('exposes the action through a test id', () => {
+        render(() => <ClientBlockMenuItem action="block" onClick={() => {}} />);
+        expect(screen.getByTestId('client-block-menu-item')).toBeInTheDocument();
+    });
+
+    it('merges the caller class onto the button', () => {
+        render(() => (
+            <ClientBlockMenuItem action="unblock" onClick={() => {}} class="custom-class" />
+        ));
+        expect(screen.getByRole('button').className).toContain('custom-class');
+    });
+});
diff --git a/client_v2/src/__tests__/common/ui/ConfigDialog.test.tsx b/client_v2/src/__tests__/common/ui/ConfigDialog.test.tsx
index d616049d2e0..9fa6ec06df1 100644
--- a/client_v2/src/__tests__/common/ui/ConfigDialog.test.tsx
+++ b/client_v2/src/__tests__/common/ui/ConfigDialog.test.tsx
@@ -116,4 +116,31 @@ describe('ConfigDialog', () => {
         const fieldset = screen.getByTestId('test-input').closest('fieldset');
         expect(fieldset).toBeDisabled();
     });
+
+    it('keeps the primary submit style by default', () => {
+        render(() => (
+            <ConfigDialog open={true} title="Test" onClose={vi.fn()} onSubmit={vi.fn()}>
+                <div>Content</div>
+            </ConfigDialog>
+        ));
+        expect(screen.getByTestId('config-dialog-save').className).toContain('primary');
+    });
+
+    it('styles the submit button as a warning when asked', () => {
+        render(() => (
+            <ConfigDialog
+                open={true}
+                title="Test"
+                onClose={vi.fn()}
+                onSubmit={vi.fn()}
+                buttonText="save_anyway"
+                buttonVariant="warning"
+            >
+                <div>Content</div>
+            </ConfigDialog>
+        ));
+        const saveButton = screen.getByTestId('config-dialog-save');
+        expect(saveButton.className).toContain('warning');
+        expect(saveButton).toHaveTextContent('save_anyway');
+    });
 });
diff --git a/client_v2/src/__tests__/common/ui/link.test.tsx b/client_v2/src/__tests__/common/ui/link.test.tsx
new file mode 100644
index 00000000000..4837bde5e9d
--- /dev/null
+++ b/client_v2/src/__tests__/common/ui/link.test.tsx
@@ -0,0 +1,75 @@
+import { render, screen, fireEvent } from '@solidjs/testing-library';
+import { MemoryRouter, Route, createMemoryHistory } from '@solidjs/router';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+
+import { Link } from 'panel/common/ui/Link';
+import { RoutePath } from 'panel/components/Routes/Paths';
+
+import type { QueryParams } from 'panel/components/Routes/Paths';
+
+/**
+ * A memory router keeps each case on its own history: following a link in one
+ * test would otherwise leave the next one on a route it does not declare.
+ */
+const renderRow = (children?: unknown, query?: QueryParams) => {
+    const history = createMemoryHistory();
+    history.set({ value: '/' });
+
+    return render(() => (
+        <MemoryRouter history={history}>
+            <Route
+                path="/"
+                component={() => (
+                    <Link to={RoutePath.QueryLog} query={query} data-testid="row">
+                        {(children ?? 'row content') as never}
+                    </Link>
+                )}
+            />
+        </MemoryRouter>
+    ));
+};
+
+describe('Link scroll-to-top', () => {
+    let scrollTo: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+        vi.useFakeTimers();
+        scrollTo = vi.spyOn(window, 'scrollTo').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        scrollTo.mockRestore();
+        vi.useRealTimers();
+    });
+
+    it('scrolls to the top after following the link', () => {
+        renderRow();
+        fireEvent.click(screen.getByTestId('row'));
+
+        vi.advanceTimersByTime(150);
+
+        expect(scrollTo).toHaveBeenCalledWith({ top: 0 });
+    });
+
+    it('does not scroll when a nested control cancels the navigation', () => {
+        renderRow(
+            <button type="button" onClick={(e) => e.preventDefault()}>
+                Row action
+            </button>,
+        );
+        fireEvent.click(screen.getByRole('button'));
+
+        vi.advanceTimersByTime(150);
+
+        expect(scrollTo).not.toHaveBeenCalled();
+    });
+
+    it('does not scroll when the target section handles it', () => {
+        renderRow(undefined, { section: 'settings' });
+        fireEvent.click(screen.getByTestId('row'));
+
+        vi.advanceTimersByTime(150);
+
+        expect(scrollTo).not.toHaveBeenCalled();
+    });
+});
diff --git a/client_v2/src/__tests__/common/ui/truncated-text.test.tsx b/client_v2/src/__tests__/common/ui/truncated-text.test.tsx
new file mode 100644
index 00000000000..326c8a4a27b
--- /dev/null
+++ b/client_v2/src/__tests__/common/ui/truncated-text.test.tsx
@@ -0,0 +1,53 @@
+import { render, screen } from '@solidjs/testing-library';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+
+import { TruncatedText } from 'panel/common/ui/TruncatedText';
+import { mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
+
+/** jsdom reports every element as 0×0, so the measurement is stubbed. */
+const truncated = vi.hoisted(() => ({ value: false }));
+
+vi.mock('panel/hooks/useIsTruncated', () => ({
+    useIsTruncated: () => () => truncated.value,
+}));
+
+const LONG_TEXT = 'very-long-subdomain.tracking-vendor.example.com';
+
+describe('TruncatedText', () => {
+    beforeEach(() => {
+        truncated.value = false;
+        mockMatchMedia(false);
+    });
+
+    it('renders the text without a native title', () => {
+        const { container } = render(() => <TruncatedText text={LONG_TEXT} testId="cell" />);
+
+        expect(screen.getByTestId('cell')).toHaveTextContent(LONG_TEXT);
+        expect(container.querySelector('[title]')).toBeNull();
+    });
+
+    it('renders no tooltip while the text fits', () => {
+        const { container } = render(() => <TruncatedText text={LONG_TEXT} />);
+
+        expect(container.querySelector('[data-scope="tooltip"]')).toBeNull();
+    });
+
+    it('reveals the full text in a tooltip once it is clipped', () => {
+        truncated.value = true;
+
+        const { container } = render(() => <TruncatedText text={LONG_TEXT} />);
+
+        expect(container.querySelector('[data-part="content"]')).toHaveTextContent(LONG_TEXT);
+        expect(container.querySelector('[title]')).toBeNull();
+    });
+
+    it('renders no tooltip on touch devices', () => {
+        truncated.value = true;
+        mockMatchMedia((query) => query === '(hover: none)');
+
+        const { container } = render(() => <TruncatedText text={LONG_TEXT} />);
+
+        expect(screen.getByText(LONG_TEXT)).toBeInTheDocument();
+        expect(container.querySelector('[data-scope="tooltip"]')).toBeNull();
+    });
+});
diff --git a/client_v2/src/__tests__/components/Clients/service-icons.test.tsx b/client_v2/src/__tests__/components/Clients/service-icons.test.tsx
new file mode 100644
index 00000000000..c7b9cd9f541
--- /dev/null
+++ b/client_v2/src/__tests__/components/Clients/service-icons.test.tsx
@@ -0,0 +1,107 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@solidjs/testing-library';
+
+import {
+    ServiceIcons,
+    type WebService,
+} from 'panel/components/Clients/blocks/PersistentClientsTable/ServiceIcons';
+
+const SVG = '<svg xmlns="http://www.w3.org/2000/svg"><circle r="4" /></svg>';
+
+const makeServiceMap = (ids: string[]) =>
+    new Map<string, WebService>(
+        ids.map((id) => [
+            id,
+            { id, name: id, icon_svg: SVG, group_id: 'other', rules: [] as string[] },
+        ]),
+    );
+
+const renderStrip = (serviceIds: string[], maxVisible?: number) =>
+    render(() => (
+        <ServiceIcons
+            serviceIds={serviceIds}
+            serviceMap={makeServiceMap(serviceIds)}
+            maxVisible={maxVisible}
+        />
+    ));
+
+const renderedIcons = () => screen.queryAllByTestId('service-icon');
+
+const badgeCount = () => screen.queryByTestId('services-count')?.textContent ?? null;
+
+const manyServices = (count: number) => Array.from({ length: count }, (_, i) => `service-${i}`);
+
+describe('ServiceIcons', () => {
+    it('renders two inline icons and counts the remaining ones', () => {
+        renderStrip(manyServices(12));
+
+        expect(renderedIcons()).toHaveLength(2);
+        expect(badgeCount()).toBe('10');
+    });
+
+    it('keeps the icon count and the badge in sync with the total', () => {
+        // The invariant that broke the layout: the strip must never render more
+        // icons than it accounts for, otherwise the extra icon overflows the cell.
+        renderStrip(manyServices(12));
+
+        const visible = renderedIcons().length;
+        expect(visible + Number(badgeCount())).toBe(12);
+    });
+
+    it('collapses the third service into the count chip', () => {
+        // Regression guard: three inline icons need 102px but the narrowest
+        // `blocked_services` cell only provides 96px, so the last icon used to
+        // be clipped mid-glyph.
+        renderStrip(manyServices(3));
+
+        expect(renderedIcons()).toHaveLength(2);
+        expect(badgeCount()).toBe('1');
+    });
+
+    it('renders no count chip when every service fits', () => {
+        renderStrip(manyServices(2));
+
+        expect(renderedIcons()).toHaveLength(2);
+        expect(badgeCount()).toBeNull();
+    });
+
+    it('renders a single icon without a count chip', () => {
+        renderStrip(manyServices(1));
+
+        expect(renderedIcons()).toHaveLength(1);
+        expect(badgeCount()).toBeNull();
+    });
+
+    it('renders no icons when there are no blocked services', () => {
+        renderStrip([]);
+
+        expect(renderedIcons()).toHaveLength(0);
+        expect(badgeCount()).toBeNull();
+    });
+
+    it('does not render icons for ids missing from the service map', () => {
+        render(() => (
+            <ServiceIcons
+                serviceIds={['known', 'unknown']}
+                serviceMap={makeServiceMap(['known'])}
+            />
+        ));
+
+        expect(renderedIcons()).toHaveLength(1);
+        expect(badgeCount()).toBeNull();
+    });
+
+    it('respects an explicit maxVisible override', () => {
+        renderStrip(manyServices(12), 1);
+
+        expect(renderedIcons()).toHaveLength(1);
+        expect(badgeCount()).toBe('11');
+    });
+
+    it('does not truncate the icons when the override exceeds the default', () => {
+        renderStrip(manyServices(12), 5);
+
+        expect(renderedIcons()).toHaveLength(5);
+        expect(badgeCount()).toBe('7');
+    });
+});
diff --git a/client_v2/src/__tests__/components/Dashboard/stats-period.test.tsx b/client_v2/src/__tests__/components/Dashboard/stats-period.test.tsx
new file mode 100644
index 00000000000..8d317a6fdf8
--- /dev/null
+++ b/client_v2/src/__tests__/components/Dashboard/stats-period.test.tsx
@@ -0,0 +1,254 @@
+import { For } from 'solid-js';
+import { render, screen, fireEvent } from '@solidjs/testing-library';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+import { DAY } from 'panel/helpers/constants';
+import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from 'panel/helpers/localStorageHelper';
+
+type StatsStateMock = {
+    processingGetConfig: boolean;
+    processingStats: boolean;
+    configLoaded: boolean;
+    configAttempted: boolean;
+    statsAttempted: boolean;
+    interval: number;
+    enabled: boolean;
+    numDnsQueries: number;
+    dnsQueries: number[];
+    topClients: { name: string; count: number }[];
+    topQueriedDomains: { name: string; count: number }[];
+};
+
+type HeaderPropsMock = {
+    selectedPeriod: number;
+    periodOptions: { value: number; label: string }[];
+    onPeriodChange: (period: number) => void;
+};
+
+const mocks = vi.hoisted(() => ({
+    getStats: vi.fn(),
+    getStatsConfig: vi.fn(),
+    statsState: undefined as StatsStateMock | undefined,
+}));
+
+vi.mock('panel/stores/stats', async () => {
+    const { createMutable } = await import('solid-js/store');
+
+    // A mutable store (not a plain object) so the Dashboard memos react when
+    // the config "arrives", exactly like the real store does.
+    const statsState = createMutable<StatsStateMock>({
+        processingGetConfig: false,
+        processingStats: true,
+        configLoaded: false,
+        configAttempted: false,
+        statsAttempted: false,
+        interval: DAY,
+        enabled: true,
+        numDnsQueries: 0,
+        dnsQueries: [],
+        topClients: [],
+        topQueriedDomains: [],
+    });
+    mocks.statsState = statsState;
+
+    return {
+        statsState,
+        getStats: mocks.getStats,
+        getStatsConfig: mocks.getStatsConfig,
+        enableStatistics: vi.fn(),
+    };
+});
+
+vi.mock('panel/stores/dashboard', () => ({
+    dashboardState: {
+        protectionEnabled: true,
+        processingProtection: false,
+        protectionDisabledDuration: null,
+    },
+    toggleProtection: vi.fn(),
+    getClients: vi.fn(),
+}));
+
+vi.mock('panel/stores/access', () => ({
+    accessState: { processing: false },
+    getAccessList: vi.fn(),
+}));
+
+// The Header is what puts the period into the dropdown, so the stub renders the
+// props the Dashboard passes instead of the real Select.
+vi.mock('panel/components/Dashboard/blocks/Header/Header', () => ({
+    Header: (props: HeaderPropsMock) => (
+        <div>
+            <span data-testid="selected-period">{props.selectedPeriod}</span>
+            <For each={props.periodOptions}>
+                {(option) => (
+                    <button
+                        type="button"
+                        data-testid="period-option"
+                        data-period={option.value}
+                        onClick={() => props.onPeriodChange(option.value)}
+                    >
+                        {option.label}
+                    </button>
+                )}
+            </For>
+        </div>
+    ),
+    getPeriodLabel: (interval: number) => `period:${interval}`,
+}));
+
+vi.mock('panel/components/Dashboard/blocks/StatCards', () => ({ StatCards: (): null => null }));
+vi.mock('panel/components/Dashboard/blocks/EmptyState/EmptyState', () => ({
+    EmptyState: (): null => null,
+}));
+vi.mock('panel/components/Dashboard/blocks/GeneralStatistics', () => ({
+    GeneralStatistics: (): null => null,
+}));
+vi.mock('panel/components/Dashboard/blocks/TopClients', () => ({ TopClients: (): null => null }));
+vi.mock('panel/components/Dashboard/blocks/TopQueriedDomains', () => ({
+    TopQueriedDomains: (): null => null,
+}));
+vi.mock('panel/components/Dashboard/blocks/TopBlockedDomains', () => ({
+    TopBlockedDomains: (): null => null,
+}));
+vi.mock('panel/components/Dashboard/blocks/TopUpstreams', () => ({
+    TopUpstreams: (): null => null,
+}));
+vi.mock('panel/components/Dashboard/blocks/UpstreamAvgTime', () => ({
+    UpstreamAvgTime: (): null => null,
+}));
+
+import { Dashboard } from 'panel/components/Dashboard/Dashboard';
+
+const renderDashboard = () => render(() => <Dashboard />);
+
+const selectedPeriodInHeader = () => Number(screen.getByTestId('selected-period').textContent);
+
+const periodOptionValues = () =>
+    screen
+        .queryAllByTestId('period-option')
+        .map((option) => Number(option.getAttribute('data-period')));
+
+const clickPeriodOption = (period: number) => {
+    const option = screen
+        .queryAllByTestId('period-option')
+        .find((candidate) => candidate.getAttribute('data-period') === String(period));
+
+    expect(option).toBeDefined();
+    fireEvent.click(option as HTMLElement);
+};
+
+/** Resolves the config request the way a successful `getStatsConfig` does. */
+const resolveConfigWith = (interval: number) => {
+    mocks.getStatsConfig.mockImplementation(async () => {
+        const statsState = mocks.statsState as StatsStateMock;
+        statsState.interval = interval;
+        statsState.configLoaded = true;
+        statsState.configAttempted = true;
+    });
+};
+
+/** Resolves the config request the way a failed `getStatsConfig` does. */
+const failConfig = () => {
+    mocks.getStatsConfig.mockImplementation(async () => {
+        (mocks.statsState as StatsStateMock).configAttempted = true;
+    });
+};
+
+describe('Dashboard stats period', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        localStorage.clear();
+
+        const statsState = mocks.statsState as StatsStateMock;
+        statsState.processingGetConfig = false;
+        statsState.processingStats = true;
+        statsState.configLoaded = false;
+        statsState.configAttempted = false;
+        statsState.statsAttempted = false;
+        statsState.interval = DAY;
+    });
+
+    it('fetches the stored period once, after the stats config resolves', async () => {
+        LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.STATS_PERIOD, DAY * 30);
+        resolveConfigWith(DAY * 30);
+
+        renderDashboard();
+
+        await vi.waitFor(() => expect(selectedPeriodInHeader()).toBe(DAY * 30));
+
+        // The default DAY period must never be requested: that request is what
+        // painted 24h data before the selected period.
+        expect(mocks.getStats).toHaveBeenCalledTimes(1);
+        expect(mocks.getStats).toHaveBeenCalledWith(DAY * 30);
+        expect(mocks.getStatsConfig).toHaveBeenCalledTimes(1);
+    });
+
+    it('shows the stored period while the stats config is still loading', () => {
+        LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.STATS_PERIOD, DAY * 30);
+        mocks.getStatsConfig.mockReturnValue(new Promise(() => {}));
+
+        renderDashboard();
+
+        expect(selectedPeriodInHeader()).toBe(DAY * 30);
+        expect(periodOptionValues()).toContain(DAY * 30);
+        expect(mocks.getStats).not.toHaveBeenCalled();
+    });
+
+    it('falls back to the default period when the stats config cannot be loaded', async () => {
+        LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.STATS_PERIOD, DAY * 30);
+        // A failed config request marks the attempt so the dashboard stops
+        // waiting and fetches; the store clamps the period by the default DAY.
+        failConfig();
+
+        renderDashboard();
+
+        await vi.waitFor(() => expect(mocks.getStats).toHaveBeenCalledWith(DAY * 30));
+        expect(selectedPeriodInHeader()).toBe(DAY);
+        expect(periodOptionValues()).not.toContain(DAY * 30);
+    });
+
+    it('fetches a newly selected period without re-reading the stats config', async () => {
+        LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.STATS_PERIOD, DAY * 30);
+        resolveConfigWith(DAY * 30);
+
+        renderDashboard();
+
+        await vi.waitFor(() => expect(mocks.getStats).toHaveBeenCalledWith(DAY * 30));
+
+        clickPeriodOption(DAY * 7);
+
+        await vi.waitFor(() => expect(mocks.getStats).toHaveBeenCalledWith(DAY * 7));
+        expect(mocks.getStatsConfig).toHaveBeenCalledTimes(1);
+    });
+
+    it('never requests stats before the first config attempt settles', async () => {
+        LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.STATS_PERIOD, DAY * 30);
+
+        let resolveConfig!: () => void;
+        mocks.getStatsConfig.mockImplementation(
+            () =>
+                new Promise<void>((resolve) => {
+                    resolveConfig = () => {
+                        const statsState = mocks.statsState as StatsStateMock;
+                        statsState.interval = DAY * 30;
+                        statsState.configLoaded = true;
+                        statsState.configAttempted = true;
+                        resolve();
+                    };
+                }),
+        );
+
+        renderDashboard();
+
+        // Config still in flight: no stats request at all, especially not one
+        // for the default DAY that would paint 24h values first.
+        expect(mocks.getStats).not.toHaveBeenCalled();
+
+        resolveConfig();
+
+        await vi.waitFor(() => expect(mocks.getStats).toHaveBeenCalledTimes(1));
+        expect(mocks.getStats).toHaveBeenCalledWith(DAY * 30);
+        expect(mocks.getStats).not.toHaveBeenCalledWith(DAY);
+    });
+});
diff --git a/client_v2/src/__tests__/components/encryption-page.test.tsx b/client_v2/src/__tests__/components/encryption-page.test.tsx
new file mode 100644
index 00000000000..189d133f0e8
--- /dev/null
+++ b/client_v2/src/__tests__/components/encryption-page.test.tsx
@@ -0,0 +1,170 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+
+// Deep proxy: `theme` is written as theme.layout.container, theme.title.h4, etc.
+// CSS modules resolve to empty objects under `css: false`, so either mock the
+// exact class names or return the proxy itself for every property.
+const { themeMock, encryptionState, mocks } = vi.hoisted(() => {
+    const proxy: any = new Proxy(
+        {},
+        {
+            get: (_target, prop) => {
+                if (prop === Symbol.toPrimitive || prop === 'toString') {
+                    return () => '';
+                }
+                return proxy;
+            },
+        },
+    );
+
+    return {
+        themeMock: proxy,
+        encryptionState: {
+            enabled: false,
+            processingConfig: false,
+            processingValidate: false,
+            certificate_chain: '',
+            certificate_path: '',
+            private_key: '',
+            private_key_path: '',
+            private_key_saved: false,
+            server_name: '',
+            serve_plain_dns: true,
+            force_https: false,
+            port_https: 443,
+            port_dns_over_tls: 853,
+            port_dns_over_quic: 853,
+            port_dnscrypt: 0,
+        } as Record<string, unknown>,
+        mocks: {
+            getTlsStatus: vi.fn(),
+            setTlsConfig: vi.fn(),
+            validateTlsConfig: vi.fn(),
+        },
+    };
+});
+
+vi.mock('panel/lib/theme', () => ({
+    default: themeMock,
+}));
+
+vi.mock('panel/stores/encryption', () => ({
+    encryptionState,
+    ...mocks,
+}));
+
+vi.mock('panel/stores/dashboard', () => ({
+    dashboardState: { httpPort: 80, dnsPort: 53 },
+}));
+
+// The page reads the `tlsWizard` query param to auto-open the wizard; no
+// params here, and `setSearchParams` must be a no-op.
+vi.mock('@solidjs/router', () => ({
+    useSearchParams: () => [{}, vi.fn()],
+}));
+
+vi.mock('panel/common/intl', async () =>
+    (await import('panel/__tests__/helpers/copy')).createIntlMock(),
+);
+
+// The child blocks have their own tests — stub them so this test only covers
+// the page's switch logic.  Each stub reports its `open` state through
+// `data-open`, which is what the assertions read.
+vi.mock('panel/components/Encryption/blocks/PlainDnsToggle', () => ({
+    PlainDnsToggle: () => <div data-testid="plain-dns-toggle" />,
+}));
+vi.mock('panel/components/Encryption/blocks/TlsCertSection', () => ({
+    TlsCertSection: () => <div data-testid="tls-cert-section" />,
+}));
+vi.mock('panel/components/Encryption/blocks/ServerSettingsRow', () => ({
+    ServerSettingsRow: () => <div data-testid="server-settings-row" />,
+}));
+vi.mock('panel/components/Encryption/blocks/RedirectToggle', () => ({
+    RedirectToggle: () => <div data-testid="redirect-toggle" />,
+}));
+vi.mock('panel/components/Encryption/blocks/ResetDnsModal', () => ({
+    ResetDnsModal: (props: { open: boolean }) => (
+        <div data-testid="reset-dns-modal" data-open={String(props.open)} />
+    ),
+}));
+vi.mock('panel/components/Encryption/blocks/ServerSettingsModal', () => ({
+    ServerSettingsModal: (props: { open: boolean }) => (
+        <div data-testid="server-settings-modal" data-open={String(props.open)} />
+    ),
+}));
+vi.mock('panel/components/Encryption/blocks/SetupWizard', () => ({
+    TlsSetupWizard: (props: { open: boolean }) => (
+        <div data-testid="tls-wizard" data-open={String(props.open)} />
+    ),
+}));
+
+import { Encryption } from 'panel/components/Encryption/Encryption';
+
+const renderPage = async () => {
+    render(() => <Encryption />);
+
+    // The switch only renders after `getTlsStatus` resolves.
+    const switchInput = await waitFor(() => screen.getByRole('checkbox'));
+
+    return switchInput;
+};
+
+const openState = (testId: string) => screen.getByTestId(testId).getAttribute('data-open');
+
+beforeEach(() => {
+    vi.clearAllMocks();
+    Object.assign(encryptionState, {
+        enabled: false,
+        processingConfig: false,
+        certificate_chain: '',
+        certificate_path: '',
+        private_key: '',
+        private_key_path: '',
+        private_key_saved: false,
+        server_name: '',
+    });
+    mocks.getTlsStatus.mockResolvedValue(undefined);
+    mocks.setTlsConfig.mockResolvedValue({ ok: true });
+});
+
+describe('Encryption page — encrypted DNS switch', () => {
+    it('enables encryption when a certificate and key are set, even without a server name', async () => {
+        encryptionState.certificate_path = '/etc/certs/fullchain.pem';
+        encryptionState.private_key_path = '/etc/certs/privkey.pem';
+        encryptionState.server_name = '';
+
+        const switchInput = await renderPage();
+        await userEvent.click(switchInput);
+
+        expect(mocks.setTlsConfig).toHaveBeenCalledWith({ enabled: true });
+        expect(openState('server-settings-modal')).toBe('false');
+        expect(openState('tls-wizard')).toBe('false');
+    });
+
+    it('enables encryption when a server name is set as well', async () => {
+        encryptionState.certificate_path = '/etc/certs/fullchain.pem';
+        encryptionState.private_key_path = '/etc/certs/privkey.pem';
+        encryptionState.server_name = 'dns.example.com';
+
+        const switchInput = await renderPage();
+        await userEvent.click(switchInput);
+
+        expect(mocks.setTlsConfig).toHaveBeenCalledWith({ enabled: true });
+        expect(openState('server-settings-modal')).toBe('false');
+        expect(openState('tls-wizard')).toBe('false');
+    });
+
+    it('opens the TLS wizard without saving when the key is missing', async () => {
+        encryptionState.certificate_path = '/etc/certs/fullchain.pem';
+        encryptionState.private_key_path = '';
+
+        const switchInput = await renderPage();
+        await userEvent.click(switchInput);
+
+        expect(mocks.setTlsConfig).not.toHaveBeenCalled();
+        expect(openState('tls-wizard')).toBe('true');
+        expect(openState('server-settings-modal')).toBe('false');
+        expect(screen.getByRole('checkbox')).not.toBeChecked();
+    });
+});
diff --git a/client_v2/src/__tests__/components/encryption-server-settings-modal.test.tsx b/client_v2/src/__tests__/components/encryption-server-settings-modal.test.tsx
index 5759314b815..96bd6cad487 100644
--- a/client_v2/src/__tests__/components/encryption-server-settings-modal.test.tsx
+++ b/client_v2/src/__tests__/components/encryption-server-settings-modal.test.tsx
@@ -4,12 +4,30 @@ import userEvent from '@testing-library/user-event';
 
 const mocks = vi.hoisted(() => ({
     setTlsConfig: vi.fn(),
+    validateTlsConfig: vi.fn(),
     tlsStatus: vi.fn(),
     tlsConfigure: vi.fn(),
     tlsValidate: vi.fn(),
     addErrorToast: vi.fn(),
     addSuccessToast: vi.fn(),
     redirectToCurrentProtocol: vi.fn(),
+    // The modal reads the TLS config from the store on open and validates the
+    // edited name against the saved certificate; keep the store out of these
+    // tests and drive both through this object.
+    encryptionState: {
+        server_name: 'dns.example.com',
+        port_https: 443,
+        port_dns_over_tls: 853,
+        port_dns_over_quic: 853,
+        port_dnscrypt: 0,
+        certificate_chain: 'CERTIFICATE',
+        certificate_path: '',
+        private_key: 'PRIVATE KEY',
+        private_key_path: '',
+        private_key_saved: false,
+        processingConfig: false,
+        processingValidate: false,
+    },
 }));
 
 vi.mock('panel/api/generated', () => ({
@@ -30,19 +48,12 @@ vi.mock('panel/stores/dashboard', () => ({
 vi.mock('panel/helpers/helpers', () => ({
     redirectToCurrentProtocol: mocks.redirectToCurrentProtocol,
 }));
-// The modal reads the TLS config from the store on open; keep the store out of
-// these tests and drive the values through the saved configuration.
+// The store mock keeps `validateTlsConfig` local: these tests pin what the
+// modal sends and how it renders the verdict, not the store's HTTP plumbing.
 vi.mock('panel/stores/encryption', () => ({
-    encryptionState: {
-        server_name: 'dns.example.com',
-        port_https: 443,
-        port_dns_over_tls: 853,
-        port_dns_over_quic: 853,
-        port_dnscrypt: 0,
-        processingConfig: false,
-        processingValidate: false,
-    },
+    encryptionState: mocks.encryptionState,
     setTlsConfig: mocks.setTlsConfig,
+    validateTlsConfig: mocks.validateTlsConfig,
 }));
 
 import { ServerSettingsModal } from 'panel/components/Encryption/blocks/ServerSettingsModal';
@@ -63,9 +74,19 @@ const renderModal = () => {
 const saveButton = () => screen.getByTestId('config-dialog-save');
 const conflictMessage = copy('tls_setup_error_port_in_use');
 
+/** What the backend reports when the certificate does not cover the name. */
+const MISMATCH =
+    'validating certificate pair: certificate does not verify: x509: certificate is valid for dns.example.com, not localhost';
+
+/** A certificate verdict with no complaint — the saved pair is fine. */
+const CERT_OK = { valid_cert: true, valid_key: true, valid_pair: true };
+
 beforeEach(() => {
     vi.clearAllMocks();
     mocks.setTlsConfig.mockResolvedValue({ ok: true });
+    mocks.validateTlsConfig.mockResolvedValue(CERT_OK);
+    mocks.encryptionState.certificate_chain = 'CERTIFICATE';
+    mocks.encryptionState.private_key = 'PRIVATE KEY';
 });
 
 describe('ServerSettingsModal — opening', () => {
@@ -170,11 +191,14 @@ describe('ServerSettingsModal — saving', () => {
 
         await user.click(saveButton());
 
-        expect(mocks.setTlsConfig).toHaveBeenCalledWith({
-            server_name: 'dns.example.com',
-            port_https: 443,
-            port_dns_over_tls: 853,
-            port_dns_over_quic: 853,
+        // The save runs after the certificate check, so it settles a tick later.
+        await waitFor(() => {
+            expect(mocks.setTlsConfig).toHaveBeenCalledWith({
+                server_name: 'dns.example.com',
+                port_https: 443,
+                port_dns_over_tls: 853,
+                port_dns_over_quic: 853,
+            });
         });
         expect(onClose).toHaveBeenCalled();
     });
@@ -188,11 +212,13 @@ describe('ServerSettingsModal — saving', () => {
         await user.type(https, '8443');
         await user.click(saveButton());
 
-        expect(mocks.setTlsConfig).toHaveBeenCalledWith({
-            server_name: 'dns.example.com',
-            port_https: 8443,
-            port_dns_over_tls: 853,
-            port_dns_over_quic: 853,
+        await waitFor(() => {
+            expect(mocks.setTlsConfig).toHaveBeenCalledWith({
+                server_name: 'dns.example.com',
+                port_https: 8443,
+                port_dns_over_tls: 853,
+                port_dns_over_quic: 853,
+            });
         });
         expect(onClose).toHaveBeenCalled();
         expect(mocks.addErrorToast).not.toHaveBeenCalled();
@@ -214,15 +240,135 @@ describe('ServerSettingsModal — saving', () => {
         expect(screen.getAllByDisplayValue('853')).toHaveLength(2);
 
         await user.click(saveButton());
-        expect(mocks.setTlsConfig).toHaveBeenCalledWith({
-            server_name: '',
-            port_https: 443,
-            port_dns_over_tls: 853,
-            port_dns_over_quic: 853,
+        await waitFor(() => {
+            expect(mocks.setTlsConfig).toHaveBeenCalledWith({
+                server_name: '',
+                port_https: 443,
+                port_dns_over_tls: 853,
+                port_dns_over_quic: 853,
+            });
         });
     });
 });
 
+describe('ServerSettingsModal — the certificate warning', () => {
+    const warningText = () =>
+        copyInDom('tls_setup_warning_server_name_mismatch', { hostname: 'localhost' });
+
+    it('warns under the server name when the saved certificate does not cover it', async () => {
+        const user = userEvent.setup();
+        mocks.validateTlsConfig.mockResolvedValue({ ...CERT_OK, warning_validation: MISMATCH });
+        renderModal();
+
+        const serverName = screen.getByDisplayValue('dns.example.com');
+        await user.clear(serverName);
+        await user.type(serverName, 'localhost');
+        await user.tab();
+
+        await waitFor(() => {
+            expect(screen.getByTestId('server-settings-server-name-warning')).toHaveTextContent(
+                warningText(),
+            );
+        });
+
+        // The check asks about the edited name against the saved certificate
+        // and key — the wizard's config-step payload.
+        expect(mocks.validateTlsConfig).toHaveBeenCalledWith(
+            expect.objectContaining({
+                enabled: true,
+                server_name: 'localhost',
+                certificate_chain: 'CERTIFICATE',
+                private_key: 'PRIVATE KEY',
+            }),
+            { persist: false },
+        );
+    });
+
+    it('reveals a newly discovered warning on the first Save click and saves on the next', async () => {
+        const user = userEvent.setup();
+        const onClose = renderModal();
+
+        // Clicking Save blurs the field first, so the blur check is still in
+        // flight when the click handler runs — the real-world timing.  The
+        // click's own check is the one that decides.
+        let releaseBlurCheck: (value: unknown) => void = () => {};
+        mocks.validateTlsConfig.mockImplementationOnce(
+            () =>
+                new Promise((resolve) => {
+                    releaseBlurCheck = resolve;
+                }),
+        );
+        mocks.validateTlsConfig.mockResolvedValue({ ...CERT_OK, warning_validation: MISMATCH });
+
+        const serverName = screen.getByDisplayValue('dns.example.com');
+        await user.clear(serverName);
+        await user.type(serverName, 'localhost');
+
+        await user.click(saveButton());
+
+        await waitFor(() => {
+            expect(screen.getByTestId('server-settings-server-name-warning')).toHaveTextContent(
+                warningText(),
+            );
+        });
+        expect(mocks.setTlsConfig).not.toHaveBeenCalled();
+        expect(onClose).not.toHaveBeenCalled();
+        expect(saveButton()).toHaveTextContent(copyInDom('save_anyway'));
+
+        releaseBlurCheck(CERT_OK);
+
+        // The warning is on screen now, so this click is the confirmation.
+        await user.click(saveButton());
+
+        await waitFor(() => {
+            expect(mocks.setTlsConfig).toHaveBeenCalledWith({
+                server_name: 'localhost',
+                port_https: 443,
+                port_dns_over_tls: 853,
+                port_dns_over_quic: 853,
+            });
+        });
+        expect(onClose).toHaveBeenCalled();
+    });
+
+    it('hides the warning as soon as the name is edited', async () => {
+        const user = userEvent.setup();
+        mocks.validateTlsConfig.mockResolvedValue({ ...CERT_OK, warning_validation: MISMATCH });
+        renderModal();
+
+        const serverName = screen.getByDisplayValue('dns.example.com');
+        await user.clear(serverName);
+        await user.type(serverName, 'localhost');
+        await user.tab();
+
+        await waitFor(() => {
+            expect(screen.getByTestId('server-settings-server-name-warning')).toBeInTheDocument();
+        });
+
+        // The warning names the checked host, so it must not outlive the
+        // value it was reported for.
+        await user.type(serverName, 'x');
+
+        expect(screen.queryByTestId('server-settings-server-name-warning')).toBeNull();
+        expect(saveButton()).toHaveTextContent(copyInDom('save'));
+    });
+
+    it('does not ask the backend when no certificate is configured', async () => {
+        const user = userEvent.setup();
+        mocks.encryptionState.certificate_chain = '';
+        renderModal();
+
+        const serverName = screen.getByDisplayValue('dns.example.com');
+        await user.clear(serverName);
+        await user.type(serverName, 'localhost');
+        await user.tab();
+
+        // Without a certificate there is nothing to verify the name against.
+        expect(mocks.validateTlsConfig).not.toHaveBeenCalled();
+        expect(screen.queryByTestId('server-settings-server-name-warning')).toBeNull();
+    });
+});
+
 describe('ServerSettingsFields — the settings shared with the wizard', () => {
     const values = { server_name: 'example.com', port_https: 443 };
 
@@ -273,6 +419,25 @@ describe('ServerSettingsFields — the settings shared with the wizard', () => {
         expect(onFieldBlur).toHaveBeenCalledWith('port_https');
     });
 
+    it('reports the live server name on every keystroke when the host asks for it', async () => {
+        const user = userEvent.setup();
+        const onFieldInput = vi.fn();
+        render(() => (
+            <ServerSettingsFields
+                values={values}
+                onFieldChange={vi.fn()}
+                onFieldBlur={vi.fn()}
+                onFieldInput={onFieldInput}
+            />
+        ));
+
+        // `onFieldChange` only fires on `change` (blur), so the host needs the
+        // input stream to keep a warning about the typed name up to date.
+        await user.type(screen.getByDisplayValue('example.com'), 'x');
+
+        expect(onFieldInput).toHaveBeenLastCalledWith('server_name', 'example.comx');
+    });
+
     it('fills the default ports in the tooltips from the shared constants', () => {
         // The tooltips are rendered with their text nodes even when closed.
         render(() => (
diff --git a/client_v2/src/__tests__/components/encryption-tls-cert-section.test.tsx b/client_v2/src/__tests__/components/encryption-tls-cert-section.test.tsx
index 31d7fbd0760..60a0040ced6 100644
--- a/client_v2/src/__tests__/components/encryption-tls-cert-section.test.tsx
+++ b/client_v2/src/__tests__/components/encryption-tls-cert-section.test.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 // Deep proxy: `theme` is written as theme.form.action, theme.dialog.body, etc.
 // CSS modules resolve to empty objects under `css: false`, so either mock the
 // exact class names or return the proxy itself for every property.
-const { themeMock, encryptionState, mocks } = vi.hoisted(() => {
+const { themeMock, encryptionState, mocks, dashboardState } = vi.hoisted(() => {
     const proxy: any = new Proxy(
         {},
         {
@@ -43,6 +43,8 @@ const { themeMock, encryptionState, mocks } = vi.hoisted(() => {
             resetValidationStatus: vi.fn(),
             applyTlsOptimistically: vi.fn(),
         },
+        // Mutable so a test can drive the Web UI port the removal dialog names.
+        dashboardState: { httpPort: 8080 } as { httpPort: number | undefined },
     };
 });
 
@@ -55,6 +57,13 @@ vi.mock('panel/stores/encryption', () => ({
     ...mocks,
 }));
 
+// The removal dialog names the HTTP address the session is redirected to: the
+// current host at the Web UI port.  A non-default port keeps the assertion
+// from passing on a hard-coded standard port.
+vi.mock('panel/stores/dashboard', () => ({
+    dashboardState,
+}));
+
 // The section renders localized copy; serve it from the base locale so the
 // assertions can name the key instead of re-stating the text.
 vi.mock('panel/common/intl', async () =>
@@ -63,6 +72,7 @@ vi.mock('panel/common/intl', async () =>
 
 import { TlsCertSection } from 'panel/components/Encryption/blocks/TlsCertSection';
 import { copy, copyInDom } from 'panel/__tests__/helpers/copy';
+import { STANDARD_WEB_PORT } from 'panel/helpers/constants';
 
 const baseState = {
     enabled: true,
@@ -93,6 +103,7 @@ const algorithmLine = () => screen.queryByText(/Encryption algorithm/);
 
 beforeEach(() => {
     vi.clearAllMocks();
+    dashboardState.httpPort = 8080;
 });
 
 describe('TlsCertSection — encryption algorithm', () => {
@@ -233,6 +244,40 @@ describe('TlsCertSection — remove certificate', () => {
         expect(mocks.setTlsConfig).not.toHaveBeenCalled();
     });
 
+    it('names the HTTP address the redirect lands on', async () => {
+        const user = userEvent.setup();
+        renderSection();
+
+        await openConfirm(user);
+
+        expect(
+            screen.getByText(
+                copyInDom('remove_tls_certificate_desc', {
+                    host: window.location.hostname,
+                    port: 8080,
+                }),
+            ),
+        ).toBeInTheDocument();
+    });
+
+    it('falls back to the standard port when the status has not reported one', async () => {
+        dashboardState.httpPort = 0;
+        const user = userEvent.setup();
+        renderSection();
+
+        await openConfirm(user);
+
+        // Without the fallback the copy would read "http://host:0".
+        expect(
+            screen.getByText(
+                copyInDom('remove_tls_certificate_desc', {
+                    host: window.location.hostname,
+                    port: STANDARD_WEB_PORT,
+                }),
+            ),
+        ).toBeInTheDocument();
+    });
+
     it('turns encryption off and resets the TLS data', async () => {
         const user = userEvent.setup();
         renderSection();
diff --git a/client_v2/src/__tests__/dashboard-show-more.test.tsx b/client_v2/src/__tests__/dashboard-show-more.test.tsx
index 4652781ebba..2ee291f7d0e 100644
--- a/client_v2/src/__tests__/dashboard-show-more.test.tsx
+++ b/client_v2/src/__tests__/dashboard-show-more.test.tsx
@@ -1,7 +1,7 @@
 import { type JSX } from 'solid-js';
-import { render, screen } from '@solidjs/testing-library';
+import { render, screen, within } from '@solidjs/testing-library';
 import { HashRouter, Route } from '@solidjs/router';
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, beforeEach } from 'vitest';
 
 import { TopClients } from 'panel/components/Dashboard/blocks/TopClients';
 import { TopQueriedDomains } from 'panel/components/Dashboard/blocks/TopQueriedDomains';
@@ -9,7 +9,9 @@ import { TopBlockedDomains } from 'panel/components/Dashboard/blocks/TopBlockedD
 import { TopUpstreams } from 'panel/components/Dashboard/blocks/TopUpstreams';
 import { UpstreamAvgTime } from 'panel/components/Dashboard/blocks/UpstreamAvgTime';
 import { DAY } from 'panel/helpers/constants';
+import { formatCompactNumber } from 'panel/helpers/helpers';
 import { copyInDom } from 'panel/__tests__/helpers/copy';
+import { mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
 
 const renderWithRouter = (ui: () => JSX.Element) =>
     render(() => (
@@ -20,10 +22,40 @@ const renderWithRouter = (ui: () => JSX.Element) =>
 
 const getLinkHref = (testid: string) => screen.getByTestId(testid).getAttribute('href') ?? '';
 
+/**
+ * The row that shows `domain`.  The row's tooltip repeats the domain name, so
+ * the lookup has to stay scoped to the row itself.
+ */
+const getDomainRow = (domain: string) => {
+    const row = screen
+        .getAllByTestId('top-domain-row')
+        .find((candidate) => within(candidate).queryByText(domain) !== null);
+
+    expect(row).toBeDefined();
+
+    return row as HTMLElement;
+};
+
+/** Rows a card shows before the "Show more" footer would reveal anything. */
+const DOMAINS_VISIBLE_ITEMS = 5;
+const CLIENTS_VISIBLE_ITEMS = 4;
+
+/** Filler rows, used to push a list past the card's visible limit. */
+const fillers = (count: number) =>
+    Array.from({ length: count }, (_, index) => ({ name: `filler-${index}`, count: 1 }));
+
 describe('Dashboard "Show more" links', () => {
+    beforeEach(() => {
+        // Drives `useIsDesktop` (768px breakpoint) for the responsive assertions.
+        mockMatchMedia(false);
+    });
+
     it('Top clients card links to /top_clients', () => {
         renderWithRouter(() => (
-            <TopClients topClients={[{ name: '10.0.0.1', count: 5 }]} numDnsQueries={100} />
+            <TopClients
+                topClients={[{ name: '10.0.0.1', count: 5 }, ...fillers(CLIENTS_VISIBLE_ITEMS)]}
+                numDnsQueries={100}
+            />
         ));
         expect(screen.getByText(copyInDom('show_more'))).toBeInTheDocument();
         expect(getLinkHref('show-more-top-clients')).toContain('/top_clients');
@@ -32,42 +64,68 @@ describe('Dashboard "Show more" links', () => {
     it('Top queried domains card links to /top_queried_domains', () => {
         renderWithRouter(() => (
             <TopQueriedDomains
-                topQueriedDomains={[{ name: 'a.org', count: 5 }]}
+                topQueriedDomains={[{ name: 'a.org', count: 5 }, ...fillers(DOMAINS_VISIBLE_ITEMS)]}
                 numDnsQueries={100}
             />
         ));
         expect(getLinkHref('show-more-top-queried-domains')).toContain('/top_queried_domains');
 
         // The domain name is a QueryLog link filtered by the domain.
-        const domainLink = screen.getByText('a.org').closest('a');
-        expect(domainLink).not.toBeNull();
-        expect(domainLink!.getAttribute('href')).toContain('/logs');
-        expect(domainLink!.getAttribute('href')).toContain('a.org');
+        const domainLink = getDomainRow('a.org');
+        expect(domainLink.tagName).toBe('A');
+        expect(domainLink.getAttribute('href')).toContain('/logs');
+        expect(domainLink.getAttribute('href')).toContain('a.org');
     });
 
     it('Top blocked domains card links to /top_blocked_domains', () => {
         renderWithRouter(() => (
             <TopBlockedDomains
-                topBlockedDomains={[{ name: 'a.org', count: 5 }]}
+                topBlockedDomains={[{ name: 'a.org', count: 5 }, ...fillers(DOMAINS_VISIBLE_ITEMS)]}
                 numBlockedFiltering={100}
             />
         ));
         expect(getLinkHref('show-more-top-blocked-domains')).toContain('/top_blocked_domains');
 
-        const domainLink = screen.getByText('a.org').closest('a');
-        expect(domainLink).not.toBeNull();
-        expect(domainLink!.getAttribute('href')).toContain('/logs');
-        expect(domainLink!.getAttribute('href')).toContain('a.org');
+        const domainLink = getDomainRow('a.org');
+        expect(domainLink.tagName).toBe('A');
+        expect(domainLink.getAttribute('href')).toContain('/logs');
+        expect(domainLink.getAttribute('href')).toContain('a.org');
 
         // The blocked total links to QueryLog filtered by blocked status.
         expect(getLinkHref('blocked-total-link')).toContain('/logs');
         expect(getLinkHref('blocked-total-link')).toContain('status=blocked');
     });
 
+    it('Top blocked domains shows only the number of blocked queries on mobile', () => {
+        renderWithRouter(() => (
+            <TopBlockedDomains
+                topBlockedDomains={[{ name: 'a.org', count: 5 }]}
+                numBlockedFiltering={100}
+            />
+        ));
+        expect(screen.getByTestId('blocked-total-link').textContent).toBe(formatCompactNumber(100));
+    });
+
+    it('Top blocked domains shows the blocked total copy on desktop', () => {
+        mockMatchMedia(true);
+        renderWithRouter(() => (
+            <TopBlockedDomains
+                topBlockedDomains={[{ name: 'a.org', count: 5 }]}
+                numBlockedFiltering={100}
+            />
+        ));
+        expect(screen.getByTestId('blocked-total-link').textContent).toBe(
+            copyInDom('blocked_total', { value: formatCompactNumber(100) }),
+        );
+    });
+
     it('Top upstreams card links to /top_upstreams', () => {
         renderWithRouter(() => (
             <TopUpstreams
-                topUpstreamsResponses={[{ name: 'tls://x:853', count: 5 }]}
+                topUpstreamsResponses={[
+                    { name: 'tls://x:853', count: 5 },
+                    ...fillers(DOMAINS_VISIBLE_ITEMS),
+                ]}
                 numDnsQueries={100}
             />
         ));
@@ -77,22 +135,78 @@ describe('Dashboard "Show more" links', () => {
     it('Average upstream response time card links to /upstream_avg_time', () => {
         renderWithRouter(() => (
             <UpstreamAvgTime
-                topUpstreamsAvgTime={[{ name: 'tls://x:853', count: 12 }]}
+                topUpstreamsAvgTime={[
+                    { name: 'tls://x:853', count: 12 },
+                    ...fillers(DOMAINS_VISIBLE_ITEMS),
+                ]}
                 avgProcessingTime={12}
             />
         ));
         expect(getLinkHref('show-more-upstream-avg-time')).toContain('/upstream_avg_time');
     });
 
-    it('the link is visible even when the card is empty', () => {
+    it('the link is hidden when the card shows every row it has', () => {
+        renderWithRouter(() => (
+            <TopQueriedDomains
+                topQueriedDomains={fillers(DOMAINS_VISIBLE_ITEMS)}
+                numDnsQueries={100}
+            />
+        ));
+        expect(screen.queryByTestId('show-more-top-queried-domains')).toBeNull();
+    });
+
+    it('the link is hidden when the card is empty', () => {
         renderWithRouter(() => <TopQueriedDomains topQueriedDomains={[]} numDnsQueries={100} />);
-        expect(getLinkHref('show-more-top-queried-domains')).toContain('/top_queried_domains');
+        expect(screen.queryByTestId('show-more-top-queried-domains')).toBeNull();
+    });
+
+    it('the link is hidden for top blocked domains with no hidden rows', () => {
+        renderWithRouter(() => (
+            <TopBlockedDomains
+                topBlockedDomains={fillers(DOMAINS_VISIBLE_ITEMS)}
+                numBlockedFiltering={100}
+            />
+        ));
+        expect(screen.queryByTestId('show-more-top-blocked-domains')).toBeNull();
+    });
+
+    it('the link is hidden for top upstreams with no hidden rows', () => {
+        renderWithRouter(() => (
+            <TopUpstreams
+                topUpstreamsResponses={fillers(DOMAINS_VISIBLE_ITEMS)}
+                numDnsQueries={100}
+            />
+        ));
+        expect(screen.queryByTestId('show-more-top-upstreams')).toBeNull();
+    });
+
+    it('the link is hidden for average upstream response time with no hidden rows', () => {
+        renderWithRouter(() => (
+            <UpstreamAvgTime
+                topUpstreamsAvgTime={fillers(DOMAINS_VISIBLE_ITEMS)}
+                avgProcessingTime={12}
+            />
+        ));
+        expect(screen.queryByTestId('show-more-upstream-avg-time')).toBeNull();
+    });
+
+    it('Top clients shows the link once a fifth client is hidden', () => {
+        const { unmount } = renderWithRouter(() => (
+            <TopClients topClients={fillers(CLIENTS_VISIBLE_ITEMS)} numDnsQueries={100} />
+        ));
+        expect(screen.queryByTestId('show-more-top-clients')).toBeNull();
+        unmount();
+
+        renderWithRouter(() => (
+            <TopClients topClients={fillers(CLIENTS_VISIBLE_ITEMS + 1)} numDnsQueries={100} />
+        ));
+        expect(getLinkHref('show-more-top-clients')).toContain('/top_clients');
     });
 
     it('the link includes the selected stats period', () => {
         renderWithRouter(() => (
             <TopBlockedDomains
-                topBlockedDomains={[{ name: 'a.org', count: 5 }]}
+                topBlockedDomains={[{ name: 'a.org', count: 5 }, ...fillers(DOMAINS_VISIBLE_ITEMS)]}
                 numBlockedFiltering={100}
                 period={DAY}
             />
diff --git a/client_v2/src/__tests__/dashboard-stat-row-tooltips.test.tsx b/client_v2/src/__tests__/dashboard-stat-row-tooltips.test.tsx
new file mode 100644
index 00000000000..c3eaa04e0c8
--- /dev/null
+++ b/client_v2/src/__tests__/dashboard-stat-row-tooltips.test.tsx
@@ -0,0 +1,160 @@
+import { render, screen, fireEvent, waitFor, within } from '@solidjs/testing-library';
+import { HashRouter, Route } from '@solidjs/router';
+import { describe, it, expect, beforeEach } from 'vitest';
+
+import { GeneralStatistics } from 'panel/components/Dashboard/blocks/GeneralStatistics';
+import { QUERY_LOG_REASON_FILTER, QUERY_LOG_STATUS_FILTER } from 'panel/helpers/constants';
+import { formatNumber } from 'panel/helpers/helpers';
+import { copy } from 'panel/__tests__/helpers/copy';
+import { mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
+
+/**
+ * Counts are deliberately above `QueriesTooltip`'s threshold (1000) and the
+ * blocked counts give round percentages, so the value cell is easy to assert on.
+ */
+const STATS = {
+    numDnsQueries: 2000,
+    numBlockedFiltering: 500,
+    numReplacedSafebrowsing: 100,
+    numReplacedParental: 40,
+    numReplacedSafesearch: 8,
+    avgProcessingTime: 152,
+};
+
+/** Every row, in the order `GeneralStatistics` renders them. */
+const ROWS = [
+    { label: copy('dns_queries'), description: copy('dns_queries_tooltip') },
+    { label: copy('ads_blocked'), description: copy('ads_blocked_tooltip') },
+    { label: copy('threats_blocked'), description: copy('threats_blocked_tooltip') },
+    { label: copy('adult_websites_blocked'), description: copy('adult_websites_blocked_tooltip') },
+    { label: copy('safe_search_used'), description: copy('safe_search_used_tooltip') },
+    {
+        label: copy('average_time_processing'),
+        description: copy('average_time_processing_tooltip'),
+    },
+];
+
+const renderCard = () =>
+    render(() => (
+        <HashRouter>
+            <Route path="/" component={() => <GeneralStatistics {...STATS} />} />
+        </HashRouter>
+    ));
+
+/** The tooltip trigger of the row whose label is `label`. */
+const rowTrigger = (label: string) => {
+    const trigger = screen.getByText(label).closest('[data-part="trigger"]');
+    expect(trigger).not.toBeNull();
+
+    return trigger as HTMLElement;
+};
+
+/** The tooltip content of the row whose description is `description`. */
+const tooltipContent = (description: string) => {
+    const content = screen.getByText(description).closest('[data-part="content"]');
+    expect(content).not.toBeNull();
+
+    return content as HTMLElement;
+};
+
+const hover = async (target: HTMLElement, description: string) => {
+    const content = tooltipContent(description);
+
+    expect(content.hasAttribute('hidden')).toBe(true);
+
+    fireEvent.pointerOver(target, { pointerType: 'mouse' });
+
+    // SHOW_DELAY is 200 ms; real timers, so use a generous timeout.
+    await waitFor(() => expect(content.hasAttribute('hidden')).toBe(false), { timeout: 1000 });
+};
+
+describe('Dashboard general statistics row tooltips', () => {
+    beforeEach(() => {
+        // The global setup mock answers `false` to every query, i.e. a desktop
+        // without hover media support, matching the Tooltip tests.
+        mockMatchMedia(false);
+    });
+
+    it('makes the whole row the tooltip trigger, not just the label', () => {
+        renderCard();
+
+        // The value cell (and its bar) are inside the trigger, so hovering the
+        // number or the bar reveals the same description as hovering the label.
+        const dnsRow = rowTrigger(copy('dns_queries'));
+        expect(within(dnsRow).getByText(`(${copy('total')})`)).toBeInTheDocument();
+        expect(dnsRow.querySelector('[class*="queryBar"]')).not.toBeNull();
+
+        const blockedRow = rowTrigger(copy('ads_blocked'));
+        expect(within(blockedRow).getByText('(25.0%)')).toBeInTheDocument();
+    });
+
+    it('opens the description when hovering the value area of a row', async () => {
+        renderCard();
+
+        const value = within(rowTrigger(copy('dns_queries'))).getByText(`(${copy('total')})`);
+
+        await hover(value, copy('dns_queries_tooltip'));
+    });
+
+    it.each(ROWS)('opens the description of the $label row on hover', async (row) => {
+        renderCard();
+
+        await hover(rowTrigger(row.label), row.description);
+    });
+
+    it('renders a single tooltip per row', () => {
+        const { container } = renderCard();
+
+        expect(container.querySelectorAll('[data-part="trigger"]')).toHaveLength(ROWS.length);
+
+        // The nested `QueriesTooltip` is gone: the exact count is no longer
+        // revealed, because it would open on top of the row description.
+        expect(
+            screen.queryByText(copy('queries_tooltip', { value: formatNumber(2000) })),
+        ).toBeNull();
+    });
+
+    it('keeps the row link to the query log', () => {
+        renderCard();
+
+        const dnsRow = screen.getByText(copy('dns_queries')).closest('a');
+        expect(dnsRow?.getAttribute('href')).toContain('/logs');
+
+        const blockedRow = screen.getByText(copy('ads_blocked')).closest('a');
+        const blockedHref = blockedRow?.getAttribute('href') ?? '';
+        expect(blockedHref).toContain(QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY);
+        expect(blockedHref).toContain(QUERY_LOG_REASON_FILTER.BLOCKED_BY_FILTER.QUERY);
+    });
+
+    it('keeps the average processing time row a plain row with its value', () => {
+        renderCard();
+
+        const label = screen.getByText(copy('average_time_processing'));
+        expect(label.closest('a')).toBeNull();
+        expect(
+            within(rowTrigger(copy('average_time_processing'))).getByText(
+                copy('processing_time_ms', { value: '152' }),
+            ),
+        ).toBeInTheDocument();
+    });
+
+    describe('touch device', () => {
+        beforeEach(() => {
+            mockMatchMedia((query) => query === '(hover: none)');
+        });
+
+        it('renders no tooltips at all', () => {
+            const { container } = renderCard();
+
+            expect(container.querySelector('[data-scope="tooltip"]')).toBeNull();
+            expect(container.querySelectorAll('[data-part="trigger"]')).toHaveLength(0);
+        });
+
+        it('still renders the rows as query log links', () => {
+            renderCard();
+
+            const dnsRow = screen.getByText(copy('dns_queries')).closest('a');
+            expect(dnsRow?.getAttribute('href')).toContain('/logs');
+        });
+    });
+});
diff --git a/client_v2/src/__tests__/dashboard-top-clients-actions.test.tsx b/client_v2/src/__tests__/dashboard-top-clients-actions.test.tsx
new file mode 100644
index 00000000000..7662d89b1f5
--- /dev/null
+++ b/client_v2/src/__tests__/dashboard-top-clients-actions.test.tsx
@@ -0,0 +1,121 @@
+import { render, screen, fireEvent } from '@solidjs/testing-library';
+import { HashRouter, Route } from '@solidjs/router';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
+
+const mocks = vi.hoisted(() => ({
+    accessList: vi.fn(),
+    accessSet: vi.fn(),
+}));
+
+vi.mock('panel/api/generated', () => ({
+    accessList: mocks.accessList,
+    accessSet: mocks.accessSet,
+}));
+
+import { TopClients } from 'panel/components/Dashboard/blocks/TopClients';
+import { getAccessList } from 'panel/stores/access';
+import { CLIENT_BLOCK_CONFIRM_SUBMIT_TEST_ID } from 'panel/common/ui/ClientBlockConfirm';
+import theme from 'panel/lib/theme';
+import { copyInDom } from 'panel/__tests__/helpers/copy';
+import { mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
+
+const CLIENT = '10.0.0.1';
+
+const renderCard = () =>
+    render(() => (
+        <HashRouter>
+            <Route
+                path="/"
+                component={() => (
+                    <TopClients topClients={[{ name: CLIENT, count: 5 }]} numDnsQueries={100} />
+                )}
+            />
+        </HashRouter>
+    ));
+
+/** The inline mobile action; the closed desktop dropdown renders a second copy. */
+const actionButton = (key: 'block_client' | 'unblock_client') =>
+    screen.getAllByRole('button', { name: copyInDom(key) })[0];
+
+const loadAccessList = (disallowed: string[]) => {
+    mocks.accessList.mockResolvedValue({
+        allowed_clients: [],
+        disallowed_clients: disallowed,
+        blocked_hosts: [],
+    });
+
+    return getAccessList();
+};
+
+describe('Dashboard top clients block/unblock action', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        mockMatchMedia(false);
+    });
+
+    it('renders the block action as a button without the dropdown item background', async () => {
+        await loadAccessList([]);
+        renderCard();
+
+        const button = actionButton('block_client');
+        expect(button.tagName).toBe('BUTTON');
+        expect(button.getAttribute('type')).toBe('button');
+        // The dropdown row class paints `--default-dropdown-menu-background`.
+        expect(theme.dropdown.item).toBeTruthy();
+        expect(button.classList.contains(theme.dropdown.item)).toBe(false);
+        // Red is the destructive block action.
+        expect(button.className).toMatch(/tableRowMenuItemRed/);
+    });
+
+    it('renders the unblock action as a button without the dropdown item background', async () => {
+        await loadAccessList([CLIENT]);
+        renderCard();
+
+        const button = actionButton('unblock_client');
+        expect(button.tagName).toBe('BUTTON');
+        expect(button.getAttribute('type')).toBe('button');
+        expect(button.classList.contains(theme.dropdown.item)).toBe(false);
+        // Green is the restoring unblock action.
+        expect(button.className).toMatch(/tableRowMenuItemGreen/);
+    });
+
+    it('opens the confirm dialog from the inline action button', async () => {
+        await loadAccessList([]);
+        renderCard();
+
+        await userEvent.click(actionButton('block_client'));
+        expect(screen.getByTestId(CLIENT_BLOCK_CONFIRM_SUBMIT_TEST_ID)).toBeInTheDocument();
+    });
+
+    it('switches the action when the client becomes blocked', async () => {
+        await loadAccessList([]);
+        renderCard();
+        expect(actionButton('block_client')).toBeInTheDocument();
+
+        await loadAccessList([CLIENT]);
+
+        expect(actionButton('unblock_client')).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: copyInDom('block_client') })).toBeNull();
+    });
+
+    it('does not scroll the page to the top when the action opens the dialog', async () => {
+        await loadAccessList([]);
+        renderCard();
+
+        const scrollTo = vi.spyOn(window, 'scrollTo').mockImplementation(() => {});
+        vi.useFakeTimers();
+        try {
+            fireEvent.click(actionButton('block_client'));
+
+            // The row link scrolls to the top 100ms after a click.
+            vi.advanceTimersByTime(150);
+
+            expect(screen.getByTestId(CLIENT_BLOCK_CONFIRM_SUBMIT_TEST_ID)).toBeInTheDocument();
+            expect(scrollTo).not.toHaveBeenCalled();
+        } finally {
+            vi.useRealTimers();
+            scrollTo.mockRestore();
+        }
+    });
+});
diff --git a/client_v2/src/__tests__/dns-config-store.test.ts b/client_v2/src/__tests__/dns-config-store.test.ts
index a60868888e6..04cc24f6753 100644
--- a/client_v2/src/__tests__/dns-config-store.test.ts
+++ b/client_v2/src/__tests__/dns-config-store.test.ts
@@ -19,7 +19,12 @@ vi.mock('panel/common/intl', () => ({
     default: { getMessage: vi.fn((key: string) => key) },
 }));
 
-import { getDnsConfig, dnsConfigState, toggleResolveClients } from 'panel/stores/dnsConfig';
+import {
+    getDnsConfig,
+    dnsConfigState,
+    togglePrivatePtrResolvers,
+    toggleResolveClients,
+} from 'panel/stores/dnsConfig';
 
 describe('getDnsConfig', () => {
     beforeEach(() => vi.clearAllMocks());
@@ -62,3 +67,64 @@ describe('toggleResolveClients', () => {
         });
     });
 });
+
+describe('togglePrivatePtrResolvers', () => {
+    beforeEach(() => vi.clearAllMocks());
+
+    const loadConfig = async (config: {
+        use_private_ptr_resolvers: boolean;
+        local_ptr_upstreams: string[];
+    }) => {
+        mocks.dnsInfo.mockResolvedValue(config);
+        await getDnsConfig();
+    };
+
+    it('sends the effective servers when enabling', async () => {
+        mocks.dnsConfig.mockResolvedValue({});
+        await loadConfig({
+            use_private_ptr_resolvers: false,
+            local_ptr_upstreams: ['1.1.1.1', '# comment'],
+        });
+
+        await togglePrivatePtrResolvers();
+
+        // The backend validates the request body on its own, so the servers
+        // have to travel with the flag.
+        expect(mocks.dnsConfig).toHaveBeenCalledWith({
+            use_private_ptr_resolvers: true,
+            local_ptr_upstreams: ['1.1.1.1', '# comment'],
+        });
+    });
+
+    it('sends only the flag when no servers are configured', async () => {
+        mocks.dnsConfig.mockResolvedValue({});
+        await loadConfig({ use_private_ptr_resolvers: false, local_ptr_upstreams: [] });
+
+        await togglePrivatePtrResolvers();
+
+        expect(mocks.dnsConfig).toHaveBeenCalledWith({ use_private_ptr_resolvers: true });
+    });
+
+    it('does not send the servers when disabling', async () => {
+        mocks.dnsConfig.mockResolvedValue({});
+        await loadConfig({
+            use_private_ptr_resolvers: true,
+            local_ptr_upstreams: ['1.1.1.1'],
+        });
+
+        await togglePrivatePtrResolvers();
+
+        expect(mocks.dnsConfig).toHaveBeenCalledWith({ use_private_ptr_resolvers: false });
+    });
+
+    it('drops a toggle while another save is in flight', async () => {
+        // Never settles, so `processingSetConfig` stays true.
+        mocks.dnsConfig.mockReturnValue(new Promise(() => {}));
+        await loadConfig({ use_private_ptr_resolvers: false, local_ptr_upstreams: [] });
+
+        togglePrivatePtrResolvers();
+        await togglePrivatePtrResolvers();
+
+        expect(mocks.dnsConfig).toHaveBeenCalledTimes(1);
+    });
+});
diff --git a/client_v2/src/__tests__/dynamic-leases-tab.test.tsx b/client_v2/src/__tests__/dynamic-leases-tab.test.tsx
index 92fc50aa4b9..19381f4675e 100644
--- a/client_v2/src/__tests__/dynamic-leases-tab.test.tsx
+++ b/client_v2/src/__tests__/dynamic-leases-tab.test.tsx
@@ -113,7 +113,7 @@ describe('DynamicLeasesTab', () => {
         fireEvent.click(screen.getByTestId('dynamic-lease-delete-button'));
 
         // Click the confirm button
-        const confirmButton = screen.getByText('delete_table_action_confirm');
+        const confirmButton = screen.getByText('yes_remove');
         fireEvent.click(confirmButton);
 
         expect(mocks.removeStaticLease).toHaveBeenCalledWith(MOCK_LEASE);
diff --git a/client_v2/src/__tests__/helpers/matchMedia.ts b/client_v2/src/__tests__/helpers/matchMedia.ts
new file mode 100644
index 00000000000..9223a447c86
--- /dev/null
+++ b/client_v2/src/__tests__/helpers/matchMedia.ts
@@ -0,0 +1,91 @@
+type Listener = (event: MediaQueryListEvent) => void;
+
+/**
+ * How a stubbed `window.matchMedia` should answer a query: a single boolean for
+ * every query, or a predicate for per-query control.
+ */
+export type MatchMediaResult = boolean | ((query: string) => boolean);
+
+export interface MatchMediaMock {
+    /**
+     * Replaces the current result and notifies every registered `change`
+     * listener, which is how the reactive hooks observe a viewport change.
+     */
+    set: (next: MatchMediaResult) => void;
+    /**
+     * Number of live `change` listeners across the media queries whose text
+     * contains `queryFragment` (all of them when it is omitted).  Use it to
+     * assert that a hook unsubscribes on unmount.
+     */
+    listenerCount: (queryFragment?: string) => number;
+}
+
+/** Builds a predicate that emulates a viewport of `width` pixels wide. */
+export const byViewportWidth =
+    (width: number): MatchMediaResult =>
+    (query) => {
+        const minWidth = /\(min-width:\s*(\d+)px\)/.exec(query);
+
+        return minWidth ? width >= Number(minWidth[1]) : false;
+    };
+
+/**
+ * Installs a controllable `window.matchMedia` stub — jsdom does not implement
+ * it.  Pass a boolean to make every query match (or not match), or a predicate
+ * to answer per query, e.g. `byViewportWidth(900)`.
+ *
+ * The reactive hooks in `panel/hooks/useMediaQuery` read `matches` both when
+ * they are created and again on mount, so the stub keeps the value live behind
+ * a getter instead of copying it into each `MediaQueryList`.
+ */
+export const mockMatchMedia = (initial: MatchMediaResult = false): MatchMediaMock => {
+    let current = initial;
+
+    const created: { query: string; listeners: Set<Listener> }[] = [];
+
+    const resolve = (query: string) =>
+        typeof current === 'boolean' ? current : current(query);
+
+    const createMediaQueryList = (query: string): MediaQueryList => {
+        const record = { query, listeners: new Set<Listener>() };
+        created.push(record);
+
+        return {
+            get matches() {
+                return resolve(query);
+            },
+            media: query,
+            onchange: null,
+            addEventListener: (type: string, listener: Listener) => {
+                if (type === 'change') record.listeners.add(listener);
+            },
+            removeEventListener: (type: string, listener: Listener) => {
+                if (type === 'change') record.listeners.delete(listener);
+            },
+            addListener: (listener: Listener) => record.listeners.add(listener),
+            removeListener: (listener: Listener) => record.listeners.delete(listener),
+            dispatchEvent: () => false,
+        } as unknown as MediaQueryList;
+    };
+
+    Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        configurable: true,
+        value: createMediaQueryList,
+    });
+
+    return {
+        set: (next) => {
+            current = next;
+
+            created.forEach(({ query, listeners }) => {
+                const event = { matches: resolve(query), media: query } as MediaQueryListEvent;
+                listeners.forEach((listener) => listener(event));
+            });
+        },
+        listenerCount: (queryFragment) =>
+            created
+                .filter(({ query }) => !queryFragment || query.includes(queryFragment))
+                .reduce((count, { listeners }) => count + listeners.size, 0),
+    };
+};
diff --git a/client_v2/src/__tests__/helpers/redirect-to-current-protocol.test.ts b/client_v2/src/__tests__/helpers/redirect-to-current-protocol.test.ts
new file mode 100644
index 00000000000..8b28379c919
--- /dev/null
+++ b/client_v2/src/__tests__/helpers/redirect-to-current-protocol.test.ts
@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from 'vitest';
+
+import { redirectToCurrentProtocol } from 'panel/helpers/helpers';
+
+/**
+ * Replaces the jsdom location with a plain object so `replace()` is a spy.
+ * `redirectToCurrentProtocol` reads the location at call time.
+ */
+const mockLocation = (props: {
+    protocol: string;
+    hostname: string;
+    hash: string;
+    port?: string;
+}) => {
+    const replace = vi.fn();
+    Object.defineProperty(window, 'location', {
+        value: {
+            protocol: props.protocol,
+            hostname: props.hostname,
+            hash: props.hash,
+            port: props.port ?? '',
+            replace,
+        },
+        writable: true,
+        configurable: true,
+    });
+
+    return replace;
+};
+
+describe('redirectToCurrentProtocol', () => {
+    it('navigates from https to the HTTP UI when encryption is disabled', () => {
+        const replace = mockLocation({
+            protocol: 'https:',
+            hostname: 'dns.example.com',
+            hash: '#/encryption',
+            port: '443',
+        });
+
+        redirectToCurrentProtocol({ enabled: false, force_https: false, port_https: 443 }, 3001);
+
+        expect(replace).toHaveBeenCalledWith('http://dns.example.com:3001/#/encryption');
+    });
+
+    it('stays put when encryption is off on an http origin', () => {
+        const replace = mockLocation({
+            protocol: 'http:',
+            hostname: 'dns.example.com',
+            hash: '#/encryption',
+        });
+
+        redirectToCurrentProtocol({ enabled: false, force_https: false, port_https: 443 }, 80);
+
+        expect(replace).not.toHaveBeenCalled();
+    });
+});
diff --git a/client_v2/src/__tests__/helpers/statistics.test.ts b/client_v2/src/__tests__/helpers/statistics.test.ts
new file mode 100644
index 00000000000..8afa38afdde
--- /dev/null
+++ b/client_v2/src/__tests__/helpers/statistics.test.ts
@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+
+import { DAY, HOUR } from 'panel/helpers/constants';
+import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from 'panel/helpers/localStorageHelper';
+import {
+    clampStatsPeriod,
+    getEffectiveStatsPeriod,
+    getStoredStatsPeriod,
+    resolveStatsPeriod,
+} from 'panel/helpers/statistics';
+
+const storePeriod = (period: number) =>
+    LocalStorageHelper.setItem(LOCAL_STORAGE_KEYS.STATS_PERIOD, period);
+
+describe('clampStatsPeriod', () => {
+    it('clamps a period above the max interval down to it', () => {
+        expect(clampStatsPeriod(DAY * 30, DAY * 7)).toBe(DAY * 7);
+    });
+
+    it('keeps a period within the max interval as is', () => {
+        expect(clampStatsPeriod(HOUR * 6, DAY * 7)).toBe(HOUR * 6);
+    });
+
+    it('falls back to DAY when the max interval is unexpectedly small', () => {
+        expect(clampStatsPeriod(DAY * 30, 0)).toBe(DAY);
+    });
+});
+
+describe('getStoredStatsPeriod', () => {
+    beforeEach(() => localStorage.clear());
+
+    it('defaults to DAY when nothing is stored', () => {
+        expect(getStoredStatsPeriod()).toBe(DAY);
+    });
+
+    it('returns the stored period', () => {
+        storePeriod(DAY * 30);
+        expect(getStoredStatsPeriod()).toBe(DAY * 30);
+    });
+
+    it('ignores a non-positive stored value', () => {
+        storePeriod(0);
+        expect(getStoredStatsPeriod()).toBe(DAY);
+    });
+});
+
+describe('getEffectiveStatsPeriod', () => {
+    beforeEach(() => localStorage.clear());
+
+    it('clamps the stored period by the max interval', () => {
+        storePeriod(DAY * 90);
+        expect(getEffectiveStatsPeriod(DAY * 7)).toBe(DAY * 7);
+    });
+
+    it('keeps the stored period when it is within the max interval', () => {
+        storePeriod(DAY * 7);
+        expect(getEffectiveStatsPeriod(DAY * 90)).toBe(DAY * 7);
+    });
+});
+
+describe('resolveStatsPeriod', () => {
+    beforeEach(() => localStorage.clear());
+
+    it('prefers a valid URL period', () => {
+        storePeriod(DAY);
+        expect(resolveStatsPeriod({ period: String(HOUR * 6) }, DAY * 30)).toBe(HOUR * 6);
+    });
+
+    it('clamps a URL period above the max interval', () => {
+        expect(resolveStatsPeriod({ period: String(DAY * 90) }, DAY * 30)).toBe(DAY * 30);
+    });
+
+    it('falls back to the stored period when the URL period is invalid', () => {
+        storePeriod(DAY * 7);
+        expect(resolveStatsPeriod({ period: 'nope' }, DAY * 30)).toBe(DAY * 7);
+    });
+});
diff --git a/client_v2/src/__tests__/hooks/use-is-truncated.test.tsx b/client_v2/src/__tests__/hooks/use-is-truncated.test.tsx
index 38682f77900..5683ac274dc 100644
--- a/client_v2/src/__tests__/hooks/use-is-truncated.test.tsx
+++ b/client_v2/src/__tests__/hooks/use-is-truncated.test.tsx
@@ -1,3 +1,4 @@
+import { createSignal } from 'solid-js';
 import { describe, it, expect, afterEach } from 'vitest';
 import { render, screen, cleanup } from '@solidjs/testing-library';
 
@@ -27,15 +28,18 @@ const restoreOverflow = () => {
 
 let observerCallback: ResizeObserverCallback | undefined;
 let observerDisconnected = false;
+let observerCount = 0;
 
 /** Replaces the global no-op `ResizeObserver` from `src/__tests__/setup.ts`. */
 const installResizeObserver = () => {
     observerCallback = undefined;
     observerDisconnected = false;
+    observerCount = 0;
 
     class FakeResizeObserver {
         constructor(callback: ResizeObserverCallback) {
             observerCallback = callback;
+            observerCount += 1;
         }
 
         observe() {}
@@ -62,6 +66,22 @@ const Harness = () => {
     );
 };
 
+/** The same probe, with the gating options driven by signals from the test. */
+const GatedHarness = (props: { enabled: boolean; text: string }) => {
+    let labelRef: HTMLSpanElement | undefined;
+
+    const isTruncated = useIsTruncated(() => labelRef, {
+        enabled: () => props.enabled,
+        source: () => props.text,
+    });
+
+    return (
+        <span ref={labelRef} data-testid="label">
+            {isTruncated() ? 'truncated' : 'fits'}
+        </span>
+    );
+};
+
 describe('useIsTruncated', () => {
     afterEach(() => {
         restoreOverflow();
@@ -122,4 +142,58 @@ describe('useIsTruncated', () => {
 
         expect(observerDisconnected).toBe(true);
     });
+
+    it('neither measures nor observes while disabled', () => {
+        stubOverflow(200, 100);
+        installResizeObserver();
+
+        render(() => <GatedHarness enabled={false} text="a" />);
+
+        expect(observerCount).toBe(0);
+        expect(screen.getByTestId('label')).toHaveTextContent('fits');
+    });
+
+    it('measures and observes once enabled', () => {
+        stubOverflow(200, 100);
+        installResizeObserver();
+
+        const [enabled, setEnabled] = createSignal(false);
+        render(() => <GatedHarness enabled={enabled()} text="a" />);
+        expect(screen.getByTestId('label')).toHaveTextContent('fits');
+
+        setEnabled(true);
+
+        expect(observerCount).toBe(1);
+        expect(screen.getByTestId('label')).toHaveTextContent('truncated');
+    });
+
+    it('stops observing and resets once disabled again', () => {
+        stubOverflow(200, 100);
+        installResizeObserver();
+
+        const [enabled, setEnabled] = createSignal(true);
+        render(() => <GatedHarness enabled={enabled()} text="a" />);
+        expect(observerDisconnected).toBe(false);
+
+        setEnabled(false);
+
+        expect(observerDisconnected).toBe(true);
+        expect(screen.getByTestId('label')).toHaveTextContent('fits');
+    });
+
+    it('re-measures when the source changes without a box resize', () => {
+        stubOverflow(100, 100);
+        installResizeObserver();
+
+        const [text, setText] = createSignal('a');
+        render(() => <GatedHarness enabled text={text()} />);
+        expect(screen.getByTestId('label')).toHaveTextContent('fits');
+
+        stubOverflow(200, 100);
+        setText('a much longer name');
+
+        expect(screen.getByTestId('label')).toHaveTextContent('truncated');
+        // The observer follows the element, not the text, so it must survive.
+        expect(observerCount).toBe(1);
+    });
 });
diff --git a/client_v2/src/__tests__/hooks/use-media-query.test.tsx b/client_v2/src/__tests__/hooks/use-media-query.test.tsx
new file mode 100644
index 00000000000..bbf0330ce4d
--- /dev/null
+++ b/client_v2/src/__tests__/hooks/use-media-query.test.tsx
@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen, cleanup } from '@solidjs/testing-library';
+
+import { useIsDesktop, useIsMobile, useMediaQuery, useIsTouchDevice } from 'panel/hooks/useMediaQuery';
+import { byViewportWidth, mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
+
+const Harness = () => {
+    const isDesktop = useIsDesktop();
+    const isMobile = useIsMobile();
+    const isTouch = useIsTouchDevice();
+    const isWide = useMediaQuery('(min-width: 1200px)');
+
+    return (
+        <div
+            data-testid="harness"
+            data-desktop={String(isDesktop())}
+            data-mobile={String(isMobile())}
+            data-touch={String(isTouch())}
+            data-wide={String(isWide())}
+        />
+    );
+};
+
+/** Renders the harness against a simulated `width`-pixel-wide viewport. */
+const renderAt = (width: number) => {
+    mockMatchMedia(byViewportWidth(width));
+    render(() => <Harness />);
+
+    return screen.getByTestId('harness');
+};
+
+describe('useMediaQuery', () => {
+    it('reports the current match of the given query', () => {
+        expect(renderAt(1300)).toHaveAttribute('data-wide', 'true');
+    });
+
+    it('reports false for a query that does not match', () => {
+        expect(renderAt(900)).toHaveAttribute('data-wide', 'false');
+    });
+
+    it('re-evaluates when the media query result changes', () => {
+        const media = mockMatchMedia(byViewportWidth(500));
+        render(() => <Harness />);
+
+        expect(screen.getByTestId('harness')).toHaveAttribute('data-desktop', 'false');
+
+        media.set(byViewportWidth(1300));
+
+        expect(screen.getByTestId('harness')).toHaveAttribute('data-wide', 'true');
+    });
+
+    it('unsubscribes from the media query on unmount', () => {
+        const media = mockMatchMedia(byViewportWidth(1300));
+        render(() => <Harness />);
+
+        expect(media.listenerCount()).toBeGreaterThan(0);
+
+        cleanup();
+
+        expect(media.listenerCount()).toBe(0);
+    });
+});
+
+describe('useIsDesktop', () => {
+    it('reports false just below the 768px breakpoint', () => {
+        expect(renderAt(767)).toHaveAttribute('data-desktop', 'false');
+    });
+
+    it('reports true from the 768px breakpoint up', () => {
+        expect(renderAt(768)).toHaveAttribute('data-desktop', 'true');
+    });
+});
+
+describe('useIsMobile', () => {
+    it('reports true just below the 1024px breakpoint', () => {
+        expect(renderAt(1023)).toHaveAttribute('data-mobile', 'true');
+    });
+
+    it('reports false from the 1024px breakpoint up', () => {
+        expect(renderAt(1024)).toHaveAttribute('data-mobile', 'false');
+    });
+
+    it('follows the viewport when it crosses the breakpoint', () => {
+        const media = mockMatchMedia(byViewportWidth(500));
+        render(() => <Harness />);
+
+        expect(screen.getByTestId('harness')).toHaveAttribute('data-mobile', 'true');
+
+        media.set(byViewportWidth(1100));
+
+        expect(screen.getByTestId('harness')).toHaveAttribute('data-mobile', 'false');
+    });
+
+    /**
+     * `useIsMobile` and `useIsDesktop` deliberately use different breakpoints,
+     * so mid-size viewports are reported by both hooks at once.  Every call site
+     * relies on this, so pin it before "fixing" either hook.
+     */
+    it('overlaps with useIsDesktop between 768px and 1023px', () => {
+        const harness = renderAt(900);
+
+        expect(harness).toHaveAttribute('data-desktop', 'true');
+        expect(harness).toHaveAttribute('data-mobile', 'true');
+    });
+});
+
+describe('useIsTouchDevice', () => {
+    it('reports true when the device cannot hover', () => {
+        mockMatchMedia((query) => query === '(hover: none)');
+        render(() => <Harness />);
+
+        expect(screen.getByTestId('harness')).toHaveAttribute('data-touch', 'true');
+    });
+
+    it('reports false on devices with hover support', () => {
+        expect(renderAt(1300)).toHaveAttribute('data-touch', 'false');
+    });
+});
diff --git a/client_v2/src/__tests__/hooks/use-scroll-edges.test.tsx b/client_v2/src/__tests__/hooks/use-scroll-edges.test.tsx
new file mode 100644
index 00000000000..27122495c1e
--- /dev/null
+++ b/client_v2/src/__tests__/hooks/use-scroll-edges.test.tsx
@@ -0,0 +1,215 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@solidjs/testing-library';
+
+import { useScrollEdges } from 'panel/hooks/useScrollEdges';
+
+/**
+ * jsdom reports 0 for every scroll metric, so the scroll range has to be
+ * injected.  The properties live on `Element.prototype`, so shadowing them on
+ * `HTMLElement.prototype` and deleting the shadow restores the originals.
+ */
+type Metrics = { scrollTop: number; scrollHeight: number; clientHeight: number };
+
+let metrics: Metrics = { scrollTop: 0, scrollHeight: 0, clientHeight: 0 };
+
+const installScrollMetrics = (next: Partial<Metrics> = {}) => {
+    metrics = { scrollTop: 0, scrollHeight: 0, clientHeight: 0, ...next };
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollTop', {
+        configurable: true,
+        get: () => metrics.scrollTop,
+        set: (value: number) => {
+            metrics.scrollTop = value;
+        },
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+        configurable: true,
+        get: () => metrics.scrollHeight,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+        configurable: true,
+        get: () => metrics.clientHeight,
+    });
+};
+
+const restoreScrollMetrics = () => {
+    Reflect.deleteProperty(HTMLElement.prototype, 'scrollTop');
+    Reflect.deleteProperty(HTMLElement.prototype, 'scrollHeight');
+    Reflect.deleteProperty(HTMLElement.prototype, 'clientHeight');
+};
+
+let observerCallback: ResizeObserverCallback | undefined;
+let observedTargets: Element[] = [];
+let disconnectCount = 0;
+
+/** Replaces the global no-op `ResizeObserver` from `src/__tests__/setup.ts`. */
+const installResizeObserver = () => {
+    observerCallback = undefined;
+    observedTargets = [];
+    disconnectCount = 0;
+
+    class FakeResizeObserver {
+        constructor(callback: ResizeObserverCallback) {
+            observerCallback = callback;
+        }
+
+        observe(target: Element) {
+            observedTargets.push(target);
+        }
+
+        unobserve() {}
+
+        disconnect() {
+            disconnectCount += 1;
+        }
+    }
+
+    window.ResizeObserver = FakeResizeObserver as unknown as typeof ResizeObserver;
+};
+
+const Harness = () => {
+    let scrollRef: HTMLDivElement | undefined;
+
+    const { canScrollUp, canScrollDown } = useScrollEdges(() => scrollRef);
+
+    return (
+        <div
+            ref={scrollRef}
+            data-testid="scroll-area"
+            data-can-scroll-up={String(canScrollUp())}
+            data-can-scroll-down={String(canScrollDown())}
+        >
+            <div data-testid="content" />
+        </div>
+    );
+};
+
+const WithoutElement = () => {
+    const { canScrollUp, canScrollDown } = useScrollEdges(() => undefined);
+
+    return (
+        <div
+            data-testid="scroll-area"
+            data-can-scroll-up={String(canScrollUp())}
+            data-can-scroll-down={String(canScrollDown())}
+        />
+    );
+};
+
+const scrollArea = () => screen.getByTestId('scroll-area');
+
+describe('useScrollEdges', () => {
+    afterEach(() => {
+        restoreScrollMetrics();
+    });
+
+    it('reports no scrollable edges while the element is missing', () => {
+        installScrollMetrics({ scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <WithoutElement />);
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'false');
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('reports no scrollable edges when the content fits', () => {
+        installScrollMetrics({ scrollHeight: 400, clientHeight: 400 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'false');
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('reports only the bottom edge at the very top', () => {
+        installScrollMetrics({ scrollTop: 0, scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'false');
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'true');
+    });
+
+    it('reports both edges in the middle', () => {
+        installScrollMetrics({ scrollTop: 150, scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'true');
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'true');
+    });
+
+    it('reports only the top edge at the very bottom', () => {
+        installScrollMetrics({ scrollTop: 300, scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'true');
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('ignores a sub-pixel remainder at the edges', () => {
+        installScrollMetrics({ scrollTop: 0.5, scrollHeight: 400, clientHeight: 399.5 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'false');
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('re-measures on scroll', () => {
+        installScrollMetrics({ scrollTop: 0, scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'false');
+
+        metrics.scrollTop = 300;
+        fireEvent.scroll(scrollArea());
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-up', 'true');
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('re-measures when the observed element resizes', () => {
+        installScrollMetrics({ scrollTop: 0, scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'true');
+
+        // The content grew taller while the scroll position stayed put.
+        metrics.scrollHeight = 100;
+        observerCallback?.([] as ResizeObserverEntry[], {} as ResizeObserver);
+
+        expect(scrollArea()).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('observes the container together with its content', () => {
+        installScrollMetrics({ scrollTop: 0, scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+
+        expect(observedTargets).toContain(scrollArea());
+        expect(observedTargets).toContain(screen.getByTestId('content'));
+    });
+
+    it('disconnects the observer on cleanup', () => {
+        installScrollMetrics({ scrollTop: 0, scrollHeight: 400, clientHeight: 100 });
+        installResizeObserver();
+
+        render(() => <Harness />);
+        const before = disconnectCount;
+
+        cleanup();
+
+        expect(disconnectCount).toBeGreaterThan(before);
+    });
+});
diff --git a/client_v2/src/__tests__/hooks/use-switch-state.test.tsx b/client_v2/src/__tests__/hooks/use-switch-state.test.tsx
new file mode 100644
index 00000000000..bba502ad526
--- /dev/null
+++ b/client_v2/src/__tests__/hooks/use-switch-state.test.tsx
@@ -0,0 +1,71 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@solidjs/testing-library';
+import { createSignal, type Accessor } from 'solid-js';
+
+import { useSwitchState } from 'panel/hooks/useSwitchState';
+
+type HarnessProps = {
+    value: Accessor<boolean>;
+    processing: Accessor<boolean>;
+    /** Stands in for a handler that rejects the toggle. */
+    reject?: (setChecked: (next: boolean) => void) => void;
+};
+
+const Harness = (props: HarnessProps) => {
+    const [checked, setChecked] = useSwitchState(
+        () => props.value(),
+        () => props.processing(),
+    );
+
+    return (
+        <input
+            id="switch"
+            type="checkbox"
+            checked={checked()}
+            onChange={() => props.reject?.(setChecked)}
+        />
+    );
+};
+
+const getInput = () => document.querySelector('#switch') as HTMLInputElement;
+
+describe('useSwitchState', () => {
+    it('renders the store value', () => {
+        render(() => <Harness value={() => true} processing={() => false} />);
+
+        expect(getInput().checked).toBe(true);
+    });
+
+    it('reverts the DOM when a toggle is rejected', () => {
+        render(() => (
+            <Harness
+                value={() => false}
+                processing={() => false}
+                reject={(setChecked) => setChecked(false)}
+            />
+        ));
+
+        // The browser flips the checkbox itself, so the rejection has to put it
+        // back even though the store value never changed.
+        fireEvent.change(getInput(), { target: { checked: true } });
+
+        expect(getInput().checked).toBe(false);
+    });
+
+    it('re-syncs with the store once the request finishes', () => {
+        const [value, setValue] = createSignal(true);
+        const [processing, setProcessing] = createSignal(false);
+
+        render(() => <Harness value={value} processing={processing} />);
+        expect(getInput().checked).toBe(true);
+
+        // A save is in flight — the switch keeps showing the user's intent.
+        setProcessing(true);
+        setValue(false);
+        expect(getInput().checked).toBe(true);
+
+        // Once it finishes, the store wins.
+        setProcessing(false);
+        expect(getInput().checked).toBe(false);
+    });
+});
diff --git a/client_v2/src/__tests__/hooks/use-theme.test.tsx b/client_v2/src/__tests__/hooks/use-theme.test.tsx
new file mode 100644
index 00000000000..b93cd2cc562
--- /dev/null
+++ b/client_v2/src/__tests__/hooks/use-theme.test.tsx
@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, cleanup, waitFor } from '@solidjs/testing-library';
+
+import { useIsDarkTheme } from 'panel/hooks/useTheme';
+
+const Harness = () => {
+    const isDark = useIsDarkTheme();
+
+    return <div data-testid="harness" data-dark={String(isDark())} />;
+};
+
+/** Applies a theme the way `setUITheme` does, through the `<html>` attribute. */
+const applyTheme = (theme: 'light' | 'dark') => {
+    document.documentElement.dataset.theme = theme;
+};
+
+const renderHarness = () => {
+    render(() => <Harness />);
+
+    return screen.getByTestId('harness');
+};
+
+describe('useIsDarkTheme', () => {
+    it('reports false while no theme is applied', () => {
+        expect(renderHarness()).toHaveAttribute('data-dark', 'false');
+    });
+
+    it('reports false for the light theme', () => {
+        applyTheme('light');
+
+        expect(renderHarness()).toHaveAttribute('data-dark', 'false');
+    });
+
+    it('reports true for the dark theme', () => {
+        applyTheme('dark');
+
+        expect(renderHarness()).toHaveAttribute('data-dark', 'true');
+    });
+
+    it('re-evaluates when the theme changes', async () => {
+        applyTheme('light');
+        const harness = renderHarness();
+
+        expect(harness).toHaveAttribute('data-dark', 'false');
+
+        applyTheme('dark');
+
+        // MutationObserver callbacks are queued, so the update is not synchronous.
+        await waitFor(() => expect(harness).toHaveAttribute('data-dark', 'true'));
+    });
+
+    it('stops observing the theme attribute on unmount', () => {
+        const disconnect = vi.spyOn(MutationObserver.prototype, 'disconnect');
+        renderHarness();
+
+        cleanup();
+
+        expect(disconnect).toHaveBeenCalled();
+        disconnect.mockRestore();
+    });
+});
diff --git a/client_v2/src/__tests__/login-form.test.tsx b/client_v2/src/__tests__/login-form.test.tsx
new file mode 100644
index 00000000000..0c2d310200d
--- /dev/null
+++ b/client_v2/src/__tests__/login-form.test.tsx
@@ -0,0 +1,74 @@
+import { render, waitFor } from '@solidjs/testing-library';
+import { describe, it, expect } from 'vitest';
+
+import { Form } from 'panel/login/Login/Form';
+import { byViewportWidth, mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
+
+/** Applies a theme the way `setUITheme` does, through the `<html>` attribute. */
+const applyTheme = (theme: 'light' | 'dark') => {
+    document.documentElement.dataset.theme = theme;
+};
+
+/**
+ * Renders the form and returns the class list of the wrapper that carries the
+ * `onCard` styling around the field with `id`.
+ */
+const renderForm = () => {
+    const { container } = render(() => <Form onSubmit={() => {}} />);
+
+    return (id: string) => container.querySelector(`#${id}`)?.parentElement?.className ?? '';
+};
+
+describe('Login form fields', () => {
+    it('drops the card styling on mobile', () => {
+        mockMatchMedia(byViewportWidth(360));
+        applyTheme('dark');
+        const fieldClass = renderForm();
+
+        expect(fieldClass('username')).not.toContain('onCard');
+        expect(fieldClass('password')).not.toContain('onCard');
+    });
+
+    it('uses the card styling from the tablet breakpoint up in the dark theme', () => {
+        mockMatchMedia(byViewportWidth(1024));
+        applyTheme('dark');
+        const fieldClass = renderForm();
+
+        expect(fieldClass('username')).toContain('onCard');
+        expect(fieldClass('password')).toContain('onCard');
+    });
+
+    it('drops the card styling in the light theme', () => {
+        mockMatchMedia(byViewportWidth(1024));
+        applyTheme('light');
+        const fieldClass = renderForm();
+
+        expect(fieldClass('username')).not.toContain('onCard');
+        expect(fieldClass('password')).not.toContain('onCard');
+    });
+
+    it('follows the viewport when it is resized', () => {
+        const matchMedia = mockMatchMedia(byViewportWidth(360));
+        applyTheme('dark');
+        const fieldClass = renderForm();
+
+        matchMedia.set(byViewportWidth(1024));
+
+        expect(fieldClass('username')).toContain('onCard');
+        expect(fieldClass('password')).toContain('onCard');
+    });
+
+    it('follows the theme when it changes', async () => {
+        mockMatchMedia(byViewportWidth(1024));
+        applyTheme('light');
+        const fieldClass = renderForm();
+
+        expect(fieldClass('username')).not.toContain('onCard');
+
+        applyTheme('dark');
+
+        // MutationObserver callbacks are queued, so the update is not synchronous.
+        await waitFor(() => expect(fieldClass('username')).toContain('onCard'));
+        expect(fieldClass('password')).toContain('onCard');
+    });
+});
diff --git a/client_v2/src/__tests__/query-log-detail-modal.test.tsx b/client_v2/src/__tests__/query-log-detail-modal.test.tsx
index 7b6ffe470aa..0da0c72616d 100644
--- a/client_v2/src/__tests__/query-log-detail-modal.test.tsx
+++ b/client_v2/src/__tests__/query-log-detail-modal.test.tsx
@@ -142,3 +142,97 @@ describe('DetailModal actions footer', () => {
         ).not.toBeInTheDocument();
     });
 });
+
+/**
+ * jsdom reports 0 for every scroll metric, so the scroll range of the modal's
+ * scroll area has to be injected.  The properties live on `Element.prototype`,
+ * so shadowing them on `HTMLElement.prototype` and deleting the shadow restores
+ * the originals.
+ */
+const installScrollMetrics = ({
+    scrollTop = 0,
+    scrollHeight = 0,
+    clientHeight = 0,
+}: { scrollTop?: number; scrollHeight?: number; clientHeight?: number } = {}) => {
+    const metrics = { scrollTop, scrollHeight, clientHeight };
+
+    Object.defineProperty(HTMLElement.prototype, 'scrollTop', {
+        configurable: true,
+        get: () => metrics.scrollTop,
+        set: (value: number) => {
+            metrics.scrollTop = value;
+        },
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+        configurable: true,
+        get: () => metrics.scrollHeight,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+        configurable: true,
+        get: () => metrics.clientHeight,
+    });
+};
+
+const restoreScrollMetrics = () => {
+    Reflect.deleteProperty(HTMLElement.prototype, 'scrollTop');
+    Reflect.deleteProperty(HTMLElement.prototype, 'scrollHeight');
+    Reflect.deleteProperty(HTMLElement.prototype, 'clientHeight');
+};
+
+describe('DetailModal scroll edges', () => {
+    beforeEach(() => {
+        vi.spyOn(intl, 'getMessage').mockImplementation((key) => key);
+    });
+
+    afterEach(() => {
+        restoreScrollMetrics();
+        vi.restoreAllMocks();
+    });
+
+    const renderModal = () => {
+        render(() => <DetailModal {...defaultProps} entry={makeEntry()} />);
+
+        return screen.getByTestId('query-log-detail-scroll-area');
+    };
+
+    it('flags both edges while the content overflows in both directions', () => {
+        installScrollMetrics({ scrollTop: 100, scrollHeight: 600, clientHeight: 200 });
+
+        const scrollArea = renderModal();
+
+        expect(scrollArea).toHaveAttribute('data-can-scroll-up', 'true');
+        expect(scrollArea).toHaveAttribute('data-can-scroll-down', 'true');
+    });
+
+    it('flags no edges when the content fits', () => {
+        installScrollMetrics({ scrollHeight: 200, clientHeight: 200 });
+
+        const scrollArea = renderModal();
+
+        expect(scrollArea).toHaveAttribute('data-can-scroll-up', 'false');
+        expect(scrollArea).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('drops the bottom edge once scrolled all the way down', () => {
+        installScrollMetrics({ scrollTop: 400, scrollHeight: 600, clientHeight: 200 });
+
+        const scrollArea = renderModal();
+
+        expect(scrollArea).toHaveAttribute('data-can-scroll-up', 'true');
+        expect(scrollArea).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+
+    it('updates the edges when the scroll area is scrolled', () => {
+        installScrollMetrics({ scrollTop: 0, scrollHeight: 600, clientHeight: 200 });
+
+        const scrollArea = renderModal();
+        expect(scrollArea).toHaveAttribute('data-can-scroll-up', 'false');
+        expect(scrollArea).toHaveAttribute('data-can-scroll-down', 'true');
+
+        scrollArea.scrollTop = 400;
+        fireEvent.scroll(scrollArea);
+
+        expect(scrollArea).toHaveAttribute('data-can-scroll-up', 'true');
+        expect(scrollArea).toHaveAttribute('data-can-scroll-down', 'false');
+    });
+});
diff --git a/client_v2/src/__tests__/select.test.tsx b/client_v2/src/__tests__/select.test.tsx
index fcc79a9a85b..a7b75b6e0ab 100644
--- a/client_v2/src/__tests__/select.test.tsx
+++ b/client_v2/src/__tests__/select.test.tsx
@@ -299,3 +299,43 @@ describe('Select — auto-searchable threshold', () => {
         expect(document.querySelector('[data-scope="select"]')).not.toBeInTheDocument();
     });
 });
+
+describe('Select — onCard', () => {
+    it('adds the on-card class to the root when set', () => {
+        render(() => (
+            <Select options={OPTIONS} value={OPTIONS[0]} onChange={() => {}} onCard />
+        ));
+
+        expect(document.querySelector('.solid-select')?.className).toContain(
+            'solid-select--on-card',
+        );
+    });
+
+    it('does not add the on-card class by default', () => {
+        render(() => <Select options={OPTIONS} value={OPTIONS[0]} onChange={() => {}} />);
+
+        expect(document.querySelector('.solid-select')?.className).not.toContain(
+            'solid-select--on-card',
+        );
+    });
+});
+
+describe('Select — menuOnCard', () => {
+    it('adds the menu-on-card class to the root when set', () => {
+        render(() => (
+            <Select options={OPTIONS} value={OPTIONS[0]} onChange={() => {}} menuOnCard />
+        ));
+
+        expect(document.querySelector('.solid-select')?.className).toContain(
+            'solid-select--menu-on-card',
+        );
+    });
+
+    it('does not add the menu-on-card class by default', () => {
+        render(() => <Select options={OPTIONS} value={OPTIONS[0]} onChange={() => {}} />);
+
+        expect(document.querySelector('.solid-select')?.className).not.toContain(
+            'solid-select--menu-on-card',
+        );
+    });
+});
diff --git a/client_v2/src/__tests__/setup.ts b/client_v2/src/__tests__/setup.ts
index 0df0213343d..613e1bce38d 100644
--- a/client_v2/src/__tests__/setup.ts
+++ b/client_v2/src/__tests__/setup.ts
@@ -4,13 +4,17 @@ import { cleanup } from '@solidjs/testing-library';
 
 afterEach(() => cleanup());
 
+// The theme lives on `<html>` and would otherwise leak into the next test.
+afterEach(() => document.documentElement.removeAttribute('data-theme'));
+
 // Mock window.scrollTo for router navigation (jsdom doesn't implement it).
 Object.defineProperty(window, 'scrollTo', {
     writable: true,
     value: () => {},
 });
 
-// Mock window.matchMedia for components that use useIsMobile
+// Mock window.matchMedia for components that use the responsive hooks from
+// `panel/hooks/useMediaQuery`.
 Object.defineProperty(window, 'matchMedia', {
     writable: true,
     value: (query: string): MediaQueryList =>
diff --git a/client_v2/src/__tests__/static-lease-modal.test.tsx b/client_v2/src/__tests__/static-lease-modal.test.tsx
index 15ed0801578..28ff1153719 100644
--- a/client_v2/src/__tests__/static-lease-modal.test.tsx
+++ b/client_v2/src/__tests__/static-lease-modal.test.tsx
@@ -84,4 +84,13 @@ describe('StaticLeaseModal', () => {
         expect(screen.getByText(copyInDom('dhcp_mac_address_already_added'))).toBeInTheDocument();
         expect(onSubmit).not.toHaveBeenCalled();
     });
+
+    it('styles the dialog fields for the card surface', () => {
+        renderModal();
+
+        // The dialog paints `--default-cards-background`, so its fields must
+        // opt into the on-card background.
+        expect(getInput('static_lease_mac').parentElement?.className).toContain('onCard');
+        expect(getInput('static_lease_ip').parentElement?.className).toContain('onCard');
+    });
 });
diff --git a/client_v2/src/__tests__/stats-pages/stat-mobile-card.test.tsx b/client_v2/src/__tests__/stats-pages/stat-mobile-card.test.tsx
new file mode 100644
index 00000000000..63d8d33b617
--- /dev/null
+++ b/client_v2/src/__tests__/stats-pages/stat-mobile-card.test.tsx
@@ -0,0 +1,58 @@
+import { type JSX } from 'solid-js';
+import { render, screen } from '@solidjs/testing-library';
+import { HashRouter, Route } from '@solidjs/router';
+import { describe, it, expect } from 'vitest';
+
+import { StatMobileCard } from 'panel/components/Stats/blocks/StatMobileCard';
+import { copyInDom } from 'panel/__tests__/helpers/copy';
+
+const renderWithRouter = (ui: () => JSX.Element) =>
+    render(() => (
+        <HashRouter>
+            <Route path="/" component={ui} />
+        </HashRouter>
+    ));
+
+const items = [{ label: 'Queries', value: '5' }];
+
+describe('StatMobileCard', () => {
+    it('renders the whole card as a query log link when cardLink is set', () => {
+        renderWithRouter(() => (
+            <StatMobileCard
+                title="a.org"
+                cardLink={{ to: 'QueryLog', query: { search: '"a.org"' } }}
+                items={items}
+            />
+        ));
+
+        const card = screen.getByTestId('stats-mobile-card');
+        expect(card.tagName).toBe('A');
+        expect(card.getAttribute('href')).toContain('/logs');
+        expect(card.getAttribute('href')).toContain('a.org');
+        expect(card.querySelectorAll('a').length).toBe(0);
+    });
+
+    it('keeps the card a plain container without cardLink', () => {
+        renderWithRouter(() => <StatMobileCard title="a.org" items={items} />);
+
+        const card = screen.getByTestId('stats-mobile-card');
+        expect(card.tagName).toBe('DIV');
+        expect(card.getAttribute('href')).toBeNull();
+    });
+
+    it('does not follow the card link when an action is clicked', () => {
+        renderWithRouter(() => (
+            <StatMobileCard
+                title="a.org"
+                cardLink={{ to: 'QueryLog', query: { search: '"a.org"' } }}
+                items={items}
+                actions={<button type="button">{copyInDom('block_client')}</button>}
+            />
+        ));
+
+        const click = new MouseEvent('click', { bubbles: true, cancelable: true });
+        screen.getByRole('button', { name: copyInDom('block_client') }).dispatchEvent(click);
+
+        expect(click.defaultPrevented).toBe(true);
+    });
+});
diff --git a/client_v2/src/__tests__/stats-pages/stats-page.test.tsx b/client_v2/src/__tests__/stats-pages/stats-page.test.tsx
index d87b5b32490..1aeb25ff33e 100644
--- a/client_v2/src/__tests__/stats-pages/stats-page.test.tsx
+++ b/client_v2/src/__tests__/stats-pages/stats-page.test.tsx
@@ -3,10 +3,12 @@ import { HashRouter, Route } from '@solidjs/router';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 import { StatsPage } from 'panel/components/Stats/StatsPage';
+import { DEFAULT_PAGE_SIZE } from 'panel/common/ui/Table/Table';
 import type { TableColumn } from 'panel/common/ui/Table';
 import { LocalStorageHelper } from 'panel/helpers/localStorageHelper';
 import type { IOption } from 'panel/lib/helpers/utils';
 import { copy, copyInDom } from 'panel/__tests__/helpers/copy';
+import { mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
 
 type Row = { name: string; count: number };
 
@@ -33,23 +35,6 @@ const mobileSortOptions: IOption<string>[] = [
     { value: 'count:asc', label: 'Count asc' },
 ];
 
-const mockMatchMedia = (matches: boolean) => {
-    Object.defineProperty(window, 'matchMedia', {
-        writable: true,
-        value: (query: string) =>
-            ({
-                matches,
-                media: query,
-                onchange: null,
-                addListener: () => {},
-                removeListener: () => {},
-                addEventListener: () => {},
-                removeEventListener: () => {},
-                dispatchEvent: () => false,
-            }) as MediaQueryList,
-    });
-};
-
 const renderPage = (overrides: Partial<Parameters<typeof StatsPage<Row>>[0]> = {}) =>
     render(() => (
         <HashRouter>
@@ -142,6 +127,14 @@ describe('StatsPage', () => {
         expect(onRefresh).toHaveBeenCalledTimes(1);
     });
 
+    it('labels the refresh control with aria-label instead of a native title', () => {
+        const { container } = renderPage();
+
+        const refresh = screen.getByRole('button', { name: copyInDom('refresh_btn') });
+        expect(refresh).not.toHaveAttribute('title');
+        expect(container.querySelectorAll('[title]').length).toBe(0);
+    });
+
     it('shows the empty state text when nothing matches', () => {
         renderPage();
         fireEvent.input(screen.getByTestId('stats-search-input'), {
@@ -233,4 +226,56 @@ describe('StatsPage', () => {
         expect(screen.queryByTestId('stats-empty-state')).not.toBeInTheDocument();
         expect(screen.queryByTestId('stats-mobile-list')).not.toBeInTheDocument();
     });
+
+    it('renders every row as a link when rowLink is provided', () => {
+        const { container } = renderPage({
+            rowLink: (row) => ({ to: 'QueryLog', query: { search: `"${row.name}"` } }),
+        });
+
+        const rows = Array.from(container.querySelectorAll('[class*="tableRow"]'));
+        expect(rows.length).toBe(3);
+        rows.forEach((row) => {
+            expect(row.tagName).toBe('A');
+            expect(row.getAttribute('href')).toContain('/logs');
+        });
+        expect(container.querySelectorAll('a a').length).toBe(0);
+    });
+
+    it('keeps rows as plain containers when rowLink is not provided', () => {
+        const { container } = renderPage();
+
+        const rows = Array.from(container.querySelectorAll('[class*="tableRow"]'));
+        rows.forEach((row) => expect(row.tagName).toBe('DIV'));
+    });
+});
+
+describe('StatsPage — the pagination footer', () => {
+    // The rows-per-page select lives in the footer, so the footer is only
+    // worth showing once the list needs more than one page.
+    const makeRows = (count: number): Row[] =>
+        Array.from({ length: count }, (_, index) => ({
+            name: `domain-${index}.org`,
+            count: index,
+        }));
+
+    it('hides the rows-per-page select when the list fits one page (desktop)', () => {
+        mockMatchMedia(true);
+        renderPage({ rows: makeRows(DEFAULT_PAGE_SIZE) });
+
+        expect(screen.queryByTestId('pagination-page-size-select')).toBeNull();
+    });
+
+    it('hides the rows-per-page select when the list fits one page (mobile)', () => {
+        mockMatchMedia(false);
+        renderPage({ rows: makeRows(DEFAULT_PAGE_SIZE) });
+
+        expect(screen.queryByTestId('pagination-page-size-select')).toBeNull();
+    });
+
+    it('shows the rows-per-page select once the list needs a second page', () => {
+        mockMatchMedia(true);
+        renderPage({ rows: makeRows(DEFAULT_PAGE_SIZE + 1) });
+
+        expect(screen.getByTestId('pagination-page-size-select')).toBeInTheDocument();
+    });
 });
diff --git a/client_v2/src/__tests__/stats-store.test.ts b/client_v2/src/__tests__/stats-store.test.ts
index f0f19885901..61dbb2bfdf4 100644
--- a/client_v2/src/__tests__/stats-store.test.ts
+++ b/client_v2/src/__tests__/stats-store.test.ts
@@ -2,24 +2,64 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 
 const mocks = vi.hoisted(() => ({
     stats: vi.fn(),
+    getStatsConfig: vi.fn(),
+    putStatsConfig: vi.fn(),
+    statsReset: vi.fn(),
     clientsSearch: vi.fn(),
     addErrorToast: vi.fn(),
+    addSuccessToast: vi.fn(),
 }));
 
 vi.mock('panel/api/generated', () => ({
     stats: mocks.stats,
+    getStatsConfig: mocks.getStatsConfig,
+    putStatsConfig: mocks.putStatsConfig,
+    statsReset: mocks.statsReset,
     clientsSearch: mocks.clientsSearch,
 }));
 vi.mock('panel/stores/toasts', () => ({
     addErrorToast: mocks.addErrorToast,
+    addSuccessToast: mocks.addSuccessToast,
 }));
+vi.mock('panel/common/intl', () => ({
+    default: { getMessage: vi.fn() },
+}));
+
+import { DAY } from 'panel/helpers/constants';
 
-import { getStats, statsState } from 'panel/stores/stats';
+import { getStats, getStatsConfig, statsState } from 'panel/stores/stats';
 
 describe('getStats', () => {
     beforeEach(() => {
         vi.clearAllMocks();
         mocks.clientsSearch.mockResolvedValue([]);
+        mocks.stats.mockResolvedValue({});
+    });
+
+    it('clamps the requested period by the configured stats interval', async () => {
+        await getStats(DAY * 30);
+        expect(mocks.stats).toHaveBeenCalledWith({ recent: DAY });
+
+        // A smaller period is passed through untouched.
+        await getStats(6 * 60 * 60 * 1000);
+        expect(mocks.stats).toHaveBeenCalledWith({ recent: 6 * 60 * 60 * 1000 });
+    });
+
+    it('calls the API without params when no period is given', async () => {
+        await getStats();
+        expect(mocks.stats).toHaveBeenCalledWith(undefined);
+    });
+
+    it('marks statsAttempted after a successful stats request', async () => {
+        await getStats();
+        expect(statsState.statsAttempted).toBe(true);
+    });
+
+    it('marks statsAttempted after a failed stats request', async () => {
+        mocks.stats.mockRejectedValue(new Error('network'));
+        await getStats();
+        expect(statsState.statsAttempted).toBe(true);
+        expect(mocks.addErrorToast).toHaveBeenCalled();
     });
 
     it('enriches top clients and stores normalizedTopClients', async () => {
@@ -70,3 +110,29 @@ describe('getStats', () => {
         ]);
     });
 });
+
+describe('getStatsConfig', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it('marks configAttempted but not configLoaded on failure', async () => {
+        mocks.getStatsConfig.mockRejectedValue(new Error('network'));
+
+        await getStatsConfig();
+
+        expect(statsState.configAttempted).toBe(true);
+        expect(statsState.configLoaded).toBe(false);
+        expect(mocks.addErrorToast).toHaveBeenCalled();
+    });
+
+    it('marks configLoaded and configAttempted on success', async () => {
+        mocks.getStatsConfig.mockResolvedValue({ interval: DAY * 30, enabled: true });
+
+        await getStatsConfig();
+
+        expect(statsState.configLoaded).toBe(true);
+        expect(statsState.configAttempted).toBe(true);
+        expect(statsState.interval).toBe(DAY * 30);
+    });
+});
diff --git a/client_v2/src/__tests__/toasts-store.test.ts b/client_v2/src/__tests__/toasts-store.test.ts
index 1be967704cd..10082f60b5f 100644
--- a/client_v2/src/__tests__/toasts-store.test.ts
+++ b/client_v2/src/__tests__/toasts-store.test.ts
@@ -41,4 +41,26 @@ describe('toasts store', () => {
         const last = toastsState.notices[toastsState.notices.length - 1];
         expect(last.message).toBe('config_successfully_saved');
     });
+
+    it('collapses a repeated identical error into one notice', () => {
+        addErrorToast({ error: 'boom' });
+        addErrorToast({ error: 'boom' });
+
+        expect(toastsState.notices.filter((n) => n.message === 'boom')).toHaveLength(1);
+    });
+
+    it('keeps notices with different messages apart', () => {
+        addErrorToast({ error: 'boom' });
+        addErrorToast({ error: 'bang' });
+
+        expect(toastsState.notices).toHaveLength(2);
+    });
+
+    it('does not collapse an error that carries an action', () => {
+        const action = { text: 'retry', callback: () => {} };
+        addErrorToast({ error: 'boom', action });
+        addErrorToast({ error: 'boom' });
+
+        expect(toastsState.notices).toHaveLength(2);
+    });
 });
diff --git a/client_v2/src/__tests__/tooltip.test.tsx b/client_v2/src/__tests__/tooltip.test.tsx
index 55af613f008..a3939bb2723 100644
--- a/client_v2/src/__tests__/tooltip.test.tsx
+++ b/client_v2/src/__tests__/tooltip.test.tsx
@@ -3,6 +3,7 @@ import { render, screen, fireEvent, waitFor } from '@solidjs/testing-library';
 
 import { Tooltip } from 'panel/common/ui/Tooltip';
 import { copy } from 'panel/__tests__/helpers/copy';
+import { mockMatchMedia } from 'panel/__tests__/helpers/matchMedia';
 
 // jsdom lacks ResizeObserver, which floating-ui (used by Zag positioning) needs.
 beforeAll(() => {
@@ -15,35 +16,11 @@ beforeAll(() => {
     }
 });
 
-// Restore real matchMedia between test suites.  The global mock from
-// src/__tests__/setup.ts returns matches: false for every query (desktop),
-// which is what most tests need.  Touch tests in this file replace it
-// temporarily so that (hover: none) returns true.
-const realMatchMedia = window.matchMedia;
-
-function mockTouchDevice() {
-    window.matchMedia = (query: string): MediaQueryList => {
-        const matches = query === '(hover: none)';
-        return {
-            matches,
-            media: query,
-            onchange: null,
-            addListener: () => {},
-            removeListener: () => {},
-            addEventListener: () => {},
-            removeEventListener: () => {},
-            dispatchEvent: () => false,
-        } as MediaQueryList;
-    };
-}
-
-function mockDesktop() {
-    window.matchMedia = realMatchMedia;
-}
-
 describe('Tooltip', () => {
     beforeEach(() => {
-        mockDesktop();
+        // Matches the global default from src/__tests__/setup.ts: no query
+        // matches, so the tooltip behaves as on a desktop.
+        mockMatchMedia(false);
     });
 
     afterEach(() => {
@@ -176,7 +153,7 @@ describe('Tooltip', () => {
 
     describe('touch device', () => {
         beforeEach(() => {
-            mockTouchDevice();
+            mockMatchMedia((query) => query === '(hover: none)');
         });
 
         it('opens on click (tap)', async () => {
diff --git a/client_v2/src/common/controls/Input/Input.module.pcss b/client_v2/src/common/controls/Input/Input.module.pcss
index 1159e198d76..8dd28419d54 100644
--- a/client_v2/src/common/controls/Input/Input.module.pcss
+++ b/client_v2/src/common/controls/Input/Input.module.pcss
@@ -17,15 +17,17 @@
         border-color: var(--pressed-link);
     }
 
-    &:hover,
-    &:hover .input {
-        background-color: var(--default-input-background);
-    }
+    @media (hover: hover) {
+        &:hover,
+        &:hover .input {
+            background-color: var(--default-input-background);
+        }
 
-    &:not(.disabled):hover .input:-webkit-autofill,
-    &:not(.disabled):hover .input:-webkit-autofill:hover,
-    &:not(.disabled):hover .input:-webkit-autofill:focus {
-        box-shadow: 0 0 0 100px var(--default-input-background) inset;
+        &:not(.disabled):hover .input:-webkit-autofill,
+        &:not(.disabled):hover .input:-webkit-autofill:hover,
+        &:not(.disabled):hover .input:-webkit-autofill:focus {
+            box-shadow: 0 0 0 100px var(--default-input-background) inset;
+        }
     }
 
     &.disabled {
@@ -70,6 +72,33 @@
         }
     }
 
+    &.onCard:not(.disabled) {
+        background-color: var(--page-background-additional);
+
+        .input {
+            background-color: var(--page-background-additional);
+
+            &:-webkit-autofill,
+            &:-webkit-autofill:hover,
+            &:-webkit-autofill:focus {
+                box-shadow: 0 0 0 100px var(--page-background-additional) inset;
+            }
+        }
+
+        @media (hover: hover) {
+            &:hover,
+            &:hover .input {
+                background-color: var(--page-background-additional-hovered);
+            }
+
+            &:hover .input:-webkit-autofill,
+            &:hover .input:-webkit-autofill:hover,
+            &:hover .input:-webkit-autofill:focus {
+                box-shadow: 0 0 0 100px var(--page-background-additional-hovered) inset;
+            }
+        }
+    }
+
     .input {
         color: var(--default-main-text);
         font-size: 16px;
diff --git a/client_v2/src/common/controls/Input/Input.tsx b/client_v2/src/common/controls/Input/Input.tsx
index e2fc1aea76f..7499fdef1fa 100644
--- a/client_v2/src/common/controls/Input/Input.tsx
+++ b/client_v2/src/common/controls/Input/Input.tsx
@@ -18,6 +18,7 @@ type Props = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'
     suffixIcon?: JSX.Element;
     borderless?: boolean;
     invalid?: boolean;
+    onCard?: boolean;
     maxLength?: number;
     error?: boolean;
     errorMessage?: string;
@@ -119,6 +120,7 @@ export const Input = (props: Props) => {
                         [s.prefix]: props.prefixIcon,
                         [s.suffix]: hasActions(),
                         [s.invalid]: props.invalid,
+                        [s.onCard]: props.onCard,
                         [s.focused]: focused(),
                         [s.disabled]: props.disabled,
                         [s.error]: props.error || !!computedErrorMessage(),
diff --git a/client_v2/src/common/controls/Radio/Radio.module.pcss b/client_v2/src/common/controls/Radio/Radio.module.pcss
index 3c1e6cbe38a..33abaebeb85 100644
--- a/client_v2/src/common/controls/Radio/Radio.module.pcss
+++ b/client_v2/src/common/controls/Radio/Radio.module.pcss
@@ -13,8 +13,10 @@
     border-radius: 8px;
     transition: background-color var(--t2);
 
-    &:hover:not(:has(input:disabled)) {
-        background-color: var(--page-background-additional);
+    @media (hover: hover) {
+        &:hover:not(:has(input:disabled)) {
+            background-color: var(--page-background-additional-hovered);
+        }
     }
 
     &.center {
diff --git a/client_v2/src/common/controls/Select/Select.pcss b/client_v2/src/common/controls/Select/Select.pcss
index c3814e70635..3e070a19075 100644
--- a/client_v2/src/common/controls/Select/Select.pcss
+++ b/client_v2/src/common/controls/Select/Select.pcss
@@ -75,11 +75,16 @@
             transition: background-color var(--t2);
 
             &:not([data-disabled]) {
-                &:hover,
                 &:has(:focus-visible) {
                     background-color: var(--hovered-secondary-button);
                 }
 
+                @media (hover: hover) {
+                    &:hover {
+                        background-color: var(--hovered-secondary-button);
+                    }
+                }
+
                 &:active {
                     background-color: var(--pressed-secondary-button);
                 }
@@ -187,11 +192,18 @@
         color: var(--default-main-text);
         padding: 0;
         overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        max-height: var(--available-height, none);
         box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.1);
         background-color: var(--default-dropdown-menu-background);
         z-index: 3;
         border-radius: 8px;
 
+        &[hidden] {
+            display: none;
+        }
+
         @media (min-width: 1024px) {
             left: initial;
             right: initial;
@@ -221,8 +233,10 @@
         display: flex;
         align-items: stretch;
 
-        &:hover {
-            background-color: var(--default-input-background);
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--default-input-background);
+            }
         }
 
         &:focus-within {
@@ -245,6 +259,37 @@
         }
     }
 
+    &.solid-select--on-card {
+        [data-scope='select'][data-part='control'],
+        [data-scope='combobox'][data-part='control'] {
+            background-color: var(--page-background-additional);
+
+            @media (hover: hover) {
+                &:not([data-disabled]):hover {
+                    background-color: var(--page-background-additional-hovered);
+                }
+            }
+        }
+    }
+
+    &.solid-select--menu-on-card {
+        [data-scope='select'][data-part='content'],
+        [data-scope='combobox'][data-part='content'] {
+            background-color: var(--default-page-background);
+        }
+
+        [data-scope='select'][data-part='item'],
+        [data-scope='combobox'][data-part='item'] {
+            &[data-highlighted] {
+                background-color: var(--hovered-page-background);
+            }
+
+            &[data-state='checked'] {
+                background-color: var(--pressed-page-background);
+            }
+        }
+    }
+
     [data-scope='select'][data-part='trigger'] {
         flex: 1;
         display: flex;
@@ -411,6 +456,8 @@
         overflow-y: auto;
         overflow-x: hidden;
         max-height: 340px;
+        flex: 0 1 auto;
+        min-height: 0;
 
         &::-webkit-scrollbar {
             width: 6px;
diff --git a/client_v2/src/common/controls/Select/Select.tsx b/client_v2/src/common/controls/Select/Select.tsx
index 86183a8ba95..58c49acee2c 100644
--- a/client_v2/src/common/controls/Select/Select.tsx
+++ b/client_v2/src/common/controls/Select/Select.tsx
@@ -49,6 +49,8 @@ export const Select = <
             { 'solid-select--menu-big': props.menuSize === 'big' },
             { 'solid-select--menu-right': props.menuPosition === 'right' },
             { 'solid-select--borderless': props.borderless },
+            { 'solid-select--on-card': props.onCard },
+            { 'solid-select--menu-on-card': props.menuOnCard },
             { 'solid-select--adaptive-height': props.adaptiveHeight },
             { 'solid-select--height-extra-small': props.height === 'extra-small' },
             { 'solid-select--height-small': props.height === 'small' },
diff --git a/client_v2/src/common/controls/Select/types.ts b/client_v2/src/common/controls/Select/types.ts
index ce68aa3e603..c63ffdf9b0d 100644
--- a/client_v2/src/common/controls/Select/types.ts
+++ b/client_v2/src/common/controls/Select/types.ts
@@ -34,6 +34,10 @@ export interface SelectProps<
     id?: string;
     inputId?: string;
     borderless?: boolean;
+    /** Fills the control with `--page-background-additional` for cards-background surfaces. */
+    onCard?: boolean;
+    /** Switches the dropdown menu to the `page-background` tokens on cards-background surfaces. */
+    menuOnCard?: boolean;
     adaptiveHeight?: boolean;
     lazyList?: boolean;
     closeMenuOnSelect?: boolean;
diff --git a/client_v2/src/common/controls/Switch/Switch.module.pcss b/client_v2/src/common/controls/Switch/Switch.module.pcss
index 0cc5f297920..c6f6f508bc7 100644
--- a/client_v2/src/common/controls/Switch/Switch.module.pcss
+++ b/client_v2/src/common/controls/Switch/Switch.module.pcss
@@ -32,8 +32,10 @@
     background-color: var(--fills-switch-off-default);
     transition: background-color var(--t2);
 
-    &:hover {
-        background-color: var(--fills-switch-off-hovered);
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--fills-switch-off-hovered);
+        }
     }
 
     &:before {
@@ -58,8 +60,10 @@
 .input:checked + .handler {
     background-color: var(--fills-switch-on-default);
 
-    &:hover {
-        background-color: var(--fills-switch-on-hovered);
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--fills-switch-on-hovered);
+        }
     }
 
     &:before {
@@ -75,8 +79,10 @@
     cursor: default;
     background-color: var(--fills-switch-off-disabled);
 
-    &:hover {
-        background-color: var(--fills-switch-off-disabled);
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--fills-switch-off-disabled);
+        }
     }
 
     &:before {
@@ -87,8 +93,10 @@
 .input:checked:disabled + .handler {
     background-color: var(--fills-switch-on-disabled);
 
-    &:hover {
-        background-color: var(--fills-switch-on-disabled);
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--fills-switch-on-disabled);
+        }
     }
 
     &:before {
diff --git a/client_v2/src/common/controls/Textarea/Textarea.tsx b/client_v2/src/common/controls/Textarea/Textarea.tsx
index cc63fe50850..22a9cf5afd4 100644
--- a/client_v2/src/common/controls/Textarea/Textarea.tsx
+++ b/client_v2/src/common/controls/Textarea/Textarea.tsx
@@ -21,6 +21,7 @@ type Props = Omit<
     label?: JSX.Element;
     size?: 'small' | 'medium' | 'large' | 'compact';
     errorMessage?: string;
+    onCard?: boolean;
     highlightComments?: boolean;
     commentPrefixes?: readonly CommentLineToken[];
     ref?: HTMLTextAreaElement | ((el: HTMLTextAreaElement) => void);
@@ -120,6 +121,7 @@ export const Textarea = (props: Props) => {
                                 props.size && s[props.size],
                                 { [s.error]: !!props.errorMessage },
                                 { [s.clearable]: showClearButton() },
+                                { [s.onCard]: props.onCard },
                                 props.class,
                             )}
                             id={props.id}
@@ -143,6 +145,7 @@ export const Textarea = (props: Props) => {
                     <div
                         class={cn(s.scrollArea, props.size && s[props.size], {
                             [s.error]: !!props.errorMessage,
+                            [s.onCard]: props.onCard,
                         })}
                         style={scrollAreaStyle()}
                     >
diff --git a/client_v2/src/common/controls/Textarea/styles.module.pcss b/client_v2/src/common/controls/Textarea/styles.module.pcss
index 02634995789..d71351e16b8 100644
--- a/client_v2/src/common/controls/Textarea/styles.module.pcss
+++ b/client_v2/src/common/controls/Textarea/styles.module.pcss
@@ -31,8 +31,10 @@
         border-color: var(--pressed-link);
     }
 
-    &:hover {
-        background-color: var(--default-input-background);
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--default-input-background);
+        }
     }
 
     &::placeholder {
@@ -67,6 +69,16 @@
     &.compact {
         min-height: 116px;
     }
+
+    &.onCard:not(:disabled) {
+        background-color: var(--page-background-additional);
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--page-background-additional-hovered);
+            }
+        }
+    }
 }
 
 /* Leaves room for the clear button (16px inset + 24px icon + 16px gap). */
@@ -114,8 +126,10 @@
         border-color: var(--pressed-link);
     }
 
-    &:hover {
-        background-color: var(--default-input-background);
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--default-input-background);
+        }
     }
 
     &.error {
@@ -133,6 +147,16 @@
     &.compact {
         min-height: 116px;
     }
+
+    &.onCard:not(:has(:disabled)) {
+        background-color: var(--page-background-additional);
+
+        @media (hover: hover) {
+            &:hover {
+                background-color: var(--page-background-additional-hovered);
+            }
+        }
+    }
 }
 
 .contentWrapper {
diff --git a/client_v2/src/common/styles/colors/dark.css b/client_v2/src/common/styles/colors/dark.css
index b2b50bbda7a..16d9c8ac198 100644
--- a/client_v2/src/common/styles/colors/dark.css
+++ b/client_v2/src/common/styles/colors/dark.css
@@ -8,6 +8,7 @@
     --page-background-additional-pressed: var(--gray-70);
     /* Cards background */
     --default-cards-background: var(--gray-80);
+    --default-cards-box-shadow: none;
     /* Popup background */
     --default-popup-background: var(--gray-90);
     /* Footer background */
diff --git a/client_v2/src/common/styles/colors/light.css b/client_v2/src/common/styles/colors/light.css
index 4b7767804bc..e195c1c7a0a 100644
--- a/client_v2/src/common/styles/colors/light.css
+++ b/client_v2/src/common/styles/colors/light.css
@@ -8,6 +8,7 @@
     --page-background-additional-pressed: var(--gray-30);
     /* Cards background */
     --default-cards-background: var(--gray-0);
+    --default-cards-box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.1);
     /* Popup background */
     --default-popup-background: var(--gray-0);
     /* Footer background */
diff --git a/client_v2/src/common/ui/AuthLayout/AuthLayout.module.pcss b/client_v2/src/common/ui/AuthLayout/AuthLayout.module.pcss
new file mode 100644
index 00000000000..1f0a7731a79
--- /dev/null
+++ b/client_v2/src/common/ui/AuthLayout/AuthLayout.module.pcss
@@ -0,0 +1,51 @@
+@media screen and (max-width: 767px) {
+    input,
+    select,
+    textarea {
+        font-size: 1rem;
+    }
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background-color: var(--default-page-background);
+}
+
+.content {
+    display: flex;
+    flex: 1 0 auto;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+
+    @media screen and (min-width: 768px) {
+        padding: 40px 16px;
+    }
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 632px;
+    padding-bottom: 24px;
+    box-sizing: border-box;
+
+    @media screen and (min-width: 768px) {
+        padding: 0 24px;
+        background-color: var(--default-cards-background);
+        border-radius: 16px;
+    }
+}
+
+.title {
+    margin: 0;
+    padding: 40px 16px 0;
+    color: var(--default-main-text);
+
+    @media screen and (min-width: 768px) {
+        padding: 48px 16px 16px;
+    }
+}
diff --git a/client_v2/src/common/ui/AuthLayout/AuthLayout.tsx b/client_v2/src/common/ui/AuthLayout/AuthLayout.tsx
new file mode 100644
index 00000000000..ea5791b39af
--- /dev/null
+++ b/client_v2/src/common/ui/AuthLayout/AuthLayout.tsx
@@ -0,0 +1,33 @@
+import { type JSX } from 'solid-js';
+import cn from 'clsx';
+
+import { Icons } from 'panel/common/ui/Icons';
+import { PublicHeader } from 'panel/common/ui/PublicHeader';
+import { Toasts } from 'panel/components/Toasts';
+import theme from 'panel/lib/theme';
+
+import styles from './AuthLayout.module.pcss';
+
+type Props = {
+    title: string;
+    children: JSX.Element;
+};
+
+export const AuthLayout = (props: Props) => (
+    <div class={styles.wrapper}>
+        <PublicHeader variant="auth" dropdownPosition="bottomRight" useLocalLanguage={true} />
+
+        <main class={styles.content}>
+            <div class={styles.card}>
+                <h1 class={cn(styles.title, theme.title.h4, theme.title.h3_tablet)}>
+                    {props.title}
+                </h1>
+                {props.children}
+            </div>
+        </main>
+
+        <Toasts />
+
+        <Icons />
+    </div>
+);
diff --git a/client_v2/src/common/ui/AuthLayout/index.ts b/client_v2/src/common/ui/AuthLayout/index.ts
new file mode 100644
index 00000000000..df499435805
--- /dev/null
+++ b/client_v2/src/common/ui/AuthLayout/index.ts
@@ -0,0 +1 @@
+export { AuthLayout } from './AuthLayout';
diff --git a/client_v2/src/common/ui/Banners/Banners.tsx b/client_v2/src/common/ui/Banners/Banners.tsx
index d44af497f5c..12b49827359 100644
--- a/client_v2/src/common/ui/Banners/Banners.tsx
+++ b/client_v2/src/common/ui/Banners/Banners.tsx
@@ -4,7 +4,7 @@ import { useNavigate, useSearchParams } from '@solidjs/router';
 import { Banner } from 'panel/common/ui/Banner';
 import { Button } from 'panel/common/ui/Button';
 import { MANUAL_UPDATE_LINK } from 'panel/helpers/constants';
-import { Paths } from 'panel/components/Routes/Paths';
+import { RoutePath, TLS_WIZARD_QUERY_KEY, linkPathBuilder } from 'panel/components/Routes/Paths';
 import intl from 'panel/common/intl';
 import theme from 'panel/lib/theme';
 
@@ -74,6 +74,11 @@ export const Banners = (props: Props) => {
         return active;
     });
 
+    const openTlsWizard = () =>
+        navigate(
+            linkPathBuilder(RoutePath.Encryption, undefined, { [TLS_WIZARD_QUERY_KEY]: 'true' }),
+        );
+
     const announcementLinkHandler = (announcementUrl: string) => (text: string) => (
         <a href={announcementUrl} class={theme.link.link} target="_blank" rel="noopener noreferrer">
             {text}
@@ -97,7 +102,7 @@ export const Banners = (props: Props) => {
                                             variant="secondary"
                                             size="very-small"
                                             compact
-                                            onClick={() => navigate(Paths.Encryption)}
+                                            onClick={openTlsWizard}
                                             class={s.actionButton}
                                         >
                                             {intl.getMessage('update_button')}
@@ -118,7 +123,7 @@ export const Banners = (props: Props) => {
                                             variant="secondary"
                                             size="very-small"
                                             compact
-                                            onClick={() => navigate(Paths.Encryption)}
+                                            onClick={openTlsWizard}
                                             class={s.actionButton}
                                         >
                                             {intl.getMessage('update_button')}
diff --git a/client_v2/src/common/ui/Breadcrumbs/Breadcrumbs.tsx b/client_v2/src/common/ui/Breadcrumbs/Breadcrumbs.tsx
index 204ee7905f3..b9d5e0b4cf7 100644
--- a/client_v2/src/common/ui/Breadcrumbs/Breadcrumbs.tsx
+++ b/client_v2/src/common/ui/Breadcrumbs/Breadcrumbs.tsx
@@ -2,6 +2,7 @@ import { For } from 'solid-js';
 import cn from 'clsx';
 import { Icon } from 'panel/common/ui/Icon';
 import { Link } from 'panel/common/ui/Link';
+import { TruncatedText } from 'panel/common/ui/TruncatedText';
 import { type RoutePathKey } from 'panel/components/Routes/Paths';
 import theme from 'panel/lib/theme';
 
@@ -26,7 +27,6 @@ export const Breadcrumbs = (props: Props) => (
                 <div class={s.link}>
                     <Link
                         to={path}
-                        title={title}
                         class={cn(
                             theme.link.link,
                             theme.link.noDecoration,
@@ -41,8 +41,6 @@ export const Breadcrumbs = (props: Props) => (
                 </div>
             )}
         </For>
-        <div class={cn(theme.common.textOverflow, s.current)} title={props.currentTitle}>
-            {props.currentTitle}
-        </div>
+        <TruncatedText text={props.currentTitle} class={s.current} />
     </div>
 );
diff --git a/client_v2/src/common/ui/Button/Button.module.pcss b/client_v2/src/common/ui/Button/Button.module.pcss
index aad12523d9a..067c89ffa5a 100644
--- a/client_v2/src/common/ui/Button/Button.module.pcss
+++ b/client_v2/src/common/ui/Button/Button.module.pcss
@@ -97,6 +97,23 @@
     }
 }
 
+.secondary.onCard {
+    background: var(--default-secondary-card-button);
+
+    &:hover,
+    &:focus-visible {
+        background: var(--hovered-secondary-card-button);
+    }
+
+    &:active {
+        background: var(--pressed-secondary-card-button);
+    }
+
+    &:disabled {
+        background-color: var(--disabled-secondary-card-button);
+    }
+}
+
 .ghost {
     color: var(--default-main-text);
     background: none;
diff --git a/client_v2/src/common/ui/Button/Button.tsx b/client_v2/src/common/ui/Button/Button.tsx
index 31fcedbd5bc..fd1da33dbf1 100644
--- a/client_v2/src/common/ui/Button/Button.tsx
+++ b/client_v2/src/common/ui/Button/Button.tsx
@@ -14,6 +14,7 @@ export type ButtonVariant =
 export type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
     size?: 'very-small' | 'small' | 'medium' | 'big';
     variant?: ButtonVariant;
+    onCard?: boolean;
     leftAddon?: JSX.Element;
     rightAddon?: JSX.Element;
     compact?: boolean;
@@ -28,6 +29,7 @@ export const Button = (props: ButtonProps) => {
         'className',
         'children',
         'disabled',
+        'onCard',
         'leftAddon',
         'rightAddon',
         'compact',
@@ -41,6 +43,7 @@ export const Button = (props: ButtonProps) => {
             class={cn(
                 s.button,
                 s[local.variant || 'primary'],
+                { [s.onCard]: local.onCard },
                 {
                     [s.height_xs]: local.size === 'very-small',
                     [s.height_s]: local.size === 'small',
diff --git a/client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.module.pcss b/client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.module.pcss
new file mode 100644
index 00000000000..ed34c4a4a0d
--- /dev/null
+++ b/client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.module.pcss
@@ -0,0 +1,29 @@
+.item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 56px;
+    padding: 16px;
+    border: 0;
+    background: none;
+    appearance: none;
+    font-family: inherit;
+    text-align: left;
+    color: var(--default-link);
+    cursor: pointer;
+    transition: background-color var(--t2);
+
+    &:hover,
+    &:focus-visible {
+        background-color: var(--hovered-dropdown-menu-background);
+        outline: 0;
+    }
+
+    &:active {
+        background-color: var(--pressed-dropdown-menu-background);
+    }
+}
+
+.itemDanger {
+    color: var(--default-error-link);
+}
diff --git a/client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.tsx b/client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.tsx
new file mode 100644
index 00000000000..d820eefe93d
--- /dev/null
+++ b/client_v2/src/common/ui/ClientBlockConfirm/ClientBlockMenuItem.tsx
@@ -0,0 +1,37 @@
+import { createMemo } from 'solid-js';
+import cn from 'clsx';
+
+import intl from 'panel/common/intl';
+import theme from 'panel/lib/theme';
+
+import s from './ClientBlockMenuItem.module.pcss';
+
+import type { ClientBlockAction } from './ClientBlockConfirm';
+
+type Props = {
+    action: ClientBlockAction;
+    onClick: (action: ClientBlockAction) => void;
+    class?: string;
+};
+
+/**
+ * The block/unblock action for one client, shared by the Dashboard card and
+ * the Top clients page.  Rendered as a `<button>` so it is keyboard-operable
+ * both inline on mobile and inside the desktop dropdown.
+ */
+export const ClientBlockMenuItem = (props: Props) => {
+    const isBlock = createMemo(() => props.action === 'block');
+
+    return (
+        <button
+            type="button"
+            class={cn(theme.text.t2, theme.text.condenced, s.item, props.class, {
+                [s.itemDanger]: isBlock(),
+            })}
+            data-testid={isBlock() ? 'client-block-menu-item' : 'client-unblock-menu-item'}
+            onClick={() => props.onClick(props.action)}
+        >
+            {isBlock() ? intl.getMessage('block_client') : intl.getMessage('unblock_client')}
+        </button>
+    );
+};
diff --git a/client_v2/src/common/ui/ClientBlockConfirm/index.ts b/client_v2/src/common/ui/ClientBlockConfirm/index.ts
index 52cb63ed831..b8370c523a7 100644
--- a/client_v2/src/common/ui/ClientBlockConfirm/index.ts
+++ b/client_v2/src/common/ui/ClientBlockConfirm/index.ts
@@ -4,4 +4,5 @@ export {
     CLIENT_BLOCK_CONFIRM_SUBMIT_TEST_ID,
     initialClientBlockConfirmState,
 } from './ClientBlockConfirm';
+export { ClientBlockMenuItem } from './ClientBlockMenuItem';
 export type { ClientBlockAction, ClientBlockConfirmState } from './ClientBlockConfirm';
diff --git a/client_v2/src/common/ui/ConfigDialog/ConfigDialog.tsx b/client_v2/src/common/ui/ConfigDialog/ConfigDialog.tsx
index 2ebfa81ca71..a30e90dfc75 100644
--- a/client_v2/src/common/ui/ConfigDialog/ConfigDialog.tsx
+++ b/client_v2/src/common/ui/ConfigDialog/ConfigDialog.tsx
@@ -2,7 +2,7 @@ import { type JSX, Show } from 'solid-js';
 import cn from 'clsx';
 
 import { Dialog } from 'panel/common/ui/Dialog';
-import { Button } from 'panel/common/ui/Button';
+import { Button, type ButtonVariant } from 'panel/common/ui/Button';
 import intl from 'panel/common/intl';
 
 import s from './ConfigDialog.module.pcss';
@@ -20,6 +20,7 @@ type Props = {
     description?: JSX.Element;
     hideSubmit?: boolean;
     buttonText?: string;
+    buttonVariant?: ButtonVariant;
 };
 
 export const ConfigDialog = (props: Props) => {
@@ -41,7 +42,7 @@ export const ConfigDialog = (props: Props) => {
                 {props.footer}
                 <Show when={!props.hideSubmit}>
                     <Button
-                        variant="primary"
+                        variant={props.buttonVariant ?? 'primary'}
                         class={s.saveButton}
                         disabled={isDisabled()}
                         data-testid="config-dialog-save"
diff --git a/client_v2/src/common/ui/ConfirmDialog/ConfirmDialog.tsx b/client_v2/src/common/ui/ConfirmDialog/ConfirmDialog.tsx
index 5cbfc4ed569..92f7e3b0be4 100644
--- a/client_v2/src/common/ui/ConfirmDialog/ConfirmDialog.tsx
+++ b/client_v2/src/common/ui/ConfirmDialog/ConfirmDialog.tsx
@@ -59,6 +59,7 @@ export const ConfirmDialog = (props: Props) => (
                         size="small"
                         onClick={props.onClose}
                         class={theme.dialog.button}
+                        onCard
                     >
                         {props.cancelText}
                     </Button>
diff --git a/client_v2/src/common/ui/CopiedText/CopiedText.module.pcss b/client_v2/src/common/ui/CopiedText/CopiedText.module.pcss
index 6224ba385c9..a6f57b14192 100644
--- a/client_v2/src/common/ui/CopiedText/CopiedText.module.pcss
+++ b/client_v2/src/common/ui/CopiedText/CopiedText.module.pcss
@@ -15,8 +15,10 @@
 }
 
 .container {
-    &:hover {
-        background: var(--page-background-additional-hovered);
+    @media (hover: hover) {
+        &:hover {
+            background: var(--page-background-additional-hovered);
+        }
     }
 
     &:focus {
diff --git a/client_v2/src/common/ui/DangerLink/DangerLink.module.pcss b/client_v2/src/common/ui/DangerLink/DangerLink.module.pcss
new file mode 100644
index 00000000000..0b4339772cd
--- /dev/null
+++ b/client_v2/src/common/ui/DangerLink/DangerLink.module.pcss
@@ -0,0 +1,30 @@
+.dangerLink {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 128px;
+    min-height: 24px;
+    margin-top: 32px;
+    padding: 8px 16px;
+    border: none;
+    background: transparent;
+    text-align: left;
+    color: var(--default-error-link);
+    cursor: pointer;
+    transition: color var(--t2);
+
+    &:hover,
+    &:focus-visible {
+        color: var(--hovered-danger-button);
+        text-decoration: underline;
+    }
+
+    &:active {
+        color: var(--pressed-danger-button);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        color: var(--disabled-main-button);
+    }
+}
diff --git a/client_v2/src/common/ui/DangerLink/DangerLink.tsx b/client_v2/src/common/ui/DangerLink/DangerLink.tsx
new file mode 100644
index 00000000000..c21d9925fdd
--- /dev/null
+++ b/client_v2/src/common/ui/DangerLink/DangerLink.tsx
@@ -0,0 +1,26 @@
+import { type JSX } from 'solid-js';
+import cn from 'clsx';
+
+import theme from 'panel/lib/theme';
+
+import s from './DangerLink.module.pcss';
+
+type Props = {
+    children: JSX.Element;
+    onClick: () => void;
+    class?: string;
+    disabled?: boolean;
+    testId?: string;
+};
+
+export const DangerLink = (props: Props) => (
+    <button
+        type="button"
+        data-testid={props.testId}
+        disabled={props.disabled}
+        onClick={() => props.onClick()}
+        class={cn(theme.text.t2, theme.text.condenced, s.dangerLink, props.class)}
+    >
+        {props.children}
+    </button>
+);
diff --git a/client_v2/src/common/ui/DangerLink/index.ts b/client_v2/src/common/ui/DangerLink/index.ts
new file mode 100644
index 00000000000..902c68ebe4c
--- /dev/null
+++ b/client_v2/src/common/ui/DangerLink/index.ts
@@ -0,0 +1 @@
+export { DangerLink } from './DangerLink';
diff --git a/client_v2/src/common/ui/Dialog/Dialog.pcss b/client_v2/src/common/ui/Dialog/Dialog.pcss
index 0d9ec690a14..acd6b892a2e 100644
--- a/client_v2/src/common/ui/Dialog/Dialog.pcss
+++ b/client_v2/src/common/ui/Dialog/Dialog.pcss
@@ -43,7 +43,7 @@
     margin: 0 auto;
     max-width: 720px;
     max-height: calc(100vh - 32px);
-    background-color: var(--default-page-background);
+    background-color: var(--default-cards-background);
     border: none;
     border-radius: 16px;
     background-clip: border-box;
diff --git a/client_v2/src/common/ui/Dropdown/Dropdown.module.pcss b/client_v2/src/common/ui/Dropdown/Dropdown.module.pcss
index e58d7f96dc7..9af4804481d 100644
--- a/client_v2/src/common/ui/Dropdown/Dropdown.module.pcss
+++ b/client_v2/src/common/ui/Dropdown/Dropdown.module.pcss
@@ -10,7 +10,6 @@
 .selectOverlay {
     width: 100%;
     max-width: calc(100% - 48px);
-    -webkit-tap-highlight-color: transparent;
 
     @media (min-width: 768px) {
         max-width: 528px;
diff --git a/client_v2/src/common/ui/Dropzone/Dropzone.module.pcss b/client_v2/src/common/ui/Dropzone/Dropzone.module.pcss
index ed7e23b0562..35e27bd2fd7 100644
--- a/client_v2/src/common/ui/Dropzone/Dropzone.module.pcss
+++ b/client_v2/src/common/ui/Dropzone/Dropzone.module.pcss
@@ -7,7 +7,7 @@
     width: 100%;
     min-height: 146px;
     padding: 16px;
-    border: 1px solid transparent;
+    border: 1px dashed var(--default-item-divider);
     border-radius: 16px;
     background-color: var(--page-background-additional);
     color: var(--default-description-text);
@@ -17,7 +17,7 @@
 
     &.dragOver {
         background-color: var(--fills-backgrounds-recent-activity);
-        border: 1px dashed var(--default-product-icon);
+        border-color: var(--default-product-icon);
         color: var(--default-main-text);
     }
 }
diff --git a/client_v2/src/common/ui/Guide/Guide.tsx b/client_v2/src/common/ui/Guide/Guide.tsx
index 06ed57d982a..8e7aa4e92d6 100644
--- a/client_v2/src/common/ui/Guide/Guide.tsx
+++ b/client_v2/src/common/ui/Guide/Guide.tsx
@@ -33,7 +33,7 @@ const RouterLayout = (props: PlatformLayoutProps) => (
         <div class={s.guideText}>
             <div class={s.guideParagraph}>{intl.getMessage('setup_devices_router_desc_1')}</div>
             <ol class={cn({ [s.strongNumbers]: true })}>
-                <li class={s.guideItem}>
+                <li>
                     <strong class={s.guideItemTitle}>
                         {intl.getMessage('setup_devices_router_list_1_title')}
                     </strong>
@@ -42,7 +42,7 @@ const RouterLayout = (props: PlatformLayoutProps) => (
                         code2: () => <CopiedText text="http://192.168.1.1" />,
                     })}
                 </li>
-                <li class={s.guideItem}>
+                <li>
                     <strong class={s.guideItemTitle}>
                         {intl.getMessage('setup_devices_router_list_2_title')}
                     </strong>
@@ -68,14 +68,14 @@ const RouterLayout = (props: PlatformLayoutProps) => (
 const WindowsLayout = () => (
     <div title="Windows">
         <div class={s.title}>{intl.getMessage('setup_devices_windows_title')}</div>
-        <div class={s.text}>
+        <div class={s.guideText}>
             <ol class={s.guideList}>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_windows_list_1')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_windows_list_2')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_windows_list_3')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_windows_list_4')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_windows_list_5')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_windows_list_6')}</li>
+                <li>{intl.getMessage('setup_devices_windows_list_1')}</li>
+                <li>{intl.getMessage('setup_devices_windows_list_2')}</li>
+                <li>{intl.getMessage('setup_devices_windows_list_3')}</li>
+                <li>{intl.getMessage('setup_devices_windows_list_4')}</li>
+                <li>{intl.getMessage('setup_devices_windows_list_5')}</li>
+                <li>{intl.getMessage('setup_devices_windows_list_6')}</li>
             </ol>
         </div>
     </div>
@@ -84,11 +84,11 @@ const WindowsLayout = () => (
 const MacOSLayout = () => (
     <div title="macOS">
         <div class={s.title}>macOS</div>
-        <div class={s.text}>
+        <div class={s.guideText}>
             <ol class={s.guideList}>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_macos_list_1')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_macos_list_2')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_macos_list_3')}</li>
+                <li>{intl.getMessage('setup_devices_macos_list_1')}</li>
+                <li>{intl.getMessage('setup_devices_macos_list_2')}</li>
+                <li>{intl.getMessage('setup_devices_macos_list_3')}</li>
             </ol>
         </div>
     </div>
@@ -97,12 +97,12 @@ const MacOSLayout = () => (
 const AndroidLayout = () => (
     <div title="Android">
         <div class={s.title}>Android</div>
-        <div class={s.text}>
+        <div class={s.guideText}>
             <ol class={s.guideList}>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_android_list_1')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_android_list_2')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_android_list_3')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_android_list_4')}</li>
+                <li>{intl.getMessage('setup_devices_android_list_1')}</li>
+                <li>{intl.getMessage('setup_devices_android_list_2')}</li>
+                <li>{intl.getMessage('setup_devices_android_list_3')}</li>
+                <li>{intl.getMessage('setup_devices_android_list_4')}</li>
             </ol>
         </div>
     </div>
@@ -111,19 +111,19 @@ const AndroidLayout = () => (
 const IOSLayout = () => (
     <div title="iOS">
         <div class={s.title}>iOS</div>
-        <div class={s.text}>
+        <div class={s.guideText}>
             <ol class={s.guideList}>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_ios_list_1')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_ios_list_2')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_ios_list_3')}</li>
-                <li class={s.guideItem}>{intl.getMessage('setup_devices_ios_list_4')}</li>
+                <li>{intl.getMessage('setup_devices_ios_list_1')}</li>
+                <li>{intl.getMessage('setup_devices_ios_list_2')}</li>
+                <li>{intl.getMessage('setup_devices_ios_list_3')}</li>
+                <li>{intl.getMessage('setup_devices_ios_list_4')}</li>
             </ol>
         </div>
     </div>
 );
 
 const renderDnsDevicesList = () => (
-    <div class={s.deviceDnsList}>
+    <div>
         <div class={s.guideParagraph}>
             <div class={s.guideTitle}>
                 <strong>Android</strong>
@@ -327,7 +327,7 @@ const getDnsSettingsContent = (
         </div>
     ) : (
         <div class={s.dnsSettingsContent}>
-            <ul class={s.deviceDnsList}>
+            <ul class={s.guideList}>
                 <Show when={tlsAddress.length > 0}>
                     <li class={s.deviceDnsListItem}>
                         {intl.getMessage('setup_devices_dns_list_1', {
@@ -378,7 +378,7 @@ const getDnsSettingsContent = (
 const DnsPrivacyLayout = (props: PlatformLayoutProps) => (
     <div title={intl.getMessage('dns_privacy')}>
         <div class={s.title}>{intl.getMessage('dns_privacy')}</div>
-        <div class={s.text}>
+        <div>
             {getDnsSettingsContent(
                 props.dnsAddresses,
                 props.serverName,
diff --git a/client_v2/src/common/ui/Icon/Icon.module.pcss b/client_v2/src/common/ui/Icon/Icon.module.pcss
index 16d3a0c2172..23e4dd88741 100644
--- a/client_v2/src/common/ui/Icon/Icon.module.pcss
+++ b/client_v2/src/common/ui/Icon/Icon.module.pcss
@@ -5,7 +5,6 @@
     height: 24px;
     flex-shrink: 0;
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
 }
 
 .smallIcon {
diff --git a/client_v2/src/common/ui/Icons/Icons.tsx b/client_v2/src/common/ui/Icons/Icons.tsx
index bac9ee74653..da5da959fd1 100644
--- a/client_v2/src/common/ui/Icons/Icons.tsx
+++ b/client_v2/src/common/ui/Icons/Icons.tsx
@@ -851,6 +851,7 @@ export const Icons = () => (
             id="location"
             fill="none"
             viewBox="0 0 24 24"
+            stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="1.5"
@@ -971,7 +972,7 @@ export const Icons = () => (
             />
         </symbol>
 
-        <symbol id="check_tiny" viewBox="0 0 24 24" fill="none">
+        <symbol id="check_tiny" viewBox="0 0 24 24" fill="none" stroke="currentColor">
             <path
                 d="M5 11.7665L10.5878 17L19 8"
                 stroke-width="1.5"
diff --git a/client_v2/src/common/ui/Link/Link.tsx b/client_v2/src/common/ui/Link/Link.tsx
index f4fa37997e4..fb02608ed9f 100644
--- a/client_v2/src/common/ui/Link/Link.tsx
+++ b/client_v2/src/common/ui/Link/Link.tsx
@@ -16,6 +16,7 @@ type Props = {
     hash?: string;
     props?: LinkParams;
     class?: string;
+    style?: JSX.CSSProperties | string;
     type?: string;
     stop?: boolean;
     disabled?: boolean;
@@ -38,8 +39,10 @@ export const Link = (linkProps: Props) => {
     });
 
     const handleClick = (e: MouseEvent) => {
+        // A nested control cancelled the navigation (a row's action button), so
+        // the page must not jump to the top as if the link had been followed.
         // Don't scroll to top when navigating to a specific section (scroll handled by the target page)
-        if (!linkProps.query?.[SCROLL_QUERY_KEY]) {
+        if (!e.defaultPrevented && !linkProps.query?.[SCROLL_QUERY_KEY]) {
             setTimeout(() => {
                 window.scrollTo({ top: 0 });
             }, 100);
@@ -62,6 +65,7 @@ export const Link = (linkProps: Props) => {
                     tabIndex={0}
                     title={linkProps.title}
                     class={cn(linkProps.class)}
+                    style={linkProps.style}
                     data-testid={linkProps['data-testid']}
                 >
                     {linkProps.children}
@@ -72,6 +76,7 @@ export const Link = (linkProps: Props) => {
                 id={linkProps.id}
                 title={linkProps.title}
                 class={cn(theme.link.link, linkProps.class)}
+                style={linkProps.style}
                 href={linkPathBuilder(
                     linkProps.to,
                     linkProps.props,
diff --git a/client_v2/src/common/ui/PublicHeader/PublicHeader.module.pcss b/client_v2/src/common/ui/PublicHeader/PublicHeader.module.pcss
index fefa2ce84b7..8ac642173c8 100644
--- a/client_v2/src/common/ui/PublicHeader/PublicHeader.module.pcss
+++ b/client_v2/src/common/ui/PublicHeader/PublicHeader.module.pcss
@@ -49,3 +49,43 @@
         padding: 0 0 0 16px;
     }
 }
+
+.auth {
+    box-shadow: none;
+    border-bottom: 1px solid var(--default-cards-background);
+
+    .headerContent {
+        height: 48px;
+        flex-wrap: nowrap;
+        row-gap: 0;
+        padding: 0 12px;
+    }
+
+    .logoWrap {
+        order: 0;
+        padding: 0;
+    }
+
+    .languageWrap {
+        order: 0;
+        margin-left: auto;
+        min-width: 0;
+    }
+
+    @media screen and (min-width: 768px) {
+        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.1);
+
+        .headerContent {
+            height: 80px;
+            padding: 0;
+        }
+
+        .logoWrap {
+            padding: 0 0 0 16px;
+        }
+
+        .languageWrap {
+            min-width: 90px;
+        }
+    }
+}
diff --git a/client_v2/src/common/ui/PublicHeader/PublicHeader.tsx b/client_v2/src/common/ui/PublicHeader/PublicHeader.tsx
index 6f70c55debf..5ecbe5c74bf 100644
--- a/client_v2/src/common/ui/PublicHeader/PublicHeader.tsx
+++ b/client_v2/src/common/ui/PublicHeader/PublicHeader.tsx
@@ -1,4 +1,5 @@
 import { type JSX } from 'solid-js';
+import cn from 'clsx';
 import { Logo } from 'panel/common/ui/Sidebar';
 import intl, { type LocalesType } from 'panel/common/intl';
 import { LanguageDropdown } from 'panel/common/ui/LanguageDropdown/LanguageDropdown';
@@ -16,6 +17,12 @@ type Props = {
     center?: JSX.Element;
     useLocalLanguage?: boolean;
     hideLanguageDropdown?: boolean;
+    /**
+     * `auth` renders the compact header used by the login and
+     * forgot-password entry points: a single 48px row on mobile that grows to
+     * the regular 80px bar from the tablet breakpoint up.
+     */
+    variant?: 'default' | 'auth';
 };
 
 export const PublicHeader = (props: Props) => {
@@ -38,7 +45,7 @@ export const PublicHeader = (props: Props) => {
     const currentLanguage = () => dashboardState.language || intl.getUILanguage();
 
     return (
-        <div class={styles.header}>
+        <div class={cn(styles.header, { [styles.auth]: props.variant === 'auth' })}>
             <div class={styles.headerContent}>
                 <div class={styles.logoWrap}>
                     <Logo id="header" />
diff --git a/client_v2/src/common/ui/SettingRow/SettingRow.module.pcss b/client_v2/src/common/ui/SettingRow/SettingRow.module.pcss
index dd8720385e0..6421cec7024 100644
--- a/client_v2/src/common/ui/SettingRow/SettingRow.module.pcss
+++ b/client_v2/src/common/ui/SettingRow/SettingRow.module.pcss
@@ -9,7 +9,12 @@
         border-radius: 8px;
     }
 
-    &:hover,
+    @media (hover: hover) {
+        &:hover:not(.switchDisabled) {
+            background-color: var(--page-background-additional);
+        }
+    }
+
     &:focus-visible {
         background-color: var(--page-background-additional);
     }
@@ -22,7 +27,6 @@
 .switchDisabled {
     cursor: default;
 
-    &:hover,
     &:focus {
         background-color: transparent;
     }
@@ -102,7 +106,7 @@
 
 .value {
     margin-top: 8px;
-    font-weight: var(--weight-semi-bold);
+    font-weight: var(--weight-medium);
     color: var(--default-description-text);
     display: -webkit-box;
     -webkit-line-clamp: 2;
diff --git a/client_v2/src/common/ui/SettingsGroup/styles.module.pcss b/client_v2/src/common/ui/SettingsGroup/styles.module.pcss
index 64e23bc9304..56bc1767a00 100644
--- a/client_v2/src/common/ui/SettingsGroup/styles.module.pcss
+++ b/client_v2/src/common/ui/SettingsGroup/styles.module.pcss
@@ -28,7 +28,12 @@
     cursor: pointer;
     transition: background-color var(--t2);
 
-    &:hover,
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--page-background-additional);
+        }
+    }
+
     &:focus-within {
         background-color: var(--page-background-additional);
     }
diff --git a/client_v2/src/common/ui/Table/Table.module.pcss b/client_v2/src/common/ui/Table/Table.module.pcss
index f21f08d65f9..6e2c45a8ab3 100644
--- a/client_v2/src/common/ui/Table/Table.module.pcss
+++ b/client_v2/src/common/ui/Table/Table.module.pcss
@@ -80,7 +80,7 @@
     border-radius: 8px;
     padding: 8px 16px;
     background-color: var(--default-cards-background);
-    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: var(--default-cards-box-shadow);
     transition: background-color var(--t2);
 
     @media (min-width: 768px) {
@@ -90,9 +90,11 @@
         background-color: transparent;
         box-shadow: none;
 
-        &:hover,
-        &:focus {
-            background-color: var(--page-background-additional);
+        @media (hover: hover) {
+            &:hover,
+            &:focus {
+                background-color: var(--page-background-additional);
+            }
         }
     }
 
@@ -107,6 +109,24 @@
     cursor: pointer;
 }
 
+.tableRowLink {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--product-primary-90);
+        outline-offset: -2px;
+    }
+}
+
 .sortIcon {
     flex-shrink: 0;
     opacity: 0;
diff --git a/client_v2/src/common/ui/Table/Table.tsx b/client_v2/src/common/ui/Table/Table.tsx
index d3960576a72..ebdd5f4b8b2 100644
--- a/client_v2/src/common/ui/Table/Table.tsx
+++ b/client_v2/src/common/ui/Table/Table.tsx
@@ -3,6 +3,8 @@ import { createStore } from 'solid-js/store';
 import cn from 'clsx';
 
 import { Loader } from 'panel/common/ui/Loader';
+import { Link } from 'panel/common/ui/Link';
+import type { QueryParams, RoutePathKey } from 'panel/components/Routes/Paths';
 import { Pagination } from './blocks/Pagination/Pagination';
 import { HeaderLabel } from './blocks/HeaderLabel/HeaderLabel';
 
@@ -49,6 +51,11 @@ export interface TableProps<T = any> {
     onSortChange?: (key: string, direction: 'asc' | 'desc') => void;
     getRowId?: (row: T, index: number) => string | number;
     onRowClick?: (row: T) => void;
+    /**
+     * When it returns a target, the whole row is rendered as a link to it
+     * instead of a plain container.
+     */
+    rowLink?: (row: T) => { to: RoutePathKey; query?: QueryParams } | undefined;
     tableHeaderClass?: string;
     tableRowClass?: string;
     /**
@@ -201,9 +208,10 @@ export const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
     const hasData = () => paginatedData().length > 0;
 
     // The rows-per-page select lives in the pagination footer, so the whole
-    // footer is hidden until there is at least a full page of rows.
+    // footer is hidden until the data needs more than one page at the default
+    // size.
     const showPagination = () =>
-        (props.pagination ?? true) && sortedData().length >= DEFAULT_PAGE_SIZE;
+        (props.pagination ?? true) && sortedData().length > DEFAULT_PAGE_SIZE;
 
     return (
         <Show
@@ -272,31 +280,57 @@ export const Table = <T extends Record<string, any>>(props: TableProps<T>) => {
                         <Show when={hasData()}>
                             <For each={paginatedData()}>
                                 {(row, index) => {
+                                    const rowLink = () => props.rowLink?.(row);
+
+                                    const rowCells = () => (
+                                        <For each={props.columns}>
+                                            {(column) => (
+                                                <div
+                                                    class={cn(
+                                                        s.tableCell,
+                                                        s.tableBodyCell,
+                                                        column.class,
+                                                        {
+                                                            [s.fitContent]: column.fitContent,
+                                                            [s.clickableCell]:
+                                                                !!props.onRowClick && !rowLink(),
+                                                        },
+                                                    )}
+                                                >
+                                                    {renderCell(column, row, index())}
+                                                </div>
+                                            )}
+                                        </For>
+                                    );
+
                                     return (
-                                        <div
-                                            class={cn(s.tableRow, props.tableRowClass)}
-                                            style={tableStyle()}
-                                            onClick={() => props.onRowClick?.(row)}
+                                        <Show
+                                            when={rowLink()}
+                                            fallback={
+                                                <div
+                                                    class={cn(s.tableRow, props.tableRowClass)}
+                                                    style={tableStyle()}
+                                                    onClick={() => props.onRowClick?.(row)}
+                                                >
+                                                    {rowCells()}
+                                                </div>
+                                            }
                                         >
-                                            <For each={props.columns}>
-                                                {(column) => (
-                                                    <div
-                                                        class={cn(
-                                                            s.tableCell,
-                                                            s.tableBodyCell,
-                                                            column.class,
-                                                            {
-                                                                [s.fitContent]: column.fitContent,
-                                                                [s.clickableCell]:
-                                                                    !!props.onRowClick,
-                                                            },
-                                                        )}
-                                                    >
-                                                        {renderCell(column, row, index())}
-                                                    </div>
-                                                )}
-                                            </For>
-                                        </div>
+                                            {(link) => (
+                                                <Link
+                                                    to={link().to}
+                                                    query={link().query}
+                                                    class={cn(
+                                                        s.tableRow,
+                                                        s.tableRowLink,
+                                                        props.tableRowClass,
+                                                    )}
+                                                    style={tableStyle()}
+                                                >
+                                                    {rowCells()}
+                                                </Link>
+                                            )}
+                                        </Show>
                                     );
                                 }}
                             </For>
diff --git a/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.module.pcss b/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.module.pcss
index 341498ef433..33b98c1762a 100644
--- a/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.module.pcss
+++ b/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.module.pcss
@@ -1,7 +1,3 @@
-/* The tooltip trigger is a flex item of the header cell, so it needs the same
-   truncation-friendly sizing the bare label used to have.  `Tooltip` renders
-   this wrapper even when it is disabled — then it carries no `data-part`
-   attribute and the global trigger rules in `Tooltip.pcss` do not apply. */
 .labelWrapper {
     min-width: 0;
     overflow: hidden;
@@ -14,7 +10,6 @@
     text-overflow: ellipsis;
 }
 
-/* Same menu padding the other tooltips in the app use. */
 .tooltipContent {
     padding: 16px;
 }
diff --git a/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.tsx b/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.tsx
index a656ebd9d1a..2ecb70644dc 100644
--- a/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.tsx
+++ b/client_v2/src/common/ui/Table/blocks/HeaderLabel/HeaderLabel.tsx
@@ -1,8 +1,8 @@
-import { Show } from 'solid-js';
+import { Show, createSignal } from 'solid-js';
 import cn from 'clsx';
 
 import { Tooltip } from 'panel/common/ui/Tooltip';
-import { useMediaQuery } from 'panel/helpers/useMediaQuery';
+import { useIsTouchDevice } from 'panel/hooks/useMediaQuery';
 import { useIsTruncated } from 'panel/hooks/useIsTruncated';
 import theme from 'panel/lib/theme';
 
@@ -15,16 +15,20 @@ export type HeaderLabelProps = {
 };
 
 export const HeaderLabel = (props: HeaderLabelProps) => {
-    let labelRef: HTMLSpanElement | undefined;
+    const [labelRef, setLabelRef] = createSignal<HTMLSpanElement>();
 
-    const isTouch = useMediaQuery('(hover: none)');
-    const isTruncated = useIsTruncated(() => labelRef);
+    const isTouch = useIsTouchDevice();
 
     const useTooltip = () => !!props.tooltip && !isTouch();
 
+    const isTruncated = useIsTruncated(labelRef, {
+        enabled: useTooltip,
+        source: () => props.text,
+    });
+
     const label = (
         <span
-            ref={labelRef}
+            ref={setLabelRef}
             data-testid={`table-header-${props.columnKey}`}
             class={cn(theme.text.t3, theme.text.condenced, theme.text.semibold, s.text)}
         >
diff --git a/client_v2/src/common/ui/Table/blocks/Pagination/Pagination.tsx b/client_v2/src/common/ui/Table/blocks/Pagination/Pagination.tsx
index 63aba3ec74b..8a22fe268cd 100644
--- a/client_v2/src/common/ui/Table/blocks/Pagination/Pagination.tsx
+++ b/client_v2/src/common/ui/Table/blocks/Pagination/Pagination.tsx
@@ -6,7 +6,7 @@ import theme from 'panel/lib/theme';
 import { Select } from 'panel/common/controls/Select';
 import intl from 'panel/common/intl';
 import type { IOption } from 'panel/lib/helpers/utils';
-import { useIsMobile } from 'panel/hooks/useIsMobile';
+import { useIsMobile } from 'panel/hooks/useMediaQuery';
 
 type Props = {
     currentPage: number;
diff --git a/client_v2/src/common/ui/Tooltip/Tooltip.tsx b/client_v2/src/common/ui/Tooltip/Tooltip.tsx
index 749effb026d..81a8119a3cf 100644
--- a/client_v2/src/common/ui/Tooltip/Tooltip.tsx
+++ b/client_v2/src/common/ui/Tooltip/Tooltip.tsx
@@ -2,7 +2,7 @@ import { type JSX, Show, createMemo, createSignal } from 'solid-js';
 import cn from 'clsx';
 import { Tooltip as ArkTooltip } from '@ark-ui/solid';
 
-import { useMediaQuery } from 'panel/helpers/useMediaQuery';
+import { useIsTouchDevice } from 'panel/hooks/useMediaQuery';
 import { useOutsideDismiss } from 'panel/hooks/useOutsideDismiss';
 
 import './Tooltip.pcss';
@@ -48,7 +48,7 @@ export const Tooltip = (props: Props) => {
     }));
 
     // Touch-device detection via hover-media query.
-    const isTouch = useMediaQuery('(hover: none)');
+    const isTouch = useIsTouchDevice();
 
     // Managed open-state: hover-driven on desktop, tap-driven on touch.
     const [hoverOpen, setHoverOpen] = createSignal(false);
diff --git a/client_v2/src/common/ui/TruncatedText/TruncatedText.module.pcss b/client_v2/src/common/ui/TruncatedText/TruncatedText.module.pcss
new file mode 100644
index 00000000000..3b78348941a
--- /dev/null
+++ b/client_v2/src/common/ui/TruncatedText/TruncatedText.module.pcss
@@ -0,0 +1,13 @@
+.wrapper {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.text {
+    min-width: 0;
+}
+
+.tooltipContent {
+    padding: 16px;
+    word-break: break-word;
+}
diff --git a/client_v2/src/common/ui/TruncatedText/TruncatedText.tsx b/client_v2/src/common/ui/TruncatedText/TruncatedText.tsx
new file mode 100644
index 00000000000..f48cdb2f189
--- /dev/null
+++ b/client_v2/src/common/ui/TruncatedText/TruncatedText.tsx
@@ -0,0 +1,51 @@
+import { createSignal } from 'solid-js';
+import cn from 'clsx';
+
+import { Tooltip } from 'panel/common/ui/Tooltip';
+import { useIsTouchDevice } from 'panel/hooks/useMediaQuery';
+import { useIsTruncated } from 'panel/hooks/useIsTruncated';
+import theme from 'panel/lib/theme';
+
+import s from './TruncatedText.module.pcss';
+
+type Props = {
+    text: string;
+    /** Typography and width limits for the text element. */
+    class?: string;
+    testId?: string;
+};
+
+/**
+ * A single-line text that shows its full value in a tooltip once the browser
+ * clips it with an ellipsis.
+ *
+ * Replaces the native `title` attribute, which cannot be styled or delayed and
+ * renders a browser tooltip on top of the app's own overlays.  Touch devices
+ * get no tooltip: there is no hover to open it with.
+ */
+export const TruncatedText = (props: Props) => {
+    const [textRef, setTextRef] = createSignal<HTMLSpanElement>();
+
+    const isTouch = useIsTouchDevice();
+    const isTruncated = useIsTruncated(textRef, {
+        enabled: () => !isTouch(),
+        source: () => props.text,
+    });
+
+    return (
+        <Tooltip
+            content={<div class={cn(theme.text.t3, s.tooltipContent)}>{props.text}</div>}
+            position="bottomLeft"
+            disabled={isTouch() || !isTruncated()}
+            class={s.wrapper}
+        >
+            <span
+                ref={setTextRef}
+                data-testid={props.testId}
+                class={cn(theme.common.textOverflow, s.text, props.class)}
+            >
+                {props.text}
+            </span>
+        </Tooltip>
+    );
+};
diff --git a/client_v2/src/common/ui/TruncatedText/index.ts b/client_v2/src/common/ui/TruncatedText/index.ts
new file mode 100644
index 00000000000..5576ee4a585
--- /dev/null
+++ b/client_v2/src/common/ui/TruncatedText/index.ts
@@ -0,0 +1 @@
+export { TruncatedText } from './TruncatedText';
diff --git a/client_v2/src/components/BlockedServices/BlockedServices.module.pcss b/client_v2/src/components/BlockedServices/BlockedServices.module.pcss
index a271972c4fe..bc736642bb5 100644
--- a/client_v2/src/components/BlockedServices/BlockedServices.module.pcss
+++ b/client_v2/src/components/BlockedServices/BlockedServices.module.pcss
@@ -45,7 +45,7 @@
     border-radius: 8px;
 
     &:hover,
-    &:focus {
+    &:focus-visible {
         background-color: var(--hovered-page-background);
     }
 }
@@ -138,7 +138,7 @@
     border-radius: 8px;
 
     &:hover,
-    &:focus {
+    &:focus-visible {
         background-color: var(--hovered-page-background);
     }
 }
diff --git a/client_v2/src/components/BlockedServices/InactivitySchedule/ScheduleModal.tsx b/client_v2/src/components/BlockedServices/InactivitySchedule/ScheduleModal.tsx
index 486b637b496..02ada6172ad 100644
--- a/client_v2/src/components/BlockedServices/InactivitySchedule/ScheduleModal.tsx
+++ b/client_v2/src/components/BlockedServices/InactivitySchedule/ScheduleModal.tsx
@@ -151,6 +151,8 @@ export const ScheduleModal = (props: Props) => {
                                 height="big"
                                 size="responsive"
                                 isSearchable={false}
+                                onCard
+                                menuOnCard
                             />
                             <Select
                                 options={MINUTES_OPTIONS}
@@ -160,6 +162,8 @@ export const ScheduleModal = (props: Props) => {
                                 height="big"
                                 size="responsive"
                                 isSearchable={false}
+                                onCard
+                                menuOnCard
                             />
                         </div>
                     </div>
@@ -176,6 +180,8 @@ export const ScheduleModal = (props: Props) => {
                                 height="big"
                                 size="responsive"
                                 isSearchable={false}
+                                onCard
+                                menuOnCard
                             />
                             <Select
                                 options={endTimeOptions().minutes}
@@ -185,6 +191,8 @@ export const ScheduleModal = (props: Props) => {
                                 height="big"
                                 size="responsive"
                                 isSearchable={false}
+                                onCard
+                                menuOnCard
                             />
                         </div>
                     </div>
@@ -220,6 +228,7 @@ export const ScheduleModal = (props: Props) => {
                     size="small"
                     onClick={props.onClose}
                     class={theme.dialog.button}
+                    onCard
                 >
                     {intl.getMessage('cancel_btn')}
                 </Button>
diff --git a/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.module.pcss b/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.module.pcss
index 79ea6c48ed1..7c9d1164046 100644
--- a/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.module.pcss
+++ b/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.module.pcss
@@ -44,8 +44,9 @@
     font-size: 14px;
     line-height: 1.5;
     color: var(--default-main-text);
-    word-break: break-all;
-    overflow-wrap: break-word;
+    white-space: normal;
+    word-break: normal;
+    overflow-wrap: anywhere;
     min-width: 0;
 }
 
@@ -79,14 +80,15 @@
 
 .copyBtnTopRight {
     position: absolute;
-    top: 8px;
-    right: 8px;
+    top: 12px;
+    right: 12px;
 }
 
 .servicesIcons {
     display: flex;
     align-items: center;
     gap: 2px;
+    min-width: 0;
 }
 
 .servicesIconsList {
diff --git a/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.tsx b/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.tsx
index 23e8aee7c25..3507a1e5e62 100644
--- a/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.tsx
+++ b/client_v2/src/components/Clients/blocks/PersistentClientsTable/PersistentClientsTable.tsx
@@ -70,11 +70,15 @@ export const PersistentClientsTable = (props: Props) => {
 
                             <div class={theme.table.cellValueText}>
                                 <div class={s.idsRow}>
-                                    <span class={cn(theme.common.textOverflow, s.idsText)}>
+                                    <span
+                                        class={cn(theme.common.textOverflow, s.idsText)}
+                                        data-testid="client-ids-text"
+                                    >
                                         {firstId}
                                     </span>
                                     <Show when={hiddenCount > 0}>
                                         <Tooltip
+                                            class={s.countDropdown}
                                             overlayClass={s.idsTooltipOverlay}
                                             content={
                                                 <div class={s.idsTooltip}>
@@ -102,7 +106,12 @@ export const PersistentClientsTable = (props: Props) => {
                                                 </div>
                                             }
                                         >
-                                            <span class={s.countLabel}>{hiddenCount}</span>
+                                            <span
+                                                class={s.countLabel}
+                                                data-testid="client-ids-count"
+                                            >
+                                                {hiddenCount}
+                                            </span>
                                         </Tooltip>
                                     </Show>
                                 </div>
diff --git a/client_v2/src/components/Clients/blocks/PersistentClientsTable/ServiceIcons.tsx b/client_v2/src/components/Clients/blocks/PersistentClientsTable/ServiceIcons.tsx
index 20f78600f6f..0dc2de98ced 100644
--- a/client_v2/src/components/Clients/blocks/PersistentClientsTable/ServiceIcons.tsx
+++ b/client_v2/src/components/Clients/blocks/PersistentClientsTable/ServiceIcons.tsx
@@ -5,7 +5,11 @@ import { decodeSvg } from 'panel/helpers/helpers';
 
 import s from './PersistentClientsTable.module.pcss';
 
-const MAX_VISIBLE_SERVICES = 3;
+/**
+ * Number of icons rendered inline before the rest collapse into the "+N" chip.
+ * Two is the largest value that fits the narrowest `blocked_services` cell.
+ */
+const MAX_VISIBLE_SERVICES = 2;
 
 export type WebService = {
     id: string;
@@ -27,7 +31,7 @@ export const ServiceIcons = (props: ServiceIconsProps) => {
     const hiddenCount = createMemo(() => props.serviceIds.length - maxVisible());
 
     return (
-        <div class={s.servicesIcons}>
+        <div class={s.servicesIcons} data-testid="service-icons">
             <div class={s.servicesIconsList}>
                 <For each={visibleIds()}>
                     {(svcId) => {
@@ -37,6 +41,7 @@ export const ServiceIcons = (props: ServiceIconsProps) => {
                         return (
                             <div
                                 class={s.serviceIcon}
+                                data-testid="service-icon"
                                 title={svc.name}
                                 innerHTML={decodeSvg(svc.icon_svg)}
                             />
@@ -51,7 +56,10 @@ export const ServiceIcons = (props: ServiceIconsProps) => {
                         overlayClass={s.servicesTooltipOverlay}
                         content={
                             <div class={s.servicesTooltip}>
-                                <div class={s.servicesTooltipGrid}>
+                                <div
+                                    class={s.servicesTooltipGrid}
+                                    data-testid="services-tooltip-grid"
+                                >
                                     <For each={props.serviceIds}>
                                         {(svcId) => {
                                             const svc = props.serviceMap.get(svcId);
@@ -71,7 +79,9 @@ export const ServiceIcons = (props: ServiceIconsProps) => {
                             </div>
                         }
                     >
-                        <span class={s.countLabel}>{hiddenCount()}</span>
+                        <span class={s.countLabel} data-testid="services-count">
+                            {hiddenCount()}
+                        </span>
                     </Tooltip>
                 </div>
             </Show>
diff --git a/client_v2/src/components/Clients/blocks/RuntimeClientsTable/RuntimeClientsTable.module.pcss b/client_v2/src/components/Clients/blocks/RuntimeClientsTable/RuntimeClientsTable.module.pcss
index f0e84de084f..87fc1822344 100644
--- a/client_v2/src/components/Clients/blocks/RuntimeClientsTable/RuntimeClientsTable.module.pcss
+++ b/client_v2/src/components/Clients/blocks/RuntimeClientsTable/RuntimeClientsTable.module.pcss
@@ -69,12 +69,12 @@
     align-items: center;
     gap: 4px;
     min-width: 0;
-}
 
-.whoisIcon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
+    .whoisIcon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
 }
 
 .whoisText {
diff --git a/client_v2/src/components/Dashboard/Dashboard.tsx b/client_v2/src/components/Dashboard/Dashboard.tsx
index 3e9a08854e7..f11075b3abc 100644
--- a/client_v2/src/components/Dashboard/Dashboard.tsx
+++ b/client_v2/src/components/Dashboard/Dashboard.tsx
@@ -1,13 +1,20 @@
-import { createSignal, createMemo, createEffect, onCleanup, Show } from 'solid-js';
+import {
+    createSignal,
+    createMemo,
+    createEffect,
+    onCleanup,
+    onMount,
+    Show,
+} from 'solid-js';
 
 import theme from 'panel/lib/theme';
 import { PageLoader } from 'panel/common/ui/Loader';
 import { dashboardState, toggleProtection, getClients } from 'panel/stores/dashboard';
 import { statsState, getStats, getStatsConfig, enableStatistics } from 'panel/stores/stats';
 import { accessState, getAccessList } from 'panel/stores/access';
-import { getStoredStatsPeriod } from 'panel/helpers/statistics';
+import { getStoredStatsPeriod, getClampedMaxInterval } from 'panel/helpers/statistics';
 import { LocalStorageHelper, LOCAL_STORAGE_KEYS } from 'panel/helpers/localStorageHelper';
-import { ONE_SECOND_IN_MS, HOUR, DAY, STATS_INTERVALS_DAYS } from 'panel/helpers/constants';
+import { ONE_SECOND_IN_MS, DAY, STATS_INTERVALS_DAYS } from 'panel/helpers/constants';
 
 import { Header, getPeriodLabel } from './blocks/Header/Header';
 import { StatCards } from './blocks/StatCards';
@@ -59,49 +66,58 @@ export const Dashboard = () => {
         }
     });
 
-    const effectiveMaxStatsInterval = createMemo(() => {
-        const maxStatsInterval = statsState.interval || DAY;
-        return maxStatsInterval >= HOUR ? maxStatsInterval : DAY;
-    });
+    const maxStatsInterval = createMemo(() => getClampedMaxInterval(statsState.interval));
 
-    const periodIntervals = createMemo(() => {
-        const intervals = STATS_INTERVALS_DAYS.filter(
-            (interval) => interval <= effectiveMaxStatsInterval(),
-        );
+    const periodOptions = createMemo(() => {
+        const max = maxStatsInterval();
+        const intervals = STATS_INTERVALS_DAYS.filter((interval) => interval <= max);
 
-        if (!intervals.includes(effectiveMaxStatsInterval())) {
-            intervals.push(effectiveMaxStatsInterval());
+        if (!intervals.includes(max)) {
+            intervals.push(max);
         }
 
-        return intervals.sort((a, b) => a - b);
-    });
+        // Until the first config attempt settles the list is built from the
+        // default DAY, so keep the stored period selectable to avoid showing a
+        // period the user did not pick.
+        const storedPeriod = selectedPeriod();
+        if (!statsState.configAttempted && !intervals.includes(storedPeriod)) {
+            intervals.push(storedPeriod);
+        }
 
-    const periodOptions = createMemo(() =>
-        periodIntervals().map((interval) => ({
-            value: interval,
-            label: getPeriodLabel(interval),
-        })),
-    );
+        return intervals
+            .sort((a, b) => a - b)
+            .map((interval) => ({ value: interval, label: getPeriodLabel(interval) }));
+    });
 
-    const maxAvailablePeriod = createMemo(
-        () => periodIntervals()[periodIntervals().length - 1] || DAY,
-    );
+    const effectivePeriod = createMemo(() => {
+        const options = periodOptions();
+        return Math.min(selectedPeriod(), options[options.length - 1]?.value ?? DAY);
+    });
 
-    const effectivePeriod = createMemo(() => Math.min(selectedPeriod(), maxAvailablePeriod()));
+    onMount(() => {
+        getClients();
+        getAccessList();
+        getStatsConfig();
+    });
 
     createEffect(() => {
-        const period = effectivePeriod();
+        const period = selectedPeriod();
+        // No stats request before the first config attempt settles: it would
+        // be clamped by the default DAY and paint 24h values before the real
+        // ones.  Tracks `selectedPeriod` only; the interval/configLoaded
+        // changes alone must not re-fire the request.
+        if (!statsState.configAttempted) {
+            return;
+        }
+        // `getStats` clamps the period by the real server retention itself.
         getStats(period);
-        getStatsConfig();
-        getClients();
-        getAccessList();
     });
 
     const handleRefreshStats = () => {
-        getStats(effectivePeriod());
-        getStatsConfig();
         getClients();
         getAccessList();
+        getStatsConfig();
+        getStats(selectedPeriod());
     };
 
     const handleToggleProtection = (enabled: boolean, duration?: number) => {
@@ -121,20 +137,10 @@ export const Dashboard = () => {
     const isLoading = () =>
         statsState.processingStats || statsState.processingGetConfig || accessState.processing;
 
-    const hasStatsData = () =>
-        statsState.numDnsQueries > 0 ||
-        statsState.dnsQueries.length > 0 ||
-        statsState.topClients.length > 0 ||
-        statsState.topQueriedDomains.length > 0 ||
-        !statsState.enabled;
-
-    const [isInitialLoading, setIsInitialLoading] = createSignal(!hasStatsData());
-
-    createEffect(() => {
-        if (isInitialLoading() && !isLoading()) {
-            setIsInitialLoading(false);
-        }
-    });
+    // The page loader shows exactly once: until the first stats request
+    // settles.  Later refetches keep the previous values painted, so the
+    // loader can never flash back in.
+    const isInitialLoading = () => !statsState.statsAttempted;
 
     return (
         <div class={theme.layout.container}>
diff --git a/client_v2/src/components/Dashboard/blocks/GeneralStatistics/GeneralStatistics.tsx b/client_v2/src/components/Dashboard/blocks/GeneralStatistics/GeneralStatistics.tsx
index 4ce3596e193..fcfdcaa5b87 100644
--- a/client_v2/src/components/Dashboard/blocks/GeneralStatistics/GeneralStatistics.tsx
+++ b/client_v2/src/components/Dashboard/blocks/GeneralStatistics/GeneralStatistics.tsx
@@ -8,7 +8,7 @@ import { EmptyState } from '../EmptyState';
 import s from './GeneralStatistics.module.pcss';
 import { StatRow } from '../StatRow';
 import { RoutePath } from 'panel/components/Routes/Paths';
-import { QUERY_LOG_REASON_FILTER } from 'panel/helpers/constants';
+import { QUERY_LOG_REASON_FILTER, QUERY_LOG_STATUS_FILTER } from 'panel/helpers/constants';
 
 type Props = {
     numDnsQueries: number;
@@ -59,7 +59,10 @@ export const GeneralStatistics = (props: Props) => {
                         rowTheme="adsBlocked"
                         tooltip={intl.getMessage('ads_blocked_tooltip')}
                         linkTo={RoutePath.QueryLog}
-                        query={{ reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_FILTER.QUERY }}
+                        query={{
+                            status: QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY,
+                            reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_FILTER.QUERY,
+                        }}
                     />
 
                     <StatRow
@@ -70,7 +73,10 @@ export const GeneralStatistics = (props: Props) => {
                         rowTheme="threatsBlocked"
                         tooltip={intl.getMessage('threats_blocked_tooltip')}
                         linkTo={RoutePath.QueryLog}
-                        query={{ reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_THREATS.QUERY }}
+                        query={{
+                            status: QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY,
+                            reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_THREATS.QUERY,
+                        }}
                     />
 
                     <StatRow
@@ -82,6 +88,7 @@ export const GeneralStatistics = (props: Props) => {
                         tooltip={intl.getMessage('adult_websites_blocked_tooltip')}
                         linkTo={RoutePath.QueryLog}
                         query={{
+                            status: QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY,
                             reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_PARENTAL_CONTROL.QUERY,
                         }}
                     />
@@ -94,7 +101,10 @@ export const GeneralStatistics = (props: Props) => {
                         rowTheme="safeSearchUsed"
                         tooltip={intl.getMessage('safe_search_used_tooltip')}
                         linkTo={RoutePath.QueryLog}
-                        query={{ reason: QUERY_LOG_REASON_FILTER.SAFE_SEARCH.QUERY }}
+                        query={{
+                            status: QUERY_LOG_STATUS_FILTER.REWRITTEN.QUERY,
+                            reason: QUERY_LOG_REASON_FILTER.SAFE_SEARCH.QUERY,
+                        }}
                     />
 
                     <div class={s.rowDivider} />
diff --git a/client_v2/src/components/Dashboard/blocks/Header/Header.tsx b/client_v2/src/components/Dashboard/blocks/Header/Header.tsx
index 4acc78273a7..193f5b6e7cc 100644
--- a/client_v2/src/components/Dashboard/blocks/Header/Header.tsx
+++ b/client_v2/src/components/Dashboard/blocks/Header/Header.tsx
@@ -9,7 +9,7 @@ import { Select } from 'panel/common/controls/Select';
 import { Icon } from 'panel/common/ui/Icon';
 import { Link } from 'panel/common/ui/Link';
 import { RoutePath, SCROLL_QUERY_KEY } from 'panel/components/Routes/Paths';
-import { useIsMobile } from 'panel/hooks/useIsMobile';
+import { useIsMobile } from 'panel/hooks/useMediaQuery';
 import { DISABLE_PROTECTION_TIMINGS, ONE_SECOND_IN_MS } from 'panel/helpers/constants';
 import { msToSeconds, msToMinutes, msToHours } from 'panel/helpers/helpers';
 
diff --git a/client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.module.pcss b/client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.module.pcss
new file mode 100644
index 00000000000..007bbd15433
--- /dev/null
+++ b/client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.module.pcss
@@ -0,0 +1,9 @@
+/* The shared Tooltip stylesheet makes its trigger `inline-flex`, which would
+   shrink-wrap the row and place consecutive rows on one line.  The doubled
+   class covers the disabled (touch) wrapper, which carries no trigger
+   attributes; the attribute-qualified selector out-specifies the global
+   Tooltip trigger rule whatever the stylesheet order in the bundle is. */
+.rowTrigger.rowTrigger,
+[data-scope='tooltip'][data-part='trigger'].rowTrigger {
+    display: block;
+}
diff --git a/client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.tsx b/client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.tsx
new file mode 100644
index 00000000000..dede6600dea
--- /dev/null
+++ b/client_v2/src/components/Dashboard/blocks/RowTooltip/RowTooltip.tsx
@@ -0,0 +1,37 @@
+import { type JSX } from 'solid-js';
+import cn from 'clsx';
+
+import { Tooltip } from 'panel/common/ui/Tooltip';
+import { useIsTouchDevice } from 'panel/hooks/useMediaQuery';
+
+import s from './RowTooltip.module.pcss';
+
+type Props = {
+    content: JSX.Element;
+    class?: string;
+    /** Overrides the overlay, e.g. to make a non-interactive card transparent to the pointer. */
+    overlayClass?: string;
+    children: JSX.Element;
+};
+
+/**
+ * Makes a whole Dashboard row a tooltip trigger.
+ *
+ * Hover-only: on touch devices the tooltip is disabled entirely, so a tap
+ * follows the row link instead of revealing the details.
+ */
+export const RowTooltip = (props: Props) => {
+    const isTouch = useIsTouchDevice();
+
+    return (
+        <Tooltip
+            content={props.content}
+            position="bottomLeft"
+            disabled={isTouch()}
+            overlayClass={props.overlayClass}
+            class={cn(s.rowTrigger, props.class)}
+        >
+            {props.children}
+        </Tooltip>
+    );
+};
diff --git a/client_v2/src/components/Dashboard/blocks/RowTooltip/index.ts b/client_v2/src/components/Dashboard/blocks/RowTooltip/index.ts
new file mode 100644
index 00000000000..a773e7ff6c5
--- /dev/null
+++ b/client_v2/src/components/Dashboard/blocks/RowTooltip/index.ts
@@ -0,0 +1 @@
+export { RowTooltip } from './RowTooltip';
diff --git a/client_v2/src/components/Dashboard/blocks/StatCards/StatCards.tsx b/client_v2/src/components/Dashboard/blocks/StatCards/StatCards.tsx
index 15ac3b17d65..6966c4b8f07 100644
--- a/client_v2/src/components/Dashboard/blocks/StatCards/StatCards.tsx
+++ b/client_v2/src/components/Dashboard/blocks/StatCards/StatCards.tsx
@@ -45,7 +45,10 @@ export const StatCards = (props: Props) => {
                 percentValue={blockedPercent()}
                 cardTheme={CARDS_THEME.ADS}
                 linkTo={RoutePath.QueryLog}
-                query={{ status: QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY }}
+                query={{
+                    status: QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY,
+                    reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_FILTER.QUERY,
+                }}
             />
             <StatCard
                 value={props.numReplacedSafebrowsing}
@@ -56,7 +59,10 @@ export const StatCards = (props: Props) => {
                 percentValue={threatsPercent()}
                 cardTheme={CARDS_THEME.THREATS}
                 linkTo={RoutePath.QueryLog}
-                query={{ reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_THREATS.QUERY }}
+                query={{
+                    status: QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY,
+                    reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_THREATS.QUERY,
+                }}
             />
             <StatCard
                 value={props.numReplacedParental}
@@ -67,7 +73,10 @@ export const StatCards = (props: Props) => {
                 percentValue={parentalPercent()}
                 cardTheme={CARDS_THEME.ADULT}
                 linkTo={RoutePath.QueryLog}
-                query={{ reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_PARENTAL_CONTROL.QUERY }}
+                query={{
+                    status: QUERY_LOG_STATUS_FILTER.BLOCKED.QUERY,
+                    reason: QUERY_LOG_REASON_FILTER.BLOCKED_BY_PARENTAL_CONTROL.QUERY,
+                }}
             />
         </div>
     );
diff --git a/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.module.pcss b/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.module.pcss
index 3784eed6a56..a3b4828e1df 100644
--- a/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.module.pcss
+++ b/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.module.pcss
@@ -117,14 +117,33 @@
     white-space: nowrap;
 }
 
-.queryCountLink {
+.queryCountValue {
+    color: inherit;
+}
+
+.statRowLink {
+    cursor: pointer;
     color: inherit;
     text-decoration: none;
+    border-radius: 4px;
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:active {
         color: inherit;
-        text-decoration: underline;
+        text-decoration: none;
+    }
+
+    @media (hover: hover) {
+        &:hover,
+        &:focus-visible {
+            background-color: var(--hovered-page-background);
+        }
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--product-primary-90);
+        outline-offset: -2px;
     }
 }
 
diff --git a/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.tsx b/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.tsx
index 86c86a87f91..6e387721a90 100644
--- a/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.tsx
+++ b/client_v2/src/components/Dashboard/blocks/StatRow/StatRow.tsx
@@ -3,13 +3,12 @@ import { Show } from 'solid-js';
 import intl from 'panel/common/intl';
 import { Icon, type IconType } from 'panel/common/ui/Icon';
 import theme from 'panel/lib/theme';
-import { Tooltip } from 'panel/common/ui/Tooltip';
-import { QueriesTooltip } from 'panel/common/ui/QueriesTooltip';
 import { Link } from 'panel/common/ui/Link';
 import { type QueryParams, type RoutePathKey } from 'panel/components/Routes/Paths';
 import cn from 'clsx';
 import { formatCompactNumber } from 'panel/helpers/helpers';
 
+import { RowTooltip } from '../RowTooltip';
 import s from './StatRow.module.pcss';
 
 export type StatRowProps = {
@@ -52,20 +51,22 @@ export const StatRow = (props: StatRowProps) => {
         </div>
     );
 
-    return (
-        <div class={cn(s.statRow, s[props.rowTheme])}>
+    const rowClass = () => cn(s.statRow, s[props.rowTheme], props.linkTo && s.statRowLink);
+
+    const rowContent = () => (
+        <>
             <div class={s.statRowDropdown}>
-                <Tooltip
-                    position="bottomLeft"
-                    overlayClass={s.queryTooltipOverlay}
-                    content={<div class={cn(theme.text.t3, s.statTooltip)}>{props.tooltip}</div>}
-                    class={theme.common.noShrink}
+                <div
+                    class={cn(
+                        theme.text.t3,
+                        theme.text.condenced,
+                        theme.common.noShrink,
+                        s.statRowLeft,
+                    )}
                 >
-                    <div class={cn(theme.text.t3, theme.text.condenced, s.statRowLeft)}>
-                        <Icon icon={props.icon} class={s.tableRowIcon} />
-                        {props.label}
-                    </div>
-                </Tooltip>
+                    <Icon icon={props.icon} class={s.tableRowIcon} />
+                    {props.label}
+                </div>
             </div>
 
             <div class={s.statRowValue}>
@@ -78,25 +79,10 @@ export const StatRow = (props: StatRowProps) => {
                     }
                 >
                     <div class={s.dropdownWrapper}>
-                        <QueriesTooltip count={props.value as number}>
-                            <div class={cn(theme.text.t3, theme.text.condenced, s.queryCount)}>
-                                <Show when={props.linkTo} fallback={queriesValue()}>
-                                    <Link
-                                        to={props.linkTo}
-                                        query={props.query}
-                                        class={cn(
-                                            theme.text.t3,
-                                            theme.text.condenced,
-                                            s.queryCount,
-                                            s.queryCountLink,
-                                        )}
-                                    >
-                                        {queriesValue()}
-                                    </Link>
-                                </Show>
-                                {queriesPercent()}
-                            </div>
-                        </QueriesTooltip>
+                        <div class={cn(theme.text.t3, theme.text.condenced, s.queryCount)}>
+                            <span class={s.queryCountValue}>{queriesValue()}</span>
+                            {queriesPercent()}
+                        </div>
                     </div>
                 </Show>
 
@@ -118,6 +104,24 @@ export const StatRow = (props: StatRowProps) => {
                     />
                 </div>
             </Show>
-        </div>
+        </>
+    );
+
+    // The description is plain text, so its overlay must not swallow the
+    // pointer: it overlaps the row below and would otherwise keep that row from
+    // receiving its own hover.
+    return (
+        <RowTooltip
+            content={<div class={cn(theme.text.t3, s.statTooltip)}>{props.tooltip}</div>}
+            overlayClass={s.queryTooltipOverlay}
+        >
+            <Show when={props.linkTo} fallback={<div class={rowClass()}>{rowContent()}</div>}>
+                {(to) => (
+                    <Link to={to()} query={props.query} class={rowClass()}>
+                        {rowContent()}
+                    </Link>
+                )}
+            </Show>
+        </RowTooltip>
     );
 };
diff --git a/client_v2/src/components/Dashboard/blocks/TableCard.module.pcss b/client_v2/src/components/Dashboard/blocks/TableCard.module.pcss
index 5ea810b2518..5357efe6ece 100644
--- a/client_v2/src/components/Dashboard/blocks/TableCard.module.pcss
+++ b/client_v2/src/components/Dashboard/blocks/TableCard.module.pcss
@@ -61,24 +61,14 @@
     min-height: 40px;
     gap: 0 24px;
     padding: 16px 24px 24px;
-    transition: background-color var(--t2);
     border-bottom: 1px solid var(--default-item-divider);
 
-    &:hover,
-    &:focus {
-        background-color: var(--hovered-page-background);
-    }
-
     @media (min-width: 768px) {
         border-radius: 8px;
         padding: 8px 16px;
         border: none;
     }
 
-    &:last-child {
-        border: none;
-    }
-
     & > .queryBar {
         display: block;
         width: 100%;
@@ -112,6 +102,14 @@
 
 .tableRows {
     height: 100%;
+
+    /* A divider separates two rows, so the last row must not have one.  A
+       tooltip trigger wraps its row and is followed by its overlay, so the
+       row is never the list's last child. */
+    & > *:has(> .tableRow):not(:has(~ * > .tableRow)) > .tableRow,
+    & > .tableRow:last-child {
+        border-bottom: none;
+    }
 }
 
 .domainIcon {
@@ -134,12 +132,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-
-    &:hover,
-    &:focus {
-        color: inherit;
-        text-decoration: underline;
-    }
 }
 
 .queryCount {
@@ -153,12 +145,6 @@
 .queryCountLink {
     color: inherit;
     text-decoration: none;
-
-    &:hover,
-    &:focus {
-        color: inherit;
-        text-decoration: underline;
-    }
 }
 
 .dropdownWrapper {
@@ -212,3 +198,29 @@
         background-color: var(--default-gray-icons);
     }
 }
+
+.tableRowLink {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+    transition: background-color var(--t2);
+
+    @media (hover: hover) {
+        &:hover,
+        &:focus {
+            background-color: var(--hovered-page-background);
+        }
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--product-primary-90);
+        outline-offset: -2px;
+    }
+}
diff --git a/client_v2/src/components/Dashboard/blocks/TopBlockedDomains/TopBlockedDomains.tsx b/client_v2/src/components/Dashboard/blocks/TopBlockedDomains/TopBlockedDomains.tsx
index abfa10ad977..13f1ddef156 100644
--- a/client_v2/src/components/Dashboard/blocks/TopBlockedDomains/TopBlockedDomains.tsx
+++ b/client_v2/src/components/Dashboard/blocks/TopBlockedDomains/TopBlockedDomains.tsx
@@ -2,16 +2,16 @@ import { Show, For, createMemo } from 'solid-js';
 import cn from 'clsx';
 import intl from 'panel/common/intl';
 import { Icon } from 'panel/common/ui/Icon';
-import { Tooltip } from 'panel/common/ui/Tooltip';
-import { QueriesTooltip } from 'panel/common/ui/QueriesTooltip';
 import { Link } from 'panel/common/ui/Link';
 import { RoutePath } from 'panel/components/Routes/Paths';
 import { QUERY_LOG_STATUS_FILTER } from 'panel/helpers/constants';
 import { formatCompactNumber } from 'panel/helpers/helpers';
+import { useIsDesktop } from 'panel/hooks/useMediaQuery';
 import theme from 'panel/lib/theme';
 import { getTrackerData } from 'panel/helpers/trackers/trackers';
 import { TableHeader } from '../TableHeader';
 import { TrackerTooltip } from '../TrackerTooltip';
+import { RowTooltip } from '../RowTooltip';
 import { EmptyState } from '../EmptyState';
 import { CardFooter } from '../CardFooter';
 import { useSortedData } from '../../hooks/useSortedData';
@@ -30,7 +30,8 @@ type Props = {
 };
 
 export const TopBlockedDomains = (props: Props) => {
-    const { sortedData: sortedDomains } = useSortedData(() => props.topBlockedDomains);
+    const isDesktop = useIsDesktop();
+    const { sortedData: sortedDomains, hasMore } = useSortedData(() => props.topBlockedDomains);
 
     const hasStats = createMemo(() => props.topBlockedDomains.length > 0);
 
@@ -49,9 +50,11 @@ export const TopBlockedDomains = (props: Props) => {
                             class={s.cardSubtitleLink}
                             data-testid="blocked-total-link"
                         >
-                            {intl.getMessage('blocked_total', {
-                                value: formatCompactNumber(props.numBlockedFiltering),
-                            })}
+                            {isDesktop()
+                                ? intl.getMessage('blocked_total', {
+                                      value: formatCompactNumber(props.numBlockedFiltering),
+                                  })
+                                : formatCompactNumber(props.numBlockedFiltering)}
                         </Link>
                     </div>
                 </Show>
@@ -76,45 +79,46 @@ export const TopBlockedDomains = (props: Props) => {
                             const trackerData = getTrackerData(domain.name);
 
                             return (
-                                <div class={cn(s.tableRow, s.statRowValue)}>
-                                    <div
-                                        class={cn(
-                                            theme.text.t3,
-                                            theme.text.condenced,
-                                            s.tableRowLeft,
-                                        )}
+                                <RowTooltip
+                                    content={
+                                        <TrackerTooltip
+                                            domain={domain.name}
+                                            trackerData={trackerData}
+                                        />
+                                    }
+                                >
+                                    <Link
+                                        to={RoutePath.QueryLog}
+                                        query={{ search: `"${domain.name}"` }}
+                                        class={cn(s.tableRow, s.statRowValue, s.tableRowLink)}
+                                        data-testid="top-domain-row"
                                     >
-                                        <Show
-                                            when={trackerData}
-                                            fallback={<div class={s.tableRowDot} />}
-                                        >
-                                            <Tooltip
-                                                content={
-                                                    <TrackerTooltip trackerData={trackerData!} />
-                                                }
-                                                position="bottomLeft"
-                                                class={theme.common.noShrink}
-                                            >
-                                                <Icon icon="eye_open" class={s.tableRowIcon} />
-                                            </Tooltip>
-                                        </Show>
-                                        <Link
-                                            to={RoutePath.QueryLog}
-                                            query={{ search: `"${domain.name}"` }}
+                                        <div
                                             class={cn(
                                                 theme.text.t3,
                                                 theme.text.condenced,
-                                                s.domainNameLink,
+                                                s.tableRowLeft,
                                             )}
-                                            title={domain.name}
                                         >
-                                            <span class={s.domainName}>{domain.name}</span>
-                                        </Link>
-                                    </div>
+                                            <Show
+                                                when={trackerData}
+                                                fallback={<div class={s.tableRowDot} />}
+                                            >
+                                                <Icon icon="eye_open" class={s.tableRowIcon} />
+                                            </Show>
+                                            <span
+                                                class={cn(
+                                                    theme.text.t3,
+                                                    theme.text.condenced,
+                                                    s.domainNameLink,
+                                                )}
+                                            >
+                                                <span class={s.domainName}>{domain.name}</span>
+                                            </span>
+                                        </div>
 
-                                    <div class={s.tableRowRight}>
-                                        <div class={s.dropdowWrapper}>
-                                            <QueriesTooltip count={domain.count}>
+                                        <div class={s.tableRowRight}>
+                                            <div class={s.dropdownWrapper}>
                                                 <div
                                                     class={cn(
                                                         theme.text.t3,
@@ -122,9 +126,7 @@ export const TopBlockedDomains = (props: Props) => {
                                                         s.queryCount,
                                                     )}
                                                 >
-                                                    <Link
-                                                        to={RoutePath.QueryLog}
-                                                        query={{ search: `"${domain.name}"` }}
+                                                    <span
                                                         class={cn(
                                                             theme.text.t3,
                                                             theme.text.condenced,
@@ -132,7 +134,7 @@ export const TopBlockedDomains = (props: Props) => {
                                                         )}
                                                     >
                                                         {formatCompactNumber(domain.count)}
-                                                    </Link>
+                                                    </span>
 
                                                     <div
                                                         class={cn(
@@ -144,35 +146,37 @@ export const TopBlockedDomains = (props: Props) => {
                                                         ({percent().toFixed(2)}%)
                                                     </div>
                                                 </div>
-                                            </QueriesTooltip>
+                                            </div>
+
+                                            <div class={s.queryBar}>
+                                                <div
+                                                    class={cn(s.queryBarFill)}
+                                                    style={{ width: `${percent()}%` }}
+                                                />
+                                            </div>
                                         </div>
 
                                         <div class={s.queryBar}>
                                             <div
-                                                class={cn(s.queryBarFill)}
+                                                class={s.queryBarFill}
                                                 style={{ width: `${percent()}%` }}
                                             />
                                         </div>
-                                    </div>
-
-                                    <div class={s.queryBar}>
-                                        <div
-                                            class={s.queryBarFill}
-                                            style={{ width: `${percent()}%` }}
-                                        />
-                                    </div>
-                                </div>
+                                    </Link>
+                                </RowTooltip>
                             );
                         }}
                     </For>
                 </Show>
             </div>
 
-            <CardFooter
-                to={RoutePath.TopBlockedDomains}
-                testId="show-more-top-blocked-domains"
-                query={props.period ? { period: props.period } : undefined}
-            />
+            <Show when={hasMore()}>
+                <CardFooter
+                    to={RoutePath.TopBlockedDomains}
+                    testId="show-more-top-blocked-domains"
+                    query={props.period ? { period: props.period } : undefined}
+                />
+            </Show>
         </div>
     );
 };
diff --git a/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.module.pcss b/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.module.pcss
index 9bd8e36e0fa..21756f35d54 100644
--- a/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.module.pcss
+++ b/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.module.pcss
@@ -30,6 +30,13 @@
 
 .tableRows {
     height: 100%;
+
+    /* A divider separates two rows, so the last row must not have one.  A
+       tooltip trigger wraps its row and is followed by its overlay, so the
+       row is never the list's last child. */
+    & > *:has(> .clientRow):not(:has(~ * > .clientRow)) > .clientRow {
+        border-bottom: none;
+    }
 }
 
 .tableRowRight {
@@ -95,12 +102,6 @@
 .queryCountLink {
     color: inherit;
     text-decoration: none;
-
-    &:hover,
-    &:focus {
-        color: inherit;
-        text-decoration: underline;
-    }
 }
 
 .dropdownWrapper {
@@ -133,30 +134,6 @@
     min-width: 200px;
 }
 
-.protectionMenuItem {
-    display: flex;
-    align-items: center;
-    min-height: 56px;
-    padding: 16px;
-    cursor: pointer;
-    color: var(--default-link);
-    transition: background-color var(--t2);
-
-    &:hover,
-    &:focus-visible {
-        background-color: var(--hovered-dropdown-menu-background);
-        outline: 0;
-    }
-
-    &:active {
-        background-color: var(--pressed-dropdown-menu-background);
-    }
-}
-
-.protectionMenuItemRed {
-    color: var(--default-error-link);
-}
-
 .clientRow {
     display: flex;
     justify-content: space-between;
@@ -176,13 +153,11 @@
         border: none;
     }
 
-    &:hover,
-    &:focus {
-        background-color: var(--hovered-page-background);
-    }
-
-    &:last-child {
-        border: none;
+    @media (hover: hover) {
+        &:hover,
+        &:focus {
+            background-color: var(--hovered-page-background);
+        }
     }
 }
 
@@ -209,14 +184,21 @@
     white-space: nowrap;
 }
 
-.clientIpLink {
+.clientRowLink {
+    cursor: pointer;
     color: inherit;
     text-decoration: none;
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:active {
         color: inherit;
-        text-decoration: underline;
+        text-decoration: none;
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--product-primary-90);
+        outline-offset: -2px;
     }
 }
 
@@ -289,20 +271,54 @@
 
     & .protectionMenu {
         padding: 0;
+    }
+
+    & .tableRowMenuItem {
+        justify-content: center;
+        height: 40px;
+        min-height: 40px;
+        padding: 0 24px;
+        border-radius: 8px;
+        font-weight: var(--weight-medium);
+        background-color: transparent;
+        transition:
+            var(--t2) color,
+            var(--t2) border-color;
+    }
+
+    & .tableRowMenuItemRed {
+        border: 1px solid var(--default-danger-button);
+        color: var(--default-danger-button);
+
+        &:hover,
+        &:focus-visible {
+            background-color: transparent;
+            color: var(--hovered-danger-button);
+            border-color: var(--hovered-danger-button);
+        }
+
+        &:active {
+            background-color: transparent;
+            color: var(--pressed-danger-button);
+            border-color: var(--pressed-danger-button);
+        }
+    }
+
+    & .tableRowMenuItemGreen {
+        border: 1px solid var(--default-link);
+        color: var(--default-link);
+
+        &:hover,
+        &:focus-visible {
+            background-color: transparent;
+            color: var(--hovered-link);
+            border-color: var(--hovered-link);
+        }
 
-        & .protectionMenuItem {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 40px;
-            min-height: 40px;
-            padding: 0 24px;
-            border: 1px solid var(--default-link);
-            border-radius: 8px;
-
-            &.protectionMenuItemRed {
-                border-color: var(--default-error-link);
-            }
+        &:active {
+            background-color: transparent;
+            color: var(--pressed-link);
+            border-color: var(--pressed-link);
         }
     }
 }
diff --git a/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.tsx b/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.tsx
index a25fa50401d..d399827de4b 100644
--- a/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.tsx
+++ b/client_v2/src/components/Dashboard/blocks/TopClients/TopClients.tsx
@@ -1,13 +1,12 @@
 import { Show, For, createSignal, createMemo } from 'solid-js';
-import { useIsDesktop } from 'panel/helpers/useMediaQuery';
+import { useIsDesktop } from 'panel/hooks/useMediaQuery';
 
 import intl from 'panel/common/intl';
 import { Icon } from 'panel/common/ui/Icon';
-import { Tooltip } from 'panel/common/ui/Tooltip';
-import { QueriesTooltip } from 'panel/common/ui/QueriesTooltip';
 import { Dropdown } from 'panel/common/ui/Dropdown';
 import {
     ClientBlockConfirmDialog,
+    ClientBlockMenuItem,
     useClientBlockConfirm,
 } from 'panel/common/ui/ClientBlockConfirm';
 import { Link } from 'panel/common/ui/Link';
@@ -20,6 +19,7 @@ import { TableHeader } from '../TableHeader';
 import { EmptyState } from '../EmptyState';
 import { CardFooter } from '../CardFooter';
 import { ClientTooltip } from '../ClientTooltip';
+import { RowTooltip } from '../RowTooltip';
 
 import s from './TopClients.module.pcss';
 
@@ -38,6 +38,9 @@ type Props = {
     period?: number;
 };
 
+/** The row is a Query Log link, so the block/unblock menu must not follow it. */
+const preventRowLink = (e: MouseEvent) => e.preventDefault();
+
 export const TopClients = (props: Props) => {
     const {
         confirmState: confirmDialog,
@@ -50,7 +53,7 @@ export const TopClients = (props: Props) => {
     const [openMenuClient, setOpenMenuClient] = createSignal<string | null>(null);
 
     const isDesktop = useIsDesktop();
-    const { sortedData: sortedClients } = useSortedData(
+    const { sortedData: sortedClients, hasMore } = useSortedData(
         () => props.topClients,
         TOP_CLIENTS_VISIBLE_ITEMS,
     );
@@ -61,36 +64,20 @@ export const TopClients = (props: Props) => {
     };
 
     const getClientMenu = (client: ClientInfo) => {
+        // A memo, not a plain read: the row mapper is untracked, so the menu
+        // must track the access list itself to follow a block/unblock.
+        const blocked = createMemo(() => isClientBlocked(client.name));
+
         return (
             <div class={s.protectionMenu}>
-                <Show
-                    when={isClientBlocked(client.name)}
-                    fallback={
-                        <div
-                            class={cn(
-                                theme.text.t2,
-                                theme.text.condenced,
-                                s.protectionMenuItem,
-                                s.protectionMenuItemRed,
-                            )}
-                            onClick={() => openClientConfirmDialog(client.name, 'block')}
-                        >
-                            {intl.getMessage('block_client')}
-                        </div>
-                    }
-                >
-                    <div
-                        class={cn(
-                            theme.text.t2,
-                            theme.text.condenced,
-                            theme.dropdown.item,
-                            s.protectionMenuItem,
-                        )}
-                        onClick={() => openClientConfirmDialog(client.name, 'unblock')}
-                    >
-                        {intl.getMessage('unblock_client')}
-                    </div>
-                </Show>
+                <ClientBlockMenuItem
+                    action={blocked() ? 'unblock' : 'block'}
+                    class={cn(
+                        s.tableRowMenuItem,
+                        blocked() ? s.tableRowMenuItemGreen : s.tableRowMenuItemRed,
+                    )}
+                    onClick={(action) => openClientConfirmDialog(client.name, action)}
+                />
             </div>
         );
     };
@@ -121,29 +108,28 @@ export const TopClients = (props: Props) => {
                             );
 
                             return (
-                                <div class={s.clientRow} data-testid="top-client-row">
-                                    <div class={s.clientInfo}>
-                                        <Link
-                                            to={RoutePath.QueryLog}
-                                            query={{ search: `"${client.name}"` }}
-                                            class={cn(
-                                                theme.text.t3,
-                                                theme.text.condenced,
-                                                s.clientIp,
-                                                s.clientIpLink,
-                                            )}
-                                            title={client.name}
-                                        >
-                                            <Tooltip
-                                                position="bottomLeft"
-                                                content={
-                                                    <ClientTooltip
-                                                        address={client.name}
-                                                        whoisInfo={client.info?.whois_info}
-                                                        blocked={isClientBlocked(client.name)}
-                                                    />
-                                                }
-                                                class={theme.common.noShrink}
+                                <RowTooltip
+                                    content={
+                                        <ClientTooltip
+                                            address={client.name}
+                                            whoisInfo={client.info?.whois_info}
+                                            blocked={isClientBlocked(client.name)}
+                                        />
+                                    }
+                                >
+                                    <Link
+                                        to={RoutePath.QueryLog}
+                                        query={{ search: `"${client.name}"` }}
+                                        class={cn(s.clientRow, s.clientRowLink)}
+                                        data-testid="top-client-row"
+                                    >
+                                        <div class={s.clientInfo}>
+                                            <div
+                                                class={cn(
+                                                    theme.text.t3,
+                                                    theme.text.condenced,
+                                                    s.clientIp,
+                                                )}
                                             >
                                                 <Show
                                                     when={isClientBlocked(client.name)}
@@ -159,16 +145,14 @@ export const TopClients = (props: Props) => {
                                                         )}
                                                     />
                                                 </Show>
-                                            </Tooltip>
 
-                                            <span class={s.clientIpText}>{client.name}</span>
-                                        </Link>
-                                    </div>
+                                                <span class={s.clientIpText}>{client.name}</span>
+                                            </div>
+                                        </div>
 
-                                    <div class={s.tableRowRight}>
-                                        <Show when={isDesktop()}>
-                                            <div class={s.dropdowWrapper}>
-                                                <QueriesTooltip count={client.count}>
+                                        <div class={s.tableRowRight}>
+                                            <Show when={isDesktop()}>
+                                                <div class={s.dropdownWrapper}>
                                                     <div
                                                         class={cn(
                                                             theme.text.t3,
@@ -176,9 +160,7 @@ export const TopClients = (props: Props) => {
                                                             s.queryCount,
                                                         )}
                                                     >
-                                                        <Link
-                                                            to={RoutePath.QueryLog}
-                                                            query={{ search: `"${client.name}"` }}
+                                                        <span
                                                             class={cn(
                                                                 theme.text.t3,
                                                                 theme.text.condenced,
@@ -186,7 +168,7 @@ export const TopClients = (props: Props) => {
                                                             )}
                                                         >
                                                             {formatCompactNumber(client.count)}
-                                                        </Link>
+                                                        </span>
 
                                                         <div
                                                             class={cn(
@@ -198,41 +180,54 @@ export const TopClients = (props: Props) => {
                                                             ({percent().toFixed(1)}%)
                                                         </div>
                                                     </div>
-                                                </QueriesTooltip>
-                                            </div>
-                                        </Show>
+                                                </div>
+                                            </Show>
 
-                                        <Show when={isDesktop()}>
-                                            <div class={s.queryBar}>
-                                                <div
-                                                    class={s.queryBarFill}
-                                                    style={{ width: `${percent()}%` }}
-                                                />
+                                            <Show when={isDesktop()}>
+                                                <div class={s.queryBar}>
+                                                    <div
+                                                        class={s.queryBarFill}
+                                                        style={{ width: `${percent()}%` }}
+                                                    />
+                                                </div>
+                                            </Show>
+
+                                            <div class={s.dropdownWrapper} onClick={preventRowLink}>
+                                                <Dropdown
+                                                    wrapClass={s.clientActionsDropdown}
+                                                    menu={getClientMenu(client)}
+                                                    position="bottomRight"
+                                                    noIcon
+                                                    open={openMenuClient() === client.name}
+                                                    onOpenChange={(isOpen: boolean) =>
+                                                        setOpenMenuClient(
+                                                            isOpen ? client.name : null,
+                                                        )
+                                                    }
+                                                >
+                                                    <button type="button" class={s.actionButton}>
+                                                        <Icon icon="bullets" />
+                                                    </button>
+                                                </Dropdown>
                                             </div>
-                                        </Show>
+                                        </div>
 
-                                        <div class={s.dropdownWrapper}>
-                                            <Dropdown
-                                                wrapClass={s.clientActionsDropdown}
-                                                menu={getClientMenu(client)}
-                                                position="bottomRight"
-                                                noIcon
-                                                open={openMenuClient() === client.name}
-                                                onOpenChange={(isOpen: boolean) =>
-                                                    setOpenMenuClient(isOpen ? client.name : null)
+                                        <div class={s.tableRowInfo}>
+                                            <Show
+                                                when={client.info?.name}
+                                                fallback={
+                                                    <div
+                                                        data-testid="top-client-name"
+                                                        class={cn(
+                                                            theme.text.t4,
+                                                            theme.text.condenced,
+                                                            s.clientName,
+                                                        )}
+                                                    >
+                                                        {intl.getMessage('not_available')}
+                                                    </div>
                                                 }
                                             >
-                                                <button type="button" class={s.actionButton}>
-                                                    <Icon icon="bullets" />
-                                                </button>
-                                            </Dropdown>
-                                        </div>
-                                    </div>
-
-                                    <div class={s.tableRowInfo}>
-                                        <Show
-                                            when={client.info?.name}
-                                            fallback={
                                                 <div
                                                     data-testid="top-client-name"
                                                     class={cn(
@@ -241,81 +236,73 @@ export const TopClients = (props: Props) => {
                                                         s.clientName,
                                                     )}
                                                 >
-                                                    {intl.getMessage('not_available')}
+                                                    {client.info.name}
                                                 </div>
-                                            }
-                                        >
-                                            <div
-                                                data-testid="top-client-name"
-                                                class={cn(
-                                                    theme.text.t4,
-                                                    theme.text.condenced,
-                                                    s.clientName,
-                                                )}
-                                                title={client.info.name}
-                                            >
-                                                {client.info.name}
-                                            </div>
-                                        </Show>
-                                        <div class={s.tableRowQueriesInfo}>
-                                            <div
-                                                class={cn(
-                                                    theme.text.t3,
-                                                    theme.text.condenced,
-                                                    s.queryCount,
-                                                )}
-                                            >
-                                                <Link
-                                                    to={RoutePath.QueryLog}
-                                                    query={{ search: `"${client.name}"` }}
-                                                    class={cn(
-                                                        theme.text.t3,
-                                                        theme.text.condenced,
-                                                        s.queryCountLink,
-                                                    )}
-                                                >
-                                                    {formatCompactNumber(client.count)}
-                                                </Link>
-
+                                            </Show>
+                                            <div class={s.tableRowQueriesInfo}>
                                                 <div
                                                     class={cn(
                                                         theme.text.t3,
                                                         theme.text.condenced,
-                                                        s.queryPercent,
+                                                        s.queryCount,
                                                     )}
                                                 >
-                                                    ({percent().toFixed(1)}%)
+                                                    <span
+                                                        class={cn(
+                                                            theme.text.t3,
+                                                            theme.text.condenced,
+                                                            s.queryCountLink,
+                                                        )}
+                                                    >
+                                                        {formatCompactNumber(client.count)}
+                                                    </span>
+
+                                                    <div
+                                                        class={cn(
+                                                            theme.text.t3,
+                                                            theme.text.condenced,
+                                                            s.queryPercent,
+                                                        )}
+                                                    >
+                                                        ({percent().toFixed(1)}%)
+                                                    </div>
+                                                </div>
+
+                                                <div class={s.queryBar}>
+                                                    <div
+                                                        class={s.queryBarFill}
+                                                        style={{ width: `${percent()}%` }}
+                                                    />
                                                 </div>
                                             </div>
 
-                                            <div class={s.queryBar}>
-                                                <div
-                                                    class={s.queryBarFill}
-                                                    style={{ width: `${percent()}%` }}
-                                                />
+                                            <div class={s.tableRowActions} onClick={preventRowLink}>
+                                                {getClientMenu(client)}
                                             </div>
                                         </div>
-
-                                        <div class={s.tableRowActions}>{getClientMenu(client)}</div>
-                                    </div>
-                                </div>
+                                    </Link>
+                                </RowTooltip>
                             );
                         }}
                     </For>
                 </Show>
-
-                <ClientBlockConfirmDialog
-                    state={confirmDialog()}
-                    onClose={closeConfirmDialog}
-                    onConfirm={handleConfirm}
-                />
             </div>
 
-            <CardFooter
-                to={RoutePath.TopClients}
-                testId="show-more-top-clients"
-                query={props.period ? { period: props.period } : undefined}
+            {/* Outside the list so its dialog is not the list's last child,
+                which would give the last row a divider back while it is open. */}
+            <ClientBlockConfirmDialog
+                state={confirmDialog()}
+                onClose={closeConfirmDialog}
+                onConfirm={handleConfirm}
             />
+
+            <Show when={hasMore()}>
+                <CardFooter
+                    to={RoutePath.TopClients}
+                    testId="show-more-top-clients"
+                    query={props.period ? { period: props.period } : undefined}
+                />
+            </Show>
         </div>
     );
 };
diff --git a/client_v2/src/components/Dashboard/blocks/TopQueriedDomains/TopQueriedDomains.tsx b/client_v2/src/components/Dashboard/blocks/TopQueriedDomains/TopQueriedDomains.tsx
index 7e65cc1cf90..b731b560b24 100644
--- a/client_v2/src/components/Dashboard/blocks/TopQueriedDomains/TopQueriedDomains.tsx
+++ b/client_v2/src/components/Dashboard/blocks/TopQueriedDomains/TopQueriedDomains.tsx
@@ -1,8 +1,6 @@
 import { Show, For, createMemo } from 'solid-js';
 import intl from 'panel/common/intl';
 import { Icon } from 'panel/common/ui/Icon';
-import { Tooltip } from 'panel/common/ui/Tooltip';
-import { QueriesTooltip } from 'panel/common/ui/QueriesTooltip';
 import { Link } from 'panel/common/ui/Link';
 import { RoutePath } from 'panel/components/Routes/Paths';
 import { formatCompactNumber } from 'panel/helpers/helpers';
@@ -11,6 +9,7 @@ import theme from 'panel/lib/theme';
 import cn from 'clsx';
 import { TableHeader } from '../TableHeader';
 import { TrackerTooltip } from '../TrackerTooltip';
+import { RowTooltip } from '../RowTooltip';
 import { EmptyState } from '../EmptyState';
 import { CardFooter } from '../CardFooter';
 import { useSortedData } from '../../hooks/useSortedData';
@@ -29,7 +28,7 @@ type Props = {
 };
 
 export const TopQueriedDomains = (props: Props) => {
-    const { sortedData: sortedDomains } = useSortedData(() => props.topQueriedDomains);
+    const { sortedData: sortedDomains, hasMore } = useSortedData(() => props.topQueriedDomains);
 
     const hasStats = createMemo(() => props.topQueriedDomains.length > 0);
 
@@ -60,48 +59,46 @@ export const TopQueriedDomains = (props: Props) => {
                             const trackerData = getTrackerData(domain.name);
 
                             return (
-                                <div
-                                    class={cn(s.tableRow, s.statRowValue)}
-                                    data-testid="top-domain-row"
+                                <RowTooltip
+                                    content={
+                                        <TrackerTooltip
+                                            domain={domain.name}
+                                            trackerData={trackerData}
+                                        />
+                                    }
                                 >
-                                    <div
-                                        class={cn(
-                                            theme.text.t3,
-                                            theme.text.condenced,
-                                            s.tableRowLeft,
-                                        )}
+                                    <Link
+                                        to={RoutePath.QueryLog}
+                                        query={{ search: `"${domain.name}"` }}
+                                        class={cn(s.tableRow, s.statRowValue, s.tableRowLink)}
+                                        data-testid="top-domain-row"
                                     >
-                                        <Show
-                                            when={trackerData}
-                                            fallback={<div class={s.tableRowDot} />}
-                                        >
-                                            <Tooltip
-                                                content={
-                                                    <TrackerTooltip trackerData={trackerData!} />
-                                                }
-                                                position="bottomLeft"
-                                                class={theme.common.noShrink}
-                                            >
-                                                <Icon icon="eye_open" class={s.tableRowIcon} />
-                                            </Tooltip>
-                                        </Show>
-                                        <Link
-                                            to={RoutePath.QueryLog}
-                                            query={{ search: `"${domain.name}"` }}
+                                        <div
                                             class={cn(
                                                 theme.text.t3,
                                                 theme.text.condenced,
-                                                s.domainNameLink,
+                                                s.tableRowLeft,
                                             )}
-                                            title={domain.name}
                                         >
-                                            <span class={s.domainName}>{domain.name}</span>
-                                        </Link>
-                                    </div>
+                                            <Show
+                                                when={trackerData}
+                                                fallback={<div class={s.tableRowDot} />}
+                                            >
+                                                <Icon icon="eye_open" class={s.tableRowIcon} />
+                                            </Show>
+                                            <span
+                                                class={cn(
+                                                    theme.text.t3,
+                                                    theme.text.condenced,
+                                                    s.domainNameLink,
+                                                )}
+                                            >
+                                                <span class={s.domainName}>{domain.name}</span>
+                                            </span>
+                                        </div>
 
-                                    <div class={s.tableRowRight}>
-                                        <div class={s.dropdowWrapper}>
-                                            <QueriesTooltip count={domain.count}>
+                                        <div class={s.tableRowRight}>
+                                            <div class={s.dropdownWrapper}>
                                                 <div
                                                     class={cn(
                                                         theme.text.t3,
@@ -109,9 +106,7 @@ export const TopQueriedDomains = (props: Props) => {
                                                         s.queryCount,
                                                     )}
                                                 >
-                                                    <Link
-                                                        to={RoutePath.QueryLog}
-                                                        query={{ search: `"${domain.name}"` }}
+                                                    <span
                                                         class={cn(
                                                             theme.text.t3,
                                                             theme.text.condenced,
@@ -119,7 +114,7 @@ export const TopQueriedDomains = (props: Props) => {
                                                         )}
                                                     >
                                                         {formatCompactNumber(domain.count)}
-                                                    </Link>
+                                                    </span>
 
                                                     <div
                                                         class={cn(
@@ -131,35 +126,37 @@ export const TopQueriedDomains = (props: Props) => {
                                                         ({percent().toFixed(1)}%)
                                                     </div>
                                                 </div>
-                                            </QueriesTooltip>
+                                            </div>
+
+                                            <div class={s.queryBar}>
+                                                <div
+                                                    class={cn(s.queryBarFill)}
+                                                    style={{ width: `${percent()}%` }}
+                                                />
+                                            </div>
                                         </div>
 
                                         <div class={s.queryBar}>
                                             <div
-                                                class={cn(s.queryBarFill)}
+                                                class={s.queryBarFill}
                                                 style={{ width: `${percent()}%` }}
                                             />
                                         </div>
-                                    </div>
-
-                                    <div class={s.queryBar}>
-                                        <div
-                                            class={s.queryBarFill}
-                                            style={{ width: `${percent()}%` }}
-                                        />
-                                    </div>
-                                </div>
+                                    </Link>
+                                </RowTooltip>
                             );
                         }}
                     </For>
                 </Show>
             </div>
 
-            <CardFooter
-                to={RoutePath.TopQueriedDomains}
-                testId="show-more-top-queried-domains"
-                query={props.period ? { period: props.period } : undefined}
-            />
+            <Show when={hasMore()}>
+                <CardFooter
+                    to={RoutePath.TopQueriedDomains}
+                    testId="show-more-top-queried-domains"
+                    query={props.period ? { period: props.period } : undefined}
+                />
+            </Show>
         </div>
     );
 };
diff --git a/client_v2/src/components/Dashboard/blocks/TopUpstreams/TopUpstreams.tsx b/client_v2/src/components/Dashboard/blocks/TopUpstreams/TopUpstreams.tsx
index 4f9ab0b4a4b..7ca1c920403 100644
--- a/client_v2/src/components/Dashboard/blocks/TopUpstreams/TopUpstreams.tsx
+++ b/client_v2/src/components/Dashboard/blocks/TopUpstreams/TopUpstreams.tsx
@@ -3,6 +3,7 @@ import intl from 'panel/common/intl';
 import { formatCompactNumber } from 'panel/helpers/helpers';
 import theme from 'panel/lib/theme';
 import { QueriesTooltip } from 'panel/common/ui/QueriesTooltip';
+import { TruncatedText } from 'panel/common/ui/TruncatedText';
 import { RoutePath } from 'panel/components/Routes/Paths';
 import cn from 'clsx';
 import { TableHeader } from '../TableHeader';
@@ -24,7 +25,9 @@ type Props = {
 };
 
 export const TopUpstreams = (props: Props) => {
-    const { sortedData: sortedUpstreams } = useSortedData(() => props.topUpstreamsResponses);
+    const { sortedData: sortedUpstreams, hasMore } = useSortedData(
+        () => props.topUpstreamsResponses,
+    );
 
     const hasStats = createMemo(() => props.topUpstreamsResponses.length > 0);
 
@@ -62,7 +65,11 @@ export const TopUpstreams = (props: Props) => {
                                             s.tableRowLeft,
                                         )}
                                     >
-                                        <span class={s.domainName}>{upstream.name}</span>
+                                        <TruncatedText
+                                            text={upstream.name}
+                                            testId="top-upstream-name"
+                                            class={s.domainName}
+                                        />
                                     </div>
 
                                     <div class={s.tableRowRight}>
@@ -111,11 +118,13 @@ export const TopUpstreams = (props: Props) => {
                 </Show>
             </div>
 
-            <CardFooter
-                to={RoutePath.TopUpstreams}
-                testId="show-more-top-upstreams"
-                query={props.period ? { period: props.period } : undefined}
-            />
+            <Show when={hasMore()}>
+                <CardFooter
+                    to={RoutePath.TopUpstreams}
+                    testId="show-more-top-upstreams"
+                    query={props.period ? { period: props.period } : undefined}
+                />
+            </Show>
         </div>
     );
 };
diff --git a/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.module.pcss b/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.module.pcss
index 0b31bd53818..cbd9c6d7ccd 100644
--- a/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.module.pcss
+++ b/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.module.pcss
@@ -26,6 +26,15 @@
     font-weight: var(--weight-regular);
 }
 
+.tooltipDomainRow {
+    align-items: flex-start;
+}
+
+.tooltipDomainValue {
+    min-width: 0;
+    word-break: break-word;
+}
+
 .tooltipLink {
     font-weight: var(--weight-regular);
     color: var(--default-link);
diff --git a/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.tsx b/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.tsx
index b6a3b9a87a5..299335a049b 100644
--- a/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.tsx
+++ b/client_v2/src/components/Dashboard/blocks/TrackerTooltip/TrackerTooltip.tsx
@@ -18,57 +18,81 @@ export type TrackerData = {
 };
 
 type Props = {
-    trackerData: TrackerData;
+    domain: string;
+    trackerData?: TrackerData;
 };
 
 export const TrackerTooltip = (props: Props) => {
-    const sourceData = () => getSourceData(props.trackerData);
+    const sourceData = () => (props.trackerData ? getSourceData(props.trackerData) : null);
 
     return (
         <div class={s.tooltip}>
-            <div class={cn(theme.text.t2, theme.text.semibold, s.tooltipTitle)}>
-                {intl.getMessage('found_in_known_domains')}
-            </div>
+            <Show when={props.trackerData}>
+                {(tracker) => (
+                    <>
+                        <div class={cn(theme.text.t2, theme.text.semibold, s.tooltipTitle)}>
+                            {intl.getMessage('found_in_known_domains')}
+                        </div>
 
-            <div class={s.tooltipRow}>
-                <span class={cn(theme.text.t3, theme.text.semibold, s.tooltipLabel)}>
-                    {intl.getMessage('name_tooltip')}:
-                </span>
-                <a
-                    href={props.trackerData.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class={cn(theme.text.t3, s.tooltipLink)}
-                >
-                    {props.trackerData.name}
-                </a>
-            </div>
+                        <div class={s.tooltipRow}>
+                            <span class={cn(theme.text.t3, theme.text.semibold, s.tooltipLabel)}>
+                                {intl.getMessage('name_tooltip')}:
+                            </span>
+                            <a
+                                href={tracker().url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class={cn(theme.text.t3, s.tooltipLink)}
+                            >
+                                {tracker().name}
+                            </a>
+                        </div>
+
+                        <div class={s.tooltipRow}>
+                            <span class={cn(theme.text.t3, theme.text.semibold, s.tooltipLabel)}>
+                                {intl.getMessage('category_tooltip')}:
+                            </span>
+
+                            <span class={cn(theme.text.t3, s.tooltipValue)}>
+                                {captitalizeWords(tracker().category)}
+                            </span>
+                        </div>
 
-            <div class={s.tooltipRow}>
+                        <Show when={sourceData()}>
+                            {(source) => (
+                                <div class={s.tooltipRow}>
+                                    <span
+                                        class={cn(
+                                            theme.text.t3,
+                                            theme.text.semibold,
+                                            s.tooltipLabel,
+                                        )}
+                                    >
+                                        {intl.getMessage('source_tooltip')}:
+                                    </span>
+                                    <a
+                                        href={source().url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class={cn(theme.text.t3, s.tooltipLink)}
+                                    >
+                                        {source().name}
+                                    </a>
+                                </div>
+                            )}
+                        </Show>
+                    </>
+                )}
+            </Show>
+
+            <div class={cn(s.tooltipRow, s.tooltipDomainRow)}>
                 <span class={cn(theme.text.t3, theme.text.semibold, s.tooltipLabel)}>
-                    {intl.getMessage('category_tooltip')}:
+                    {intl.getMessage('domain')}:
                 </span>
-
-                <span class={cn(theme.text.t3, s.tooltipValue)}>
-                    {captitalizeWords(props.trackerData.category)}
+                <span class={cn(theme.text.t3, s.tooltipValue, s.tooltipDomainValue)}>
+                    {props.domain}
                 </span>
             </div>
-
-            <Show when={sourceData()}>
-                <div class={s.tooltipRow}>
-                    <span class={cn(theme.text.t3, theme.text.semibold, s.tooltipLabel)}>
-                        {intl.getMessage('source_tooltip')}:
-                    </span>
-                    <a
-                        href={sourceData()!.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class={cn(theme.text.t3, s.tooltipLink)}
-                    >
-                        {sourceData()!.name}
-                    </a>
-                </div>
-            </Show>
         </div>
     );
 };
diff --git a/client_v2/src/components/Dashboard/blocks/UpstreamAvgTime/UpstreamAvgTime.tsx b/client_v2/src/components/Dashboard/blocks/UpstreamAvgTime/UpstreamAvgTime.tsx
index 7883b95c911..c754d1035fc 100644
--- a/client_v2/src/components/Dashboard/blocks/UpstreamAvgTime/UpstreamAvgTime.tsx
+++ b/client_v2/src/components/Dashboard/blocks/UpstreamAvgTime/UpstreamAvgTime.tsx
@@ -1,6 +1,7 @@
 import { Show, For, createMemo } from 'solid-js';
 import intl from 'panel/common/intl';
 import theme from 'panel/lib/theme';
+import { TruncatedText } from 'panel/common/ui/TruncatedText';
 import { RoutePath } from 'panel/components/Routes/Paths';
 import cn from 'clsx';
 import { TableHeader } from '../TableHeader';
@@ -22,7 +23,9 @@ type Props = {
 };
 
 export const UpstreamAvgTime = (props: Props) => {
-    const { sortedData: sortedUpstreams } = useSortedData(() => props.topUpstreamsAvgTime);
+    const { sortedData: sortedUpstreams, hasMore } = useSortedData(
+        () => props.topUpstreamsAvgTime,
+    );
 
     const hasStats = createMemo(() => props.topUpstreamsAvgTime.length > 0);
 
@@ -56,7 +59,11 @@ export const UpstreamAvgTime = (props: Props) => {
                                 <div
                                     class={cn(theme.text.t3, theme.text.condenced, s.tableRowLeft)}
                                 >
-                                    <span class={s.domainName}>{upstream.name}</span>
+                                    <TruncatedText
+                                        text={upstream.name}
+                                        testId="upstream-avg-time-name"
+                                        class={s.domainName}
+                                    />
                                 </div>
                                 <div class={s.tableRowRight}>
                                     <div
@@ -76,11 +83,13 @@ export const UpstreamAvgTime = (props: Props) => {
                 </Show>
             </div>
 
-            <CardFooter
-                to={RoutePath.UpstreamAvgTime}
-                testId="show-more-upstream-avg-time"
-                query={props.period ? { period: props.period } : undefined}
-            />
+            <Show when={hasMore()}>
+                <CardFooter
+                    to={RoutePath.UpstreamAvgTime}
+                    testId="show-more-upstream-avg-time"
+                    query={props.period ? { period: props.period } : undefined}
+                />
+            </Show>
         </div>
     );
 };
diff --git a/client_v2/src/components/Dashboard/hooks/useSortedData.ts b/client_v2/src/components/Dashboard/hooks/useSortedData.ts
index cb38445fdc1..efea537d6fd 100644
--- a/client_v2/src/components/Dashboard/hooks/useSortedData.ts
+++ b/client_v2/src/components/Dashboard/hooks/useSortedData.ts
@@ -11,12 +11,16 @@ export const TOP_CLIENTS_VISIBLE_ITEMS = 4;
 export const useSortedData = <T extends SortableItem>(
     data: () => T[],
     limit: number = DEFAULT_VISIBLE_ITEMS,
-): { sortedData: () => T[] } => {
+): { sortedData: () => T[]; hasMore: () => boolean } => {
     const sortedData = createMemo(() =>
         data()
             .toSorted((a, b) => b.count - a.count)
             .slice(0, limit),
     );
 
-    return { sortedData };
+    // True when the list is longer than the visible rows, so the card can
+    // offer the "Show more" link only when it would reveal something.
+    const hasMore = createMemo(() => data().length > limit);
+
+    return { sortedData, hasMore };
 };
diff --git a/client_v2/src/components/Dhcp/Dhcp.tsx b/client_v2/src/components/Dhcp/Dhcp.tsx
index 37ee7b006c1..658dc78fa3f 100644
--- a/client_v2/src/components/Dhcp/Dhcp.tsx
+++ b/client_v2/src/components/Dhcp/Dhcp.tsx
@@ -2,8 +2,7 @@ import { createSignal, createEffect, onMount, Show } from 'solid-js';
 import cn from 'clsx';
 import { useNavigate } from '@solidjs/router';
 
-import { Dropdown } from 'panel/common/ui/Dropdown';
-import { Icon } from 'panel/common/ui/Icon';
+import { DangerLink } from 'panel/common/ui/DangerLink';
 import { PageLoader } from 'panel/common/ui/Loader';
 import { SettingRow } from 'panel/common/ui/SettingRow';
 import { ConfirmDialog } from 'panel/common/ui/ConfirmDialog';
@@ -36,7 +35,6 @@ export const Dhcp = () => {
 
     const [selectedInterface, setSelectedInterface] = createSignal(dhcpState.interface_name || '');
     const [showAllIps, setShowAllIps] = createSignal(false);
-    const [menuOpen, setMenuOpen] = createSignal(false);
 
     createEffect(() => {
         if (dhcpState.interface_name) {
@@ -88,20 +86,6 @@ export const Dhcp = () => {
     const hasIpv6 = () =>
         !!(dhcpState.interfaces && dhcpState.interfaces[selectedInterface()]?.ipv6_addresses);
 
-    const handleResetClick = () => {
-        setMenuOpen(false);
-        resetDialog.openDialog();
-    };
-
-    const resetMenu = (
-        <div
-            class={cn(theme.dropdown.item, theme.dropdown.item_danger, theme.dropdown.item_large)}
-            onClick={handleResetClick}
-        >
-            {intl.getMessage('reset_dhcp_settings')}
-        </div>
-    );
-
     const isLoaded = () => !dhcpState.processing && !dhcpState.processingInterfaces;
 
     return (
@@ -138,22 +122,6 @@ export const Dhcp = () => {
                             >
                                 {intl.getMessage('dhcp')}
                             </h1>
-                            <Dropdown
-                                position="bottomRight"
-                                noIcon
-                                open={menuOpen()}
-                                onOpenChange={setMenuOpen}
-                                menu={resetMenu}
-                                anchorClass={theme.dropdown.trigger_offset}
-                            >
-                                <button
-                                    type="button"
-                                    class={theme.dropdown.trigger}
-                                    aria-label={intl.getMessage('reset_dhcp_settings')}
-                                >
-                                    <Icon icon="bullets" />
-                                </button>
-                            </Dropdown>
                         </div>
 
                         <DhcpToggle
@@ -200,6 +168,10 @@ export const Dhcp = () => {
                             />
                         </div>
 
+                        <DangerLink onClick={resetDialog.openDialog}>
+                            {intl.getMessage('reset_dhcp_settings')}
+                        </DangerLink>
+
                         <DhcpV4Modal
                             open={v4Dialog.open()}
                             selectedInterface={selectedInterface}
diff --git a/client_v2/src/components/Dhcp/LeasesPage/DynamicLeasesTab.tsx b/client_v2/src/components/Dhcp/LeasesPage/DynamicLeasesTab.tsx
index 3fb47ad3505..2b6f58d2560 100644
--- a/client_v2/src/components/Dhcp/LeasesPage/DynamicLeasesTab.tsx
+++ b/client_v2/src/components/Dhcp/LeasesPage/DynamicLeasesTab.tsx
@@ -58,7 +58,7 @@ export const DynamicLeasesTab = () => {
                     text={intl.getMessage('delete_confirm_desc', {
                         ip: confirmDeleteLease()?.ip,
                     })}
-                    buttonText={intl.getMessage('delete_table_action_confirm')}
+                    buttonText={intl.getMessage('yes_remove')}
                     cancelText={intl.getMessage('cancel')}
                     buttonVariant="danger"
                     onConfirm={handleConfirmDeleteLease}
diff --git a/client_v2/src/components/Dhcp/LeasesPage/StaticLeaseModal.tsx b/client_v2/src/components/Dhcp/LeasesPage/StaticLeaseModal.tsx
index 5065f0f274a..5046383c0b3 100644
--- a/client_v2/src/components/Dhcp/LeasesPage/StaticLeaseModal.tsx
+++ b/client_v2/src/components/Dhcp/LeasesPage/StaticLeaseModal.tsx
@@ -167,6 +167,7 @@ export const StaticLeaseModal = (props: Props) => {
                             errorMessage={macError()}
                             disabled={props.isEdit || props.isMakeStatic}
                             size="large"
+                            onCard
                         />
                     </div>
 
@@ -183,6 +184,7 @@ export const StaticLeaseModal = (props: Props) => {
                             errorMessage={hostnameError()}
                             disabled={props.isMakeStatic}
                             size="large"
+                            onCard
                         />
                     </div>
 
@@ -196,6 +198,7 @@ export const StaticLeaseModal = (props: Props) => {
                             placeholder={intl.getMessage('form_enter_ip')}
                             errorMessage={ipError()}
                             size="large"
+                            onCard
                         />
                     </div>
                 </div>
@@ -215,6 +218,7 @@ export const StaticLeaseModal = (props: Props) => {
                         onClick={props.onClose}
                         disabled={isProcessing()}
                         class={theme.dialog.button}
+                        onCard
                     >
                         {intl.getMessage('cancel')}
                     </Button>
diff --git a/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTab.tsx b/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTab.tsx
index c0fc75e7dee..1bfe339dcbe 100644
--- a/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTab.tsx
+++ b/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTab.tsx
@@ -81,7 +81,7 @@ export const StaticLeasesTab = () => {
                     text={intl.getMessage('delete_confirm_desc', {
                         ip: confirmDeleteLease()?.ip,
                     })}
-                    buttonText={intl.getMessage('delete_table_action_confirm')}
+                    buttonText={intl.getMessage('yes_remove')}
                     cancelText={intl.getMessage('cancel')}
                     buttonVariant="danger"
                     onConfirm={handleConfirmDeleteLease}
diff --git a/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTable.tsx b/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTable.tsx
index 79b8b8e61c8..f9e73a87d92 100644
--- a/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTable.tsx
+++ b/client_v2/src/components/Dhcp/LeasesPage/StaticLeasesTable.tsx
@@ -120,7 +120,6 @@ export const StaticLeasesTable = (props: Props) => {
                                     onClick={() => props.onEdit(row)}
                                     disabled={props.processingUpdating}
                                     class={theme.table.action}
-                                    title={intl.getMessage('edit_table_action')}
                                     aria-label={intl.getMessage('edit_table_action')}
                                     data-testid="static-lease-edit-button"
                                     data-table-action
@@ -135,7 +134,6 @@ export const StaticLeasesTable = (props: Props) => {
                                     type="button"
                                     onClick={() => props.onRefresh()}
                                     class={theme.table.action}
-                                    title={intl.getMessage('refresh_btn')}
                                     aria-label={intl.getMessage('refresh_btn')}
                                     data-testid="static-lease-refresh-button"
                                     data-table-action
@@ -151,14 +149,13 @@ export const StaticLeasesTable = (props: Props) => {
                                     onClick={() => props.onDelete(row)}
                                     disabled={props.processingDeleting}
                                     class={cn(theme.table.action, theme.table.action_danger)}
-                                    title={intl.getMessage('delete_table_action')}
-                                    aria-label={intl.getMessage('delete_table_action')}
+                                    aria-label={intl.getMessage('remove')}
                                     data-testid="static-lease-delete-button"
                                     data-table-action
                                 >
                                     <Icon icon="delete" color="red" />
                                     <span class={theme.table.actionLabel}>
-                                        {intl.getMessage('delete_table_action')}
+                                        {intl.getMessage('remove')}
                                     </span>
                                 </button>
                             </div>
@@ -186,7 +183,7 @@ export const StaticLeasesTable = (props: Props) => {
                                                 )}
                                                 onClick={() => handleDelete(row)}
                                             >
-                                                {intl.getMessage('delete_table_action')}
+                                                {intl.getMessage('remove')}
                                             </div>
                                         </div>
                                     }
diff --git a/client_v2/src/components/Dhcp/blocks/DhcpV4Modal/DhcpV4Modal.tsx b/client_v2/src/components/Dhcp/blocks/DhcpV4Modal/DhcpV4Modal.tsx
index 8162be99214..637f4635889 100644
--- a/client_v2/src/components/Dhcp/blocks/DhcpV4Modal/DhcpV4Modal.tsx
+++ b/client_v2/src/components/Dhcp/blocks/DhcpV4Modal/DhcpV4Modal.tsx
@@ -196,6 +196,7 @@ export const DhcpV4Modal = (props: Props) => {
                     disabled={!hasIpv4()}
                     errorMessage={gatewayIpError()}
                     size="large"
+                    onCard
                 />
             </div>
             <div class={s.formField}>
@@ -215,6 +216,7 @@ export const DhcpV4Modal = (props: Props) => {
                             disabled={!hasIpv4()}
                             errorMessage={rangeStartError()}
                             size="large"
+                            onCard
                         />
                     </div>
                     <div>
@@ -229,6 +231,7 @@ export const DhcpV4Modal = (props: Props) => {
                             disabled={!hasIpv4()}
                             errorMessage={rangeEndError()}
                             size="large"
+                            onCard
                         />
                     </div>
                 </div>
@@ -244,6 +247,7 @@ export const DhcpV4Modal = (props: Props) => {
                     disabled={!hasIpv4()}
                     errorMessage={subnetMaskError()}
                     size="large"
+                    onCard
                 />
             </div>
             <div class={theme.form.input}>
@@ -258,6 +262,7 @@ export const DhcpV4Modal = (props: Props) => {
                     disabled={!hasIpv4()}
                     size="large"
                     inputError={leaseDurationError()}
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/Dhcp/blocks/DhcpV6Modal.tsx b/client_v2/src/components/Dhcp/blocks/DhcpV6Modal.tsx
index 4ae5cf848f6..61797f231cd 100644
--- a/client_v2/src/components/Dhcp/blocks/DhcpV6Modal.tsx
+++ b/client_v2/src/components/Dhcp/blocks/DhcpV6Modal.tsx
@@ -97,6 +97,7 @@ export const DhcpV6Modal = (props: Props) => {
                     onChange={(e: Event) => setRangeStart((e.target as HTMLInputElement).value)}
                     onBlur={validateRangeStart}
                     errorMessage={rangeStartError()}
+                    onCard
                 />
             </div>
 
@@ -113,6 +114,7 @@ export const DhcpV6Modal = (props: Props) => {
                     onChange={(e: Event) => setLeaseDuration((e.target as HTMLInputElement).value)}
                     onBlur={() => validateLeaseDuration()}
                     inputError={leaseDurationError()}
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/Access/blocks/AllowedClientsDialog.tsx b/client_v2/src/components/DnsSettings/Access/blocks/AllowedClientsDialog.tsx
index 7aa9f0452ee..f8baac27c03 100644
--- a/client_v2/src/components/DnsSettings/Access/blocks/AllowedClientsDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Access/blocks/AllowedClientsDialog.tsx
@@ -63,6 +63,7 @@ export const AllowedClientsDialog = (props: Props) => {
                     placeholder={intl.getMessage('dns_allowed_clients_placeholder')}
                     size="medium"
                     errorMessage={field.error()}
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/Access/blocks/DisallowedClientsDialog.tsx b/client_v2/src/components/DnsSettings/Access/blocks/DisallowedClientsDialog.tsx
index 3a1841c51aa..9855700bdd0 100644
--- a/client_v2/src/components/DnsSettings/Access/blocks/DisallowedClientsDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Access/blocks/DisallowedClientsDialog.tsx
@@ -62,6 +62,7 @@ export const DisallowedClientsDialog = (props: Props) => {
                     label={intl.getMessage('dns_disallowed_clients_label')}
                     size="medium"
                     errorMessage={field.error()}
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/Access/blocks/DisallowedDomainsDialog.tsx b/client_v2/src/components/DnsSettings/Access/blocks/DisallowedDomainsDialog.tsx
index ab9c5bfe3ed..e4430f84491 100644
--- a/client_v2/src/components/DnsSettings/Access/blocks/DisallowedDomainsDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Access/blocks/DisallowedDomainsDialog.tsx
@@ -49,6 +49,7 @@ export const DisallowedDomainsDialog = (props: Props) => {
                     errorMessage={field.error()}
                     commentPrefixes={COMMENT_LINE_TOKENS}
                     highlightComments
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/Cache/Cache.tsx b/client_v2/src/components/DnsSettings/Cache/Cache.tsx
index adfddc145d9..c0447f18982 100644
--- a/client_v2/src/components/DnsSettings/Cache/Cache.tsx
+++ b/client_v2/src/components/DnsSettings/Cache/Cache.tsx
@@ -12,6 +12,7 @@ import { Button } from 'panel/common/ui/Button';
 import { SettingRow } from 'panel/common/ui/SettingRow';
 import { ConfirmDialog } from 'panel/common/ui/ConfirmDialog';
 import { useDialog } from 'panel/hooks/useDialog';
+import { useSwitchState } from 'panel/hooks/useSwitchState';
 import { getCacheSizeSummary, getTtlSummary } from '../helpers';
 import theme from 'panel/lib/theme';
 
@@ -31,6 +32,25 @@ export const Cache = () => {
 
     const processing = () => dnsConfigState.processingSetConfig;
 
+    const [cacheEnabled, setCacheEnabled] = useSwitchState(
+        () => !!dnsConfigState.cache_enabled,
+        processing,
+    );
+    const [optimisticCaching, setOptimisticCaching] = useSwitchState(
+        () => !!dnsConfigState.cache_optimistic,
+        processing,
+    );
+
+    const handleCacheEnabledToggle = (checked: boolean) => {
+        setCacheEnabled(checked);
+        toggleCacheEnabled();
+    };
+
+    const handleOptimisticCachingToggle = (checked: boolean) => {
+        setOptimisticCaching(checked);
+        toggleOptimisticCaching();
+    };
+
     return (
         <div class={s.section}>
             <SettingRow
@@ -41,8 +61,8 @@ export const Cache = () => {
                 descriptionClass={s.description}
                 align="center"
                 description={intl.getMessage('dns_cache_desc')}
-                checked={!!dnsConfigState.cache_enabled}
-                onChange={() => toggleCacheEnabled()}
+                checked={cacheEnabled()}
+                onChange={handleCacheEnabledToggle}
             />
 
             <SettingRow
@@ -80,9 +100,9 @@ export const Cache = () => {
                 id="optimistic_caching"
                 title={intl.getMessage('dns_optimistic_caching')}
                 description={intl.getMessage('dns_optimistic_caching_desc')}
-                checked={!!dnsConfigState.cache_optimistic}
+                checked={optimisticCaching()}
                 disabled={!dnsConfigState.cache_enabled}
-                onChange={() => toggleOptimisticCaching()}
+                onChange={handleOptimisticCachingToggle}
             />
 
             <div class={theme.form.actionRow}>
diff --git a/client_v2/src/components/DnsSettings/Cache/blocks/CacheInputDialog.tsx b/client_v2/src/components/DnsSettings/Cache/blocks/CacheInputDialog.tsx
index bef778214ff..318333dd4ff 100644
--- a/client_v2/src/components/DnsSettings/Cache/blocks/CacheInputDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Cache/blocks/CacheInputDialog.tsx
@@ -41,10 +41,21 @@ const CACHE_DIALOG_CONFIG: Record<
         description: () => intl.getMessage('dns_override_min_ttl_desc'),
         label: () => intl.getMessage('dns_override_min_ttl_label'),
         placeholder: () => intl.getMessage('dns_override_min_ttl_placeholder'),
-        validate: (v) =>
-            validateRequiredValue(v) ||
-            validateBetween(Number(v), UINT32_RANGE.MIN, UINT32_RANGE.MAX) ||
-            '',
+        validate: (v) => {
+            const requiredErr = validateRequiredValue(v);
+            if (requiredErr) return requiredErr;
+            const num = Number(v);
+            const rangeErr = validateBetween(num, UINT32_RANGE.MIN, UINT32_RANGE.MAX);
+            if (rangeErr) return rangeErr;
+            // Cross-field TTL check: min > max.  Only the maximum used to run
+            // this check, so a minimum above the stored maximum was accepted,
+            // persisted, and then rejected while reconfiguring the DNS server.
+            const maxVal = Number(dnsConfigState.cache_ttl_max);
+            if (maxVal > 0 && num > 0 && num > maxVal) {
+                return intl.getMessage('cache_config_ttl_validation');
+            }
+            return '';
+        },
     },
     cache_ttl_max: {
         title: () => intl.getMessage('dns_override_max_ttl_title'),
@@ -104,6 +115,7 @@ export const CacheInputDialog = (props: Props) => {
                     max={UINT32_RANGE.MAX}
                     errorMessage={field.error()}
                     size="large"
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/PrivateReverse/PrivateReverse.tsx b/client_v2/src/components/DnsSettings/PrivateReverse/PrivateReverse.tsx
index 1a829b63906..c80e0a62f16 100644
--- a/client_v2/src/components/DnsSettings/PrivateReverse/PrivateReverse.tsx
+++ b/client_v2/src/components/DnsSettings/PrivateReverse/PrivateReverse.tsx
@@ -7,14 +7,16 @@ import {
     togglePrivatePtrResolvers,
     toggleResolveClients,
 } from 'panel/stores/dnsConfig';
+import { addWarningToast } from 'panel/stores/toasts';
 import intl from 'panel/common/intl';
 import { Breadcrumbs } from 'panel/common/ui/Breadcrumbs';
 import { PageLoader } from 'panel/common/ui/Loader';
 import { SettingRow } from 'panel/common/ui/SettingRow';
 import { RoutePath } from 'panel/components/Routes/Paths';
 import { useDialog } from 'panel/hooks/useDialog';
+import { useSwitchState } from 'panel/hooks/useSwitchState';
 import { PrivateReverseServersDialog } from '../Upstream/blocks/PrivateReverseServersDialog';
-import { getUpstreamServersSummary } from '../helpers';
+import { getUpstreamServersSummary, hasUsablePrivatePtrUpstreams } from '../helpers';
 import theme from 'panel/lib/theme';
 
 import s from './PrivateReverse.module.pcss';
@@ -28,10 +30,55 @@ export const PrivateReverse = () => {
 
     const processing = () => dnsConfigState.processingSetConfig;
 
+    const [privatePtrEnabled, setPrivatePtrEnabled] = useSwitchState(
+        () => dnsConfigState.use_private_ptr_resolvers,
+        processing,
+    );
+    const [resolveClients, setResolveClients] = useSwitchState(
+        () => dnsConfigState.resolve_clients,
+        processing,
+    );
+
     const privateReverseValue = createMemo(() =>
         getUpstreamServersSummary(dnsConfigState.local_ptr_upstreams),
     );
 
+    /**
+     * Enabling without a single usable server cannot work — the backend has
+     * nothing to resolve with and rejects the request — so the user is sent to
+     * the servers dialog instead.  Disabling always goes through.
+     */
+    const handlePrivatePtrResolversToggle = (checked: boolean) => {
+        if (!checked) {
+            setPrivatePtrEnabled(false);
+            togglePrivatePtrResolvers();
+
+            return;
+        }
+
+        const canResolve = hasUsablePrivatePtrUpstreams(
+            dnsConfigState.local_ptr_upstreams,
+            dnsConfigState.default_local_ptr_upstreams,
+        );
+        if (!canResolve) {
+            setPrivatePtrEnabled(false);
+            addWarningToast({
+                error: intl.getMessage('dns_private_reverse_no_default_resolvers'),
+            });
+            serversDialog.openDialog();
+
+            return;
+        }
+
+        setPrivatePtrEnabled(true);
+        togglePrivatePtrResolvers();
+    };
+
+    const handleResolveClientsToggle = (checked: boolean) => {
+        setResolveClients(checked);
+        toggleResolveClients();
+    };
+
     return (
         <Show when={!dnsConfigState.processingGetConfig} fallback={<PageLoader />}>
             <div class={cn(theme.layout.container, s.container)}>
@@ -66,8 +113,8 @@ export const PrivateReverse = () => {
                                     </p>
                                 </>
                             }
-                            checked={dnsConfigState.use_private_ptr_resolvers}
-                            onChange={() => togglePrivatePtrResolvers()}
+                            checked={privatePtrEnabled()}
+                            onChange={handlePrivatePtrResolversToggle}
                             largeTitle
                         />
 
@@ -97,8 +144,8 @@ export const PrivateReverse = () => {
                             description={intl.getMessage(
                                 'dns_private_reverse_resolve_clients_desc',
                             )}
-                            checked={dnsConfigState.resolve_clients}
-                            onChange={() => toggleResolveClients()}
+                            checked={resolveClients()}
+                            onChange={handleResolveClientsToggle}
                             disabled={!dnsConfigState.use_private_ptr_resolvers}
                         />
                     </div>
diff --git a/client_v2/src/components/DnsSettings/ServerConfig/ServerConfig.tsx b/client_v2/src/components/DnsSettings/ServerConfig/ServerConfig.tsx
index d5dded5c6cc..b76e6da26be 100644
--- a/client_v2/src/components/DnsSettings/ServerConfig/ServerConfig.tsx
+++ b/client_v2/src/components/DnsSettings/ServerConfig/ServerConfig.tsx
@@ -13,6 +13,7 @@ import { getRateLimitSummary, getBlockingModeSummary, getUpstreamServersSummary
 import theme from 'panel/lib/theme';
 import { IP_VERSION, IPV4_SUBNET_PREFIX, IPV6_SUBNET_PREFIX } from 'panel/helpers/constants';
 import { useDialog } from 'panel/hooks/useDialog';
+import { useSwitchState } from 'panel/hooks/useSwitchState';
 
 import { RateLimitDialog } from './blocks/RateLimitDialog';
 import { SubnetPrefixV4Dialog } from './blocks/SubnetPrefixV4Dialog';
@@ -36,6 +37,34 @@ export const ServerConfig = () => {
 
     const processing = () => dnsConfigState.processingSetConfig;
 
+    const [ednsCsEnabled, setEdnsCsEnabled] = useSwitchState(
+        () => dnsConfigState.edns_cs_enabled,
+        processing,
+    );
+    const [dnssecEnabled, setDnssecEnabled] = useSwitchState(
+        () => dnsConfigState.dnssec_enabled,
+        processing,
+    );
+    const [ipv6Resolution, setIpv6Resolution] = useSwitchState(
+        () => !dnsConfigState.disable_ipv6,
+        processing,
+    );
+
+    const handleEdnsCsToggle = (checked: boolean) => {
+        setEdnsCsEnabled(checked);
+        toggleEdnsCsEnabled();
+    };
+
+    const handleDnssecToggle = (checked: boolean) => {
+        setDnssecEnabled(checked);
+        toggleDnssecEnabled();
+    };
+
+    const handleIpv6ResolutionToggle = (checked: boolean) => {
+        setIpv6Resolution(checked);
+        toggleDisableIPv6();
+    };
+
     return (
         <div>
             <h2 class={cn(theme.layout.subtitle, theme.title.h5, theme.title.h4_tablet)}>
@@ -96,8 +125,8 @@ export const ServerConfig = () => {
                 id="edns_client_subnet"
                 title={intl.getMessage('dns_edns_client_subnet')}
                 description={intl.getMessage('dns_edns_client_subnet_desc')}
-                checked={dnsConfigState.edns_cs_enabled}
-                onChange={() => toggleEdnsCsEnabled()}
+                checked={ednsCsEnabled()}
+                onChange={handleEdnsCsToggle}
                 onClick={ednsDialog.openDialog}
                 divider
             />
@@ -107,8 +136,8 @@ export const ServerConfig = () => {
                 id="dnssec"
                 title={intl.getMessage('dns_dnssec')}
                 description={intl.getMessage('dns_dnssec_desc')}
-                checked={dnsConfigState.dnssec_enabled}
-                onChange={() => toggleDnssecEnabled()}
+                checked={dnssecEnabled()}
+                onChange={handleDnssecToggle}
             />
 
             <SettingRow
@@ -116,8 +145,8 @@ export const ServerConfig = () => {
                 id="ipv6_resolution"
                 title={intl.getMessage('dns_ipv6_resolution')}
                 description={intl.getMessage('dns_ipv6_resolution_desc')}
-                checked={!dnsConfigState.disable_ipv6}
-                onChange={() => toggleDisableIPv6()}
+                checked={ipv6Resolution()}
+                onChange={handleIpv6ResolutionToggle}
             />
 
             <RateLimitDialog
diff --git a/client_v2/src/components/DnsSettings/ServerConfig/blocks/BlockingModeDialog.tsx b/client_v2/src/components/DnsSettings/ServerConfig/blocks/BlockingModeDialog.tsx
index 35c3ddca0f8..cf9aa42ffa6 100644
--- a/client_v2/src/components/DnsSettings/ServerConfig/blocks/BlockingModeDialog.tsx
+++ b/client_v2/src/components/DnsSettings/ServerConfig/blocks/BlockingModeDialog.tsx
@@ -117,6 +117,7 @@ export const BlockingModeDialog = (props: Props) => {
                             errorMessage={blockingIpv4.error()}
                             disabled={blockingMode() !== BLOCKING_MODES.custom_ip}
                             size="large"
+                            onCard
                         />
                     </div>
                     <div class={theme.form.input}>
@@ -140,6 +141,7 @@ export const BlockingModeDialog = (props: Props) => {
                             errorMessage={blockingIpv6.error()}
                             disabled={blockingMode() !== BLOCKING_MODES.custom_ip}
                             size="large"
+                            onCard
                         />
                     </div>
                 </>
@@ -167,6 +169,7 @@ export const BlockingModeDialog = (props: Props) => {
                     max={UINT32_RANGE.MAX}
                     errorMessage={ttl.error()}
                     size="large"
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/ServerConfig/blocks/EdnsDialog.tsx b/client_v2/src/components/DnsSettings/ServerConfig/blocks/EdnsDialog.tsx
index 446a75f4aa2..4bc54134f50 100644
--- a/client_v2/src/components/DnsSettings/ServerConfig/blocks/EdnsDialog.tsx
+++ b/client_v2/src/components/DnsSettings/ServerConfig/blocks/EdnsDialog.tsx
@@ -78,19 +78,22 @@ export const EdnsDialog = (props: Props) => {
                     handleChange={(v: string) => setEdnsCsUseCustom(v === EDNS_MODES.custom)}
                     inModal
                 />
-                <Input
-                    id="edns_cs_custom_ip"
-                    label={intl.getMessage('dns_edns_custom_label')}
-                    placeholder={intl.getMessage('dns_edns_custom_placeholder')}
-                    value={ednsCsCustomIp.value()}
-                    onChange={(e: Event) =>
-                        ednsCsCustomIp.setValue((e.target as HTMLInputElement).value)
-                    }
-                    onBlur={() => ednsCsCustomIp.validate()}
-                    disabled={!ednsCsUseCustom()}
-                    errorMessage={ednsCsCustomIp.error()}
-                    size="large"
-                />
+                <div class={theme.form.input}>
+                    <Input
+                        id="edns_cs_custom_ip"
+                        label={intl.getMessage('dns_edns_custom_label')}
+                        placeholder={intl.getMessage('dns_edns_custom_placeholder')}
+                        value={ednsCsCustomIp.value()}
+                        onChange={(e: Event) =>
+                            ednsCsCustomIp.setValue((e.target as HTMLInputElement).value)
+                        }
+                        onBlur={() => ednsCsCustomIp.validate()}
+                        disabled={!ednsCsUseCustom()}
+                        errorMessage={ednsCsCustomIp.error()}
+                        size="large"
+                        onCard
+                    />
+                </div>
             </div>
         </ConfigDialog>
     );
diff --git a/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitAllowlistDialog.tsx b/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitAllowlistDialog.tsx
index c3c5d9581ed..83b267a9e60 100644
--- a/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitAllowlistDialog.tsx
+++ b/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitAllowlistDialog.tsx
@@ -47,6 +47,7 @@ export const RateLimitAllowlistDialog = (props: Props) => {
                     placeholder={intl.getMessage('dns_rate_limit_allowlist_placeholder')}
                     size="medium"
                     errorMessage={field.error()}
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitDialog.tsx b/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitDialog.tsx
index e35a06c0736..3cae26a5b04 100644
--- a/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitDialog.tsx
+++ b/client_v2/src/components/DnsSettings/ServerConfig/blocks/RateLimitDialog.tsx
@@ -61,6 +61,7 @@ export const RateLimitDialog = (props: Props) => {
                     max={RATE_LIMIT.MAX}
                     errorMessage={field.error()}
                     size="large"
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV4Dialog.tsx b/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV4Dialog.tsx
index 8193d85f825..4a012b3e239 100644
--- a/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV4Dialog.tsx
+++ b/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV4Dialog.tsx
@@ -56,6 +56,7 @@ export const SubnetPrefixV4Dialog = (props: Props) => {
                     max={IPV4_SUBNET_PREFIX.MAX}
                     errorMessage={field.error()}
                     size="large"
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV6Dialog.tsx b/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV6Dialog.tsx
index 6990c9852f4..c828ce4c623 100644
--- a/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV6Dialog.tsx
+++ b/client_v2/src/components/DnsSettings/ServerConfig/blocks/SubnetPrefixV6Dialog.tsx
@@ -56,6 +56,7 @@ export const SubnetPrefixV6Dialog = (props: Props) => {
                     max={IPV6_SUBNET_PREFIX.MAX}
                     errorMessage={field.error()}
                     size="large"
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/Upstream/Upstream.tsx b/client_v2/src/components/DnsSettings/Upstream/Upstream.tsx
index afa55d2c919..4bd71ff2895 100644
--- a/client_v2/src/components/DnsSettings/Upstream/Upstream.tsx
+++ b/client_v2/src/components/DnsSettings/Upstream/Upstream.tsx
@@ -4,11 +4,18 @@ import cn from 'clsx';
 
 import intl from 'panel/common/intl';
 import { dnsConfigState, togglePrivatePtrResolvers } from 'panel/stores/dnsConfig';
+import { addWarningToast } from 'panel/stores/toasts';
 import { settingsState, testUpstreamWithFormValues } from 'panel/stores/settings';
 import { Button } from 'panel/common/ui/Button';
 import { SettingRow } from 'panel/common/ui/SettingRow';
 import { useDialog } from 'panel/hooks/useDialog';
-import { getUpstreamModeSummary, getUpstreamServersSummary, getTtlSummary } from '../helpers';
+import { useSwitchState } from 'panel/hooks/useSwitchState';
+import {
+    getUpstreamModeSummary,
+    getUpstreamServersSummary,
+    getTtlSummary,
+    hasUsablePrivatePtrUpstreams,
+} from '../helpers';
 import theme from 'panel/lib/theme';
 
 import { UpstreamModeDialog } from './blocks/UpstreamModeDialog';
@@ -43,6 +50,42 @@ export const Upstream = () => {
 
     const processing = () => dnsConfigState.processingSetConfig;
 
+    const [privatePtrEnabled, setPrivatePtrEnabled] = useSwitchState(
+        () => dnsConfigState.use_private_ptr_resolvers,
+        processing,
+    );
+
+    /**
+     * Enabling without a single usable server cannot work — the backend rejects
+     * the request — so the user is taken to the page where the servers are set
+     * up.  Disabling always goes through.
+     */
+    const handlePrivatePtrResolversToggle = (checked: boolean) => {
+        if (!checked) {
+            setPrivatePtrEnabled(false);
+            togglePrivatePtrResolvers();
+
+            return;
+        }
+
+        const canResolve = hasUsablePrivatePtrUpstreams(
+            dnsConfigState.local_ptr_upstreams,
+            dnsConfigState.default_local_ptr_upstreams,
+        );
+        if (!canResolve) {
+            setPrivatePtrEnabled(false);
+            addWarningToast({
+                error: intl.getMessage('dns_private_reverse_no_default_resolvers'),
+            });
+            navigate(Paths.DnsPrivateReverse);
+
+            return;
+        }
+
+        setPrivatePtrEnabled(true);
+        togglePrivatePtrResolvers();
+    };
+
     return (
         <div>
             <h2 class={cn(theme.layout.subtitle, theme.title.h5, theme.title.h4_tablet)}>
@@ -95,8 +138,8 @@ export const Upstream = () => {
                         <p>{intl.getMessage('dns_private_reverse_resolvers_disabled_desc')}</p>
                     </>
                 }
-                checked={dnsConfigState.use_private_ptr_resolvers}
-                onChange={() => togglePrivatePtrResolvers()}
+                checked={privatePtrEnabled()}
+                onChange={handlePrivatePtrResolversToggle}
                 onClick={() => navigate(Paths.DnsPrivateReverse)}
                 divider
             />
diff --git a/client_v2/src/components/DnsSettings/Upstream/blocks/BootstrapDnsDialog.tsx b/client_v2/src/components/DnsSettings/Upstream/blocks/BootstrapDnsDialog.tsx
index 1a716928552..ed875414100 100644
--- a/client_v2/src/components/DnsSettings/Upstream/blocks/BootstrapDnsDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Upstream/blocks/BootstrapDnsDialog.tsx
@@ -51,6 +51,7 @@ export const BootstrapDnsDialog = (props: Props) => {
                     errorMessage={field.error()}
                     size="medium"
                     highlightComments
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/Upstream/blocks/FallbackDnsDialog.tsx b/client_v2/src/components/DnsSettings/Upstream/blocks/FallbackDnsDialog.tsx
index 351e88adecd..859643ac0fe 100644
--- a/client_v2/src/components/DnsSettings/Upstream/blocks/FallbackDnsDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Upstream/blocks/FallbackDnsDialog.tsx
@@ -65,6 +65,7 @@ export const FallbackDnsDialog = (props: Props) => {
                     errorMessage={field.error()}
                     size="medium"
                     highlightComments
+                    onCard
                 />
             </div>
             <Examples />
diff --git a/client_v2/src/components/DnsSettings/Upstream/blocks/PrivateReverseServersDialog.tsx b/client_v2/src/components/DnsSettings/Upstream/blocks/PrivateReverseServersDialog.tsx
index 27d7f7eaa2f..ea01326b5bc 100644
--- a/client_v2/src/components/DnsSettings/Upstream/blocks/PrivateReverseServersDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Upstream/blocks/PrivateReverseServersDialog.tsx
@@ -5,6 +5,7 @@ import { ConfigDialog } from 'panel/common/ui/ConfigDialog';
 import { Textarea } from 'panel/common/controls/Textarea';
 import { validateUpstreams } from 'panel/helpers/validators';
 import { useField } from 'panel/hooks/useField';
+import { hasUsablePrivatePtrUpstreams } from '../../helpers';
 import { Examples } from './Examples';
 import theme from 'panel/lib/theme';
 
@@ -15,10 +16,32 @@ type Props = {
 };
 
 export const PrivateReverseServersDialog = (props: Props) => {
+    /**
+     * An empty list is only safe while the private resolvers are off or while
+     * the OS defaults are there to fall back to.  Saving it with the feature on
+     * and no defaults leaves the backend unable to prepare the resolvers.
+     */
+    const validateServers = (value: string): string => {
+        const formatError = validateUpstreams(value);
+        if (formatError) {
+            return formatError;
+        }
+
+        const needsServers =
+            dnsConfigState.use_private_ptr_resolvers &&
+            dnsConfigState.default_local_ptr_upstreams.length === 0;
+
+        if (needsServers && !hasUsablePrivatePtrUpstreams(value, [])) {
+            return intl.getMessage('dns_private_reverse_servers_required');
+        }
+
+        return '';
+    };
+
     const field = useField<string>(
         () => props.open(),
         () => dnsConfigState.local_ptr_upstreams,
-        { validate: (v) => (v ? validateUpstreams(v) || '' : '') },
+        { validate: validateServers },
     );
 
     return (
@@ -58,6 +81,7 @@ export const PrivateReverseServersDialog = (props: Props) => {
                     errorMessage={field.error()}
                     size="medium"
                     highlightComments
+                    onCard
                 />
             </div>
             <Examples />
diff --git a/client_v2/src/components/DnsSettings/Upstream/blocks/ServerAddressesDialog.tsx b/client_v2/src/components/DnsSettings/Upstream/blocks/ServerAddressesDialog.tsx
index 0d9bf457d21..be5a7f49242 100644
--- a/client_v2/src/components/DnsSettings/Upstream/blocks/ServerAddressesDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Upstream/blocks/ServerAddressesDialog.tsx
@@ -84,6 +84,7 @@ export const ServerAddressesDialog = (props: Props) => {
                         errorMessage={field.error()}
                         size="medium"
                         highlightComments
+                        onCard
                     />
                 </div>
                 <Examples />
diff --git a/client_v2/src/components/DnsSettings/Upstream/blocks/TimeoutDialog.tsx b/client_v2/src/components/DnsSettings/Upstream/blocks/TimeoutDialog.tsx
index 761247167a0..5e621341682 100644
--- a/client_v2/src/components/DnsSettings/Upstream/blocks/TimeoutDialog.tsx
+++ b/client_v2/src/components/DnsSettings/Upstream/blocks/TimeoutDialog.tsx
@@ -59,6 +59,7 @@ export const TimeoutDialog = (props: Props) => {
                     max={UPSTREAM_TIMEOUT.MAX}
                     errorMessage={field.error()}
                     size="large"
+                    onCard
                 />
             </div>
         </ConfigDialog>
diff --git a/client_v2/src/components/DnsSettings/helpers.ts b/client_v2/src/components/DnsSettings/helpers.ts
index 6bc08701436..c694f098cea 100644
--- a/client_v2/src/components/DnsSettings/helpers.ts
+++ b/client_v2/src/components/DnsSettings/helpers.ts
@@ -23,6 +23,23 @@ export const getUpstreamServersSummary = (servers: string, upstreamDnsFile?: str
     return lines.join(', ');
 };
 
+/**
+ * Reports whether the private reverse DNS resolvers have at least one server to
+ * work with, counting the OS resolvers the backend falls back to.
+ *
+ * Comment-only lines do not count, matching the filtering the backend applies
+ * before it decides that there is no upstream to use.
+ */
+export const hasUsablePrivatePtrUpstreams = (
+    localPtrUpstreams: string,
+    defaultLocalPtrUpstreams: string[],
+): boolean =>
+    localPtrUpstreams.split('\n').some((line) => {
+        const trimmed = line.trim();
+
+        return trimmed !== '' && !trimmed.startsWith('#');
+    }) || defaultLocalPtrUpstreams.length > 0;
+
 export const getRateLimitSummary = (ratelimit: number): string => {
     if (ratelimit === 0) return intl.getMessage('dns_rate_limit_no_limit');
     return intl.getMessage('dns_rate_limit_value', { value: ratelimit });
diff --git a/client_v2/src/components/Encryption/Encryption.tsx b/client_v2/src/components/Encryption/Encryption.tsx
index 06874d2c764..0d2048fd4ed 100644
--- a/client_v2/src/components/Encryption/Encryption.tsx
+++ b/client_v2/src/components/Encryption/Encryption.tsx
@@ -1,16 +1,17 @@
 import { createSignal, createEffect, Show, onMount, onCleanup } from 'solid-js';
 import cn from 'clsx';
+import { useSearchParams } from '@solidjs/router';
 
 import { SettingRow } from 'panel/common/ui/SettingRow';
-import { Dropdown } from 'panel/common/ui/Dropdown';
+import { DangerLink } from 'panel/common/ui/DangerLink';
 import { Icon } from 'panel/common/ui/Icon';
 import { PageLoader } from 'panel/common/ui/Loader';
 import intl from 'panel/common/intl';
 import theme from 'panel/lib/theme';
 import { getTlsStatus, encryptionState, setTlsConfig } from 'panel/stores/encryption';
-import { ENCRYPTION_SOURCE } from 'panel/helpers/constants';
+import { TLS_WIZARD_QUERY_KEY } from 'panel/components/Routes/Paths';
 
-import { createDebouncedValidator } from './blocks/helpers';
+import { createDebouncedValidator, getStoreFormValues } from './blocks/helpers';
 import { PlainDnsToggle } from './blocks/PlainDnsToggle';
 import { TlsCertSection } from './blocks/TlsCertSection';
 import { ServerSettingsRow } from './blocks/ServerSettingsRow';
@@ -24,7 +25,6 @@ export const Encryption = () => {
     const [resetOpen, setResetOpen] = createSignal(false);
     const [serverSettingsOpen, setServerSettingsOpen] = createSignal(false);
     const [addCertOpen, setAddCertOpen] = createSignal(false);
-    const [menuOpen, setMenuOpen] = createSignal(false);
 
     const [tlsStatusLoaded, setTlsStatusLoaded] = createSignal(false);
 
@@ -55,6 +55,17 @@ export const Encryption = () => {
         cancelValidation();
     });
 
+    const [searchParams, setSearchParams] = useSearchParams<{
+        [TLS_WIZARD_QUERY_KEY]?: string;
+    }>();
+
+    createEffect(() => {
+        if (!tlsStatusLoaded() || !searchParams[TLS_WIZARD_QUERY_KEY]) return;
+
+        setAddCertOpen(true);
+        setSearchParams({ [TLS_WIZARD_QUERY_KEY]: undefined }, { replace: true });
+    });
+
     const certConfigured = () =>
         !!(encryptionState.certificate_chain || encryptionState.certificate_path);
 
@@ -65,25 +76,26 @@ export const Encryption = () => {
                 {
                     enabled: false,
                     serve_plain_dns: true,
+                    force_https: false,
                 },
                 { silent: true },
             );
             return;
         }
 
-        // Enabling: check if everything is configured before saving.
+        // Enabling: check that the certificate and key are configured before
+        // saving.
         const hasCert = !!(encryptionState.certificate_chain || encryptionState.certificate_path);
         const hasKey = !!(
             encryptionState.private_key ||
             encryptionState.private_key_path ||
             encryptionState.private_key_saved
         );
-        const hasServerName = !!encryptionState.server_name;
 
         // Everything is set up — save the change.
         // Native input already shows ON from the click; sync effect
         // confirms on success or reverts on failure.
-        if (hasCert && hasKey && hasServerName) {
+        if (hasCert && hasKey) {
             setTlsConfig({
                 enabled: true,
             });
@@ -95,15 +107,7 @@ export const Encryption = () => {
         setEncryptionEnabled(false);
 
         // Certificate or key is missing — open the TLS cert wizard (don't save yet).
-        if (!hasCert || !hasKey) {
-            setAddCertOpen(true);
-            return;
-        }
-
-        // Cert and key are present, but server name isn't set — open server settings.
-        if (!hasServerName) {
-            setServerSettingsOpen(true);
-        }
+        setAddCertOpen(true);
     };
 
     /**
@@ -121,43 +125,9 @@ export const Encryption = () => {
         );
         if (!hasCert || !hasKey) return;
 
-        validateConfig({
-            enabled: encryptionState.enabled,
-            serve_plain_dns: encryptionState.serve_plain_dns,
-            server_name: encryptionState.server_name,
-            force_https: encryptionState.force_https,
-            port_https: Number(encryptionState.port_https) || 0,
-            port_dns_over_tls: Number(encryptionState.port_dns_over_tls) || 0,
-            port_dns_over_quic: Number(encryptionState.port_dns_over_quic) || 0,
-            certificate_chain: encryptionState.certificate_chain,
-            private_key: encryptionState.private_key,
-            certificate_path: encryptionState.certificate_path,
-            private_key_path: encryptionState.private_key_path,
-            certificate_source: encryptionState.certificate_chain
-                ? ENCRYPTION_SOURCE.CONTENT
-                : ENCRYPTION_SOURCE.PATH,
-            key_source:
-                encryptionState.private_key || encryptionState.private_key_saved
-                    ? ENCRYPTION_SOURCE.CONTENT
-                    : ENCRYPTION_SOURCE.PATH,
-            private_key_saved: encryptionState.private_key_saved,
-        });
+        validateConfig(getStoreFormValues());
     });
 
-    const handleResetClick = () => {
-        setMenuOpen(false);
-        setResetOpen(true);
-    };
-
-    const resetMenu = (
-        <div
-            class={cn(theme.dropdown.item, theme.dropdown.item_danger, theme.dropdown.item_large)}
-            onClick={handleResetClick}
-        >
-            {intl.getMessage('reset_dns_protocols')}
-        </div>
-    );
-
     return (
         <div class={theme.layout.container}>
             <div class={cn(theme.layout.containerIn, theme.layout.containerIn_one_col)}>
@@ -165,22 +135,6 @@ export const Encryption = () => {
                     <h1 class={cn(theme.layout.title, theme.title.h4, theme.title.h3_tablet)}>
                         {intl.getMessage('protocols')}
                     </h1>
-                    <Dropdown
-                        position="bottomRight"
-                        noIcon
-                        open={menuOpen()}
-                        onOpenChange={setMenuOpen}
-                        menu={resetMenu}
-                        anchorClass={theme.dropdown.trigger_offset}
-                    >
-                        <button
-                            type="button"
-                            class={theme.dropdown.trigger}
-                            aria-label={intl.getMessage('reset_dns_protocols')}
-                        >
-                            <Icon icon="bullets" />
-                        </button>
-                    </Dropdown>
                 </div>
 
                 <Show when={tlsStatusLoaded()} fallback={<PageLoader />}>
@@ -228,6 +182,10 @@ export const Encryption = () => {
                     <ServerSettingsRow onOpen={() => setServerSettingsOpen(true)} />
 
                     <RedirectToggle />
+
+                    <DangerLink onClick={() => setResetOpen(true)}>
+                        {intl.getMessage('reset_dns_protocols')}
+                    </DangerLink>
                 </Show>
             </div>
 
diff --git a/client_v2/src/components/Encryption/blocks/ServerSettingsFields.tsx b/client_v2/src/components/Encryption/blocks/ServerSettingsFields.tsx
index 38955c294b8..f730f0fb6b3 100644
--- a/client_v2/src/components/Encryption/blocks/ServerSettingsFields.tsx
+++ b/client_v2/src/components/Encryption/blocks/ServerSettingsFields.tsx
@@ -17,6 +17,7 @@ type Props = {
     values: ServerSettingsValues;
     onFieldChange: (field: ServerSettingsField, value: string) => void;
     onFieldBlur: (field: ServerSettingsField) => void;
+    onFieldInput?: (field: ServerSettingsField, value: string) => void;
     errorFor?: (field: ServerSettingsField) => string | undefined;
     warningFor?: (field: ServerSettingsField) => string | undefined;
     idPrefix?: string;
@@ -61,6 +62,7 @@ const PortInput = (props: PortInputProps) => (
             label={props.label}
             errorMessage={props.errorMessage}
             size="large"
+            onCard
             data-testid={props.testId}
         />
         <FieldWarning
@@ -92,6 +94,12 @@ export const ServerSettingsFields = (props: Props) => {
                     onChange={(e) =>
                         props.onFieldChange('server_name', (e.target as HTMLInputElement).value)
                     }
+                    onInput={(e) =>
+                        props.onFieldInput?.(
+                            'server_name',
+                            (e.currentTarget as HTMLInputElement).value,
+                        )
+                    }
                     onBlur={() => props.onFieldBlur('server_name')}
                     isClearable={props.clearable}
                     label={
@@ -110,6 +118,7 @@ export const ServerSettingsFields = (props: Props) => {
                     placeholder={intl.getMessage('encryption_server_enter')}
                     errorMessage={error('server_name')}
                     size="large"
+                    onCard
                     data-testid={testId('server-name')}
                 />
                 <FieldWarning
diff --git a/client_v2/src/components/Encryption/blocks/ServerSettingsModal.tsx b/client_v2/src/components/Encryption/blocks/ServerSettingsModal.tsx
index 62fb197cc5a..d78bc4cfd4a 100644
--- a/client_v2/src/components/Encryption/blocks/ServerSettingsModal.tsx
+++ b/client_v2/src/components/Encryption/blocks/ServerSettingsModal.tsx
@@ -14,6 +14,7 @@ import {
 } from '../validate';
 import { getExternalPorts } from './helpers';
 import { ServerSettingsFields } from './ServerSettingsFields';
+import { createServerNameCheck } from './useServerNameCheck';
 
 type Props = {
     open: boolean;
@@ -31,19 +32,23 @@ export const ServerSettingsModal = (props: Props) => {
     const [values, setValues] = createStore<ServerSettingsValues>({ ...defaults });
     const [errors, setErrors] = createSignal<Record<string, string>>({});
 
+    const nameCheck = createServerNameCheck({ values });
+
     createEffect(
         on(
             () => props.open,
             (open) => {
                 if (!open) return;
 
+                const name = encryptionState.server_name || '';
                 setValues({
-                    server_name: encryptionState.server_name || '',
+                    server_name: name,
                     port_https: Number(encryptionState.port_https) || 0,
                     port_dns_over_tls: Number(encryptionState.port_dns_over_tls) || 0,
                     port_dns_over_quic: Number(encryptionState.port_dns_over_quic) || 0,
                 });
                 setErrors({});
+                nameCheck.reset(name);
             },
         ),
     );
@@ -75,17 +80,29 @@ export const ServerSettingsModal = (props: Props) => {
     const handleFieldChange = (field: ServerSettingsField, raw: string) => {
         setFieldError(field);
         if (field === 'server_name') {
+            // The clear button reports through `change` only, so this is what
+            // keeps the live name in step there.
+            nameCheck.onNameInput(raw);
             setValues('server_name', raw);
             return;
         }
         setValues(field, toNumber(raw));
     };
 
+    /** Typing invalidates the warning: it belongs to the name it was reported for. */
+    const handleFieldInput = (field: ServerSettingsField, raw: string) => {
+        if (field === 'server_name') nameCheck.onNameInput(raw);
+    };
+
     const handleFieldBlur = (field: ServerSettingsField) => {
         if (field === 'server_name') {
             const normalized = normalizeServerName(String(values.server_name ?? ''));
             setValues('server_name', normalized);
-            setFieldError(field, validateServerName(normalized));
+            nameCheck.onNameInput(normalized);
+            const error = validateServerName(normalized);
+            setFieldError(field, error);
+
+            if (!error) nameCheck.checkOnBlur(normalized);
             return;
         }
 
@@ -93,13 +110,15 @@ export const ServerSettingsModal = (props: Props) => {
         setFieldError(field, validatePortField(field, port));
     };
 
-    const save = () => {
+    const save = async () => {
         const errs = clientErrors();
         if (Object.values(errs).some(Boolean)) {
             setErrors(errs);
             return;
         }
 
+        if (!(await nameCheck.confirmSave())) return;
+
         setTlsConfig({ ...values });
         props.onClose();
     };
@@ -116,12 +135,19 @@ export const ServerSettingsModal = (props: Props) => {
             onSubmit={save}
             processing={processing()}
             submitDisabled={processing() || hasErrors()}
+            buttonText={nameCheck.warningText() ? intl.getMessage('save_anyway') : undefined}
+            buttonVariant={nameCheck.warningText() ? 'warning' : undefined}
         >
             <ServerSettingsFields
                 values={values}
                 onFieldChange={handleFieldChange}
+                onFieldInput={handleFieldInput}
                 onFieldBlur={handleFieldBlur}
                 errorFor={fieldError}
+                warningFor={(field) =>
+                    field === 'server_name' ? nameCheck.warningText() : undefined
+                }
+                testIdPrefix="server-settings"
                 clearable
             />
         </ConfigDialog>
diff --git a/client_v2/src/components/Encryption/blocks/SetupWizard/PemSourceFields.tsx b/client_v2/src/components/Encryption/blocks/SetupWizard/PemSourceFields.tsx
index c579e626569..ee01d497b52 100644
--- a/client_v2/src/components/Encryption/blocks/SetupWizard/PemSourceFields.tsx
+++ b/client_v2/src/components/Encryption/blocks/SetupWizard/PemSourceFields.tsx
@@ -65,6 +65,7 @@ export const PemSourceFields = (props: Props) => {
                             errorMessage={props.errorFor(config.fields.path)}
                             label={config.texts.pathLabel()}
                             size="large"
+                            onCard
                             data-testid={`${config.testIdPrefix}-path`}
                         />
                         <Show when={pathWarning()}>
@@ -91,6 +92,7 @@ export const PemSourceFields = (props: Props) => {
                         isClearable
                         onClear={fields.handleClear}
                         size={fields.dropzoneVisible() ? 'compact' : 'large'}
+                        onCard
                         data-testid={`${config.testIdPrefix}-content`}
                     />
                     <Show when={contentWarning()}>
diff --git a/client_v2/src/components/Encryption/blocks/SetupWizard/TlsSetupWizard.tsx b/client_v2/src/components/Encryption/blocks/SetupWizard/TlsSetupWizard.tsx
index 0ff8138f7d5..fe803a16316 100644
--- a/client_v2/src/components/Encryption/blocks/SetupWizard/TlsSetupWizard.tsx
+++ b/client_v2/src/components/Encryption/blocks/SetupWizard/TlsSetupWizard.tsx
@@ -290,7 +290,7 @@ export const TlsSetupWizard = (props: Props) => {
                             ? intl.getMessage('tls_setup_enable_anyway')
                             : intl.getMessage('enable')}
                     </Button>
-                    <Button variant="secondary" onClick={props.onClose}>
+                    <Button variant="secondary" onClick={props.onClose} onCard>
                         {intl.getMessage('cancel')}
                     </Button>
                 </div>
@@ -308,7 +308,7 @@ export const TlsSetupWizard = (props: Props) => {
                         ? intl.getMessage('tls_setup_add_anyway')
                         : intl.getMessage('add')}
                 </Button>
-                <Button variant="secondary" onClick={props.onClose}>
+                <Button variant="secondary" onClick={props.onClose} onCard>
                     {intl.getMessage('cancel')}
                 </Button>
             </div>
diff --git a/client_v2/src/components/Encryption/blocks/SetupWizard/mapStepResult.ts b/client_v2/src/components/Encryption/blocks/SetupWizard/mapStepResult.ts
index 2e3b2f4c847..70263874d43 100644
--- a/client_v2/src/components/Encryption/blocks/SetupWizard/mapStepResult.ts
+++ b/client_v2/src/components/Encryption/blocks/SetupWizard/mapStepResult.ts
@@ -27,8 +27,6 @@ export const STEP_FIELDS: Record<WizardStep, ReadonlySet<string>> = {
 type CertField = 'certificate_chain' | 'certificate_path';
 type KeyField = 'private_key' | 'private_key_path';
 
-const msg = (key: string, params?: Record<string, string>) => intl.getMessage(key, params);
-
 const certField = (v: EncryptionFormValues): CertField =>
     v.certificate_source === ENCRYPTION_SOURCE.PATH ? 'certificate_path' : 'certificate_chain';
 
@@ -41,13 +39,13 @@ const keyFieldOf = (v: EncryptionFormValues): KeyField =>
  */
 const certTextMessage = (text: string, field: CertField): StepMessage | undefined => {
     if (text.includes('reading cert file')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_read_cert') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_read_cert') };
     }
     if (text.includes('empty certificate')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_not_a_cert') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_not_a_cert') };
     }
     if (text.includes('parsing certificate at index')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_parse_cert') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_parse_cert') };
     }
 
     return undefined;
@@ -81,15 +79,23 @@ const mapCertText = (
         // A validity window that excludes now is worth naming: the generic
         // untrusted wording would send the user looking for a CA problem.
         if (datesInvalid) {
-            return { field, kind: 'warning', message: msg('tls_setup_warning_cert_expired') };
+            return {
+                field,
+                kind: 'warning',
+                message: intl.getMessage('tls_setup_warning_cert_expired'),
+            };
         }
 
         // Non-critical for the backend: the chain is simply not trusted, or a
         // certificate in it is expired.  It warns on every step.
-        return { field, kind: 'warning', message: msg('tls_setup_warning_cert_untrusted') };
+        return {
+            field,
+            kind: 'warning',
+            message: intl.getMessage('tls_setup_warning_cert_untrusted'),
+        };
     }
     if (text.includes('certificates has no IP addresses')) {
-        return { field, kind: 'warning', message: msg('tls_setup_warning_no_ip') };
+        return { field, kind: 'warning', message: intl.getMessage('tls_setup_warning_no_ip') };
     }
 
     // A certificate that parsed only ever warns; an unparsed one blocks, since
@@ -98,33 +104,33 @@ const mapCertText = (
         return {
             field,
             kind: 'warning',
-            message: text || msg('tls_setup_warning_cert_untrusted'),
+            message: text || intl.getMessage('tls_setup_warning_cert_untrusted'),
         };
     }
 
-    return { field, kind: 'error', message: msg('tls_setup_error_parse_cert') };
+    return { field, kind: 'error', message: intl.getMessage('tls_setup_error_parse_cert') };
 };
 
 /** Maps `warning_validation` / 400 text about the private key and the pair. */
 const mapKeyText = (text: string, field: KeyField): StepMessage => {
     if (text.includes('reading key file')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_read_key') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_read_key') };
     }
     if (text.includes('no valid keys were found')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_not_a_key') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_not_a_key') };
     }
     if (text.includes('parsing private key')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_parse_key') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_parse_key') };
     }
     if (text.includes('ED25519 keys are not supported')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_ed25519_key') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_ed25519_key') };
     }
     if (text.includes('certificate-key pair')) {
-        return { field, kind: 'error', message: msg('tls_setup_error_key_mismatch') };
+        return { field, kind: 'error', message: intl.getMessage('tls_setup_error_key_mismatch') };
     }
 
     // Defensive: an empty backend text still blocks, with a generic message.
-    return { field, kind: 'error', message: text || msg('tls_setup_error_parse_key') };
+    return { field, kind: 'error', message: text || intl.getMessage('tls_setup_error_parse_key') };
 };
 
 const PROTO_FIELDS: Record<string, keyof EncryptionFormValues> = {
@@ -143,7 +149,10 @@ const mapConfigText = (
         return {
             field: PROTO_FIELDS[busy[2]],
             kind: 'error',
-            message: msg('tls_setup_error_port_busy', { port: busy[1], protocol: busy[2] }),
+            message: intl.getMessage('tls_setup_error_port_busy', {
+                port: busy[1],
+                protocol: busy[2],
+            }),
         };
     }
 
@@ -154,7 +163,7 @@ const mapConfigText = (
         // backend duplicate report also covers external settings).
         return {
             kind: 'error',
-            message: msg('tls_setup_error_duplicate_port', { port: dup[1] }),
+            message: intl.getMessage('tls_setup_error_duplicate_port', { port: dup[1] }),
         };
     }
 
@@ -172,7 +181,7 @@ const mapConfigText = (
             return {
                 field: 'server_name',
                 kind: 'warning',
-                message: msg('tls_setup_warning_server_name_mismatch', {
+                message: intl.getMessage('tls_setup_warning_server_name_mismatch', {
                     hostname: String(values.server_name ?? ''),
                 }),
             };
@@ -182,17 +191,17 @@ const mapConfigText = (
         // not trusted` on macOS — and every other verify complaint, an expired
         // certificate included: the backend treats all of them as
         // non-critical, and so does the certificate step.  Warn, never block.
-        return { kind: 'warning', message: msg('tls_setup_warning_cert_untrusted') };
+        return { kind: 'warning', message: intl.getMessage('tls_setup_warning_cert_untrusted') };
     }
     if (text.includes('certificates has no IP addresses')) {
-        return { kind: 'warning', message: msg('tls_setup_warning_no_ip') };
+        return { kind: 'warning', message: intl.getMessage('tls_setup_warning_no_ip') };
     }
     if (text.includes('certificate-key pair') || text.includes('parsing private key')) {
         // The pair is checked on the key step, which is where the key lives.
         return {
             field: keyFieldOf(values),
             kind: 'error',
-            message: msg('tls_setup_error_key_mismatch'),
+            message: intl.getMessage('tls_setup_error_key_mismatch'),
         };
     }
 
@@ -245,7 +254,11 @@ export const mapStepResult = (
         if (!res.valid_pair) {
             return text
                 ? mapKeyText(text, key)
-                : { field: key, kind: 'error', message: msg('tls_setup_error_key_mismatch') };
+                : {
+                      field: key,
+                      kind: 'error',
+                      message: intl.getMessage('tls_setup_error_key_mismatch'),
+                  };
         }
 
         if (text) return mapCertText(text, cert, true, datesInvalid);
@@ -261,7 +274,7 @@ export const mapStepResult = (
             return {
                 field: cert,
                 kind: 'error',
-                message: msg('tls_setup_error_parse_cert'),
+                message: intl.getMessage('tls_setup_error_parse_cert'),
             };
         }
 
@@ -269,14 +282,14 @@ export const mapStepResult = (
             return {
                 field: key,
                 kind: 'error',
-                message: msg('tls_setup_error_parse_key'),
+                message: intl.getMessage('tls_setup_error_parse_key'),
             };
         }
 
         return {
             field: key,
             kind: 'error',
-            message: msg('tls_setup_error_key_mismatch'),
+            message: intl.getMessage('tls_setup_error_key_mismatch'),
         };
     }
 
diff --git a/client_v2/src/components/Encryption/blocks/TlsCertSection.tsx b/client_v2/src/components/Encryption/blocks/TlsCertSection.tsx
index ea4fc271200..c6ad18a9289 100644
--- a/client_v2/src/components/Encryption/blocks/TlsCertSection.tsx
+++ b/client_v2/src/components/Encryption/blocks/TlsCertSection.tsx
@@ -8,6 +8,8 @@ import {
     resetValidationStatus,
     applyTlsOptimistically,
 } from 'panel/stores/encryption';
+import { dashboardState } from 'panel/stores/dashboard';
+import { STANDARD_WEB_PORT } from 'panel/helpers/constants';
 import { CertificateStatus, ValidationStatus } from '../Status';
 import { defaultTlsValues, getSubmitValues } from './helpers';
 import s from '../styles.module.pcss';
@@ -18,15 +20,6 @@ export const TlsCertSection = () => {
 
     const enc = () => encryptionState;
 
-    /**
-     * Removing the certificate takes the whole encryption setup down with it:
-     * encryption is turned off and the TLS data goes back to its defaults, the
-     * same payload "Reset DNS protocols" writes.  The server settings row is
-     * disabled without a pair but keeps rendering what it knows, so a partial
-     * reset would leave the hostname, the ports, and the redirect behind —
-     * describing a server that no longer serves TLS, and seeding the next
-     * wizard run with those values.
-     */
     const handleRemoveCert = () => {
         const values = getSubmitValues(defaultTlsValues);
 
@@ -87,7 +80,10 @@ export const TlsCertSection = () => {
             <Show when={showDeleteConfirm()}>
                 <ConfirmDialog
                     title={intl.getMessage('remove_tls_certificate')}
-                    text={intl.getMessage('remove_tls_certificate_desc')}
+                    text={intl.getMessage('remove_tls_certificate_desc', {
+                        host: window.location.hostname,
+                        port: Number(dashboardState.httpPort) || STANDARD_WEB_PORT,
+                    })}
                     buttonText={intl.getMessage('yes_remove')}
                     cancelText={intl.getMessage('cancel')}
                     buttonVariant="danger"
diff --git a/client_v2/src/components/Encryption/blocks/helpers.ts b/client_v2/src/components/Encryption/blocks/helpers.ts
index e2bf4e8cba1..e23e03e0c60 100644
--- a/client_v2/src/components/Encryption/blocks/helpers.ts
+++ b/client_v2/src/components/Encryption/blocks/helpers.ts
@@ -80,6 +80,38 @@ export const getSubmitValues = (values: EncryptionFormValues): TlsSubmitValues =
     return config;
 };
 
+/**
+ * Current TLS settings from the store, as form values.
+ *
+ * `certificate_source` / `key_source` are derived from the field that holds
+ * the data, and `overrides` win — so callers can validate an edited draft
+ * against the saved certificate and key.
+ */
+export const getStoreFormValues = (
+    overrides?: Partial<EncryptionFormValues>,
+): EncryptionFormValues => ({
+    enabled: encryptionState.enabled,
+    serve_plain_dns: encryptionState.serve_plain_dns,
+    server_name: encryptionState.server_name,
+    force_https: encryptionState.force_https,
+    port_https: Number(encryptionState.port_https) || 0,
+    port_dns_over_tls: Number(encryptionState.port_dns_over_tls) || 0,
+    port_dns_over_quic: Number(encryptionState.port_dns_over_quic) || 0,
+    certificate_chain: encryptionState.certificate_chain,
+    private_key: encryptionState.private_key,
+    certificate_path: encryptionState.certificate_path,
+    private_key_path: encryptionState.private_key_path,
+    certificate_source: encryptionState.certificate_chain
+        ? ENCRYPTION_SOURCE.CONTENT
+        : ENCRYPTION_SOURCE.PATH,
+    key_source:
+        encryptionState.private_key || encryptionState.private_key_saved
+            ? ENCRYPTION_SOURCE.CONTENT
+            : ENCRYPTION_SOURCE.PATH,
+    private_key_saved: encryptionState.private_key_saved,
+    ...overrides,
+});
+
 /** Steps of the TLS setup wizard. */
 export type WizardStep = 1 | 2 | 3;
 
diff --git a/client_v2/src/components/Encryption/blocks/useServerNameCheck.ts b/client_v2/src/components/Encryption/blocks/useServerNameCheck.ts
new file mode 100644
index 00000000000..59886a3dd15
--- /dev/null
+++ b/client_v2/src/components/Encryption/blocks/useServerNameCheck.ts
@@ -0,0 +1,122 @@
+import { createSignal } from 'solid-js';
+
+import { encryptionState, validateTlsConfig } from 'panel/stores/encryption';
+import type { ServerSettingsValues } from '../validate';
+import { getStepValidationValues, getStoreFormValues } from './helpers';
+import { mapStepResult } from './SetupWizard/mapStepResult';
+
+type Options = {
+    /** Live form values of the settings dialog; read when a check runs. */
+    values: ServerSettingsValues;
+};
+
+/**
+ * Certificate/server-name check behind the "Encrypted DNS server settings"
+ * dialog.
+ *
+ * The dialog edits the name the certificate is checked against, so only the
+ * backend can judge it: a check sends the edited draft together with the saved
+ * certificate and key, exactly like the wizard's config step, and keeps the
+ * mismatch warning it reports.  The warning, the live name it belongs to and
+ * the check bookkeeping all live here, so the dialog only wires field events
+ * to it.
+ */
+export const createServerNameCheck = (opts: Options) => {
+    /**
+     * Warning plus the name it was reported for.  The live name moves on every
+     * keystroke while the store only learns it on `change` (blur), so the pair
+     * is what keeps the warning from outliving the value it describes.
+     */
+    const [warning, setWarning] = createSignal<{ name: string; text: string }>();
+    const [draftName, setDraftName] = createSignal('');
+
+    // Monotonic id used to drop superseded validation responses.
+    let checkId = 0;
+    // Name of the last completed check, so re-leaving the field without
+    // editing the name does not fire another request.
+    let lastCheckedName: string | undefined;
+
+    /** The warning to render — only while the field still holds the checked name. */
+    const warningText = () => (warning()?.name === draftName() ? warning()?.text : undefined);
+
+    const hasCert = () =>
+        !!(encryptionState.certificate_chain || encryptionState.certificate_path);
+    const hasKey = () =>
+        !!(
+            encryptionState.private_key ||
+            encryptionState.private_key_path ||
+            encryptionState.private_key_saved
+        );
+
+    /**
+     * Asks the backend whether the certificate covers the edited server name.
+     *
+     * `current` is false when a newer check or an edit made the response stale;
+     * the caller must then leave the decision to that newer check.  `warning`
+     * is the text to show, or undefined when there is nothing to warn about —
+     * no certificate to check the name against, a name the certificate covers,
+     * or a backend verdict other than the server-name mismatch (an unreadable
+     * certificate, a busy port) that this dialog does not render.
+     */
+    const run = async (): Promise<{ current: boolean; warning?: string }> => {
+        if (!hasCert() || !hasKey()) return { current: true };
+
+        // Validate the edited draft against the saved certificate and key,
+        // exactly as the wizard's config step does.
+        const formValues = getStoreFormValues({ ...opts.values });
+        const name = String(formValues.server_name ?? '');
+        const payload = getStepValidationValues(3, formValues);
+
+        const id = ++checkId;
+        const res = await validateTlsConfig(payload, { persist: false });
+
+        if (id !== checkId || name !== draftName()) {
+            return { current: false };
+        }
+
+        // The wizard's config step owns this copy, so the same mapping keeps
+        // the two surfaces saying the same thing.
+        const message = mapStepResult(3, res, formValues);
+        const text =
+            message?.kind === 'warning' && message.field === 'server_name'
+                ? message.message
+                : undefined;
+        setWarning(text ? { name, text } : undefined);
+        lastCheckedName = name;
+
+        return { current: true, warning: text };
+    };
+
+    /** Fills the check with the settings the dialog opened with. */
+    const reset = (name: string) => {
+        setWarning(undefined);
+        setDraftName(name);
+        lastCheckedName = undefined;
+    };
+
+    /** Keeps the live name in step with the field, so the warning can be dropped. */
+    const onNameInput = (name: string) => setDraftName(name);
+
+    /** Checks the name the field was left with, unless it was already checked. */
+    const checkOnBlur = (name: string) => {
+        if (name !== lastCheckedName) void run();
+    };
+
+    /**
+     * Runs the check for the save and reports whether it may go through.
+     *
+     * A newly discovered warning has to be seen before it can be saved past: it
+     * is put on screen and this attempt is held back, so the next one is
+     * visibly a confirmation.  A warning already on screen does not ask again,
+     * and a check superseded by a newer one leaves the decision to that check.
+     */
+    const confirmSave = async (): Promise<boolean> => {
+        const shown = warningText();
+        const { current, warning: text } = await run();
+        if (!current) return false;
+
+        return !text || text === shown;
+    };
+
+    return { warningText, reset, onNameInput, checkOnBlur, confirmSave };
+};
diff --git a/client_v2/src/components/FilterLists/blocks/ConfigureAllowlistModal/ConfigureAllowlistModal.tsx b/client_v2/src/components/FilterLists/blocks/ConfigureAllowlistModal/ConfigureAllowlistModal.tsx
index f4515b7ce15..a1812d76b38 100644
--- a/client_v2/src/components/FilterLists/blocks/ConfigureAllowlistModal/ConfigureAllowlistModal.tsx
+++ b/client_v2/src/components/FilterLists/blocks/ConfigureAllowlistModal/ConfigureAllowlistModal.tsx
@@ -112,6 +112,7 @@ export const ConfigureAllowlistModal = (props: Props) => {
                                     placeholder={intl.getMessage('allowlist_placeholder_example')}
                                     value={name()}
                                     onChange={(e) => setName((e.target as HTMLInputElement).value)}
+                                    onCard
                                 />
                             </div>
 
@@ -125,6 +126,7 @@ export const ConfigureAllowlistModal = (props: Props) => {
                                     onChange={(e) => setUrl((e.target as HTMLInputElement).value)}
                                     onBlur={validateAndSetErrors}
                                     errorMessage={urlError()}
+                                    onCard
                                 />
                             </div>
                         </div>
@@ -152,6 +154,7 @@ export const ConfigureAllowlistModal = (props: Props) => {
                             size="small"
                             onClick={handleCancel}
                             class={theme.dialog.button}
+                            onCard
                         >
                             {intl.getMessage('cancel')}
                         </Button>
diff --git a/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/ConfigureBlocklistModal.tsx b/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/ConfigureBlocklistModal.tsx
index 0475c023076..bdd17a6aed1 100644
--- a/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/ConfigureBlocklistModal.tsx
+++ b/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/ConfigureBlocklistModal.tsx
@@ -259,6 +259,7 @@ export const ConfigureBlocklistModal = (props: Props) => {
                             size="small"
                             onClick={handleCancel}
                             class={theme.dialog.button}
+                            onCard
                         >
                             {intl.getMessage('cancel')}
                         </Button>
diff --git a/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/blocks/ManualFilterForm/ManualFilterForm.tsx b/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/blocks/ManualFilterForm/ManualFilterForm.tsx
index 0698a7b6ae6..fd986a7be98 100644
--- a/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/blocks/ManualFilterForm/ManualFilterForm.tsx
+++ b/client_v2/src/components/FilterLists/blocks/ConfigureBlocklistModal/blocks/ManualFilterForm/ManualFilterForm.tsx
@@ -42,6 +42,7 @@ export const ManualFilterForm = (props: Props) => {
                     placeholder={intl.getMessage('blocklist_placeholder_example')}
                     value={name()}
                     onChange={(e) => setName((e.target as HTMLInputElement).value)}
+                    onCard
                 />
             </div>
 
@@ -56,6 +57,7 @@ export const ManualFilterForm = (props: Props) => {
                     onChange={(e) => setUrl((e.target as HTMLInputElement).value)}
                     onBlur={handleUrlBlur}
                     errorMessage={urlError()}
+                    onCard
                 />
             </div>
         </div>
diff --git a/client_v2/src/components/FilterLists/blocks/ConfigureRewritesModal/ConfigureRewritesModal.tsx b/client_v2/src/components/FilterLists/blocks/ConfigureRewritesModal/ConfigureRewritesModal.tsx
index 905198ac945..3f639cc62eb 100644
--- a/client_v2/src/components/FilterLists/blocks/ConfigureRewritesModal/ConfigureRewritesModal.tsx
+++ b/client_v2/src/components/FilterLists/blocks/ConfigureRewritesModal/ConfigureRewritesModal.tsx
@@ -182,6 +182,7 @@ export const ConfigureRewritesModal = (props: Props) => {
                                     onBlur={validateDomainField}
                                     errorMessage={domainError()}
                                     size="large"
+                                    onCard
                                 />
                             </div>
 
@@ -207,6 +208,7 @@ export const ConfigureRewritesModal = (props: Props) => {
                                     onBlur={validateAnswerField}
                                     errorMessage={answerError()}
                                     size="large"
+                                    onCard
                                 />
                             </div>
                         </div>
@@ -238,6 +240,7 @@ export const ConfigureRewritesModal = (props: Props) => {
                             size="small"
                             onClick={handleCancel}
                             class={theme.dialog.button}
+                            onCard
                         >
                             {intl.getMessage('cancel')}
                         </Button>
diff --git a/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterIntervalInput.tsx b/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterIntervalInput.tsx
index 0c72046134a..3907f12ea78 100644
--- a/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterIntervalInput.tsx
+++ b/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterIntervalInput.tsx
@@ -69,6 +69,7 @@ export const FilterIntervalInput = (props: Props) => {
                 min={FILTER_INTERVAL_RANGE.MIN}
                 max={FILTER_INTERVAL_RANGE.MAX}
                 type="number"
+                onCard
             />
         </div>
     );
diff --git a/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterUpdateModal.tsx b/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterUpdateModal.tsx
index 2231420449b..112af7fd78c 100644
--- a/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterUpdateModal.tsx
+++ b/client_v2/src/components/FilterLists/blocks/FilterUpdateModal/FilterUpdateModal.tsx
@@ -149,6 +149,7 @@ export const FilterUpdateModal = () => {
                             size="small"
                             onClick={onClose}
                             class={theme.dialog.button}
+                            onCard
                         >
                             {intl.getMessage('cancel')}
                         </Button>
diff --git a/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.module.pcss b/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.module.pcss
index 8880495472c..c1d2c576b58 100644
--- a/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.module.pcss
+++ b/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.module.pcss
@@ -33,6 +33,19 @@
     overscroll-behavior: contain;
     padding-bottom: 16px;
     -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: var(--default-item-divider) transparent;
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 8px;
+        background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 16px;
+        background: var(--default-item-divider);
+    }
 
     @media (min-width: 1024px) and (min-height: 900px) {
         flex: 0 1 auto;
@@ -112,9 +125,12 @@
     gap: 16px;
     flex-shrink: 0;
     padding: 16px 32px 24px;
-    background: var(--default-page-background);
-    border-radius: 8px 8px 16px 16px;
-    box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, 0.1);
+    background: var(--default-cards-background);
+    border-radius: 0 0 16px 16px;
+    box-shadow:
+        0 -4px 8px 3px transparent,
+        0 -1px 3px 0 transparent;
+    transition: box-shadow var(--t2);
     position: relative;
     z-index: 1;
 
@@ -131,16 +147,23 @@
 
 .actionButton {
     flex: 0 0 auto;
-    width: auto;
+    width: 100%;
     min-width: 200px;
     max-width: none;
+
+    @media (min-width: 1024px) {
+        width: auto;
+    }
 }
 
 .dialog :global(.dialog-header) {
     padding: 24px 56px 24px 32px;
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
-    background: var(--default-page-background);
-    border-radius: 16px 16px 8px 8px;
+    box-shadow:
+        0 4px 8px 3px transparent,
+        0 1px 3px 0 transparent;
+    transition: box-shadow var(--t2);
+    background: var(--default-cards-background);
+    border-radius: 16px 16px 0 0;
     flex-shrink: 0;
     position: relative;
     z-index: 1;
@@ -173,7 +196,6 @@
     }
 }
 
-/* The content card carries .dialog itself — compound selector, not descendant */
 .dialog:global([data-part='content']) {
     display: flex;
     flex-direction: column;
@@ -189,7 +211,6 @@
     }
 }
 
-/* The body is a descendant <div class="dialog-body"> */
 .dialog :global(.dialog-body) {
     display: flex;
     flex: 1 1 auto;
@@ -202,3 +223,16 @@
         min-height: auto;
     }
 }
+
+.dialog:global([data-part='content']):has(.scrollArea[data-can-scroll-up='true'])
+    :global(.dialog-header) {
+    box-shadow:
+        0 4px 8px 3px rgba(0, 0, 0, 0.05),
+        0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.dialog:global([data-part='content']):has(.scrollArea[data-can-scroll-down='true']) .actionFooter {
+    box-shadow:
+        0 -4px 8px 3px rgba(0, 0, 0, 0.05),
+        0 -1px 3px 0 rgba(0, 0, 0, 0.1);
+}
diff --git a/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.tsx b/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.tsx
index 5c4dbc01566..ab332d4fd49 100644
--- a/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.tsx
+++ b/client_v2/src/components/QueryLog/blocks/DetailModal/DetailModal.tsx
@@ -1,9 +1,10 @@
-import { Show, For } from 'solid-js';
+import { Show, For, createSignal } from 'solid-js';
 import cn from 'clsx';
 
 import intl from 'panel/common/intl';
 import { Dialog } from 'panel/common/ui/Dialog';
 import theme from 'panel/lib/theme';
+import { useScrollEdges } from 'panel/hooks/useScrollEdges';
 
 import {
     captitalizeWords,
@@ -67,6 +68,9 @@ const hasValue = (value: any) =>
     value !== undefined && value !== null && value !== '' && value !== false;
 
 export const DetailModal = (props: Props) => {
+    const [scrollAreaRef, setScrollAreaRef] = createSignal<HTMLDivElement>();
+    const { canScrollUp, canScrollDown } = useScrollEdges(scrollAreaRef);
+
     const statusKey = () =>
         getQueryStatusKey(props.entry.reason, props.entry.originalResponse ?? []);
     const reasonKey = () => getQueryReasonKey(props.entry.reason, props.entry.rules ?? []);
@@ -120,7 +124,13 @@ export const DetailModal = (props: Props) => {
             wrapClass={s.wrap}
         >
             <div class={s.content} data-testid="query-log-detail-modal">
-                <div class={s.scrollArea} data-testid="query-log-detail-scroll-area">
+                <div
+                    ref={setScrollAreaRef}
+                    class={s.scrollArea}
+                    data-testid="query-log-detail-scroll-area"
+                    data-can-scroll-up={String(canScrollUp())}
+                    data-can-scroll-down={String(canScrollDown())}
+                >
                     <div class={s.section}>
                         <Show when={props.entry.answer_dnssec}>
                             <div class={cn(s.row, theme.text.t3, theme.text.semibold)}>
diff --git a/client_v2/src/components/QueryLog/blocks/Header/Header.tsx b/client_v2/src/components/QueryLog/blocks/Header/Header.tsx
index d8e21ff3388..d0604f7daea 100644
--- a/client_v2/src/components/QueryLog/blocks/Header/Header.tsx
+++ b/client_v2/src/components/QueryLog/blocks/Header/Header.tsx
@@ -11,7 +11,7 @@ import { FaqTooltip } from 'panel/common/ui/FaqTooltip';
 import { InlineLoader } from 'panel/common/ui/Loader';
 import { IOption } from 'panel/lib/helpers/utils';
 import { DEBOUNCE_FILTER_TIMEOUT } from 'panel/helpers/constants';
-import { useIsMobile } from 'panel/hooks/useIsMobile';
+import { useIsMobile } from 'panel/hooks/useMediaQuery';
 
 import s from './Header.module.pcss';
 
diff --git a/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.module.pcss b/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.module.pcss
index 0aeae5a87a4..b81b78c8a70 100644
--- a/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.module.pcss
+++ b/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.module.pcss
@@ -7,9 +7,7 @@
     display: flex;
     flex-direction: column;
     padding: 8px 0 16px;
-    background: var(--default-page-background);
     border-radius: 8px;
-    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.1);
 }
 
 .icon {
diff --git a/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.tsx b/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.tsx
index e70c43309d7..191cd383c0d 100644
--- a/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.tsx
+++ b/client_v2/src/components/QueryLog/blocks/LogCard/LogCard.tsx
@@ -68,7 +68,7 @@ export const LogCard = (props: Props) => {
             onClick={() => props.onRowClick(props.entry)}
             data-testid="query-log-card"
         >
-            <div class={s.cardBody}>
+            <div class={cn(s.cardBody, theme.table.mobileCard)}>
                 <div class={s.cardHeader}>
                     <div class={s.titleBlock}>
                         <div class={s.titleRow}>
@@ -101,7 +101,7 @@ export const LogCard = (props: Props) => {
                             </div>
                         </div>
 
-                        <span class={cn(s.typeLine, theme.text.t4, theme.text.condenced)}>
+                        <span class={cn(s.typeLine, theme.text.t3, theme.text.condenced)}>
                             {intl.getMessage('type_value', { value: props.entry.type })}, {proto()}
                         </span>
                     </div>
@@ -127,20 +127,20 @@ export const LogCard = (props: Props) => {
                 </div>
 
                 <div class={s.fieldGrid}>
-                    <span class={cn(s.fieldLabel, theme.text.t4, theme.text.condenced)}>
+                    <span class={cn(s.fieldLabel, theme.text.t3, theme.text.condenced)}>
                         {intl.getMessage('time_table_header')}
                     </span>
-                    <span class={cn(s.fieldValue, theme.text.t4, theme.text.condenced)}>
+                    <span class={cn(s.fieldValue, theme.text.t3, theme.text.condenced)}>
                         {formatLogDate(props.entry.time)}, {formatLogTime(props.entry.time)}
                     </span>
 
-                    <span class={cn(s.fieldLabel, theme.text.t4, theme.text.condenced)}>
+                    <span class={cn(s.fieldLabel, theme.text.t3, theme.text.condenced)}>
                         {intl.getMessage('status_table_header')}
                     </span>
                     <span
                         class={cn(
                             s.status,
-                            theme.text.t4,
+                            theme.text.t3,
                             theme.text.condenced,
                             getStatusClassName(props.entry.reason),
                         )}
@@ -149,36 +149,36 @@ export const LogCard = (props: Props) => {
                     </span>
 
                     <Show when={reasonKey() !== 'none'}>
-                        <span class={cn(s.fieldLabel, theme.text.t4, theme.text.condenced)}>
+                        <span class={cn(s.fieldLabel, theme.text.t3, theme.text.condenced)}>
                             {intl.getMessage('reason_table_header')}
                         </span>
-                        <span class={cn(s.fieldValue, theme.text.t4, theme.text.condenced)}>
+                        <span class={cn(s.fieldValue, theme.text.t3, theme.text.condenced)}>
                             {reasonLabel()}
                             {reasonDetails() ? ` / ${reasonDetails()}` : ''}
                         </span>
                     </Show>
 
-                    <span class={cn(s.fieldLabel, theme.text.t4, theme.text.condenced)}>
+                    <span class={cn(s.fieldLabel, theme.text.t3, theme.text.condenced)}>
                         {intl.getMessage('client_ip')}
                     </span>
-                    <span class={cn(s.fieldValue, theme.text.t4, theme.text.condenced)}>
+                    <span class={cn(s.fieldValue, theme.text.t3, theme.text.condenced)}>
                         {props.entry.client}
                     </span>
 
                     <Show when={clientDetails()}>
-                        <span class={cn(s.fieldLabel, theme.text.t4, theme.text.condenced)}>
+                        <span class={cn(s.fieldLabel, theme.text.t3, theme.text.condenced)}>
                             {intl.getMessage('client_details')}
                         </span>
-                        <span class={cn(s.fieldValue, theme.text.t4, theme.text.condenced)}>
+                        <span class={cn(s.fieldValue, theme.text.t3, theme.text.condenced)}>
                             {clientDetails()}
                         </span>
                     </Show>
 
                     <Show when={clientLocation()}>
-                        <span class={cn(s.fieldLabel, theme.text.t4, theme.text.condenced)}>
+                        <span class={cn(s.fieldLabel, theme.text.t3, theme.text.condenced)}>
                             {intl.getMessage('client_location')}
                         </span>
-                        <span class={cn(s.fieldValue, theme.text.t4, theme.text.condenced)}>
+                        <span class={cn(s.fieldValue, theme.text.t3, theme.text.condenced)}>
                             {clientLocation()}
                         </span>
                     </Show>
diff --git a/client_v2/src/components/QueryLog/blocks/LogTable/LogTable.module.pcss b/client_v2/src/components/QueryLog/blocks/LogTable/LogTable.module.pcss
index 040274489ad..4e299d7de5a 100644
--- a/client_v2/src/components/QueryLog/blocks/LogTable/LogTable.module.pcss
+++ b/client_v2/src/components/QueryLog/blocks/LogTable/LogTable.module.pcss
@@ -29,9 +29,11 @@
         background-color: transparent;
     }
 
-    &:hover,
-    &:focus {
-        background-color: var(--page-background-additional);
+    @media (hover: hover) {
+        &:hover,
+        &:focus {
+            background-color: var(--page-background-additional);
+        }
     }
 
     &:last-child {
@@ -140,6 +142,12 @@
     align-items: center;
     gap: 8px;
     flex-shrink: 0;
+
+    .requestIcon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+    }
 }
 
 .iconTooltipTrigger {
@@ -154,12 +162,6 @@
     padding: 16px;
 }
 
-.requestIcon {
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0;
-}
-
 .domain {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -282,13 +284,13 @@
     gap: 4px;
     min-width: 0;
     color: var(--default-description-text);
-}
 
-.clientLocationIcon {
-    width: 16px;
-    height: 16px;
-    color: var(--default-description-text);
-    flex-shrink: 0;
+    .clientLocationIcon {
+        width: 16px;
+        height: 16px;
+        color: var(--default-description-text);
+        flex-shrink: 0;
+    }
 }
 
 .clientLocationText {
diff --git a/client_v2/src/components/Routes/Paths.ts b/client_v2/src/components/Routes/Paths.ts
index c62680f3fb0..758c1105cb3 100644
--- a/client_v2/src/components/Routes/Paths.ts
+++ b/client_v2/src/components/Routes/Paths.ts
@@ -43,6 +43,9 @@ export type QueryParams = Record<string, string | number | boolean>;
 /** Query param key used to pass a target element ID for scroll-to-section navigation. */
 export const SCROLL_QUERY_KEY = 'section';
 
+/** Query param key used to open the TLS setup wizard on the encryption page. */
+export const TLS_WIZARD_QUERY_KEY = 'tlsWizard';
+
 export const Paths: Record<RoutePathKey, string> = {
     Dashboard: pathBuilder('dashboard'),
     Logs: pathBuilder('logs'),
diff --git a/client_v2/src/components/Settings/IgnoredDomainsModal/IgnoredDomainsModal.tsx b/client_v2/src/components/Settings/IgnoredDomainsModal/IgnoredDomainsModal.tsx
index 8ae54ee7193..f6b322ac8be 100644
--- a/client_v2/src/components/Settings/IgnoredDomainsModal/IgnoredDomainsModal.tsx
+++ b/client_v2/src/components/Settings/IgnoredDomainsModal/IgnoredDomainsModal.tsx
@@ -91,6 +91,7 @@ export const IgnoredDomainsModal = (props: Props) => {
                 disabled={props.processing}
                 commentPrefixes={COMMENT_LINE_TOKENS}
                 highlightComments
+                onCard
             />
         </ConfigDialog>
     );
diff --git a/client_v2/src/components/Settings/RetentionCustomInput.tsx b/client_v2/src/components/Settings/RetentionCustomInput.tsx
index abade728d09..1cb0182a093 100644
--- a/client_v2/src/components/Settings/RetentionCustomInput.tsx
+++ b/client_v2/src/components/Settings/RetentionCustomInput.tsx
@@ -52,6 +52,7 @@ export const RetentionCustomInput = (props: Props) => {
                 error={!!props.error}
                 errorMessage={props.error}
                 size="large"
+                onCard
             />
         </div>
     );
diff --git a/client_v2/src/components/Settings/SafeSearchModal/SafeSearchModal.module.pcss b/client_v2/src/components/Settings/SafeSearchModal/SafeSearchModal.module.pcss
index 5f17063dd22..48e544ecbaa 100644
--- a/client_v2/src/components/Settings/SafeSearchModal/SafeSearchModal.module.pcss
+++ b/client_v2/src/components/Settings/SafeSearchModal/SafeSearchModal.module.pcss
@@ -12,9 +12,14 @@
     border-radius: 8px;
     transition: var(--t2) background-color;
 
-    &:hover,
+    @media (hover: hover) {
+        &:hover {
+            background-color: var(--page-background-additional-hovered);
+        }
+    }
+
     &:focus-within {
-        background-color: var(--page-background-additional);
+        background-color: var(--page-background-additional-hovered);
     }
 }
 
diff --git a/client_v2/src/components/Settings/Settings.module.pcss b/client_v2/src/components/Settings/Settings.module.pcss
index 0c5dd977a5d..1fec41fa35a 100644
--- a/client_v2/src/components/Settings/Settings.module.pcss
+++ b/client_v2/src/components/Settings/Settings.module.pcss
@@ -17,8 +17,14 @@
 }
 
 .clearButton {
-    width: auto;
+    width: 100%;
     min-width: 200px;
+    max-width: none;
+
+    @media (min-width: 1024px) {
+        width: auto;
+        max-width: 400px;
+    }
 }
 
 .section {
diff --git a/client_v2/src/components/SetupGuide/MobileConfigForm.module.pcss b/client_v2/src/components/SetupGuide/MobileConfigForm.module.pcss
index 4904e295b7b..2014c2df2e0 100644
--- a/client_v2/src/components/SetupGuide/MobileConfigForm.module.pcss
+++ b/client_v2/src/components/SetupGuide/MobileConfigForm.module.pcss
@@ -11,7 +11,12 @@
 }
 
 .configLink {
-    width: fit-content;
+    width: 100%;
+    max-width: 100%;
+
+    @media (min-width: 768px) {
+        width: auto;
+    }
 }
 
 .formLabel {
diff --git a/client_v2/src/components/SetupGuide/MobileConfigForm.tsx b/client_v2/src/components/SetupGuide/MobileConfigForm.tsx
index fc0046195c6..13ba73ec31c 100644
--- a/client_v2/src/components/SetupGuide/MobileConfigForm.tsx
+++ b/client_v2/src/components/SetupGuide/MobileConfigForm.tsx
@@ -85,7 +85,7 @@ export const MobileConfigForm = (props: Props) => {
     const getDownloadLink = () => {
         if (!host() || !isValid()) {
             return (
-                <Button class={s.configLink} variant="primary" disabled>
+                <Button class={s.configLink} variant="primary" size="medium" disabled compact>
                     {intl.getMessage('download_mobileconfig')}
                 </Button>
             );
@@ -106,7 +106,13 @@ export const MobileConfigForm = (props: Props) => {
         };
 
         return (
-            <Button variant="primary" onClick={handleDownload}>
+            <Button
+                class={s.configLink}
+                variant="primary"
+                size="medium"
+                onClick={handleDownload}
+                compact
+            >
                 {intl.getMessage('download_mobileconfig')}
             </Button>
         );
diff --git a/client_v2/src/components/Stats/StatsPage/StatsPage.tsx b/client_v2/src/components/Stats/StatsPage/StatsPage.tsx
index bb78d7b1e69..3127238e8ab 100644
--- a/client_v2/src/components/Stats/StatsPage/StatsPage.tsx
+++ b/client_v2/src/components/Stats/StatsPage/StatsPage.tsx
@@ -14,7 +14,8 @@ import { Button } from 'panel/common/ui/Button';
 import { Icon } from 'panel/common/ui/Icon';
 import { FaqTooltip } from 'panel/common/ui/FaqTooltip';
 import { RoutePath } from 'panel/components/Routes/Paths';
-import { useIsMobile } from 'panel/hooks/useIsMobile';
+import type { QueryParams, RoutePathKey } from 'panel/components/Routes/Paths';
+import { useIsMobile } from 'panel/hooks/useMediaQuery';
 import { LocalStorageHelper } from 'panel/helpers/localStorageHelper';
 import { isQueryMatch } from 'panel/helpers/statistics';
 import type { IOption } from 'panel/lib/helpers/utils';
@@ -37,6 +38,8 @@ type StatsPageProps<T> = {
     emptyText: string;
     onRefresh: () => void;
     searchTextForRow: (row: T) => string;
+    /** When it returns a target, the whole desktop row links to it. */
+    rowLink?: (row: T) => { to: RoutePathKey; query?: QueryParams } | undefined;
     pageSizeKey: string;
     sortStorageKey: string;
     mobileSortOptions: IOption<string>[];
@@ -99,10 +102,10 @@ export function StatsPage<T>(props: StatsPageProps<T>) {
 
     const mobileTotalPages = () => Math.max(1, Math.ceil(filteredRows().length / pageSize()));
 
-    // The rows-per-page select is only meaningful once there is at least a full
-    // page of rows, so the whole footer is hidden for short lists — the same
-    // rule the desktop Table applies.
-    const showMobilePagination = () => filteredRows().length >= DEFAULT_PAGE_SIZE;
+    // The rows-per-page select is only meaningful once the list needs more
+    // than one page at the default size, so the whole footer is hidden for
+    // shorter lists — the same rule the desktop Table applies.
+    const showMobilePagination = () => filteredRows().length > DEFAULT_PAGE_SIZE;
 
     // The desktop Table sorts internally; mirror that logic here so the mobile
     // card list is ordered the same way (resolvedSort drives both).
@@ -196,7 +199,6 @@ export function StatsPage<T>(props: StatsPageProps<T>) {
                                     size="small"
                                     compact
                                     aria-label={intl.getMessage('refresh_btn')}
-                                    title={intl.getMessage('refresh_btn')}
                                     onClick={() => props.onRefresh()}
                                     disabled={props.loading}
                                 >
@@ -239,7 +241,6 @@ export function StatsPage<T>(props: StatsPageProps<T>) {
                                 size="small"
                                 compact
                                 aria-label={intl.getMessage('refresh_btn')}
-                                title={intl.getMessage('refresh_btn')}
                                 onClick={() => props.onRefresh()}
                                 disabled={props.loading}
                             >
@@ -307,7 +308,9 @@ export function StatsPage<T>(props: StatsPageProps<T>) {
                                                 pageSize={pageSize()}
                                                 totalItems={filteredRows().length}
                                                 pageSizeOptions={DEFAULT_PAGE_SIZE_OPTIONS}
-                                                onPageChange={(page: number) => setCurrentPage(page)}
+                                                onPageChange={(page: number) =>
+                                                    setCurrentPage(page)
+                                                }
                                                 onPageSizeChange={handlePageSizeChange}
                                             />
                                         </div>
@@ -327,6 +330,7 @@ export function StatsPage<T>(props: StatsPageProps<T>) {
                         pageSize={pageSize()}
                         onPageSizeChange={handlePageSizeChange}
                         emptyTable={<EmptyState message={props.emptyText} />}
+                        rowLink={props.rowLink}
                     />
                 </Show>
             </div>
diff --git a/client_v2/src/components/Stats/TopBlockedDomainsPage/TopBlockedDomainsPage.tsx b/client_v2/src/components/Stats/TopBlockedDomainsPage/TopBlockedDomainsPage.tsx
index e4b3e6cc1a4..f0669572589 100644
--- a/client_v2/src/components/Stats/TopBlockedDomainsPage/TopBlockedDomainsPage.tsx
+++ b/client_v2/src/components/Stats/TopBlockedDomainsPage/TopBlockedDomainsPage.tsx
@@ -6,6 +6,7 @@ import { RoutePath } from 'panel/components/Routes/Paths';
 import { statsState } from 'panel/stores/stats';
 import { LOCAL_STORAGE_KEYS } from 'panel/helpers/localStorageHelper';
 import { computePercent } from 'panel/helpers/statistics';
+import { queryLogSearchQuery } from 'panel/helpers/helpers';
 import type { IOption } from 'panel/lib/helpers/utils';
 import { StatsPage } from '../StatsPage';
 import { CountWithPercent } from '../blocks/CountWithPercent';
@@ -30,7 +31,7 @@ export const TopBlockedDomainsPage = () => {
             header: { text: intl.getMessage('domain') },
             accessor: 'name',
             sortable: true,
-            render: (_v, row) => <NameCell name={row.name} queryLogSearch={row.name} />,
+            render: (_v, row) => <NameCell name={row.name} />,
         },
         {
             key: 'queries',
@@ -43,7 +44,6 @@ export const TopBlockedDomainsPage = () => {
                     count={row.count}
                     total={statsState.numBlockedFiltering}
                     tone="danger"
-                    queryLogSearch={row.name}
                     progress={computePercent(row.count, statsState.numBlockedFiltering)}
                 />
             ),
@@ -68,16 +68,16 @@ export const TopBlockedDomainsPage = () => {
             emptyText={intl.getMessage('nothing_found')}
             onRefresh={refreshStats}
             searchTextForRow={(row) => row.name}
+            rowLink={(row) => ({ to: RoutePath.QueryLog, query: queryLogSearchQuery(row.name) })}
             pageSizeKey={LOCAL_STORAGE_KEYS.TOP_BLOCKED_DOMAINS_PAGE_SIZE}
             sortStorageKey={LOCAL_STORAGE_KEYS.TOP_BLOCKED_DOMAINS_SORT}
             mobileSortOptions={mobileSortOptions()}
             renderMobileCard={(row) => (
                 <StatMobileCard
                     title={row.name}
-                    titleLink={{
+                    cardLink={{
                         to: RoutePath.QueryLog,
-                        query: { search: `"${row.name}"` },
-                        title: row.name,
+                        query: queryLogSearchQuery(row.name),
                     }}
                     items={[
                         {
@@ -87,7 +87,6 @@ export const TopBlockedDomainsPage = () => {
                                     count={row.count}
                                     total={statsState.numBlockedFiltering}
                                     tone="danger"
-                                    queryLogSearch={row.name}
                                 />
                             ),
                             progress: computePercent(row.count, statsState.numBlockedFiltering),
diff --git a/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.module.pcss b/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.module.pcss
index b24568c725f..f48fac0722a 100644
--- a/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.module.pcss
+++ b/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.module.pcss
@@ -44,18 +44,6 @@
     color: var(--default-error-link);
 }
 
-.ipCellLink {
-    color: inherit;
-    text-decoration: none;
-    min-width: 0;
-
-    &:hover,
-    &:focus {
-        color: inherit;
-        text-decoration: underline;
-    }
-}
-
 .whoisCell {
     display: flex;
     flex-direction: column;
@@ -93,30 +81,6 @@
     min-width: 200px;
 }
 
-.protectionMenuItem {
-    display: flex;
-    align-items: center;
-    min-height: 56px;
-    padding: 16px;
-    cursor: pointer;
-    color: var(--default-link);
-    transition: background-color var(--t2);
-
-    &:hover,
-    &:focus-visible {
-        background-color: var(--hovered-dropdown-menu-background);
-        outline: 0;
-    }
-
-    &:active {
-        background-color: var(--pressed-dropdown-menu-background);
-    }
-}
-
-.protectionMenuItemRed {
-    color: var(--default-error-link);
-}
-
 .actionButton {
     display: inline-flex;
     align-items: center;
@@ -160,7 +124,8 @@
     border-radius: 8px;
     background: transparent;
     cursor: pointer;
-    font: inherit;
+    font-weight: var(--weight-medium);
+    font-size: inherit;
     transition:
         var(--t2) color,
         var(--t2) border-color,
@@ -175,7 +140,6 @@
     &:focus-visible {
         color: var(--hovered-link);
         border-color: var(--hovered-link);
-        background-color: var(--hovered-secondary-button);
     }
 
     &:active {
@@ -192,7 +156,6 @@
     &:focus-visible {
         color: var(--hovered-danger-button);
         border-color: var(--hovered-danger-button);
-        background-color: var(--hovered-secondary-danger-button);
     }
 
     &:active {
diff --git a/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.tsx b/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.tsx
index 0d982dad83e..ae613c69e46 100644
--- a/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.tsx
+++ b/client_v2/src/components/Stats/TopClientsPage/TopClientsPage.tsx
@@ -6,9 +6,9 @@ import intl from 'panel/common/intl';
 import theme from 'panel/lib/theme';
 import type { TableColumn } from 'panel/common/ui/Table';
 import { Dropdown } from 'panel/common/ui/Dropdown';
-import { Link } from 'panel/common/ui/Link';
 import {
     ClientBlockConfirmDialog,
+    ClientBlockMenuItem,
     type ClientBlockAction,
     useClientBlockConfirm,
 } from 'panel/common/ui/ClientBlockConfirm';
@@ -18,9 +18,10 @@ import { accessState, getAccessList } from 'panel/stores/access';
 import { initClientForm } from 'panel/stores/clientForm';
 import { LOCAL_STORAGE_KEYS } from 'panel/helpers/localStorageHelper';
 import { computePercent } from 'panel/helpers/statistics';
-import { splitByNewLine } from 'panel/helpers/helpers';
+import { queryLogSearchQuery, splitByNewLine } from 'panel/helpers/helpers';
 import type { IOption } from 'panel/lib/helpers/utils';
 import { PlusButton } from 'panel/common/ui/PlusButton';
+import { TruncatedText } from 'panel/common/ui/TruncatedText';
 import { Paths, RoutePath } from 'panel/components/Routes/Paths';
 import { StatsPage } from '../StatsPage';
 import { StatMobileCard, type StatCardItem } from '../blocks/StatMobileCard';
@@ -35,6 +36,9 @@ type ClientStat = {
     info?: { name?: string; whois_info?: Record<string, string> };
 };
 
+/** Rows and mobile cards link to the query log, so inner controls must not follow them. */
+const preventRowLink = (e: MouseEvent) => e.preventDefault();
+
 export const TopClientsPage = () => {
     const navigate = useNavigate();
     const refreshStats = useStatsRefresh();
@@ -122,13 +126,11 @@ export const TopClientsPage = () => {
             accessor: (row) => row.info?.name || row.name,
             sortable: true,
             render: (_v, row) => (
-                <span
+                <TruncatedText
+                    text={row.info?.name || '—'}
+                    testId="client-name-cell"
                     class={cn(theme.text.t3, theme.text.condenced, s.nameCell)}
-                    title={row.info?.name}
-                    data-testid="client-name-cell"
-                >
-                    {row.info?.name || '—'}
-                </span>
+                />
             ),
         },
         {
@@ -152,11 +154,7 @@ export const TopClientsPage = () => {
             sortable: true,
             sortFn: (a: number, b: number) => a - b,
             render: (_v, row) => (
-                <CountWithPercent
-                    count={row.count}
-                    total={statsState.numDnsQueries}
-                    queryLogSearch={row.name}
-                />
+                <CountWithPercent count={row.count} total={statsState.numDnsQueries} />
             ),
         },
         {
@@ -165,15 +163,11 @@ export const TopClientsPage = () => {
             accessor: (row) => row.name,
             sortable: true,
             render: (_v, row) => (
-                <Link
-                    to={RoutePath.QueryLog}
-                    query={{ search: `"${row.name}"` }}
-                    class={cn(theme.text.t3, theme.text.condenced, s.ipCellLink)}
-                    title={row.name}
-                    data-testid="client-ip-cell"
-                >
-                    {row.name}
-                </Link>
+                <TruncatedText
+                    text={row.name}
+                    testId="client-ip-cell"
+                    class={cn(theme.text.t3, theme.text.condenced, s.nameCell)}
+                />
             ),
         },
         {
@@ -202,56 +196,36 @@ export const TopClientsPage = () => {
             width: 48,
             class: s.actionsCell,
             render: (_v, row) => (
-                <Dropdown
-                    wrapClass={s.actionsDropdown}
-                    position="bottomRight"
-                    noIcon
-                    open={openMenuClient() === row.name}
-                    onOpenChange={(isOpen: boolean) => setOpenMenuClient(isOpen ? row.name : null)}
-                    menu={
-                        <div class={s.protectionMenu}>
-                            <Show
-                                when={isBlocked(row.name)}
-                                fallback={
-                                    <div
-                                        class={cn(
-                                            theme.text.t2,
-                                            theme.text.condenced,
-                                            s.protectionMenuItem,
-                                            s.protectionMenuItemRed,
-                                        )}
-                                        data-testid="client-block-menu-item"
-                                        onClick={() => openClientConfirmDialog(row.name, 'block')}
-                                    >
-                                        {intl.getMessage('block_client')}
-                                    </div>
-                                }
-                            >
-                                <div
-                                    class={cn(
-                                        theme.text.t2,
-                                        theme.text.condenced,
-                                        theme.dropdown.item,
-                                        s.protectionMenuItem,
-                                    )}
-                                    data-testid="client-unblock-menu-item"
-                                    onClick={() => openClientConfirmDialog(row.name, 'unblock')}
-                                >
-                                    {intl.getMessage('unblock_client')}
-                                </div>
-                            </Show>
-                        </div>
-                    }
-                >
-                    <button
-                        type="button"
-                        class={s.actionButton}
-                        data-testid="client-action-button"
-                        aria-label={`${intl.getMessage('aria_actions')}: ${row.info?.name || row.name}`}
+                <div onClick={preventRowLink}>
+                    <Dropdown
+                        wrapClass={s.actionsDropdown}
+                        position="bottomRight"
+                        noIcon
+                        open={openMenuClient() === row.name}
+                        onOpenChange={(isOpen: boolean) =>
+                            setOpenMenuClient(isOpen ? row.name : null)
+                        }
+                        menu={
+                            <div class={s.protectionMenu}>
+                                <ClientBlockMenuItem
+                                    action={isBlocked(row.name) ? 'unblock' : 'block'}
+                                    onClick={(action) =>
+                                        openClientConfirmDialog(row.name, action)
+                                    }
+                                />
+                            </div>
+                        }
                     >
-                        <Icon icon="bullets" />
-                    </button>
-                </Dropdown>
+                        <button
+                            type="button"
+                            class={s.actionButton}
+                            data-testid="client-action-button"
+                            aria-label={`${intl.getMessage('aria_actions')}: ${row.info?.name || row.name}`}
+                        >
+                            <Icon icon="bullets" />
+                        </button>
+                    </Dropdown>
+                </div>
             ),
         },
     ];
@@ -274,6 +248,10 @@ export const TopClientsPage = () => {
                         {row.info?.name || row.name}
                     </span>
                 }
+                cardLink={{
+                    to: RoutePath.QueryLog,
+                    query: queryLogSearchQuery(row.name),
+                }}
                 status={
                     <Show when={blocked}>
                         <span
@@ -288,26 +266,13 @@ export const TopClientsPage = () => {
                     {
                         label: intl.getMessage('queries'),
                         value: (
-                            <CountWithPercent
-                                count={row.count}
-                                total={statsState.numDnsQueries}
-                                queryLogSearch={row.name}
-                            />
+                            <CountWithPercent count={row.count} total={statsState.numDnsQueries} />
                         ),
                         progress: computePercent(row.count, statsState.numDnsQueries),
                     },
                     {
                         label: intl.getMessage('ip_address'),
-                        value: (
-                            <Link
-                                to={RoutePath.QueryLog}
-                                query={{ search: `"${row.name}"` }}
-                                class={cn(theme.text.t3, theme.text.condenced, s.ipCellLink)}
-                                title={row.name}
-                            >
-                                {row.name}
-                            </Link>
-                        ),
+                        value: row.name,
                     },
                     ...(hasWhoisInfo(row) ? [whoisCardItem(row)] : []),
                 ]}
@@ -357,6 +322,10 @@ export const TopClientsPage = () => {
                 emptyText={intl.getMessage('nothing_found')}
                 onRefresh={handleRefresh}
                 searchTextForRow={(row) => `${row.name} ${row.info?.name ?? ''}`}
+                rowLink={(row) => ({
+                    to: RoutePath.QueryLog,
+                    query: queryLogSearchQuery(row.name),
+                })}
                 pageSizeKey={LOCAL_STORAGE_KEYS.TOP_CLIENTS_PAGE_SIZE}
                 sortStorageKey={LOCAL_STORAGE_KEYS.TOP_CLIENTS_SORT}
                 mobileSortOptions={mobileSortOptions()}
diff --git a/client_v2/src/components/Stats/TopQueriedDomainsPage/TopQueriedDomainsPage.tsx b/client_v2/src/components/Stats/TopQueriedDomainsPage/TopQueriedDomainsPage.tsx
index 7c6423d91e3..b025a99c8c4 100644
--- a/client_v2/src/components/Stats/TopQueriedDomainsPage/TopQueriedDomainsPage.tsx
+++ b/client_v2/src/components/Stats/TopQueriedDomainsPage/TopQueriedDomainsPage.tsx
@@ -6,6 +6,7 @@ import { RoutePath } from 'panel/components/Routes/Paths';
 import { statsState } from 'panel/stores/stats';
 import { LOCAL_STORAGE_KEYS } from 'panel/helpers/localStorageHelper';
 import { computePercent } from 'panel/helpers/statistics';
+import { queryLogSearchQuery } from 'panel/helpers/helpers';
 import type { IOption } from 'panel/lib/helpers/utils';
 import { StatsPage } from '../StatsPage';
 import { CountWithPercent } from '../blocks/CountWithPercent';
@@ -30,7 +31,7 @@ export const TopQueriedDomainsPage = () => {
             header: { text: intl.getMessage('domain') },
             accessor: 'name',
             sortable: true,
-            render: (_v, row) => <NameCell name={row.name} queryLogSearch={row.name} />,
+            render: (_v, row) => <NameCell name={row.name} />,
         },
         {
             key: 'queries',
@@ -42,7 +43,6 @@ export const TopQueriedDomainsPage = () => {
                 <CountWithPercent
                     count={row.count}
                     total={statsState.numDnsQueries}
-                    queryLogSearch={row.name}
                     progress={computePercent(row.count, statsState.numDnsQueries)}
                 />
             ),
@@ -67,16 +67,16 @@ export const TopQueriedDomainsPage = () => {
             emptyText={intl.getMessage('nothing_found')}
             onRefresh={refreshStats}
             searchTextForRow={(row) => row.name}
+            rowLink={(row) => ({ to: RoutePath.QueryLog, query: queryLogSearchQuery(row.name) })}
             pageSizeKey={LOCAL_STORAGE_KEYS.TOP_QUERIED_DOMAINS_PAGE_SIZE}
             sortStorageKey={LOCAL_STORAGE_KEYS.TOP_QUERIED_DOMAINS_SORT}
             mobileSortOptions={mobileSortOptions()}
             renderMobileCard={(row) => (
                 <StatMobileCard
                     title={row.name}
-                    titleLink={{
+                    cardLink={{
                         to: RoutePath.QueryLog,
-                        query: { search: `"${row.name}"` },
-                        title: row.name,
+                        query: queryLogSearchQuery(row.name),
                     }}
                     items={[
                         {
@@ -85,7 +85,6 @@ export const TopQueriedDomainsPage = () => {
                                 <CountWithPercent
                                     count={row.count}
                                     total={statsState.numDnsQueries}
-                                    queryLogSearch={row.name}
                                 />
                             ),
                             progress: computePercent(row.count, statsState.numDnsQueries),
diff --git a/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.module.pcss b/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.module.pcss
index f4a3790ec5e..de11a2c2134 100644
--- a/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.module.pcss
+++ b/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.module.pcss
@@ -38,14 +38,3 @@
 .danger {
     color: var(--default-error-link);
 }
-
-.countLink {
-    color: inherit;
-    text-decoration: none;
-
-    &:hover,
-    &:focus {
-        color: inherit;
-        text-decoration: underline;
-    }
-}
diff --git a/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.tsx b/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.tsx
index 7da56dc1700..5eface50b57 100644
--- a/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.tsx
+++ b/client_v2/src/components/Stats/blocks/CountWithPercent/CountWithPercent.tsx
@@ -4,8 +4,6 @@ import cn from 'clsx';
 import theme from 'panel/lib/theme';
 import { formatCompactNumber } from 'panel/helpers/helpers';
 import { computePercent } from 'panel/helpers/statistics';
-import { Link } from 'panel/common/ui/Link';
-import { RoutePath } from 'panel/components/Routes/Paths';
 
 import s from './CountWithPercent.module.pcss';
 
@@ -13,15 +11,11 @@ type Props = {
     count: number;
     total: number;
     tone?: 'default' | 'danger';
-    /** When set, the count becomes a QueryLog link filtered by this value. */
-    queryLogSearch?: string;
     /** When set, renders a progress bar filled to this percent (0-100) before the count. */
     progress?: number;
 };
 
 export const CountWithPercent = (props: Props) => {
-    const search = createMemo(() => props.queryLogSearch);
-
     // Integer percent for large shares (>= 10% or 0), one decimal for small ones.
     const percentText = createMemo(() => {
         const percent = computePercent(props.count, props.total);
@@ -51,15 +45,7 @@ export const CountWithPercent = (props: Props) => {
                     />
                 </span>
             </Show>
-            <Show when={search()} fallback={formatCompactNumber(props.count)}>
-                <Link
-                    to={RoutePath.QueryLog}
-                    query={{ search: `"${search()}"` }}
-                    class={cn(theme.text.t3, theme.text.condenced, s.countLink)}
-                >
-                    {formatCompactNumber(props.count)}
-                </Link>
-            </Show>
+            {formatCompactNumber(props.count)}
             <span class={s.percent} data-testid="stats-percent">
                 ({percentText()}%)
             </span>
diff --git a/client_v2/src/components/Stats/blocks/NameCell/NameCell.module.pcss b/client_v2/src/components/Stats/blocks/NameCell/NameCell.module.pcss
index b4f43479965..b192cacbceb 100644
--- a/client_v2/src/components/Stats/blocks/NameCell/NameCell.module.pcss
+++ b/client_v2/src/components/Stats/blocks/NameCell/NameCell.module.pcss
@@ -1,15 +1,3 @@
 .nameCell {
     max-width: 420px;
 }
-
-.nameCellLink {
-    color: inherit;
-    text-decoration: none;
-    min-width: 0;
-
-    &:hover,
-    &:focus {
-        color: inherit;
-        text-decoration: underline;
-    }
-}
diff --git a/client_v2/src/components/Stats/blocks/NameCell/NameCell.tsx b/client_v2/src/components/Stats/blocks/NameCell/NameCell.tsx
index 53cc48d984f..87bb5479803 100644
--- a/client_v2/src/components/Stats/blocks/NameCell/NameCell.tsx
+++ b/client_v2/src/components/Stats/blocks/NameCell/NameCell.tsx
@@ -1,41 +1,19 @@
-import { Show } from 'solid-js';
 import cn from 'clsx';
 
+import { TruncatedText } from 'panel/common/ui/TruncatedText';
 import theme from 'panel/lib/theme';
-import { Link } from 'panel/common/ui/Link';
-import { RoutePath } from 'panel/components/Routes/Paths';
 
 import s from './NameCell.module.pcss';
 
 type Props = {
     name: string;
     testId?: string;
-    /** When set, the name becomes a QueryLog link filtered by this value. */
-    queryLogSearch?: string;
 };
 
-/** Name cell with the shared truncation styles used by the top stats tables. */
-export const NameCell = (props: Props) => {
-    const content = (
-        <span
-            class={cn(theme.text.t3, theme.text.condenced, theme.common.textOverflow, s.nameCell)}
-            title={props.name}
-            data-testid={props.testId}
-        >
-            {props.name}
-        </span>
-    );
-
-    return (
-        <Show when={props.queryLogSearch} fallback={content}>
-            <Link
-                to={RoutePath.QueryLog}
-                query={{ search: `"${props.queryLogSearch}"` }}
-                class={cn(theme.text.t3, theme.text.condenced, s.nameCellLink)}
-                title={props.name}
-            >
-                {content}
-            </Link>
-        </Show>
-    );
-};
+export const NameCell = (props: Props) => (
+    <TruncatedText
+        text={props.name}
+        testId={props.testId}
+        class={cn(theme.text.t3, theme.text.condenced, s.nameCell)}
+    />
+);
diff --git a/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.module.pcss b/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.module.pcss
index 6e8ea57e3a8..e74ffeac498 100644
--- a/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.module.pcss
+++ b/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.module.pcss
@@ -4,8 +4,6 @@
     gap: 12px;
     padding: 24px 16px;
     border-radius: 8px;
-    background-color: var(--default-cards-background);
-    box-shadow: 8px 8px 24px 0 rgba(0, 0, 0, 0.1);
 }
 
 .title {
@@ -17,14 +15,16 @@
     word-break: break-word;
 }
 
-.titleLink {
+.cardLink {
+    cursor: pointer;
     color: inherit;
     text-decoration: none;
 
     &:hover,
-    &:focus {
+    &:focus,
+    &:active {
         color: inherit;
-        text-decoration: underline;
+        text-decoration: none;
     }
 }
 
diff --git a/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.tsx b/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.tsx
index f3d4abeac04..16b468857ff 100644
--- a/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.tsx
+++ b/client_v2/src/components/Stats/blocks/StatMobileCard/StatMobileCard.tsx
@@ -7,12 +7,6 @@ import type { QueryParams, RoutePathKey } from 'panel/components/Routes/Paths';
 
 import s from './StatMobileCard.module.pcss';
 
-type TitleLink = {
-    to: RoutePathKey;
-    query?: QueryParams;
-    title?: string;
-};
-
 export type StatCardItem = {
     label: string;
     value: JSX.Element;
@@ -27,60 +21,84 @@ export type StatCardItem = {
 type Props = {
     /** Card title (client name), displayed bold at the top. */
     title?: JSX.Element;
-    /** When set, the title is rendered as a link (keeps its color, underlines on hover). */
-    titleLink?: TitleLink;
+    /** When set, the whole card is rendered as a link to this target. */
+    cardLink?: { to: RoutePathKey; query?: QueryParams };
     /** Status line rendered right under the title, e.g. "Blocked". */
     status?: JSX.Element;
     items: StatCardItem[];
     actions?: JSX.Element;
 };
 
-export const StatMobileCard = (props: Props) => (
-    <div class={s.card} data-testid="stats-mobile-card">
-        <Show when={props.title}>
-            <span class={cn(theme.text.t2, s.title)}>
-                <Show when={props.titleLink} fallback={props.title}>
-                    {(link) => (
-                        <Link
-                            to={link().to}
-                            query={link().query}
-                            class={s.titleLink}
-                            title={link().title}
+/** The row is a link, so inner controls must not trigger its navigation. */
+const preventCardLink = (e: MouseEvent) => e.preventDefault();
+
+export const StatMobileCard = (props: Props) => {
+    const content = () => (
+        <>
+            <Show when={props.title}>
+                <span class={cn(theme.text.t2, s.title)}>{props.title}</span>
+            </Show>
+            <Show when={props.status}>
+                <div class={s.row}>{props.status}</div>
+            </Show>
+            <For each={props.items}>
+                {(item) => (
+                    <>
+                        <div
+                            class={cn(
+                                theme.text.t3,
+                                s.row,
+                                item.layout === 'column' && s.rowColumn,
+                            )}
                         >
-                            {props.title}
-                        </Link>
-                    )}
-                </Show>
-            </span>
-        </Show>
-        <Show when={props.status}>
-            <div class={s.row}>{props.status}</div>
-        </Show>
-        <For each={props.items}>
-            {(item) => (
-                <>
-                    <div class={cn(theme.text.t3, s.row, item.layout === 'column' && s.rowColumn)}>
-                        <span class={cn(theme.text.condenced, s.rowLabel)}>{item.label}</span>
-                        <span class={cn(s.rowValue, item.layout === 'column' && s.rowValueColumn)}>
-                            {item.value}
-                        </span>
-                    </div>
-                    <Show when={typeof item.progress === 'number'}>
-                        <div class={s.progress}>
-                            <div
-                                class={cn(
-                                    s.progressFill,
-                                    item.tone === 'danger' && s.progressFillDanger,
-                                )}
-                                style={{ width: `${item.progress}%` }}
-                            />
+                            <span class={cn(theme.text.condenced, s.rowLabel)}>{item.label}</span>
+                            <span
+                                class={cn(s.rowValue, item.layout === 'column' && s.rowValueColumn)}
+                            >
+                                {item.value}
+                            </span>
                         </div>
-                    </Show>
-                </>
+                        <Show when={typeof item.progress === 'number'}>
+                            <div class={s.progress}>
+                                <div
+                                    class={cn(
+                                        s.progressFill,
+                                        item.tone === 'danger' && s.progressFillDanger,
+                                    )}
+                                    style={{ width: `${item.progress}%` }}
+                                />
+                            </div>
+                        </Show>
+                    </>
+                )}
+            </For>
+            <Show when={props.actions}>
+                <div class={s.actions} onClick={preventCardLink}>
+                    {props.actions}
+                </div>
+            </Show>
+        </>
+    );
+
+    return (
+        <Show
+            when={props.cardLink}
+            fallback={
+                <div class={cn(s.card, theme.table.mobileCard)} data-testid="stats-mobile-card">
+                    {content()}
+                </div>
+            }
+        >
+            {(link) => (
+                <Link
+                    to={link().to}
+                    query={link().query}
+                    class={cn(s.card, s.cardLink, theme.table.mobileCard)}
+                    data-testid="stats-mobile-card"
+                >
+                    {content()}
+                </Link>
             )}
-        </For>
-        <Show when={props.actions}>
-            <div class={s.actions}>{props.actions}</div>
         </Show>
-    </div>
-);
+    );
+};
diff --git a/client_v2/src/components/UserRules/blocks/CheckForm/CheckForm.tsx b/client_v2/src/components/UserRules/blocks/CheckForm/CheckForm.tsx
index 3bca5bd6a1a..450422ac7a9 100644
--- a/client_v2/src/components/UserRules/blocks/CheckForm/CheckForm.tsx
+++ b/client_v2/src/components/UserRules/blocks/CheckForm/CheckForm.tsx
@@ -77,6 +77,7 @@ export const CheckForm = (props: Props) => {
                             props.onHostnameChange('');
                             setHostnameError(intl.getMessage('form_error_required'));
                         }}
+                        onCard
                     />
                 </div>
 
@@ -92,6 +93,7 @@ export const CheckForm = (props: Props) => {
                         onChange={handleClientChange}
                         isClearable
                         onClear={() => props.onClientChange('')}
+                        onCard
                     />
                 </div>
 
@@ -116,6 +118,7 @@ export const CheckForm = (props: Props) => {
                                 (option) => option.value === props.qtype,
                             )}
                             onChange={handleQtypeChange}
+                            onCard
                         />
 
                         <Show when={qtypeError()}>
diff --git a/client_v2/src/forgot_password/ForgotPassword/index.tsx b/client_v2/src/forgot_password/ForgotPassword/index.tsx
index 2895aa2ffaa..46d8d0d4bc9 100644
--- a/client_v2/src/forgot_password/ForgotPassword/index.tsx
+++ b/client_v2/src/forgot_password/ForgotPassword/index.tsx
@@ -1,10 +1,8 @@
 import intl from 'panel/common/intl';
 
-import { PublicHeader } from 'panel/common/ui/PublicHeader';
+import theme from 'panel/lib/theme';
+import { AuthLayout } from 'panel/common/ui/AuthLayout';
 import { Button } from 'panel/common/ui/Button';
-import { Icons } from 'panel/common/ui/Icons';
-
-import s from 'panel/common/ui/Header/Header.module.pcss';
 
 import styles from './styles.module.pcss';
 
@@ -14,53 +12,44 @@ export const ForgotPassword = () => {
     };
 
     return (
-        <div class={styles.loginWrapper}>
-            <PublicHeader
-                dropdownClass={s.dropdown}
-                dropdownPosition="bottomRight"
-                useLocalLanguage={true}
-            />
-
-            <div class={styles.login}>
-                <h1 class={styles.titleList}>{intl.getMessage('forgot_password')}</h1>
-                <div class={styles.listContainer}>
-                    <p class={styles.listDesc}>{intl.getMessage('forgot_password_page_desc')}</p>
-                    <p>{intl.getMessage('forgot_password_list_title')}</p>
-
-                    <ol class={styles.list}>
-                        <li class={styles.listItem}>
-                            {intl.getMessage('forgot_password_list_item_1')}
-                        </li>
-                        <li class={styles.listItem}>
-                            {intl.getMessage('forgot_password_list_item_2')}
-                        </li>
-                        <li class={styles.listItem}>
-                            {intl.getMessage('forgot_password_list_item_3')}
-                        </li>
-                        <li class={styles.listItem}>
-                            {intl.getMessage('forgot_password_list_item_4')}
-                        </li>
-                        <li class={styles.listItem}>
-                            {intl.getMessage('forgot_password_list_item_5')}
-                        </li>
-                    </ol>
+        <AuthLayout title={intl.getMessage('forgot_password')}>
+            <div class={styles.listContainer}>
+                <p class={styles.listDesc}>{intl.getMessage('forgot_password_page_desc')}</p>
+                <p>{intl.getMessage('forgot_password_list_title')}</p>
+
+                <ol class={styles.list}>
+                    <li class={styles.listItem}>
+                        {intl.getMessage('forgot_password_list_item_1')}
+                    </li>
+                    <li class={styles.listItem}>
+                        {intl.getMessage('forgot_password_list_item_2')}
+                    </li>
+                    <li class={styles.listItem}>
+                        {intl.getMessage('forgot_password_list_item_3')}
+                    </li>
+                    <li class={styles.listItem}>
+                        {intl.getMessage('forgot_password_list_item_4')}
+                    </li>
+                    <li class={styles.listItem}>
+                        {intl.getMessage('forgot_password_list_item_5')}
+                    </li>
+                </ol>
+            </div>
 
-                    <div class={styles.footer}>
-                        <Button
-                            class={styles.button}
-                            id="back_to_login"
-                            type="button"
-                            variant="primary"
-                            size="small"
-                            onClick={handleBackToLogin}
-                        >
-                            {intl.getMessage('back')}
-                        </Button>
-                    </div>
+            <div class={theme.auth.footer}>
+                <div class={theme.auth.footerRow}>
+                    <Button
+                        class={theme.auth.footerButton}
+                        id="back_to_login"
+                        type="button"
+                        variant="primary"
+                        size="small"
+                        onClick={handleBackToLogin}
+                    >
+                        {intl.getMessage('back')}
+                    </Button>
                 </div>
             </div>
-
-            <Icons />
-        </div>
+        </AuthLayout>
     );
 };
diff --git a/client_v2/src/forgot_password/ForgotPassword/styles.module.pcss b/client_v2/src/forgot_password/ForgotPassword/styles.module.pcss
index 344bd01c1e3..aa99ab84bd2 100644
--- a/client_v2/src/forgot_password/ForgotPassword/styles.module.pcss
+++ b/client_v2/src/forgot_password/ForgotPassword/styles.module.pcss
@@ -1,125 +1,18 @@
-/* Disable Auto Zoom in Input - Safari on iPhone https://stackoverflow.com/a/6394497 */
-@media screen and (max-width: 767px) {
-    input,
-    select,
-    textarea {
-        font-size: 1rem;
-    }
-}
-
-.loginWrapper {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-.login {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-    width: 100%;
-    max-width: 576px;
-    margin: 0 auto;
-    padding-top: 40px;
-    box-sizing: border-box;
-
-    @media screen and (min-width: 1024px) {
-        padding-top: 116px;
-
-    }
-}
-
-.formContainer {
-    width: 100%;
-    max-width: 576px;
-    padding: 48px 16px 16px;
-    box-sizing: border-box;
-}
-
-
 .listContainer {
-    padding: 0 16px;
-    width: 100%;
-    max-width: 576px;
-    box-sizing: border-box;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%;
-}
-
-.info {
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    overflow: hidden;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 130%;
-}
-
-.message,
-.link {
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0;
+    padding: 8px 16px;
 }
 
-.link {
-    margin-top: 16px;
-    border: 0;
-    background: transparent;
-}
-
-@media screen and (min-width: 992px) {
-    .message {
-        position: absolute;
-        top: 40px;
-        padding: 0 15px;
-    }
-}
-
-.group {
+.listDesc {
     margin-bottom: 24px;
 }
 
-.footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.button {
-    max-width: 200px;
-}
-
-.title {
-    font-size: 32px;
-    padding: 0 16px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 120%;
-}
-
-.titleList {
-    margin-bottom: 32px;
+.list {
     padding: 0 16px;
 }
 
-.listDesc {
-    margin-bottom: 24px;
-}
-
 .listItem {
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
     line-height: 150%;
 }
-
-.list {
-    margin-bottom: 24px;
-    padding: 0 16px;
-}
diff --git a/client_v2/src/helpers/breakpoints.ts b/client_v2/src/helpers/breakpoints.ts
new file mode 100644
index 00000000000..fae45377291
--- /dev/null
+++ b/client_v2/src/helpers/breakpoints.ts
@@ -0,0 +1,25 @@
+/**
+ * Layout breakpoints used by the responsive hooks in
+ * `panel/hooks/useMediaQuery`.
+ *
+ * CSS custom properties cannot be referenced inside `@media` queries, so the
+ * same numbers are repeated by hand in the `.pcss` modules.  Keep the two in
+ * sync when a breakpoint changes.
+ */
+
+/**
+ * Minimum viewport width of the desktop layout.  At or above this width the
+ * dashboard drops its mobile affordances and the data tables grow their
+ * desktop-only columns.
+ */
+export const DESKTOP_MIN_WIDTH = 768;
+
+/**
+ * Exclusive upper bound of the mobile layout.  Below this width data tables
+ * collapse into card lists.
+ *
+ * Intentionally wider than {@link DESKTOP_MIN_WIDTH}: the two hooks measure
+ * different things, so viewports in between report as both "desktop" and
+ * "mobile".
+ */
+export const MOBILE_MAX_WIDTH = 1024;
diff --git a/client_v2/src/helpers/helpers.tsx b/client_v2/src/helpers/helpers.tsx
index 29d35f86406..49707fcdc92 100644
--- a/client_v2/src/helpers/helpers.tsx
+++ b/client_v2/src/helpers/helpers.tsx
@@ -34,6 +34,7 @@ import type { QueryLogItemClient } from 'panel/api/model/queryLogItemClient';
 import type { QueryLogItemClientWhois } from 'panel/api/model/queryLogItemClientWhois';
 import type { QueryLogItemClientProto } from 'panel/api/model/queryLogItemClientProto';
 import type { QueryLogItem } from 'panel/api/model/queryLogItem';
+import type { QueryParams } from 'panel/components/Routes/Paths';
 
 export type NormalizedDnsResponse = {
     value?: string;
@@ -834,6 +835,15 @@ export const getLogsUrlParams = (search: string, status: string, reason: string)
         reason: reason || undefined,
     })}`;
 
+/**
+ * Query-log search params matching a single client or domain. The value is
+ * quoted so the query log treats it as an exact match.
+ *
+ * @param {string} value
+ * @returns {QueryParams}
+ */
+export const queryLogSearchQuery = (value: string): QueryParams => ({ search: `"${value}"` });
+
 /**
  * @param ip
  * @returns {[IPv4|IPv6, 33|129]}
diff --git a/client_v2/src/helpers/statistics.ts b/client_v2/src/helpers/statistics.ts
index 2036983221a..9a945194cdc 100644
--- a/client_v2/src/helpers/statistics.ts
+++ b/client_v2/src/helpers/statistics.ts
@@ -30,11 +30,16 @@ export const getStoredStatsPeriod = (): number => {
 };
 
 /** Maximum stats interval from the server config; falls back to DAY if the value is unexpectedly small. */
-const getClampedMaxInterval = (maxInterval: number): number =>
+export const getClampedMaxInterval = (maxInterval: number): number =>
     maxInterval >= HOUR ? maxInterval : DAY;
+
+/** Clamps any stats period by the maximum interval available in the stats config. */
+export const clampStatsPeriod = (period: number, maxInterval: number): number =>
+    Math.min(period, getClampedMaxInterval(maxInterval));
+
 /** Saved period clamped by the maximum interval available in the stats config. */
 export const getEffectiveStatsPeriod = (maxInterval: number): number =>
-    Math.min(getStoredStatsPeriod(), getClampedMaxInterval(maxInterval));
+    clampStatsPeriod(getStoredStatsPeriod(), maxInterval);
 
 /** Stats period from URL search params; null when absent or invalid. */
 export const getStatsPeriodFromUrl = (params: { period?: string }): number | null => {
@@ -49,7 +54,7 @@ export const getStatsPeriodFromUrl = (params: { period?: string }): number | nul
 export const resolveStatsPeriod = (params: { period?: string }, maxInterval: number): number => {
     const urlPeriod = getStatsPeriodFromUrl(params);
     if (urlPeriod !== null) {
-        return Math.min(urlPeriod, getClampedMaxInterval(maxInterval));
+        return clampStatsPeriod(urlPeriod, maxInterval);
     }
     return getEffectiveStatsPeriod(maxInterval);
 };
diff --git a/client_v2/src/helpers/useMediaQuery.ts b/client_v2/src/helpers/useMediaQuery.ts
deleted file mode 100644
index 5ed252c159c..00000000000
--- a/client_v2/src/helpers/useMediaQuery.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createSignal, onMount, onCleanup } from 'solid-js';
-
-const MOBILE_BREAKPOINT = 768;
-
-export const useMediaQuery = (query: string): (() => boolean) => {
-    const [matches, setMatches] = createSignal(window.matchMedia(query).matches);
-
-    onMount(() => {
-        const mediaQuery = window.matchMedia(query);
-        const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
-
-        mediaQuery.addEventListener('change', handler);
-        setMatches(mediaQuery.matches);
-
-        onCleanup(() => mediaQuery.removeEventListener('change', handler));
-    });
-
-    return matches;
-};
-
-export const useIsDesktop = () => useMediaQuery(`(min-width: ${MOBILE_BREAKPOINT}px)`);
diff --git a/client_v2/src/hooks/useIsMobile.ts b/client_v2/src/hooks/useIsMobile.ts
deleted file mode 100644
index 5920c050704..00000000000
--- a/client_v2/src/hooks/useIsMobile.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { createSignal, onMount, onCleanup } from 'solid-js';
-
-const MIN_SMALL_BREAKPOINT = '(min-width: 1024px)';
-
-/**
- * Hook to detect if viewport is mobile or desktop
- * @returns accessor function that returns true if mobile (below min-small breakpoint), false if desktop
- */
-export function useIsMobile() {
-    const [isMobile, setIsMobile] = createSignal(true);
-
-    onMount(() => {
-        const mediaQuery = window.matchMedia(MIN_SMALL_BREAKPOINT);
-
-        const handleMediaChange = (e: MediaQueryListEvent | MediaQueryList) => {
-            setIsMobile(!e.matches);
-        };
-
-        setIsMobile(!mediaQuery.matches);
-
-        mediaQuery.addEventListener('change', handleMediaChange);
-
-        onCleanup(() => {
-            mediaQuery.removeEventListener('change', handleMediaChange);
-        });
-    });
-
-    return isMobile;
-}
diff --git a/client_v2/src/hooks/useIsTruncated.ts b/client_v2/src/hooks/useIsTruncated.ts
index 852da47e573..8b1b7b98a41 100644
--- a/client_v2/src/hooks/useIsTruncated.ts
+++ b/client_v2/src/hooks/useIsTruncated.ts
@@ -1,5 +1,19 @@
 import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';
 
+type Options = {
+    /**
+     * While it returns false the hook neither measures nor observes — for
+     * callers whose tooltip can never open, e.g. on touch devices.  The signal
+     * resets to `false` so a stale value cannot leak into the disabled state.
+     */
+    enabled?: Accessor<boolean>;
+    /**
+     * Re-measures when this changes.  The observer only fires on box changes,
+     * so text swapped inside an unchanged box would keep a stale value.
+     */
+    source?: Accessor<unknown>;
+};
+
 /**
  * Reports whether an element's content is clipped by its own box — that is,
  * whether the browser is currently rendering a `text-overflow: ellipsis`.
@@ -11,18 +25,27 @@ import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';
  */
 export function useIsTruncated(
     getElement: Accessor<HTMLElement | undefined>,
+    options?: Options,
 ): Accessor<boolean> {
     const [isTruncated, setIsTruncated] = createSignal(false);
 
-    createEffect(() => {
+    const isEnabled = () => options?.enabled?.() ?? true;
+
+    const measure = () => {
         const element = getElement();
-        if (!element) return;
+        if (element) setIsTruncated(element.scrollWidth > element.clientWidth);
+    };
 
-        const measure = () => setIsTruncated(element.scrollWidth > element.clientWidth);
+    // The observer follows the element and the enabled flag only, so a source
+    // change never re-creates it.
+    createEffect(() => {
+        if (!isEnabled()) {
+            setIsTruncated(false);
+            return;
+        }
 
-        // Measure once synchronously: the first value has to be right before
-        // the next paint, and the observer only fires on later box changes.
-        measure();
+        const element = getElement();
+        if (!element) return;
 
         const observer = new ResizeObserver(measure);
         observer.observe(element);
@@ -30,5 +53,14 @@ export function useIsTruncated(
         onCleanup(() => observer.disconnect());
     });
 
+    // Measured apart from the observer: a source change has to re-measure even
+    // when the box keeps its size, which the observer alone never reports.
+    createEffect(() => {
+        // Read the accessor for its dependency, not for its value.
+        options?.source?.();
+
+        if (isEnabled()) measure();
+    });
+
     return isTruncated;
 }
diff --git a/client_v2/src/hooks/useMediaQuery.ts b/client_v2/src/hooks/useMediaQuery.ts
new file mode 100644
index 00000000000..22881b0b460
--- /dev/null
+++ b/client_v2/src/hooks/useMediaQuery.ts
@@ -0,0 +1,54 @@
+import { type Accessor, createSignal, onCleanup, onMount } from 'solid-js';
+
+import { DESKTOP_MIN_WIDTH, MOBILE_MAX_WIDTH } from 'panel/helpers/breakpoints';
+
+/**
+ * Reactive wrapper around `window.matchMedia`.  The returned accessor tracks
+ * whether `query` currently matches and re-reads on every change.
+ */
+export function useMediaQuery(query: string): Accessor<boolean> {
+    const [matches, setMatches] = createSignal(window.matchMedia(query).matches);
+
+    onMount(() => {
+        const mediaQuery = window.matchMedia(query);
+        const handler = (event: MediaQueryListEvent) => setMatches(event.matches);
+
+        mediaQuery.addEventListener('change', handler);
+
+        // Re-read after subscribing: the viewport may have changed between the
+        // initial read above and the listener registration.
+        setMatches(mediaQuery.matches);
+
+        onCleanup(() => mediaQuery.removeEventListener('change', handler));
+    });
+
+    return matches;
+}
+
+/**
+ * Reports `true` when the viewport is at least {@link DESKTOP_MIN_WIDTH} wide.
+ */
+export function useIsDesktop(): Accessor<boolean> {
+    return useMediaQuery(`(min-width: ${DESKTOP_MIN_WIDTH}px)`);
+}
+
+/**
+ * Reports `true` when the viewport is narrower than {@link MOBILE_MAX_WIDTH}.
+ *
+ * Note that this is a wider range than {@link useIsDesktop} covers, so
+ * viewports between 768px and 1023px report `true` for both hooks.  The
+ * behaviour is pinned by `__tests__/hooks/use-media-query.test.tsx`.
+ */
+export function useIsMobile(): Accessor<boolean> {
+    const isWideEnough = useMediaQuery(`(min-width: ${MOBILE_MAX_WIDTH}px)`);
+
+    return () => !isWideEnough();
+}
+
+/**
+ * Reports `true` on devices that cannot hover (touch screens), where tooltips
+ * have to be tap-driven instead of hover-driven.
+ */
+export function useIsTouchDevice(): Accessor<boolean> {
+    return useMediaQuery('(hover: none)');
+}
diff --git a/client_v2/src/hooks/useScrollEdges.ts b/client_v2/src/hooks/useScrollEdges.ts
new file mode 100644
index 00000000000..9dd6508aae4
--- /dev/null
+++ b/client_v2/src/hooks/useScrollEdges.ts
@@ -0,0 +1,66 @@
+import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';
+
+/**
+ * Slack for the scroll position comparison.  Layout values are fractional
+ * (device pixel ratios, zoom), so an exact comparison would keep reporting
+ * "there is more to scroll" when only a sub-pixel remainder is left.
+ */
+const EDGE_TOLERANCE = 1;
+
+/**
+ * Reports which directions a scroll container can still be scrolled in — that
+ * is, whether content is currently hidden past its top or bottom edge.  Used to
+ * show edge shadows only while there is something to reveal in that direction.
+ *
+ * Both values read `false` when the content fits, so a container that does not
+ * scroll never gets an edge shadow.  The element must be the scroll container
+ * itself (`overflow-y: auto`); an element inside a `display: none` subtree
+ * reports all metrics as 0, which reads as "cannot scroll"; the observer
+ * re-measures once the subtree becomes visible.
+ */
+export function useScrollEdges(
+    getElement: Accessor<HTMLElement | undefined>,
+): { canScrollUp: Accessor<boolean>; canScrollDown: Accessor<boolean> } {
+    const [canScrollUp, setCanScrollUp] = createSignal(false);
+    const [canScrollDown, setCanScrollDown] = createSignal(false);
+
+    createEffect(() => {
+        const element = getElement();
+        if (!element) return;
+
+        const measure = () => {
+            const { scrollTop, scrollHeight, clientHeight } = element;
+
+            setCanScrollUp(scrollTop > EDGE_TOLERANCE);
+            setCanScrollDown(scrollTop + clientHeight < scrollHeight - EDGE_TOLERANCE);
+        };
+
+        // Measure once synchronously: the first value has to be right before
+        // the next paint, and the observers only fire on later changes.
+        measure();
+
+        element.addEventListener('scroll', measure, { passive: true });
+
+        // Content changes (a different entry, a section appearing, a late font
+        // swap) alter the scroll range without resizing the container itself,
+        // so the children are observed as well.
+        const observer = new ResizeObserver(measure);
+        const observeContent = () => {
+            observer.disconnect();
+            observer.observe(element);
+            Array.from(element.children).forEach((child) => observer.observe(child));
+        };
+        observeContent();
+
+        const mutations = new MutationObserver(observeContent);
+        mutations.observe(element, { childList: true });
+
+        onCleanup(() => {
+            element.removeEventListener('scroll', measure);
+            mutations.disconnect();
+            observer.disconnect();
+        });
+    });
+
+    return { canScrollUp, canScrollDown };
+}
diff --git a/client_v2/src/hooks/useSwitchState.ts b/client_v2/src/hooks/useSwitchState.ts
new file mode 100644
index 00000000000..6bda393f3af
--- /dev/null
+++ b/client_v2/src/hooks/useSwitchState.ts
@@ -0,0 +1,36 @@
+import { type Accessor, createEffect, createSignal } from 'solid-js';
+
+/**
+ * Return type of the useSwitchState hook: the value to render and the setter
+ * used to correct it.
+ */
+type UseSwitchStateResult = [Accessor<boolean>, (next: boolean) => void];
+
+/**
+ * Mirrors a store-backed switch into a local signal so the rendered state can
+ * be corrected even when the store value did not change.
+ *
+ * A native checkbox flips itself the moment it is clicked, while the store only
+ * changes after a successful save — so without this, a rejected toggle leaves
+ * the switch looking enabled and every further click re-sends the same failing
+ * value.  The signal is created with `equals: false` to force that correction
+ * through, and it re-reads the store only while `processing` is false so the
+ * switch does not flicker back mid-save.
+ *
+ * @param value  Getter for the store-backed value.
+ * @param processing  Getter for the in-flight flag of the save request.
+ */
+export function useSwitchState(
+    value: Accessor<boolean>,
+    processing: Accessor<boolean>,
+): UseSwitchStateResult {
+    const [checked, setChecked] = createSignal(!!value(), { equals: false });
+
+    createEffect(() => {
+        if (!processing()) {
+            setChecked(!!value());
+        }
+    });
+
+    return [checked, setChecked];
+}
diff --git a/client_v2/src/hooks/useTheme.ts b/client_v2/src/hooks/useTheme.ts
new file mode 100644
index 00000000000..b84738aa183
--- /dev/null
+++ b/client_v2/src/hooks/useTheme.ts
@@ -0,0 +1,34 @@
+import { type Accessor, createSignal, onCleanup, onMount } from 'solid-js';
+
+import { THEMES } from 'panel/helpers/constants';
+
+/**
+ * Reports whether the dark theme is currently applied.
+ *
+ * The theme is driven by the `data-theme` attribute on `<html>` rather than by
+ * a store, so the hook observes the attribute directly.  That is what makes it
+ * usable from the standalone entries (`login`, `install`, `forgot_password`),
+ * which never mount the store-driven theme effect in `components/App`.
+ */
+export function useIsDarkTheme(): Accessor<boolean> {
+    const read = () => document.documentElement.dataset.theme === THEMES.dark;
+
+    const [isDark, setIsDark] = createSignal(read());
+
+    onMount(() => {
+        const observer = new MutationObserver(() => setIsDark(read()));
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme'],
+        });
+
+        // Re-read after subscribing: the theme may have changed between the
+        // initial read above and the observer registration.
+        setIsDark(read());
+
+        onCleanup(() => observer.disconnect());
+    });
+
+    return isDark;
+}
diff --git a/client_v2/src/index.pcss b/client_v2/src/index.pcss
index 424375a34a1..d7613d901a5 100644
--- a/client_v2/src/index.pcss
+++ b/client_v2/src/index.pcss
@@ -10,6 +10,10 @@
         Rubik, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
 }
 
+html {
+    -webkit-tap-highlight-color: transparent;
+}
+
 *,
 *::after,
 *::before {
diff --git a/client_v2/src/install/Setup/blocks/Banner/DnsBanner.tsx b/client_v2/src/install/Setup/blocks/Banner/DnsBanner.tsx
index 68759f42e0c..d16428856ff 100644
--- a/client_v2/src/install/Setup/blocks/Banner/DnsBanner.tsx
+++ b/client_v2/src/install/Setup/blocks/Banner/DnsBanner.tsx
@@ -76,6 +76,7 @@ export const DnsBanner = (props: Props) => {
                             height="big"
                             id="install_dns_ip"
                             isSearchable={false}
+                            onCard
                         />
                     </div>
 
@@ -92,6 +93,7 @@ export const DnsBanner = (props: Props) => {
                             onChange={handlePortChange}
                             onInput={handlePortChange}
                             size="large"
+                            onCard
                         />
                     </div>
 
diff --git a/client_v2/src/install/Setup/blocks/Banner/WebBanner.tsx b/client_v2/src/install/Setup/blocks/Banner/WebBanner.tsx
index 85cd47382c5..bee8011d784 100644
--- a/client_v2/src/install/Setup/blocks/Banner/WebBanner.tsx
+++ b/client_v2/src/install/Setup/blocks/Banner/WebBanner.tsx
@@ -62,6 +62,7 @@ export const WebBanner = (props: Props) => {
                         size="responsive"
                         height="big"
                         id="install_web_ip"
+                        onCard
                     />
                 </div>
 
@@ -78,6 +79,7 @@ export const WebBanner = (props: Props) => {
                         onChange={handlePortChange}
                         onInput={handlePortChange}
                         size="large"
+                        onCard
                     />
                 </div>
 
diff --git a/client_v2/src/lib/theme/Auth.module.pcss b/client_v2/src/lib/theme/Auth.module.pcss
new file mode 100644
index 00000000000..780d271745f
--- /dev/null
+++ b/client_v2/src/lib/theme/Auth.module.pcss
@@ -0,0 +1,64 @@
+.group {
+    padding: 8px 16px;
+}
+
+.footer {
+    width: 100%;
+    padding: 32px 0 0;
+    border-radius: 8px;
+
+    @media screen and (min-width: 768px) {
+        padding: 16px 0 32px;
+    }
+}
+
+.footerRow {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 0 16px;
+
+    @media screen and (min-width: 768px) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .footerButton {
+        max-width: none;
+
+        @media screen and (min-width: 768px) {
+            max-width: 200px;
+        }
+    }
+}
+
+.footerLink {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--fs-text-t2);
+    line-height: var(--lh-t2-condenced);
+    font-weight: var(--weight-medium);
+    color: var(--default-link);
+    text-decoration: none;
+    text-align: center;
+
+    &:hover,
+    &:focus {
+        color: var(--hovered-link);
+    }
+
+    &:active {
+        color: var(--pressed-link);
+    }
+
+    @media screen and (min-width: 768px) {
+        flex: 1 1 0;
+        justify-content: flex-end;
+        padding-left: 16px;
+        font-weight: var(--weight-regular);
+        text-decoration: underline;
+    }
+}
diff --git a/client_v2/src/lib/theme/Link.module.pcss b/client_v2/src/lib/theme/Link.module.pcss
index 33073cf0aff..30e63ca1bba 100644
--- a/client_v2/src/lib/theme/Link.module.pcss
+++ b/client_v2/src/lib/theme/Link.module.pcss
@@ -7,7 +7,6 @@
     color: var(--default-link);
     transition: color var(--t2);
     text-decoration: underline;
-    -webkit-tap-highlight-color: transparent;
 
     &:disabled,
     &.disabled {
diff --git a/client_v2/src/lib/theme/Pagination.module.pcss b/client_v2/src/lib/theme/Pagination.module.pcss
index 40dd2089117..885c49f7b4e 100644
--- a/client_v2/src/lib/theme/Pagination.module.pcss
+++ b/client_v2/src/lib/theme/Pagination.module.pcss
@@ -62,16 +62,21 @@
     border-radius: 4px;
     cursor: pointer;
 
-    &:hover,
-    &:focus {
+    &:hover:not(:disabled),
+    &:focus:not(:disabled) {
         background-color: var(--hovered-main-button);
         color: var(--default-primary-button-text);
+
+        .arrow {
+            color: var(--default-primary-button-text);
+        }
     }
 
     &:disabled {
         cursor: default;
 
         .arrow {
+            color: var(--disabled-gray-icons);
             cursor: default;
         }
 
diff --git a/client_v2/src/lib/theme/Table.module.pcss b/client_v2/src/lib/theme/Table.module.pcss
index d956ff9e5c6..be8373135dd 100644
--- a/client_v2/src/lib/theme/Table.module.pcss
+++ b/client_v2/src/lib/theme/Table.module.pcss
@@ -42,9 +42,6 @@
     }
 }
 
-/* For text-only cells that need 2-line truncation on mobile.
-   Separate from .cellValue because line-clamp requires
-   display: -webkit-box, which conflicts with display: flex. */
 .cellValueClamped {
     min-width: 0;
     flex: 1;
@@ -66,9 +63,6 @@
     }
 }
 
-/* For plain-text cells. On mobile the value stays on the label line while it
-   fits; when it is too long it drops to the next line as a single truncated
-   line instead of wrapping into many lines next to the label. */
 .cellValueText {
     min-width: 0;
     flex: 0 1 auto;
@@ -158,3 +152,8 @@
         display: none;
     }
 }
+
+.mobileCard {
+    background-color: var(--default-cards-background);
+    box-shadow: var(--default-cards-box-shadow);
+}
diff --git a/client_v2/src/lib/theme/index.ts b/client_v2/src/lib/theme/index.ts
index b70672b2ab0..664cd75f0eb 100644
--- a/client_v2/src/lib/theme/index.ts
+++ b/client_v2/src/lib/theme/index.ts
@@ -1,4 +1,5 @@
 import common from './Common.module.pcss';
+import auth from './Auth.module.pcss';
 import dialog from './Dialog.module.pcss';
 import layout from './Layout.module.pcss';
 import link from './Link.module.pcss';
@@ -14,6 +15,7 @@ import status from './Status.module.pcss';
 const theme = {
     link,
     common,
+    auth,
     layout,
     dialog,
     table,
diff --git a/client_v2/src/login/Login/Form.tsx b/client_v2/src/login/Login/Form.tsx
index eb157f7a3a9..1d572592c79 100644
--- a/client_v2/src/login/Login/Form.tsx
+++ b/client_v2/src/login/Login/Form.tsx
@@ -4,12 +4,12 @@ import { Input } from 'panel/common/controls/Input';
 import { Button } from 'panel/common/ui/Button';
 import { HTML_PAGES } from 'panel/helpers/constants';
 import intl from 'panel/common/intl';
-import cn from 'clsx';
+import { useIsDesktop } from 'panel/hooks/useMediaQuery';
+import { useIsDarkTheme } from 'panel/hooks/useTheme';
 
 import theme from 'panel/lib/theme';
 import { PasswordInput } from 'panel/common/controls/Input/PasswordInput';
 import { loginState } from 'panel/stores/login';
-import styles from './styles.module.pcss';
 
 export type LoginFormValues = {
     username: string;
@@ -25,6 +25,13 @@ export const Form = (props: Props) => {
         validateOn: 'input',
     });
 
+    const isDesktop = useIsDesktop();
+    const isDarkTheme = useIsDarkTheme();
+
+    // The light-theme card shares the page background, so filling the fields
+    // with the card surface only reads as a card in the dark theme.
+    const fieldOnCard = () => isDesktop() && isDarkTheme();
+
     createEffect(() => {
         if (loginState.error) {
             setError(loginForm, 'password', intl.getMessage('password_login_error'));
@@ -36,54 +43,56 @@ export const Form = (props: Props) => {
     };
 
     return (
-        <Form onSubmit={handleSubmit} class="card">
-            <div class={styles.formContainer}>
-                <div class={styles.group}>
-                    <Field
-                        name="username"
-                        validate={[required(intl.getMessage('form_error_required'))]}
-                    >
-                        {(field, fieldProps) => (
-                            <Input
-                                {...fieldProps}
-                                id="username"
-                                type="text"
-                                value={(field.value as string) || ''}
-                                label={intl.getMessage('username_label')}
-                                placeholder={intl.getMessage('username_placeholder')}
-                                errorMessage={field.error as string}
-                                autocomplete="username"
-                                autocapitalize="none"
-                                size="large"
-                            />
-                        )}
-                    </Field>
-                </div>
+        <Form onSubmit={handleSubmit}>
+            <div class={theme.auth.group}>
+                <Field
+                    name="username"
+                    validate={[required(intl.getMessage('form_error_required'))]}
+                >
+                    {(field, fieldProps) => (
+                        <Input
+                            {...fieldProps}
+                            id="username"
+                            type="text"
+                            value={(field.value as string) || ''}
+                            label={intl.getMessage('username_label')}
+                            placeholder={intl.getMessage('username_placeholder')}
+                            errorMessage={field.error as string}
+                            autocomplete="username"
+                            autocapitalize="none"
+                            size="large"
+                            onCard={fieldOnCard()}
+                        />
+                    )}
+                </Field>
+            </div>
 
-                <div class={styles.group}>
-                    <Field
-                        name="password"
-                        validate={[required(intl.getMessage('form_error_required'))]}
-                    >
-                        {(field, fieldProps) => (
-                            <PasswordInput
-                                {...fieldProps}
-                                id="password"
-                                value={(field.value as string) || ''}
-                                label={intl.getMessage('password_label')}
-                                placeholder={intl.getMessage('password_placeholder')}
-                                inputError={field.error as string}
-                                autocomplete="current-password"
-                                onChange={(value: string) => setValue(loginForm, 'password', value)}
-                                size="large"
-                            />
-                        )}
-                    </Field>
-                </div>
+            <div class={theme.auth.group}>
+                <Field
+                    name="password"
+                    validate={[required(intl.getMessage('form_error_required'))]}
+                >
+                    {(field, fieldProps) => (
+                        <PasswordInput
+                            {...fieldProps}
+                            id="password"
+                            value={(field.value as string) || ''}
+                            label={intl.getMessage('password_label')}
+                            placeholder={intl.getMessage('password_placeholder')}
+                            inputError={field.error as string}
+                            autocomplete="current-password"
+                            onChange={(value: string) => setValue(loginForm, 'password', value)}
+                            size="large"
+                            onCard={fieldOnCard()}
+                        />
+                    )}
+                </Field>
+            </div>
 
-                <div class={styles.footer}>
+            <div class={theme.auth.footer}>
+                <div class={theme.auth.footerRow}>
                     <Button
-                        class={styles.button}
+                        class={theme.auth.footerButton}
                         id="sign_in"
                         type="submit"
                         variant="primary"
@@ -93,14 +102,9 @@ export const Form = (props: Props) => {
                         {intl.getMessage('login')}
                     </Button>
 
-                    <div class={styles.info}>
-                        <a
-                            href={HTML_PAGES.FORGOT_PASSWORD}
-                            class={cn(theme.link.link, theme.text.t2)}
-                        >
-                            {intl.getMessage('forgot_password')}
-                        </a>
-                    </div>
+                    <a href={HTML_PAGES.FORGOT_PASSWORD} class={theme.auth.footerLink}>
+                        {intl.getMessage('forgot_password')}
+                    </a>
                 </div>
             </div>
         </Form>
diff --git a/client_v2/src/login/Login/Login.tsx b/client_v2/src/login/Login/Login.tsx
index 5d696e9570a..ae44a63efac 100644
--- a/client_v2/src/login/Login/Login.tsx
+++ b/client_v2/src/login/Login/Login.tsx
@@ -1,13 +1,8 @@
 import intl from 'panel/common/intl';
 
-import { PublicHeader } from 'panel/common/ui/PublicHeader';
-import { Icons } from 'panel/common/ui/Icons';
-
-import s from 'panel/common/ui/Header/Header.module.pcss';
+import { AuthLayout } from 'panel/common/ui/AuthLayout';
 import { processLogin } from 'panel/stores/login';
-import { Toasts } from 'panel/components/Toasts';
 import { Form, type LoginFormValues } from './Form';
-import styles from './styles.module.pcss';
 
 export const Login = () => {
     const handleSubmit = (values: LoginFormValues) => {
@@ -15,20 +10,8 @@ export const Login = () => {
     };
 
     return (
-        <div class={styles.loginWrapper}>
-            <PublicHeader
-                dropdownClass={s.dropdown}
-                dropdownPosition="bottomRight"
-                useLocalLanguage={true}
-            />
-            <div class={styles.login}>
-                <h1 class={styles.title}>{intl.getMessage('login')}</h1>
-                <Form onSubmit={handleSubmit} />
-            </div>
-
-            <Toasts />
-
-            <Icons />
-        </div>
+        <AuthLayout title={intl.getMessage('login')}>
+            <Form onSubmit={handleSubmit} />
+        </AuthLayout>
     );
 };
diff --git a/client_v2/src/login/Login/styles.module.pcss b/client_v2/src/login/Login/styles.module.pcss
deleted file mode 100644
index 344bd01c1e3..00000000000
--- a/client_v2/src/login/Login/styles.module.pcss
+++ /dev/null
@@ -1,125 +0,0 @@
-/* Disable Auto Zoom in Input - Safari on iPhone https://stackoverflow.com/a/6394497 */
-@media screen and (max-width: 767px) {
-    input,
-    select,
-    textarea {
-        font-size: 1rem;
-    }
-}
-
-.loginWrapper {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
-.login {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: stretch;
-    width: 100%;
-    max-width: 576px;
-    margin: 0 auto;
-    padding-top: 40px;
-    box-sizing: border-box;
-
-    @media screen and (min-width: 1024px) {
-        padding-top: 116px;
-
-    }
-}
-
-.formContainer {
-    width: 100%;
-    max-width: 576px;
-    padding: 48px 16px 16px;
-    box-sizing: border-box;
-}
-
-
-.listContainer {
-    padding: 0 16px;
-    width: 100%;
-    max-width: 576px;
-    box-sizing: border-box;
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%;
-}
-
-.info {
-    position: relative;
-    text-align: center;
-    text-decoration: none;
-    overflow: hidden;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 130%;
-}
-
-.message,
-.link {
-    font-size: 14px;
-    font-weight: 400;
-    letter-spacing: 0;
-}
-
-.link {
-    margin-top: 16px;
-    border: 0;
-    background: transparent;
-}
-
-@media screen and (min-width: 992px) {
-    .message {
-        position: absolute;
-        top: 40px;
-        padding: 0 15px;
-    }
-}
-
-.group {
-    margin-bottom: 24px;
-}
-
-.footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.button {
-    max-width: 200px;
-}
-
-.title {
-    font-size: 32px;
-    padding: 0 16px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 120%;
-}
-
-.titleList {
-    margin-bottom: 32px;
-    padding: 0 16px;
-}
-
-.listDesc {
-    margin-bottom: 24px;
-}
-
-.listItem {
-    font-size: 18px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%;
-}
-
-.list {
-    margin-bottom: 24px;
-    padding: 0 16px;
-}
diff --git a/client_v2/src/stores/dnsConfig.ts b/client_v2/src/stores/dnsConfig.ts
index 9663c4c5fb7..fa37bfddc65 100644
--- a/client_v2/src/stores/dnsConfig.ts
+++ b/client_v2/src/stores/dnsConfig.ts
@@ -101,43 +101,69 @@ export const clearDnsCache = async () => {
 };
 
 /**
- * Toggles `use_private_ptr_resolvers`.
- * Called from the Private Reverse page's header switch.
- * NOT called from the main DNS settings page.
+ * Saves a switch's new value unless another save is already in flight, since
+ * the two would race for the shared `processingSetConfig` flag.  The switch
+ * itself stays enabled: a click during a save is dropped rather than dimming
+ * every row on the page.
+ */
+const saveToggle = (values: () => Partial<DnsConfigState>) => {
+    if (state.processingSetConfig) {
+        return Promise.resolve();
+    }
+
+    return setDnsConfig(values(), { silent: true });
+};
+
+/**
+ * Toggles `use_private_ptr_resolvers`.  Called from the Private Reverse page's
+ * header switch and from the DNS settings page.
+ *
+ * Enabling sends the effective `local_ptr_upstreams` along with the flag.  The
+ * backend validates the request body in isolation, so a bare
+ * `{ use_private_ptr_resolvers: true }` makes it validate the OS-resolver
+ * fallback instead of the configured servers, failing with
+ * `private upstream servers: no upstream specified` whenever that fallback is
+ * unusable — for example, when the OS resolver is AdGuard Home itself.
+ *
+ * The servers are only added when they are known to be non-empty, so an
+ * unloaded state cannot clear the stored list.  Disabling needs no servers
+ * because it triggers no validation at all.
  */
 export const togglePrivatePtrResolvers = () => {
-    setDnsConfig({ use_private_ptr_resolvers: !state.use_private_ptr_resolvers }, { silent: true });
+    const enable = !state.use_private_ptr_resolvers;
+    const servers = state.local_ptr_upstreams;
+
+    return saveToggle(() =>
+        enable
+            ? {
+                  use_private_ptr_resolvers: true,
+                  ...(servers ? { local_ptr_upstreams: servers } : {}),
+              }
+            : { use_private_ptr_resolvers: false },
+    );
 };
 
 /** Toggles `resolve_clients`. Used by PrivateReverse page switch. */
-export const toggleResolveClients = () => {
-    setDnsConfig({ resolve_clients: !state.resolve_clients }, { silent: true });
-};
+export const toggleResolveClients = () =>
+    saveToggle(() => ({ resolve_clients: !state.resolve_clients }));
 
 /** Toggles `dnssec_enabled`. Used by ServerConfig Section 2, Row 7. */
-export const toggleDnssecEnabled = () => {
-    setDnsConfig({ dnssec_enabled: !state.dnssec_enabled }, { silent: true });
-};
+export const toggleDnssecEnabled = () =>
+    saveToggle(() => ({ dnssec_enabled: !state.dnssec_enabled }));
 
 /** Toggles `disable_ipv6` (inverted in UI). Used by ServerConfig Section 2, Row 8. */
-export const toggleDisableIPv6 = () => {
-    setDnsConfig({ disable_ipv6: !state.disable_ipv6 }, { silent: true });
-};
+export const toggleDisableIPv6 = () => saveToggle(() => ({ disable_ipv6: !state.disable_ipv6 }));
 
 /** Toggles `cache_enabled`. Used by Cache Section 3 header switch. */
-export const toggleCacheEnabled = () => {
-    setDnsConfig({ cache_enabled: !state.cache_enabled }, { silent: true });
-};
+export const toggleCacheEnabled = () => saveToggle(() => ({ cache_enabled: !state.cache_enabled }));
 
 /** Toggles `cache_optimistic`. Used by Cache Section 3, Row 4. */
-export const toggleOptimisticCaching = () => {
-    setDnsConfig({ cache_optimistic: !state.cache_optimistic }, { silent: true });
-};
+export const toggleOptimisticCaching = () =>
+    saveToggle(() => ({ cache_optimistic: !state.cache_optimistic }));
 
 /** Toggles `edns_cs_enabled`. Used by ServerConfig Section 2, Row 6 switch-link. */
-export const toggleEdnsCsEnabled = () => {
-    setDnsConfig({ edns_cs_enabled: !state.edns_cs_enabled }, { silent: true });
-};
+export const toggleEdnsCsEnabled = () =>
+    saveToggle(() => ({ edns_cs_enabled: !state.edns_cs_enabled }));
 
 /**
  * Splits a newline-delimited string into an array.
diff --git a/client_v2/src/stores/stats.ts b/client_v2/src/stores/stats.ts
index f8d3ecfa4bd..c4a3b7020a5 100644
--- a/client_v2/src/stores/stats.ts
+++ b/client_v2/src/stores/stats.ts
@@ -10,6 +10,7 @@ import {
 import { addErrorToast, addSuccessToast } from './toasts';
 import intl from 'panel/common/intl';
 import { DAY, HOUR, STATS_INTERVALS_DAYS, TIME_UNITS } from 'panel/helpers/constants';
+import { clampStatsPeriod } from 'panel/helpers/statistics';
 import {
     normalizeTopStats,
     normalizeTopClients,
@@ -27,6 +28,10 @@ type StatsState = {
     processingReset: boolean;
     /** Whether the stats config (interval etc.) has been fetched from the server. */
     configLoaded: boolean;
+    /** Whether a stats-config request has settled, successfully or not. */
+    configAttempted: boolean;
+    /** Whether a stats request has settled, successfully or not. */
+    statsAttempted: boolean;
     interval: number;
     customInterval: number | null;
     dnsQueries: number[];
@@ -60,6 +65,8 @@ const initialState: StatsState = {
     processingStats: true,
     processingReset: false,
     configLoaded: false,
+    configAttempted: false,
+    statsAttempted: false,
     interval: DAY,
     customInterval: null,
     dnsQueries: [],
@@ -89,7 +96,10 @@ const [state, setState] = createStore<StatsState>(initialState);
 export const getStats = async (period?: number) => {
     setState('processingStats', true);
     try {
-        const data = await stats(period != null ? { recent: period } : undefined);
+        // Clamp by the real retention so callers don't have to know it.
+        const data = await stats(
+            period != null ? { recent: clampStatsPeriod(period, state.interval) } : undefined,
+        );
 
         const normalizedTopClientsList = normalizeTopStats(data.top_clients || []);
         const clientsParams = getParamsForClientsSearch(normalizedTopClientsList, 'name');
@@ -120,10 +130,11 @@ export const getStats = async (period?: number) => {
             ),
             topUpstreamsResponses: normalizeTopStats(data.top_upstreams_responses || []),
             processingStats: false,
+            statsAttempted: true,
         });
     } catch (error) {
         addErrorToast({ error });
-        setState('processingStats', false);
+        setState({ processingStats: false, statsAttempted: true });
     }
 };
 
@@ -141,10 +152,11 @@ export const getStatsConfig = async () => {
             ignored_enabled: data.ignored_enabled ?? false,
             processingGetConfig: false,
             configLoaded: true,
+            configAttempted: true,
         });
     } catch (error) {
         addErrorToast({ error });
-        setState('processingGetConfig', false);
+        setState({ processingGetConfig: false, configAttempted: true });
     }
 };
 
diff --git a/client_v2/src/stores/toasts.ts b/client_v2/src/stores/toasts.ts
index 91e9351f43e..4668ce9b6fa 100644
--- a/client_v2/src/stores/toasts.ts
+++ b/client_v2/src/stores/toasts.ts
@@ -69,23 +69,48 @@ export const createUndoToast = (
     return { message, actionLabel, undoId };
 };
 
-export const addErrorToast = (payload: ErrorToastPayload) => {
+/**
+ * Adds a problem notice, collapsing a repeat of the same problem instead of
+ * stacking a copy — a request that keeps failing must not flood the screen with
+ * identical toasts.  Notices carrying an action always get their own entry
+ * because the action belongs to that particular occurrence.
+ */
+const pushProblemToast = (type: 'error' | 'warning', payload: ErrorToastPayload) => {
     const { error, options, action, noIcon } = payload;
     const message = error instanceof Error ? error.message : String(error);
-    console.error(message); // eslint-disable-line no-console
+
+    if (type === 'error') {
+        console.error(message); // eslint-disable-line no-console
+    }
+
     const notice: ToastNotice = {
         id: nanoid(),
         message,
         options,
-        type: 'error' as const,
+        type,
         noIcon,
     };
     if (action) {
         notice.action = action;
     }
-    setState('notices', (prev) => [...prev, notice]);
+
+    setState('notices', (prev) => {
+        const isDuplicate = (n: ToastNotice) =>
+            !action && n.type === type && n.message === message && !n.action && !n.undoId;
+
+        if (prev.some(isDuplicate)) {
+            // The fresh id makes the toast render as a new notice, which
+            // restarts its dismiss timer so the user gets the full time to read
+            // the repeated message.
+            return prev.map((n) => (isDuplicate(n) ? notice : n));
+        }
+
+        return [...prev, notice];
+    });
 };
 
+export const addErrorToast = (payload: ErrorToastPayload) => pushProblemToast('error', payload);
+
 export const addSuccessToast = (message: SuccessToastPayload) => {
     const notice: ToastNotice = {
         id: nanoid(),
@@ -100,21 +125,7 @@ export const addSuccessToast = (message: SuccessToastPayload) => {
     setState('notices', (prev) => [...prev, notice]);
 };
 
-export const addWarningToast = (payload: ErrorToastPayload) => {
-    const { error, options, action, noIcon } = payload;
-    const message = error instanceof Error ? error.message : String(error);
-    const notice: ToastNotice = {
-        id: nanoid(),
-        message,
-        options,
-        type: 'warning' as const,
-        noIcon,
-    };
-    if (action) {
-        notice.action = action;
-    }
-    setState('notices', (prev) => [...prev, notice]);
-};
+export const addWarningToast = (payload: ErrorToastPayload) => pushProblemToast('warning', payload);
 
 export const addNoticeToast = (message: string) => {
     setState('notices', (prev) => [
diff --git a/client_v2/tests/e2e/blocked-services.spec.ts b/client_v2/tests/e2e/blocked-services.spec.ts
index d5b17669fee..06d3f30b8db 100644
--- a/client_v2/tests/e2e/blocked-services.spec.ts
+++ b/client_v2/tests/e2e/blocked-services.spec.ts
@@ -363,7 +363,7 @@ test.describe('Blocked Services Page', () => {
         await navItem.click();
 
         // Should be on schedule page
-        await expect(page).toHaveURL(/#blocked_services\/schedule/);
+        await expect(page).toHaveURL(/#\/?blocked_services\/schedule/);
     });
 
     // TODO: Check if the component actually disables switches during API calls.
@@ -420,7 +420,7 @@ test.describe('Inactivity Schedule Page', () => {
             .getByRole('link', { name: 'Blocked services' });
         await breadcrumb.click();
 
-        await expect(page).toHaveURL(/#blocked_services$/);
+        await expect(page).toHaveURL(/#\/?blocked_services$/);
     });
 
     test('should display timezone selector', async ({ page }) => {
@@ -494,6 +494,94 @@ test.describe('Inactivity Schedule Page', () => {
         await expect(modal).toBeVisible();
     });
 
+    test('should keep the time dropdown inside the dialog', async ({ page }) => {
+        // Regression: zag-js clamps the dropdown positioner to the space between
+        // the trigger and the nearest clipping ancestor (the dialog card) and
+        // exposes that budget as `--available-height`. The list used to ignore it
+        // and was painted past the positioner, so the card's own `overflow: auto`
+        // hard-cut the menu - no bottom radius, no shadow, extra card scrollbar.
+        //
+        // The clamp relies on `display: flex` on the menu, which outranks the UA
+        // `[hidden] { display: none }` rule - so a closed menu must be hidden
+        // explicitly, otherwise it stays on screen and swallows clicks.
+        const paintedMenus = () =>
+            page.evaluate(
+                () =>
+                    [
+                        ...document.querySelectorAll<HTMLElement>(
+                            '[data-scope="select"][data-part="content"], [data-scope="combobox"][data-part="content"]',
+                        ),
+                    ]
+                        .filter((content) => content.getBoundingClientRect().height > 0)
+                        .map((content) => Math.round(content.getBoundingClientRect().height)),
+            );
+
+        await page.getByTestId('schedule-row-tue-add').click();
+        await expect(page.locator('.rc-dialog-update .dialog-content')).toBeVisible();
+
+        // No menu is open yet, so nothing may be painted.
+        expect(await paintedMenus(), 'closed menus stay hidden').toEqual([]);
+
+        await page
+            .locator('.rc-dialog-update [data-scope="select"][data-part="trigger"]')
+            .first()
+            .click();
+
+        // zag-js positions the menu on the next animation frame, so wait until
+        // the budget it computed is actually applied before measuring.
+        const openPositioner = () =>
+            page.evaluate(
+                () =>
+                    document
+                        .querySelector<HTMLElement>(
+                            '.rc-dialog-update [data-part="positioner"]:has([data-part="content"]:not([hidden]))',
+                        )
+                        ?.style.getPropertyValue('--available-height') ?? '',
+            );
+
+        await expect.poll(openPositioner).not.toBe('');
+
+        const geometry = await page.evaluate(() => {
+            // Only the open menu has a visible content box.
+            const positioner = document.querySelector<HTMLElement>(
+                '.rc-dialog-update [data-part="positioner"]:has([data-part="content"]:not([hidden]))',
+            );
+            const card = document.querySelector<HTMLElement>(
+                '.rc-dialog-update .dialog-content',
+            );
+            const content = positioner?.querySelector<HTMLElement>('[data-part="content"]');
+            const group = positioner?.querySelector<HTMLElement>('[data-part="item-group"]');
+            if (!positioner || !card || !content || !group) {
+                return null;
+            }
+
+            return {
+                availableHeight: positioner.style.getPropertyValue('--available-height'),
+                contentBottom: content.getBoundingClientRect().bottom,
+                cardBottom: card.getBoundingClientRect().bottom,
+                groupScrollHeight: group.scrollHeight,
+                groupClientHeight: group.clientHeight,
+                cardScrollHeight: card.scrollHeight,
+                cardClientHeight: card.clientHeight,
+            };
+        });
+
+        expect(geometry, 'open dropdown found inside the dialog').not.toBeNull();
+
+        // Exactly one menu is painted - the open one, at its clamped height.
+        const painted = await paintedMenus();
+        expect(painted.length, 'only the open menu is painted').toBe(1);
+        expect(painted[0]).toBe(geometry?.groupClientHeight);
+
+        // The menu must honour the space the dialog leaves for it...
+        expect(geometry?.availableHeight).not.toBe('');
+        expect(geometry?.contentBottom).toBeLessThanOrEqual(geometry?.cardBottom! + 1);
+        // ...scroll its list instead of overflowing...
+        expect(geometry?.groupScrollHeight).toBeGreaterThan(geometry?.groupClientHeight!);
+        // ...and no longer add scrollable overflow to the card.
+        expect(geometry?.cardScrollHeight).toBeLessThanOrEqual(geometry?.cardClientHeight! + 1);
+    });
+
     test('should show confirmation dialog when delete is clicked', async ({ page }) => {
         // Click delete on Monday
         const mondayRow = page.locator('[data-testid^="schedule-row-"]').first();
@@ -703,7 +791,7 @@ test.describe('Blocked Services - Schedule Integration', () => {
         const navItem = page.getByTestId('blocked-services-schedule-link');
         await navItem.click();
 
-        await expect(page).toHaveURL(/#blocked_services\/schedule/);
+        await expect(page).toHaveURL(/#\/?blocked_services\/schedule/);
 
         // Navigate back via breadcrumbs
         const breadcrumb = page
@@ -711,6 +799,6 @@ test.describe('Blocked Services - Schedule Integration', () => {
             .getByRole('link', { name: 'Blocked services' });
         await breadcrumb.click();
 
-        await expect(page).toHaveURL(/#blocked_services$/);
+        await expect(page).toHaveURL(/#\/?blocked_services$/);
     });
 });
diff --git a/client_v2/tests/e2e/clients.spec.ts b/client_v2/tests/e2e/clients.spec.ts
index 6b0fdaf74a1..5fa7c856801 100644
--- a/client_v2/tests/e2e/clients.spec.ts
+++ b/client_v2/tests/e2e/clients.spec.ts
@@ -133,6 +133,24 @@ const DEFAULT_CLIENTS_RESPONSE: ClientsResponse = {
     supported_tags: ['work', 'home', 'guest'],
 };
 
+const DEFAULT_ALL_SERVICES = [{ id: 'youtube', name: 'YouTube' }];
+
+/**
+ * A catalogue large enough to exercise the "+N" overflow chip, and the ids a
+ * client blocks when every one of them has to collapse into that chip.
+ *
+ * The icons are plain inline SVGs — the real API returns them base64-encoded,
+ * but `decodeSvg` falls back to the raw markup, which keeps the fixtures
+ * readable and still renders at the real 24px size.
+ */
+const MANY_SERVICES = Array.from({ length: 12 }, (_, index) => ({
+    id: `service-${index}`,
+    name: `Service ${index}`,
+    icon_svg: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="hsl(${index * 30} 70% 55%)"/><text x="12" y="17" font-size="13" text-anchor="middle" fill="#fff">${index}</text></svg>`,
+}));
+
+const MANY_SERVICE_IDS = MANY_SERVICES.map((service) => service.id);
+
 // ---- Helpers ----
 
 type ClientsMocksResult = {
@@ -143,7 +161,13 @@ type ClientsMocksResult = {
 
 async function setupClientsMocks(
     page: Page,
-    { clientsResponse = DEFAULT_CLIENTS_RESPONSE }: { clientsResponse?: ClientsResponse } = {},
+    {
+        clientsResponse = DEFAULT_CLIENTS_RESPONSE,
+        allServices = DEFAULT_ALL_SERVICES,
+    }: {
+        clientsResponse?: ClientsResponse;
+        allServices?: { id: string; name: string }[];
+    } = {},
 ): Promise<ClientsMocksResult> {
     const addClientPayloads: AddClientPayload[] = [];
     const updateClientPayloads: UpdateClientPayload[] = [];
@@ -223,7 +247,7 @@ async function setupClientsMocks(
             status: 200,
             contentType: 'application/json',
             body: JSON.stringify({
-                blocked_services: [{ id: 'youtube', name: 'YouTube' }],
+                blocked_services: allServices,
                 groups: [],
             }),
         });
@@ -259,12 +283,13 @@ test.describe('Clients', () => {
         await expect(page.getByRole('button', { name: 'Persistent', exact: true })).toBeVisible();
         await expect(page.getByRole('button', { name: 'Runtime', exact: true })).toBeVisible();
 
-        // Persistent clients are shown by default
-        await expect(page.getByText('Office Desktop')).toBeVisible({
+        // Persistent clients are shown by default.  The name cell renders the
+        // value twice (trigger + tooltip content), so match the first one.
+        await expect(page.getByText('Office Desktop').first()).toBeVisible({
             timeout: 10_000,
         });
         await expect(page.getByText('192.168.0.100')).toBeVisible();
-        await expect(page.getByText('Living Room TV')).toBeVisible();
+        await expect(page.getByText('Living Room TV').first()).toBeVisible();
 
         // Runtime client data is NOT visible until the Runtime tab is active
         await expect(page.getByText('192.168.0.200')).not.toBeVisible();
@@ -288,8 +313,8 @@ test.describe('Clients', () => {
 
         // Switch back to Persistent — URL should update
         await page.getByRole('button', { name: 'Persistent', exact: true }).click();
-        await expect(page).toHaveURL(/#clients(\?tab=persistent)?$/);
-        await expect(page.getByText('Office Desktop')).toBeVisible();
+        await expect(page).toHaveURL(/#\/?clients(\?tab=persistent)?$/);
+        await expect(page.getByText('Office Desktop').first()).toBeVisible();
     });
 
     test('adds a new persistent client', async ({ page }) => {
@@ -299,7 +324,7 @@ test.describe('Clients', () => {
 
         // Click "Add Client" in the page header
         await page.getByTestId('clients-add-button').click();
-        await expect(page).toHaveURL(/#clients\/add$/);
+        await expect(page).toHaveURL(/#\/?clients\/add$/);
         await expect(page.getByTestId('client-form')).toBeVisible();
 
         // Fill in name and identifier
@@ -308,7 +333,7 @@ test.describe('Clients', () => {
 
         // Save
         await page.getByTestId('client-form-save').click();
-        await expect(page).toHaveURL(/#clients$/);
+        await expect(page).toHaveURL(/#\/?clients$/);
 
         // Verify API payload
         await expect.poll(() => addClientPayloads.length).toBe(1);
@@ -324,7 +349,7 @@ test.describe('Clients', () => {
         // Click the edit button for "Office Desktop" (second row)
         await page.getByTestId('clients-edit-button').nth(1).click();
 
-        await expect(page).toHaveURL(/#clients\/edit\/Office%20Desktop$/);
+        await expect(page).toHaveURL(/#\/?clients\/edit\/Office%20Desktop$/);
         await expect(page.getByTestId('client-form')).toBeVisible();
 
         // Verify pre-filled data
@@ -335,7 +360,7 @@ test.describe('Clients', () => {
         await page.getByTestId('client-form-name').fill('Office Desktop Updated');
         await page.getByTestId('client-form-save').click();
 
-        await expect(page).toHaveURL(/#clients$/);
+        await expect(page).toHaveURL(/#\/?clients$/);
 
         // Verify update payload
         await expect.poll(() => updateClientPayloads.length).toBe(1);
@@ -352,10 +377,10 @@ test.describe('Clients', () => {
         await page.getByTestId('clients-delete-button').first().click();
 
         // ConfirmDialog should appear
-        await expect(page.getByText(/Are you sure you want to delete client/)).toBeVisible();
+        await expect(page.getByText(/will be removed from Persistent clients/)).toBeVisible();
 
-        // Click confirm "Remove"
-        await page.getByRole('button', { name: 'Remove' }).click();
+        // Click confirm "Yes, remove"
+        await page.getByRole('button', { name: 'Yes, remove' }).click();
 
         // Verify DELETE API call
         await expect.poll(() => deleteClientPayloads.length).toBe(1);
@@ -382,4 +407,69 @@ test.describe('Clients', () => {
         // No API call
         expect(addClientPayloads).toHaveLength(0);
     });
+
+    test('keeps blocked-service icons inside the cell on narrow screens', async ({ page }) => {
+        // The `blocked_services` column is the narrowest one in the table
+        // (minmax(120px, 1fr), 96px of content box), so this viewport is the
+        // worst case for the icon strip.
+        await page.setViewportSize({ width: 900, height: 900 });
+
+        await setupClientsMocks(page, {
+            clientsResponse: {
+                ...DEFAULT_CLIENTS_RESPONSE,
+                clients: [
+                    {
+                        ...MOCK_CLIENT_2,
+                        name: 'Heavy Blocker',
+                        blocked_services: MANY_SERVICE_IDS,
+                        use_global_blocked_services: false,
+                    },
+                ],
+            },
+            allServices: MANY_SERVICES,
+        });
+        await login(page);
+        await page.goto('/#clients');
+
+        await expect(page.getByTestId('service-icons')).toBeVisible({ timeout: 10_000 });
+
+        const strips = await page.evaluate(() => {
+            const elements = Array.from(
+                document.querySelectorAll('[data-testid="service-icons"]'),
+            ) as HTMLElement[];
+
+            return elements.map((strip) => {
+                const list = strip.firstElementChild as HTMLElement;
+                const listRect = list.getBoundingClientRect();
+                const icons = Array.from(list.querySelectorAll('[data-testid="service-icon"]')).map(
+                    (icon) => icon.getBoundingClientRect().right,
+                );
+                const badge = strip.querySelector('[data-testid="services-count"]');
+
+                return {
+                    iconRights: icons,
+                    iconCount: icons.length,
+                    listRight: listRect.right,
+                    badgeCount: badge ? Number(badge.textContent?.trim()) : 0,
+                };
+            });
+        });
+
+        expect(strips.length).toBeGreaterThan(0);
+
+        for (const strip of strips) {
+            // Every icon is fully inside the (overflow-hidden) icon list, i.e.
+            // nothing is clipped mid-glyph.
+            for (const right of strip.iconRights) {
+                expect(right).toBeLessThanOrEqual(strip.listRight + 0.5);
+            }
+
+            // Two icons are rendered inline — three of them need 102px inside a
+            // 96px content box, which is what used to clip the last icon.
+            expect(strip.iconCount).toBe(2);
+
+            // The strip accounts for every blocked service: visible + hidden.
+            expect(strip.iconCount + strip.badgeCount).toBe(MANY_SERVICE_IDS.length);
+        }
+    });
 });
diff --git a/client_v2/tests/e2e/dns-rewrites.spec.ts b/client_v2/tests/e2e/dns-rewrites.spec.ts
index d22eb90d191..b2d51f51356 100644
--- a/client_v2/tests/e2e/dns-rewrites.spec.ts
+++ b/client_v2/tests/e2e/dns-rewrites.spec.ts
@@ -35,7 +35,9 @@ const DELETE_REWRITE: RewriteEntry = {
 
 const openDnsRewritesPage = async (page: Page) => {
     await page.goto('/#dns_rewrites');
-    await expect(page.getByText('DNS rewrites', { exact: true })).toBeVisible();
+    // "DNS rewrites" also labels the sidebar Filters item, which auto-expands on
+    // this route, so a bare text assertion is a strict-mode violation.
+    await expect(page.getByTestId('add-rewrite')).toBeVisible();
 };
 
 const listRewrites = async (page: Page): Promise<RewriteEntry[]> => {
@@ -215,7 +217,8 @@ test.describe('DNS Rewrites', () => {
         await expect(deleteButton).toBeVisible({ timeout: 10_000 });
         await deleteButton.click();
 
-        const confirmButton = page.getByRole('button', { name: /remove|delete/i });
+        // The row actions also match /delete/i, so target the dialog button.
+        const confirmButton = page.getByTestId('rewrite-delete-confirm');
         await expect(confirmButton).toBeVisible({ timeout: 10000 });
         await confirmButton.click();
 
diff --git a/client_v2/tests/e2e/login.spec.ts b/client_v2/tests/e2e/login.spec.ts
index 786aa3eaf23..2370c7cc160 100644
--- a/client_v2/tests/e2e/login.spec.ts
+++ b/client_v2/tests/e2e/login.spec.ts
@@ -2,7 +2,6 @@ import { test } from '@playwright/test';
 
 import { login } from '../helpers/login';
 
-
 test.describe('Login', () => {
     test('should successfully log in with valid credentials', async ({ page }) => {
         await login(page);
diff --git a/client_v2/tests/e2e/query-log.spec.ts b/client_v2/tests/e2e/query-log.spec.ts
index 1163a9e0c06..864b43609a1 100644
--- a/client_v2/tests/e2e/query-log.spec.ts
+++ b/client_v2/tests/e2e/query-log.spec.ts
@@ -307,54 +307,22 @@ const applySearchFilter = (rows: QueryLogApiEntry[], search: string) => {
     });
 };
 
-const applyResponseStatusFilter = (rows: QueryLogApiEntry[], responseStatus: string) => {
-    switch (responseStatus) {
-        case 'all':
-            return rows;
-        case 'blocked':
-            return rows.filter(
-                (row) =>
-                    row.reason === 'FilteredBlackList' || row.reason === 'FilteredBlockedService',
-            );
-        case 'blocked_services':
-            return rows.filter((row) => row.reason === 'FilteredBlockedService');
-        case 'blocked_safebrowsing':
-            return rows.filter((row) => row.reason === 'FilteredSafeBrowsing');
-        case 'blocked_parental':
-            return rows.filter((row) => row.reason === 'FilteredParental');
-        case 'safe_search':
-            return rows.filter((row) => row.reason === 'FilteredSafeSearch');
-        case 'whitelisted':
-            return rows.filter((row) => row.reason === 'NotFilteredWhiteList');
-        case 'rewritten':
-            return rows.filter(
-                (row) =>
-                    row.reason === 'Rewrite' ||
-                    row.reason === 'RewriteEtcHosts' ||
-                    row.reason === 'RewriteRule',
-            );
-        case 'processed':
-            return rows.filter(
-                (row) =>
-                    row.reason !== 'FilteredBlackList' &&
-                    row.reason !== 'FilteredBlockedService' &&
-                    row.reason !== 'NotFilteredWhiteList',
-            );
-        default:
-            return rows;
+const applyReasonFilter = (rows: QueryLogApiEntry[], reasons: string[]) => {
+    if (reasons.length === 0) {
+        return rows;
     }
+
+    return rows.filter((row) => reasons.includes(row.reason));
 };
 
 const buildDefaultQueryLogResponse = (requestUrl: URL): QueryLogResponse => {
     const search = requestUrl.searchParams.get('search') ?? '';
-    const responseStatus = requestUrl.searchParams.get('response_status') ?? 'all';
-    const filteredRows = applyResponseStatusFilter(
-        applySearchFilter(QUERY_LOG_ROWS, search),
-        responseStatus,
-    );
+    // The backend `response_status` param is deprecated; the app now sends the
+    // exact reason strings, repeated once per value.
+    const reasons = requestUrl.searchParams.getAll('reason');
 
     return {
-        data: filteredRows,
+        data: applyReasonFilter(applySearchFilter(QUERY_LOG_ROWS, search), reasons),
         oldest: '',
     };
 };
@@ -636,7 +604,9 @@ test.describe('Query log desktop', () => {
         await searchInput.fill('');
         const clearedSearchRequest = await expectQueryLogRequestCount(queryLogRequests, 3);
 
-        expect(clearedSearchRequest?.searchParams.get('search')).toBeNull();
+        // A cleared search is sent as an empty param, which the backend treats
+        // as "no filter" (the hash URL omits it entirely).
+        expect(clearedSearchRequest?.searchParams.get('search')).toBe('');
         await expect(page.getByTestId('query-log-request-cell')).toHaveCount(QUERY_LOG_ROWS.length);
         expectPageFilters(page, { search: null, status: 'all', reason: 'all' });
 
@@ -665,7 +635,7 @@ test.describe('Query log desktop', () => {
         const refreshRequest = await expectQueryLogRequestCount(queryLogRequests, 6);
 
         expect(refreshRequest?.searchParams.get('search')).toBe('plain.example');
-        expect(refreshRequest?.searchParams.get('response_status')).toBe('all');
+        expect(refreshRequest?.searchParams.getAll('reason')).toEqual([]);
         await expect(
             page.locator('[data-testid="toast"][data-toast-code="notify_updated"]'),
         ).toBeVisible();
@@ -673,7 +643,8 @@ test.describe('Query log desktop', () => {
         await page.getByTestId('query-log-search-clear-button').click();
         const resetSearchRequest = await expectQueryLogRequestCount(queryLogRequests, 7);
 
-        expect(resetSearchRequest?.searchParams.get('search')).toBeNull();
+        // See the cleared-search note above.
+        expect(resetSearchRequest?.searchParams.get('search')).toBe('');
         await expect(searchInput).toHaveValue('');
         await expect(page.getByTestId('query-log-search-clear-button')).toHaveCount(0);
         await expect(page.getByTestId('query-log-request-cell')).toHaveCount(QUERY_LOG_ROWS.length);
@@ -693,7 +664,12 @@ test.describe('Query log desktop', () => {
         );
         const blockedStatusRequest = await expectQueryLogRequestCount(queryLogRequests, 2);
 
-        expect(blockedStatusRequest?.searchParams.get('response_status')).toBe('blocked');
+        expect(blockedStatusRequest?.searchParams.getAll('reason')).toEqual([
+            'FilteredBlackList',
+            'FilteredSafeBrowsing',
+            'FilteredParental',
+            'FilteredBlockedService',
+        ]);
         await expect(page.getByTestId('query-log-request-cell')).toHaveCount(1);
         await expect(getRequestCellByDomain(page, 'example.org')).toHaveCount(1);
         expectPageFilters(page, { search: null, status: 'blocked', reason: 'all' });
@@ -710,7 +686,7 @@ test.describe('Query log desktop', () => {
         );
         const safeSearchRequest = await expectQueryLogRequestCount(queryLogRequests, 4);
 
-        expect(safeSearchRequest?.searchParams.get('response_status')).toBe('safe_search');
+        expect(safeSearchRequest?.searchParams.getAll('reason')).toEqual(['FilteredSafeSearch']);
         await expect(page.getByTestId('query-log-request-cell')).toHaveCount(1);
         await expect(getRequestCellByDomain(page, 'search.example')).toHaveCount(1);
         expectPageFilters(page, { search: null, status: 'all', reason: 'FilteredSafeSearch' });
@@ -723,35 +699,17 @@ test.describe('Query log desktop', () => {
         );
         const emptyStateRequest = await expectQueryLogRequestCount(queryLogRequests, 5);
 
-        expect(emptyStateRequest?.searchParams.get('response_status')).toBe('blocked');
+        expect(emptyStateRequest?.searchParams.getAll('reason')).toEqual([
+            'FilteredBlackList',
+            'FilteredSafeBrowsing',
+            'FilteredParental',
+            'FilteredBlockedService',
+        ]);
         await expect(page.getByTestId('query-log-request-cell')).toHaveCount(1);
         await expect(getRequestCellByDomain(page, 'example.org')).toHaveCount(1);
         expectPageFilters(page, { search: null, status: 'blocked', reason: 'all' });
     });
 
-    test('shows the log-rotation empty state with a settings link', async ({ page }) => {
-        await setupQueryLogMocks(page, {
-            queryLogResolver: () => ({
-                data: [],
-                oldest: '',
-            }),
-            queryLogConfig: {
-                ...MOCK_QUERY_LOG_CONFIG,
-                interval: 0,
-            },
-        });
-
-        await login(page);
-        await page.goto('/#logs');
-
-        const emptyState = page.locator('[data-testid="query-log-empty-state"]:visible');
-        const settingsLink = emptyState.locator('a');
-
-        await expect(emptyState).toBeVisible();
-        await expect(settingsLink).toHaveCount(1);
-        await expect(settingsLink).toHaveAttribute('href', /#\/?settings$/);
-    });
-
     test('shows the disabled-log empty state with a settings link', async ({ page }) => {
         await setupQueryLogMocks(page, {
             queryLogResolver: () => ({
@@ -772,7 +730,7 @@ test.describe('Query log desktop', () => {
 
         await expect(emptyState).toBeVisible();
         await expect(settingsLink).toHaveCount(1);
-        await expect(settingsLink).toHaveAttribute('href', /#\/?settings$/);
+        await expect(settingsLink).toHaveAttribute('href', /#\/?settings\?section=query-log$/);
     });
 
     // TODO(AGDNS-4057): Re-enable when row action menus and detail modal
@@ -877,7 +835,7 @@ test.describe('Query log desktop', () => {
         ).toBeVisible();
 
         await unmanagedMenu.getByTestId('query-log-row-action-add-persistent-client').click();
-        await expect(page).toHaveURL(/#clients\?clientId=192\.168\.0\.40$/);
+        await expect(page).toHaveURL(/#\/?clients\?clientId=192\.168\.0\.40$/);
     });
 
     // TODO(AGDNS-4057): Re-enable when detail modal action buttons

From b08c2e5418081888269d5009f01dfbaa8c8af253 Mon Sep 17 00:00:00 2001
From: Maksim Kazantsev <m.kazantsev@adguard.com>
Date: Fri, 25 Sep 2026 16:48:24 +0300
Subject: [PATCH 2/2] AGH-169 Fix ratelimit allowlist

---
 internal/dnsforward/config.go                 | 24 +++--
 internal/dnsforward/config_internal_test.go   | 12 +--
 .../dnsforward/dnsforward_internal_test.go    | 93 +++++++++++++++++++
 3 files changed, 115 insertions(+), 14 deletions(-)

diff --git a/internal/dnsforward/config.go b/internal/dnsforward/config.go
index 3dda7cb3ad3..fddbe429528 100644
--- a/internal/dnsforward/config.go
+++ b/internal/dnsforward/config.go
@@ -421,19 +421,27 @@ func (s *Server) newProxyConfig(ctx context.Context) (conf *proxy.Config, err er
 
 // newRatelimitMw returns the ratelimit middleware.  In case of invalid
 // ratelimit configuration returns an error. l must not be nil.
-func newRatelimitMw(
-	l *slog.Logger,
-	conf ServerConfig,
-) (mw proxy.Middleware, err error) {
+func newRatelimitMw(l *slog.Logger, conf ServerConfig) (mw proxy.Middleware, err error) {
 	if conf.Ratelimit == 0 {
 		return proxy.MiddlewareFunc(proxy.PassThrough), nil
 	}
 
+	allowListAddrs := make(netutil.SliceSubnetSet, 0, len(conf.RatelimitWhitelist))
+	for i, s := range conf.RatelimitWhitelist {
+		if !s.IsValid() {
+			return nil, fmt.Errorf("ratelimit: whitelist: at index %d: invalid ip", i)
+		}
+
+		s = s.Unmap()
+		allowListAddrs = append(allowListAddrs, netip.PrefixFrom(s, s.BitLen()))
+	}
+
 	rlConf := &ratelimit.Config{
-		Logger:        l.With(slogutil.KeyPrefix, "ratelimit"),
-		Ratelimit:     uint(conf.Ratelimit),
-		SubnetLenIPv4: conf.RatelimitSubnetLenIPv4,
-		SubnetLenIPv6: conf.RatelimitSubnetLenIPv6,
+		Logger:         l.With(slogutil.KeyPrefix, "ratelimit"),
+		Ratelimit:      uint(conf.Ratelimit),
+		SubnetLenIPv4:  conf.RatelimitSubnetLenIPv4,
+		SubnetLenIPv6:  conf.RatelimitSubnetLenIPv6,
+		AllowlistAddrs: allowListAddrs,
 	}
 	if err = rlConf.Validate(); err != nil {
 		return nil, fmt.Errorf("invalid configuration: %w", err)
diff --git a/internal/dnsforward/config_internal_test.go b/internal/dnsforward/config_internal_test.go
index fbff06f4436..0f1991be08d 100644
--- a/internal/dnsforward/config_internal_test.go
+++ b/internal/dnsforward/config_internal_test.go
@@ -16,19 +16,19 @@ func TestAnyNameMatches(t *testing.T) {
 		dnsName string
 		want    bool
 	}{{
-		name:    "match",
+		name:    "match_host",
 		dnsName: "host1",
 		want:    true,
 	}, {
-		name:    "match",
+		name:    "match_host_with_subdomain",
 		dnsName: "a.host2",
 		want:    true,
 	}, {
-		name:    "match",
+		name:    "match_host_with_multiple_subdomains",
 		dnsName: "b.a.host2",
 		want:    true,
 	}, {
-		name:    "match",
+		name:    "match_ip",
 		dnsName: "1.2.3.4",
 		want:    true,
 	}, {
@@ -36,7 +36,7 @@ func TestAnyNameMatches(t *testing.T) {
 		dnsName: "1.2.3.256",
 		want:    false,
 	}, {
-		name:    "mismatch",
+		name:    "mismatch_host",
 		dnsName: "host2",
 		want:    false,
 	}, {
@@ -44,7 +44,7 @@ func TestAnyNameMatches(t *testing.T) {
 		dnsName: "",
 		want:    false,
 	}, {
-		name:    "mismatch",
+		name:    "mismatch_host_any_subdomain",
 		dnsName: "*.host2",
 		want:    false,
 	}}
diff --git a/internal/dnsforward/dnsforward_internal_test.go b/internal/dnsforward/dnsforward_internal_test.go
index fb10c1667db..c4877aeee11 100644
--- a/internal/dnsforward/dnsforward_internal_test.go
+++ b/internal/dnsforward/dnsforward_internal_test.go
@@ -1911,3 +1911,96 @@ func TestServer_Exchange(t *testing.T) {
 		assert.Empty(t, host)
 	})
 }
+
+func TestServer_ratelimit(t *testing.T) {
+	t.Parallel()
+
+	const (
+		attemptNum    = 3
+		clientTimeout = 300 * time.Millisecond
+	)
+
+	req := createGoogleATestMessage()
+	srvConf := ServerConfig{
+		UDPListenAddrs: []*net.UDPAddr{{}},
+		TCPListenAddrs: []*net.TCPAddr{{}},
+		TLSConf:        &TLSConfig{},
+		Config: Config{
+			UpstreamMode:           UpstreamModeLoadBalance,
+			EDNSClientSubnet:       &EDNSClientSubnet{Enabled: false},
+			ClientsContainer:       EmptyClientsContainer{},
+			RatelimitSubnetLenIPv4: netutil.IPv4BitLen,
+			RatelimitSubnetLenIPv6: netutil.IPv6BitLen,
+		},
+		ServePlainDNS: true,
+	}
+
+	testCases := []struct {
+		name      string
+		ratelimit uint32
+		whitelist []netip.Addr
+		dropNum   int
+	}{{
+		name:      "ratelimit_disabled",
+		ratelimit: 0,
+		dropNum:   0,
+	}, {
+		name:      "ratelimit_enabled",
+		ratelimit: 1,
+		dropNum:   2,
+	}, {
+		name:      "ratelimit_whitelisted",
+		ratelimit: 1,
+		whitelist: []netip.Addr{netutil.IPv4Localhost(), netip.MustParseAddr("::1")},
+		dropNum:   0,
+	}}
+
+	for _, tc := range testCases {
+		c := srvConf
+		c.Config.Ratelimit = tc.ratelimit
+		c.Config.RatelimitWhitelist = tc.whitelist
+
+		t.Run(tc.name, func(t *testing.T) {
+			t.Parallel()
+
+			filterConf := &filtering.Config{BlockingMode: filtering.BlockingModeDefault}
+			s := createTestServer(t, filterConf, c, testTLSManager)
+			s.conf.UpstreamConfig.Upstreams = []upstream.Upstream{newGoogleUpstream()}
+			startDeferStop(t, s)
+
+			addr := s.dnsProxy.Addr(proxy.ProtoUDP).String()
+			// TODO(m.kazantsev):  Use fake connections through client.Dial,
+			// instead of using real network connections.
+			client := &dns.Client{Net: "udp", Timeout: clientTimeout}
+			sendDNSRequests(t, client, req, attemptNum, tc.dropNum, addr)
+		})
+	}
+}
+
+// sendDNSRequests sends exactly attemptNum DNS requests and checks if the
+// expected number of requests are dropped according to the ratelimit.  client
+// must not be nil.
+func sendDNSRequests(
+	tb testing.TB,
+	client *dns.Client,
+	req *dns.Msg,
+	attemptNum int,
+	dropNum int,
+	addr string,
+) {
+	tb.Helper()
+
+	for i := range attemptNum {
+		reply, _, err := client.Exchange(req, addr)
+
+		if i >= attemptNum-dropNum {
+			assert.Error(tb, err, "request %d", i)
+
+			continue
+		}
+
+		require.NoErrorf(tb, err, "request %d", i)
+
+		assertGoogleAResponse(tb, reply)
+	}
+}