diff --git a/database.types.ts b/database.types.ts
index 9bda790f..16bccb3b 100644
--- a/database.types.ts
+++ b/database.types.ts
@@ -1605,6 +1605,77 @@ export type Database = {
           },
         ]
       }
+      profile_preferences: {
+        Row: {
+          area_unit: string | null
+          co2_unit: string | null
+          created_at: string
+          date_format: string | null
+          distance_unit: string | null
+          ec_unit: string | null
+          pressure_unit: string | null
+          rainfall_unit: string | null
+          soil_moisture_unit: string | null
+          temperature_unit: string | null
+          theme: string | null
+          time_format: string | null
+          timezone: string | null
+          updated_at: string
+          user_id: string
+          water_level_unit: string | null
+          weight_unit: string | null
+          wind_speed_unit: string | null
+        }
+        Insert: {
+          area_unit?: string | null
+          co2_unit?: string | null
+          created_at?: string
+          date_format?: string | null
+          distance_unit?: string | null
+          ec_unit?: string | null
+          pressure_unit?: string | null
+          rainfall_unit?: string | null
+          soil_moisture_unit?: string | null
+          temperature_unit?: string | null
+          theme?: string | null
+          time_format?: string | null
+          timezone?: string | null
+          updated_at?: string
+          user_id: string
+          water_level_unit?: string | null
+          weight_unit?: string | null
+          wind_speed_unit?: string | null
+        }
+        Update: {
+          area_unit?: string | null
+          co2_unit?: string | null
+          created_at?: string
+          date_format?: string | null
+          distance_unit?: string | null
+          ec_unit?: string | null
+          pressure_unit?: string | null
+          rainfall_unit?: string | null
+          soil_moisture_unit?: string | null
+          temperature_unit?: string | null
+          theme?: string | null
+          time_format?: string | null
+          timezone?: string | null
+          updated_at?: string
+          user_id?: string
+          water_level_unit?: string | null
+          weight_unit?: string | null
+          wind_speed_unit?: string | null
+        }
+        Relationships: [
+          {
+            foreignKeyName: "profile_preferences_user_id_fkey"
+            columns: ["user_id"]
+            isOneToOne: true
+            referencedRelation: "profiles"
+            referencedColumns: ["id"]
+          },
+        ]
+      }
       profiles: {
         Row: {
           accepted_agreements: boolean
diff --git a/docs/rule-trigger-history.md b/docs/rule-trigger-history.md
new file mode 100644
index 00000000..1592fddd
--- /dev/null
+++ b/docs/rule-trigger-history.md
@@ -0,0 +1,111 @@
+# Rule Trigger History
+
+The "View History" dialog on the Rules page shows, for one rule template, every time
+that rule **triggered** on a device and when it later **reset**. It answers: "When did
+this alarm fire, on which sensor, what value tripped it, and how long did it stay in
+alarm?"
+
+Each row in the log is one **episode**: a trigger event paired with its matching reset
+(or no reset yet, meaning the alarm is still active). A single rule template can watch
+many devices, so episodes from different devices are interleaved in one chronological
+list.
+
+## Where it lives
+
+| Layer | File |
+|---|---|
+| Dialog component | `src/routes/rules/ViewRuleAlertHistory.svelte` |
+| Invoked from | `src/routes/rules/+page.svelte` (row action: `<ViewRuleAlertHistory templateId={row.id} ruleName={row.name} />`) |
+| Frontend API call | `ApiService.getRuleTemplateHistory(id)` in `src/lib/api/api.service.ts` |
+| DTO | `RuleTriggerLogDto` in `src/lib/api/api.dtos.ts` |
+| Backend handler | `RulesNewService.getHistory()` in `api/src/v1/rules-new/rules-new.service.ts` |
+| Backend DTO | `api/src/v1/rules-new/dto/rule-trigger-log.dto.ts` |
+| Source table | Postgres `cw_rule_trigger_log` |
+| i18n keys | `rules_new_history_*` and `rules_new_view_history` in `messages/{en,ja}.json` |
+
+## Data model
+
+`cw_rule_trigger_log` (one row per episode), surfaced as `RuleTriggerLogDto`:
+
+| Field | Meaning |
+|---|---|
+| `id` | Episode id (used as the `{#each}` key) |
+| `devEui` / `deviceName` | The device the rule fired on; `deviceName` resolved server-side, may be null |
+| `templateId` | Owning rule template |
+| `triggeredAt` / `triggeredValue` | When the condition was first met, and the reading that met it |
+| `resetAt` / `resetValue` | When the condition cleared, and the reading at reset. **Null = still active** |
+| `createdAt` | Row creation timestamp (not displayed) |
+
+**Active vs resolved is derived purely from `resetAt`:** `resetAt == null` ⇒ active.
+
+## Data flow
+
+1. The history icon button calls `openHistory()`, which opens the dialog and, on first
+   open per `templateId`, calls `loadHistory()`. (`loadedFor` guards against re-fetching
+   the same template; loading from the click handler avoids a load-triggering `$effect`.)
+2. `getHistory()` on the backend:
+   - Reuses `findOne()` so a hidden/non-existent template returns 404, not an empty list.
+   - Restricts rows to devices the caller **can view** (`viewableDevices`), then resolves
+     `deviceName` from the managed-device list.
+   - Orders by `triggered_at DESC` and caps at **200 rows**.
+3. The component renders the returned episodes.
+
+## The UI (redesign, 2026-06)
+
+The list is a vertical **timeline per episode**:
+
+- **Card left border** encodes overall status — red (`--cw-danger-500`) for active,
+  green (`--cw-success-500`) for resolved.
+- **Card header**: device name + a status chip (`Active` danger / `Resolved` success).
+- **Timeline body**: a two-marker vertical track —
+  - top dot = `Triggered` (time + tripping value),
+  - connector line carrying the **duration** label in the middle,
+  - bottom dot = `Reset` (time + reset value) for resolved, or `Still active` for active.
+- **Duration**: resolved episodes show `Lasted <span>` using `formatDuration()`; active
+  episodes show `Active for` + a live-ticking `<CwDuration from={triggeredAt} />`.
+  `formatDuration()` deliberately mirrors CwDuration's compact format (`13h 30m`,
+  `2d 04h`, `45m 12s`) so static and live durations read identically.
+- **Summary chips** above the list: a danger "N active now" chip (when any are active)
+  and a "N events" total.
+- **Device filter**: a compact `CwDropdown` (shown only when the rule spans more than one
+  device) with an "All devices" option plus one per device, filtering `filteredEntries`.
+
+### Why it was changed
+
+The previous layout placed the trigger on the far left, the device name small in the
+top-right corner, and the reset/"Still active" on the far right with large empty gaps.
+Problems it had: the trigger→reset relationship and **how long the alarm lasted were not
+shown**; interleaved devices were hard to track because the device label was de-emphasized
+and there was no per-device filter; the content was flung to both edges because the dialog
+**inherits `text-align: right`** from the table action cell it mounts in (`.rule-history`
+now pins `text-align: left`); and it hard-coded hex color fallbacks (`#dc2626`, etc.),
+violating the [CWUI-first style contract](./cwui-first-style.md).
+
+The redesign makes each episode a self-contained timeline, surfaces duration, adds the
+per-device filter and an active-count summary, and uses only CWUI design tokens.
+
+## Conventions & gotchas
+
+- **No hard-coded colors.** All colors come from CWUI tokens (`--cw-danger-500`,
+  `--cw-success-500`, `--cw-text-muted`, `--cw-border-muted`, `--cw-bg-surface`, …). Local
+  CSS handles layout only, per the style contract.
+- **i18n.** Every visible string is a `m.rules_new_history_*` key in both `en.json` and
+  `ja.json`. Add new strings to both. `{duration}` is pre-formatted; `{count}` is stringified.
+- **200-row cap & ordering** are backend concerns (`getHistory`). The component does not
+  paginate; if history needs to grow beyond 200, add paging there first.
+- **Value units.** `triggeredValue`/`resetValue` are raw numbers — the rule's metric/unit
+  is not part of the DTO, so values render unit-less. If units are wanted, plumb them
+  through `RuleTriggerLogDto` from the rule template.
+- **Device visibility** is enforced server-side; the client trusts the returned set.
+
+## Verifying changes
+
+1. `pnpm check` (svelte-check) — must stay at 0 errors.
+2. Run the Svelte MCP `svelte-autofixer` on the component until it reports no issues.
+3. `pnpm dev`, open the Rules page, click the history icon on a multi-device rule
+   (e.g. a tunnel-freezer temperature rule). Confirm: active episodes show a live-ticking
+   "Active for" duration and a red border; resolved episodes show "Lasted …" and a green
+   border; the device filter narrows the list; the summary counts match.
+
+To exercise it against real data, query `cw_rule_trigger_log` for a template with a mix of
+active and reset rows (templates with `reset_at IS NULL` rows have active episodes).
diff --git a/messages/en.json b/messages/en.json
index 270f0f91..f34b805c 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -106,6 +106,52 @@
 	"error_unexpected_title": "Unexpected Error",
 	"error_unknown": "An unknown error occurred.",
 	"generic_error": "An unexpected error occurred. Please try again.",
+	"profile_identity_title": "Profile",
+	"profile_identity_subtitle": "The account details CropWatch uses across reports, notifications, and shared views.",
+	"profile_username_label": "Username",
+	"profile_full_name_label": "Full name",
+	"profile_employer_label": "Employer",
+	"profile_website_label": "Website",
+	"profile_website_invalid": "Enter a valid domain or URL.",
+	"profile_phone_label": "Phone number",
+	"profile_email_title": "Email address",
+	"profile_email_subtitle": "Changing your email sends a confirmation link to the new address. The change applies once you confirm.",
+	"profile_email_pending": "Confirmation sent. Check your inbox to complete the change.",
+	"profile_email_label": "Email",
+	"profile_email_send_action": "Send confirmation",
+	"profile_email_locked": "CropWatch email addresses (cropwatch.io / cropwatch.co.jp) can't be changed here. Contact an administrator if you need to update it.",
+	"profile_email_invalid": "Enter a valid email address.",
+	"profile_saved": "Profile updated.",
+	"profile_email_sent": "Confirmation email sent.",
+	"settings_regional_title": "Regional",
+	"settings_regional_subtitle": "Language, timezone, and calendar notation used across the app.",
+	"settings_timezone_label": "Home timezone",
+	"settings_timezone_placeholder": "Select a timezone",
+	"settings_appearance_title": "Appearance",
+	"settings_appearance_subtitle": "Theme and spatial notation for the interface.",
+	"settings_theme_label": "Theme mode",
+	"settings_theme_dark": "Dark",
+	"settings_theme_light": "Light",
+	"settings_theme_system": "System",
+	"settings_units_title": "Measurement units",
+	"settings_units_subtitle": "Choose the units you expect when reading sensor data.",
+	"settings_temperature_label": "Temperature",
+	"settings_ec_label": "Electrical conductivity",
+	"settings_water_level_label": "Water level",
+	"settings_weight_label": "Weight",
+	"settings_date_format_label": "Date format",
+	"settings_time_format_label": "Time format",
+	"settings_distance_label": "Distance",
+	"settings_area_label": "Area",
+	"settings_soil_moisture_label": "Soil moisture",
+	"settings_pressure_label": "Pressure",
+	"settings_rainfall_label": "Rainfall",
+	"settings_wind_speed_label": "Wind speed",
+	"settings_co2_label": "CO₂",
+	"settings_units_pending_note": "Additional units below are coming soon and are not saved yet.",
+	"settings_actions_title": "Save preferences",
+	"settings_reset": "Reset",
+	"settings_saved": "Preferences saved.",
 	"error_reset_and_login": "Reset & Sign In",
 	"offline_page_title": "CropWatch Offline",
 	"offline_page_description": "CropWatch is offline. Reconnect to load live device data, reports, and settings.",
@@ -400,6 +446,13 @@
 	"rules_new_history_loading": "Loading history…",
 	"rules_new_history_empty": "This rule template has not triggered yet.",
 	"rules_new_history_load_failed": "Unable to load rule history.",
+	"rules_new_history_status_active": "Active",
+	"rules_new_history_status_resolved": "Resolved",
+	"rules_new_history_duration_lasted": "Lasted {duration}",
+	"rules_new_history_duration_active": "Active for",
+	"rules_new_history_active_summary": "{count} active now",
+	"rules_new_history_total_events": "{count} events",
+	"rules_new_history_filter_all": "All devices",
 	"reports_page_title": "Reports - CropWatch",
 	"reports_weekly_reports": "Weekly Reports",
 	"reports_for_device": "For Device",
@@ -557,9 +610,11 @@
 	"reports_create_operator_range": "is between",
 	"reports_create_method_email": "Email",
 	"reports_create_method_sms": "Text message",
-	"reports_schedule_card_title": "Data Processing Schedules",
+	"reports_schedule_card_title": "(ADVANCED) Data Processing Schedules",
 	"reports_schedule_card_subtitle": "Configure what data to include or exclude based on time ranges.",
 	"reports_schedule_card_copy": "Add one or more time windows to control which readings are included in this report.",
+	"reports_schedule_card_description": "Data processing schedules control which sensor readings are counted in this report, based on the day of the week and the time of day. Each schedule is a time window plus a rule that either includes or excludes the readings that fall inside it. For example, include only operating hours (09:00 to 17:00, Monday to Friday), or exclude overnight periods when equipment is deliberately powered down. With no schedules, every reading in the reporting period is used. Each window is evaluated in the timezone you set and can cross midnight.",
+	"reports_schedule_card_warning": "If you do not know what this is, please reach out to support before adding any settings here. Incorrect schedules can silently remove data from your reports.",
 	"reports_schedule_empty": "No data processing schedules yet. Add one to filter report data by time.",
 	"reports_schedule_entry_heading": "Schedule {index}",
 	"reports_schedule_day_of_week": "Day of week",
@@ -715,10 +770,14 @@
 	"devices_save_note_success": "Note saved successfully.",
 	"devices_sensor_certificate_note": "Downloads the individual ISO17025 PDF returned by Sensirion Libellus for this serial number.",
 	"devices_sensor_certificate_requires_login": "You must be logged in to download sensor certificates.",
+	"devices_sensor_certificate_unsupported_device": "This device does not support Sensirion Libellus calibration certificates.",
 	"devices_sensor_certificates_subtitle": "Download the Libellus PDF certificate for each configured sensor serial.",
 	"devices_sensor_certificates_title": "Device Sensor Certificates",
 	"devices_sensor_one": "Sensor 1",
 	"devices_sensor_serial_chip": "Serial {serial}",
+	"devices_sensor_series_certificate_label": "SHT4x series certificate",
+	"devices_sensor_series_certificate_note": "Downloads the generic SHT4x-series ISO calibration certificate. This is not specific to a serial number.",
+	"devices_sensor_sht43_label": "SHT43",
 	"devices_sensor_two": "Sensor 2",
 	"devices_settings_page_title": "Device Settings | {devEui} | CropWatch",
 	"devices_settings_subtitle": "Update the cw_device name and group fields.",
@@ -1160,8 +1219,9 @@
 	"reports_new_cadence_month_label": "End of month",
 	"reports_new_cadence_month_description": "Generate a report at the end of each month.",
 	"reports_new_cadence_utc_offset": "UTC offset (hours)",
-	"reports_new_cadence_active_label": "Active cadence",
-	"reports_new_cadence_active_description": "Disable to pause report generation without removing the schedule.",
+	"reports_new_cadence_active_label_on": "Report generation (ON)",
+	"reports_new_cadence_active_label_off": "Report generation (OFF)",
+	"reports_new_cadence_active_description": "Turn off to pause this report. You can turn it back on anytime.",
 	"reports_new_created_success": "Report template \"{name}\" created successfully.",
 	"reports_new_updated_success": "Report template \"{name}\" updated successfully.",
 	"reports_new_deleted_success": "Report template \"{name}\" deleted successfully.",
diff --git a/messages/ja.json b/messages/ja.json
index dfaf5fea..932d725b 100644
--- a/messages/ja.json
+++ b/messages/ja.json
@@ -106,6 +106,52 @@
 	"error_unexpected_title": "予期しないエラー",
 	"error_unknown": "不明なエラーが発生しました。",
 	"generic_error": "予期しないエラーが発生しました。もう一度お試しください。",
+	"profile_identity_title": "プロフィール",
+	"profile_identity_subtitle": "レポート、通知、共有ビュー全体で使用されるアカウント情報です。",
+	"profile_username_label": "ユーザー名",
+	"profile_full_name_label": "氏名",
+	"profile_employer_label": "勤務先",
+	"profile_website_label": "ウェブサイト",
+	"profile_website_invalid": "有効なドメインまたはURLを入力してください。",
+	"profile_phone_label": "電話番号",
+	"profile_email_title": "メールアドレス",
+	"profile_email_subtitle": "メールアドレスを変更すると、新しいアドレスに確認リンクが送信されます。確認後に変更が適用されます。",
+	"profile_email_pending": "確認メールを送信しました。受信トレイを確認して変更を完了してください。",
+	"profile_email_label": "メール",
+	"profile_email_send_action": "確認メールを送信",
+	"profile_email_locked": "CropWatchのメールアドレス（cropwatch.io / cropwatch.co.jp）はここでは変更できません。変更が必要な場合は管理者にお問い合わせください。",
+	"profile_email_invalid": "有効なメールアドレスを入力してください。",
+	"profile_saved": "プロフィールを更新しました。",
+	"profile_email_sent": "確認メールを送信しました。",
+	"settings_regional_title": "地域設定",
+	"settings_regional_subtitle": "アプリ全体で使用される言語、タイムゾーン、カレンダー表記です。",
+	"settings_timezone_label": "ホームタイムゾーン",
+	"settings_timezone_placeholder": "タイムゾーンを選択",
+	"settings_appearance_title": "外観",
+	"settings_appearance_subtitle": "インターフェースのテーマと空間表記です。",
+	"settings_theme_label": "テーマモード",
+	"settings_theme_dark": "ダーク",
+	"settings_theme_light": "ライト",
+	"settings_theme_system": "システム",
+	"settings_units_title": "測定単位",
+	"settings_units_subtitle": "センサーデータを読む際に使用する単位を選択してください。",
+	"settings_temperature_label": "温度",
+	"settings_ec_label": "電気伝導率",
+	"settings_water_level_label": "水位",
+	"settings_weight_label": "重量",
+	"settings_date_format_label": "日付形式",
+	"settings_time_format_label": "時刻形式",
+	"settings_distance_label": "距離",
+	"settings_area_label": "面積",
+	"settings_soil_moisture_label": "土壌水分",
+	"settings_pressure_label": "気圧",
+	"settings_rainfall_label": "降水量",
+	"settings_wind_speed_label": "風速",
+	"settings_co2_label": "CO₂",
+	"settings_units_pending_note": "以下の追加単位は近日対応予定で、まだ保存されません。",
+	"settings_actions_title": "設定を保存",
+	"settings_reset": "リセット",
+	"settings_saved": "設定を保存しました。",
 	"error_reset_and_login": "リセットしてサインイン",
 	"offline_page_title": "CropWatch オフライン",
 	"offline_page_description": "CropWatch はオフラインです。ライブのデバイスデータ、レポート、設定を読み込むには再接続してください。",
@@ -400,6 +446,13 @@
 	"rules_new_history_loading": "履歴を読み込んでいます…",
 	"rules_new_history_empty": "このルールテンプレートはまだトリガーされていません。",
 	"rules_new_history_load_failed": "ルール履歴を読み込めませんでした。",
+	"rules_new_history_status_active": "発生中",
+	"rules_new_history_status_resolved": "解消",
+	"rules_new_history_duration_lasted": "継続 {duration}",
+	"rules_new_history_duration_active": "発生から",
+	"rules_new_history_active_summary": "現在 {count} 件発生中",
+	"rules_new_history_total_events": "{count} 件のイベント",
+	"rules_new_history_filter_all": "すべて",
 	"reports_page_title": "レポート - CropWatch",
 	"reports_weekly_reports": "週次レポート",
 	"reports_for_device": "対象デバイス",
@@ -557,9 +610,11 @@
 	"reports_create_operator_range": "の間",
 	"reports_create_method_email": "メール",
 	"reports_create_method_sms": "テキストメッセージ",
-	"reports_schedule_card_title": "データ処理スケジュール",
+	"reports_schedule_card_title": "(上級者向け) データ処理スケジュール",
 	"reports_schedule_card_subtitle": "時間範囲に基づいてレポートに含めるデータを設定します。",
 	"reports_schedule_card_copy": "このレポートに含む計測値を制御するため、1つ以上の時間ウィンドウを追加してください。",
+	"reports_schedule_card_description": "データ処理スケジュールでは、曜日と時間帯に基づいて、このレポートで集計するセンサー計測値を制御します。各スケジュールは時間ウィンドウと、その範囲内の計測値を「含める」または「除外する」ルールで構成されます。例えば、営業時間（月曜〜金曜の9:00〜17:00）のみを含めたり、設備を意図的に停止する夜間を除外したりできます。スケジュールが無い場合は、対象期間のすべての計測値が使用されます。各ウィンドウは指定したタイムゾーンで評価され、深夜をまたぐこともできます。",
+	"reports_schedule_card_warning": "この機能がよく分からない場合は、ここで設定を追加する前にサポートへご連絡ください。設定を誤ると、レポートから気づかないうちにデータが除外されることがあります。",
 	"reports_schedule_empty": "データ処理スケジュールはまだありません。追加するとレポートデータを時間でフィルタリングできます。",
 	"reports_schedule_entry_heading": "スケジュール {index}",
 	"reports_schedule_day_of_week": "曜日",
@@ -731,10 +786,14 @@
 	"devices_save_note_success": "メモを保存しました。",
 	"devices_sensor_certificate_note": "このシリアル番号に対して Sensirion Libellus が返す個別の ISO17025 PDF をダウンロードします。",
 	"devices_sensor_certificate_requires_login": "センサー証明書をダウンロードするにはログインが必要です。",
+	"devices_sensor_certificate_unsupported_device": "このデバイスは Sensirion Libellus の校正証明書に対応していません。",
 	"devices_sensor_certificates_subtitle": "設定された各センサーシリアルの Libellus PDF 証明書をダウンロードします。",
 	"devices_sensor_certificates_title": "デバイスセンサー証明書",
 	"devices_sensor_one": "センサー 1",
 	"devices_sensor_serial_chip": "シリアル {serial}",
+	"devices_sensor_series_certificate_label": "SHT4x シリーズ証明書",
+	"devices_sensor_series_certificate_note": "SHT4x シリーズ共通の ISO 校正証明書をダウンロードします。シリアル番号には依存しません。",
+	"devices_sensor_sht43_label": "SHT43",
 	"devices_sensor_two": "センサー 2",
 	"devices_settings_page_title": "デバイス設定 | {devEui} | CropWatch",
 	"devices_settings_subtitle": "cw_device の name と group フィールドを更新します。",
@@ -1160,8 +1219,9 @@
 	"reports_new_cadence_month_label": "月末",
 	"reports_new_cadence_month_description": "毎月末にレポートを生成します。",
 	"reports_new_cadence_utc_offset": "UTCオフセット（時間）",
-	"reports_new_cadence_active_label": "有効な頻度",
-	"reports_new_cadence_active_description": "スケジュールを削除せずにレポート生成を一時停止するには無効にします。",
+	"reports_new_cadence_active_label_on": "レポート生成 (ON)",
+	"reports_new_cadence_active_label_off": "レポート生成 (OFF)",
+	"reports_new_cadence_active_description": "オフにするとこのレポートを一時停止します。いつでもオンに戻せます。",
 	"reports_new_created_success": "レポートテンプレート「{name}」を作成しました。",
 	"reports_new_updated_success": "レポートテンプレート「{name}」を更新しました。",
 	"reports_new_deleted_success": "レポートテンプレート「{name}」を削除しました。",
diff --git a/package.json b/package.json
index cad062fc..2a808523 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
 		"@fontsource/fira-mono": "^5.2.7",
 		"@inlang/paraglide-js": "^2.19.0",
 		"@neoconfetti/svelte": "^2.2.2",
+		"@opentelemetry/api": "^1.9.1",
 		"@playwright/test": "^1.61.0",
 		"@sveltejs/adapter-vercel": "^6.3.3",
 		"@sveltejs/kit": "^2.65.2",
@@ -60,7 +61,7 @@
 		}
 	},
 	"dependencies": {
-		"@cropwatchdevelopment/cwui": "0.1.107",
+		"@cropwatchdevelopment/cwui": "0.1.110",
 		"@supabase/supabase-js": "^2.108.2"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2853a51d..c6dc62a5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,8 +13,8 @@ importers:
   .:
     dependencies:
       '@cropwatchdevelopment/cwui':
-        specifier: 0.1.107
-        version: 0.1.107(svelte@5.56.3(@typescript-eslint/types@8.61.1))
+        specifier: 0.1.110
+        version: 0.1.110(svelte@5.56.3(@typescript-eslint/types@8.61.1))
       '@supabase/supabase-js':
         specifier: ^2.108.2
         version: 2.108.2
@@ -34,15 +34,18 @@ importers:
       '@neoconfetti/svelte':
         specifier: ^2.2.2
         version: 2.2.2(svelte@5.56.3(@typescript-eslint/types@8.61.1))
+      '@opentelemetry/api':
+        specifier: ^1.9.1
+        version: 1.9.1
       '@playwright/test':
         specifier: ^1.61.0
         version: 1.61.0
       '@sveltejs/adapter-vercel':
         specifier: ^6.3.3
-        version: 6.3.3(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(rollup@4.62.0)
+        version: 6.3.3(@sveltejs/kit@2.65.2(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(rollup@4.62.0)
       '@sveltejs/kit':
         specifier: ^2.65.2
-        version: 2.65.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
+        version: 2.65.2(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^6.2.4
         version: 6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
@@ -114,7 +117,7 @@ importers:
         version: 1.0.0(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
       vitest:
         specifier: ^4.1.9
-        version: 4.1.9(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
+        version: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
       vitest-browser-svelte:
         specifier: ^2.1.1
         version: 2.1.1(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vitest@4.1.9)
@@ -124,8 +127,8 @@ packages:
   '@blazediff/core@1.9.1':
     resolution: {integrity: sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==}
 
-  '@cropwatchdevelopment/cwui@0.1.107':
-    resolution: {integrity: sha512-09HVLBZxM+Q4NBNfIgLEurWlt4NDnkV/NPwvLP3Bm0xWH+zUIVoC1MpRdn/2EsEAIYoOIz4tHzhVVIbfigsODA==, tarball: https://npm.pkg.github.com/download/@cropwatchdevelopment/cwui/0.1.107/f942b24e41a617c9a85ad5e27c0e9cefa45d7ae9}
+  '@cropwatchdevelopment/cwui@0.1.110':
+    resolution: {integrity: sha512-tH8fRf6yv0eYiKXusZEcB/XdO1QPBYF0E9OOPXq3xYIrhFyA4pDrMQX3SQBqNjx1+rFQX8spCxEeUSbJ81bCqg==, tarball: https://npm.pkg.github.com/download/@cropwatchdevelopment/cwui/0.1.110/365655baf3d097e75a2b7a3539c7c4f1369b7ca9}
     peerDependencies:
       svelte: ^5.0.0
 
@@ -412,6 +415,10 @@ packages:
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0 || ^5.0.0
 
+  '@opentelemetry/api@1.9.1':
+    resolution: {integrity: sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==}
+    engines: {node: '>=8.0.0'}
+
   '@playwright/test@1.61.0':
     resolution: {integrity: sha512-cKA5B6lpFEMyMGjxF54QihfYpB4FkEGH+qZhtArDEG+wezQAJY8Pq6C7T1SjWz+FFzt3TbyoXBQYk/0292TdJA==}
     engines: {node: '>=18'}
@@ -1980,7 +1987,7 @@ snapshots:
 
   '@blazediff/core@1.9.1': {}
 
-  '@cropwatchdevelopment/cwui@0.1.107(svelte@5.56.3(@typescript-eslint/types@8.61.1))':
+  '@cropwatchdevelopment/cwui@0.1.110(svelte@5.56.3(@typescript-eslint/types@8.61.1))':
     dependencies:
       svelte: 5.56.3(@typescript-eslint/types@8.61.1)
 
@@ -2218,6 +2225,8 @@ snapshots:
     dependencies:
       svelte: 5.56.3(@typescript-eslint/types@8.61.1)
 
+  '@opentelemetry/api@1.9.1': {}
+
   '@playwright/test@1.61.0':
     dependencies:
       playwright: 1.61.0
@@ -2373,9 +2382,9 @@ snapshots:
     dependencies:
       acorn: 8.17.0
 
-  '@sveltejs/adapter-vercel@6.3.3(@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(rollup@4.62.0)':
+  '@sveltejs/adapter-vercel@6.3.3(@sveltejs/kit@2.65.2(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(rollup@4.62.0)':
     dependencies:
-      '@sveltejs/kit': 2.65.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
+      '@sveltejs/kit': 2.65.2(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
       '@vercel/nft': 1.10.2(rollup@4.62.0)
       esbuild: 0.28.1
     transitivePeerDependencies:
@@ -2383,7 +2392,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@sveltejs/kit@2.65.2(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))':
+  '@sveltejs/kit@2.65.2(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.56.3(@typescript-eslint/types@8.61.1))(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)))(svelte@5.56.3(@typescript-eslint/types@8.61.1))(typescript@5.9.3)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))':
     dependencies:
       '@standard-schema/spec': 1.1.0
       '@sveltejs/acorn-typescript': 1.0.10(acorn@8.17.0)
@@ -2401,6 +2410,7 @@ snapshots:
       svelte: 5.56.3(@typescript-eslint/types@8.61.1)
       vite: 7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)
     optionalDependencies:
+      '@opentelemetry/api': 1.9.1
       typescript: 5.9.3
 
   '@sveltejs/load-config@0.1.1': {}
@@ -2639,7 +2649,7 @@ snapshots:
       '@vitest/mocker': 4.1.9(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
       playwright: 1.61.0
       tinyrainbow: 3.1.0
-      vitest: 4.1.9(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
     transitivePeerDependencies:
       - bufferutil
       - msw
@@ -2655,7 +2665,7 @@ snapshots:
       pngjs: 7.0.0
       sirv: 3.0.2
       tinyrainbow: 3.1.0
-      vitest: 4.1.9(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
       ws: 8.21.0
     transitivePeerDependencies:
       - bufferutil
@@ -3517,9 +3527,9 @@ snapshots:
     dependencies:
       '@testing-library/svelte-core': 1.0.0(svelte@5.56.3(@typescript-eslint/types@8.61.1))
       svelte: 5.56.3(@typescript-eslint/types@8.61.1)
-      vitest: 4.1.9(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
+      vitest: 4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
 
-  vitest@4.1.9(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)):
+  vitest@4.1.9(@opentelemetry/api@1.9.1)(@types/node@22.19.21)(@vitest/browser-playwright@4.1.9)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)):
     dependencies:
       '@vitest/expect': 4.1.9
       '@vitest/mocker': 4.1.9(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))
@@ -3542,6 +3552,7 @@ snapshots:
       vite: 7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
+      '@opentelemetry/api': 1.9.1
       '@types/node': 22.19.21
       '@vitest/browser-playwright': 4.1.9(playwright@1.61.0)(vite@7.3.5(@types/node@22.19.21)(jiti@2.7.0)(lightningcss@1.32.0))(vitest@4.1.9)
     transitivePeerDependencies:
diff --git a/src/lib/api/api.dtos.ts b/src/lib/api/api.dtos.ts
index f41c8d86..77a397a9 100644
--- a/src/lib/api/api.dtos.ts
+++ b/src/lib/api/api.dtos.ts
@@ -18,6 +18,80 @@ export interface LoginResponse {
 	[key: string]: unknown;
 }
 
+export interface ProfileDto {
+	id: string;
+	email: string | null;
+	username: string | null;
+	full_name: string | null;
+	website: string | null;
+	employer: string | null;
+	phone_number: string | null;
+	avatar_url?: string | null;
+	[key: string]: unknown;
+}
+
+export interface UpdateProfileRequest {
+	full_name?: string | null;
+	username?: string | null;
+	website?: string | null;
+	employer?: string | null;
+	phone_number?: string | null;
+}
+
+export interface UpdateEmailRequest {
+	email: string;
+}
+
+export interface EmailChangeResponse {
+	pending: boolean;
+	message?: string;
+}
+
+export type ThemePreference = 'light' | 'dark' | 'system';
+export type TemperatureUnit = 'celsius' | 'fahrenheit' | 'kelvin';
+export type WeightUnit = 'kg' | 'lb';
+export type EcUnit = 'ms_cm' | 'ds_cm' | 'us_cm';
+export type WaterLevelUnit = 'cm' | 'mm' | 'inch' | 'foot' | 'meter' | 'yard';
+
+export interface PreferencesDto {
+	user_id: string;
+	theme: ThemePreference | null;
+	temperature_unit: TemperatureUnit | null;
+	weight_unit: WeightUnit | null;
+	ec_unit: EcUnit | null;
+	water_level_unit: WaterLevelUnit | null;
+	timezone: string | null;
+	distance_unit: string | null;
+	area_unit: string | null;
+	soil_moisture_unit: string | null;
+	pressure_unit: string | null;
+	rainfall_unit: string | null;
+	wind_speed_unit: string | null;
+	co2_unit: string | null;
+	date_format: string | null;
+	time_format: string | null;
+	created_at?: string;
+	updated_at?: string;
+}
+
+export interface UpdatePreferencesRequest {
+	theme?: ThemePreference | null;
+	temperature_unit?: TemperatureUnit | null;
+	weight_unit?: WeightUnit | null;
+	ec_unit?: EcUnit | null;
+	water_level_unit?: WaterLevelUnit | null;
+	timezone?: string | null;
+	distance_unit?: string | null;
+	area_unit?: string | null;
+	soil_moisture_unit?: string | null;
+	pressure_unit?: string | null;
+	rainfall_unit?: string | null;
+	wind_speed_unit?: string | null;
+	co2_unit?: string | null;
+	date_format?: string | null;
+	time_format?: string | null;
+}
+
 export type DeviceOwnerDto = CwDeviceOwner;
 
 export type DeviceTypeDto = CwDeviceType;
diff --git a/src/lib/api/api.service.ts b/src/lib/api/api.service.ts
index ef29b880..538d85ba 100644
--- a/src/lib/api/api.service.ts
+++ b/src/lib/api/api.service.ts
@@ -17,6 +17,12 @@ import type {
 	LocationsQuery,
 	LoginRequest,
 	LoginResponse,
+	ProfileDto,
+	UpdateProfileRequest,
+	UpdateEmailRequest,
+	EmailChangeResponse,
+	PreferencesDto,
+	UpdatePreferencesRequest,
 	PaginatedResponse,
 	PaginationQuery,
 	ReportTemplateDto,
@@ -120,6 +126,8 @@ const UNAUTHORIZED_RETRY_DELAY_MS = 600;
 
 const AUTH_ENDPOINT = '/auth';
 const AUTH_USER_PROFILE_ENDPOINT = '/auth/user-profile';
+const AUTH_EMAIL_ENDPOINT = '/auth/email';
+const AUTH_PREFERENCES_ENDPOINT = '/auth/preferences';
 const AIR_ENDPOINT = '/air/{dev_eui}';
 const DEVICES_ENDPOINT = '/devices';
 const DEVICE_TYPES_ENDPOINT = '/devices/device-types';
@@ -484,8 +492,24 @@ export class ApiService {
 		return this.request<Record<string, unknown>>(AUTH_ENDPOINT, { method: 'GET' });
 	}
 
-	public getUserProfile(): Promise<Record<string, unknown>> {
-		return this.request<Record<string, unknown>>(AUTH_USER_PROFILE_ENDPOINT, { method: 'GET' });
+	public getUserProfile(): Promise<ProfileDto> {
+		return this.request<ProfileDto>(AUTH_USER_PROFILE_ENDPOINT, { method: 'GET' });
+	}
+
+	public updateProfile(payload: UpdateProfileRequest): Promise<ProfileDto> {
+		return this.request<ProfileDto>(AUTH_USER_PROFILE_ENDPOINT, { method: 'PATCH', body: payload });
+	}
+
+	public updateEmail(payload: UpdateEmailRequest): Promise<EmailChangeResponse> {
+		return this.request<EmailChangeResponse>(AUTH_EMAIL_ENDPOINT, { method: 'PATCH', body: payload });
+	}
+
+	public getPreferences(): Promise<PreferencesDto> {
+		return this.request<PreferencesDto>(AUTH_PREFERENCES_ENDPOINT, { method: 'GET' });
+	}
+
+	public updatePreferences(payload: UpdatePreferencesRequest): Promise<PreferencesDto> {
+		return this.request<PreferencesDto>(AUTH_PREFERENCES_ENDPOINT, { method: 'PATCH', body: payload });
 	}
 
 	public login(payload: LoginRequest): Promise<LoginResponse> {
diff --git a/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte b/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte
index 071d10fc..345cf34a 100644
--- a/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte
+++ b/src/lib/components/displays/TrafficDisplay/TrafficDisplay.svelte
@@ -1602,14 +1602,14 @@
 		color: inherit;
 	}
 
-	[data-theme='dark'] .traffic-display__metric-row {
+	:global([data-theme='dark']) .traffic-display__metric-row {
 		background: color-mix(in srgb, var(--cw-bg-surface-elevated) 80%, var(--cw-info-800) 20%);
 		border-color: color-mix(in srgb, var(--cw-info-400) 20%, var(--cw-border-default));
 		color: var(--cw-text-primary);
 	}
 
-	[data-theme='dark'] .traffic-display__weather-panel,
-	[data-theme='dark'] .traffic-display__calendar-weather-panel {
+	:global([data-theme='dark']) .traffic-display__weather-panel,
+	:global([data-theme='dark']) .traffic-display__calendar-weather-panel {
 		background:
 			radial-gradient(
 				130% 100% at 0% 0%,
@@ -1628,7 +1628,7 @@
 			0 8px 18px color-mix(in srgb, #050a16 36%, transparent);
 	}
 
-	[data-theme='dark'] .traffic-display__calendar-traffic-panel {
+	:global([data-theme='dark']) .traffic-display__calendar-traffic-panel {
 		background:
 			radial-gradient(
 				120% 100% at 100% 0%,
@@ -1647,8 +1647,8 @@
 			0 8px 18px color-mix(in srgb, #050a16 38%, transparent);
 	}
 
-	[data-theme='dark'] .traffic-display__weather-panel :global(.cw-chip),
-	[data-theme='dark'] .traffic-display__calendar-weather-panel :global(.cw-chip) {
+	:global([data-theme='dark']) .traffic-display__weather-panel :global(.cw-chip),
+	:global([data-theme='dark']) .traffic-display__calendar-weather-panel :global(.cw-chip) {
 		box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 6%, transparent);
 	}
 
diff --git a/src/lib/components/layout/AppPage.svelte b/src/lib/components/layout/AppPage.svelte
index 3b2f8b0b..00ddb935 100644
--- a/src/lib/components/layout/AppPage.svelte
+++ b/src/lib/components/layout/AppPage.svelte
@@ -6,6 +6,8 @@
 	interface Props {
 		children?: Snippet;
 		width?: AppPageWidth;
+		/** Vertical placement when the page content is shorter than the viewport. */
+		align?: 'top' | 'center';
 		class?: string;
 	}
 
@@ -16,10 +18,13 @@
 		full: 'none'
 	};
 
-	let { children, width = 'xl', class: className = '' }: Props = $props();
+	let { children, width = 'xl', align = 'top', class: className = '' }: Props = $props();
 </script>
 
-<section class={`app-page ${className}`} style={`--app-page-max-width:${maxWidthBySize[width]};`}>
+<section
+	class={`app-page ${align === 'center' ? 'app-page--center' : ''} ${className}`}
+	style={`--app-page-max-width:${maxWidthBySize[width]};`}
+>
 	<div class="app-page__shell">
 		{#if children}
 			{@render children()}
@@ -47,6 +52,13 @@
 		gap: var(--cw-space-4);
 	}
 
+	/* Center short content in the viewport; overflow-safe (tall content still
+	   scrolls from the top because the auto margins collapse when space runs out). */
+	.app-page--center .app-page__shell {
+		flex: 0 0 auto;
+		margin-block: auto;
+	}
+
 	@media (min-width: 640px) {
 		.app-page {
 			padding-block: var(--cw-space-2);
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 2d6f5eed..5957fc4d 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -92,9 +92,9 @@
 		<p class="text-center text-sm opacity-70">{description}</p>
 
 		<div class="mt-6 flex flex-wrap items-center justify-center gap-3">
-			<CwButton variant="primary" onclick={() => goto('/')}>{m.action_go_home()}</CwButton>
-			<CwButton variant="ghost" onclick={() => history.back()}>{m.action_go_back()}</CwButton>
-			<CwButton variant="danger" onclick={resetAndLogin}>{m.error_reset_and_login()}</CwButton>
+			<CwButton id="error-home-button" variant="primary" onclick={() => goto('/')}>{m.action_go_home()}</CwButton>
+			<CwButton id="error-back-button" variant="ghost" onclick={() => history.back()}>{m.action_go_back()}</CwButton>
+			<CwButton id="error-reset-login-button" variant="danger" onclick={resetAndLogin}>{m.error_reset_and_login()}</CwButton>
 		</div>
 	</CwCard>
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d3728436..0183f382 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -114,6 +114,7 @@
 					class="hidden w-full flex-row gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-start md:flex"
 				>
 					<CwSearchInput
+						id="dashboard-search"
 						bind:value={searchName}
 						placeholder={m.dashboard_search_placeholder()}
 						class="w-full min-w-0"
@@ -125,6 +126,7 @@
 					class="flex w-full flex-row px-2 gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end"
 				>
 					<CwButton
+						id="dashboard-table-view-button"
 						class="w-full md:w-auto"
 						size="sm"
 						variant={view === 'table' ? 'info' : 'secondary'}
@@ -134,6 +136,7 @@
 						{m.dashboard_table_view()}
 					</CwButton>
 					<CwButton
+						id="dashboard-cards-view-button"
 						class="w-full md:w-auto"
 						size="sm"
 						variant={view === 'cards' ? 'info' : 'secondary'}
@@ -147,6 +150,7 @@
 							class="hidden items-center justify-end gap-1 border-t border-slate-600/70 pt-2 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-2 md:flex"
 						>
 							<CwButton
+								id="dashboard-grid-layout-button"
 								class="px-2 text-xs"
 								size="sm"
 								variant={cardLayout === 'grid' ? 'info' : 'secondary'}
@@ -155,6 +159,7 @@
 								<Icon src={GRID_VIEW_ICON} alt={m.dashboard_grid_layout()} />
 							</CwButton>
 							<CwButton
+								id="dashboard-masonry-layout-button"
 								class="px-2 text-xs"
 								size="sm"
 								variant={cardLayout === 'masonry' ? 'info' : 'secondary'}
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index 9f05ea38..6593026e 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -2,15 +2,9 @@
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
-	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 	import { m } from '$lib/paraglide/messages.js';
 	import { buildLogoutPath } from '$lib/utils/auth-redirect';
-	import {
-		CwHeader,
-		CwProfileMenu,
-		CwThemePicker,
-		type CwSideNavMode
-	} from '@cropwatchdevelopment/cwui';
+	import { CwHeader, CwProfileMenu, type CwSideNavMode } from '@cropwatchdevelopment/cwui';
 	import CROPWATCH_LOGO from '$lib/images/cropwatch_static.svg';
 	import { defaultAppContext, getAppContext } from '$lib/appContext.svelte';
 
@@ -51,12 +45,6 @@
 	{/snippet}
 
 	{#snippet actions()}
-		<!-- <div class="app-header__actions-group">
-			<div class="app-header__utility-group">
-				<LanguageSwitcher compact />
-				<CwThemePicker />
-			</div>
-		</div> -->
 		<CwProfileMenu
 			class="app-header__profile-menu"
 			name={profileMenuName}
@@ -123,20 +111,6 @@
 		text-overflow: ellipsis;
 	}
 
-	.app-header__actions-group,
-	.app-header__utility-group {
-		display: flex;
-		align-items: center;
-		gap: var(--cw-space-2);
-		min-width: 0;
-	}
-
-	@media (max-width: 1023px) {
-		.app-header__utility-group {
-			display: none;
-		}
-	}
-
 	@media (max-width: 639px) {
 		:global(.app-header .cw-header__logo) {
 			display: flex;
diff --git a/src/routes/Sidebar.svelte b/src/routes/Sidebar.svelte
index fd163578..bd494084 100644
--- a/src/routes/Sidebar.svelte
+++ b/src/routes/Sidebar.svelte
@@ -277,15 +277,6 @@
 		border-bottom: 1px solid color-mix(in srgb, var(--cw-border-muted) 65%, transparent);
 	}
 
-	.app-sidebar__mobile-utilities-label {
-		margin: 0;
-		font-size: var(--cw-text-xs);
-		font-weight: var(--cw-font-semibold);
-		letter-spacing: 0.04em;
-		text-transform: uppercase;
-		color: var(--cw-text-secondary);
-	}
-
 	.app-sidebar__mobile-utilities-controls {
 		display: flex;
 		align-items: center;
diff --git a/src/routes/account/billing/+page.svelte b/src/routes/account/billing/+page.svelte
index e2c6db64..b370e4f5 100644
--- a/src/routes/account/billing/+page.svelte
+++ b/src/routes/account/billing/+page.svelte
@@ -21,11 +21,12 @@
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
+	const initial = (() => data)();
 	const toast = useCwToast();
 
 	let busy = $state(false);
 	let buyQty = $state('1');
-	let desiredSeats = $state(String(data.state.device.seats));
+	let desiredSeats = $state(String(initial.state.device.seats));
 
 	let cancelOpen = $state(false);
 	let assignOpen = $state(false);
@@ -312,7 +313,7 @@
 </svelte:head>
 
 <AppPage width="lg">
-	<CwButton variant="secondary" size="sm" onclick={() => goto(resolve('/'))}>
+	<CwButton id="account-billing-back-button" variant="secondary" size="sm" onclick={() => goto(resolve('/'))}>
 		&larr; {m.action_back()}
 	</CwButton>
 
@@ -356,13 +357,14 @@
 				</div>
 				<AppActionRow>
 					<CwButton
+						id="account-billing-base-cancel-button"
 						variant="ghost"
 						onclick={() => (cancelOpen = true)}
 						disabled={busy || base.cancelAtPeriodEnd}
 					>
 						{m.billing_base_cancel()}
 					</CwButton>
-					<CwButton variant="primary" onclick={openPortal} loading={busy}>
+					<CwButton id="account-billing-base-manage-button" variant="primary" onclick={openPortal} loading={busy}>
 						{m.billing_base_manage()}
 					</CwButton>
 				</AppActionRow>
@@ -371,7 +373,7 @@
 					<p>{m.billing_base_none_notice()}</p>
 				</AppNotice>
 				<AppActionRow>
-					<CwButton variant="primary" onclick={subscribeBase} loading={busy}>
+					<CwButton id="account-billing-base-subscribe-button" variant="primary" onclick={subscribeBase} loading={busy}>
 						{basePriceLabel
 							? `${m.billing_base_subscribe()} — ${basePriceLabel}${m.billing_per_month()}`
 							: m.billing_base_subscribe()}
@@ -397,12 +399,14 @@
 			{#if hasDeviceSub}
 				<div class="billing-seats">
 					<CwInput
+						id="account-billing-seats-input"
 						type="numeric"
 						label={m.billing_seats_label()}
 						bind:value={desiredSeats}
 						min={device.assignedCount}
 					/>
 					<CwButton
+						id="account-billing-seats-update-button"
 						variant="primary"
 						onclick={updateSeats}
 						loading={busy}
@@ -419,12 +423,13 @@
 			{:else}
 				<div class="billing-seats">
 					<CwInput
+						id="account-billing-buy-quantity-input"
 						type="numeric"
 						label={m.billing_buy_quantity()}
 						bind:value={buyQty}
 						min={1}
 					/>
-					<CwButton variant="primary" onclick={buyDevices} loading={busy}>
+					<CwButton id="account-billing-buy-devices-button" variant="primary" onclick={buyDevices} loading={busy}>
 						{m.billing_buy_action()}
 					</CwButton>
 				</div>
@@ -457,7 +462,7 @@
 							{#if license.devEui}
 								{@const href = deviceHref(license.devEui)}
 								{#if href}
-									<a class="license-link" {href}>{license.deviceName ?? license.devEui}</a>
+									<a id={`account-billing-license-${license.id}-device-link`} class="license-link" {href}>{license.deviceName ?? license.devEui}</a>
 								{:else}
 									<span>{license.deviceName ?? license.devEui}</span>
 								{/if}
@@ -476,7 +481,7 @@
 								{@const lname = deviceLocationName(license.devEui)}
 								{@const lhref = locationHref(license.devEui)}
 								{#if lname && lhref}
-									<a class="license-link license-link--muted" href={lhref}>{lname}</a>
+									<a id={`account-billing-license-${license.id}-location-link`} class="license-link license-link--muted" href={lhref}>{lname}</a>
 								{:else if lname}
 									<span class="billing-muted">{lname}</span>
 								{:else}
@@ -488,6 +493,7 @@
 						<span class="license-actions">
 							{#if license.devEui}
 								<CwButton
+									id={`account-billing-license-${license.id}-move-button`}
 									variant="secondary"
 									size="sm"
 									onclick={() => openMove(license.id)}
@@ -496,6 +502,7 @@
 									{m.billing_move()}
 								</CwButton>
 								<CwButton
+									id={`account-billing-license-${license.id}-unassign-button`}
 									variant="ghost"
 									size="sm"
 									onclick={() => unassign(license.id)}
@@ -505,6 +512,7 @@
 								</CwButton>
 							{:else}
 								<CwButton
+									id={`account-billing-license-${license.id}-assign-button`}
 									variant="primary"
 									size="sm"
 									onclick={() => openAssign(license.id)}
@@ -513,6 +521,7 @@
 									{m.billing_assign()}
 								</CwButton>
 								<CwButton
+									id={`account-billing-license-${license.id}-seat-cancel-button`}
 									variant="ghost"
 									size="sm"
 									onclick={() => openSeatCancel(license.id)}
@@ -529,7 +538,7 @@
 	</CwCard>
 
 	<AppActionRow>
-		<CwButton variant="ghost" onclick={openPortal} disabled={busy}>{m.billing_portal()}</CwButton>
+		<CwButton id="account-billing-portal-button" variant="ghost" onclick={openPortal} disabled={busy}>{m.billing_portal()}</CwButton>
 	</AppActionRow>
 </AppPage>
 
@@ -538,10 +547,10 @@
 		<p>{m.billing_cancel_body()}</p>
 	{/snippet}
 	{#snippet actions()}
-		<CwButton variant="ghost" onclick={() => (cancelOpen = false)} disabled={busy}>
+		<CwButton id="account-billing-cancel-subscription-dismiss-button" variant="ghost" onclick={() => (cancelOpen = false)} disabled={busy}>
 			{m.action_cancel()}
 		</CwButton>
-		<CwButton variant="danger" onclick={confirmCancel} loading={busy}>
+		<CwButton id="account-billing-cancel-subscription-confirm-button" variant="danger" onclick={confirmCancel} loading={busy}>
 			{m.billing_cancel_confirm()}
 		</CwButton>
 	{/snippet}
@@ -558,6 +567,7 @@
 			</AppNotice>
 		{:else}
 			<CwDropdown
+				id="account-billing-assign-device-select"
 				label={m.billing_assign_device_label()}
 				options={deviceOptions}
 				bind:value={selectedDevEui}
@@ -566,10 +576,11 @@
 		{/if}
 	{/snippet}
 	{#snippet actions()}
-		<CwButton variant="ghost" onclick={() => (assignOpen = false)} disabled={busy}>
+		<CwButton id="account-billing-assign-dismiss-button" variant="ghost" onclick={() => (assignOpen = false)} disabled={busy}>
 			{m.action_cancel()}
 		</CwButton>
 		<CwButton
+			id="account-billing-assign-confirm-button"
 			variant="primary"
 			onclick={confirmAssign}
 			loading={busy}
@@ -585,10 +596,10 @@
 		<p>{m.billing_seat_cancel_body()}</p>
 	{/snippet}
 	{#snippet actions()}
-		<CwButton variant="ghost" onclick={() => (seatCancelOpen = false)} disabled={busy}>
+		<CwButton id="account-billing-seat-cancel-dismiss-button" variant="ghost" onclick={() => (seatCancelOpen = false)} disabled={busy}>
 			{m.billing_seat_cancel_keep()}
 		</CwButton>
-		<CwButton variant="danger" onclick={confirmSeatCancel} loading={busy}>
+		<CwButton id="account-billing-seat-cancel-confirm-button" variant="danger" onclick={confirmSeatCancel} loading={busy}>
 			{m.billing_seat_cancel_confirm()}
 		</CwButton>
 	{/snippet}
diff --git a/src/routes/account/profile/+page.server.ts b/src/routes/account/profile/+page.server.ts
index 1e4ad365..3170974c 100644
--- a/src/routes/account/profile/+page.server.ts
+++ b/src/routes/account/profile/+page.server.ts
@@ -1,37 +1,64 @@
-import type { Profile } from '$lib/interfaces/profile.interface';
-import type { PageServerLoad } from './$types';
+import { fail } from '@sveltejs/kit';
+import { ApiService, ApiServiceError } from '$lib/api/api.service';
+import { readApiErrorMessage } from '$lib/api/api-error';
+import { m } from '$lib/paraglide/messages.js';
+import type { Actions, PageServerLoad } from './$types';
 
-const readString = (value: unknown): string => {
-	if (typeof value !== 'string') {
-		return '';
-	}
+const readString = (value: unknown): string => (typeof value === 'string' ? value.trim() : '');
 
-	return value.trim();
-};
+export const load: PageServerLoad = async ({ parent }) => {
+	const { profile, session } = await parent();
 
-const emailToUsername = (email: string): string => {
-	const [localPart = ''] = email.split('@');
-	return localPart.trim();
+	return {
+		profile: profile ?? null,
+		email: readString(profile?.email ?? session?.email) || null,
+		role: readString(session?.role) || null
+	};
 };
 
-export const load: PageServerLoad = async ({ locals }) => {
-	const session = locals.jwt ?? null;
-	const email = readString(session?.email);
-	const fullName = readString(session?.user_metadata?.full_name);
-	const usernameFromMetadata = readString(session?.user_metadata?.name);
-	const phoneNumber = readString(session?.phone);
-
-	const profile: Profile = {
-		username: usernameFromMetadata || emailToUsername(email),
-		full_name: fullName,
-		website: '',
-		employer: '',
-		phone_number: phoneNumber
-	};
+export const actions: Actions = {
+	updateProfile: async ({ request, locals, fetch }) => {
+		const authToken = locals.jwtString ?? null;
+		if (!authToken) return fail(401, { error: m.auth_not_authenticated() });
 
-	return {
-		email: email || null,
-		role: readString(session?.role) || null,
-		profile
-	};
+		const formData = await request.formData();
+		const fields = {
+			username: readString(formData.get('username')),
+			full_name: readString(formData.get('full_name')),
+			employer: readString(formData.get('employer')),
+			website: readString(formData.get('website')),
+			phone_number: readString(formData.get('phone_number'))
+		};
+
+		const api = new ApiService({ fetchFn: fetch, authToken });
+		try {
+			await api.updateProfile(fields);
+			return { success: true };
+		} catch (err) {
+			const payload = err instanceof ApiServiceError ? err.payload : err;
+			const status = err instanceof ApiServiceError ? err.status : 500;
+			return fail(status, { error: readApiErrorMessage(payload, m.generic_error()), ...fields });
+		}
+	},
+
+	updateEmail: async ({ request, locals, fetch }) => {
+		const authToken = locals.jwtString ?? null;
+		if (!authToken) return fail(401, { emailError: m.auth_not_authenticated() });
+
+		const formData = await request.formData();
+		const email = readString(formData.get('email'));
+		if (!email || !email.includes('@')) {
+			return fail(400, { emailError: m.profile_email_invalid(), email });
+		}
+
+		const api = new ApiService({ fetchFn: fetch, authToken });
+		try {
+			const result = await api.updateEmail({ email });
+			return { emailPending: true, emailMessage: result.message ?? null, email };
+		} catch (err) {
+			const payload = err instanceof ApiServiceError ? err.payload : err;
+			const status = err instanceof ApiServiceError ? err.status : 500;
+			return fail(status, { emailError: readApiErrorMessage(payload, m.generic_error()), email });
+		}
+	}
 };
diff --git a/src/routes/account/profile/+page.svelte b/src/routes/account/profile/+page.svelte
index d457743f..45ca8064 100644
--- a/src/routes/account/profile/+page.svelte
+++ b/src/routes/account/profile/+page.svelte
@@ -1,352 +1,206 @@
 <script lang="ts">
+	import { applyAction, enhance } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
 	import { AppActionRow, AppFormStack, AppNotice, AppPage } from '$lib/components/layout';
-	import { getAppContext } from '$lib/appContext.svelte';
-	import type { Profile } from '$lib/interfaces/profile.interface';
 	import { m } from '$lib/paraglide/messages.js';
 	import { CwButton, CwCard, CwChip, CwInput, useCwToast } from '@cropwatchdevelopment/cwui';
 	import type { PageProps } from './$types';
 
-	let { data }: PageProps = $props();
+	let { data, form }: PageProps = $props();
 
 	const toast = useCwToast();
-	const app = getAppContext();
+	const initial = (() => data)();
+	const initialProfile = initial.profile;
 
-	function getProfileSource(): Profile {
-		return (
-			data.profile ??
-			app.profile ?? {
-				username: '',
-				full_name: '',
-				website: '',
-				employer: '',
-				phone_number: ''
-			}
-		);
-	}
-
-	function getInitialProfile(): Profile {
-		const source = getProfileSource();
-		return {
-			username: source.username ?? '',
-			full_name: source.full_name ?? '',
-			website: source.website ?? '',
-			employer: source.employer ?? '',
-			phone_number: source.phone_number ?? ''
-		};
-	}
-
-	let username = $state(getInitialProfile().username);
-	let fullName = $state(getInitialProfile().full_name);
-	let website = $state(getInitialProfile().website);
-	let employer = $state(getInitialProfile().employer);
-	let phoneNumber = $state(getInitialProfile().phone_number);
+	let username = $state(initialProfile?.username ?? '');
+	let fullName = $state(initialProfile?.full_name ?? '');
+	let employer = $state(initialProfile?.employer ?? '');
+	let website = $state(initialProfile?.website ?? '');
+	let phoneNumber = $state(initialProfile?.phone_number ?? '');
+	let email = $state(initial.email ?? '');
 
-	const hasWebsiteError = $derived(website.trim().length > 0 && !isLikelyWebsite(website));
-	const hasErrors = $derived(hasWebsiteError);
-	const isDirty = $derived.by(() => {
-		const initialProfile = getInitialProfile();
-		return (
-			username !== initialProfile.username ||
-			fullName !== initialProfile.full_name ||
-			website !== initialProfile.website ||
-			employer !== initialProfile.employer ||
-			phoneNumber !== initialProfile.phone_number
-		);
-	});
-	const displayName = $derived(fullName || username || data.email || 'Your profile');
+	let savingProfile = $state(false);
+	let savingEmail = $state(false);
 
 	function isLikelyWebsite(value: string): boolean {
 		try {
 			const withProtocol = value.includes('://') ? value : `https://${value}`;
-			const url = new URL(withProtocol);
-			return url.hostname.includes('.');
+			return new URL(withProtocol).hostname.includes('.');
 		} catch {
 			return false;
 		}
 	}
 
-	function resetForm() {
-		const initialProfile = getInitialProfile();
-		username = initialProfile.username;
-		fullName = initialProfile.full_name;
-		website = initialProfile.website;
-		employer = initialProfile.employer;
-		phoneNumber = initialProfile.phone_number;
-	}
-
-	function handleSave() {
-		if (hasErrors) {
-			toast.add({
-				tone: 'danger',
-				message: 'Resolve the highlighted fields before wiring this page to the API.'
-			});
-			return;
-		}
-
-		if (!isDirty) {
-			toast.add({
-				tone: 'info',
-				message: 'No profile changes to save yet.'
-			});
-			return;
-		}
-
-		toast.add({
-			tone: 'info',
-			message: 'Profile save wiring is intentionally deferred until the API endpoint exists.'
-		});
-	}
+	const hasWebsiteError = $derived(website.trim().length > 0 && !isLikelyWebsite(website));
+	const emailChanged = $derived(email.trim().length > 0 && email.trim() !== (data.email ?? ''));
+
+	// CropWatch corporate accounts are locked to their email of record. This is a
+	// convenience guard only — the API enforces it authoritatively.
+	const RESTRICTED_EMAIL_DOMAINS = ['@cropwatch.io', '@cropwatch.co.jp'];
+	const emailLocked = RESTRICTED_EMAIL_DOMAINS.some((domain) =>
+		(initial.email ?? '').trim().toLowerCase().endsWith(domain)
+	);
 </script>
 
 <svelte:head>
 	<title>{m.nav_profile()} - CropWatch</title>
 </svelte:head>
 
-<AppPage width="lg" class="profile-page">
-	<div class="profile-page__shell">
-		<CwCard
-			title={m.nav_profile()}
-			subtitle="Keep the account details used across reports, notifications, and shared views current."
-			elevated
+<AppPage width="lg">
+	<CwButton variant="secondary" size="sm" onclick={() => goto(resolve('/'))}>
+		&larr; {m.action_back()}
+	</CwButton>
+
+	<CwCard title={m.profile_identity_title()} subtitle={m.profile_identity_subtitle()} elevated>
+		{#snippet actions()}
+			{#if data.role}
+				<CwChip label={data.role} tone="secondary" variant="outline" size="sm" />
+			{/if}
+		{/snippet}
+
+		<form
+			method="POST"
+			action="?/updateProfile"
+			use:enhance={() => {
+				savingProfile = true;
+				return async ({ result }) => {
+					savingProfile = false;
+					if (result.type === 'success') {
+						toast.add({ tone: 'success', message: m.profile_saved() });
+						await goto(resolve('/account/profile'), { invalidateAll: true });
+						return;
+					}
+					await applyAction(result);
+					if (result.type === 'failure' && typeof result.data?.error === 'string') {
+						toast.add({ tone: 'danger', message: result.data.error });
+					}
+				};
+			}}
 		>
-			{#snippet actions()}
-				<div class="profile-meta">
-					{#if data.email}
-						<CwChip label={data.email} tone="info" variant="soft" size="sm" />
-					{/if}
-					{#if data.role}
-						<CwChip label={data.role} tone="secondary" variant="outline" size="sm" />
-					{/if}
+			<AppFormStack padded>
+				{#if form?.error}
+					<AppNotice tone="danger">
+						<p>{form.error}</p>
+					</AppNotice>
+				{/if}
+
+				<CwInput
+					label={m.profile_username_label()}
+					name="username"
+					bind:value={username}
+					placeholder="cropwatch-kevin"
+					clearable
+				/>
+				<CwInput
+					label={m.profile_full_name_label()}
+					name="full_name"
+					bind:value={fullName}
+					placeholder="Kevin Smith"
+					clearable
+				/>
+				<CwInput
+					label={m.profile_employer_label()}
+					name="employer"
+					bind:value={employer}
+					placeholder="CropWatch LLC"
+					clearable
+				/>
+
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+					<CwInput
+						label={m.profile_website_label()}
+						name="website"
+						bind:value={website}
+						placeholder="https://cropwatch.io"
+						error={hasWebsiteError ? m.profile_website_invalid() : undefined}
+						clearable
+					/>
+					<CwInput
+						label={m.profile_phone_label()}
+						name="phone_number"
+						bind:value={phoneNumber}
+						placeholder="+1 555 123 4567"
+						clearable
+					/>
 				</div>
-			{/snippet}
 
+				<AppActionRow>
+					<CwButton
+						type="submit"
+						variant="primary"
+						loading={savingProfile}
+						disabled={hasWebsiteError}
+					>
+						{m.action_save_changes()}
+					</CwButton>
+				</AppActionRow>
+			</AppFormStack>
+		</form>
+	</CwCard>
+
+	<CwCard title={m.profile_email_title()} subtitle={m.profile_email_subtitle()} elevated>
+		<form
+			method="POST"
+			action="?/updateEmail"
+			use:enhance={({ cancel }) => {
+				if (emailLocked) {
+					cancel();
+					toast.add({ tone: 'danger', message: m.profile_email_locked() });
+					return;
+				}
+				savingEmail = true;
+				return async ({ result }) => {
+					savingEmail = false;
+					await applyAction(result);
+					if (result.type === 'success') {
+						toast.add({ tone: 'info', message: m.profile_email_sent() });
+					} else if (
+						result.type === 'failure' &&
+						typeof result.data?.emailError === 'string'
+					) {
+						toast.add({ tone: 'danger', message: result.data.emailError });
+					}
+				};
+			}}
+		>
 			<AppFormStack padded>
-				<div class="profile-summary">
-					<div class="profile-summary__copy">
-						<p class="profile-eyebrow">Account profile</p>
-						<h2>{displayName}</h2>
-						<p>
-							Use this page to shape how your identity appears anywhere CropWatch surfaces profile
-							data.
-						</p>
-					</div>
-
-					<div class="profile-highlights">
-						<div class="profile-highlight">
-							<span class="profile-highlight__label">Employer</span>
-							<strong class="profile-highlight__value">{employer || 'Add your company'}</strong>
-						</div>
-						<div class="profile-highlight">
-							<span class="profile-highlight__label">Website</span>
-							<strong class="profile-highlight__value">{website || 'Add your website'}</strong>
-						</div>
-						<div class="profile-highlight">
-							<span class="profile-highlight__label">Phone</span>
-							<strong class="profile-highlight__value"
-								>{phoneNumber || 'Add your phone number'}</strong
-							>
-						</div>
-					</div>
-				</div>
+				{#if emailLocked}
+					<AppNotice tone="danger">
+						<p>{m.profile_email_locked()}</p>
+					</AppNotice>
+				{/if}
+				{#if form?.emailPending}
+					<AppNotice tone="info" ariaLive="polite">
+						<p>{form.emailMessage ?? m.profile_email_pending()}</p>
+					</AppNotice>
+				{/if}
+				{#if form?.emailError}
+					<AppNotice tone="danger">
+						<p>{form.emailError}</p>
+					</AppNotice>
+				{/if}
+
+				<CwInput
+					label={m.profile_email_label()}
+					name="email"
+					type="email"
+					bind:value={email}
+					placeholder="you@example.com"
+					disabled={emailLocked}
+				/>
+
+				<AppActionRow>
+					<CwButton
+						type="submit"
+						variant="primary"
+						loading={savingEmail}
+						disabled={emailLocked || !emailChanged}
+					>
+						{m.profile_email_send_action()}
+					</CwButton>
+				</AppActionRow>
 			</AppFormStack>
-		</CwCard>
-
-		{#if hasWebsiteError}
-			<AppNotice tone="warning" title="Check the website field">
-				<p>Enter a valid domain or URL before saving this profile preview.</p>
-			</AppNotice>
-		{/if}
-
-		<form class="profile-form" onsubmit={(event) => event.preventDefault()}>
-			<div class="profile-grid">
-				<CwCard
-					title="Identity"
-					subtitle="The details teammates see first when CropWatch references your account."
-					elevated
-				>
-					<AppFormStack padded>
-						<CwInput
-							label="Username"
-							name="username"
-							bind:value={username}
-							placeholder="e.g. cropwatch-kevin"
-							clearable
-						/>
-
-						<CwInput
-							label="Full name"
-							name="full_name"
-							bind:value={fullName}
-							placeholder="e.g. Kevin Smith"
-							clearable
-						/>
-
-						<CwInput
-							label="Employer"
-							name="employer"
-							bind:value={employer}
-							placeholder="e.g. CropWatch LLC"
-							clearable
-						/>
-					</AppFormStack>
-				</CwCard>
-
-				<CwCard
-					title="Contact"
-					subtitle="Public-facing contact details associated with your profile."
-					elevated
-				>
-					<AppFormStack padded>
-						<CwInput
-							label="Website"
-							name="website"
-							bind:value={website}
-							placeholder="e.g. https://cropwatch.io"
-							clearable
-						/>
-
-						<CwInput
-							label="Phone number"
-							name="phone_number"
-							bind:value={phoneNumber}
-							placeholder="e.g. +1 555 123 4567"
-							clearable
-						/>
-					</AppFormStack>
-				</CwCard>
-			</div>
-
-			<CwCard
-				title="Preview and actions"
-				subtitle="This page still operates on local preview state until the profile API is wired."
-				elevated
-			>
-				<AppFormStack padded>
-					<div class="profile-chip-row">
-						{#if username}
-							<CwChip label={username} tone="secondary" variant="outline" />
-						{/if}
-						{#if employer}
-							<CwChip label={employer} tone="primary" variant="soft" />
-						{/if}
-						{#if website}
-							<CwChip label={website} tone="info" variant="soft" />
-						{/if}
-					</div>
-
-					<AppActionRow>
-						<CwButton type="button" variant="ghost" onclick={resetForm} disabled={!isDirty}>
-							Reset
-						</CwButton>
-						<CwButton
-							type="button"
-							variant="primary"
-							onclick={handleSave}
-							disabled={!isDirty || hasErrors}
-						>
-							Save profile
-						</CwButton>
-					</AppActionRow>
-				</AppFormStack>
-			</CwCard>
 		</form>
-	</div>
+	</CwCard>
 </AppPage>
-
-<style>
-	.profile-page__shell,
-	.profile-form {
-		display: grid;
-		gap: var(--cw-space-4);
-	}
-
-	.profile-meta,
-	.profile-chip-row {
-		display: flex;
-		flex-wrap: wrap;
-		gap: var(--cw-space-2);
-	}
-
-	.profile-meta {
-		justify-content: flex-end;
-	}
-
-	.profile-summary {
-		display: grid;
-		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
-		gap: var(--cw-space-4);
-		align-items: start;
-	}
-
-	.profile-summary__copy,
-	.profile-highlights {
-		display: grid;
-		gap: var(--cw-space-3);
-	}
-
-	.profile-eyebrow {
-		margin: 0;
-		font-size: var(--cw-text-xs);
-		font-weight: var(--cw-font-semibold);
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--cw-text-tertiary);
-	}
-
-	.profile-summary__copy h2,
-	.profile-summary__copy p {
-		margin: 0;
-	}
-
-	.profile-summary__copy h2 {
-		font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
-		line-height: 1.05;
-		color: var(--cw-text-primary);
-	}
-
-	.profile-summary__copy p {
-		font-size: var(--cw-text-sm);
-		line-height: 1.65;
-		color: var(--cw-text-secondary);
-	}
-
-	.profile-highlight {
-		display: grid;
-		gap: var(--cw-space-1);
-		padding: var(--cw-space-3);
-		border: 1px solid var(--cw-border-muted);
-		border-radius: var(--cw-radius-md);
-		background: var(--cw-bg-subtle);
-	}
-
-	.profile-highlight__label {
-		font-size: var(--cw-text-xs);
-		font-weight: var(--cw-font-medium);
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--cw-text-tertiary);
-	}
-
-	.profile-highlight__value {
-		font-size: var(--cw-text-sm);
-		font-weight: var(--cw-font-semibold);
-		color: var(--cw-text-primary);
-	}
-
-	.profile-grid {
-		display: grid;
-		grid-template-columns: repeat(2, minmax(0, 1fr));
-		gap: var(--cw-space-4);
-	}
-
-	@media (max-width: 767px) {
-		.profile-meta {
-			justify-content: flex-start;
-		}
-
-		.profile-summary,
-		.profile-grid {
-			grid-template-columns: 1fr;
-		}
-	}
-</style>
diff --git a/src/routes/auth/create-account/+page.svelte b/src/routes/auth/create-account/+page.svelte
index 1c926bd4..526c472c 100644
--- a/src/routes/auth/create-account/+page.svelte
+++ b/src/routes/auth/create-account/+page.svelte
@@ -92,6 +92,7 @@
 		<p class="auth-subtitle">
 			{m.auth_or_prefix()}
 			<a
+				id="create-account-sign-in-existing-link"
 				class="auth-link auth-link-button"
 				href={resolve('/auth/login')}
 				onclick={(event) => navigateWithRedirect(event, '/auth/login')}
@@ -101,6 +102,7 @@
 		</p>
 
 		<form
+			id="create-account-form"
 			method="POST"
 			class="auth-form"
 			use:enhance={async ({ formData, cancel }) => {
@@ -152,6 +154,7 @@
 				<label class="field-block">
 					<span class="field-label">{m.auth_first_name_label_required()}</span>
 					<CwInput
+						id="create-account-first-name-input"
 						bind:value={firstName}
 						class="auth-input"
 						name="firstName"
@@ -165,6 +168,7 @@
 				<label class="field-block">
 					<span class="field-label">{m.auth_last_name_label_required()}</span>
 					<CwInput
+						id="create-account-last-name-input"
 						bind:value={lastName}
 						class="auth-input"
 						name="lastName"
@@ -179,6 +183,7 @@
 			<label class="field-block">
 				<span class="field-label">{m.auth_email_label_required()}</span>
 				<CwInput
+					id="create-account-email-input"
 					bind:value={email}
 					class="auth-input"
 					name="email"
@@ -199,6 +204,7 @@
 			<label class="field-block">
 				<span class="field-label">{m.auth_company_name_label_required()}</span>
 				<CwInput
+					id="create-account-company-input"
 					bind:value={company}
 					class="auth-input"
 					name="company"
@@ -217,6 +223,7 @@
 			/>
 
 			<CwButton
+				id="create-account-submit-button"
 				class="auth-primary"
 				type="submit"
 				variant="primary"
@@ -230,6 +237,7 @@
 			</CwButton>
 
 			<a
+				id="create-account-sign-in-instead-link"
 				class="auth-button-link auth-button-link--secondary"
 				href={resolve('/auth/login')}
 				onclick={(event) => navigateWithRedirect(event, '/auth/login')}
diff --git a/src/routes/auth/create-account/CreateAccountConsentFields.svelte b/src/routes/auth/create-account/CreateAccountConsentFields.svelte
index c946db06..d61fd1d5 100644
--- a/src/routes/auth/create-account/CreateAccountConsentFields.svelte
+++ b/src/routes/auth/create-account/CreateAccountConsentFields.svelte
@@ -28,6 +28,7 @@
 
 	<label class="consent-item">
 		<input
+			id="create-account-consent-privacy-checkbox"
 			type="checkbox"
 			bind:checked={agreedPrivacy}
 			disabled={!visitedPrivacy}
@@ -36,6 +37,7 @@
 		<span>
 			{m.auth_agree_to()}
 			<a
+				id="create-account-consent-privacy-link"
 				href="https://www.cropwatch.io/legal/privacy-policy"
 				target="_blank"
 				rel="noopener noreferrer"
@@ -47,6 +49,7 @@
 
 	<label class="consent-item">
 		<input
+			id="create-account-consent-terms-checkbox"
 			type="checkbox"
 			bind:checked={agreedTerms}
 			disabled={!visitedTerms}
@@ -55,6 +58,7 @@
 		<span>
 			{m.auth_agree_to()}
 			<a
+				id="create-account-consent-terms-link"
 				href="https://www.cropwatch.io/legal/terms-of-service"
 				target="_blank"
 				rel="noopener noreferrer"
@@ -65,10 +69,11 @@
 	</label>
 
 	<label class="consent-item">
-		<input type="checkbox" bind:checked={agreedEula} disabled={!visitedEula} class="consent-checkbox" />
+		<input id="create-account-consent-eula-checkbox" type="checkbox" bind:checked={agreedEula} disabled={!visitedEula} class="consent-checkbox" />
 		<span>
 			{m.auth_agree_to()}
 			<a
+				id="create-account-consent-eula-link"
 				href="https://www.cropwatch.io/legal/EULA"
 				target="_blank"
 				rel="noopener noreferrer"
diff --git a/src/routes/auth/create-account/CreateAccountPasswordFields.svelte b/src/routes/auth/create-account/CreateAccountPasswordFields.svelte
index 6e642de3..79717775 100644
--- a/src/routes/auth/create-account/CreateAccountPasswordFields.svelte
+++ b/src/routes/auth/create-account/CreateAccountPasswordFields.svelte
@@ -37,6 +37,7 @@
 <label class="field-block">
 	<span class="field-label">{m.auth_password_label_required()}</span>
 	<CwInput
+		id="create-account-password-input"
 		value={password}
 		oninput={handlePasswordInput}
 		class="auth-input"
@@ -76,6 +77,7 @@
 <label class="field-block">
 	<span class="field-label">{m.auth_confirm_password_label_required()}</span>
 	<CwInput
+		id="create-account-password-confirm-input"
 		value={confirmPassword}
 		oninput={handleConfirmPasswordInput}
 		class="auth-input"
diff --git a/src/routes/auth/create-account/check-email/+page.svelte b/src/routes/auth/create-account/check-email/+page.svelte
index d96cd15d..930ae488 100644
--- a/src/routes/auth/create-account/check-email/+page.svelte
+++ b/src/routes/auth/create-account/check-email/+page.svelte
@@ -103,13 +103,17 @@
 				</div>
 			</div>
 			<p class="my-3 w-full text-center font-bold">{m.auth_check_email_not_there()}</p>
-			<a href="mailto:sayaka@cropwatch.io" rel="external" class="w-full text-center text-sm"
-				>{m.auth_check_email_contact_support()}</a
+			<a
+				id="create-account-check-email-contact-support-link"
+				href="mailto:sayaka@cropwatch.io"
+				rel="external"
+				class="w-full text-center text-sm">{m.auth_check_email_contact_support()}</a
 			>
 		</div>
 
 		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 		<a
+			id="create-account-check-email-sign-in-link"
 			class="auth-button-link auth-button-link--primary"
 			href={redirectPath
 				? `${resolve('/auth/login')}?redirect=${encodeURIComponent(redirectPath)}`
diff --git a/src/routes/auth/forgot-password/+page.svelte b/src/routes/auth/forgot-password/+page.svelte
index 568aec27..0032dd81 100644
--- a/src/routes/auth/forgot-password/+page.svelte
+++ b/src/routes/auth/forgot-password/+page.svelte
@@ -56,6 +56,7 @@
 			<p class="auth-subtitle">{m.auth_forgot_password_sent_body()}</p>
 
 			<a
+				id="forgot-password-sent-back-to-login-link"
 				class="auth-button-link auth-button-link--primary"
 				href={resolve('/auth/login')}
 				onclick={(event) => navigateWithRedirect(event, '/auth/login')}
@@ -68,6 +69,7 @@
 			<p class="auth-subtitle">{m.auth_forgot_password_subtitle()}</p>
 
 			<form
+				id="forgot-password-form"
 				method="POST"
 				action="?/forgotPassword"
 				class="auth-form"
@@ -104,6 +106,7 @@
 				<label class="field-block">
 					<span class="field-label">{m.auth_email_label()}</span>
 					<CwInput
+						id="forgot-password-email-input"
 						class="auth-input"
 						name="email"
 						type="email"
@@ -114,6 +117,7 @@
 				</label>
 
 				<CwButton
+					id="forgot-password-submit-button"
 					class="auth-primary"
 					type="submit"
 					variant="primary"
@@ -131,6 +135,7 @@
 
 				<div class="action-grid">
 					<a
+						id="forgot-password-back-to-login-link"
 						class="auth-button-link auth-button-link--secondary"
 						href={resolve('/auth/login')}
 						onclick={(event) => navigateWithRedirect(event, '/auth/login')}
@@ -140,6 +145,7 @@
 					</a>
 
 					<a
+						id="forgot-password-create-account-link"
 						class="auth-button-link auth-button-link--secondary"
 						href={resolve('/auth/create-account')}
 						onclick={(event) => navigateWithRedirect(event, '/auth/create-account')}
diff --git a/src/routes/auth/login/+page.svelte b/src/routes/auth/login/+page.svelte
index 95cf5727..eafcc649 100644
--- a/src/routes/auth/login/+page.svelte
+++ b/src/routes/auth/login/+page.svelte
@@ -61,6 +61,7 @@
 		<p class="auth-subtitle">{m.auth_login_subtitle()}</p>
 
 		<form
+			id="login-form"
 			method="POST"
 			class="auth-form"
 			use:enhance={async ({ formData, cancel }) => {
@@ -111,6 +112,7 @@
 			<label class="field-block">
 				<span class="field-label">{m.auth_email_label()}</span>
 				<CwInput
+					id="login-email-input"
 					bind:value={username}
 					class="auth-input"
 					name="email"
@@ -124,6 +126,7 @@
 			<label class="field-block">
 				<span class="field-label">{m.auth_password_label()}</span>
 				<CwInput
+					id="login-password-input"
 					bind:value={password}
 					onchange={() => passwordStrengthCheck(password)}
 					class="auth-input"
@@ -136,6 +139,7 @@
 			</label>
 			<span class="flex flex-row"></span>
 			<CwButton
+				id="login-submit-button"
 				class="auth-primary"
 				type="submit"
 				variant="primary"
@@ -151,6 +155,7 @@
 			<!-- eslint-disable svelte/no-navigation-without-resolve -->
 			<div class="action-grid">
 				<a
+					id="login-create-account-link"
 					class="auth-button-link auth-button-link--secondary"
 					href={redirectPath
 						? `${resolve('/auth/create-account')}?redirect=${encodeURIComponent(redirectPath)}`
@@ -160,6 +165,7 @@
 				</a>
 
 				<a
+					id="login-forgot-password-link"
 					class="auth-button-link auth-button-link--secondary"
 					href={redirectPath
 						? `${resolve('/auth/forgot-password')}?redirect=${encodeURIComponent(redirectPath)}`
diff --git a/src/routes/auth/update-password/+page.svelte b/src/routes/auth/update-password/+page.svelte
index 7462b7a9..0204a429 100644
--- a/src/routes/auth/update-password/+page.svelte
+++ b/src/routes/auth/update-password/+page.svelte
@@ -41,6 +41,7 @@
 		<p class="auth-subtitle">{m.auth_update_password_subtitle()}</p>
 
 		<form
+			id="update-password-form"
 			method="POST"
 			class="auth-form"
 			use:enhance={() => {
@@ -59,6 +60,7 @@
 			<label class="field-block">
 				<span class="field-label">{m.auth_password_label()}</span>
 				<CwInput
+					id="update-password-input"
 					class="auth-input"
 					name="password"
 					type="password"
@@ -85,6 +87,7 @@
 			<label class="field-block">
 				<span class="field-label">{m.auth_update_password_confirm_label()}</span>
 				<CwInput
+					id="update-password-confirm-input"
 					class="auth-input"
 					name="confirmPassword"
 					type="password"
@@ -102,6 +105,7 @@
 			{/if}
 
 			<CwButton
+				id="update-password-submit-button"
 				type="submit"
 				class="auth-primary"
 				fullWidth
@@ -112,7 +116,7 @@
 			</CwButton>
 		</form>
 
-		<a class="auth-link" href={resolve('/auth/login')}>
+		<a id="update-password-back-to-login-link" class="auth-link" href={resolve('/auth/login')}>
 			<Icon src={BACK_ICON} alt="" class="h-4 w-4" />
 			{m.auth_back_to_login()}
 		</a>
diff --git a/src/routes/gateways/+page.svelte b/src/routes/gateways/+page.svelte
index 510f1248..6c260113 100644
--- a/src/routes/gateways/+page.svelte
+++ b/src/routes/gateways/+page.svelte
@@ -46,12 +46,12 @@
 </svelte:head>
 
 <AppPage>
-	<CwButton variant="secondary" onclick={() => goto(backHref(page.url, resolve('/')))}>
+	<CwButton id="gateways-back-button" variant="secondary" onclick={() => goto(backHref(page.url, resolve('/')))}>
 		&larr; {m.action_back_to_dashboard()}
 	</CwButton>
 
 	<CwCard title={m.gateways_your_gateways()}>
-		<CwDataTable labels={cwDataTableLabels()} {columns} {loadData} {loading} rowKey="tableRowKey" class="w-full">
+		<CwDataTable id="gateways-table" labels={cwDataTableLabels()} {columns} {loadData} {loading} rowKey="tableRowKey" class="w-full">
 			{#snippet cell(row: GatewayTableRow, col: CwColumnDef<GatewayTableRow>, defaultValue: string)}
 				{#if col.key === 'is_online'}
 					{#if row.is_online}
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 78b2d806..49796e43 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -100,4 +100,4 @@ body {
 		max-width: calc(100vw - var(--app-shell-padding-inline-start) - var(--app-shell-padding-inline-end));
 		box-shadow: var(--cw-shadow-lg);
 	}
-}
+}
\ No newline at end of file
diff --git a/src/routes/locations/+page.svelte b/src/routes/locations/+page.svelte
index fa4b0a17..2866de96 100644
--- a/src/routes/locations/+page.svelte
+++ b/src/routes/locations/+page.svelte
@@ -74,12 +74,12 @@
 </script>
 
 <AppPage>
-	<CwButton variant="secondary" size="sm" onclick={() => goto(backHref(page.url, resolve('/')))}>
+	<CwButton id="locations-back-button" variant="secondary" size="sm" onclick={() => goto(backHref(page.url, resolve('/')))}>
 		&larr; {m.action_back_to_dashboard()}
 	</CwButton>
 
 	<CwCard title={m.locations_all_title()} elevated>
-		<CwDataTable labels={cwDataTableLabels()}
+		<CwDataTable id="locations-table" labels={cwDataTableLabels()}
 			{columns}
 			{loadData}
 			{loading}
@@ -90,13 +90,13 @@
 			rowActionsHeader={m.common_actions()}
 		>
 			{#snippet toolbarActions()}
-				<CwButton variant="primary" onclick={() => goto(resolve('/locations/create'))}>
+				<CwButton id="locations-add-button" variant="primary" onclick={() => goto(resolve('/locations/create'))}>
 					<Icon src={ADD_ICON} alt={m.locations_create_title()} />
 				</CwButton>
 			{/snippet}
 
 			{#snippet rowActions(row: LocationDto)}
-				<CwButton size="md" variant="info" onclick={() => handleViewLocation(row)}>
+				<CwButton id={`locations-row-${row.location_id}-view-button`} size="md" variant="info" onclick={() => handleViewLocation(row)}>
 					<Icon src={EYE_ICON} alt={m.action_view()} />
 				</CwButton>
 			{/snippet}
diff --git a/src/routes/locations/[location_id]/+page.svelte b/src/routes/locations/[location_id]/+page.svelte
index 8f0bfb41..676759fd 100644
--- a/src/routes/locations/[location_id]/+page.svelte
+++ b/src/routes/locations/[location_id]/+page.svelte
@@ -182,12 +182,12 @@
 </script>
 
 <AppPage>
-	<CwButton variant="secondary" size="sm" onclick={() => goto(backHref(page.url, resolve('/')))}>
+	<CwButton id="location-back-button" variant="secondary" size="sm" onclick={() => goto(backHref(page.url, resolve('/')))}>
 		&larr; {m.action_back_to_dashboard()}
 	</CwButton>
 
 	<CwCard title={m.locations_location_title({ name: locationLabel })} elevated>
-		<CwDataTable labels={cwDataTableLabels()}
+		<CwDataTable id="location-table" labels={cwDataTableLabels()}
 			{columns}
 			{loadData}
 			{loading}
@@ -200,6 +200,7 @@
 				<div class="flex flex-wrap gap-2">
 					{#if selectedLocationId}
 						<CwButton
+							id="location-add-device-button"
 							variant="primary"
 							onclick={() =>
 								goto(`/locations/${encodeURIComponent(+selectedLocationId)}/devices/create`)}
@@ -208,6 +209,7 @@
 							{m.devices_add_device()}
 						</CwButton>
 						<CwButton
+							id="location-settings-button"
 							variant="secondary"
 							onclick={() =>
 								goto(`/locations/${encodeURIComponent(+selectedLocationId)}/settings`)}
@@ -234,11 +236,12 @@
 
 			{#snippet rowActions(row: LocationDeviceRow)}
 				<div class="flex flex-row gap-2">
-					<CwButton size="md" variant="info" onclick={() => handleViewDevice(row)}>
+					<CwButton id={`location-row-${row.dev_eui}-view-button`} size="md" variant="info" onclick={() => handleViewDevice(row)}>
 						<Icon src={EYE_ICON} alt={m.action_view()} />
 					</CwButton>
 					{#if data.hasSettings}
 						<CwButton
+							id={`location-row-${row.dev_eui}-settings-button`}
 							size="md"
 							variant="secondary"
 							onclick={() => {
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte
index 78068e04..9c06baf0 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/+page.svelte
@@ -443,7 +443,7 @@
 				{m.devices_error_status_detail({ status: deviceErrorStatus })}
 			</p>
 			{#snippet actions()}
-				<CwButton variant="primary" onclick={() => (errorDialogOpen = false)}>
+				<CwButton id="device-error-close-button" variant="primary" onclick={() => (errorDialogOpen = false)}>
 					{m.action_close()}
 				</CwButton>
 			{/snippet}
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceDashboardHeader.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceDashboardHeader.svelte
index 6f0c9675..06f8f7a4 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceDashboardHeader.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceDashboardHeader.svelte
@@ -7,7 +7,7 @@
 	import SETTINGS_ICON from '$lib/images/icons/settings.svg';
 	import { m } from '$lib/paraglide/messages.js';
 	import { canManage, isAdmin } from '$lib/constants/permissions';
-	import { CwButton, CwCard, CwDuration, CwSpinner } from '@cropwatchdevelopment/cwui';
+	import { CwButton, CwCard, CwCopy, CwDuration, CwSpinner } from '@cropwatchdevelopment/cwui';
 	import CsvExportDialog from './dialogs/csvExportDialog.svelte';
 	import CsvTrafficExportDialog from './dialogs/csvTrafficExportDialog.svelte';
 	import type { RangeSelection, TimeRangeOptions } from './device-detail';
@@ -55,7 +55,7 @@
 	}
 </script>
 
-<CwButton variant="secondary" size="sm" disabled={!locationId} onclick={goBack}>
+<CwButton id="device-header-back-button" variant="secondary" size="sm" disabled={!locationId} onclick={goBack}>
 	&larr; {m.action_back()}
 </CwButton>
 
@@ -65,6 +65,7 @@
 	elevated
 >
 	{#snippet actions()}
+		<div>
 		<p class="text-md text-right" style="color: var(--cw-text-muted)">
 			{m.display_last_updated()}:
 			{#if lastUpdatedAt}
@@ -73,6 +74,8 @@
 				<span>{m.common_not_available()}</span>
 			{/if}
 		</p>
+		<p class="text-md text-right" style="color: var(--cw-text-muted)">Dev-Eui: {devEui} <CwCopy value={devEui} /></p>
+		</div>
 	{/snippet}
 
 	<div class="device-header">
@@ -80,6 +83,7 @@
 			{#if !isTrafficDevice}
 				{#each rangeOptions as range (range.value)}
 					<CwButton
+						id={`device-header-range-${range.value}-button`}
 						variant={activeRange === range.value ? 'primary' : 'secondary'}
 						size="sm"
 						disabled={controlsDisabled}
@@ -116,6 +120,7 @@
 
 			{#if isAdmin(permissionLevel)}
 				<CwButton
+					id="device-header-settings-button"
 					variant="secondary"
 					size="md"
 					disabled={!locationId || !devEui}
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceOwnerPermissionsCard.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceOwnerPermissionsCard.svelte
index f46efe89..86161255 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceOwnerPermissionsCard.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/DeviceOwnerPermissionsCard.svelte
@@ -98,6 +98,7 @@
 				{#if row.email}
 					<div class="permission-row">
 						<form
+							id={`device-owner-permissions-row-${row.key}-form`}
 							method="POST"
 							action="?/updateDeviceOwnerPermission"
 							class="permission-row__form"
@@ -119,9 +120,9 @@
 								};
 							}}
 						>
-							<input type="hidden" name="ownerKey" value={row.key} />
-							<input type="hidden" name="targetUserEmail" value={row.email} />
-							<input type="hidden" name="permissionLevel" value={row.permissionLevel} />
+							<input id={`device-owner-permissions-row-${row.key}-owner-key-input`} type="hidden" name="ownerKey" value={row.key} />
+							<input id={`device-owner-permissions-row-${row.key}-email-input`} type="hidden" name="targetUserEmail" value={row.email} />
+							<input id={`device-owner-permissions-row-${row.key}-permission-level-input`} type="hidden" name="permissionLevel" value={row.permissionLevel} />
 
 							<div class="permission-user flex items-center justify-center">
 								<p class="text-xl">{row.name} ({row.email})</p>
@@ -130,6 +131,7 @@
 							<div class="permission-edit">
 								<div class="field-stack">
 									<CwDropdown
+										id={`device-owner-permissions-row-${row.key}-permission-level-select`}
 										label={m.locations_permission_level()}
 										options={permissionOptions}
 										bind:value={
@@ -147,6 +149,7 @@
 								</div>
 
 								<CwButton
+									id={`device-owner-permissions-row-${row.key}-update-button`}
 									type="submit"
 									variant="primary"
 									loading={ownerSubmittingByKey[row.key] ?? false}
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/SensorCertificatesCard.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/SensorCertificatesCard.svelte
index ef0329af..251973ef 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/SensorCertificatesCard.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/SensorCertificatesCard.svelte
@@ -6,7 +6,7 @@
 	import { CwButton, CwCard, CwChip, CwSeparator } from '@cropwatchdevelopment/cwui';
 
 	type SensorCertificateRow = {
-		key: 'sensor' | 'sensor2';
+		key: 'sensor';
 		label: string;
 		serial: string;
 		product: string;
@@ -24,101 +24,88 @@
 	let sensorOneCertificate = $derived(
 		sensorCertificates.find((target) => target.key === 'sensor') ?? null
 	);
-	let sensorTwoCertificate = $derived(
-		sensorCertificates.find((target) => target.key === 'sensor2') ?? null
-	);
-	let hasSensorCertificates = $derived(Boolean(sensorOneCertificate || sensorTwoCertificate));
-	const sensorTwoCertificateDownloadPath = asset(
+	const seriesCertificateDownloadPath = asset(
 		'/files/Sensirion_Humidity_Sensors_SHTxx_Calibration_Certification.pdf'
 	);
 </script>
 
 <CwCard title={m.devices_sensor_certificates_title()} elevated>
-	{#if !hasSensorCertificates}
-		<p class="text-muted text-xs">{m.devices_no_sensor_serial()}</p>
-	{:else}
-		<div class="certificate-list">
-			{#if sensorOneCertificate}
-				<div class="certificate-item">
-					<div class="certificate-item__meta">
-						<div class="device-form__header">
-							<CwChip label={sensorOneCertificate.label} tone="info" variant="soft" />
-							<CwChip
-								label={m.devices_sensor_serial_chip({ serial: sensorOneCertificate.serial })}
-								tone="secondary"
-								variant="soft"
-							/>
-							{#if sensorOneCertificate.product}
-								<CwChip label={sensorOneCertificate.product} tone="secondary" variant="soft" />
-							{/if}
-						</div>
-
-						<p class="panel-note">{m.devices_sensor_certificate_note()}</p>
-
-						{#if sensorOneCertificate.downloadDisabledReason}
-							<p class="field-error">{sensorOneCertificate.downloadDisabledReason}</p>
+	<div class="certificate-list">
+		{#if sensorOneCertificate}
+			<div class="certificate-item">
+				<div class="certificate-item__meta">
+					<div class="device-form__header">
+						<CwChip label={sensorOneCertificate.label} tone="info" variant="soft" />
+						<CwChip
+							label={m.devices_sensor_serial_chip({ serial: sensorOneCertificate.serial })}
+							tone="secondary"
+							variant="soft"
+						/>
+						{#if sensorOneCertificate.product}
+							<CwChip label={sensorOneCertificate.product} tone="secondary" variant="soft" />
 						{/if}
 					</div>
 
-					<form
-						method="GET"
-						action={resolve(
-							'/locations/[location_id]/devices/[dev_eui]/settings/libellus-certificates/[sensor_key]',
-							{
-								location_id: locationId,
-								dev_eui: devEui,
-								sensor_key: sensorOneCertificate.key
-							}
-						)}
-						target="_blank"
-						class="certificate-download-form"
-					>
-						<CwButton
-							type="submit"
-							variant="primary"
-							size="sm"
-							disabled={Boolean(sensorOneCertificate.downloadDisabledReason)}
-						>
-							<Icon src={DOWNLOAD_ICON} />
-						</CwButton>
-					</form>
-				</div>
-			{/if}
+					<p class="panel-note">{m.devices_sensor_certificate_note()}</p>
 
-			{#if sensorOneCertificate && sensorTwoCertificate}
-				<CwSeparator spacing="0" />
-			{/if}
+					{#if sensorOneCertificate.downloadDisabledReason}
+						<p class="field-error">{sensorOneCertificate.downloadDisabledReason}</p>
+					{/if}
+				</div>
 
-			{#if sensorTwoCertificate}
-				<div class="certificate-item">
-					<div class="certificate-item__meta">
-						<div class="device-form__header">
-							<CwChip label={sensorTwoCertificate.label} tone="info" variant="soft" />
-							<CwChip
-								label={m.devices_sensor_serial_chip({ serial: sensorTwoCertificate.serial })}
-								tone="secondary"
-								variant="soft"
-							/>
-							{#if sensorTwoCertificate.product}
-								<CwChip label={sensorTwoCertificate.product} tone="secondary" variant="soft" />
-							{/if}
-						</div>
+				<form
+					id="device-certificates-sensor-form"
+					method="GET"
+					action={resolve(
+						'/locations/[location_id]/devices/[dev_eui]/settings/libellus-certificates/[sensor_key]',
+						{
+							location_id: locationId,
+							dev_eui: devEui,
+							sensor_key: sensorOneCertificate.key
+						}
+					)}
+					target="_blank"
+					class="certificate-download-form"
+				>
+					<CwButton
+						id="device-certificates-sensor-download-button"
+						type="submit"
+						variant="primary"
+						size="sm"
+						disabled={Boolean(sensorOneCertificate.downloadDisabledReason)}
+					>
+						<Icon src={DOWNLOAD_ICON} />
+					</CwButton>
+				</form>
+			</div>
 
-						<p class="panel-note">{m.devices_sensor_certificate_note()}</p>
-					</div>
+			<CwSeparator spacing="0" />
+		{/if}
 
-					<form
-						method="GET"
-						action={sensorTwoCertificateDownloadPath}
-						target="_blank"
-						class="certificate-download-form"
-					>
-						<CwButton type="submit" variant="primary" size="sm">
-							<Icon src={DOWNLOAD_ICON} />
-						</CwButton>
-					</form>
+		<div class="certificate-item">
+			<div class="certificate-item__meta">
+				<div class="device-form__header">
+					<CwChip
+						label={m.devices_sensor_series_certificate_label()}
+						tone="info"
+						variant="soft"
+					/>
 				</div>
-			{/if}
+
+				<p class="panel-note">{m.devices_sensor_series_certificate_note()}</p>
+			</div>
+
+			<form
+				id="device-certificates-series-form"
+				method="GET"
+				action={seriesCertificateDownloadPath}
+				target="_blank"
+				class="certificate-download-form"
+			>
+				<CwButton id="device-certificates-series-download-button" type="submit" variant="primary" size="sm">
+					<Icon src={DOWNLOAD_ICON} />
+				</CwButton>
+			</form>
 		</div>
-	{/if}
+	</div>
 </CwCard>
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/NotesReviewDialog.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/NotesReviewDialog.svelte
index d544a2eb..967d99b0 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/NotesReviewDialog.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/NotesReviewDialog.svelte
@@ -203,7 +203,7 @@
 	};
 </script>
 
-<CwButton onclick={openDialog} {disabled} variant="secondary" size="sm">
+<CwButton id="device-notes-review-open-button" onclick={openDialog} {disabled} variant="secondary" size="sm">
 	<Icon src={NOTE_ICON} alt={m.display_view_notes()} />
 	{m.display_view_notes()}
 </CwButton>
@@ -212,6 +212,7 @@
 	<div class="notes-review-dialog-content">
 		<div class="mb-4 flex flex-row items-center gap-4">
 			<CwSearchInput
+				id="device-notes-review-search"
 				bind:value={search}
 				placeholder={m.display_note_search_placeholder()}
 				class="w-full"
@@ -226,6 +227,7 @@
 				labels={cwDateTimeRangePickerLabels()}
 			/>
 			<CwSwitch
+				id="device-notes-review-show-notes-switch"
 				class="w-full"
 				label={m.display_note_show_only_dates_with_notes()}
 				bind:checked={showOnlyDatesWithNotes}
@@ -266,7 +268,7 @@
 										<p class="notes-review-dialog__note-body">{entry.note}</p>
 									</div>
 
-									<CwButton disabled>Delete</CwButton>
+									<CwButton id={`device-notes-review-row-${entry.id}-delete-button`} disabled>Delete</CwButton>
 								</div>
 							</article>
 						{/each}
@@ -291,7 +293,7 @@
 		</CwCalendarScroll>
 	</div>
 	{#snippet actions()}
-		<CwButton onclick={() => (open = false)} variant="secondary">
+		<CwButton id="device-notes-review-close-button" onclick={() => (open = false)} variant="secondary">
 			{m.action_close()}
 		</CwButton>
 	{/snippet}
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvExportDialog.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvExportDialog.svelte
index 68cb67ac..4f0ffa43 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvExportDialog.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvExportDialog.svelte
@@ -182,6 +182,7 @@
 </script>
 
 <CwButton
+	id="device-csv-export-open-button"
 	variant="secondary"
 	size="sm"
 	disabled={disabled || !authToken || !devEui}
@@ -218,8 +219,8 @@
 		{/if}
 	</div>
 	{#snippet actions()}
-		<CwButton variant="secondary" disabled={exporting} onclick={closeDialog}>Cancel</CwButton>
-		<CwButton variant="primary" loading={exporting} onclick={handleCsvDownload}>
+		<CwButton id="device-csv-export-cancel-button" variant="secondary" disabled={exporting} onclick={closeDialog}>Cancel</CwButton>
+		<CwButton id="device-csv-export-download-button" variant="primary" loading={exporting} onclick={handleCsvDownload}>
 			{m.action_download()} CSV
 		</CwButton>
 	{/snippet}
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvTrafficExportDialog.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvTrafficExportDialog.svelte
index 2a211e57..fbec9c7b 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvTrafficExportDialog.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/dialogs/csvTrafficExportDialog.svelte
@@ -103,6 +103,7 @@
 </script>
 
 <CwButton
+	id="device-csv-traffic-export-open-button"
 	variant="secondary"
 	size="sm"
 	disabled={disabled || !authToken || !devEui}
@@ -121,6 +122,7 @@
 >
 	<div class="csv-export-dialog">
 		<CwInput
+			id="device-csv-traffic-export-year-input"
 			label={m.devices_export_traffic_label_year()}
 			type="numeric"
 			bind:value={selectedYear}
@@ -130,6 +132,7 @@
 		/>
 
 		<CwInput
+			id="device-csv-traffic-export-month-input"
 			label={m.devices_export_traffic_label_month()}
 			type="numeric"
 			bind:value={selectedMonth}
@@ -143,11 +146,11 @@
 		{/if}
 	</div>
 	{#snippet actions()}
-		<CwButton variant="secondary" disabled={exporting} onclick={closeDialog}>
+		<CwButton id="device-csv-traffic-export-cancel-button" variant="secondary" disabled={exporting} onclick={closeDialog}>
 			<Icon src={NO_ICON} alt="" class="h-4 w-4" />
 			{m.action_cancel()}
 		</CwButton>
-		<CwButton variant="primary" loading={exporting} onclick={handleCsvDownload}>
+		<CwButton id="device-csv-traffic-export-download-button" variant="primary" loading={exporting} onclick={handleCsvDownload}>
 			<Icon src={DOWNLOAD_ICON} alt="" class="h-4 w-4" />
 			{m.action_download()} CSV
 		</CwButton>
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.server.ts b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.server.ts
index 354f0e80..448a3415 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.server.ts
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.server.ts
@@ -7,6 +7,7 @@ import type { PageServerLoad } from './$types';
 import {
 	buildLocationOwnerIdentityMap,
 	buildSensorCertificateRows,
+	deviceSupportsSensorCertificate,
 	normalizeDeviceOwners,
 	readDeviceFormValues,
 	readDeviceOwnerPermissionValues,
@@ -31,6 +32,7 @@ export const load: PageServerLoad = async ({ fetch, params, parent }) => {
 			ttiName: '',
 			deviceGroups: [] as string[],
 			sensorCertificates: [] as SensorCertificateRow[],
+			supportsSensorCertificates: false,
 			deviceOwners: [] as NormalizedDeviceOwner[]
 		};
 	}
@@ -57,6 +59,7 @@ export const load: PageServerLoad = async ({ fetch, params, parent }) => {
 		deviceGroups,
 		locations,
 		sensorCertificates: buildSensorCertificateRows(device),
+		supportsSensorCertificates: deviceSupportsSensorCertificate(device),
 		deviceOwners: normalizeDeviceOwners(device, locationOwnerIdentities)
 	};
 };
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.svelte b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.svelte
index 8a5d18ff..46423f60 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.svelte
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/+page.svelte
@@ -30,6 +30,7 @@
 	let ttiName = $derived(data.ttiName ?? '');
 	let location_id = $derived(String(data.location_id ?? ''));
 	let sensorCertificates = $derived(data.sensorCertificates ?? []);
+	let supportsSensorCertificates = $derived(data.supportsSensorCertificates ?? false);
 
 	let actionForm = $derived((form ?? null) as FormPayload);
 	let deviceForm = $derived(actionForm?.action === 'updateDevice' ? actionForm : null);
@@ -73,6 +74,7 @@
 
 <div class="device-settings-page">
 	<CwButton
+		id="device-settings-back-button"
 		variant="secondary"
 		size="sm"
 		onclick={() =>
@@ -86,6 +88,7 @@
 	>
 	<CwCard title={m.devices_settings_title()} elevated>
 		<form
+			id="device-settings-form"
 			method="POST"
 			action="?/updateDevice"
 			class="device-form"
@@ -129,6 +132,7 @@
 			<div class="panel-grid">
 				<div class="field-stack">
 					<CwInput
+						id="device-settings-name-input"
 						label={m.devices_device_name_label()}
 						name="name"
 						required
@@ -143,6 +147,7 @@
 
 				<div class="field-stack">
 					<CwInput
+						id="device-settings-group-input"
 						label={m.common_group()}
 						name="group"
 						required={false}
@@ -150,7 +155,7 @@
 						bind:value={deviceGroup}
 						error={deviceGroupError || undefined}
 					/>
-					<input type="hidden" name="group" value={deviceGroupValue} />
+					<input id="device-settings-group-hidden-input" type="hidden" name="group" value={deviceGroupValue} />
 					{#if deviceGroupError}
 						<p class="field-error">{deviceGroupError}</p>
 					{/if}
@@ -158,6 +163,7 @@
 
 				<div class="field-stack">
 					<CwInput
+						id="device-settings-tti-name-input"
 						label={m.devices_tti_device_id_label()}
 						name="tti_name"
 						required={false}
@@ -166,7 +172,7 @@
 						bind:value={ttiName}
 						error={ttiNameError || undefined}
 					/>
-					<input type="hidden" name="tti_name" value={ttiNameValue} />
+					<input id="device-settings-tti-name-hidden-input" type="hidden" name="tti_name" value={ttiNameValue} />
 					{#if ttiNameError}
 						<p class="field-error">{ttiNameError}</p>
 					{/if}
@@ -174,6 +180,7 @@
 
 				<div class="field-stack">
 					<CwDropdown
+						id="device-settings-location-select"
 						label={m.common_location()}
 						name="location_id"
 						options={[
@@ -186,7 +193,7 @@
 						bind:value={location_id}
 						error={locationError || undefined}
 					/>
-					<input type="hidden" name="location_id" bind:value={location_id} />
+					<input id="device-settings-location-hidden-input" type="hidden" name="location_id" bind:value={location_id} />
 					{#if locationError}
 						<p class="field-error">{locationError}</p>
 					{/if}
@@ -195,6 +202,7 @@
 
 			<div class="panel-actions">
 				<CwButton
+					id="device-settings-submit-button"
 					type="submit"
 					variant="primary"
 					loading={deviceSubmitting}
@@ -206,11 +214,13 @@
 		</form>
 	</CwCard>
 
-	<SensorCertificatesCard
-		devEui={data.devEui ?? ''}
-		locationId={location_id}
-		{sensorCertificates}
-	/>
+	{#if supportsSensorCertificates}
+		<SensorCertificatesCard
+			devEui={data.devEui ?? ''}
+			locationId={location_id}
+			{sensorCertificates}
+		/>
+	{/if}
 
 	<DeviceOwnerPermissionsCard owners={data.deviceOwners ?? []} form={actionForm} />
 </div>
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/device-settings.server.ts b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/device-settings.server.ts
index 881aeff8..04f5f8ab 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/device-settings.server.ts
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/device-settings.server.ts
@@ -40,7 +40,7 @@ export type NormalizedDeviceOwner = {
 };
 
 export type SensorCertificateRow = {
-	key: 'sensor' | 'sensor2';
+	key: 'sensor';
 	label: string;
 	serial: string;
 	product: string;
@@ -131,42 +131,41 @@ export function normalizeDeviceOwners(
 		);
 }
 
+// CropWatch air sensors carry two chips: an SHT40 and an SHT43. Only the SHT43 is
+// supported by the Sensirion Libellus calibration-certificate API, and its serial is
+// stored in sensor2_serial. The SHT40 (sensor1_serial) has no individual certificate.
+// This capability is exclusive to CropWatch-manufactured sensors.
+export function deviceSupportsSensorCertificate(device: DeviceDto | null): boolean {
+	return str(device?.cw_device_type?.manufacturer) === 'CropWatch';
+}
+
+export function getSht43Serial(device: DeviceDto | null): string {
+	if (!device) return '';
+	return str((device as Record<string, unknown>).sensor2_serial);
+}
+
 export function buildSensorCertificateRows(device: DeviceDto | null): SensorCertificateRow[] {
-	if (!device) return [];
+	if (!deviceSupportsSensorCertificate(device)) return [];
+
+	const serial = getSht43Serial(device);
+	if (!serial) return [];
 
-	const product = str(device.cw_device_type?.model);
 	const hasApiToken = str(env.PRIVATE_LIBELLUS_API_TOKEN).length > 0;
 	const hasBaseUrl = str(env.PRIVATE_LIBELLUS_BASE_URL).length > 0;
-	const record = device as Record<string, unknown>;
-	const rows = [
+
+	return [
 		{
 			key: 'sensor' as const,
-			label: m.devices_sensor_one(),
-			serial: str(record.sensor1_serial) || str(record.sensor_serial)
-		},
-		{
-			key: 'sensor2' as const,
-			label: m.devices_sensor_two(),
-			serial: str(record.sensor2_serial)
+			label: m.devices_sensor_sht43_label(),
+			serial,
+			product: str(device?.cw_device_type?.model),
+			downloadDisabledReason: !hasApiToken
+				? m.devices_libellus_api_token_missing()
+				: !hasBaseUrl
+					? m.devices_libellus_base_url_missing()
+					: null
 		}
 	];
-
-	return rows
-		.filter((row) => row.serial.length > 0)
-		.map((row) => ({
-			...row,
-			product,
-			downloadDisabledReason:
-				row.key !== 'sensor'
-					? null
-					: !hasApiToken
-						? m.devices_libellus_api_token_missing()
-						: !hasBaseUrl
-							? m.devices_libellus_base_url_missing()
-							: !product
-								? m.devices_libellus_product_name_missing()
-								: null
-		}));
 }
 
 export function readDeviceFormValues(formData: FormData): DeviceFormValues {
diff --git a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/libellus-certificates/[sensor_key]/+server.ts b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/libellus-certificates/[sensor_key]/+server.ts
index dac1038f..3935256d 100644
--- a/src/routes/locations/[location_id]/devices/[dev_eui]/settings/libellus-certificates/[sensor_key]/+server.ts
+++ b/src/routes/locations/[location_id]/devices/[dev_eui]/settings/libellus-certificates/[sensor_key]/+server.ts
@@ -1,24 +1,13 @@
 import { env } from '$env/dynamic/private';
 import { ApiService } from '$lib/api/api.service';
-import type { DeviceDto } from '$lib/api/api.dtos';
 import { m } from '$lib/paraglide/messages.js';
+import { deviceSupportsSensorCertificate, getSht43Serial } from '../../device-settings.server';
 import type { RequestHandler } from './$types';
 
 function readString(value: unknown): string {
 	return typeof value === 'string' ? value.trim() : '';
 }
 
-function getSensorSerial(device: DeviceDto, sensorKey: string): string {
-	const record = device as Record<string, unknown>;
-	return sensorKey === 'sensor2'
-		? readString(record.sensor2_serial)
-		: readString(record.sensor1_serial) || readString(record.sensor_serial);
-}
-
-function getProductName(device: DeviceDto): string {
-	return readString(device.cw_device_type?.model);
-}
-
 function getLibellusBaseUrl(): string {
 	const baseUrl = readString(env.PRIVATE_LIBELLUS_BASE_URL);
 	if (!baseUrl) return '';
@@ -31,6 +20,7 @@ async function readErrorMessage(response: Response): Promise<string> {
 		if (contentType.includes('application/json')) {
 			const payload = (await response.json()) as Record<string, unknown>;
 			return (
+				readString(payload.error) ||
 				readString(payload.detail) ||
 				readString(payload.message) ||
 				m.devices_libellus_request_failed()
@@ -54,7 +44,7 @@ export const GET: RequestHandler = async ({ fetch, locals, params, url }) => {
 		return new Response(m.devices_sensor_certificate_requires_login(), { status: 401 });
 	}
 
-	if (!devEui || (sensorKey !== 'sensor' && sensorKey !== 'sensor2')) {
+	if (!devEui || sensorKey !== 'sensor') {
 		return new Response(m.devices_invalid_certificate_target(), { status: 400 });
 	}
 
@@ -73,7 +63,11 @@ export const GET: RequestHandler = async ({ fetch, locals, params, url }) => {
 		return new Response(m.devices_not_found(), { status: 404 });
 	}
 
-	const sensorSerial = getSensorSerial(device, sensorKey);
+	if (!deviceSupportsSensorCertificate(device)) {
+		return new Response(m.devices_sensor_certificate_unsupported_device(), { status: 400 });
+	}
+
+	const sensorSerial = getSht43Serial(device);
 	if (!sensorSerial) {
 		return new Response(m.devices_no_sensor_serial_configured(), { status: 404 });
 	}
diff --git a/src/routes/locations/[location_id]/devices/create/+page.svelte b/src/routes/locations/[location_id]/devices/create/+page.svelte
index ef149ea7..40e6cd1b 100644
--- a/src/routes/locations/[location_id]/devices/create/+page.svelte
+++ b/src/routes/locations/[location_id]/devices/create/+page.svelte
@@ -126,6 +126,7 @@
 
 <AppPage width="lg">
 	<CwButton
+		id="device-create-back-button"
 		variant="secondary"
 		size="sm"
 		onclick={() =>
@@ -136,6 +137,7 @@
 
 	<CwCard title={m.devices_create_page_title()} elevated>
 		<form
+			id="device-create-form"
 			method="POST"
 			use:enhance={() => {
 				submitting = true;
@@ -169,11 +171,12 @@
 					</AppNotice>
 				{/if}
 
-				<input type="hidden" name="location_id" value={fields.location_id} />
+				<input id="device-create-location-id-input" type="hidden" name="location_id" value={fields.location_id} />
 
 				<!-- Basic info -->
 				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
 					<CwInput
+						id="device-create-dev-eui-input"
 						name="dev_eui"
 						type="devEui"
 						label={m.devices_dev_eui_label()}
@@ -184,6 +187,7 @@
 					/>
 
 					<CwInput
+						id="device-create-name-input"
 						name="name"
 						label={m.devices_device_name_label()}
 						required
@@ -192,6 +196,7 @@
 					/>
 
 					<CwDropdown
+						id="device-create-type-select"
 						name="type"
 						label={m.devices_device_type_label()}
 						required
@@ -201,6 +206,7 @@
 					/>
 
 					<CwInput
+						id="device-create-group-input"
 						name="group"
 						label={m.common_group()}
 						placeholder={m.devices_group_placeholder()}
@@ -208,6 +214,7 @@
 					/>
 
 					<CwInput
+						id="device-create-tti-name-input"
 						name="tti_name"
 						label={m.devices_tti_device_id_label()}
 						maxlength={TTI_DEVICE_ID_MAX_LENGTH}
@@ -215,7 +222,7 @@
 						bind:value={fields.tti_name}
 					/>
 
-					<input type="hidden" name="upload_interval" />
+					<input id="device-create-upload-interval-input" type="hidden" name="upload_interval" />
 				</div>
 
 				<!-- Deployment -->
@@ -224,6 +231,7 @@
 
 				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
 					<CwInput
+						id="device-create-lat-input"
 						name="lat"
 						type="numeric"
 						label={m.locations_latitude_optional()}
@@ -232,6 +240,7 @@
 					/>
 
 					<CwInput
+						id="device-create-long-input"
 						name="long"
 						type="numeric"
 						label={m.locations_longitude_optional()}
@@ -255,6 +264,7 @@
 
 				<AppActionRow>
 					<CwButton
+						id="device-create-cancel-button"
 						type="button"
 						variant="ghost"
 						onclick={() =>
@@ -262,7 +272,7 @@
 					>
 						{m.action_cancel()}
 					</CwButton>
-					<CwButton type="submit" variant="primary" loading={submitting}>
+					<CwButton id="device-create-submit-button" type="submit" variant="primary" loading={submitting}>
 						{m.devices_create_submit()}
 					</CwButton>
 				</AppActionRow>
diff --git a/src/routes/locations/[location_id]/settings/+page.svelte b/src/routes/locations/[location_id]/settings/+page.svelte
index a3a29dd5..441ff1a2 100644
--- a/src/routes/locations/[location_id]/settings/+page.svelte
+++ b/src/routes/locations/[location_id]/settings/+page.svelte
@@ -17,7 +17,7 @@
 
 <AppPage>
 	<CwButton
-		id="back-to-location-button"
+		id="location-settings-back-button"
 		variant="secondary"
 		size="sm"
 		onclick={() => goto(`/locations/${data.locationId}`)}
diff --git a/src/routes/locations/[location_id]/settings/DeletePermissionDialog.svelte b/src/routes/locations/[location_id]/settings/DeletePermissionDialog.svelte
index f8c4f695..a77c4b0e 100644
--- a/src/routes/locations/[location_id]/settings/DeletePermissionDialog.svelte
+++ b/src/routes/locations/[location_id]/settings/DeletePermissionDialog.svelte
@@ -77,11 +77,13 @@
 	<p>{m.locations_confirm_delete_permission_body({ email: selectedRow?.email ?? '' })}</p>
 	{#snippet actions()}
 		<CwButton
+			id="location-delete-permission-cancel-button"
 			variant="primary"
 			disabled={deleting}
 			onclick={() => (openDeletePermissionDialog = false)}>{m.action_cancel()}</CwButton
 		>
 		<CwButton
+			id="location-delete-permission-confirm-button"
 			variant="danger"
 			loading={deleting}
 			disabled={deleting}
diff --git a/src/routes/locations/[location_id]/settings/LocationEditPermissions.svelte b/src/routes/locations/[location_id]/settings/LocationEditPermissions.svelte
index d010d683..b523624a 100644
--- a/src/routes/locations/[location_id]/settings/LocationEditPermissions.svelte
+++ b/src/routes/locations/[location_id]/settings/LocationEditPermissions.svelte
@@ -67,7 +67,7 @@
 </script>
 
 {#key permissionsKey}
-	<CwDataTable labels={cwDataTableLabels()}
+	<CwDataTable id="location-edit-permissions-table" labels={cwDataTableLabels()}
 		{loadData}
 		rowKey="id"
 		rowActionsHeader="Actions"
@@ -82,6 +82,7 @@
 			{#if col.key === 'permission_level'}
 				{#if editingPermissionId === row.id}
 					<CwDropdown
+						id={`location-edit-permissions-row-${row.id}-level-select`}
 						options={getPermissionLevelOptions()}
 						bind:value={row.permission_level}
 						placeholder={m.locations_choose_permission_level()}
@@ -97,12 +98,14 @@
 			<span class="flex flex-row gap-2">
 				{#if editingPermissionId === row.id}
 					<CwButton
+						id={`location-edit-permissions-row-${row.id}-save-button`}
 						variant="primary"
 						onclick={() => {
 							savePermissionLevelUpdate(row);
 						}}>{m.action_save_changes()}</CwButton
 					>
 					<CwButton
+						id={`location-edit-permissions-row-${row.id}-delete-button`}
 						variant="danger"
 						onclick={() => {
 							selectedRow = row;
@@ -110,6 +113,7 @@
 						}}>{m.action_delete()}</CwButton
 					>
 					<CwButton
+						id={`location-edit-permissions-row-${row.id}-cancel-button`}
 						variant="primary"
 						onclick={() => {
 							selectedRow = null;
@@ -118,6 +122,7 @@
 					>
 				{:else}
 					<CwButton
+						id={`location-edit-permissions-row-${row.id}-edit-button`}
 						variant="primary"
 						onclick={() => {
 							editingPermissionId = row.id;
diff --git a/src/routes/locations/[location_id]/settings/LocationPermissions.svelte b/src/routes/locations/[location_id]/settings/LocationPermissions.svelte
index 20bd3280..ec8899d6 100644
--- a/src/routes/locations/[location_id]/settings/LocationPermissions.svelte
+++ b/src/routes/locations/[location_id]/settings/LocationPermissions.svelte
@@ -52,6 +52,7 @@
 		elevated
 	>
 		<form
+			id="location-permissions-form"
 			method="POST"
 			action="?/addPermission"
 			use:enhance={() => {
@@ -78,6 +79,7 @@
 			class="permissions-form"
 		>
 			<CwInput
+				id="location-permissions-email-input"
 				name="newUserEmail"
 				type="email"
 				label={m.auth_email_label()}
@@ -86,6 +88,7 @@
 				bind:value={newUserEmail}
 			/>
 			<CwDropdown
+				id="location-permissions-level-select"
 				name="permission_level"
 				label={m.locations_permission_level()}
 				options={permissions.map((p) => ({
@@ -96,14 +99,16 @@
 			/>
 
 			<CwSwitch
+				id="location-permissions-apply-all-switch"
 				checked={applyToAllDevices}
 				label={m.locations_apply_to_all_devices()}
 				onchange={(checked) => (applyToAllDevices = checked)}
 			/>
-			<input type="hidden" name="applyToAllDevices" value={applyToAllDevices ? 'true' : 'false'} />
+			<input id="location-permissions-apply-all-input" type="hidden" name="applyToAllDevices" value={applyToAllDevices ? 'true' : 'false'} />
 
 			<div class="permissions-form__actions">
 				<CwButton
+					id="location-permissions-add-button"
 					type="submit"
 					variant="primary"
 					loading={submitting}
diff --git a/src/routes/locations/[location_id]/settings/LocationUpdate.svelte b/src/routes/locations/[location_id]/settings/LocationUpdate.svelte
index 32da1670..7e455b70 100644
--- a/src/routes/locations/[location_id]/settings/LocationUpdate.svelte
+++ b/src/routes/locations/[location_id]/settings/LocationUpdate.svelte
@@ -39,6 +39,7 @@
 <div class="settings-page">
 	<CwCard title={m.locations_settings_title()} elevated>
 		<form
+			id="location-update-form"
 			method="POST"
 			action="?/updateLocationName"
 			use:enhance={({ cancel }) => {
@@ -70,6 +71,7 @@
 			}}
 		>
 			<CwInput
+				id="location-update-name-input"
 				name="locationName"
 				type="text"
 				label={m.locations_location_name()}
@@ -79,6 +81,7 @@
 				class="mb-4"
 			/>
 			<CwInput
+				id="location-update-group-input"
 				name="group"
 				type="text"
 				label={m.common_group()}
@@ -86,9 +89,10 @@
 				required
 				bind:value={locationGroup}
 			/>
-			<input type="hidden" name="location_id" value={data.locationId} />
+			<input id="location-update-location-id-input" type="hidden" name="location_id" value={data.locationId} />
 			<div class="permissions-form__actions" style="margin-top: 1rem;">
 				<CwButton
+					id="location-update-save-button"
 					type="submit"
 					variant="primary"
 					loading={submitting}
diff --git a/src/routes/locations/create/+page.svelte b/src/routes/locations/create/+page.svelte
index f001bcd1..546ceae5 100644
--- a/src/routes/locations/create/+page.svelte
+++ b/src/routes/locations/create/+page.svelte
@@ -20,22 +20,24 @@
 	const toast = useCwToast();
 
 	let { form }: { form: CreateLocationForm } = $props();
+	const initial = (() => form)();
 
 	let submitting = $state(false);
-	let name = $state(form?.name ?? '');
-	let description = $state(form?.description ?? '');
-	let group = $state(form?.group ?? '');
-	let lat = $state(form?.lat ?? '');
-	let long = $state(form?.long ?? '');
+	let name = $state(initial?.name ?? '');
+	let description = $state(initial?.description ?? '');
+	let group = $state(initial?.group ?? '');
+	let lat = $state(initial?.lat ?? '');
+	let long = $state(initial?.long ?? '');
 </script>
 
 <AppPage width="md">
-	<CwButton variant="secondary" size="sm" onclick={() => goto(resolve('/locations'))}>
+	<CwButton id="location-create-back-button" variant="secondary" size="sm" onclick={() => goto(resolve('/locations'))}>
 		&larr; {m.action_back()}
 	</CwButton>
 
 	<CwCard title={m.locations_create_title()} elevated>
 		<form
+			id="location-create-form"
 			method="POST"
 			use:enhance={() => {
 				submitting = true;
@@ -71,6 +73,7 @@
 				{/if}
 
 				<CwInput
+					id="location-create-name-input"
 					label={m.common_name()}
 					name="name"
 					bind:value={name}
@@ -79,6 +82,7 @@
 				/>
 
 				<CwInput
+					id="location-create-description-input"
 					label={m.common_description()}
 					name="description"
 					bind:value={description}
@@ -86,6 +90,7 @@
 				/>
 
 				<CwInput
+					id="location-create-group-input"
 					label={m.common_group()}
 					name="group"
 					bind:value={group}
@@ -94,12 +99,14 @@
 
 				<div class="grid grid-cols-2 gap-4">
 					<CwInput
+						id="location-create-lat-input"
 						label={m.locations_latitude_optional()}
 						name="lat"
 						bind:value={lat}
 						placeholder={m.locations_latitude_placeholder()}
 					/>
 					<CwInput
+						id="location-create-long-input"
 						label={m.locations_longitude_optional()}
 						name="long"
 						bind:value={long}
@@ -108,10 +115,10 @@
 				</div>
 
 				<AppActionRow>
-					<CwButton type="button" variant="ghost" onclick={() => goto(resolve('/locations'))}>
+					<CwButton id="location-create-cancel-button" type="button" variant="ghost" onclick={() => goto(resolve('/locations'))}>
 						{m.action_cancel()}
 					</CwButton>
-					<CwButton type="submit" variant="primary" loading={submitting} disabled={!name.trim()}>
+					<CwButton id="location-create-submit-button" type="submit" variant="primary" loading={submitting} disabled={!name.trim()}>
 						{m.locations_create_submit()}
 					</CwButton>
 				</AppActionRow>
diff --git a/src/routes/offline/+page.svelte b/src/routes/offline/+page.svelte
index 4605234d..6f88c029 100644
--- a/src/routes/offline/+page.svelte
+++ b/src/routes/offline/+page.svelte
@@ -15,7 +15,7 @@
 		<p class="offline-eyebrow">{m.offline_eyebrow()}</p>
 		<h1>{m.offline_heading()}</h1>
 		<p>{m.offline_body()}</p>
-		<button type="button" onclick={() => window.location.reload()}>{m.action_try_again()}</button>
+		<button id="offline-retry-button" type="button" onclick={() => window.location.reload()}>{m.action_try_again()}</button>
 	</section>
 </div>
 
diff --git a/src/routes/reports/+page.svelte b/src/routes/reports/+page.svelte
index ef724d8b..72c2dd2b 100644
--- a/src/routes/reports/+page.svelte
+++ b/src/routes/reports/+page.svelte
@@ -168,13 +168,14 @@
 </svelte:head>
 
 <AppPage>
-	<CwButton variant="secondary" onclick={() => goto(backHref(page.url, resolve('/')))}>
+	<CwButton id="reports-back-button" variant="secondary" onclick={() => goto(backHref(page.url, resolve('/')))}>
 		&larr; {m.action_back_to_dashboard()}
 	</CwButton>
 
 	<CwCard title={m.reports_new_configured_templates()}>
 		{#key tableKey}
 			<CwDataTable
+				id="reports-table"
 				labels={cwDataTableLabels()}
 				{columns}
 				{loadData}
@@ -203,6 +204,7 @@
 				{#snippet rowActions(row: ReportTemplateRow)}
 					<div class="reports-new-page__actions">
 						<CwButton
+							id={`reports-row-${row.id}-edit-button`}
 							variant="secondary"
 							size="md"
 							onclick={() => goto(resolve('/reports/edit/[id]', { id: String(row.id) }))}
@@ -219,7 +221,7 @@
 				{/snippet}
 
 				{#snippet toolbarActions()}
-					<CwButton variant="primary" onclick={() => goto(resolve('/reports/create'))}>
+					<CwButton id="reports-add-button" variant="primary" onclick={() => goto(resolve('/reports/create'))}>
 						<Icon src={ADD_ICON} alt={m.reports_new_create_template()} />
 					</CwButton>
 				{/snippet}
diff --git a/src/routes/reports/DeleteReportTemplateDialog.svelte b/src/routes/reports/DeleteReportTemplateDialog.svelte
index cb2e3300..22bedab8 100644
--- a/src/routes/reports/DeleteReportTemplateDialog.svelte
+++ b/src/routes/reports/DeleteReportTemplateDialog.svelte
@@ -48,7 +48,7 @@
 	}
 </script>
 
-<CwButton variant="danger" size="md" disabled={deleting} onclick={() => (open = true)}>
+<CwButton id={`report-delete-${templateId}-open-button`} variant="danger" size="md" disabled={deleting} onclick={() => (open = true)}>
 	<Icon src={TRASH_ICON} alt={m.action_delete()} />
 </CwButton>
 
@@ -57,10 +57,11 @@
 
 	{#snippet actions()}
 		<div class="reports-new-delete-dialog__actions">
-			<CwButton variant="secondary" size="md" disabled={deleting} onclick={() => (open = false)}>
+			<CwButton id={`report-delete-${templateId}-cancel-button`} variant="secondary" size="md" disabled={deleting} onclick={() => (open = false)}>
 				{m.action_cancel()}
 			</CwButton>
 			<CwButton
+				id={`report-delete-${templateId}-delete-button`}
 				variant="danger"
 				size="md"
 				loading={deleting}
diff --git a/src/routes/reports/ReportCadenceSection.svelte b/src/routes/reports/ReportCadenceSection.svelte
index 9c320faf..467dfcc8 100644
--- a/src/routes/reports/ReportCadenceSection.svelte
+++ b/src/routes/reports/ReportCadenceSection.svelte
@@ -16,18 +16,21 @@
 		<div class="report-entry-card">
 			<div class="report-switch-grid">
 				<CwSwitch
+					id="report-cadence-day-switch"
 					checked={cadence.end_of_day}
 					label={m.reports_create_schedule_day_label()}
 					description={m.reports_create_schedule_day_description()}
 					onchange={(checked) => (cadence.end_of_day = checked)}
 				/>
 				<CwSwitch
+					id="report-cadence-week-switch"
 					checked={cadence.end_of_week}
 					label={m.reports_create_schedule_week_label()}
 					description={m.reports_create_schedule_week_description()}
 					onchange={(checked) => (cadence.end_of_week = checked)}
 				/>
 				<CwSwitch
+					id="report-cadence-month-switch"
 					checked={cadence.end_of_month}
 					label={m.reports_new_cadence_month_label()}
 					description={m.reports_new_cadence_month_description()}
@@ -37,16 +40,11 @@
 
 			<div class="report-field-grid">
 				<CwInput
+					id="report-cadence-utc-offset-input"
 					label={m.reports_new_cadence_utc_offset()}
 					type="numeric"
 					bind:value={cadence.utc_offset}
 				/>
-				<CwSwitch
-					checked={cadence.is_active}
-					label={m.reports_new_cadence_active_label()}
-					description={m.reports_new_cadence_active_description()}
-					onchange={(checked) => (cadence.is_active = checked)}
-				/>
 			</div>
 		</div>
 	</AppFormStack>
diff --git a/src/routes/reports/ReportProcessingSchedulesSection.svelte b/src/routes/reports/ReportProcessingSchedulesSection.svelte
index 962aa915..40b6dbdc 100644
--- a/src/routes/reports/ReportProcessingSchedulesSection.svelte
+++ b/src/routes/reports/ReportProcessingSchedulesSection.svelte
@@ -21,15 +21,18 @@
 		onAdd,
 		onRemove
 	}: Props = $props();
-
-	let open = $state(schedules.length > 0);
 </script>
 
-<CwExpandPanel title={m.reports_schedule_card_title()} {open}>
+<CwExpandPanel title={m.reports_schedule_card_title()}>
 	<AppFormStack padded>
-		<div class="report-section-toolbar">
-			<p class="report-section-copy">{m.reports_schedule_card_copy()}</p>
-			<CwButton type="button" variant="secondary" onclick={onAdd}>
+		<p class="report-section-copy">{m.reports_schedule_card_description()}</p>
+
+		<AppNotice tone="warning">
+			<p>{m.reports_schedule_card_warning()}</p>
+		</AppNotice>
+
+		<div class="report-section-toolbar report-section-toolbar--end">
+			<CwButton id="report-schedules-add-button" type="button" variant="secondary" onclick={onAdd}>
 				<Icon src={ADD_ICON} class="h-4 w-4" />
 			</CwButton>
 		</div>
@@ -46,23 +49,26 @@
 					<div>
 						<h3>{m.reports_schedule_entry_heading({ index: String(index + 1) })}</h3>
 					</div>
-					<CwButton type="button" variant="danger" size="sm" onclick={() => onRemove(schedule.key)}>
+					<CwButton id={`report-schedules-${index}-remove-button`} type="button" variant="danger" size="sm" onclick={() => onRemove(schedule.key)}>
 						{m.action_remove()}
 					</CwButton>
 				</div>
 
 				<div class="report-field-grid report-field-grid--three">
 					<CwDropdown
+						id={`report-schedules-${index}-day-select`}
 						label={m.reports_schedule_day_of_week()}
 						options={daysOfTheWeek}
 						bind:value={schedule.day_of_week}
 					/>
 					<CwDropdown
+						id={`report-schedules-${index}-rule-type-select`}
 						label={m.reports_schedule_rule_type()}
 						options={ruleTypeOptions}
 						bind:value={schedule.rule_type}
 					/>
 					<CwInput
+						id={`report-schedules-${index}-timezone-input`}
 						label={m.reports_schedule_timezone()}
 						placeholder="UTC, JST, EST, etc..."
 						bind:value={schedule.timezone}
@@ -72,22 +78,24 @@
 				<div class="report-field-grid report-field-grid--two">
 					<label class="report-time-field">
 						<span class="report-time-field__label">{m.reports_schedule_start_time()}</span>
-						<input class="report-time-input" type="time" bind:value={schedule.start_time} />
+						<input id={`report-schedules-${index}-start-time-input`} class="report-time-input" type="time" bind:value={schedule.start_time} />
 					</label>
 					<label class="report-time-field">
 						<span class="report-time-field__label">{m.reports_schedule_end_time()}</span>
-						<input class="report-time-input" type="time" bind:value={schedule.end_time} />
+						<input id={`report-schedules-${index}-end-time-input`} class="report-time-input" type="time" bind:value={schedule.end_time} />
 					</label>
 				</div>
 
 				<div class="report-switch-grid">
 					<CwSwitch
+						id={`report-schedules-${index}-crosses-midnight-switch`}
 						checked={schedule.crosses_midnight}
 						label={m.reports_schedule_crosses_midnight()}
 						description={m.reports_schedule_crosses_midnight_description()}
 						onchange={(checked) => (schedule.crosses_midnight = checked)}
 					/>
 					<CwSwitch
+						id={`report-schedules-${index}-enabled-switch`}
 						checked={schedule.is_enabled}
 						label={m.reports_schedule_is_enabled()}
 						description={m.reports_schedule_is_enabled_description()}
@@ -108,6 +116,10 @@
 		gap: var(--cw-space-3);
 	}
 
+	.report-section-toolbar--end {
+		justify-content: flex-end;
+	}
+
 	.report-section-copy {
 		margin: 0;
 		max-width: 48rem;
diff --git a/src/routes/reports/ReportRecipientsSection.svelte b/src/routes/reports/ReportRecipientsSection.svelte
index 2151a299..6b6ddd9f 100644
--- a/src/routes/reports/ReportRecipientsSection.svelte
+++ b/src/routes/reports/ReportRecipientsSection.svelte
@@ -25,7 +25,7 @@
 	<AppFormStack padded>
 		<div class="report-section-toolbar">
 			<p class="report-section-copy">{m.reports_create_recipients_copy()}</p>
-			<CwButton type="button" variant="secondary" onclick={onAdd}>
+			<CwButton id="report-recipients-add-button" type="button" variant="secondary" onclick={onAdd}>
 				<Icon src={ADD_ICON} class="h-4 w-4" />
 			</CwButton>
 		</div>
@@ -45,6 +45,7 @@
 					</div>
 					{#if recipients.length > 1}
 						<CwButton
+							id={`report-recipients-${index}-remove-button`}
 							type="button"
 							variant="danger"
 							size="sm"
@@ -57,17 +58,20 @@
 
 				<div class="report-field-grid report-field-grid--three">
 					<CwDropdown
+						id={`report-recipients-${index}-method-select`}
 						label={m.reports_create_communication_method()}
 						options={communicationMethodOptions}
 						bind:value={recipient.communication_method}
 					/>
 					<CwInput
+						id={`report-recipients-${index}-email-input`}
 						label={m.reports_create_email_label()}
 						type="email"
 						placeholder={m.reports_create_email_placeholder()}
 						bind:value={recipient.email}
 					/>
 					<CwInput
+						id={`report-recipients-${index}-name-input`}
 						label={m.common_name()}
 						placeholder={m.reports_create_recipient_name_placeholder()}
 						bind:value={recipient.name}
diff --git a/src/routes/reports/ReportTemplateForm.svelte b/src/routes/reports/ReportTemplateForm.svelte
index c5342991..48559c95 100644
--- a/src/routes/reports/ReportTemplateForm.svelte
+++ b/src/routes/reports/ReportTemplateForm.svelte
@@ -279,12 +279,14 @@
 <CwCard title={m.reports_new_step_template()} subtitle={m.reports_new_step_template_subtitle()} elevated>
 	<AppFormStack padded>
 		<CwInput
+			id="report-form-name-input"
 			label={m.common_name()}
 			placeholder={m.reports_create_name_placeholder()}
 			bind:value={fields.name}
 			required
 		/>
 		<CwTextArea
+			id="report-form-description-textarea"
 			label={m.common_description()}
 			placeholder={m.reports_new_description_placeholder()}
 			rows={3}
@@ -293,12 +295,14 @@
 		/>
 		<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 			<CwDropdown
+				id="report-form-data-pull-interval-select"
 				label={m.reports_new_data_pull_interval()}
 				options={dataPullIntervalOptions}
 				bind:value={fields.data_pull_interval}
 			/>
 		</div>
 		<CwSwitch
+			id="report-form-active-switch"
 			label={m.reports_new_active_template()}
 			description={m.reports_new_active_template_description()}
 			bind:checked={fields.is_active}
@@ -318,6 +322,7 @@
 			</AppNotice>
 		{:else}
 			<CwMultiSelect
+				id="report-form-devices-multiselect"
 				showAllSelectedItems={true}
 				label={m.devices_device()}
 				placeholder={m.rules_select_device_placeholder()}
@@ -360,10 +365,11 @@
 	<AppFormStack padded>
 		<CwSeparator />
 		<AppActionRow>
-			<CwButton variant="ghost" onclick={() => goto(resolve('/reports'))} disabled={submitting}>
+			<CwButton id="report-form-cancel-button" variant="ghost" onclick={() => goto(resolve('/reports'))} disabled={submitting}>
 				{m.action_cancel()}
 			</CwButton>
 			<CwButton
+				id="report-form-submit-button"
 				variant="primary"
 				onclick={handleSubmit}
 				disabled={!canSubmit || submitting}
diff --git a/src/routes/reports/ViewReportHistoryDialog.svelte b/src/routes/reports/ViewReportHistoryDialog.svelte
index 32adc8e4..cac1c671 100644
--- a/src/routes/reports/ViewReportHistoryDialog.svelte
+++ b/src/routes/reports/ViewReportHistoryDialog.svelte
@@ -101,7 +101,7 @@
 	}
 </script>
 
-<CwButton variant="secondary" size="md" onclick={() => (open = true)}>
+<CwButton id={`report-history-${templateId}-open-button`} variant="secondary" size="md" onclick={() => (open = true)}>
 	<Icon src={HISTORY_ICON} alt={m.reports_new_view_history()} />
 </CwButton>
 
@@ -120,13 +120,14 @@
 				<li class="report-history__group">
 					<span class="report-history__device">{group.deviceName ?? group.devEui}</span>
 					<ul class="report-history__items">
-						{#each group.items as item (item.id ?? item.name)}
+						{#each group.items as item, itemIndex (item.id ?? item.name)}
 							<li class="report-history__item">
 								<div class="report-history__meta">
 									<span class="report-history__name">{item.name}</span>
 									<span class="report-history__time">{formatTimestamp(item.createdAt)}</span>
 								</div>
 								<CwButton
+									id={`report-history-${templateId}-${group.devEui}-${itemIndex}-download-button`}
 									variant="secondary"
 									size="sm"
 									loading={downloadingKey === `${group.devEui}:${item.name}`}
@@ -145,7 +146,7 @@
 
 	{#snippet actions()}
 		<div class="report-history__actions">
-			<CwButton variant="secondary" size="md" onclick={() => (open = false)}>
+			<CwButton id={`report-history-${templateId}-close-button`} variant="secondary" size="md" onclick={() => (open = false)}>
 				{m.action_close()}
 			</CwButton>
 		</div>
diff --git a/src/routes/reports/create/+page.svelte b/src/routes/reports/create/+page.svelte
index 22ae633b..0fdc6961 100644
--- a/src/routes/reports/create/+page.svelte
+++ b/src/routes/reports/create/+page.svelte
@@ -15,7 +15,7 @@
 </svelte:head>
 
 <AppPage width="lg">
-	<CwButton variant="secondary" size="sm" onclick={() => goto(resolve('/reports'))}>
+	<CwButton id="report-create-back-button" variant="secondary" size="sm" onclick={() => goto(resolve('/reports'))}>
 		&larr; {m.action_back()}
 	</CwButton>
 
diff --git a/src/routes/reports/edit/[id]/+page.svelte b/src/routes/reports/edit/[id]/+page.svelte
index d877a720..ec2ff37a 100644
--- a/src/routes/reports/edit/[id]/+page.svelte
+++ b/src/routes/reports/edit/[id]/+page.svelte
@@ -16,7 +16,7 @@
 </svelte:head>
 
 <AppPage width="lg">
-	<CwButton variant="secondary" size="sm" onclick={() => goto(resolve('/reports'))}>
+	<CwButton id="report-edit-back-button" variant="secondary" size="sm" onclick={() => goto(resolve('/reports'))}>
 		&larr; {m.action_back()}
 	</CwButton>
 
diff --git a/src/routes/reports/report-template-form.ts b/src/routes/reports/report-template-form.ts
index bed6a298..3a70ae0c 100644
--- a/src/routes/reports/report-template-form.ts
+++ b/src/routes/reports/report-template-form.ts
@@ -179,7 +179,11 @@ export function createReportTemplateDraftFactory(nextRowKey: (prefix: string) =>
 					end_of_week: firstSchedule.endOfWeek,
 					end_of_month: firstSchedule.endOfMonth,
 					utc_offset: String(firstSchedule.utcOffset ?? 0),
-					is_active: firstSchedule.isActive,
+					// Schedule-level active flag is no longer surfaced in the UI (it was
+					// redundant with the template-level "Active template" toggle, which is
+					// the single pause control). Keep the schedule active; pausing is done
+					// at the template level.
+					is_active: true,
 					key: nextRowKey('cadence')
 				}
 			: createEmptyCadence();
diff --git a/src/routes/rules/+page.svelte b/src/routes/rules/+page.svelte
index af1c3a66..84b9cd7b 100644
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@@ -42,7 +42,7 @@
 		// { key: 'statusLabel', header: m.rules_new_status(), sortable: true },
 		{ key: 'assignmentSummary', header: m.rules_new_assigned_devices() },
 		// { key: 'locationName', header: m.nav_locations(), sortable: true },
-		{ key: 'criteriaSummary', header: m.rules_conditions() },
+		{ key: 'criteriaSummary', header: m.rules_conditions(), align: 'left' },
 		{ key: 'actionSummary', header: m.rules_new_actions() },
 		// { key: 'triggeredCount', header: m.rules_new_triggered_devices(), sortable: true },
 		{ key: 'createdAtLabel', header: m.common_created(), sortable: true }
@@ -178,13 +178,14 @@
 </svelte:head>
 
 <AppPage>
-	<CwButton variant="secondary" onclick={() => goto(backHref(page.url, resolve('/')))}>
+	<CwButton id="rules-back-button" variant="secondary" onclick={() => goto(backHref(page.url, resolve('/')))}>
 		&larr; {m.action_back_to_dashboard()}
 	</CwButton>
 
 	<CwCard title={m.rules_new_configured_templates()}>
 		{#key tableKey}
 			<CwDataTable
+				id="rules-table"
 				labels={cwDataTableLabels()}
 				{columns}
 				{loadData}
@@ -212,6 +213,10 @@
 							variant="soft"
 							size="sm"
 						/>
+					{:else if col.key === 'criteriaSummary'}
+						<span class="rules-new-page__truncate" title={row.criteriaSummary}>
+							{row.criteriaSummary}
+						</span>
 					{:else}
 						{defaultValue}
 					{/if}
@@ -220,6 +225,7 @@
 				{#snippet rowActions(row: RuleTemplateRow)}
 					<div class="rules-new-page__actions">
 						<CwButton
+							id={`rules-row-${row.id}-edit-button`}
 							variant="secondary"
 							size="md"
 							onclick={() => goto(resolve('/rules/edit/[id]', { id: String(row.id) }))}
@@ -236,7 +242,7 @@
 				{/snippet}
 
 				{#snippet toolbarActions()}
-					<CwButton variant="primary" onclick={() => goto(resolve('/rules/create'))}>
+					<CwButton id="rules-add-button" variant="primary" onclick={() => goto(resolve('/rules/create'))}>
 						<Icon src={ADD_ICON} alt={m.rules_new_create_template()} />
 					</CwButton>
 				{/snippet}
@@ -246,6 +252,14 @@
 </AppPage>
 
 <style>
+	.rules-new-page__truncate {
+		display: block;
+		max-width: 24rem;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
 	.rules-new-page__actions {
 		display: flex;
 		justify-content: flex-end;
diff --git a/src/routes/rules/DeleteRuleTemplateDialog.svelte b/src/routes/rules/DeleteRuleTemplateDialog.svelte
index e9c834d2..24c187c3 100644
--- a/src/routes/rules/DeleteRuleTemplateDialog.svelte
+++ b/src/routes/rules/DeleteRuleTemplateDialog.svelte
@@ -48,7 +48,7 @@
 	}
 </script>
 
-<CwButton variant="danger" size="md" disabled={deleting} onclick={() => (open = true)}>
+<CwButton id={`rule-delete-${templateId}-open-button`} variant="danger" size="md" disabled={deleting} onclick={() => (open = true)}>
 	<Icon src={TRASH_ICON} alt={m.action_delete()} />
 </CwButton>
 
@@ -57,10 +57,11 @@
 
 	{#snippet actions()}
 		<div class="rules-new-delete-dialog__actions">
-			<CwButton variant="secondary" size="md" disabled={deleting} onclick={() => (open = false)}>
+			<CwButton id={`rule-delete-${templateId}-cancel-button`} variant="secondary" size="md" disabled={deleting} onclick={() => (open = false)}>
 				{m.action_cancel()}
 			</CwButton>
 			<CwButton
+				id={`rule-delete-${templateId}-delete-button`}
 				variant="danger"
 				size="md"
 				loading={deleting}
diff --git a/src/routes/rules/RuleTemplateForm.svelte b/src/routes/rules/RuleTemplateForm.svelte
index 80d69856..913871c8 100644
--- a/src/routes/rules/RuleTemplateForm.svelte
+++ b/src/routes/rules/RuleTemplateForm.svelte
@@ -25,7 +25,6 @@
 		useCwToast
 	} from '@cropwatchdevelopment/cwui';
 	import { m } from '$lib/paraglide/messages.js';
-	import RuleTemplateTest from './RuleTemplateTest.svelte';
 	import {
 		areAlertCriteriaGroupsValid,
 		buildInitialAlertCriteriaGroups,
@@ -377,12 +376,14 @@
 <CwCard title={m.rules_new_step_template()} subtitle={m.rules_new_step_template_subtitle()}>
 	<AppFormStack padded>
 		<CwInput
+			id="rule-form-name-input"
 			label={m.rules_rule_name()}
 			placeholder={m.rules_rule_name_placeholder()}
 			bind:value={ruleName}
 			required
 		/>
 		<CwTextArea
+			id="rule-form-description-textarea"
 			label={m.common_description()}
 			placeholder={m.rules_new_description_placeholder()}
 			rows={3}
@@ -390,6 +391,7 @@
 			bind:value={description}
 		/>
 		<CwSwitch
+			id="rule-form-active-switch"
 			label={m.rules_new_active_rule()}
 			description={m.rules_new_active_rule_description()}
 			bind:checked={isActive}
@@ -406,6 +408,7 @@
 		{:else}
 			<div class="rules-new-form__block" id="device-selection">
 				<CwMultiSelect
+					id="rule-form-devices-multiselect"
 					showAllSelectedItems={true}
 					label={m.devices_device()}
 					placeholder={m.rules_select_device_placeholder()}
@@ -428,13 +431,14 @@
 				<div class="rules-new-form__block-header">
 					<span>{m.rules_condition_number({ count: String(index + 1) })}</span>
 					{#if criteriaGroups.length > 1}
-						<CwButton variant="danger" size="sm" onclick={() => criteriaGroups.splice(index, 1)}>
+						<CwButton id={`rule-form-criteria-${index}-remove-button`} variant="danger" size="sm" onclick={() => criteriaGroups.splice(index, 1)}>
 							{m.action_remove()}
 						</CwButton>
 					{/if}
 				</div>
 
 				<CwDropdown
+					id={`rule-form-criteria-${index}-subject-select`}
 					label={m.rules_data_field()}
 					options={SUBJECT_OPTIONS}
 					bind:value={group.subject}
@@ -455,6 +459,7 @@
 		{/if}
 
 		<CwButton
+			id="rule-form-add-criteria-button"
 			variant="secondary"
 			type="button"
 			onclick={() => {
@@ -474,7 +479,7 @@
 				<div class="rules-new-form__block-header">
 					<span>{m.rules_new_action_number({ count: String(index + 1) })}</span>
 					{#if templateActions.length > 1}
-						<CwButton variant="danger" size="sm" onclick={() => templateActions.splice(index, 1)}>
+						<CwButton id={`rule-form-action-${index}-remove-button`} variant="danger" size="sm" onclick={() => templateActions.splice(index, 1)}>
 							{m.action_remove()}
 						</CwButton>
 					{/if}
@@ -482,6 +487,7 @@
 
 				<div class="rules-new-form__actions-grid">
 					<CwDropdown
+						id={`rule-form-action-${index}-type-select`}
 						label={m.rules_new_action_type()}
 						options={actionTypeOptionsFor(action)}
 						value={String(action.actionType || '')}
@@ -490,6 +496,7 @@
 					/>
 					{#if action.actionTypeName === 'EMail'}
 						<CwInput
+							id={`rule-form-action-${index}-recipient-input`}
 							label={m.rules_recipient()}
 							placeholder={m.rules_recipient_placeholder()}
 							bind:value={action.config.recipient}
@@ -503,6 +510,7 @@
 		{/each}
 
 		<CwButton
+			id="rule-form-add-action-button"
 			variant="secondary"
 			type="button"
 			onclick={() => {
@@ -514,8 +522,6 @@
 	</AppFormStack>
 </CwCard>
 
-<RuleTemplateTest criteria={criteriaForTest} />
-
 <CwCard title={mode === 'edit' ? m.rules_step_4_review_save_title() : m.rules_step_4_title()}>
 	<AppFormStack padded>
 		{#if isFormValid}
@@ -534,12 +540,12 @@
 					<dt>{m.rules_new_actions()}:</dt>
 					<dd>
 						{actionSummary}
-						<CwButton variant="secondary" size="sm" onclick={() => showAdvanced = !showAdvanced}>
+						<CwButton id="rule-form-advanced-hide-button" variant="secondary" size="sm" onclick={() => showAdvanced = !showAdvanced}>
 						{showAdvanced ? m.common_hide_details() : m.common_show_details()}
 					</CwButton>
 					</dd>
 					{:else}
-					<CwButton variant="secondary" size="sm" onclick={() => showAdvanced = !showAdvanced}>
+					<CwButton id="rule-form-advanced-show-button" variant="secondary" size="sm" onclick={() => showAdvanced = !showAdvanced}>
 						{showAdvanced ? m.common_hide_details() : m.common_show_details()}
 					</CwButton>
 					{/if}
@@ -554,10 +560,11 @@
 		<CwSeparator />
 
 		<AppActionRow>
-			<CwButton variant="ghost" onclick={() => goto(resolve('/rules'))} disabled={submitting}>
+			<CwButton id="rule-form-cancel-button" variant="ghost" onclick={() => goto(resolve('/rules'))} disabled={submitting}>
 				{m.action_cancel()}
 			</CwButton>
 			<CwButton
+				id="rule-form-submit-button"
 				variant="primary"
 				onclick={handleSubmit}
 				disabled={!isFormValid || submitting}
diff --git a/src/routes/rules/RuleTemplateTest.svelte b/src/routes/rules/RuleTemplateTest.svelte
deleted file mode 100644
index 094ea80e..00000000
--- a/src/routes/rules/RuleTemplateTest.svelte
+++ /dev/null
@@ -1,239 +0,0 @@
-<script lang="ts">
-	import { AppActionRow, AppFormStack, AppNotice } from '$lib/components/layout';
-	import {
-		evaluateRuleTemplateCriteria,
-		type RuleTemplateTestResult
-	} from '$lib/rules-new/rule-template-evaluator';
-	import type { RuleTemplateCriterionInput } from '$lib/rules-new/rule-template.types';
-	import { CwButton, CwCard, CwChip, CwTextArea } from '@cropwatchdevelopment/cwui';
-	import { m } from '$lib/paraglide/messages.js';
-
-	interface Props {
-		criteria: RuleTemplateCriterionInput[];
-	}
-
-	let { criteria }: Props = $props();
-	const initialCriteria = (() => criteria)();
-
-	let payloadText = $state(
-		JSON.stringify({ decodedPayload: buildSamplePayload(initialCriteria) }, null, 2)
-	);
-	let testError = $state('');
-	let testResult = $state<RuleTemplateTestResult | null>(null);
-
-	function handlePayloadInput() {
-		testResult = null;
-		testError = '';
-	}
-
-	function handleTestRule() {
-		testResult = null;
-		testError = '';
-
-		if (criteria.length === 0) {
-			testError = m.rules_new_test_missing_criteria();
-			return;
-		}
-
-		let parsed: unknown;
-		try {
-			parsed = JSON.parse(payloadText);
-		} catch {
-			testError = m.rules_new_test_parse_failed();
-			return;
-		}
-
-		const decodedPayload = readDecodedPayload(parsed);
-		if (!decodedPayload) {
-			testError = m.rules_new_test_payload_object_required();
-			return;
-		}
-
-		testResult = evaluateRuleTemplateCriteria(criteria, decodedPayload);
-	}
-
-	function buildSamplePayload(
-		criteriaToSample: RuleTemplateCriterionInput[]
-	): Record<string, number> {
-		return Object.fromEntries(
-			criteriaToSample
-				.filter((criterion) => criterion.subject.trim().length > 0)
-				.map((criterion) => [criterion.subject, sampleValueForCriterion(criterion)])
-		);
-	}
-
-	function sampleValueForCriterion(criterion: RuleTemplateCriterionInput): number {
-		const triggerValue = Number.isFinite(criterion.triggerValue) ? criterion.triggerValue : 0;
-
-		switch (criterion.operator.trim().toLowerCase()) {
-			case '>':
-			case 'gt':
-			case '!=':
-			case 'neq':
-				return triggerValue + 1;
-			case '<':
-			case 'lt':
-				return triggerValue - 1;
-			default:
-				return triggerValue;
-		}
-	}
-
-	function readDecodedPayload(value: unknown): Record<string, unknown> | null {
-		if (!isRecord(value)) return null;
-		if (isRecord(value.decodedPayload)) return value.decodedPayload;
-		return value;
-	}
-
-	function isRecord(value: unknown): value is Record<string, unknown> {
-		return typeof value === 'object' && value !== null && !Array.isArray(value);
-	}
-
-	function formatActualValue(value: unknown): string {
-		if (value === undefined) return m.common_not_available();
-		if (typeof value === 'string') return value;
-		return JSON.stringify(value);
-	}
-
-	function reasonLabel(reason: string | undefined): string {
-		switch (reason) {
-			case 'unsupported_operator':
-				return m.rules_new_test_reason_unsupported_operator();
-			case 'non_comparable_value':
-				return m.rules_new_test_reason_non_comparable_value();
-			case 'reset_not_reached':
-				return m.rules_new_test_reason_reset_not_reached();
-			default:
-				return '';
-		}
-	}
-</script>
-
-<!-- <CwCard title={m.rules_new_test_rule()} subtitle={m.rules_new_test_rule_subtitle()}>
-	<AppFormStack padded>
-		<CwTextArea
-			label={m.rules_new_test_payload()}
-			rows={8}
-			resize="vertical"
-			bind:value={payloadText}
-			oninput={handlePayloadInput}
-		/>
-
-		<AppActionRow>
-			<CwButton variant="secondary" onclick={handleTestRule}>{m.rules_new_test_button()}</CwButton>
-		</AppActionRow>
-
-		{#if testError}
-			<AppNotice tone="danger" ariaLive="polite">
-				<p>{testError}</p>
-			</AppNotice>
-		{/if}
-
-		{#if testResult}
-			<AppNotice
-				tone={testResult.matches ? 'success' : testResult.canReset ? 'info' : 'warning'}
-				title={testResult.matches
-					? m.rules_new_test_matches()
-					: testResult.canReset
-						? m.rules_new_test_can_reset()
-						: m.rules_new_test_no_match()}
-				ariaLive="polite"
-			>
-				<div class="rules-new-test__criteria">
-					{#each testResult.criteria as criterion, index (criterion.subject + index)}
-						<div class="rules-new-test__criterion">
-							<div class="rules-new-test__criterion-copy">
-								<p class="rules-new-test__criterion-title">
-									{criterion.subject}
-									{criterion.operator}
-									{criterion.triggerValue}
-								</p>
-								<p>
-									{m.rules_new_test_actual_value()}:
-									{formatActualValue(criterion.actualValue)}
-								</p>
-								{#if criterion.reason || criterion.resetReason}
-									<p>{reasonLabel(criterion.reason ?? criterion.resetReason)}</p>
-								{/if}
-							</div>
-							<div class="rules-new-test__criterion-status">
-								<CwChip
-									label={criterion.matched
-										? m.rules_new_test_trigger_passed()
-										: m.rules_new_test_trigger_failed()}
-									tone={criterion.matched ? 'success' : 'danger'}
-									variant="soft"
-									size="sm"
-								/>
-								<CwChip
-									label={criterion.resetMatched
-										? m.rules_new_test_reset_passed()
-										: m.rules_new_test_reset_failed()}
-									tone={criterion.resetMatched ? 'info' : 'warning'}
-									variant="soft"
-									size="sm"
-								/>
-							</div>
-						</div>
-					{/each}
-				</div>
-			</AppNotice>
-		{/if}
-	</AppFormStack>
-</CwCard> -->
-
-<style>
-	.rules-new-test__criteria {
-		display: grid;
-		gap: var(--cw-space-2);
-	}
-
-	.rules-new-test__criterion {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr) auto;
-		gap: var(--cw-space-3);
-		align-items: start;
-		padding-block: var(--cw-space-2);
-		border-block-start: 1px solid var(--cw-border-muted);
-	}
-
-	.rules-new-test__criterion:first-child {
-		border-block-start: 0;
-		padding-block-start: 0;
-	}
-
-	.rules-new-test__criterion-copy {
-		display: grid;
-		gap: var(--cw-space-1);
-		min-width: 0;
-	}
-
-	.rules-new-test__criterion-copy p {
-		margin: 0;
-		font-size: var(--cw-text-sm);
-		color: var(--cw-text-secondary);
-		overflow-wrap: anywhere;
-	}
-
-	.rules-new-test__criterion-copy .rules-new-test__criterion-title {
-		font-weight: var(--cw-font-semibold);
-		color: var(--cw-text-primary);
-	}
-
-	.rules-new-test__criterion-status {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-		gap: var(--cw-space-1);
-	}
-
-	@media (max-width: 639px) {
-		.rules-new-test__criterion {
-			grid-template-columns: 1fr;
-		}
-
-		.rules-new-test__criterion-status {
-			justify-content: flex-start;
-		}
-	}
-</style>
diff --git a/src/routes/rules/ViewRuleAlertHistory.svelte b/src/routes/rules/ViewRuleAlertHistory.svelte
index 1ba4ec86..b94bec8e 100644
--- a/src/routes/rules/ViewRuleAlertHistory.svelte
+++ b/src/routes/rules/ViewRuleAlertHistory.svelte
@@ -3,8 +3,9 @@
 	import { readApiErrorMessage } from '$lib/api/api-error';
 	import { ApiService } from '$lib/api/api.service';
 	import { getAppContext } from '$lib/appContext.svelte';
+	import { AppNotice } from '$lib/components/layout';
 	import Icon from '$lib/components/Icon.svelte';
-	import { CwButton, CwDialog } from '@cropwatchdevelopment/cwui';
+	import { CwButton, CwChip, CwDialog, CwDropdown, CwDuration } from '@cropwatchdevelopment/cwui';
 	import { m } from '$lib/paraglide/messages.js';
 	import HISTORY_ICON from '$lib/images/icons/history.svg';
 
@@ -22,16 +23,17 @@
 	let errorMessage = $state<string | null>(null);
 	let entries = $state<RuleTriggerLogDto[]>([]);
 	let loadedFor = $state<number | null>(null);
+	let selectedDevice = $state('');
 
-	$effect(() => {
-		if (open && !loading && loadedFor !== templateId) {
-			void loadHistory();
-		}
-	});
+	function openHistory() {
+		open = true;
+		if (!loading && loadedFor !== templateId) void loadHistory();
+	}
 
 	async function loadHistory() {
 		loading = true;
 		errorMessage = null;
+		selectedDevice = '';
 		try {
 			const api = new ApiService({ authToken: app.accessToken });
 			entries = await api.getRuleTemplateHistory(templateId);
@@ -43,6 +45,26 @@
 		}
 	}
 
+	// Distinct devices in the log, so a multi-device rule can be filtered to one sensor.
+	let devices = $derived.by(() => {
+		const list: { devEui: string; name: string }[] = [];
+		for (const entry of entries) {
+			if (list.some((device) => device.devEui === entry.devEui)) continue;
+			list.push({ devEui: entry.devEui, name: entry.deviceName ?? entry.devEui });
+		}
+		return list.sort((left, right) => left.name.localeCompare(right.name));
+	});
+
+	let deviceOptions = $derived([
+		{ label: m.rules_new_history_filter_all(), value: '' },
+		...devices.map((device) => ({ label: device.name, value: device.devEui }))
+	]);
+
+	let activeCount = $derived(entries.filter((entry) => !entry.resetAt).length);
+	let filteredEntries = $derived(
+		selectedDevice ? entries.filter((entry) => entry.devEui === selectedDevice) : entries
+	);
+
 	const timestampFormatter = new Intl.DateTimeFormat(undefined, {
 		dateStyle: 'medium',
 		timeStyle: 'short'
@@ -57,65 +79,136 @@
 	function formatValue(value: number | null): string | null {
 		return value === null || value === undefined ? null : String(value);
 	}
+
+	// Mirrors CwDuration's compact format so resolved (static) spans match the live
+	// CwDuration shown for ongoing alarms.
+	function formatDuration(ms: number): string {
+		const totalSec = Math.floor(ms / 1000);
+		const totalMin = Math.floor(totalSec / 60);
+		const totalHr = Math.floor(totalMin / 60);
+		const days = Math.floor(totalHr / 24);
+		const pad = (n: number) => n.toString().padStart(2, '0');
+		if (totalSec < 60) return `${totalSec}s`;
+		if (totalMin < 60) return `${totalMin}m ${pad(totalSec % 60)}s`;
+		if (totalHr < 24) return `${totalHr}h ${pad(totalMin % 60)}m`;
+		return `${days}d ${pad(totalHr % 24)}h`;
+	}
 </script>
 
-<CwButton variant="secondary" size="md" onclick={() => (open = true)}>
+<CwButton id={`rule-history-${templateId}-open-button`} variant="secondary" size="md" onclick={openHistory}>
 	<Icon src={HISTORY_ICON} alt={m.rules_new_view_history()} />
 </CwButton>
 
 <CwDialog bind:open title={m.rules_new_view_history()}>
-	<p class="rule-history__subtitle">{m.rules_new_history_subtitle({ name: ruleName })}</p>
-
-	{#if loading}
-		<p class="rule-history__status">{m.rules_new_history_loading()}</p>
-	{:else if errorMessage}
-		<p class="rule-history__status rule-history__status--error">{errorMessage}</p>
-	{:else if entries.length === 0}
-		<p class="rule-history__status">{m.rules_new_history_empty()}</p>
-	{:else}
-		<ul class="rule-history__list">
-			{#each entries as entry (entry.id)}
-				{@const triggeredValue = formatValue(entry.triggeredValue)}
-				{@const resetValue = formatValue(entry.resetValue)}
-				<li class="rule-history__item">
-					<span class="rule-history__device">{entry.deviceName ?? entry.devEui}</span>
-					<div class="rule-history__flow">
-						<div class="rule-history__point rule-history__point--trigger">
-							<span class="rule-history__label">{m.rules_new_history_triggered()}</span>
-							<span class="rule-history__time">{formatTimestamp(entry.triggeredAt)}</span>
-							{#if triggeredValue !== null}
-								<span class="rule-history__value">
-									{m.rules_new_history_value({ value: triggeredValue })}
-								</span>
-							{/if}
+	<div class="rule-history">
+		<p class="rule-history__subtitle">{m.rules_new_history_subtitle({ name: ruleName })}</p>
+
+		{#if loading}
+			<p class="rule-history__loading">{m.rules_new_history_loading()}</p>
+		{:else if errorMessage}
+			<AppNotice tone="danger">
+				<p>{errorMessage}</p>
+			</AppNotice>
+		{:else if entries.length === 0}
+			<AppNotice tone="neutral">
+				<p>{m.rules_new_history_empty()}</p>
+			</AppNotice>
+		{:else}
+			<div class="rule-history__toolbar">
+				<div class="rule-history__summary">
+					{#if activeCount > 0}
+						<CwChip
+							tone="danger"
+							variant="soft"
+							size="sm"
+							label={m.rules_new_history_active_summary({ count: String(activeCount) })}
+						/>
+					{/if}
+					<CwChip
+						tone="secondary"
+						variant="soft"
+						size="sm"
+						label={m.rules_new_history_total_events({ count: String(entries.length) })}
+					/>
+				</div>
+
+				{#if devices.length > 1}
+					<div class="rule-history__filter">
+						<CwDropdown id={`rule-history-${templateId}-device-select`} options={deviceOptions} bind:value={selectedDevice} />
+					</div>
+				{/if}
+			</div>
+
+			<ul class="rule-history__list">
+				{#each filteredEntries as entry (entry.id)}
+					{@const isActive = !entry.resetAt}
+					{@const triggeredValue = formatValue(entry.triggeredValue)}
+					{@const resetValue = formatValue(entry.resetValue)}
+					{@const durationMs =
+						entry.triggeredAt && entry.resetAt
+							? new Date(entry.resetAt).getTime() - new Date(entry.triggeredAt).getTime()
+							: null}
+					<li class="rh-card" class:rh-card--active={isActive} class:rh-card--resolved={!isActive}>
+						<div class="rh-card__head">
+							<span class="rh-card__device">{entry.deviceName ?? entry.devEui}</span>
+							<CwChip
+								tone={isActive ? 'danger' : 'success'}
+								variant="soft"
+								size="sm"
+								label={isActive
+									? m.rules_new_history_status_active()
+									: m.rules_new_history_status_resolved()}
+							/>
 						</div>
-						<span class="rule-history__arrow" aria-hidden="true">→</span>
-						{#if entry.resetAt}
-							<div class="rule-history__point rule-history__point--reset">
-								<span class="rule-history__label">{m.rules_new_history_reset()}</span>
-								<span class="rule-history__time">{formatTimestamp(entry.resetAt)}</span>
-								{#if resetValue !== null}
-									<span class="rule-history__value">
-										{m.rules_new_history_value({ value: resetValue })}
-									</span>
+
+						<div class="rh-event">
+							<span class="rh-dot rh-dot--trigger" aria-hidden="true"></span>
+							<span class="rh-event__label">{m.rules_new_history_triggered()}</span>
+							<span class="rh-event__time">{formatTimestamp(entry.triggeredAt)}</span>
+							<span class="rh-event__value">
+								{#if triggeredValue !== null}{m.rules_new_history_value({
+										value: triggeredValue
+									})}{/if}
+							</span>
+						</div>
+
+						<p class="rh-duration" class:rh-duration--active={isActive}>
+							{#if isActive}
+								<span>{m.rules_new_history_duration_active()}</span>
+								{#if entry.triggeredAt}
+									<CwDuration from={entry.triggeredAt} />
 								{/if}
-							</div>
-						{:else}
-							<div class="rule-history__point rule-history__point--active">
-								<span class="rule-history__active-badge">
-									{m.rules_new_history_still_active()}
+							{:else if durationMs !== null}
+								{m.rules_new_history_duration_lasted({ duration: formatDuration(durationMs) })}
+							{/if}
+						</p>
+
+						<div class="rh-event">
+							<span
+								class="rh-dot"
+								class:rh-dot--reset={!isActive}
+								class:rh-dot--active={isActive}
+								aria-hidden="true"
+							></span>
+							{#if isActive}
+								<span class="rh-event__still">{m.rules_new_history_still_active()}</span>
+							{:else}
+								<span class="rh-event__label">{m.rules_new_history_reset()}</span>
+								<span class="rh-event__time">{formatTimestamp(entry.resetAt)}</span>
+								<span class="rh-event__value">
+									{#if resetValue !== null}{m.rules_new_history_value({ value: resetValue })}{/if}
 								</span>
-							</div>
-						{/if}
-					</div>
-				</li>
-			{/each}
-		</ul>
-	{/if}
+							{/if}
+						</div>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
 
 	{#snippet actions()}
 		<div class="rule-history__actions">
-			<CwButton variant="secondary" size="md" onclick={() => (open = false)}>
+			<CwButton id={`rule-history-${templateId}-close-button`} variant="secondary" size="md" onclick={() => (open = false)}>
 				{m.action_close()}
 			</CwButton>
 		</div>
@@ -123,19 +216,41 @@
 </CwDialog>
 
 <style>
+	/* The dialog inherits text-align from the table action cell it is mounted in; pin it. */
+	.rule-history {
+		text-align: left;
+	}
+
 	.rule-history__subtitle {
 		margin: 0 0 var(--cw-space-3);
-		color: var(--cw-color-text-muted, #6b7280);
+		color: var(--cw-text-muted);
+		font-size: var(--cw-text-sm);
 	}
 
-	.rule-history__status {
+	.rule-history__loading {
 		margin: var(--cw-space-4) 0;
 		text-align: center;
-		color: var(--cw-color-text-muted, #6b7280);
+		color: var(--cw-text-muted);
+	}
+
+	.rule-history__toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--cw-space-2);
+		margin-bottom: var(--cw-space-3);
 	}
 
-	.rule-history__status--error {
-		color: var(--cw-color-danger, #dc2626);
+	.rule-history__summary {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--cw-space-2);
+	}
+
+	.rule-history__filter {
+		min-width: 14rem;
 	}
 
 	.rule-history__list {
@@ -149,73 +264,107 @@
 		overflow-y: auto;
 	}
 
-	.rule-history__item {
+	.rh-card {
+		border: 1px solid var(--cw-border-muted);
+		border-left-width: 3px;
+		border-radius: var(--cw-radius-md);
+		background: var(--cw-bg-surface);
+		padding: var(--cw-space-3) var(--cw-space-4);
+	}
+
+	.rh-card--active {
+		border-left-color: var(--cw-danger-500);
+	}
+
+	.rh-card--resolved {
+		border-left-color: var(--cw-success-500);
+	}
+
+	.rh-card__head {
 		display: flex;
-		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
 		gap: var(--cw-space-2);
-		padding: var(--cw-space-3);
-		border: 1px solid var(--cw-color-border, #e5e7eb);
-		border-radius: var(--cw-radius-md, 8px);
+		margin-bottom: var(--cw-space-2);
 	}
 
-	.rule-history__device {
-		font-weight: 600;
+	.rh-card__device {
+		font-weight: var(--cw-font-semibold);
+		font-size: var(--cw-text-sm);
+		color: var(--cw-text-primary);
 	}
 
-	.rule-history__flow {
-		display: flex;
-		align-items: stretch;
-		gap: var(--cw-space-3);
+	/* Each event is one aligned row: dot | label | timestamp | value. */
+	.rh-event {
+		display: grid;
+		grid-template-columns: 0.625rem 5rem auto 1fr;
+		align-items: center;
+		column-gap: var(--cw-space-3);
 	}
 
-	.rule-history__point {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		flex: 1;
+	.rh-dot {
+		justify-self: center;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: var(--cw-radius-full);
 	}
 
-	.rule-history__point--trigger {
-		border-left: 3px solid var(--cw-color-danger, #dc2626);
-		padding-left: var(--cw-space-2);
+	.rh-dot--trigger {
+		background: var(--cw-danger-500);
 	}
 
-	.rule-history__point--reset {
-		border-left: 3px solid var(--cw-color-success, #16a34a);
-		padding-left: var(--cw-space-2);
+	.rh-dot--reset {
+		background: var(--cw-success-500);
 	}
 
-	.rule-history__point--active {
-		display: flex;
-		align-items: center;
+	.rh-dot--active {
+		background: transparent;
+		border: 2px solid var(--cw-danger-500);
 	}
 
-	.rule-history__label {
-		font-size: 0.75rem;
+	.rh-event__label {
+		font-size: var(--cw-text-xs);
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		color: var(--cw-color-text-muted, #6b7280);
+		color: var(--cw-text-muted);
 	}
 
-	.rule-history__time {
-		font-weight: 600;
+	.rh-event__time {
+		font-weight: var(--cw-font-semibold);
+		font-size: var(--cw-text-sm);
+		color: var(--cw-text-primary);
 	}
 
-	.rule-history__value {
-		font-size: 0.875rem;
-		color: var(--cw-color-text-muted, #6b7280);
+	.rh-event__value {
+		justify-self: start;
+		font-size: var(--cw-text-xs);
+		color: var(--cw-text-secondary);
 	}
 
-	.rule-history__arrow {
-		align-self: center;
-		font-size: 1.25rem;
-		color: var(--cw-color-text-muted, #6b7280);
+	.rh-event__still {
+		grid-column: 2 / -1;
+		font-weight: var(--cw-font-semibold);
+		font-size: var(--cw-text-sm);
+		color: var(--cw-danger-500);
 	}
 
-	.rule-history__active-badge {
-		font-size: 0.8125rem;
-		font-weight: 600;
-		color: var(--cw-color-danger, #dc2626);
+	/* Duration sits on the connector between the two events, indented past the dot. */
+	.rh-duration {
+		display: flex;
+		align-items: center;
+		gap: var(--cw-space-1);
+		margin: 0;
+		padding: var(--cw-space-1) 0;
+		padding-left: calc(0.625rem + var(--cw-space-2));
+		border-left: 2px solid var(--cw-border-strong);
+		margin-left: calc(0.3125rem - 1px);
+		font-size: var(--cw-text-xs);
+		color: var(--cw-text-muted);
+	}
+
+	.rh-duration--active {
+		border-left-color: var(--cw-danger-300);
+		color: var(--cw-danger-600);
 	}
 
 	.rule-history__actions {
@@ -225,12 +374,12 @@
 	}
 
 	@media (max-width: 639px) {
-		.rule-history__flow {
-			flex-direction: column;
+		.rh-event {
+			grid-template-columns: 0.625rem 4rem auto 1fr;
 		}
 
-		.rule-history__arrow {
-			transform: rotate(90deg);
+		.rule-history__filter {
+			min-width: 100%;
 		}
 
 		.rule-history__actions {
diff --git a/src/routes/rules/create/+page.svelte b/src/routes/rules/create/+page.svelte
index 8304f78d..8901e4bc 100644
--- a/src/routes/rules/create/+page.svelte
+++ b/src/routes/rules/create/+page.svelte
@@ -15,7 +15,7 @@
 </svelte:head>
 
 <AppPage width="lg">
-	<CwButton variant="secondary" size="sm" onclick={() => goto(resolve('/rules'))}>
+	<CwButton id="rule-create-back-button" variant="secondary" size="sm" onclick={() => goto(resolve('/rules'))}>
 		&larr; {m.action_back()}
 	</CwButton>
 
diff --git a/src/routes/rules/edit/[id]/+page.svelte b/src/routes/rules/edit/[id]/+page.svelte
index 3aaa3141..d1f14ac8 100644
--- a/src/routes/rules/edit/[id]/+page.svelte
+++ b/src/routes/rules/edit/[id]/+page.svelte
@@ -16,7 +16,7 @@
 </svelte:head>
 
 <AppPage width="lg">
-	<CwButton variant="secondary" size="sm" onclick={() => goto(resolve('/rules'))}>
+	<CwButton id="rule-edit-back-button" variant="secondary" size="sm" onclick={() => goto(resolve('/rules'))}>
 		&larr; {m.action_back()}
 	</CwButton>
 
diff --git a/src/routes/settings/+page.server.ts b/src/routes/settings/+page.server.ts
index efe13805..98314705 100644
--- a/src/routes/settings/+page.server.ts
+++ b/src/routes/settings/+page.server.ts
@@ -1,5 +1,10 @@
+import { fail } from '@sveltejs/kit';
+import { ApiService, ApiServiceError } from '$lib/api/api.service';
+import type { UpdatePreferencesRequest } from '$lib/api/api.dtos';
+import { readApiErrorMessage } from '$lib/api/api-error';
+import { m } from '$lib/paraglide/messages.js';
 import { getLocale } from '$lib/paraglide/runtime';
-import type { PageServerLoad } from './$types';
+import type { Actions, PageServerLoad } from './$types';
 
 type Option = {
 	label: string;
@@ -12,12 +17,14 @@ type PreferenceDraft = {
 	language: SupportedLocale;
 	theme: 'dark' | 'light' | 'system';
 	temperatureUnit: string;
+	weightUnit: string;
 	ecUnit: string;
+	waterDepthUnit: string;
+	timezone: string;
 	soilMoistureUnit: string;
 	rainfallUnit: string;
 	windSpeedUnit: string;
 	pressureUnit: string;
-	waterDepthUnit: string;
 	co2Unit: string;
 	distanceUnit: string;
 	areaUnit: string;
@@ -35,19 +42,65 @@ const languageOptions: Option[] = [
 	{ label: 'English', value: 'en' }
 ];
 
+// Persisted (profile_preferences) — value sets must match the DB CHECK constraints.
 const temperatureUnitOptions: Option[] = [
-	{ label: 'Celsius (C)', value: 'celsius' },
-	{ label: 'Fahrenheit (F)', value: 'fahrenheit' },
+	{ label: 'Celsius (°C)', value: 'celsius' },
+	{ label: 'Fahrenheit (°F)', value: 'fahrenheit' },
 	{ label: 'Kelvin (K)', value: 'kelvin' }
 ];
 
+const weightUnitOptions: Option[] = [
+	{ label: 'Kilograms (kg)', value: 'kg' },
+	{ label: 'Pounds (lb)', value: 'lb' }
+];
+
 const ecUnitOptions: Option[] = [
-	{ label: 'uS/cm', value: 'us_cm' },
 	{ label: 'mS/cm', value: 'ms_cm' },
-	{ label: 'dS/m', value: 'ds_m' },
-	{ label: 'dS/cm', value: 'ds_cm' }
+	{ label: 'dS/cm', value: 'ds_cm' },
+	{ label: 'µS/cm', value: 'us_cm' }
+];
+
+const waterLevelUnitOptions: Option[] = [
+	{ label: 'Millimeters (mm)', value: 'mm' },
+	{ label: 'Centimeters (cm)', value: 'cm' },
+	{ label: 'Inches (in)', value: 'inch' },
+	{ label: 'Feet (ft)', value: 'foot' },
+	{ label: 'Meters (m)', value: 'meter' },
+	{ label: 'Yards (yd)', value: 'yard' }
+];
+
+// One representative major city per UTC offset (value is the IANA zone).
+const timezoneOptions: Option[] = [
+	{ label: '(UTC-11:00) Pago Pago', value: 'Pacific/Pago_Pago' },
+	{ label: '(UTC-10:00) Honolulu', value: 'Pacific/Honolulu' },
+	{ label: '(UTC-09:00) Anchorage', value: 'America/Anchorage' },
+	{ label: '(UTC-08:00) Los Angeles', value: 'America/Los_Angeles' },
+	{ label: '(UTC-07:00) Denver', value: 'America/Denver' },
+	{ label: '(UTC-06:00) Mexico City', value: 'America/Mexico_City' },
+	{ label: '(UTC-05:00) New York', value: 'America/New_York' },
+	{ label: '(UTC-04:00) Santiago', value: 'America/Santiago' },
+	{ label: '(UTC-03:00) Sao Paulo', value: 'America/Sao_Paulo' },
+	{ label: '(UTC-01:00) Azores', value: 'Atlantic/Azores' },
+	{ label: '(UTC+00:00) London', value: 'Europe/London' },
+	{ label: '(UTC+01:00) Paris', value: 'Europe/Paris' },
+	{ label: '(UTC+02:00) Cairo', value: 'Africa/Cairo' },
+	{ label: '(UTC+03:00) Moscow', value: 'Europe/Moscow' },
+	{ label: '(UTC+03:30) Tehran', value: 'Asia/Tehran' },
+	{ label: '(UTC+04:00) Dubai', value: 'Asia/Dubai' },
+	{ label: '(UTC+05:00) Karachi', value: 'Asia/Karachi' },
+	{ label: '(UTC+05:30) Mumbai', value: 'Asia/Kolkata' },
+	{ label: '(UTC+05:45) Kathmandu', value: 'Asia/Kathmandu' },
+	{ label: '(UTC+06:00) Dhaka', value: 'Asia/Dhaka' },
+	{ label: '(UTC+07:00) Bangkok', value: 'Asia/Bangkok' },
+	{ label: '(UTC+08:00) Shanghai', value: 'Asia/Shanghai' },
+	{ label: '(UTC+09:00) Tokyo', value: 'Asia/Tokyo' },
+	{ label: '(UTC+09:30) Adelaide', value: 'Australia/Adelaide' },
+	{ label: '(UTC+10:00) Sydney', value: 'Australia/Sydney' },
+	{ label: '(UTC+11:00) Noumea', value: 'Pacific/Noumea' },
+	{ label: '(UTC+12:00) Auckland', value: 'Pacific/Auckland' }
 ];
 
+// Not yet persisted — displayed disabled until backing columns/consumers exist.
 const soilMoistureUnitOptions: Option[] = [
 	{ label: 'VWC (%)', value: 'vwc_percent' },
 	{ label: 'Relative saturation (%)', value: 'relative_percent' },
@@ -75,13 +128,6 @@ const pressureUnitOptions: Option[] = [
 	{ label: 'PSI', value: 'psi' }
 ];
 
-const waterDepthUnitOptions: Option[] = [
-	{ label: 'Centimeters (cm)', value: 'cm' },
-	{ label: 'Meters (m)', value: 'm' },
-	{ label: 'Inches (in)', value: 'in' },
-	{ label: 'Feet (ft)', value: 'ft' }
-];
-
 const co2UnitOptions: Option[] = [
 	{ label: 'PPM', value: 'ppm' },
 	{ label: 'mg/m3', value: 'mg_m3' }
@@ -114,24 +160,20 @@ const decimalSeparatorOptions: Option[] = [
 	{ label: 'Comma (1.234,56)', value: 'comma' }
 ];
 
-const readString = (value: unknown): string => {
-	if (typeof value !== 'string') {
-		return '';
-	}
-
-	return value.trim();
-};
+const readString = (value: unknown): string => (typeof value === 'string' ? value.trim() : '');
 
 const createDefaultPreferences = (locale: string): PreferenceDraft => ({
 	language: locale.startsWith('en') ? 'en' : 'ja',
 	theme: 'system',
 	temperatureUnit: 'celsius',
+	weightUnit: 'kg',
 	ecUnit: 'us_cm',
+	waterDepthUnit: 'cm',
+	timezone: '',
 	soilMoistureUnit: 'vwc_percent',
 	rainfallUnit: 'mm',
 	windSpeedUnit: 'm_s',
 	pressureUnit: 'hpa',
-	waterDepthUnit: 'cm',
 	co2Unit: 'ppm',
 	distanceUnit: 'km',
 	areaUnit: 'hectares',
@@ -144,23 +186,56 @@ const createDefaultPreferences = (locale: string): PreferenceDraft => ({
 	highlightAlertThresholds: true
 });
 
-export const load: PageServerLoad = async ({ locals }) => {
-	const session = locals.jwt ?? null;
+export const load: PageServerLoad = async ({ parent, fetch }) => {
+	const { authToken, session } = await parent();
 	const locale = getLocale();
+	const defaults = createDefaultPreferences(locale);
+
+	let preferences = defaults;
+	if (authToken) {
+		try {
+			const api = new ApiService({ fetchFn: fetch, authToken });
+			const prefs = await api.getPreferences();
+			preferences = {
+				...defaults,
+				theme: (prefs.theme as PreferenceDraft['theme']) ?? defaults.theme,
+				temperatureUnit: prefs.temperature_unit ?? defaults.temperatureUnit,
+				weightUnit: prefs.weight_unit ?? defaults.weightUnit,
+				ecUnit: prefs.ec_unit ?? defaults.ecUnit,
+				waterDepthUnit: prefs.water_level_unit ?? defaults.waterDepthUnit,
+				timezone: prefs.timezone ?? defaults.timezone,
+				distanceUnit: prefs.distance_unit ?? defaults.distanceUnit,
+				areaUnit: prefs.area_unit ?? defaults.areaUnit,
+				soilMoistureUnit: prefs.soil_moisture_unit ?? defaults.soilMoistureUnit,
+				pressureUnit: prefs.pressure_unit ?? defaults.pressureUnit,
+				rainfallUnit: prefs.rainfall_unit ?? defaults.rainfallUnit,
+				windSpeedUnit: prefs.wind_speed_unit ?? defaults.windSpeedUnit,
+				co2Unit: prefs.co2_unit ?? defaults.co2Unit,
+				dateFormat: prefs.date_format ?? defaults.dateFormat,
+				timeFormat: prefs.time_format ?? defaults.timeFormat
+			};
+		} catch (error) {
+			// Falls back to defaults when the preferences table/endpoint is unavailable
+			// (e.g. before the 014 migration is applied).
+			console.error('Failed to load preferences:', error);
+		}
+	}
 
 	return {
 		email: readString(session?.email) || null,
 		role: readString(session?.role) || null,
-		preferences: createDefaultPreferences(locale),
+		preferences,
 		options: {
 			language: languageOptions,
 			temperature: temperatureUnitOptions,
+			weight: weightUnitOptions,
 			ec: ecUnitOptions,
+			waterDepth: waterLevelUnitOptions,
+			timezone: timezoneOptions,
 			soilMoisture: soilMoistureUnitOptions,
 			rainfall: rainfallUnitOptions,
 			windSpeed: windSpeedUnitOptions,
 			pressure: pressureUnitOptions,
-			waterDepth: waterDepthUnitOptions,
 			co2: co2UnitOptions,
 			distance: distanceUnitOptions,
 			area: areaUnitOptions,
@@ -170,3 +245,41 @@ export const load: PageServerLoad = async ({ locals }) => {
 		}
 	};
 };
+
+export const actions: Actions = {
+	updatePreferences: async ({ request, locals, fetch }) => {
+		const authToken = locals.jwtString ?? null;
+		if (!authToken) return fail(401, { error: m.auth_not_authenticated() });
+
+		const formData = await request.formData();
+		// The form only yields strings; the API validates them (@IsIn), so narrow
+		// to the request type at this boundary.
+		const payload = {
+			theme: readString(formData.get('theme')) || null,
+			temperature_unit: readString(formData.get('temperatureUnit')) || null,
+			weight_unit: readString(formData.get('weightUnit')) || null,
+			ec_unit: readString(formData.get('ecUnit')) || null,
+			water_level_unit: readString(formData.get('waterDepthUnit')) || null,
+			timezone: readString(formData.get('timezone')) || null,
+			distance_unit: readString(formData.get('distanceUnit')) || null,
+			area_unit: readString(formData.get('areaUnit')) || null,
+			soil_moisture_unit: readString(formData.get('soilMoistureUnit')) || null,
+			pressure_unit: readString(formData.get('pressureUnit')) || null,
+			rainfall_unit: readString(formData.get('rainfallUnit')) || null,
+			wind_speed_unit: readString(formData.get('windSpeedUnit')) || null,
+			co2_unit: readString(formData.get('co2Unit')) || null,
+			date_format: readString(formData.get('dateFormat')) || null,
+			time_format: readString(formData.get('timeFormat')) || null
+		} as UpdatePreferencesRequest;
+
+		const api = new ApiService({ fetchFn: fetch, authToken });
+		try {
+			await api.updatePreferences(payload);
+			return { success: true };
+		} catch (err) {
+			const errorPayload = err instanceof ApiServiceError ? err.payload : err;
+			const status = err instanceof ApiServiceError ? err.status : 500;
+			return fail(status, { error: readApiErrorMessage(errorPayload, m.generic_error()) });
+		}
+	}
+};
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index c692765d..3a50448b 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { applyAction, enhance } from '$app/forms';
+	import { invalidateAll } from '$app/navigation';
 	import { AppActionRow, AppFormStack, AppPage } from '$lib/components/layout';
 	import { setLocale } from '$lib/paraglide/runtime';
 	import { m } from '$lib/paraglide/messages.js';
@@ -14,71 +16,34 @@
 	import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
 
 	type PreferenceDraft = PageProps['data']['preferences'];
-	type Option = { label: string; value: string };
 
-	let { data }: PageProps = $props();
+	let { data, form }: PageProps = $props();
 
 	const toast = useCwToast();
+	const initial = (() => data)();
 
-	function getInitialPreferences(): PreferenceDraft {
-		return { ...data.preferences };
-	}
-
-	let preferences = $state(getInitialPreferences());
+	// Seed from the loaded (DB) preferences. The theme picker itself resolves
+	// light/dark/system against its own localStorage; when localStorage is empty
+	// the DB-seeded value wins and the picker persists it, giving cross-device sync.
+	let preferences = $state<PreferenceDraft>({ ...initial.preferences });
+	let saving = $state(false);
 
 	const isDirty = $derived(JSON.stringify(preferences) !== JSON.stringify(data.preferences));
-	const languageLabel = $derived(getOptionLabel(data.options.language, preferences.language));
-	const temperatureLabel = $derived(
-		getOptionLabel(data.options.temperature, preferences.temperatureUnit)
-	);
-	const ecLabel = $derived(getOptionLabel(data.options.ec, preferences.ecUnit));
-	const formatLabel = $derived(
-		`${getOptionLabel(data.options.dateFormat, preferences.dateFormat)} / ${getOptionLabel(data.options.timeFormat, preferences.timeFormat)}`
-	);
-	const spatialLabel = $derived(
-		`${getOptionLabel(data.options.distance, preferences.distanceUnit)} / ${getOptionLabel(data.options.area, preferences.areaUnit)}`
+	const themeLabel = $derived(
+		preferences.theme === 'dark'
+			? m.settings_theme_dark()
+			: preferences.theme === 'light'
+				? m.settings_theme_light()
+				: m.settings_theme_system()
 	);
-	const themeLabel = $derived(getThemeLabel(preferences.theme));
-
-	function getOptionLabel(options: Option[], value: string): string {
-		return options.find((option) => option.value === value)?.label ?? value;
-	}
-
-	function getThemeLabel(theme: PreferenceDraft['theme']): string {
-		if (theme === 'dark') return 'Dark';
-		if (theme === 'light') return 'Light';
-		return 'System';
-	}
 
 	async function resetForm() {
-		const initialPreferences = getInitialPreferences();
-		preferences = { ...initialPreferences };
-
+		preferences = { ...data.preferences };
 		try {
-			await setLocale(initialPreferences.language);
+			await setLocale(preferences.language);
 		} catch (error) {
 			console.error('Failed to reset locale:', error);
 		}
-
-		toast.add({
-			tone: 'info',
-			message: 'Settings returned to the mock defaults.'
-		});
-	}
-
-	function handleSave() {
-		if (!isDirty) {
-			toast.add({
-				tone: 'info',
-				message: 'No mock setting changes to save yet.'
-			});
-			return;
-		}
-
-		toast.add({
-			tone: 'info',
-			message: 'Settings persistence is intentionally deferred until you wire the API service.'
-		});
 	}
 </script>
 
@@ -86,43 +51,58 @@
 	<title>{m.nav_settings()} - CropWatch</title>
 </svelte:head>
 
-<AppPage width="xl" class="settings-page">
-	<form class="settings-grid" onsubmit={(event) => event.preventDefault()}>
+<AppPage width="xl">
+	<form
+		method="POST"
+		action="?/updatePreferences"
+		class="settings-grid"
+		use:enhance={() => {
+			saving = true;
+			return async ({ result }) => {
+				saving = false;
+				await applyAction(result);
+				if (result.type === 'success') {
+					toast.add({ tone: 'success', message: m.settings_saved() });
+					await invalidateAll();
+				} else if (result.type === 'failure' && typeof result.data?.error === 'string') {
+					toast.add({ tone: 'danger', message: result.data.error });
+				}
+			};
+		}}
+	>
+		<!-- Persisted theme lives in a hidden field so the CwThemePicker value is POSTed. -->
+		<input type="hidden" name="theme" value={preferences.theme} />
+
 		<div class="settings-card settings-card--regional">
-			<CwCard
-				title="Regional preferences"
-				subtitle="Control localization, number formatting, and the calendar notation used in reports."
-				elevated
-			>
+			<CwCard title={m.settings_regional_title()} subtitle={m.settings_regional_subtitle()} elevated>
 				<AppFormStack padded>
 					<div class="field-grid field-grid--two">
 						<LanguageSwitcher compact class="mr-3" />
 
 						<CwDropdown
-							label="Date format"
+							id="settings-timezone-select"
+							name="timezone"
+							label={m.settings_timezone_label()}
+							placeholder={m.settings_timezone_placeholder()}
+							options={data.options.timezone}
+							bind:value={preferences.timezone}
+						/>
+
+						<CwDropdown
+							id="settings-date-format-select"
+							name="dateFormat"
+							label={m.settings_date_format_label()}
 							options={data.options.dateFormat}
 							bind:value={preferences.dateFormat}
-							disabled
 						/>
 
 						<CwDropdown
-							label="Time format"
+							id="settings-time-format-select"
+							name="timeFormat"
+							label={m.settings_time_format_label()}
 							options={data.options.timeFormat}
 							bind:value={preferences.timeFormat}
-							disabled
 						/>
-
-						<CwDropdown
-							label="Decimal separator"
-							options={data.options.decimalSeparator}
-							bind:value={preferences.decimalSeparator}
-							disabled
-						/>
-					</div>
-
-					<div class="chip-row">
-						<CwChip label={languageLabel} tone="secondary" variant="outline" />
-						<CwChip label={formatLabel} tone="primary" variant="soft" />
 					</div>
 				</AppFormStack>
 			</CwCard>
@@ -130,14 +110,14 @@
 
 		<div class="settings-card settings-card--appearance">
 			<CwCard
-				title="Appearance and mapping"
-				subtitle="Keep the UI theme and spatial notation aligned with the operators reading the data."
+				title={m.settings_appearance_title()}
+				subtitle={m.settings_appearance_subtitle()}
 				elevated
 			>
 				<AppFormStack padded>
 					<div class="theme-row">
 						<div class="theme-copy">
-							<p class="section-title">Theme mode</p>
+							<p class="section-title">{m.settings_theme_label()}</p>
 							<p class="section-copy">{themeLabel}</p>
 						</div>
 						<CwThemePicker bind:theme={preferences.theme} />
@@ -145,99 +125,99 @@
 
 					<div class="field-grid field-grid--two">
 						<CwDropdown
-							label="Distance"
+							id="settings-distance-select"
+							name="distanceUnit"
+							label={m.settings_distance_label()}
 							options={data.options.distance}
 							bind:value={preferences.distanceUnit}
-							disabled
 						/>
 
 						<CwDropdown
-							label="Area"
+							id="settings-area-select"
+							name="areaUnit"
+							label={m.settings_area_label()}
 							options={data.options.area}
 							bind:value={preferences.areaUnit}
-							disabled
 						/>
 					</div>
-
-					<div class="chip-row">
-						<CwChip label={spatialLabel} tone="info" variant="soft" />
-					</div>
 				</AppFormStack>
 			</CwCard>
 		</div>
 
 		<div class="settings-card settings-card--notation">
-			<CwCard
-				title="Sensor notation"
-				subtitle="Choose the units operators will expect when comparing air, soil, and water measurements."
-				elevated
-			>
+			<CwCard title={m.settings_units_title()} subtitle={m.settings_units_subtitle()} elevated>
 				<AppFormStack padded>
 					<div class="field-grid field-grid--two">
 						<CwDropdown
-							label="Temperature"
+							id="settings-temperature-select"
+							name="temperatureUnit"
+							label={m.settings_temperature_label()}
 							options={data.options.temperature}
 							bind:value={preferences.temperatureUnit}
-							disabled
 						/>
 
 						<CwDropdown
-							label="EC"
+							id="settings-ec-select"
+							name="ecUnit"
+							label={m.settings_ec_label()}
 							options={data.options.ec}
 							bind:value={preferences.ecUnit}
-							disabled
 						/>
 
 						<CwDropdown
-							label="Soil moisture"
+							id="settings-water-level-select"
+							name="waterDepthUnit"
+							label={m.settings_water_level_label()}
+							options={data.options.waterDepth}
+							bind:value={preferences.waterDepthUnit}
+						/>
+
+						<CwDropdown
+							id="settings-weight-select"
+							name="weightUnit"
+							label={m.settings_weight_label()}
+							options={data.options.weight}
+							bind:value={preferences.weightUnit}
+						/>
+
+						<CwDropdown
+							id="settings-soil-moisture-select"
+							name="soilMoistureUnit"
+							label={m.settings_soil_moisture_label()}
 							options={data.options.soilMoisture}
 							bind:value={preferences.soilMoistureUnit}
-							disabled
 						/>
 
 						<CwDropdown
-							label="Pressure"
+							id="settings-pressure-select"
+							name="pressureUnit"
+							label={m.settings_pressure_label()}
 							options={data.options.pressure}
 							bind:value={preferences.pressureUnit}
-							disabled
 						/>
 
 						<CwDropdown
-							label="Rainfall"
+							id="settings-rainfall-select"
+							name="rainfallUnit"
+							label={m.settings_rainfall_label()}
 							options={data.options.rainfall}
 							bind:value={preferences.rainfallUnit}
-							disabled
 						/>
 
 						<CwDropdown
-							label="Wind speed"
+							id="settings-wind-speed-select"
+							name="windSpeedUnit"
+							label={m.settings_wind_speed_label()}
 							options={data.options.windSpeed}
 							bind:value={preferences.windSpeedUnit}
-							disabled
 						/>
 
 						<CwDropdown
-							label="Water depth"
-							options={data.options.waterDepth}
-							bind:value={preferences.waterDepthUnit}
-							disabled
-						/>
-
-						<CwDropdown
-							label="CO2"
+							id="settings-co2-select"
+							name="co2Unit"
+							label={m.settings_co2_label()}
 							options={data.options.co2}
 							bind:value={preferences.co2Unit}
-							disabled
-						/>
-					</div>
-
-					<div class="chip-row">
-						<CwChip label={temperatureLabel} tone="primary" variant="soft" />
-						<CwChip label={ecLabel} tone="info" variant="soft" />
-						<CwChip
-							label={getOptionLabel(data.options.soilMoisture, preferences.soilMoistureUnit)}
-							tone="secondary"
-							variant="outline"
 						/>
 					</div>
 				</AppFormStack>
@@ -245,23 +225,28 @@
 		</div>
 
 		<div class="settings-card settings-card--actions">
-			<CwCard
-				title="Preview and actions"
-				subtitle="These controls still operate on the local preview state until the settings API is wired."
-				elevated
-			>
+			<CwCard title={m.settings_actions_title()} elevated>
 				<AppFormStack padded>
 					<div class="chip-row">
 						<CwChip label={themeLabel} tone="secondary" variant="outline" />
-						<CwChip label={spatialLabel} tone="info" variant="soft" />
-						<CwChip label={formatLabel} tone="primary" variant="soft" />
+						{#if preferences.timezone}
+							<CwChip label={preferences.timezone} tone="info" variant="soft" />
+						{/if}
 					</div>
 
 					<AppActionRow>
-						<CwButton type="button" variant="secondary" onclick={resetForm} disabled={!isDirty}>
-							Reset preview
+						<CwButton
+							id="settings-reset-button"
+							type="button"
+							variant="ghost"
+							onclick={resetForm}
+							disabled={!isDirty || saving}
+						>
+							{m.settings_reset()}
+						</CwButton>
+						<CwButton id="settings-save-button" type="submit" variant="primary" loading={saving} disabled={!isDirty}>
+							{m.action_save_changes()}
 						</CwButton>
-						<CwButton type="button" variant="primary" onclick={handleSave}>Save settings</CwButton>
 					</AppActionRow>
 				</AppFormStack>
 			</CwCard>