From 8e502dc7d827d80a40acd6ae08f6df33264e96ed Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 28 Sep 2025 18:46:52 +0000
Subject: [PATCH] feat: unify styling and improve cluster detection

---
 Makefile                                      |   7 +-
 README.md                                     |  12 +-
 docs/frontend-style-guide.md                  |  82 ++
 frontend-modern/src/api/notifications.ts      |   3 +-
 .../src/components/Alerts/CustomRulesTab.tsx  |  50 +-
 .../components/Alerts/EmailProviderSelect.tsx | 352 +++----
 .../src/components/Alerts/OverrideModal.tsx   |  17 +-
 .../src/components/Alerts/ResourceTable.tsx   |  10 +-
 .../src/components/Alerts/ThresholdsTable.tsx |  19 +-
 .../src/components/Alerts/WebhookConfig.tsx   | 210 ++--
 .../src/components/Backups/Backups.tsx        |  49 +-
 .../src/components/Backups/BackupsFilter.tsx  |   5 +-
 .../src/components/Backups/UnifiedBackups.tsx | 116 ++-
 .../components/Dashboard/CompactNodeCard.tsx  |  33 +-
 .../src/components/Dashboard/Dashboard.tsx    | 157 +--
 .../components/Dashboard/DashboardFilter.tsx  |   5 +-
 .../Dashboard/DiskHealthSummary.tsx           |  17 +-
 .../src/components/Dashboard/NodeCard.tsx     |  25 +-
 .../src/components/Dashboard/PBSCard.tsx      |  14 +-
 .../src/components/ErrorBoundary.tsx          |  24 +-
 .../src/components/FirstRunSetup.tsx          |  28 +-
 .../src/components/SecurityWarning.tsx        |  14 +-
 .../Settings/BatchCredentialModal.tsx         |  38 +-
 .../Settings/ChangePasswordModal.tsx          |  28 +-
 .../components/Settings/DiscoveryModal.tsx    |   7 +-
 .../components/Settings/GenerateAPIToken.tsx  |  40 +-
 .../src/components/Settings/GuestURLs.tsx     |  14 +-
 .../src/components/Settings/NodeModal.tsx     | 182 ++--
 .../Settings/QuickSecuritySetup.tsx           |  74 +-
 .../src/components/Settings/Settings.tsx      | 283 +++--
 .../src/components/Storage/DiskList.tsx       |  17 +-
 .../src/components/Storage/Storage.tsx        |  98 +-
 .../src/components/Storage/StorageFilter.tsx  |   5 +-
 .../src/components/shared/Card.tsx            |  47 +
 .../src/components/shared/EmptyState.tsx      |  68 ++
 frontend-modern/src/components/shared/Form.ts |  57 +
 .../components/shared/NodeSummaryTable.tsx    |   7 +-
 .../src/components/shared/SectionHeader.tsx   |  48 +
 .../src/components/shared/SettingsPanel.tsx   |  42 +
 .../src/components/shared/Toggle.tsx          |  56 +
 frontend-modern/src/pages/Alerts.tsx          | 883 ++++++++--------
 frontend-modern/src/stores/events.ts          |  15 +-
 frontend-modern/src/stores/websocket.ts       |  11 +
 internal/api/config_handlers.go               | 975 +++++++++++-------
 internal/api/frontend_embed.go                |  78 +-
 internal/config/client_helpers.go             |  15 +-
 internal/config/config.go                     | 119 ++-
 internal/notifications/notifications.go       |   4 +
 scripts/.go-version                           |   1 +
 scripts/dev-hot.sh                            |  44 +
 scripts/install-go-toolchain.sh               |  49 +
 51 files changed, 2724 insertions(+), 1830 deletions(-)
 create mode 100644 docs/frontend-style-guide.md
 create mode 100644 frontend-modern/src/components/shared/Card.tsx
 create mode 100644 frontend-modern/src/components/shared/EmptyState.tsx
 create mode 100644 frontend-modern/src/components/shared/Form.ts
 create mode 100644 frontend-modern/src/components/shared/SectionHeader.tsx
 create mode 100644 frontend-modern/src/components/shared/SettingsPanel.tsx
 create mode 100644 frontend-modern/src/components/shared/Toggle.tsx
 create mode 100644 scripts/.go-version
 create mode 100755 scripts/dev-hot.sh
 create mode 100755 scripts/install-go-toolchain.sh

diff --git a/Makefile b/Makefile
index 6b2525056..2b088ab09 100644
--- a/Makefile
+++ b/Makefile
@@ -1,6 +1,6 @@
 # Pulse Makefile for development
 
-.PHONY: build run dev frontend backend all clean
+.PHONY: build run dev frontend backend all clean dev-hot
 
 # Build everything
 all: frontend backend
@@ -32,6 +32,9 @@ run: build
 dev: frontend backend
 	sudo systemctl restart pulse-backend
 
+dev-hot:
+	./scripts/dev-hot.sh
+
 # Clean build artifacts
 clean:
 	rm -f pulse
@@ -39,4 +42,4 @@ clean:
 
 # Quick rebuild and restart for development
 restart: frontend backend
-	sudo systemctl restart pulse-backend
\ No newline at end of file
+	sudo systemctl restart pulse-backend
diff --git a/README.md b/README.md
index 1abad8ff7..537cdfa2e 100644
--- a/README.md
+++ b/README.md
@@ -504,12 +504,14 @@ journalctl -u pulse -f
 
 ### Quick Start - Hot Reload (Recommended)
 ```bash
-# Best development experience with instant frontend updates
-./scripts/hot-dev.sh
-# Frontend: http://localhost:5173 (hot reload)
-# Backend: http://localhost:7655
+# Launch Vite + Go with automatic frontend proxying
+make dev-hot
+# Frontend HMR: http://127.0.0.1:5173
+# Backend API:   http://127.0.0.1:7655 (served via the Go app)
 ```
 
+The backend now detects `FRONTEND_DEV_SERVER` and proxies requests straight to the Vite dev server. Edit files under `frontend-modern/src/` and the browser refreshes instantly—no manual rebuilds or service restarts required. Use `CTRL+C` to stop both processes.
+
 ### Production-like Development
 ```bash
 # Watches files and rebuilds/embeds frontend into Go binary
@@ -565,4 +567,4 @@ See Pulse in action with our [complete screenshot gallery →](docs/SCREENSHOTS.
 
 ## License
 
-MIT - See [LICENSE](LICENSE)
\ No newline at end of file
+MIT - See [LICENSE](LICENSE)
diff --git a/docs/frontend-style-guide.md b/docs/frontend-style-guide.md
new file mode 100644
index 000000000..ff585105b
--- /dev/null
+++ b/docs/frontend-style-guide.md
@@ -0,0 +1,82 @@
+# Frontend UI Style Guide
+
+This project now ships a handful of shared primitives to keep typography and form layouts consistent. The snippets below show the preferred usage.
+
+## Section headers
+
+Use `SectionHeader` for any inline card titles, modal headings, or sub-section titles instead of ad-hoc `<h2>`/`<h3>` elements.
+
+```tsx
+import { SectionHeader } from '@/components/shared/SectionHeader';
+
+<SectionHeader
+  label="Overview"
+  title="Cluster health"
+  description="Key metrics across every node"
+  size="sm"       // sm | md | lg (defaults to md)
+  align="left"    // left | center (defaults to left)
+/>
+```
+
+Pass `titleClass`/`descriptionClass` when you need to tweak color or emphasis without rebuilding the layout.
+
+## Empty states
+
+Whenever a panel needs to show a loading, error, or "no data" treatment, render `EmptyState` inside a `Card`.
+
+```tsx
+import { Card } from '@/components/shared/Card';
+import { EmptyState } from '@/components/shared/EmptyState';
+
+<Card padding="lg" tone="info">
+  <EmptyState
+    align="center"              // center | left (defaults to center)
+    tone="info"                 // default | info | success | warning | danger
+    icon={<MyIcon class="h-12 w-12 text-blue-400" />}
+    title="No backups yet"
+    description="Run your first job or adjust the filters to see activity."
+    actions={(
+      <Button onClick={openScheduler}>Open Scheduler</Button>
+    )}
+  />
+</Card>
+```
+
+Icons and actions are optional; omit them when not needed.
+
+## Form helpers
+
+Shared form styles live in `@/components/shared/Form`. Import the helpers and apply them to each field container, label, and control for a uniform look.
+
+```tsx
+import { formField, labelClass, controlClass, formHelpText, formCheckbox } from '@/components/shared/Form';
+
+<div class={formField}>
+  <label class={labelClass('flex items-center gap-2')}>
+    Host URL <span class="text-red-500">*</span>
+  </label>
+  <input
+    type="url"
+    placeholder="https://cluster.example.com:8006"
+    class={controlClass('px-2 py-1.5 font-mono')}
+  />
+  <p class={`${formHelpText} mt-1`}>
+    Use HTTPS on port 8006 for Proxmox VE and 8007 for PBS.
+  </p>
+</div>
+
+<label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+  <input type="checkbox" class={formCheckbox} />
+  Enable this integration
+</label>
+```
+
+Helper summary:
+
+- `formField`: wraps a label + control stack.
+- `labelClass(extra?)`: base typography for labels, with optional extra classes.
+- `controlClass(extra?)`: base input styling; append sizing tweaks (`px-2 py-1.5`) as needed.
+- `formHelpText`: small secondary text (validation notes, hints).
+- `formCheckbox`: shared checkbox styling for toggles inside copy-heavy forms.
+
+Stick to these helpers when building new settings panels, modals, or detail cards. If a component needs a variant that the helpers do not cover, extend them in `Form.ts` so the convention remains centralized.
diff --git a/frontend-modern/src/api/notifications.ts b/frontend-modern/src/api/notifications.ts
index 6e59f0e5d..cb1cc3ea3 100644
--- a/frontend-modern/src/api/notifications.ts
+++ b/frontend-modern/src/api/notifications.ts
@@ -107,7 +107,8 @@ export class NotificationsAPI {
 
   // Webhook management
   static async getWebhooks(): Promise<Webhook[]> {
-    return apiFetchJSON(`${this.baseUrl}/webhooks`);
+    const data = await apiFetchJSON<Webhook[] | null>(`${this.baseUrl}/webhooks`);
+    return Array.isArray(data) ? data : [];
   }
 
   static async createWebhook(webhook: Omit<Webhook, 'id'>): Promise<Webhook> {
diff --git a/frontend-modern/src/components/Alerts/CustomRulesTab.tsx b/frontend-modern/src/components/Alerts/CustomRulesTab.tsx
index 9035fdf56..135223c34 100644
--- a/frontend-modern/src/components/Alerts/CustomRulesTab.tsx
+++ b/frontend-modern/src/components/Alerts/CustomRulesTab.tsx
@@ -1,5 +1,8 @@
 import { For, Show } from 'solid-js';
 import type { CustomAlertRule } from '@/types/alerts';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { EmptyState } from '@/components/shared/EmptyState';
 
 interface CustomRulesTabProps {
   rules: CustomAlertRule[];
@@ -46,13 +49,15 @@ export function CustomRulesTab(props: CustomRulesTabProps) {
   return (
     <div class="space-y-4">
       {/* Header */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-        <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-2">Custom Alert Rules</h3>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          Custom rules apply specific thresholds to guests matching filter conditions. 
-          Rules are evaluated in priority order (higher number = higher priority).
-        </p>
-      </div>
+      <Card padding="md">
+        <SectionHeader
+          title="Custom alert rules"
+          description="Custom rules apply specific thresholds to guests matching filter conditions. Rules are evaluated in priority order (higher number = higher priority)."
+          size="md"
+          titleClass="text-gray-800 dark:text-gray-200"
+          descriptionClass="text-sm text-gray-600 dark:text-gray-400"
+        />
+      </Card>
 
       {/* Priority Order Explanation */}
       <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
@@ -73,21 +78,23 @@ export function CustomRulesTab(props: CustomRulesTabProps) {
 
       {/* Rules List */}
       <Show when={props.rules.length > 0} fallback={
-        <div class="bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600 rounded-lg p-8 text-center">
-          <svg class="mx-auto h-12 w-12 text-gray-400 mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-          </svg>
-          <p class="text-sm text-gray-600 dark:text-gray-400">
-            No custom alert rules defined yet. Create rules from the Dashboard by applying filters and clicking "Create Alert".
-          </p>
-        </div>
+        <Card padding="lg">
+          <EmptyState
+            icon={(
+              <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+              </svg>
+            )}
+            title="No custom alert rules"
+            description="Create rules from the Dashboard by applying filters and choosing Create Alert."
+          />
+        </Card>
       }>
         <div class="space-y-3">
           <For each={props.rules.sort((a, b) => b.priority - a.priority)}>
             {(rule) => (
-              <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-                <div class="p-4">
-                  <div class="flex items-start justify-between mb-3">
+              <Card padding="md" class="overflow-hidden">
+                <div class="flex items-start justify-between mb-3">
                     <div class="flex-1">
                       <div class="flex items-center gap-2 mb-1">
                         <h4 class="text-sm font-medium text-gray-800 dark:text-gray-200">{rule.name}</h4>
@@ -132,7 +139,7 @@ export function CustomRulesTab(props: CustomRulesTabProps) {
                     </div>
                   </div>
 
-                  <div class="space-y-2">
+                <div class="space-y-2">
                     <div class="flex items-start gap-2">
                       <span class="text-xs font-medium text-gray-600 dark:text-gray-400 w-20">Filters:</span>
                       <div class="flex-1">
@@ -167,12 +174,11 @@ export function CustomRulesTab(props: CustomRulesTabProps) {
                       </div>
                     </Show>
                   </div>
-                </div>
-              </div>
+              </Card>
             )}
           </For>
         </div>
       </Show>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
index a03315599..b32d23501 100644
--- a/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
+++ b/frontend-modern/src/components/Alerts/EmailProviderSelect.tsx
@@ -1,5 +1,6 @@
 import { createSignal, createEffect, Show, For } from 'solid-js';
 import { NotificationsAPI } from '@/api/notifications';
+import { formField, labelClass, controlClass, formHelpText, formCheckbox } from '@/components/shared/Form';
 
 interface EmailProvider {
   name: string;
@@ -14,8 +15,8 @@ interface EmailProvider {
 interface EmailConfig {
   enabled: boolean;
   provider: string;
-  server: string;    // Fixed: use 'server' not 'smtpHost'
-  port: number;      // Fixed: use 'port' not 'smtpPort'
+  server: string;
+  port: number;
   from: string;
   username: string;
   password: string;
@@ -37,10 +38,10 @@ interface EmailProviderSelectProps {
 
 export function EmailProviderSelect(props: EmailProviderSelectProps) {
   const [providers, setProviders] = createSignal<EmailProvider[]>([]);
-  const [showProviders, setShowProviders] = createSignal(false);
   const [showAdvanced, setShowAdvanced] = createSignal(false);
-  
-  // Load email providers
+  const [showInstructions, setShowInstructions] = createSignal(false);
+
+  // Load email providers once
   createEffect(async () => {
     try {
       const data = await NotificationsAPI.getEmailProviders();
@@ -49,284 +50,261 @@ export function EmailProviderSelect(props: EmailProviderSelectProps) {
       console.error('Failed to load email providers:', err);
     }
   });
-  
-  const selectProvider = (provider: EmailProvider) => {
+
+  const applyProvider = (provider: EmailProvider | undefined) => {
+    if (!provider) {
+      props.onChange({ ...props.config, provider: '' });
+      setShowInstructions(false);
+      return;
+    }
+
     props.onChange({
       ...props.config,
       provider: provider.name,
-      server: provider.smtpHost,  // Fixed: use 'server' not 'smtpHost'
-      port: provider.smtpPort,    // Fixed: use 'port' not 'smtpPort'  
+      server: provider.smtpHost,
+      port: provider.smtpPort,
       tls: provider.tls,
       startTLS: provider.startTLS,
       username: provider.name === 'SendGrid' ? 'apikey' : props.config.username,
     });
-    setShowProviders(false);
+    setShowInstructions(true);
   };
-  
-  const currentProvider = () => providers().find(p => p.name === props.config.provider);
-  
+
+  const handleProviderChange = (value: string) => {
+    if (!value) {
+      applyProvider(undefined);
+      return;
+    }
+    const provider = providers().find((p) => p.name === value);
+    applyProvider(provider);
+  };
+
+  const currentProvider = () => providers().find((p) => p.name === props.config.provider);
+
   return (
-    <div class="space-y-6">
-      {/* Provider Selection */}
-      <div>
-        <div class="flex items-center justify-between mb-4">
-          <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Email Provider
-          </label>
-          <button type="button"
-            onClick={() => setShowProviders(!showProviders())}
-            class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400"
+    <div class="space-y-4 text-sm overflow-hidden">
+      <div class="grid w-full gap-2 sm:grid-cols-[150px_1fr] sm:items-center">
+        <label class={`${labelClass()} sm:text-right`}>Email provider</label>
+        <div class="flex w-full flex-wrap items-center gap-2 sm:flex-nowrap">
+          <select
+            value={props.config.provider}
+            onChange={(e) => handleProviderChange(e.currentTarget.value)}
+            class={`${controlClass('px-2 py-1.5')} sm:w-auto sm:min-w-[160px]`}
           >
-            {props.config.provider || 'Select Provider'} →
-          </button>
-        </div>
-        
-        <Show when={showProviders()}>
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-2 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+            <option value="">Manual configuration</option>
             <For each={providers()}>
               {(provider) => (
-                <button type="button"
-                  onClick={() => selectProvider(provider)}
-                  class={`p-3 text-left rounded-lg border transition-all ${
-                    props.config.provider === provider.name
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                      : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/30'
-                  }`}
-                >
-                  <div class="font-medium text-sm text-gray-800 dark:text-gray-200">
-                    {provider.name}
-                  </div>
-                  <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                    {provider.smtpHost}:{provider.smtpPort}
-                  </div>
-                </button>
+                <option value={provider.name}>
+                  {provider.name} ({provider.smtpHost}:{provider.smtpPort})
+                </option>
               )}
             </For>
-          </div>
-        </Show>
-        
-        <Show when={currentProvider()}>
-          <div class="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
-            <h4 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
-              Setup Instructions
-            </h4>
-            <pre class="text-xs text-blue-800 dark:text-blue-200 whitespace-pre-wrap">
-              {currentProvider()!.instructions}
-            </pre>
-          </div>
-        </Show>
+          </select>
+          <Show when={props.config.provider}>
+            <button
+              type="button"
+              onClick={() => {
+                const provider = currentProvider();
+                if (provider) applyProvider(provider);
+              }}
+              class="text-xs font-medium text-blue-600 hover:underline dark:text-blue-400"
+            >
+              Reapply defaults
+            </button>
+          </Show>
+        </div>
       </div>
-      
-      {/* Basic Configuration */}
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            SMTP Server
-          </label>
+
+      <Show when={currentProvider()}>
+        <div class="sm:hidden w-full">
+          <button
+            type="button"
+            onClick={() => setShowInstructions(!showInstructions())}
+            class="text-xs font-medium text-blue-600 hover:underline dark:text-blue-300"
+          >
+            {showInstructions() ? 'Hide setup instructions' : 'Show setup instructions'}
+          </button>
+          <Show when={showInstructions()}>
+            <div class="mt-2 rounded border border-blue-200 bg-blue-50 px-3 py-2 text-xs leading-relaxed text-blue-900 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-200">
+              {currentProvider()!.instructions}
+            </div>
+          </Show>
+        </div>
+        <div class="hidden w-full sm:block sm:border-l-2 sm:border-blue-300 sm:pl-3 sm:text-xs sm:leading-relaxed sm:text-blue-800 dark:sm:border-blue-700 dark:sm:text-blue-200">
+          {currentProvider()!.instructions}
+        </div>
+      </Show>
+
+      <div class="grid w-full gap-3 sm:grid-cols-2">
+        <div class={formField}>
+          <label class={labelClass()}>SMTP server</label>
           <input
             type="text"
             value={props.config.server}
             onInput={(e) => props.onChange({ ...props.config, server: e.currentTarget.value })}
             placeholder="smtp.example.com"
-            class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+            class={controlClass('px-2 py-1.5')}
           />
         </div>
-        
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            SMTP Port
-          </label>
+
+        <div class={formField}>
+          <label class={labelClass()}>SMTP port</label>
           <input
             type="number"
             value={props.config.port}
             onInput={(e) => props.onChange({ ...props.config, port: parseInt(e.currentTarget.value) || 587 })}
             placeholder="587"
-            class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+            class={controlClass('px-2 py-1.5')}
           />
         </div>
-        
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            From Address
-          </label>
+
+        <div class={formField}>
+          <label class={labelClass()}>From address</label>
           <input
             type="email"
             value={props.config.from}
             onInput={(e) => props.onChange({ ...props.config, from: e.currentTarget.value })}
             placeholder="noreply@example.com"
-            class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+            class={controlClass('px-2 py-1.5')}
           />
         </div>
-        
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            Reply-To Address
-          </label>
+
+        <div class={formField}>
+          <label class={labelClass()}>Reply-to address</label>
           <input
             type="email"
             value={props.config.replyTo || ''}
             onInput={(e) => props.onChange({ ...props.config, replyTo: e.currentTarget.value })}
-            placeholder="admin@example.com (optional)"
-            class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+            placeholder="admin@example.com"
+            class={controlClass('px-2 py-1.5')}
           />
         </div>
-        
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            Username
-          </label>
+
+        <div class={formField}>
+          <label class={labelClass()}>Username</label>
           <input
             type="text"
             value={props.config.username}
             onInput={(e) => props.onChange({ ...props.config, username: e.currentTarget.value })}
             placeholder={props.config.provider === 'SendGrid' ? 'apikey' : 'username@example.com'}
-            class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+            class={controlClass('px-2 py-1.5')}
           />
         </div>
-        
-        <div>
-          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            Password / API Key
-          </label>
+
+        <div class={formField}>
+          <label class={labelClass()}>Password / API key</label>
           <input
             type="password"
             value={props.config.password}
             onInput={(e) => props.onChange({ ...props.config, password: e.currentTarget.value })}
             placeholder="••••••••"
-            class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+            class={controlClass('px-2 py-1.5')}
           />
         </div>
       </div>
-      
-      {/* Recipients */}
-      <div>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-          Recipients (one per line)
-          <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">
-            Leave empty to send to the From address
-          </span>
-        </label>
+
+      <div class={formField}>
+        <label class={labelClass()}>Recipients (one per line)</label>
         <textarea
           value={props.config.to.join('\n')}
           onInput={(e) => {
-            // Parse recipients - split by newlines and keep all non-empty lines
-            const rawValue = e.currentTarget.value;
-            const recipients = rawValue
+            const recipients = e.currentTarget.value
               .split('\n')
-              .map(r => r.trim())
-              .filter(r => r.length > 0); // Keep all non-empty lines, validation happens on save
+              .map((entry) => entry.trim())
+              .filter((entry) => entry.length > 0);
             props.onChange({ ...props.config, to: recipients });
           }}
           onKeyDown={(e) => {
-            // Allow Enter key in textarea without triggering form submission
             if (e.key === 'Enter') {
               e.stopPropagation();
             }
           }}
-          placeholder={`Leave empty to use ${props.config.from || 'From address'}\nOr add additional recipients:\nadmin@company.com\nops-team@company.com`}
-          rows="3"
-          class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+          rows={3}
+          class={controlClass('px-2 py-1.5 font-mono leading-snug')}
+          placeholder={`Leave empty to use ${props.config.from || 'the from address'}\nOr add one recipient per line`}
         />
       </div>
-      
-      {/* Advanced Settings */}
-      <div>
-        <button type="button"
+
+      <div class="border-t border-gray-200 pt-3 dark:border-gray-700">
+        <button
+          type="button"
           onClick={() => setShowAdvanced(!showAdvanced())}
-          class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 flex items-center gap-1"
+          class="text-xs font-semibold uppercase tracking-wide text-gray-600 transition-colors hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
         >
-          <svg class={`w-4 h-4 transition-transform ${showAdvanced() ? 'rotate-90' : ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-          </svg>
-          Advanced Settings
+          {showAdvanced() ? 'Hide advanced options' : 'Show advanced options'}
         </button>
-        
+
         <Show when={showAdvanced()}>
-          <div class="mt-4 space-y-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <div>
-                <label class="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={props.config.tls}
-                    onChange={(e) => props.onChange({ ...props.config, tls: e.currentTarget.checked })}
-                    class="rounded border-gray-300 dark:border-gray-600 text-blue-600"
-                  />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">Use TLS</span>
-                </label>
-              </div>
-              
-              <div>
-                <label class="flex items-center gap-2">
-                  <input
-                    type="checkbox"
-                    checked={props.config.startTLS}
-                    onChange={(e) => props.onChange({ ...props.config, startTLS: e.currentTarget.checked })}
-                    class="rounded border-gray-300 dark:border-gray-600 text-blue-600"
-                  />
-                  <span class="text-sm text-gray-700 dark:text-gray-300">Use STARTTLS</span>
-                </label>
-              </div>
-              
-              <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Rate Limit
-                </label>
-                <div class="flex items-center gap-2">
-                  <input
-                    type="number"
-                    value={props.config.rateLimit || 60}
-                    onInput={(e) => props.onChange({ ...props.config, rateLimit: parseInt(e.currentTarget.value) })}
-                    class="w-20 px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600"
-                  />
-                  <span class="text-sm text-gray-600 dark:text-gray-400">/min</span>
-                </div>
+          <div class="mt-3 space-y-3 text-xs text-gray-700 dark:text-gray-300">
+            <div class="grid gap-3 sm:grid-cols-3">
+              <label class="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={props.config.tls}
+                  onChange={(e) => props.onChange({ ...props.config, tls: e.currentTarget.checked })}
+                  class={`${formCheckbox} h-4 w-4`}
+                />
+                <span>Use TLS</span>
+              </label>
+              <label class="flex items-center gap-2">
+                <input
+                  type="checkbox"
+                  checked={props.config.startTLS}
+                  onChange={(e) => props.onChange({ ...props.config, startTLS: e.currentTarget.checked })}
+                  class={`${formCheckbox} h-4 w-4`}
+                />
+                <span>Use STARTTLS</span>
+              </label>
+              <div class="flex w-full flex-wrap items-center gap-2 sm:flex-nowrap">
+                <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>Rate limit</label>
+                <input
+                  type="number"
+                  value={props.config.rateLimit || 60}
+                  onInput={(e) => props.onChange({ ...props.config, rateLimit: parseInt(e.currentTarget.value) })}
+                  class={`${controlClass('px-2 py-1 text-sm')} w-20`}
+                />
+                <span class={formHelpText}>/min</span>
               </div>
             </div>
-            
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Max Retries
-                </label>
+
+            <div class="grid w-full gap-3 sm:grid-cols-2">
+              <div class={formField}>
+                <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>Max retries</label>
                 <input
                   type="number"
                   value={props.config.maxRetries || 3}
-                  min="0"
-                  max="5"
+                  min={0}
+                  max={5}
                   onInput={(e) => props.onChange({ ...props.config, maxRetries: parseInt(e.currentTarget.value) })}
-                  class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+                  class={controlClass('px-2 py-1 text-sm')}
                 />
               </div>
-              
-              <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Retry Delay (seconds)
-                </label>
+              <div class={formField}>
+                <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>Retry delay (seconds)</label>
                 <input
                   type="number"
                   value={props.config.retryDelay || 5}
-                  min="1"
-                  max="60"
+                  min={1}
+                  max={60}
                   onInput={(e) => props.onChange({ ...props.config, retryDelay: parseInt(e.currentTarget.value) })}
-                  class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+                  class={controlClass('px-2 py-1 text-sm')}
                 />
               </div>
             </div>
           </div>
         </Show>
       </div>
-      
-      {/* Test Button */}
-      <div class="flex justify-end">
-        <button type="button"
+
+      <div class="flex justify-end pt-2">
+        <button
+          type="button"
           onClick={props.onTest}
           disabled={props.testing || !props.config.enabled}
-          class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          class="rounded border border-blue-500 px-3 py-1.5 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed dark:border-blue-400 dark:text-blue-300 dark:hover:bg-blue-900/30"
         >
-          {props.testing ? 'Sending Test Email...' : 'Send Test Email'}
+          {props.testing ? 'Sending test email…' : 'Send test email'}
         </button>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/components/Alerts/OverrideModal.tsx b/frontend-modern/src/components/Alerts/OverrideModal.tsx
index b11bc7767..a42b9a673 100644
--- a/frontend-modern/src/components/Alerts/OverrideModal.tsx
+++ b/frontend-modern/src/components/Alerts/OverrideModal.tsx
@@ -1,6 +1,7 @@
 import { createSignal, Show, For, createEffect } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { ThresholdSlider } from '@/components/Dashboard/ThresholdSlider';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface Override {
   id?: string;  // Full guest ID (e.g. "Main-node1-105")
@@ -154,9 +155,11 @@ export function OverrideModal(props: OverrideModalProps) {
           <div class="bg-white dark:bg-gray-800 rounded-lg max-w-2xl w-full max-h-[90vh] overflow-hidden">
             {/* Header */}
             <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-              <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
-                {props.existingOverride ? 'Edit Guest Override' : 'Add Guest Override'}
-              </h2>
+              <SectionHeader
+                title={props.existingOverride ? 'Edit guest override' : 'Add guest override'}
+                size="md"
+                titleClass="text-gray-800 dark:text-gray-200"
+              />
             </div>
             
             {/* Content */}
@@ -210,9 +213,11 @@ export function OverrideModal(props: OverrideModalProps) {
               
               {/* Threshold Overrides */}
               <div class={`space-y-4 ${alertsDisabled() ? 'opacity-50 pointer-events-none' : ''}`}>
-                <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  Threshold Overrides
-                </h3>
+                <SectionHeader
+                  title="Threshold overrides"
+                  size="sm"
+                  titleClass="text-gray-700 dark:text-gray-300"
+                />
                 
                 {/* CPU */}
                 <div class="flex items-start gap-3">
diff --git a/frontend-modern/src/components/Alerts/ResourceTable.tsx b/frontend-modern/src/components/Alerts/ResourceTable.tsx
index e0265ebac..e2eaeb129 100644
--- a/frontend-modern/src/components/Alerts/ResourceTable.tsx
+++ b/frontend-modern/src/components/Alerts/ResourceTable.tsx
@@ -1,5 +1,7 @@
 import { For, Show } from 'solid-js';
 import type { Alert } from '@/types/api';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface Resource {
   id: string;
@@ -65,9 +67,9 @@ export function ResourceTable(props: ResourceTableProps) {
   );
 
   return (
-    <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <Card padding="none" class="overflow-hidden border border-gray-200 dark:border-gray-700" border={false}>
       <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-        <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">{props.title}</h3>
+        <SectionHeader title={props.title} size="sm" />
       </div>
       <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
         <style>{`
@@ -570,6 +572,6 @@ export function ResourceTable(props: ResourceTableProps) {
           </tbody>
         </table>
       </div>
-    </div>
+    </Card>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
index 5bae2761c..55d074d41 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
@@ -1,6 +1,8 @@
 import { createSignal, createMemo, Show, onMount, onCleanup } from 'solid-js';
 import type { VM, Container, Node, Alert, Storage, PBSInstance } from '@/types/api';
 import { ResourceTable } from './ResourceTable';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface Override {
   id: string;
@@ -605,14 +607,13 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
   return (
     <div class="space-y-6">
       {/* Global Settings Section */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+      <Card padding="none">
         <div class="p-4">
-          <div>
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Global Default Thresholds</h3>
-            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-              Default thresholds that apply to all resources unless overridden
-            </p>
-          </div>
+          <SectionHeader
+            title="Global default thresholds"
+            description="Default thresholds that apply to all resources unless overridden"
+            size="md"
+          />
         </div>
         
         <div class="border-t border-gray-200 dark:border-gray-700 p-4 space-y-4">
@@ -930,7 +931,7 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
             </div>
           </div>
         </div>
-      </div>
+      </Card>
       
       {/* Search Bar */}
       <div class="relative">
@@ -1040,4 +1041,4 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
       </Show>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/components/Alerts/WebhookConfig.tsx b/frontend-modern/src/components/Alerts/WebhookConfig.tsx
index cabb0be15..1a1c3aa68 100644
--- a/frontend-modern/src/components/Alerts/WebhookConfig.tsx
+++ b/frontend-modern/src/components/Alerts/WebhookConfig.tsx
@@ -1,5 +1,6 @@
 import { createSignal, createEffect, Show, For, Index } from 'solid-js';
 import { NotificationsAPI, Webhook } from '@/api/notifications';
+import { formField, labelClass, controlClass, formHelpText, formCheckbox } from '@/components/shared/Form';
 
 interface WebhookTemplate {
   service: string;
@@ -187,81 +188,82 @@ export function WebhookConfig(props: WebhookConfigProps) {
   const someEnabled = () => props.webhooks.some(w => w.enabled);
 
   return (
-    <div class="space-y-6">
+    <div class="space-y-6 min-w-0 w-full">
       {/* Existing Webhooks List */}
       <Show when={props.webhooks.length > 0}>
-        <div class="space-y-3">
+        <div class="space-y-3 w-full">
           {/* Quick Actions Bar */}
-          <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-            <div class="text-sm text-gray-600 dark:text-gray-400">
+          <div class="flex flex-col gap-2 rounded border border-gray-200 px-3 py-3 text-xs dark:border-gray-700 sm:flex-row sm:items-center sm:justify-between">
+            <div class="text-gray-600 dark:text-gray-400 sm:text-sm">
               {props.webhooks.filter(w => w.enabled).length} of {props.webhooks.length} webhooks enabled
             </div>
-            <div class="flex gap-2">
+            <div class="flex flex-wrap gap-2 sm:flex-nowrap">
               <button
                 onClick={() => toggleAllWebhooks(false)}
                 disabled={!someEnabled()}
-                class="px-3 py-1 text-xs bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                class="w-full rounded border border-gray-300 px-3 py-1 text-xs text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700 sm:w-auto">
                 Disable All
               </button>
               <button
                 onClick={() => toggleAllWebhooks(true)}
                 disabled={allEnabled()}
-                class="px-3 py-1 text-xs bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                class="w-full rounded border border-green-500 px-3 py-1 text-xs text-green-700 transition-colors hover:bg-green-50 dark:border-green-600 dark:text-green-400 dark:hover:bg-green-900/20 sm:w-auto">
                 Enable All
               </button>
             </div>
           </div>
           <For each={props.webhooks}>
             {(webhook) => (
-              <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                <div class="flex items-center justify-between">
-                  <div class="flex-1">
-                    <div class="flex items-center gap-3 mb-1">
-                      <span class="font-medium text-sm text-gray-800 dark:text-gray-200">
-                        {webhook.name}
-                      </span>
-                      <span class="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300">
-                        {serviceName(webhook.service || 'generic')}
-                      </span>
-                      <span class="text-xs px-2 py-0.5 rounded bg-gray-200 dark:bg-gray-600 text-gray-600 dark:text-gray-300">
-                        {webhook.method}
-                      </span>
-                    </div>
-                    <p class="text-xs text-gray-500 dark:text-gray-400 font-mono truncate">
-                      {webhook.url}
-                    </p>
-                  </div>
-                  <div class="flex items-center gap-2 ml-4">
-                    <button 
-                      onClick={() => props.onUpdate({ ...webhook, enabled: !webhook.enabled })}
-                      class={`px-3 py-1 text-xs rounded transition-colors ${
-                        webhook.enabled 
-                          ? 'bg-green-100 text-green-700 hover:bg-green-200 dark:bg-green-900/30 dark:text-green-400 dark:hover:bg-green-900/50'
-                          : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600'
-                      }`}
-                    >
-                      {webhook.enabled ? 'Enabled' : 'Disabled'}
-                    </button>
-                    <button 
-                      onClick={() => webhook.id && props.onTest(webhook.id)}
-                      disabled={props.testing === webhook.id || !webhook.enabled}
-                      class="px-3 py-1 text-xs text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 disabled:opacity-50"
-                    >
-                      {props.testing === webhook.id ? 'Testing...' : 'Test'}
-                    </button>
-                    <button 
-                      onClick={() => editWebhook(webhook)}
-                      class="px-3 py-1 text-xs text-blue-600 hover:text-blue-700 dark:text-blue-400"
-                    >
-                      Edit
-                    </button>
-                    <button 
-                      onClick={() => webhook.id && props.onDelete(webhook.id)}
-                      class="px-3 py-1 text-xs text-red-600 hover:text-red-700 dark:text-red-400"
-                    >
-                      Delete
-                    </button>
-                  </div>
+              <div class="w-full px-3 py-3 border border-gray-200 text-xs dark:border-gray-700 sm:text-sm">
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                  <span class="font-medium text-gray-800 dark:text-gray-200">
+                    {webhook.name}
+                  </span>
+                  <button
+                    onClick={() => props.onUpdate({ ...webhook, enabled: !webhook.enabled })}
+                    class={`rounded border px-3 py-1 text-xs font-medium transition-colors ${
+                      webhook.enabled
+                        ? 'border-green-500 text-green-700 hover:bg-green-50 dark:border-green-600 dark:text-green-400 dark:hover:bg-green-900/20'
+                        : 'border-gray-300 text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700'
+                    }`}
+                  >
+                    {webhook.enabled ? 'Enabled' : 'Disabled'}
+                  </button>
+                </div>
+                <div class="mt-2 flex flex-wrap gap-2 text-[11px] text-gray-600 dark:text-gray-400 sm:text-xs">
+                  <span class="rounded bg-gray-200 px-2 py-0.5 text-gray-700 dark:bg-gray-600 dark:text-gray-200">
+                    {serviceName(webhook.service || 'generic')}
+                  </span>
+                  <span class="rounded bg-gray-200 px-2 py-0.5 text-gray-700 dark:bg-gray-600 dark:text-gray-200">
+                    {webhook.method}
+                  </span>
+                  <span class="rounded bg-gray-200 px-2 py-0.5 text-gray-700 dark:bg-gray-600 dark:text-gray-200">
+                    ID: {webhook.id || '—'}
+                  </span>
+                </div>
+                <p class="mt-2 break-all text-[11px] font-mono text-gray-500 dark:text-gray-400 sm:text-xs">
+                  {webhook.url}
+                </p>
+                <div class="mt-3 flex flex-wrap gap-2 border-t border-gray-100 pt-2 dark:border-gray-700 sm:justify-end w-full">
+                  <button
+                    onClick={() => webhook.id && props.onTest(webhook.id)}
+                    disabled={props.testing === webhook.id || !webhook.enabled}
+                    class="rounded border border-gray-300 px-3 py-1 text-xs text-gray-700 transition-colors hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700 disabled:opacity-50"
+                  >
+                    {props.testing === webhook.id ? 'Testing…' : 'Test'}
+                  </button>
+                  <button
+                    onClick={() => editWebhook(webhook)}
+                    class="rounded border border-blue-300 px-3 py-1 text-xs text-blue-600 transition-colors hover:bg-blue-50 dark:border-blue-500 dark:text-blue-300 dark:hover:bg-blue-900/20"
+                  >
+                    Edit
+                  </button>
+                  <button
+                    onClick={() => webhook.id && props.onDelete(webhook.id)}
+                    class="rounded border border-red-300 px-3 py-1 text-xs text-red-600 transition-colors hover:bg-red-50 dark:border-red-500 dark:text-red-300 dark:hover:bg-red-900/20"
+                  >
+                    Delete
+                  </button>
                 </div>
               </div>
             )}
@@ -271,7 +273,7 @@ export function WebhookConfig(props: WebhookConfigProps) {
       
       {/* Add/Edit Form */}
       <Show when={adding()}>
-        <div class="space-y-4">
+        <div class="space-y-4 text-sm">
           {/* Service Selection */}
           <div>
             <div class="flex items-center justify-between mb-4">
@@ -287,21 +289,21 @@ export function WebhookConfig(props: WebhookConfigProps) {
             </div>
             
             <Show when={showServiceDropdown()}>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-2 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg mb-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-2 border border-gray-200 dark:border-gray-700 px-3 py-2 mb-3 text-xs">
                 <For each={['generic', 'discord', 'slack', 'telegram', 'teams', 'teams-adaptive', 'pagerduty', 'pushover', 'gotify', 'ntfy']}>
                   {(service) => (
                     <button type="button"
                       onClick={() => selectService(service)}
-                      class={`p-3 text-left rounded-lg border transition-all ${
+                      class={`px-2 py-1.5 text-left border transition-colors text-xs ${
                         formData().service === service
                           ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
                           : 'border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/30'
                       }`}
                     >
-                      <div class="font-medium text-sm text-gray-800 dark:text-gray-200">
+                      <div class="font-medium text-xs text-gray-800 dark:text-gray-200">
                         {serviceName(service)}
                       </div>
-                      <div class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                      <div class="text-[11px] text-gray-600 dark:text-gray-400 mt-1">
                         {service === 'generic' ? 'Custom webhook endpoint' :
                          service === 'discord' ? 'Discord server webhook' :
                          service === 'slack' ? 'Slack incoming webhook' :
@@ -320,21 +322,19 @@ export function WebhookConfig(props: WebhookConfigProps) {
             </Show>
             
             <Show when={currentTemplate()?.instructions}>
-              <div class="mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+              <div class="mb-3 border-l-2 border-blue-300 pl-3 text-xs leading-relaxed text-blue-800 dark:border-blue-700 dark:text-blue-200">
                 <h4 class="text-sm font-medium text-blue-900 dark:text-blue-100 mb-2">
                   Setup Instructions
                 </h4>
-                <pre class="text-xs text-blue-800 dark:text-blue-200 whitespace-pre-wrap">
-                  {currentTemplate()!.instructions}
-                </pre>
+                {currentTemplate()!.instructions}
               </div>
             </Show>
           </div>
           
           {/* Basic Configuration */}
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <div class="grid w-full grid-cols-1 gap-3 md:grid-cols-2">
+            <div class={formField}>
+              <label class={labelClass()}>
                 Name
               </label>
               <input
@@ -342,18 +342,18 @@ export function WebhookConfig(props: WebhookConfigProps) {
                 value={formData().name}
                 onInput={(e) => setFormData({ ...formData(), name: e.currentTarget.value })}
                 placeholder={currentTemplate()?.name || 'My Webhook'}
-                class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+                class={controlClass('px-2 py-1.5')}
               />
             </div>
             
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                HTTP Method
+            <div class={formField}>
+              <label class={labelClass()}>
+                HTTP method
               </label>
               <select
                 value={formData().method}
                 onChange={(e) => setFormData({ ...formData(), method: e.currentTarget.value })}
-                class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+                class={controlClass('px-2 py-1.5 pr-8 appearance-none')}
               >
                 <option value="POST">POST</option>
                 <option value="PUT">PUT</option>
@@ -362,8 +362,8 @@ export function WebhookConfig(props: WebhookConfigProps) {
             </div>
           </div>
           
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <div class={formField}>
+            <label class={labelClass()}>
               Webhook URL
             </label>
             <input
@@ -371,17 +371,17 @@ export function WebhookConfig(props: WebhookConfigProps) {
               value={formData().url}
               onInput={(e) => setFormData({ ...formData(), url: e.currentTarget.value })}
               placeholder={currentTemplate()?.urlPattern || 'https://example.com/webhook'}
-              class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600 font-mono"
+              class={controlClass('px-2 py-1.5 font-mono')}
             />
           </div>
           
           {/* Custom Payload Template - only show for generic service */}
           <Show when={formData().service === 'generic'}>
-            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Custom Payload Template (JSON)
-                <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
-                  Optional - Leave empty to use default
+            <div class={formField}>
+              <label class={labelClass('flex items-center gap-2')}>
+                Custom payload template (JSON)
+                <span class="text-xs text-gray-500 dark:text-gray-400">
+                  Optional — leave empty to use default
                 </span>
               </label>
               <textarea
@@ -394,26 +394,26 @@ export function WebhookConfig(props: WebhookConfigProps) {
   "threshold": {{.Threshold}}
 }`}
                 rows={8}
-                class="w-full px-3 py-2 text-xs font-mono border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+                class={controlClass('px-2 py-1.5 text-xs font-mono min-h-[160px]')}
               />
-              <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              <p class={formHelpText + ' mt-1'}>
                 Available variables: {"{{.ID}}, {{.Level}}, {{.Type}}, {{.ResourceName}}, {{.Node}}, {{.Message}}, {{.Value}}, {{.Threshold}}, {{.Duration}}, {{.Timestamp}}"}
               </p>
             </div>
           </Show>
           
           {/* Custom Headers Section */}
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-              Custom Headers
-              <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">
+          <div class={formField}>
+            <label class={labelClass('flex items-center gap-2')}>
+              Custom headers
+              <span class="text-xs text-gray-500 dark:text-gray-400">
                 Add authentication tokens or custom headers
               </span>
             </label>
-            <div class="space-y-2">
+            <div class="space-y-2 text-xs">
               <Index each={headerInputs()}>
                 {(header, index) => (
-                  <div class="flex gap-2">
+                  <div class="flex gap-2 text-xs">
                     <input
                       type="text"
                       value={header().key}
@@ -425,8 +425,8 @@ export function WebhookConfig(props: WebhookConfigProps) {
                           return newInputs;
                         });
                       }}
-                      placeholder="Header Name"
-                      class="flex-1 px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+                      placeholder="Header name"
+                      class={controlClass('flex-1 px-2 py-1.5 text-xs font-mono')}
                     />
                     <input
                       type="text"
@@ -439,15 +439,15 @@ export function WebhookConfig(props: WebhookConfigProps) {
                           return newInputs;
                         });
                       }}
-                      placeholder="Header Value"
-                      class="flex-1 px-3 py-2 text-sm border rounded-lg dark:bg-gray-700 dark:border-gray-600"
+                      placeholder="Header value"
+                      class={controlClass('flex-1 px-2 py-1.5 text-xs font-mono')}
                     />
                     <button
                       type="button"
                       onClick={() => {
                         setHeaderInputs(inputs => inputs.filter((_, i) => i !== index));
                       }}
-                      class="px-3 py-2 text-sm text-red-600 hover:text-red-700 dark:text-red-400 border border-red-300 dark:border-red-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20"
+                      class="px-2 py-1 text-xs text-red-600 hover:underline dark:text-red-400"
                     >
                       Remove
                     </button>
@@ -464,9 +464,9 @@ export function WebhookConfig(props: WebhookConfigProps) {
                     value: '' 
                   }]);
                 }}
-                class="w-full py-2 text-sm border border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400"
+                class="w-full border border-dashed border-gray-300 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
               >
-                + Add Header
+                + Add header
               </button>
             </div>
             <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
@@ -475,21 +475,21 @@ export function WebhookConfig(props: WebhookConfigProps) {
           </div>
           
           <div>
-            <label class="flex items-center gap-2">
+            <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
               <input
                 type="checkbox"
                 checked={formData().enabled}
                 onChange={(e) => setFormData({ ...formData(), enabled: e.currentTarget.checked })}
-                class="rounded border-gray-300 dark:border-gray-600 text-blue-600"
+                class={formCheckbox}
               />
-              <span class="text-sm text-gray-700 dark:text-gray-300">Enable this webhook</span>
+              <span>Enable this webhook</span>
             </label>
           </div>
           
-          <div class="flex justify-end gap-2">
+          <div class="flex justify-end gap-2 text-xs">
             <button 
               onClick={cancelForm}
-              class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+              class="px-3 py-1.5 border border-gray-300 rounded text-xs hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200"
             >
               Cancel
             </button>
@@ -509,7 +509,7 @@ export function WebhookConfig(props: WebhookConfigProps) {
                   props.onTest(tempId, { ...formData(), headers });
                 }}
                 disabled={props.testing === (editingId() || 'temp-new-webhook')}
-                class="px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                class="px-3 py-1.5 border border-gray-300 rounded text-xs hover:bg-gray-100 dark:border-gray-600 dark:text-gray-200"
               >
                 {props.testing === (editingId() || 'temp-new-webhook') ? 'Testing...' : 'Test'}
               </button>
@@ -517,7 +517,7 @@ export function WebhookConfig(props: WebhookConfigProps) {
             <button 
               onClick={saveWebhook}
               disabled={!formData().name || !formData().url}
-              class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              class="px-3 py-1.5 bg-blue-600 text-white text-xs rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
             >
               {editingId() ? 'Update' : 'Add'} Webhook
             </button>
@@ -537,11 +537,11 @@ export function WebhookConfig(props: WebhookConfigProps) {
               value: 'application/json'
             }]);
           }}
-          class="w-full py-2 text-sm border border-dashed border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-gray-600 dark:text-gray-400"
+          class="w-full border border-dashed border-gray-300 px-2 py-1 text-xs text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-800"
         >
           + Add Webhook
         </button>
       </Show>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/components/Backups/Backups.tsx b/frontend-modern/src/components/Backups/Backups.tsx
index 4ebdde6d5..3d658d678 100644
--- a/frontend-modern/src/components/Backups/Backups.tsx
+++ b/frontend-modern/src/components/Backups/Backups.tsx
@@ -1,4 +1,6 @@
 import { Component, Show } from 'solid-js';
+import { Card } from '@/components/shared/Card';
+import { EmptyState } from '@/components/shared/EmptyState';
 import { useWebSocket } from '@/App';
 import UnifiedBackups from './UnifiedBackups';
 
@@ -9,30 +11,35 @@ const Backups: Component = () => {
     <div>
       {/* Loading State */}
       <Show when={connected() && !state.pveBackups && !state.pbs}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center">
-            <div class="inline-flex items-center justify-center w-12 h-12 mb-4">
-              <svg class="animate-spin h-8 w-8 text-blue-600 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-              </svg>
-            </div>
-            <p class="text-sm text-gray-600 dark:text-gray-400">Loading backup information...</p>
-          </div>
-        </div>
+        <Card padding="lg">
+          <EmptyState
+            icon={(
+              <div class="inline-flex items-center justify-center w-12 h-12">
+                <svg class="animate-spin h-8 w-8 text-blue-600 dark:text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+              </div>
+            )}
+            title="Loading backup information..."
+          />
+        </Card>
       </Show>
 
       {/* Disconnected State */}
       <Show when={!connected()}>
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-600 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="mx-auto h-12 w-12 text-red-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            <h3 class="text-sm font-medium text-red-800 dark:text-red-200 mb-2">Connection Lost</h3>
-            <p class="text-xs text-red-700 dark:text-red-300">Unable to connect to the backend server. Attempting to reconnect...</p>
-          </div>
-        </div>
+        <Card padding="lg" tone="danger">
+          <EmptyState
+            icon={(
+              <svg class="h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            )}
+            title="Connection lost"
+            description="Unable to connect to the backend server. Attempting to reconnect..."
+            tone="danger"
+          />
+        </Card>
       </Show>
 
       {/* Main Content - Unified Backups View */}
@@ -43,4 +50,4 @@ const Backups: Component = () => {
   );
 };
 
-export default Backups;
\ No newline at end of file
+export default Backups;
diff --git a/frontend-modern/src/components/Backups/BackupsFilter.tsx b/frontend-modern/src/components/Backups/BackupsFilter.tsx
index 1f9b5ffc3..153f2c72a 100644
--- a/frontend-modern/src/components/Backups/BackupsFilter.tsx
+++ b/frontend-modern/src/components/Backups/BackupsFilter.tsx
@@ -1,4 +1,5 @@
 import { Component, Show } from 'solid-js';
+import { Card } from '@/components/shared/Card';
 import { showTooltip, hideTooltip } from '@/components/shared/Tooltip';
 
 interface BackupsFilterProps {
@@ -16,7 +17,7 @@ interface BackupsFilterProps {
 
 export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
   return (
-    <div class="backups-filter mb-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-3">
+    <Card class="backups-filter mb-3" padding="sm">
       <div class="flex flex-col lg:flex-row gap-3">
         {/* Search Bar */}
         <div class="flex gap-2 flex-1">
@@ -212,6 +213,6 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
           </Show>
         </div>
       </div>
-    </div>
+    </Card>
   );
 };
\ No newline at end of file
diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index ef25f2c39..171262135 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -6,6 +6,9 @@ import { parseFilterStack, evaluateFilterStack } from '@/utils/searchQuery';
 import { UnifiedNodeSelector } from '@/components/shared/UnifiedNodeSelector';
 import { MetricBar } from '@/components/Dashboard/MetricBar';
 import { BackupsFilter } from './BackupsFilter';
+import { Card } from '@/components/shared/Card';
+import { EmptyState } from '@/components/shared/EmptyState';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 type BackupType = 'snapshot' | 'local' | 'remote';
 type GuestType = 'VM' | 'LXC' | 'Host' | 'Template' | 'ISO';
@@ -968,24 +971,29 @@ const UnifiedBackups: Component = () => {
     <div class="space-y-4">
       {/* Empty State - No nodes at all configured */}
       <Show when={!isLoading() && (state.nodes || []).length === 0 && (!state.pbs || state.pbs.length === 0)}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No backup sources configured</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Add a Proxmox VE or PBS node in the Settings tab to start monitoring backups.</p>
-            <button type="button"
-              onClick={() => {
-                const settingsTab = document.querySelector('[role="tab"]:last-child') as HTMLElement;
-                settingsTab?.click();
-              }}
-              class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              Go to Settings
-            </button>
-          </div>
-        </div>
+        <Card padding="lg">
+          <EmptyState
+            icon={(
+              <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            )}
+            title="No backup sources configured"
+            description="Add a Proxmox VE or PBS node in the Settings tab to start monitoring backups."
+            actions={(
+              <button
+                type="button"
+                onClick={() => {
+                  const settingsTab = document.querySelector('[role="tab"]:last-child') as HTMLElement;
+                  settingsTab?.click();
+                }}
+                class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Go to Settings
+              </button>
+            )}
+          />
+        </Card>
       </Show>
 
       {/* Unified Node Selector */}
@@ -1006,7 +1014,7 @@ const UnifiedBackups: Component = () => {
 
       {/* Removed old PBS table */}
       <Show when={false && sortedPBSInstances().length > 0}>
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+        <Card padding="none" class="overflow-hidden">
           <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
             <style>{`
               .overflow-x-auto::-webkit-scrollbar { display: none; }
@@ -1145,18 +1153,16 @@ const UnifiedBackups: Component = () => {
               </tbody>
             </table>
           </div>
-        </div>
+        </Card>
       </Show>
 
       {/* Main Content - show when any nodes or PBS are configured */}
       <Show when={(state.nodes || []).length > 0 || (state.pbs && state.pbs.length > 0)}>
       {/* Backup Frequency Chart - hide when no backups match the filter */}
       <Show when={filteredData().length > 0}>
-      <div class="p-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
-        <div class="flex justify-between items-center mb-3">
-          <div class="flex items-center gap-4">
-            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Backup Frequency</h3>
-          </div>
+      <Card padding="md">
+        <div class="mb-3 flex items-start justify-between gap-3">
+          <SectionHeader title="Backup frequency" size="sm" class="flex-1" />
           <div class="flex items-center gap-2 text-xs">
             <div class="flex items-center gap-1">
               <button type="button"
@@ -1218,8 +1224,18 @@ const UnifiedBackups: Component = () => {
           <Show 
             when={chartData().data.length > 0}
             fallback={
-              <div class="h-full flex items-center justify-center">
-                <p class="text-sm text-gray-500 dark:text-gray-400">No backup data for selected time range</p>
+              <div class="flex h-full items-center justify-center">
+                <EmptyState
+                  class="max-w-xs"
+                  align="center"
+                  icon={(
+                    <svg class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 19h16M7 10h2v9H7zm4-5h2v14h-2zm4 8h2v6h-2z" />
+                    </svg>
+                  )}
+                  title="No backup data"
+                  description="Adjust filters or expand the time range to see activity."
+                />
               </div>
             }
           >
@@ -1545,7 +1561,7 @@ const UnifiedBackups: Component = () => {
             </span>
           </div>
         </div>
-      </div>
+      </Card>
       </Show>
 
       {/* Backups Filter */}
@@ -1563,7 +1579,7 @@ const UnifiedBackups: Component = () => {
       />
 
       {/* Table */}
-      <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+      <Card padding="none" class="mb-4 overflow-hidden">
         <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
         <style>{`
           .overflow-x-auto::-webkit-scrollbar { display: none; }
@@ -1582,22 +1598,34 @@ const UnifiedBackups: Component = () => {
         <Show
           when={!isLoading()}
           fallback={
-            <div class="text-center py-8 text-gray-500 dark:text-gray-400">
-              <div class="flex flex-col items-center gap-4">
-                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
-                <p class="text-lg">Loading backup data...</p>
-                <p class="text-sm">This may take up to 20 seconds on first load</p>
-              </div>
-            </div>
+            <Card padding="lg">
+              <EmptyState
+                icon={(
+                  <svg class="h-12 w-12 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
+                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                )}
+                title="Loading backup data..."
+                description="This may take up to 20 seconds on the first load."
+              />
+            </Card>
           }
         >
           <Show
             when={groupedData().length > 0}
             fallback={
-              <div class="text-center py-8 text-gray-500 dark:text-gray-400">
-                <p class="text-lg">No backups found</p>
-                <p class="text-sm mt-2">No backups, snapshots, or remote backups match your filters</p>
-              </div>
+              <Card padding="lg">
+                <EmptyState
+                  icon={(
+                    <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                  )}
+                  title="No backups match your filters"
+                  description="Try adjusting filters or selecting a different time range."
+                />
+              </Card>
             }
           >
           {/* Mobile Card View - Compact */}
@@ -1610,7 +1638,7 @@ const UnifiedBackups: Component = () => {
                   </div>
                   <For each={group.items}>
                     {(item) => (
-                      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-2 hover:shadow-sm transition-shadow">
+                      <Card padding="sm" class="hover:shadow-sm transition-shadow">
                         {/* Compact header row */}
                         <div class="flex items-center justify-between gap-2 mb-1">
                           <div class="flex items-center gap-2 min-w-0 flex-1">
@@ -1666,7 +1694,7 @@ const UnifiedBackups: Component = () => {
                             </span>
                           </Show>
                         </div>
-                      </div>
+                      </Card>
                     )}
                   </For>
                 </div>
@@ -1939,7 +1967,7 @@ const UnifiedBackups: Component = () => {
           </Show>
         </Show>
         </div>
-      </div>
+      </Card>
 
       {/* Tooltip */}
       <Show when={tooltip()}>
@@ -1961,4 +1989,4 @@ const UnifiedBackups: Component = () => {
   );
 };
 
-export default UnifiedBackups;
\ No newline at end of file
+export default UnifiedBackups;
diff --git a/frontend-modern/src/components/Dashboard/CompactNodeCard.tsx b/frontend-modern/src/components/Dashboard/CompactNodeCard.tsx
index 90fe70177..7d816d7a1 100644
--- a/frontend-modern/src/components/Dashboard/CompactNodeCard.tsx
+++ b/frontend-modern/src/components/Dashboard/CompactNodeCard.tsx
@@ -4,6 +4,7 @@ import { formatUptime } from '@/utils/format';
 import { getAlertStyles, getResourceAlerts } from '@/utils/alerts';
 import { AlertIndicator } from '@/components/shared/AlertIndicators';
 import { useWebSocket } from '@/App';
+import { Card } from '@/components/shared/Card';
 
 interface CompactNodeCardProps {
   node: Node;
@@ -57,14 +58,18 @@ const CompactNodeCard: Component<CompactNodeCardProps> = (props) => {
   if (props.variant === 'ultra-compact') {
     // Single line format for 10+ nodes
     return (
-      <div 
-        class={`flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-gray-800 rounded border ${
+      <Card
+        padding="none"
+        border={false}
+        hoverable
+        class={`flex items-center gap-2 px-3 py-1.5 ${
           props.isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' :
           !isOnline() ? 'border-red-500' :
           alertStyles.hasAlert ? 'border-orange-500' :
           'border-gray-200 dark:border-gray-700'
-        } hover:shadow-sm transition-all cursor-pointer hover:scale-[1.01]`}
-        onClick={props.onClick}>
+        } border transition-all cursor-pointer hover:scale-[1.01]`}
+        onClick={props.onClick}
+      >
         {/* Status dot */}
         <span class={`w-2 h-2 rounded-full ${
           props.node.connectionHealth === 'degraded' 
@@ -114,23 +119,27 @@ const CompactNodeCard: Component<CompactNodeCardProps> = (props) => {
         </div>
 
         {/* Uptime */}
-        <span class="text-xs text-gray-500 dark:text-gray-400 ml-auto">
+        <span class="ml-auto text-xs text-gray-500 dark:text-gray-400">
           ↑{formatUptime(props.node.uptime)}
         </span>
-      </div>
+      </Card>
     );
   }
 
   // Compact bar format for 5-9 nodes
   return (
-    <div 
-      class={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border ${
+    <Card
+      padding="sm"
+      border={false}
+      hoverable
+      class={`border ${
         props.isSelected ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20' :
         !isOnline() ? 'border-red-500' :
         alertStyles.hasAlert ? 'border-orange-500' :
         'border-gray-200 dark:border-gray-700'
-      } p-3 cursor-pointer transition-all hover:scale-[1.02]`}
-      onClick={props.onClick}>
+      } cursor-pointer transition-all hover:scale-[1.02]`}
+      onClick={props.onClick}
+    >
       <div class="flex items-center justify-between mb-2">
         <div class="flex items-center gap-2">
           <span class={`w-2 h-2 rounded-full ${
@@ -190,8 +199,8 @@ const CompactNodeCard: Component<CompactNodeCardProps> = (props) => {
           </span>
         </div>
       </div>
-    </div>
+    </Card>
   );
 };
 
-export default CompactNodeCard;
\ No newline at end of file
+export default CompactNodeCard;
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 4977bcb09..2bf26d6dd 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -13,6 +13,9 @@ import { formatBytes, formatUptime } from '@/utils/format';
 import { DashboardFilter } from './DashboardFilter';
 import { GuestMetadataAPI } from '@/api/guestMetadata';
 import type { GuestMetadata } from '@/api/guestMetadata';
+import { Card } from '@/components/shared/Card';
+import { EmptyState } from '@/components/shared/EmptyState';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface DashboardProps {
   vms: VM[];
@@ -491,7 +494,7 @@ export function Dashboard(props: DashboardProps) {
       
       {/* Removed old node table - keeping the rest unchanged */}
       <Show when={false}>
-        <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+        <Card padding="none" class="mb-4">
           <div class="overflow-x-auto">
             <table class="w-full">
               <thead>
@@ -617,7 +620,7 @@ export function Dashboard(props: DashboardProps) {
               </tbody>
             </table>
           </div>
-        </div>
+        </Card>
       </Show>
       
       {/* Dashboard Filter */}
@@ -640,77 +643,79 @@ export function Dashboard(props: DashboardProps) {
 
       {/* Loading State */}
       <Show when={connected() && !initialDataReceived()}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="animate-spin mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Loading dashboard data...</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400">
-              {reconnecting() ? 'Reconnecting to monitoring service...' : 'Connecting to monitoring service'}
-            </p>
-            <Show when={!connected() && !reconnecting()}>
-              <button
-                onClick={() => reconnect()}
-                class="mt-3 px-4 py-2 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
-              >
-                Retry Connection
-              </button>
-            </Show>
-          </div>
-        </div>
+        <Card padding="lg">
+          <EmptyState
+            icon={(
+              <svg class="mx-auto h-12 w-12 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+              </svg>
+            )}
+            title="Loading dashboard data..."
+            description={reconnecting() ? 'Reconnecting to monitoring service…' : 'Connecting to monitoring service'}
+          />
+        </Card>
       </Show>
 
       {/* Empty State - No PVE Nodes Configured */}
       <Show when={connected() && initialDataReceived() && props.nodes.filter(n => n.type === 'pve').length === 0 && props.vms.length === 0 && props.containers.length === 0}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No Proxmox VE nodes configured</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Add a Proxmox VE node in the Settings tab to start monitoring your infrastructure.</p>
-            <button type="button"
-              onClick={() => {
-                const settingsTab = document.querySelector('[role="tab"]:last-child') as HTMLElement;
-                settingsTab?.click();
-              }}
-              class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              Go to Settings
-            </button>
-          </div>
-        </div>
+        <Card padding="lg">
+          <EmptyState
+            icon={(
+              <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            )}
+            title="No Proxmox VE nodes configured"
+            description="Add a Proxmox VE node in the Settings tab to start monitoring your infrastructure."
+            actions={(
+              <button
+                type="button"
+                onClick={() => {
+                  const settingsTab = document.querySelector('[role="tab"]:last-child') as HTMLElement;
+                  settingsTab?.click();
+                }}
+                class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Go to Settings
+              </button>
+            )}
+          />
+        </Card>
       </Show>
 
       {/* Disconnected State */}
       <Show when={!connected()}>
-        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-600 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="mx-auto h-12 w-12 text-red-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-            </svg>
-            <h3 class="text-sm font-medium text-red-800 dark:text-red-200 mb-2">Connection Lost</h3>
-            <p class="text-xs text-red-700 dark:text-red-300">
-              {reconnecting() ? 'Attempting to reconnect...' : 'Unable to connect to the backend server'}
-            </p>
-            <Show when={!reconnecting()}>
-              <button
-                onClick={() => reconnect()}
-                class="mt-3 px-4 py-2 text-xs bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
-              >
-                Reconnect Now
-              </button>
-            </Show>
-          </div>
-        </div>
+        <Card padding="lg" tone="danger">
+          <EmptyState
+            icon={(
+              <svg class="h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            )}
+            title="Connection lost"
+            description={reconnecting() ? 'Attempting to reconnect…' : 'Unable to connect to the backend server'}
+            tone="danger"
+            actions={
+              !reconnecting()
+                ? (
+                  <button
+                    onClick={() => reconnect()}
+                    class="mt-2 inline-flex items-center px-4 py-2 text-xs font-medium rounded bg-red-600 text-white hover:bg-red-700 transition-colors"
+                  >
+                    Reconnect now
+                  </button>
+                )
+                : undefined
+            }
+          />
+        </Card>
       </Show>
 
       {/* Table View */}
       <Show when={connected() && initialDataReceived() && filteredGuests().length > 0}>
         <ComponentErrorBoundary name="Guest Table">
-          <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <Card padding="none" class="mb-4 overflow-hidden">
           <ScrollableTable 
             minWidth="900px"
           >
@@ -834,24 +839,26 @@ export function Dashboard(props: DashboardProps) {
             </tbody>
           </table>
         </ScrollableTable>
-        </div>
+        </Card>
         </ComponentErrorBoundary>
       </Show>
 
       <Show when={connected() && initialDataReceived() && filteredGuests().length === 0 && (props.vms.length > 0 || props.containers.length > 0)}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8 mb-4">
-          <div class="text-center">
-            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No guests found</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400">
-              {search() && search().trim() !== '' 
-                ? `No guests match your search "${search()}"` 
-                : 'No guests match your current filters'}
-            </p>
-          </div>
-        </div>
+        <Card padding="lg" class="mb-4">
+          <EmptyState
+            icon={(
+              <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            )}
+            title="No guests found"
+            description={
+              search() && search().trim() !== ''
+                ? `No guests match your search "${search()}"`
+                : 'No guests match your current filters'
+            }
+          />
+        </Card>
       </Show>
       
       {/* Stats */}
@@ -876,4 +883,4 @@ export function Dashboard(props: DashboardProps) {
       <TooltipComponent />
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/components/Dashboard/DashboardFilter.tsx b/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
index e87f3c79d..c609fea71 100644
--- a/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
+++ b/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
@@ -1,4 +1,5 @@
 import { Component, Show } from 'solid-js';
+import { Card } from '@/components/shared/Card';
 
 interface DashboardFilterProps {
   search: () => string;
@@ -17,7 +18,7 @@ interface DashboardFilterProps {
 
 export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
   return (
-    <div class="dashboard-filter mb-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-3">
+    <Card class="dashboard-filter mb-3" padding="sm">
       <div class="flex flex-col lg:flex-row gap-3">
         {/* Search Bar */}
         <div class="flex gap-2 flex-1">
@@ -185,6 +186,6 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
           </Show>
         </div>
       </div>
-    </div>
+    </Card>
   );
 };
\ No newline at end of file
diff --git a/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx b/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx
index 4707a1182..c43b5b72e 100644
--- a/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx
+++ b/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx
@@ -1,5 +1,7 @@
 import { Component, createMemo, Show } from 'solid-js';
 import type { PhysicalDisk } from '@/types/api';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface DiskHealthSummaryProps {
   disks: PhysicalDisk[];
@@ -50,11 +52,14 @@ export const DiskHealthSummary: Component<DiskHealthSummaryProps> = (props) => {
   
   return (
     <Show when={diskStats().total > 0}>
-      <div class={`rounded-lg p-4 border ${healthBg()}`}>
+      <Card padding="md" border={false} class={`${healthBg()}`}>
         <div class="flex items-center justify-between mb-3">
-          <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-            Disk Health Summary
-          </h3>
+          <SectionHeader
+            title="Disk health summary"
+            size="sm"
+            class="flex-1"
+            titleClass="text-gray-900 dark:text-gray-100"
+          />
           <span class={`text-2xl font-bold ${healthColor()}`}>
             {diskStats().healthy}/{diskStats().total}
           </span>
@@ -123,7 +128,7 @@ export const DiskHealthSummary: Component<DiskHealthSummaryProps> = (props) => {
             </div>
           </div>
         </div>
-      </div>
+      </Card>
     </Show>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Dashboard/NodeCard.tsx b/frontend-modern/src/components/Dashboard/NodeCard.tsx
index dbfb596b1..6059928d4 100644
--- a/frontend-modern/src/components/Dashboard/NodeCard.tsx
+++ b/frontend-modern/src/components/Dashboard/NodeCard.tsx
@@ -4,6 +4,7 @@ import { formatUptime } from '@/utils/format';
 import { getAlertStyles, getResourceAlerts } from '@/utils/alerts';
 import { AlertIndicator, AlertCountBadge } from '@/components/shared/AlertIndicators';
 import { useWebSocket } from '@/App';
+import { Card } from '@/components/shared/Card';
 
 interface NodeCardProps {
   node: Node;
@@ -15,9 +16,9 @@ const NodeCard: Component<NodeCardProps> = (props) => {
   // Early return if node data is incomplete
   if (!props.node || !props.node.memory || !props.node.disk) {
     return (
-      <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-3 border border-gray-200 dark:border-gray-700 flex flex-col gap-1 w-[180px]">
+      <Card padding="sm" class="flex w-[180px] flex-col gap-1">
         <div class="text-sm text-gray-500">Loading node data...</div>
-      </div>
+      </Card>
     );
   }
   
@@ -107,20 +108,20 @@ const NodeCard: Component<NodeCardProps> = (props) => {
   const getBorderClass = () => {
     // Selected nodes get blue ring
     if (props.isSelected) {
-      return 'ring-2 ring-blue-500 border border-gray-200 dark:border-gray-700';
+      return 'ring-2 ring-blue-500 border-blue-200 dark:border-blue-500';
     }
     // Offline nodes get red ring
     if (!isOnline()) {
-      return 'ring-2 ring-red-500 border border-gray-200 dark:border-gray-700';
+      return 'ring-2 ring-red-500 border-red-200 dark:border-red-600';
     }
     // Alert nodes get colored ring based on severity
     if (alertStyles.hasAlert) {
       return alertStyles.severity === 'critical' 
-        ? 'ring-2 ring-red-500 border border-gray-200 dark:border-gray-700' 
-        : 'ring-2 ring-orange-500 border border-gray-200 dark:border-gray-700';
+        ? 'ring-2 ring-red-500 border-red-200 dark:border-red-600' 
+        : 'ring-2 ring-orange-500 border-orange-200 dark:border-orange-500';
     }
     // Normal nodes get standard border
-    return 'border border-gray-200 dark:border-gray-700';
+    return '';
   };
   
   // Get background class from alert styles but remove the border-l-4 part
@@ -131,7 +132,11 @@ const NodeCard: Component<NodeCardProps> = (props) => {
   };
   
   return (
-    <div class={`bg-white dark:bg-gray-800 shadow-md rounded-lg p-3 flex flex-col gap-2 w-[180px] ${getBorderClass()} ${getBackgroundClass()}`}>
+    <Card
+      padding="sm"
+      class={`flex w-[180px] flex-col gap-2 ${getBorderClass()} ${getBackgroundClass()}`.trim()}
+      hoverable
+    >
       {/* Header */}
       <div class="flex justify-between items-center">
         <h3 class="text-xs font-semibold truncate text-gray-800 dark:text-gray-200 flex items-center gap-1">
@@ -180,8 +185,8 @@ const NodeCard: Component<NodeCardProps> = (props) => {
         <span title={`Uptime: ${formatUptime(props.node.uptime)}`}>↑{formatUptime(props.node.uptime)}</span>
         <span title={`Load: ${normalizedLoad()}`}>⚡{normalizedLoad()}</span>
       </div>
-    </div>
+    </Card>
   );
 };
 
-export default NodeCard;
\ No newline at end of file
+export default NodeCard;
diff --git a/frontend-modern/src/components/Dashboard/PBSCard.tsx b/frontend-modern/src/components/Dashboard/PBSCard.tsx
index 254ca60be..651233af1 100644
--- a/frontend-modern/src/components/Dashboard/PBSCard.tsx
+++ b/frontend-modern/src/components/Dashboard/PBSCard.tsx
@@ -1,6 +1,8 @@
 import { Component, Show, createMemo } from 'solid-js';
 import type { PBSInstance } from '@/types/api';
 import { formatUptime, formatBytes } from '@/utils/format';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface PBSCardProps {
   instance: PBSInstance;
@@ -125,9 +127,13 @@ const PBSCard: Component<PBSCardProps> = (props) => {
   };
 
   return (
-    <div class={`bg-white dark:bg-gray-800 shadow-md rounded-lg p-2 flex flex-col gap-1 w-[250px] ${getBorderClass()}`}>
+    <Card
+      padding="none"
+      border={false}
+      class={`shadow-md p-2 flex flex-col gap-1 w-[250px] ${getBorderClass()}`}
+    >
       {/* Header */}
-      <div class="flex justify-between items-center">
+      <div class="flex items-center justify-between">
         <h3 class="text-sm font-semibold truncate text-gray-800 dark:text-gray-200 flex items-center gap-2">
           <a 
             href={props.instance.host} 
@@ -254,8 +260,8 @@ const PBSCard: Component<PBSCardProps> = (props) => {
           </div>
         </Show>
       </Show>
-    </div>
+    </Card>
   );
 };
 
-export default PBSCard;
\ No newline at end of file
+export default PBSCard;
diff --git a/frontend-modern/src/components/ErrorBoundary.tsx b/frontend-modern/src/components/ErrorBoundary.tsx
index ff7af7b2c..4a22fc19f 100644
--- a/frontend-modern/src/components/ErrorBoundary.tsx
+++ b/frontend-modern/src/components/ErrorBoundary.tsx
@@ -1,5 +1,6 @@
 import { Component, JSX, createSignal, ErrorBoundary as SolidErrorBoundary } from 'solid-js';
 import { logError } from '@/utils/logger';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface ErrorBoundaryProps {
   children: JSX.Element;
@@ -19,12 +20,13 @@ const DefaultErrorFallback: Component<{ error: Error; reset: () => void }> = (pr
               d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
           </svg>
           <div>
-            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-              Something went wrong
-            </h2>
-            <p class="text-sm text-gray-600 dark:text-gray-400">
-              An unexpected error occurred
-            </p>
+            <SectionHeader
+              title="Something went wrong"
+              description="An unexpected error occurred"
+              size="md"
+              titleClass="text-gray-900 dark:text-gray-100"
+              descriptionClass="text-sm text-gray-600 dark:text-gray-400"
+            />
           </div>
         </div>
 
@@ -107,9 +109,11 @@ export const ComponentErrorBoundary: Component<{
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                 d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
             </svg>
-            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
-              Error in {props.name}
-            </h3>
+            <SectionHeader
+              title={`Error in ${props.name}`}
+              size="sm"
+              titleClass="text-red-800 dark:text-red-200"
+            />
           </div>
           <p class="text-xs text-red-700 dark:text-red-300 mb-2">
             {error.message}
@@ -129,4 +133,4 @@ export const ComponentErrorBoundary: Component<{
       {props.children}
     </ErrorBoundary>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/FirstRunSetup.tsx b/frontend-modern/src/components/FirstRunSetup.tsx
index 2a180fdb9..9a5a57aad 100644
--- a/frontend-modern/src/components/FirstRunSetup.tsx
+++ b/frontend-modern/src/components/FirstRunSetup.tsx
@@ -2,6 +2,7 @@ import { Component, createSignal, Show, onMount } from 'solid-js';
 import { showSuccess, showError } from '@/utils/toast';
 import { copyToClipboard } from '@/utils/clipboard';
 import { STORAGE_KEYS } from '@/constants';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 export const FirstRunSetup: Component = () => {
   const [username, setUsername] = createSignal('admin');
@@ -211,9 +212,12 @@ IMPORTANT: Keep these credentials secure!
         <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden">
           <Show when={!showCredentials()}>
             <div class="p-8">
-              <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-6">
-                Initial Security Setup
-              </h2>
+              <SectionHeader
+                title="Initial security setup"
+                size="lg"
+                class="mb-6"
+                titleClass="text-gray-800 dark:text-gray-100"
+              />
               
               <div class="space-y-6">
                 {/* Username */}
@@ -343,9 +347,11 @@ IMPORTANT: Keep these credentials secure!
 
                 {/* Info Box */}
                 <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 space-y-2">
-                  <h3 class="font-medium text-gray-800 dark:text-gray-200">
-                    What happens next:
-                  </h3>
+                  <SectionHeader
+                    title="What happens next"
+                    size="sm"
+                    titleClass="text-gray-800 dark:text-gray-200"
+                  />
                   <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
                     <li class="flex items-start">
                       <span class="text-green-500 mr-2">✓</span>
@@ -386,9 +392,13 @@ IMPORTANT: Keep these credentials secure!
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                   </svg>
                 </div>
-                <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">
-                  Setup Complete!
-                </h2>
+                <SectionHeader
+                  title="Setup complete!"
+                  size="lg"
+                  class="mb-2"
+                  align="center"
+                  titleClass="text-gray-800 dark:text-gray-100"
+                />
                 <p class="text-gray-600 dark:text-gray-400">
                   Save your credentials now - they won't be shown again
                 </p>
diff --git a/frontend-modern/src/components/SecurityWarning.tsx b/frontend-modern/src/components/SecurityWarning.tsx
index 2c6d16e63..81255b366 100644
--- a/frontend-modern/src/components/SecurityWarning.tsx
+++ b/frontend-modern/src/components/SecurityWarning.tsx
@@ -1,5 +1,6 @@
 import { Component, createSignal, Show, onMount } from 'solid-js';
 import { Portal } from 'solid-js/web';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface SecurityStatus {
   hasAuthentication: boolean;
@@ -125,11 +126,12 @@ export const SecurityWarning: Component = () => {
               <span class="text-2xl">{getScoreEmoji(status()!.score, status()!.maxScore)}</span>
               <div>
                 <div class="flex items-center gap-3">
-                  <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                    Security Score: <span class={getScoreColor(status()!.score, status()!.maxScore)}>
-                      {status()!.score}/{status()!.maxScore}
-                    </span>
-                  </h3>
+                  <SectionHeader
+                    title={<span>Security score: <span class={getScoreColor(status()!.score, status()!.maxScore)}>{status()!.score}/{status()!.maxScore}</span></span>}
+                    size="sm"
+                    class="flex-1"
+                    titleClass="text-gray-900 dark:text-gray-100"
+                  />
                   <button type="button"
                     onClick={() => setShowDetails(!showDetails())}
                     class="text-sm text-blue-600 dark:text-blue-400 hover:underline"
@@ -235,4 +237,4 @@ export const SecurityWarning: Component = () => {
       </div>
     </Portal>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Settings/BatchCredentialModal.tsx b/frontend-modern/src/components/Settings/BatchCredentialModal.tsx
index fa636a6aa..907c24869 100644
--- a/frontend-modern/src/components/Settings/BatchCredentialModal.tsx
+++ b/frontend-modern/src/components/Settings/BatchCredentialModal.tsx
@@ -3,6 +3,8 @@ import { Portal } from 'solid-js/web';
 import { showSuccess, showError } from '@/utils/toast';
 import { NodesAPI } from '@/api/nodes';
 import type { NodeConfig } from '@/types/nodes';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { formField, labelClass, controlClass, formHelpText } from '@/components/shared/Form';
 
 interface DiscoveredServer {
   ip: string;
@@ -118,9 +120,11 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
             <div class="relative w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl">
               {/* Header */}
               <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-                  Add {props.servers.length} Discovered Servers
-                </h3>
+                <SectionHeader
+                  title={`Add ${props.servers.length} discovered servers`}
+                  size="md"
+                  class="flex-1"
+                />
                 <Show when={!isAdding()}>
                   <button type="button"
                     onClick={props.onClose}
@@ -195,8 +199,8 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
                   {/* Token Auth Fields */}
                   <Show when={authType() === 'token'}>
                     <div class="space-y-4">
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <div class={formField}>
+                        <label class={labelClass()}>
                           Token ID <span class="text-red-500">*</span>
                         </label>
                         <input
@@ -205,15 +209,15 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
                           onInput={(e) => setTokenName(e.currentTarget.value)}
                           placeholder="user@realm!tokenname"
                           disabled={isAdding()}
-                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono"
+                          class={controlClass('font-mono')}
                         />
-                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        <p class={`${formHelpText} mt-1`}>
                           Example: pulse-monitor@pam!pulse-token or pulse-monitor@pbs!pulse-token
                         </p>
                       </div>
                       
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <div class={formField}>
+                        <label class={labelClass()}>
                           Token Value <span class="text-red-500">*</span>
                         </label>
                         <input
@@ -222,7 +226,7 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
                           onInput={(e) => setTokenValue(e.currentTarget.value)}
                           placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
                           disabled={isAdding()}
-                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono"
+                          class={controlClass('font-mono')}
                         />
                       </div>
                     </div>
@@ -231,8 +235,8 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
                   {/* Password Auth Fields */}
                   <Show when={authType() === 'password'}>
                     <div class="space-y-4">
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <div class={formField}>
+                        <label class={labelClass()}>
                           Username <span class="text-red-500">*</span>
                         </label>
                         <input
@@ -241,12 +245,12 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
                           onInput={(e) => setUsername(e.currentTarget.value)}
                           placeholder="root@pam or admin@pbs"
                           disabled={isAdding()}
-                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                          class={controlClass()}
                         />
                       </div>
                       
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <div class={formField}>
+                        <label class={labelClass()}>
                           Password <span class="text-red-500">*</span>
                         </label>
                         <input
@@ -255,7 +259,7 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
                           onInput={(e) => setPassword(e.currentTarget.value)}
                           placeholder="Password"
                           disabled={isAdding()}
-                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                          class={controlClass()}
                         />
                       </div>
                     </div>
@@ -314,4 +318,4 @@ export const BatchCredentialModal: Component<BatchCredentialModalProps> = (props
       </Show>
     </Portal>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
index cf3bf015c..969750ef5 100644
--- a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
+++ b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
@@ -1,6 +1,8 @@
 import { Component, createSignal, Show } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { showSuccess, showError } from '@/utils/toast';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { formField, labelClass, controlClass, formHelpText } from '@/components/shared/Form';
 
 interface ChangePasswordModalProps {
   isOpen: boolean;
@@ -113,9 +115,7 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
         <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style="z-index: 9999">
           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
             <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
-              <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
-                Change Password
-              </h2>
+              <SectionHeader title="Change password" size="lg" class="flex-1" />
               <button type="button"
                 onClick={handleClose}
                 disabled={loading()}
@@ -128,8 +128,8 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
             </div>
 
             <form onSubmit={handleSubmit} class="p-6 space-y-4">
-              <div>
-                <label for="current-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <div class={formField}>
+                <label for="current-password" class={labelClass()}>
                   Current Password
                 </label>
                 <input
@@ -137,14 +137,14 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
                   type="password"
                   value={currentPassword()}
                   onInput={(e) => setCurrentPassword(e.currentTarget.value)}
-                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                  class={controlClass('shadow-sm')}
                   required
                   disabled={loading()}
                 />
               </div>
 
-              <div>
-                <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <div class={formField}>
+                <label for="new-password" class={labelClass()}>
                   New Password
                 </label>
                 <input
@@ -152,18 +152,18 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
                   type="password"
                   value={newPassword()}
                   onInput={(e) => setNewPassword(e.currentTarget.value)}
-                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                  class={controlClass('shadow-sm')}
                   required
                   disabled={loading()}
                   minLength={8}
                 />
-                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                <p class={`${formHelpText} mt-1`}>
                   Minimum 8 characters
                 </p>
               </div>
 
-              <div>
-                <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <div class={formField}>
+                <label for="confirm-password" class={labelClass()}>
                   Confirm New Password
                 </label>
                 <input
@@ -171,7 +171,7 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
                   type="password"
                   value={confirmPassword()}
                   onInput={(e) => setConfirmPassword(e.currentTarget.value)}
-                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                  class={controlClass('shadow-sm')}
                   required
                   disabled={loading()}
                 />
@@ -204,4 +204,4 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
       </Portal>
     </Show>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Settings/DiscoveryModal.tsx b/frontend-modern/src/components/Settings/DiscoveryModal.tsx
index 8f89f2f58..75f67e54f 100644
--- a/frontend-modern/src/components/Settings/DiscoveryModal.tsx
+++ b/frontend-modern/src/components/Settings/DiscoveryModal.tsx
@@ -1,6 +1,7 @@
 import { Component, Show, createSignal, For, createEffect } from 'solid-js';
 import { Portal } from 'solid-js/web';
 import { showSuccess, showError } from '@/utils/toast';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 interface DiscoveredServer {
   ip: string;
@@ -206,9 +207,7 @@ export const DiscoveryModal: Component<DiscoveryModalProps> = (props) => {
             <div class="relative w-full max-w-3xl bg-white dark:bg-gray-800 rounded-lg shadow-xl">
               {/* Header */}
               <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-                  Network Discovery
-                </h3>
+                <SectionHeader title="Network discovery" size="md" class="flex-1" />
                 <button type="button"
                   onClick={props.onClose}
                   class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
@@ -400,4 +399,4 @@ export const DiscoveryModal: Component<DiscoveryModalProps> = (props) => {
       </Show>
     </Portal>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Settings/GenerateAPIToken.tsx b/frontend-modern/src/components/Settings/GenerateAPIToken.tsx
index a2d011893..017464d3f 100644
--- a/frontend-modern/src/components/Settings/GenerateAPIToken.tsx
+++ b/frontend-modern/src/components/Settings/GenerateAPIToken.tsx
@@ -2,6 +2,8 @@ import { Component, createSignal, Show, createEffect } from 'solid-js';
 import { showSuccess, showError } from '@/utils/toast';
 import { copyToClipboard } from '@/utils/clipboard';
 import { apiFetch } from '@/utils/apiClient';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { formField, labelClass, formHelpText } from '@/components/shared/Form';
 
 interface GenerateAPITokenProps {
   currentTokenHint?: string;
@@ -77,7 +79,7 @@ export const GenerateAPIToken: Component<GenerateAPITokenProps> = (props) => {
               </code>
             </div>
           </Show>
-          <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">
+          <p class={`${formHelpText} mb-4`}>
             An API token is configured for this instance. Use it with the X-API-Token header for automation.
           </p>
           
@@ -103,17 +105,21 @@ export const GenerateAPIToken: Component<GenerateAPITokenProps> = (props) => {
           </div>
           
           <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
-            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Your New API Token</label>
-            <div class="flex items-center space-x-2">
-              <code class="flex-1 font-mono text-sm bg-white dark:bg-gray-800 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 break-all">
-                {newToken()}
-              </code>
-              <button type="button"
-                onClick={handleCopy}
-                class="px-3 py-2 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
-              >
-                {copied() ? 'Copied!' : 'Copy'}
-              </button>
+            <div class={formField}>
+              <label class={labelClass('text-xs')}>
+                Your new API token
+              </label>
+              <div class="mt-1 flex items-center gap-2">
+                <code class="flex-1 font-mono text-sm bg-white dark:bg-gray-800 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 break-all">
+                  {newToken()}
+                </code>
+                <button type="button"
+                  onClick={handleCopy}
+                  class="px-3 py-2 text-xs bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
+                >
+                  {copied() ? 'Copied!' : 'Copy'}
+                </button>
+              </div>
             </div>
           </div>
           
@@ -145,9 +151,11 @@ export const GenerateAPIToken: Component<GenerateAPITokenProps> = (props) => {
       <Show when={showConfirm()}>
         <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-md w-full mx-4">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
-              Generate New API Token?
-            </h3>
+            <SectionHeader
+              title="Generate new API token?"
+              size="md"
+              class="mb-4"
+            />
             <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
               This will generate a new API token and <span class="font-semibold text-red-600 dark:text-red-400">immediately invalidate the current token</span>. 
               Any scripts or integrations using the old token will stop working.
@@ -171,4 +179,4 @@ export const GenerateAPIToken: Component<GenerateAPITokenProps> = (props) => {
       </Show>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Settings/GuestURLs.tsx b/frontend-modern/src/components/Settings/GuestURLs.tsx
index 820d8523f..9acc2abd2 100644
--- a/frontend-modern/src/components/Settings/GuestURLs.tsx
+++ b/frontend-modern/src/components/Settings/GuestURLs.tsx
@@ -4,6 +4,7 @@ import { showSuccess, showError } from '@/utils/toast';
 import type { VM, Container } from '@/types/api';
 import { GuestMetadataAPI } from '@/api/guestMetadata';
 import type { GuestMetadata } from '@/api/guestMetadata';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 
 interface GuestURLsProps {
@@ -185,12 +186,11 @@ export function GuestURLs(props: GuestURLsProps) {
   return (
     <div class="space-y-6">
       {/* Header */}
-      <div>
-        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Guest URL Management</h3>
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          Configure custom URLs for accessing guest web interfaces. These URLs will be clickable from the dashboard.
-        </p>
-      </div>
+      <SectionHeader
+        title="Guest URL management"
+        description="Configure custom URLs for accessing guest web interfaces. These URLs appear as shortcuts from the dashboard."
+        size="md"
+      />
 
       {/* Search */}
       <div class="relative">
@@ -365,4 +365,4 @@ export function GuestURLs(props: GuestURLsProps) {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/components/Settings/NodeModal.tsx b/frontend-modern/src/components/Settings/NodeModal.tsx
index 4c3ebb51b..b4dfc54a6 100644
--- a/frontend-modern/src/components/Settings/NodeModal.tsx
+++ b/frontend-modern/src/components/Settings/NodeModal.tsx
@@ -5,6 +5,8 @@ import type { SecurityStatus } from '@/types/config';
 import { copyToClipboard } from '@/utils/clipboard';
 import { showSuccess, showError } from '@/utils/toast';
 import { NodesAPI } from '@/api/nodes';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { formField, formHelpText, controlClass, labelClass, formCheckbox } from '@/components/shared/Form';
 
 interface NodeModalProps {
   isOpen: boolean;
@@ -298,9 +300,11 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
               <form onSubmit={handleSubmit}>
                 {/* Header */}
                 <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
-                  <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-                    {props.editingNode ? 'Edit' : 'Add'} {props.nodeType === 'pve' ? 'Proxmox VE' : 'Proxmox Backup Server'} Node
-                  </h3>
+                  <SectionHeader
+                    title={`${props.editingNode ? 'Edit' : 'Add'} ${props.nodeType === 'pve' ? 'Proxmox VE' : 'Proxmox Backup Server'} node`}
+                    size="md"
+                    class="flex-1"
+                  />
                   <button type="button"
                     onClick={props.onClose}
                     class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
@@ -316,35 +320,40 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                 <div class="p-6 space-y-6">
                   {/* Basic Information */}
                   <div>
-                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Basic Information</h4>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                          Node Name <span class="text-gray-400">(optional)</span>
+                    <SectionHeader
+                      title="Basic information"
+                      size="sm"
+                      class="mb-4"
+                      titleClass="text-gray-900 dark:text-gray-100"
+                    />
+                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                      <div class={formField}>
+                        <label class={labelClass('flex items-center gap-2')}>
+                          Node Name <span class="text-xs text-gray-500">(optional)</span>
                         </label>
                         <input
                           type="text"
                           value={formData().name}
                           onInput={(e) => updateField('name', e.currentTarget.value)}
                           placeholder="Will auto-detect from hostname"
-                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                          class={controlClass()}
                         />
                       </div>
                       
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <div class={formField}>
+                        <label class={labelClass('flex items-center gap-1')}>
                           Host URL <span class="text-red-500">*</span>
                         </label>
                         <input
                           type="text"
                           value={formData().host}
                           onInput={(e) => updateField('host', e.currentTarget.value)}
-                          placeholder={props.nodeType === 'pve' ? "https://proxmox.example.com:8006" : "https://backup.example.com:8007"}
+                          placeholder={props.nodeType === 'pve' ? 'https://proxmox.example.com:8006' : 'https://backup.example.com:8007'}
                           required
-                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                          class={controlClass()}
                         />
                         <Show when={props.nodeType === 'pbs'}>
-                          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">PBS requires HTTPS (not HTTP). Default port is 8007</p>
+                          <p class={formHelpText}>PBS requires HTTPS (not HTTP). Default port is 8007.</p>
                         </Show>
                       </div>
                     </div>
@@ -352,7 +361,12 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                   
                   {/* Authentication */}
                   <div>
-                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Authentication</h4>
+                    <SectionHeader
+                      title="Authentication"
+                      size="sm"
+                      class="mb-4"
+                      titleClass="text-gray-900 dark:text-gray-100"
+                    />
                     
                     {/* Auth Type Selector */}
                     <div class="mb-4">
@@ -384,27 +398,30 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                     
                     {/* Password Auth Fields */}
                     <Show when={formData().authType === 'password'}>
-                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <div>
-                          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                        <div class={formField}>
+                          <label class={labelClass()}>
                             Username <span class="text-red-500">*</span>
                           </label>
                           <input
                             type="text"
                             value={formData().user}
                             onInput={(e) => updateField('user', e.currentTarget.value)}
-                            placeholder={props.nodeType === 'pve' ? "root@pam" : "admin@pbs"}
+                            placeholder={props.nodeType === 'pve' ? 'root@pam' : 'admin@pbs'}
                             required={formData().authType === 'password'}
-                            class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            class={controlClass()}
                           />
                           <Show when={props.nodeType === 'pbs'}>
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Must include realm (e.g., admin@pbs)</p>
+                            <p class={formHelpText}>Must include realm (e.g., admin@pbs).</p>
                           </Show>
                         </div>
                         
-                        <div>
-                          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                            Password {!props.editingNode && <span class="text-red-500">*</span>}
+                        <div class={formField}>
+                          <label class={labelClass('flex items-center gap-2')}>
+                            Password
+                            <Show when={!props.editingNode}>
+                              <span class="text-red-500">*</span>
+                            </Show>
                           </label>
                           <input
                             type="password"
@@ -412,7 +429,7 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                             onInput={(e) => updateField('password', e.currentTarget.value)}
                             placeholder={props.editingNode ? 'Leave blank to keep existing' : 'Password'}
                             required={formData().authType === 'password' && !props.editingNode}
-                            class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                            class={controlClass()}
                           />
                         </div>
                       </div>
@@ -466,7 +483,7 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                                       type="checkbox"
                                       checked={formData().enableBackupManagement}
                                       onChange={(e) => setFormData({ ...formData(), enableBackupManagement: e.currentTarget.checked })}
-                                      class="rounded border-gray-300 dark:border-gray-600"
+                                      class={formCheckbox}
                                     />
                                     <span class="text-gray-700 dark:text-gray-300">
                                       Enable storage permissions for backup visibility
@@ -1103,9 +1120,9 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                         </div>
                         
                         {/* Token Input Fields */}
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                          <div>
-                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+                          <div class={formField}>
+                            <label class={labelClass()}>
                               Token ID <span class="text-red-500">*</span>
                             </label>
                             <input
@@ -1114,14 +1131,17 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                               onInput={(e) => updateField('tokenName', e.currentTarget.value)}
                               placeholder={props.nodeType === 'pve' ? 'pulse-monitor@pam!pulse-token' : 'pulse-monitor@pbs!pulse-token'}
                               required={formData().authType === 'token'}
-                              class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono"
+                              class={controlClass('font-mono')}
                             />
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Full token ID from Proxmox (user@realm!tokenname)</p>
+                            <p class={formHelpText}>Full token ID from Proxmox (user@realm!tokenname).</p>
                           </div>
                           
-                          <div>
-                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                              Token Value {!props.editingNode && <span class="text-red-500">*</span>}
+                          <div class={formField}>
+                            <label class={labelClass('flex items-center gap-2')}>
+                              Token Value
+                              <Show when={!props.editingNode}>
+                                <span class="text-red-500">*</span>
+                              </Show>
                             </label>
                             <input
                               type="password"
@@ -1129,9 +1149,9 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                               onInput={(e) => updateField('tokenValue', e.currentTarget.value)}
                               placeholder={props.editingNode ? 'Leave blank to keep existing' : 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'}
                               required={formData().authType === 'token' && !props.editingNode}
-                              class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono"
+                              class={controlClass('font-mono')}
                             />
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">The secret value shown when creating the token</p>
+                            <p class={formHelpText}>The secret value shown when creating the token.</p>
                           </div>
                         </div>
                       </div>
@@ -1140,125 +1160,133 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
                   
                   {/* SSL Settings */}
                   <div>
-                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">SSL Settings</h4>
+                    <SectionHeader
+                      title="SSL settings"
+                      size="sm"
+                      class="mb-4"
+                      titleClass="text-gray-900 dark:text-gray-100"
+                    />
                     <div class="space-y-3">
-                      <div class="flex items-center">
+                      <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                         <input
                           type="checkbox"
-                          id="verifySSL"
                           checked={formData().verifySSL}
                           onChange={(e) => updateField('verifySSL', e.currentTarget.checked)}
-                          class="mr-2"
+                          class={formCheckbox}
                         />
-                        <label for="verifySSL" class="text-sm text-gray-700 dark:text-gray-300">
-                          Verify SSL Certificate
-                        </label>
-                      </div>
+                        Verify SSL certificate
+                      </label>
                       
-                      <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                          SSL Fingerprint (Optional)
+                      <div class={formField}>
+                        <label class={labelClass()}>
+                          SSL Fingerprint (optional)
                         </label>
                         <input
                           type="text"
                           value={formData().fingerprint}
                           onInput={(e) => updateField('fingerprint', e.currentTarget.value)}
                           placeholder="AA:BB:CC:DD:EE:FF:..."
-                          class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono"
+                          class={controlClass('font-mono')}
                         />
+                        <p class={formHelpText}>Useful when connecting to servers with self-signed certificates.</p>
                       </div>
                     </div>
                   </div>
                   
                   {/* Monitoring Options */}
                   <div>
-                    <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Monitoring Options</h4>
+                    <SectionHeader
+                      title="Monitoring options"
+                      size="sm"
+                      class="mb-4"
+                      titleClass="text-gray-900 dark:text-gray-100"
+                    />
                     <div class="space-y-2">
                       {props.nodeType === 'pve' ? (
                         <>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorVMs}
                               onChange={(e) => updateField('monitorVMs', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Virtual Machines</span>
+                            <span>Monitor Virtual Machines</span>
                           </label>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorContainers}
                               onChange={(e) => updateField('monitorContainers', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Containers</span>
+                            <span>Monitor Containers</span>
                           </label>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorStorage}
                               onChange={(e) => updateField('monitorStorage', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Storage</span>
+                            <span>Monitor Storage</span>
                           </label>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorBackups}
                               onChange={(e) => updateField('monitorBackups', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Backups</span>
+                            <span>Monitor Backups</span>
                           </label>
                         </>
                       ) : (
                         <>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorDatastores}
                               onChange={(e) => updateField('monitorDatastores', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Datastores</span>
+                            <span>Monitor Datastores</span>
                           </label>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorSyncJobs}
                               onChange={(e) => updateField('monitorSyncJobs', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Sync Jobs</span>
+                            <span>Monitor Sync Jobs</span>
                           </label>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorVerifyJobs}
                               onChange={(e) => updateField('monitorVerifyJobs', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Verify Jobs</span>
+                            <span>Monitor Verify Jobs</span>
                           </label>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorPruneJobs}
                               onChange={(e) => updateField('monitorPruneJobs', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Prune Jobs</span>
+                            <span>Monitor Prune Jobs</span>
                           </label>
-                          <label class="flex items-center">
+                          <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
                             <input
                               type="checkbox"
                               checked={formData().monitorGarbageJobs}
                               onChange={(e) => updateField('monitorGarbageJobs', e.currentTarget.checked)}
-                              class="mr-2"
+                              class={formCheckbox}
                             />
-                            <span class="text-sm text-gray-700 dark:text-gray-300">Monitor Garbage Collection Jobs</span>
+                            <span>Monitor Garbage Collection Jobs</span>
                           </label>
                         </>
                       )}
@@ -1349,4 +1377,4 @@ export const NodeModal: Component<NodeModalProps> = (props) => {
       </Show>
     </Portal>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx b/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx
index 42a6c4c49..6ce94e34d 100644
--- a/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx
+++ b/frontend-modern/src/components/Settings/QuickSecuritySetup.tsx
@@ -1,6 +1,8 @@
 import { Component, createSignal, Show } from 'solid-js';
 import { showSuccess, showError } from '@/utils/toast';
 import { copyToClipboard } from '@/utils/clipboard';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { formField, labelClass, controlClass, formHelpText } from '@/components/shared/Form';
 
 interface SecurityCredentials {
   username: string;
@@ -159,10 +161,13 @@ Important:
               </svg>
             </div>
             <div class="flex-1">
-              <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Quick Security Setup</h4>
-              <p class="text-xs text-gray-600 dark:text-gray-400 mt-1">
-                Enable authentication with one click. This will:
-              </p>
+              <SectionHeader
+                title="Quick security setup"
+                description="Enable authentication with one click. This will:"
+                size="sm"
+                titleClass="text-gray-900 dark:text-gray-100"
+                descriptionClass="!text-xs text-gray-600 dark:text-gray-400"
+              />
               <ul class="mt-2 space-y-1 text-xs text-gray-600 dark:text-gray-400">
                 <li class="flex items-center">
                   <span class="text-green-500 mr-2">✓</span>
@@ -186,7 +191,7 @@ Important:
 
           <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 space-y-3">
             <div class="flex items-center justify-between">
-              <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
+              <label class={labelClass()}>
                 Password Setup
               </label>
               <div class="flex items-center space-x-2">
@@ -215,39 +220,39 @@ Important:
 
             <Show when={useCustomPassword()}>
               <div class="space-y-2">
-                <div>
-                  <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                <div class={formField}>
+                  <label class={labelClass()}>
                     Username
                   </label>
                   <input
                     type="text"
                     value={customUsername()}
                     onInput={(e) => setCustomUsername(e.currentTarget.value)}
-                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    class={controlClass()}
                     placeholder="admin"
                   />
                 </div>
-                <div>
-                  <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
+                <div class={formField}>
+                  <label class={labelClass()}>
                     Password (min 8 characters)
                   </label>
                   <input
                     type="password"
                     value={customPassword()}
                     onInput={(e) => setCustomPassword(e.currentTarget.value)}
-                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    class={controlClass()}
                     placeholder="Enter password"
                   />
                 </div>
-                <div>
-                  <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                    Confirm Password
+                <div class={formField}>
+                  <label class={labelClass()}>
+                    Confirm password
                   </label>
                   <input
                     type="password"
                     value={confirmPassword()}
                     onInput={(e) => setConfirmPassword(e.currentTarget.value)}
-                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                    class={controlClass()}
                     placeholder="Confirm password"
                   />
                 </div>
@@ -255,7 +260,7 @@ Important:
             </Show>
 
             <Show when={!useCustomPassword()}>
-              <p class="text-xs text-gray-600 dark:text-gray-400">
+              <p class={formHelpText}>
                 A secure 16-character password will be generated for you
               </p>
             </Show>
@@ -298,9 +303,12 @@ Important:
       <Show when={showCredentials() && credentials()}>
         <div class="space-y-4">
           <div class="flex items-center justify-between">
-            <h4 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
-              🎉 Security Enabled Successfully!
-            </h4>
+            <SectionHeader
+              title="🎉 Security enabled successfully!"
+              size="md"
+              class="flex-1"
+              titleClass="text-gray-900 dark:text-gray-100"
+            />
             <button type="button"
               onClick={downloadCredentials}
               class="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
@@ -317,8 +325,10 @@ Important:
 
           <div class="space-y-3">
             <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
-              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
-              <div class="flex items-center space-x-2">
+              <label class={labelClass('text-xs')}>
+                Username
+              </label>
+              <div class="mt-1 flex items-center gap-2">
                 <code class="flex-1 font-mono text-sm bg-white dark:bg-gray-800 px-3 py-2 rounded border border-gray-200 dark:border-gray-700">
                   {credentials()!.username}
                 </code>
@@ -332,8 +342,10 @@ Important:
             </div>
 
             <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
-              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
-              <div class="flex items-center space-x-2">
+              <label class={labelClass('text-xs')}>
+                Password
+              </label>
+              <div class="mt-1 flex items-center gap-2">
                 <code class="flex-1 font-mono text-sm bg-white dark:bg-gray-800 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 break-all">
                   {credentials()!.password}
                 </code>
@@ -347,8 +359,10 @@ Important:
             </div>
 
             <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
-              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">API Token</label>
-              <div class="flex items-center space-x-2">
+              <label class={labelClass('text-xs')}>
+                API token
+              </label>
+              <div class="mt-1 flex items-center gap-2">
                 <code class="flex-1 font-mono text-sm bg-white dark:bg-gray-800 px-3 py-2 rounded border border-gray-200 dark:border-gray-700 break-all">
                   {credentials()!.apiToken}
                 </code>
@@ -359,11 +373,11 @@ Important:
                   {copied() === 'token' ? 'Copied!' : 'Copy'}
                 </button>
               </div>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                Use this token with X-API-Token header for automation.
+              <p class={formHelpText + ' mt-2'}>
+                Use this token with the X-API-Token header for automation.
               </p>
-              <p class="text-xs text-red-600 dark:text-red-400 mt-1 font-semibold">
-                ⚠️ This token will NEVER be shown again. Save it now!
+              <p class="mt-1 text-xs font-semibold text-red-600 dark:text-red-400">
+                ⚠️ This token will never be shown again. Save it now!
               </p>
             </div>
           </div>
@@ -400,4 +414,4 @@ Important:
       </Show>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx
index 81d087ab8..8fc35bb47 100644
--- a/frontend-modern/src/components/Settings/Settings.tsx
+++ b/frontend-modern/src/components/Settings/Settings.tsx
@@ -8,6 +8,10 @@ import { GuestURLs } from './GuestURLs';
 import { SettingsAPI } from '@/api/settings';
 import { NodesAPI } from '@/api/nodes';
 import { UpdatesAPI } from '@/api/updates';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { Toggle } from '@/components/shared/Toggle';
+import { formField, labelClass, controlClass, formHelpText } from '@/components/shared/Form';
 import type { NodeConfig } from '@/types/nodes';
 import type { UpdateInfo, VersionInfo } from '@/api/updates';
 import { eventBus } from '@/stores/events';
@@ -718,14 +722,13 @@ const Settings: Component = () => {
     <>
       <div class="space-y-4">
       {/* Header with better styling */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-        <div>
-          <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Configuration Settings</h1>
-          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Manage Proxmox nodes and system configuration
-          </p>
-        </div>
-      </div>
+      <Card padding="md">
+        <SectionHeader
+          title="Configuration settings"
+          description="Manage Proxmox nodes and system configuration"
+          size="lg"
+        />
+      </Card>
       
       {/* Save notification bar - only show when there are unsaved changes */}
       <Show when={hasUnsavedChanges() && (activeTab() === 'pve' || activeTab() === 'pbs' || activeTab() === 'system')}>
@@ -760,7 +763,7 @@ const Settings: Component = () => {
       </Show>
       
       {/* Tab Navigation - modern style */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+      <Card padding="none">
         <div class="p-1">
           <div class="flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5 w-full overflow-x-auto scrollbar-hide" style="-webkit-overflow-scrolling: touch;">
             <For each={tabs}>
@@ -793,48 +796,41 @@ const Settings: Component = () => {
               </Show>
               <Show when={initialLoadComplete()}>
               <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
-                <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-200">Proxmox VE Nodes</h3>
+                <SectionHeader title="Proxmox VE nodes" size="md" class="flex-1" />
                 <div class="flex flex-wrap gap-2 items-center justify-end">
                   {/* Discovery toggle */}
-                  <label class="flex items-center gap-1 sm:gap-2 cursor-pointer" title="Enable automatic discovery of Proxmox servers on your network">
+                  <div class="flex items-center gap-2 sm:gap-3" title="Enable automatic discovery of Proxmox servers on your network">
                     <span class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Discovery</span>
-                    <div class="relative inline-flex items-center">
-                      <input
-                        type="checkbox"
-                        checked={discoveryEnabled()}
-                        onChange={async (e) => {
-                          if (!envOverrides().discoveryEnabled) {
-                            const newValue = e.currentTarget.checked;
-                            setDiscoveryEnabled(newValue);
-                            
-                            // Save discovery setting immediately
-                            try {
-                              await SettingsAPI.updateSystemSettings({
-                                discoveryEnabled: newValue,
-                                discoverySubnet: discoverySubnet()
-                              });
-                              
-                              if (newValue) {
-                                // Trigger discovery when enabled
-                                loadDiscoveredNodes();
-                                notificationStore.success('Discovery enabled', 2000);
-                              } else {
-                                notificationStore.info('Discovery disabled', 2000);
-                              }
-                            } catch (error) {
-                              console.error('Failed to update discovery setting:', error);
-                              notificationStore.error('Failed to update discovery setting');
-                              // Revert on error
-                              setDiscoveryEnabled(!newValue);
-                            }
+                    <Toggle
+                      checked={discoveryEnabled()}
+                      onChange={async (e) => {
+                        if (envOverrides().discoveryEnabled) {
+                          return;
+                        }
+                        const newValue = e.currentTarget.checked;
+                        setDiscoveryEnabled(newValue);
+                        try {
+                          await SettingsAPI.updateSystemSettings({
+                            discoveryEnabled: newValue,
+                            discoverySubnet: discoverySubnet()
+                          });
+                          if (newValue) {
+                            loadDiscoveredNodes();
+                            notificationStore.success('Discovery enabled', 2000);
+                          } else {
+                            notificationStore.info('Discovery disabled', 2000);
                           }
-                        }}
-                        disabled={envOverrides().discoveryEnabled}
-                        class="sr-only peer"
-                      />
-                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                    </div>
-                  </label>
+                        } catch (error) {
+                          console.error('Failed to update discovery setting:', error);
+                          notificationStore.error('Failed to update discovery setting');
+                          setDiscoveryEnabled(!newValue);
+                        }
+                      }}
+                      disabled={envOverrides().discoveryEnabled}
+                      containerClass="gap-2"
+                      label={<span class="text-xs font-medium text-gray-600 dark:text-gray-400">{discoveryEnabled() ? 'On' : 'Off'}</span>}
+                    />
+                  </div>
                   
                   <Show when={discoveryEnabled()}>
                     <button type="button" 
@@ -1069,48 +1065,41 @@ const Settings: Component = () => {
               </Show>
               <Show when={initialLoadComplete()}>
               <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-3">
-                <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-200">Proxmox Backup Server Nodes</h3>
+                <SectionHeader title="Proxmox Backup Server nodes" size="md" class="flex-1" />
                 <div class="flex flex-wrap gap-2 items-center justify-end">
                   {/* Discovery toggle */}
-                  <label class="flex items-center gap-2 cursor-pointer" title="Enable automatic discovery of PBS servers on your network">
+                  <div class="flex items-center gap-2" title="Enable automatic discovery of PBS servers on your network">
                     <span class="text-sm text-gray-600 dark:text-gray-400">Discovery</span>
-                    <div class="relative inline-flex items-center">
-                      <input
-                        type="checkbox"
-                        checked={discoveryEnabled()}
-                        onChange={async (e) => {
-                          if (!envOverrides().discoveryEnabled) {
-                            const newValue = e.currentTarget.checked;
-                            setDiscoveryEnabled(newValue);
-                            
-                            // Save discovery setting immediately
-                            try {
-                              await SettingsAPI.updateSystemSettings({
-                                discoveryEnabled: newValue,
-                                discoverySubnet: discoverySubnet()
-                              });
-                              
-                              if (newValue) {
-                                // Trigger discovery when enabled
-                                loadDiscoveredNodes();
-                                notificationStore.success('Discovery enabled', 2000);
-                              } else {
-                                notificationStore.info('Discovery disabled', 2000);
-                              }
-                            } catch (error) {
-                              console.error('Failed to update discovery setting:', error);
-                              notificationStore.error('Failed to update discovery setting');
-                              // Revert on error
-                              setDiscoveryEnabled(!newValue);
-                            }
+                    <Toggle
+                      checked={discoveryEnabled()}
+                      onChange={async (e) => {
+                        if (envOverrides().discoveryEnabled) {
+                          return;
+                        }
+                        const newValue = e.currentTarget.checked;
+                        setDiscoveryEnabled(newValue);
+                        try {
+                          await SettingsAPI.updateSystemSettings({
+                            discoveryEnabled: newValue,
+                            discoverySubnet: discoverySubnet()
+                          });
+                          if (newValue) {
+                            loadDiscoveredNodes();
+                            notificationStore.success('Discovery enabled', 2000);
+                          } else {
+                            notificationStore.info('Discovery disabled', 2000);
                           }
-                        }}
-                        disabled={envOverrides().discoveryEnabled}
-                        class="sr-only peer"
-                      />
-                      <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-                    </div>
-                  </label>
+                        } catch (error) {
+                          console.error('Failed to update discovery setting:', error);
+                          notificationStore.error('Failed to update discovery setting');
+                          setDiscoveryEnabled(!newValue);
+                        }
+                      }}
+                      disabled={envOverrides().discoveryEnabled}
+                      containerClass="gap-2"
+                      label={<span class="text-xs font-medium text-gray-600 dark:text-gray-400">{discoveryEnabled() ? 'On' : 'Off'}</span>}
+                    />
+                  </div>
                   
                   <Show when={discoveryEnabled()}>
                     <button type="button" 
@@ -1299,7 +1288,7 @@ const Settings: Component = () => {
           <Show when={activeTab() === 'system'}>
             <div class="space-y-6">
               <div>
-                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">System Configuration</h3>
+                <SectionHeader title="System configuration" size="md" class="mb-4" />
                 
                 {/* Environment Variable Info */}
                 <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg">
@@ -1625,11 +1614,13 @@ const Settings: Component = () => {
               </div>
               
               {/* Backup & Restore - Moved from Security tab */}
-              <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
-                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Backup & Restore</h3>
-                <p class="text-sm text-gray-600 dark:text-gray-400 mb-6">
-                  Backup your node configurations and credentials or restore from a previous backup
-                </p>
+              <Card padding="lg" border={false} class="border border-gray-200 dark:border-gray-700">
+                <SectionHeader
+                  title="Backup & restore"
+                  description="Backup your node configurations and credentials or restore from a previous backup."
+                  size="md"
+                  class="mb-4"
+                />
                 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {/* Export Section */}
@@ -1704,7 +1695,7 @@ const Settings: Component = () => {
                     </div>
                   </div>
                 </div>
-              </div>
+              </Card>
             </div>
           </Show>
           
@@ -1737,7 +1728,7 @@ const Settings: Component = () => {
                           <li>• Or authentication hasn't been configured yet</li>
                         </ul>
                       </div>
-                      <div class="mt-3 bg-white dark:bg-gray-800 rounded-lg p-3 border border-amber-200 dark:border-amber-700">
+                      <Card tone="muted" padding="sm" class="mt-3 border border-amber-200 dark:border-amber-700">
                         <p class="text-xs font-semibold text-gray-900 dark:text-gray-100 mb-2">
                           To enable authentication:
                         </p>
@@ -1747,7 +1738,7 @@ const Settings: Component = () => {
                           <li>3. Restart Pulse service</li>
                           <li>4. Complete the security setup wizard on first access</li>
                         </ol>
-                      </div>
+                      </Card>
                     </div>
                   </div>
                 </div>
@@ -1755,7 +1746,7 @@ const Settings: Component = () => {
               
               {/* Authentication */}
               <Show when={!securityStatusLoading() && (securityStatus()?.hasAuthentication || securityStatus()?.apiTokenConfigured)}>
-                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                <Card padding="none" class="overflow-hidden border border-gray-200 dark:border-gray-700" border={false}>
                   {/* Header */}
                   <div class="bg-gradient-to-r from-gray-50 to-gray-50 dark:from-gray-900/20 dark:to-gray-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                     <div class="flex items-center gap-3">
@@ -1764,10 +1755,12 @@ const Settings: Component = () => {
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                         </svg>
                       </div>
-                      <div>
-                        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Authentication</h3>
-                        <p class="text-xs text-gray-600 dark:text-gray-400">Manage your login credentials</p>
-                      </div>
+                      <SectionHeader
+                        title="Authentication"
+                        description="Manage your login credentials"
+                        size="sm"
+                        class="flex-1"
+                      />
                     </div>
                   </div>
                   
@@ -1797,7 +1790,7 @@ const Settings: Component = () => {
                       
                     </div>
                   </div>
-                </div>
+                </Card>
               </Show>
 
               {/* Show pending restart message if configured but not loaded */}
@@ -1884,7 +1877,7 @@ const Settings: Component = () => {
 
               {/* API Token - Show always to allow API access even when auth is disabled */}
               <Show when={!securityStatusLoading()}>
-                <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
+                <Card padding="none" class="overflow-hidden border border-gray-200 dark:border-gray-700" border={false}>
                   {/* Header */}
                   <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                     <div class="flex items-center gap-3">
@@ -1893,10 +1886,12 @@ const Settings: Component = () => {
                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
                         </svg>
                       </div>
-                      <div>
-                        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">API Token</h3>
-                        <p class="text-xs text-gray-600 dark:text-gray-400">For automation and integrations</p>
-                      </div>
+                      <SectionHeader
+                        title="API token"
+                        description="For automation and integrations"
+                        size="sm"
+                        class="flex-1"
+                      />
                     </div>
                   </div>
                   
@@ -1904,15 +1899,15 @@ const Settings: Component = () => {
                   <div class="p-6">
                     {/* Show explanation when auth is disabled */}
                     <Show when={!securityStatus()?.hasAuthentication}>
-                      <div class="mb-4 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                      <Card tone="info" padding="sm" class="mb-4 border border-blue-200 dark:border-blue-800">
                         <p class="text-xs text-blue-800 dark:text-blue-200">
                           <strong>API Access Control:</strong> Even though authentication is disabled, you can still use API tokens to protect API access for automation and integrations.
                         </p>
-                      </div>
+                      </Card>
                     </Show>
                     <GenerateAPIToken currentTokenHint={securityStatus()?.apiTokenHint} />
                   </div>
-                </div>
+                </Card>
               </Show>
 
               {/* Advanced - Only show if auth is enabled */}
@@ -1924,7 +1919,7 @@ const Settings: Component = () => {
           <Show when={activeTab() === 'diagnostics'}>
             <div class="space-y-6">
               <div>
-                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">System Diagnostics</h3>
+                <SectionHeader title="System diagnostics" size="md" class="mb-4" />
                 
                 <div class="space-y-4">
                   {/* Live Connection Diagnostics */}
@@ -1956,7 +1951,7 @@ const Settings: Component = () => {
                     <Show when={diagnosticsData()}>
                       <div class="mt-4 space-y-3">
                         {/* System Info */}
-                        <div class="bg-white dark:bg-gray-800 rounded-lg p-3">
+                        <Card padding="sm">
                           <h5 class="text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">System</h5>
                           <div class="text-xs space-y-1 text-gray-600 dark:text-gray-400">
                             <div>Version: {diagnosticsData()?.version || 'Unknown'}</div>
@@ -1964,11 +1959,11 @@ const Settings: Component = () => {
                             <div>Runtime: {diagnosticsData()?.runtime || 'Unknown'}</div>
                             <div>Memory: {Math.round((diagnosticsData()?.system?.memory?.alloc || 0) / 1024 / 1024)} MB</div>
                           </div>
-                        </div>
+                        </Card>
                         
                         {/* Nodes Status */}
                         <Show when={diagnosticsData()?.nodes && diagnosticsData()!.nodes.length > 0}>
-                          <div class="bg-white dark:bg-gray-800 rounded-lg p-3">
+                          <Card padding="sm">
                             <h5 class="text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">PVE Nodes</h5>
                             <For each={diagnosticsData()?.nodes || []}>
                               {(node) => (
@@ -1991,12 +1986,12 @@ const Settings: Component = () => {
                                 </div>
                               )}
                             </For>
-                          </div>
+                          </Card>
                         </Show>
                         
                         {/* PBS Status */}
                         <Show when={diagnosticsData()?.pbs && diagnosticsData()!.pbs.length > 0}>
-                          <div class="bg-white dark:bg-gray-800 rounded-lg p-3">
+                          <Card padding="sm">
                             <h5 class="text-sm font-semibold mb-2 text-gray-700 dark:text-gray-300">PBS Instances</h5>
                             <For each={diagnosticsData()?.pbs || []}>
                               {(pbs) => (
@@ -2015,7 +2010,7 @@ const Settings: Component = () => {
                                 </div>
                               )}
                             </For>
-                          </div>
+                          </Card>
                         </Show>
                       </div>
                     </Show>
@@ -2349,7 +2344,7 @@ const Settings: Component = () => {
             />
           </Show>
         </div>
-      </div>
+      </Card>
       
       {/* Node Modal - Use separate modals for PVE and PBS to ensure clean state */}
       <Show when={showNodeModal() && currentNodeType() === 'pve'}>
@@ -2472,8 +2467,8 @@ const Settings: Component = () => {
       {/* Export Dialog */}
       <Show when={showExportDialog()}>
         <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full">
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Export Configuration</h3>
+          <Card padding="lg" class="max-w-md w-full">
+            <SectionHeader title="Export configuration" size="md" class="mb-4" />
             
             <div class="space-y-4">
               {/* Password Choice Section - Only show if auth is enabled */}
@@ -2521,8 +2516,8 @@ const Settings: Component = () => {
               </Show>
               
               {/* Show password input based on selection */}
-              <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <div class={formField}>
+                <label class={labelClass()}>
                   {securityStatus()?.hasAuthentication 
                     ? (useCustomPassphrase() ? 'Custom Passphrase' : 'Enter Your Login Password')
                     : 'Encryption Passphrase'}
@@ -2533,18 +2528,18 @@ const Settings: Component = () => {
                   onInput={(e) => setExportPassphrase(e.currentTarget.value)}
                   placeholder={
                     securityStatus()?.hasAuthentication 
-                      ? (useCustomPassphrase() ? "Enter a strong passphrase" : "Enter your Pulse login password")
-                      : "Enter a strong passphrase for encryption"
+                      ? (useCustomPassphrase() ? 'Enter a strong passphrase' : 'Enter your Pulse login password')
+                      : 'Enter a strong passphrase for encryption'
                   }
-                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  class={controlClass()}
                 />
                 <Show when={!securityStatus()?.hasAuthentication || useCustomPassphrase()}>
-                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  <p class={`${formHelpText} mt-1`}>
                     You'll need this passphrase to restore the backup.
                   </p>
                 </Show>
                 <Show when={securityStatus()?.hasAuthentication && !useCustomPassphrase()}>
-                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  <p class={`${formHelpText} mt-1`}>
                     You'll use this same password when restoring the backup
                   </p>
                 </Show>
@@ -2583,25 +2578,23 @@ const Settings: Component = () => {
                 </button>
               </div>
             </div>
-          </div>
+          </Card>
         </div>
       </Show>
       
       {/* API Token Modal */}
       <Show when={showApiTokenModal()}>
         <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full">
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">
-              API Token Required
-            </h3>
+          <Card padding="lg" class="max-w-md w-full">
+            <SectionHeader title="API token required" size="md" class="mb-4" />
             
             <div class="space-y-4">
               <p class="text-sm text-gray-600 dark:text-gray-400">
                 This Pulse instance requires an API token for export/import operations. Please enter the API token configured on the server.
               </p>
               
-              <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <div class={formField}>
+                <label class={labelClass()}>
                   API Token
                 </label>
                 <input
@@ -2609,7 +2602,7 @@ const Settings: Component = () => {
                   value={apiTokenInput()}
                   onInput={(e) => setApiTokenInput(e.currentTarget.value)}
                   placeholder="Enter API token"
-                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-200"
+                  class={controlClass()}
                 />
               </div>
               
@@ -2653,19 +2646,19 @@ const Settings: Component = () => {
                 Authenticate
               </button>
             </div>
-          </div>
+          </Card>
         </div>
       </Show>
       
       {/* Import Dialog */}
       <Show when={showImportDialog()}>
         <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-          <div class="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full">
-            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Import Configuration</h3>
+          <Card padding="lg" class="max-w-md w-full">
+            <SectionHeader title="Import configuration" size="md" class="mb-4" />
             
             <div class="space-y-4">
-              <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <div class={formField}>
+                <label class={labelClass()}>
                   Configuration File
                 </label>
                 <input
@@ -2675,12 +2668,12 @@ const Settings: Component = () => {
                     const file = e.currentTarget.files?.[0];
                     if (file) setImportFile(file);
                   }}
-                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  class={controlClass('cursor-pointer')}
                 />
               </div>
               
-              <div>
-                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <div class={formField}>
+                <label class={labelClass()}>
                   Backup Password
                 </label>
                 <input
@@ -2688,9 +2681,9 @@ const Settings: Component = () => {
                   value={importPassphrase()}
                   onInput={(e) => setImportPassphrase(e.currentTarget.value)}
                   placeholder="Enter the password used when creating this backup"
-                  class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  class={controlClass()}
                 />
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                <p class={`${formHelpText} mt-1`}>
                   This is usually your Pulse login password, unless you used a custom passphrase
                 </p>
               </div>
@@ -2721,7 +2714,7 @@ const Settings: Component = () => {
                 </button>
               </div>
             </div>
-          </div>
+          </Card>
         </div>
       </Show>
       
@@ -2737,4 +2730,4 @@ const Settings: Component = () => {
   );
 };
 
-export default Settings;
\ No newline at end of file
+export default Settings;
diff --git a/frontend-modern/src/components/Storage/DiskList.tsx b/frontend-modern/src/components/Storage/DiskList.tsx
index be62d0993..3c18f5054 100644
--- a/frontend-modern/src/components/Storage/DiskList.tsx
+++ b/frontend-modern/src/components/Storage/DiskList.tsx
@@ -1,4 +1,5 @@
 import { Component, For, Show, createMemo, createSignal } from 'solid-js';
+import { Card } from '@/components/shared/Card';
 import { formatBytes } from '@/utils/format';
 import { useWebSocket } from '@/App';
 import type { PhysicalDisk } from '@/types/api';
@@ -86,17 +87,15 @@ export const DiskList: Component<DiskListProps> = (props) => {
   return (
     <div>
       <Show when={filteredDisks().length === 0}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center text-gray-500">
-            No physical disks found
-            {props.selectedNode && ` for node ${props.selectedNode}`}
-            {props.searchTerm && ` matching "${props.searchTerm}"`}
-          </div>
-        </div>
+        <Card padding="lg" class="text-center text-gray-500">
+          No physical disks found
+          {props.selectedNode && ` for node ${props.selectedNode}`}
+          {props.searchTerm && ` matching "${props.searchTerm}"`}
+        </Card>
       </Show>
       
       <Show when={filteredDisks().length > 0}>
-        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+        <Card padding="none" class="overflow-hidden">
           <div class="overflow-x-auto">
             <table class="w-full">
               <thead>
@@ -192,7 +191,7 @@ export const DiskList: Component<DiskListProps> = (props) => {
               </tbody>
             </table>
           </div>
-        </div>
+        </Card>
       </Show>
     </div>
   );
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 9868e7abf..6420f510e 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -8,6 +8,9 @@ import { ComponentErrorBoundary } from '@/components/ErrorBoundary';
 import { UnifiedNodeSelector } from '@/components/shared/UnifiedNodeSelector';
 import { StorageFilter } from './StorageFilter';
 import { DiskList } from './DiskList';
+import { Card } from '@/components/shared/Card';
+import { EmptyState } from '@/components/shared/EmptyState';
+import { SectionHeader } from '@/components/shared/SectionHeader';
 
 
 const Storage: Component = () => {
@@ -263,7 +266,7 @@ const Storage: Component = () => {
       
       {/* Show simple search for disks */}
       <Show when={tabView() === 'disks'}>
-        <div class="mb-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-3">
+        <Card class="mb-3" padding="sm">
           <div class="relative">
             <input
               type="text"
@@ -279,64 +282,75 @@ const Storage: Component = () => {
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
             </svg>
           </div>
-        </div>
+        </Card>
       </Show>
       
       {/* Loading State */}
       <Show when={connected() && !initialDataReceived()}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="animate-spin mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24">
-              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">Loading storage data...</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400">Connecting to monitoring service</p>
-          </div>
-        </div>
+        <Card padding="lg">
+          <EmptyState
+            icon={(
+              <div class="mx-auto flex h-12 w-12 items-center justify-center">
+                <svg class="h-8 w-8 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                </svg>
+              </div>
+            )}
+            title="Loading storage data..."
+            description="Connecting to monitoring service"
+          />
+        </Card>
       </Show>
 
       {/* Helpful hint for no PVE nodes but still show content */}
       <Show when={connected() && initialDataReceived() && (state.nodes || []).filter((n) => n.type === 'pve').length === 0 && sortedStorage().length === 0 && searchTerm().trim() === ''}>
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-          <div class="text-center">
-            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No storage configured</h3>
-            <p class="text-xs text-gray-600 dark:text-gray-400 mb-4">Add a Proxmox VE or PBS node in the Settings tab to start monitoring storage.</p>
-            <button type="button"
-              onClick={() => {
-                const settingsTab = document.querySelector('[role="tab"]:last-child') as HTMLElement;
-                settingsTab?.click();
-              }}
-              class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-            >
-              Go to Settings
-            </button>
-          </div>
-        </div>
+        <Card padding="lg">
+          <EmptyState
+            icon={(
+              <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            )}
+            title="No storage configured"
+            description="Add a Proxmox VE or PBS node in the Settings tab to start monitoring storage."
+            actions={(
+              <button
+                type="button"
+                onClick={() => {
+                  const settingsTab = document.querySelector('[role=\"tab\"]:last-child') as HTMLElement;
+                  settingsTab?.click();
+                }}
+                class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+              >
+                Go to Settings
+              </button>
+            )}
+          />
+        </Card>
       </Show>
       
       {/* Conditional rendering based on tab */}
       <Show when={tabView() === 'pools'}>
         {/* No results found message for storage pools */}
         <Show when={connected() && initialDataReceived() && sortedStorage().length === 0 && searchTerm().trim() !== ''}>
-          <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-8">
-            <div class="text-center">
-              <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-              <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">No storage found</h3>
-              <p class="text-xs text-gray-600 dark:text-gray-400">No storage matches your search "{searchTerm()}"</p>
-            </div>
-          </div>
+          <Card padding="lg">
+            <EmptyState
+              icon={(
+                <svg class="h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              )}
+              title="No storage found"
+              description={`No storage matches your search "${searchTerm()}"`}
+            />
+          </Card>
         </Show>
         
         {/* Storage Table - shows for both PVE and PBS storage */}
         <Show when={connected() && initialDataReceived() && sortedStorage().length > 0}>
         <ComponentErrorBoundary name="Storage Table">
-          <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+          <Card padding="none" class="mb-4 overflow-hidden">
             <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
               <style>{`
                 .overflow-x-auto::-webkit-scrollbar { display: none; }
@@ -547,7 +561,7 @@ const Storage: Component = () => {
               </tbody>
             </table>
             </div>
-          </div>
+        </Card>
         </ComponentErrorBoundary>
         </Show>
       </Show>
@@ -565,4 +579,4 @@ const Storage: Component = () => {
   );
 };
 
-export default Storage;
\ No newline at end of file
+export default Storage;
diff --git a/frontend-modern/src/components/Storage/StorageFilter.tsx b/frontend-modern/src/components/Storage/StorageFilter.tsx
index 95dff8fb8..d3e7c75d9 100644
--- a/frontend-modern/src/components/Storage/StorageFilter.tsx
+++ b/frontend-modern/src/components/Storage/StorageFilter.tsx
@@ -1,4 +1,5 @@
 import { Component, Show } from 'solid-js';
+import { Card } from '@/components/shared/Card';
 import { showTooltip, hideTooltip } from '@/components/shared/Tooltip';
 
 interface StorageFilterProps {
@@ -13,7 +14,7 @@ interface StorageFilterProps {
 
 export const StorageFilter: Component<StorageFilterProps> = (props) => {
   return (
-    <div class="storage-filter mb-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm p-3">
+    <Card class="storage-filter mb-3" padding="sm">
       <div class="flex flex-col lg:flex-row gap-3">
         {/* Search Bar */}
         <div class="flex gap-2 flex-1">
@@ -118,6 +119,6 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
           </Show>
         </div>
       </div>
-    </div>
+    </Card>
   );
 };
\ No newline at end of file
diff --git a/frontend-modern/src/components/shared/Card.tsx b/frontend-modern/src/components/shared/Card.tsx
new file mode 100644
index 000000000..10725294c
--- /dev/null
+++ b/frontend-modern/src/components/shared/Card.tsx
@@ -0,0 +1,47 @@
+import { JSX, splitProps, mergeProps } from 'solid-js';
+
+type Tone = 'default' | 'muted' | 'info' | 'success' | 'warning' | 'danger';
+type Padding = 'none' | 'sm' | 'md' | 'lg';
+
+type CardProps = {
+  tone?: Tone;
+  padding?: Padding;
+  hoverable?: boolean;
+  border?: boolean;
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+const toneClassMap: Record<Tone, string> = {
+  default: 'bg-white dark:bg-gray-800',
+  muted: 'bg-gray-50 dark:bg-gray-800/80',
+  info: 'bg-blue-50/70 dark:bg-blue-900/20',
+  success: 'bg-green-50/70 dark:bg-green-900/20',
+  warning: 'bg-amber-50/80 dark:bg-amber-900/20',
+  danger: 'bg-red-50/80 dark:bg-red-900/20'
+};
+
+const paddingClassMap: Record<Padding, string> = {
+  none: 'p-0',
+  sm: 'p-3',
+  md: 'p-4',
+  lg: 'p-6'
+};
+
+export function Card(props: CardProps) {
+  const merged = mergeProps({ tone: 'default' as Tone, padding: 'md' as Padding, hoverable: false, border: true }, props);
+  const [local, rest] = splitProps(merged, ['tone', 'padding', 'hoverable', 'border', 'class']);
+
+  const baseClass = 'rounded-lg shadow-sm transition-shadow duration-200';
+  const toneClass = toneClassMap[local.tone];
+  const paddingClass = paddingClassMap[local.padding];
+  const borderClass = local.border ? 'border border-gray-200 dark:border-gray-700' : '';
+  const hoverClass = local.hoverable ? 'hover:shadow-md' : '';
+
+  return (
+    <div
+      class={`${baseClass} ${toneClass} ${paddingClass} ${borderClass} ${hoverClass} ${local.class ?? ''}`.trim()}
+      {...rest}
+    />
+  );
+}
+
+export default Card;
diff --git a/frontend-modern/src/components/shared/EmptyState.tsx b/frontend-modern/src/components/shared/EmptyState.tsx
new file mode 100644
index 000000000..baa929e62
--- /dev/null
+++ b/frontend-modern/src/components/shared/EmptyState.tsx
@@ -0,0 +1,68 @@
+import { JSX, Show, mergeProps, splitProps } from 'solid-js';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+
+type EmptyStateTone = 'default' | 'info' | 'success' | 'warning' | 'danger';
+
+type EmptyStateProps = {
+  icon?: JSX.Element;
+  title: JSX.Element;
+  description?: JSX.Element;
+  actions?: JSX.Element;
+  tone?: EmptyStateTone;
+  align?: 'center' | 'left';
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+const titleToneClass: Record<EmptyStateTone, string> = {
+  default: '',
+  info: 'text-blue-700 dark:text-blue-300',
+  success: 'text-green-700 dark:text-green-300',
+  warning: 'text-amber-700 dark:text-amber-300',
+  danger: 'text-red-700 dark:text-red-300'
+};
+
+const descriptionToneClass: Record<EmptyStateTone, string> = {
+  default: '',
+  info: 'text-blue-600 dark:text-blue-300',
+  success: 'text-green-600 dark:text-green-300',
+  warning: 'text-amber-600 dark:text-amber-300',
+  danger: 'text-red-600 dark:text-red-300'
+};
+
+export function EmptyState(props: EmptyStateProps) {
+  const merged = mergeProps({ tone: 'default' as EmptyStateTone, align: 'center' as const }, props);
+  const [local, others] = splitProps(merged, ['icon', 'title', 'description', 'actions', 'tone', 'align', 'class']);
+
+  const alignment = local.align;
+  const tone = local.tone;
+  const containerClass = [
+    'flex flex-col gap-3',
+    alignment === 'center' ? 'items-center text-center' : 'items-start text-left',
+    local.class ?? ''
+  ].join(' ').trim();
+
+  return (
+    <div class={containerClass} {...others}>
+      <Show when={local.icon}>
+        <div class={alignment === 'center' ? 'flex justify-center' : ''}>
+          {local.icon}
+        </div>
+      </Show>
+      <SectionHeader
+        align={alignment}
+        title={local.title}
+        description={local.description}
+        size={alignment === 'center' ? 'sm' : 'md'}
+        class={alignment === 'center' ? 'items-center' : 'items-start'}
+        titleClass={titleToneClass[tone]}
+        descriptionClass={`text-xs ${descriptionToneClass[tone]}`.trim()}
+      />
+      <Show when={local.actions}>
+        <div class={alignment === 'center' ? 'mt-2 flex flex-col items-center gap-2' : 'mt-2 flex flex-col gap-2'}>
+          {local.actions}
+        </div>
+      </Show>
+    </div>
+  );
+}
+
+export default EmptyState;
diff --git a/frontend-modern/src/components/shared/Form.ts b/frontend-modern/src/components/shared/Form.ts
new file mode 100644
index 000000000..904a14446
--- /dev/null
+++ b/frontend-modern/src/components/shared/Form.ts
@@ -0,0 +1,57 @@
+const baseField = 'flex flex-col gap-1';
+const baseLabel = 'text-sm font-medium text-gray-700 dark:text-gray-300';
+const baseHelp = 'text-xs text-gray-500 dark:text-gray-400';
+const baseControl = [
+  'w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm',
+  'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500',
+  'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100'
+].join(' ');
+const baseCheckbox = 'rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:focus:ring-blue-400';
+
+const join = (base: string, extra?: string) => (extra ? `${base} ${extra}`.trim() : base);
+
+export const formSection = 'space-y-6';
+export const formField = baseField;
+export const formFieldInline = 'flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3';
+export const formLabel = baseLabel;
+export const formHelpText = baseHelp;
+export const formControl = baseControl;
+export const formCheckbox = baseCheckbox;
+
+export const formControlDense = join(baseControl, 'py-1.5 px-2');
+export const formControlMono = join(baseControl, 'font-mono');
+
+export const formSelect = join(baseControl, 'pr-8 appearance-none');
+export const formTextarea = join(baseControl, 'min-h-[120px] resize-vertical');
+
+export const formLabelMuted = join(baseLabel, 'text-gray-500 dark:text-gray-400 font-normal');
+
+export function labelClass(extra?: string) {
+  return join(baseLabel, extra);
+}
+
+export function controlClass(extra?: string) {
+  return join(baseControl, extra);
+}
+
+export function helpTextClass(extra?: string) {
+  return join(baseHelp, extra);
+}
+
+export default {
+  formSection,
+  formField,
+  formFieldInline,
+  formLabel,
+  formLabelMuted,
+  formHelpText,
+  formControl,
+  formControlDense,
+  formControlMono,
+  formSelect,
+  formTextarea,
+  formCheckbox,
+  labelClass,
+  controlClass,
+  helpTextClass
+};
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index f45825950..50b650142 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -4,6 +4,7 @@ import { formatBytes, formatUptime } from '@/utils/format';
 import { MetricBar } from '@/components/Dashboard/MetricBar';
 import { useWebSocket } from '@/App';
 import { getAlertStyles } from '@/utils/alerts';
+import { Card } from '@/components/shared/Card';
 
 interface NodeSummaryTableProps {
   nodes: Node[];
@@ -102,7 +103,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
   // This prevents the table from disappearing on refresh while data loads
 
   return (
-    <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+    <Card padding="none" class="mb-4 overflow-hidden">
       <div class="overflow-x-auto">
         <table class="w-full min-w-[600px] border-collapse">
           <thead>
@@ -309,6 +310,6 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
           </tbody>
         </table>
       </div>
-    </div>
+    </Card>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend-modern/src/components/shared/SectionHeader.tsx b/frontend-modern/src/components/shared/SectionHeader.tsx
new file mode 100644
index 000000000..5a2ce6655
--- /dev/null
+++ b/frontend-modern/src/components/shared/SectionHeader.tsx
@@ -0,0 +1,48 @@
+import { JSX, Show, splitProps, mergeProps } from 'solid-js';
+
+type SectionHeaderProps = {
+  label?: JSX.Element;
+  title: JSX.Element;
+  description?: JSX.Element;
+  align?: 'left' | 'center';
+  size?: 'sm' | 'md' | 'lg';
+  titleClass?: string;
+  descriptionClass?: string;
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+export function SectionHeader(props: SectionHeaderProps) {
+  const merged = mergeProps({ align: 'left' as const, size: 'md' as const, titleClass: '', descriptionClass: '' }, props);
+  const [local, rest] = splitProps(merged, ['label', 'title', 'description', 'align', 'size', 'titleClass', 'descriptionClass', 'class']);
+
+  const alignmentClass = local.align === 'center' ? 'text-center items-center' : 'text-left items-start';
+  const sizeClass = () => {
+    switch (local.size) {
+      case 'sm':
+        return 'text-base';
+      case 'lg':
+        return 'text-2xl';
+      default:
+        return 'text-lg';
+    }
+  };
+
+  return (
+    <div class={`flex flex-col gap-1 ${alignmentClass} ${local.class ?? ''}`.trim()} {...rest}>
+      <Show when={local.label}>
+        <span class="text-[0.7rem] font-semibold uppercase tracking-[0.18em] text-gray-500 dark:text-gray-400">
+          {local.label}
+        </span>
+      </Show>
+      <h2 class={`${sizeClass()} font-semibold text-gray-900 dark:text-gray-100 ${local.titleClass ?? ''}`.trim()}>
+        {local.title}
+      </h2>
+      <Show when={local.description}>
+        <p class={`text-sm text-gray-600 dark:text-gray-400 ${local.descriptionClass ?? ''}`.trim()}>
+          {local.description}
+        </p>
+      </Show>
+    </div>
+  );
+}
+
+export default SectionHeader;
diff --git a/frontend-modern/src/components/shared/SettingsPanel.tsx b/frontend-modern/src/components/shared/SettingsPanel.tsx
new file mode 100644
index 000000000..2dc3c9d60
--- /dev/null
+++ b/frontend-modern/src/components/shared/SettingsPanel.tsx
@@ -0,0 +1,42 @@
+import { JSX, Show, splitProps } from 'solid-js';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+
+type SettingsPanelProps = {
+  title: JSX.Element;
+  description?: JSX.Element;
+  action?: JSX.Element;
+  bodyClass?: string;
+  tone?: 'default' | 'muted' | 'info' | 'success' | 'warning' | 'danger';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+} & JSX.HTMLAttributes<HTMLDivElement>;
+
+export function SettingsPanel(props: SettingsPanelProps) {
+  const [local, rest] = splitProps(props, ['title', 'description', 'action', 'bodyClass', 'children', 'class', 'tone', 'padding']);
+
+  return (
+    <Card
+      padding={local.padding ?? 'lg'}
+      tone={local.tone ?? 'default'}
+      class={`space-y-6 ${local.class ?? ''}`.trim()}
+      {...rest}
+    >
+      <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <SectionHeader
+          title={local.title}
+          description={local.description}
+          size="sm"
+          class="flex-1"
+        />
+        <Show when={local.action}>
+          <div class="md:ml-6">{local.action}</div>
+        </Show>
+      </div>
+      <div class={local.bodyClass ?? 'space-y-4'}>
+        {local.children}
+      </div>
+    </Card>
+  );
+}
+
+export default SettingsPanel;
diff --git a/frontend-modern/src/components/shared/Toggle.tsx b/frontend-modern/src/components/shared/Toggle.tsx
new file mode 100644
index 000000000..8a1759f93
--- /dev/null
+++ b/frontend-modern/src/components/shared/Toggle.tsx
@@ -0,0 +1,56 @@
+import { JSX, mergeProps, splitProps } from 'solid-js';
+
+export type ToggleProps = {
+  label?: JSX.Element;
+  description?: JSX.Element;
+  containerClass?: string;
+} & JSX.InputHTMLAttributes<HTMLInputElement>;
+
+export function Toggle(props: ToggleProps) {
+  const merged = mergeProps({ containerClass: '' }, props);
+  const [local, rest] = splitProps(merged, ['label', 'description', 'containerClass', 'class', 'disabled']);
+
+  const isDisabled = () => Boolean(local.disabled ?? rest.disabled);
+  const isChecked = () => {
+    const value = rest.checked as unknown;
+    if (typeof value === 'function') {
+      try {
+        return Boolean((value as () => unknown)());
+      } catch {
+        return false;
+      }
+    }
+    return Boolean(value);
+  };
+
+  return (
+    <label class={`flex items-center gap-3 ${local.containerClass ?? ''} ${local.class ?? ''}`.trim()}>
+      <span class={`relative inline-flex h-6 w-11 flex-shrink-0 items-center ${isDisabled() ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'}`}>
+        <input type="checkbox" class="sr-only" {...rest} />
+        <span
+          class={`absolute inset-0 rounded-full transition ${
+            isChecked()
+              ? 'bg-blue-600 dark:bg-blue-500'
+              : isDisabled()
+                ? 'bg-gray-300 dark:bg-gray-600'
+                : 'bg-gray-200 dark:bg-gray-700'
+          }`}
+        />
+        <span
+          class="absolute left-1 top-1 h-4 w-4 rounded-full bg-white shadow transition-transform dark:bg-gray-100"
+          style={{ transform: isChecked() ? 'translateX(20px)' : 'translateX(0)' }}
+        />
+      </span>
+      {(local.label || local.description) && (
+        <span class="flex flex-col text-sm text-gray-700 dark:text-gray-300">
+          {local.label}
+          <span class="text-xs text-gray-500 dark:text-gray-400">
+            {local.description}
+          </span>
+        </span>
+      )}
+    </label>
+  );
+}
+
+export default Toggle;
diff --git a/frontend-modern/src/pages/Alerts.tsx b/frontend-modern/src/pages/Alerts.tsx
index 4896babc6..314a68ec8 100644
--- a/frontend-modern/src/pages/Alerts.tsx
+++ b/frontend-modern/src/pages/Alerts.tsx
@@ -3,6 +3,11 @@ import { EmailProviderSelect } from '@/components/Alerts/EmailProviderSelect';
 import { WebhookConfig } from '@/components/Alerts/WebhookConfig';
 import { CustomRulesTab } from '@/components/Alerts/CustomRulesTab';
 import { ThresholdsTable } from '@/components/Alerts/ThresholdsTable';
+import { Card } from '@/components/shared/Card';
+import { SectionHeader } from '@/components/shared/SectionHeader';
+import { SettingsPanel } from '@/components/shared/SettingsPanel';
+import { Toggle } from '@/components/shared/Toggle';
+import { formField, labelClass, controlClass, formHelpText } from '@/components/shared/Form';
 import { useWebSocket } from '@/App';
 import { showSuccess, showError } from '@/utils/toast';
 import { AlertsAPI } from '@/api/alerts';
@@ -536,21 +541,20 @@ export function Alerts() {
   ];
   
   return (
-    <div class="space-y-4">
+    <div class="space-y-6">
       {/* Header with better styling */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-        <div>
-          <h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Alert Configuration</h1>
-          <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
-            Configure monitoring thresholds and notification settings
-          </p>
-        </div>
-      </div>
-      
+      <Card padding="md">
+        <SectionHeader
+          title="Alert configuration"
+          description="Configure monitoring thresholds and notification settings"
+          size="lg"
+        />
+      </Card>
+
       {/* Save notification bar - only show when there are unsaved changes */}
       <Show when={hasUnsavedChanges() && activeTab() !== 'overview' && activeTab() !== 'history'}>
-        <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 sm:p-4">
-          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+        <Card tone="warning" padding="sm" class="border-yellow-200 dark:border-yellow-800 sm:p-4">
+          <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
             <div class="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <circle cx="12" cy="12" r="10"></circle>
@@ -559,9 +563,9 @@ export function Alerts() {
               </svg>
               <span class="text-sm font-medium">You have unsaved changes</span>
             </div>
-            <div class="flex gap-2 w-full sm:w-auto">
+            <div class="flex w-full gap-2 sm:w-auto">
               <button 
-                class="flex-1 sm:flex-initial px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+                class="flex-1 px-4 py-2 text-sm text-white transition-colors sm:flex-initial bg-blue-600 rounded-lg hover:bg-blue-700"
                 onClick={async () => {
                   try {
                     // Save alert configuration with hysteresis format
@@ -648,7 +652,7 @@ export function Alerts() {
                 Save Changes
               </button>
               <button 
-                class="flex-1 sm:flex-initial px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                class="flex-1 px-4 py-2 text-sm transition-colors border border-gray-300 rounded-lg text-gray-700 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 sm:flex-initial"
                 onClick={() => {
                   // Reset any changes made
                   window.location.reload();
@@ -658,11 +662,11 @@ export function Alerts() {
               </button>
             </div>
           </div>
-        </div>
+        </Card>
       </Show>
       
       {/* Tab Navigation - modern style */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
+      <Card padding="none">
         <div class="p-1">
           <div class="flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5 w-full overflow-x-auto">
             <For each={tabs}>
@@ -758,7 +762,7 @@ export function Alerts() {
             />
           </Show>
         </div>
-      </div>
+      </Card>
       
     </div>
   );
@@ -810,12 +814,12 @@ function OverviewTab(props: {
   return (
     <div class="space-y-6">
       {/* Stats Cards */}
-      <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 sm:p-4 shadow-sm">
+      <div class="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">
+        <Card padding="sm" class="sm:p-4">
           <div class="flex items-center justify-between">
             <div>
               <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Active Alerts</p>
-              <p class="text-xl sm:text-2xl font-semibold text-red-600 dark:text-red-400">{alertStats().active}</p>
+              <p class="text-xl sm:text-2xl font-semibold text-gray-600 dark:text-gray-300">{alertStats().active}</p>
             </div>
             <div class="w-8 h-8 sm:w-10 sm:h-10 bg-red-100 dark:bg-red-900/50 rounded-full flex items-center justify-center">
               <svg width="16" height="16" class="sm:w-5 sm:h-5 text-red-600 dark:text-red-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -824,9 +828,9 @@ function OverviewTab(props: {
               </svg>
             </div>
           </div>
-        </div>
+        </Card>
         
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 sm:p-4 shadow-sm">
+        <Card padding="sm" class="sm:p-4">
           <div class="flex items-center justify-between">
             <div>
               <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Acknowledged</p>
@@ -839,9 +843,9 @@ function OverviewTab(props: {
               </svg>
             </div>
           </div>
-        </div>
+        </Card>
         
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 sm:p-4 shadow-sm">
+        <Card padding="sm" class="sm:p-4">
           <div class="flex items-center justify-between">
             <div>
               <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Last 24 Hours</p>
@@ -854,9 +858,9 @@ function OverviewTab(props: {
               </svg>
             </div>
           </div>
-        </div>
+        </Card>
         
-        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-3 sm:p-4 shadow-sm">
+        <Card padding="sm" class="sm:p-4">
           <div class="flex items-center justify-between">
             <div>
               <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Guest Overrides</p>
@@ -869,14 +873,12 @@ function OverviewTab(props: {
               </svg>
             </div>
           </div>
-        </div>
+        </Card>
       </div>
       
       {/* Recent Alerts */}
       <div>
-        <div class="flex items-center justify-between mb-3">
-          <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">Active Alerts</h3>
-        </div>
+        <SectionHeader title="Active Alerts" class="mb-3" />
         <Show 
           when={Object.keys(props.activeAlerts).length > 0}
           fallback={
@@ -1147,32 +1149,25 @@ function DestinationsTab(props: DestinationsTabProps) {
   };
   
   return (
-    <div class="space-y-6">
-      {/* Email Configuration */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
-        <div class="flex items-center justify-between mb-4">
-          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
-              <polyline points="22,6 12,13 2,6"></polyline>
-            </svg>
-            Email Notifications
-          </h3>
-          <label class="relative inline-flex items-center cursor-pointer">
-            <input 
-              type="checkbox" 
-              checked={props.emailConfig().enabled}
-              onChange={(e) => {
-                props.setEmailConfig({...props.emailConfig(), enabled: e.currentTarget.checked});
-                props.setHasUnsavedChanges(true);
-              }}
-              class="sr-only peer" 
-            />
-            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-          </label>
-        </div>
-        
-        <div class={`${!props.emailConfig().enabled ? 'opacity-50 pointer-events-none' : ''}`}>
+    <div class="grid w-full max-w-full gap-6 md:gap-8 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)]">
+      <SettingsPanel
+        title="Email notifications"
+        description="Configure SMTP delivery for alert emails."
+        action={
+          <Toggle
+            checked={props.emailConfig().enabled}
+            onChange={(e) => {
+              props.setEmailConfig({ ...props.emailConfig(), enabled: e.currentTarget.checked });
+              props.setHasUnsavedChanges(true);
+            }}
+            containerClass="sm:self-start"
+            label={<span class="text-xs font-medium text-gray-600 dark:text-gray-400">{props.emailConfig().enabled ? 'Enabled' : 'Disabled'}</span>}
+          />
+        }
+        class="min-w-0"
+        bodyClass=""
+      >
+        <div class={`${!props.emailConfig().enabled ? 'pointer-events-none opacity-50 transition-opacity' : 'transition-opacity'}`}>
           <EmailProviderSelect
             config={props.emailConfig()}
             onChange={(config) => {
@@ -1183,25 +1178,24 @@ function DestinationsTab(props: DestinationsTabProps) {
             testing={testingEmail()}
           />
         </div>
-      </div>
-      
-      {/* Webhook Configuration */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-sm">
-        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2 mb-4">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"></path>
-            <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"></path>
-          </svg>
-          Webhooks
-        </h3>
-        
+      </SettingsPanel>
+
+      <SettingsPanel
+        title="Webhooks"
+        description="Push alerts to chat apps or automation systems."
+        action={
+          <span class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+            {webhooks().length} configured
+          </span>
+        }
+        class="min-w-0"
+        bodyClass="space-y-4"
+      >
         <WebhookConfig
           webhooks={webhooks()}
           onAdd={async (webhook) => {
             try {
-              // Save to backend immediately (including service field)
               const created = await NotificationsAPI.createWebhook(webhook);
-              // Update local state with the created webhook
               setWebhooks([...webhooks(), created]);
               showSuccess('Webhook added successfully');
             } catch (err) {
@@ -1211,10 +1205,8 @@ function DestinationsTab(props: DestinationsTabProps) {
           }}
           onUpdate={async (webhook) => {
             try {
-              // Update on backend immediately (including service field)
               const updated = await NotificationsAPI.updateWebhook(webhook.id!, webhook);
-              // Update local state
-              setWebhooks(webhooks().map(w => 
+              setWebhooks(webhooks().map(w =>
                 w.id === webhook.id ? updated : w
               ));
               showSuccess('Webhook updated successfully');
@@ -1225,9 +1217,7 @@ function DestinationsTab(props: DestinationsTabProps) {
           }}
           onDelete={async (id) => {
             try {
-              // Delete from backend immediately
               await NotificationsAPI.deleteWebhook(id);
-              // Update local state
               setWebhooks(webhooks().filter(w => w.id !== id));
               showSuccess('Webhook deleted successfully');
             } catch (err) {
@@ -1238,7 +1228,7 @@ function DestinationsTab(props: DestinationsTabProps) {
           onTest={testWebhook}
           testing={testingWebhook()}
         />
-      </div>
+      </SettingsPanel>
     </div>
   );
 }
@@ -1327,447 +1317,405 @@ function ScheduleTab(props: ScheduleTabProps) {
     { id: 'sunday', label: 'S', fullLabel: 'Sunday' }
   ];
   
-  // No longer need ref logic since we're using parent state
-  
   return (
-    <div class="space-y-4">
-      {/* Header */}
-      <div class="mb-6">
-        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Schedule</h2>
-        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Control when and how alerts are delivered</p>
-      </div>
-      
-      {/* Quiet Hours */}
-      <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 sm:p-6">
-        <div class="flex items-start sm:items-center justify-between gap-4 flex-col sm:flex-row">
-          <div class="flex items-start gap-3">
-            <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-              </svg>
-            </div>
-            <div>
-              <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200">Quiet Hours</h3>
-              <p class="text-sm text-gray-600 dark:text-gray-400">Pause non-critical alerts during specific times</p>
-            </div>
-          </div>
-          <label class="relative inline-flex items-center cursor-pointer">
-            <input
-              type="checkbox"
+    <div class="space-y-6">
+      <SectionHeader
+        label="Notification Schedule"
+        title="Control when alerts are allowed to fire and how they are grouped."
+      />
+
+      <div class="grid gap-6 lg:grid-cols-2">
+        {/* Quiet Hours */}
+        <SettingsPanel
+          title="Quiet hours"
+          description="Pause non-critical alerts during specific times."
+          action={
+            <Toggle
               checked={quietHours().enabled}
               onChange={(e) => {
                 setQuietHours({ ...quietHours(), enabled: e.currentTarget.checked });
                 props.setHasUnsavedChanges(true);
               }}
-              class="sr-only peer"
+              containerClass="sm:self-start"
+              label={<span class="text-xs font-medium text-gray-600 dark:text-gray-400">{quietHours().enabled ? 'Enabled' : 'Disabled'}</span>}
             />
-            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-          </label>
-        </div>
-        
-        <Show when={quietHours().enabled}>
-          <div class="space-y-4 mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
-            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              <div>
-                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Start Time</label>
-                <input
-                  type="time"
-                  value={quietHours().start}
-                  onChange={(e) => {
-                    setQuietHours({ ...quietHours(), start: e.currentTarget.value });
-                    props.setHasUnsavedChanges(true);
-                  }}
-                  class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-600 dark:border-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                />
+          }
+          class="space-y-4"
+        >
+          <Show when={quietHours().enabled}>
+            <div class="space-y-4">
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                <div class={formField}>
+                  <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>
+                    Start time
+                  </label>
+                  <input
+                    type="time"
+                    value={quietHours().start}
+                    onChange={(e) => {
+                      setQuietHours({ ...quietHours(), start: e.currentTarget.value });
+                      props.setHasUnsavedChanges(true);
+                    }}
+                    class={controlClass('font-mono')}
+                  />
+                </div>
+                <div class={formField}>
+                  <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>
+                    End time
+                  </label>
+                  <input
+                    type="time"
+                    value={quietHours().end}
+                    onChange={(e) => {
+                      setQuietHours({ ...quietHours(), end: e.currentTarget.value });
+                      props.setHasUnsavedChanges(true);
+                    }}
+                    class={controlClass('font-mono')}
+                  />
+                </div>
+                <div class={formField}>
+                  <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>
+                    Timezone
+                  </label>
+                  <select
+                    value={quietHours().timezone}
+                    onChange={(e) => {
+                      setQuietHours({ ...quietHours(), timezone: e.currentTarget.value });
+                      props.setHasUnsavedChanges(true);
+                    }}
+                    class={controlClass('pr-8')}
+                  >
+                    <For each={timezones}>
+                      {(tz) => <option value={tz}>{tz}</option>}
+                    </For>
+                  </select>
+                </div>
               </div>
+
               <div>
-                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">End Time</label>
-                <input
-                  type="time"
-                  value={quietHours().end}
-                  onChange={(e) => {
-                    setQuietHours({ ...quietHours(), end: e.currentTarget.value });
-                    props.setHasUnsavedChanges(true);
-                  }}
-                  class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-600 dark:border-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                />
-              </div>
-              <div>
-                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Timezone</label>
-                <select
-                  value={quietHours().timezone}
-                  onChange={(e) => {
-                    setQuietHours({ ...quietHours(), timezone: e.currentTarget.value });
-                    props.setHasUnsavedChanges(true);
-                  }}
-                  class="w-full px-3 py-2 text-sm border rounded-lg dark:bg-gray-600 dark:border-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                >
-                  <For each={timezones}>
-                    {(tz) => <option value={tz}>{tz}</option>}
+                <span class={`${labelClass('text-xs uppercase tracking-[0.08em]')} mb-2 block`}>
+                  Quiet days
+                </span>
+                <div class="grid grid-cols-7 gap-1">
+                  <For each={days}>
+                    {(day) => (
+                      <button
+                        type="button"
+                        onClick={() => {
+                          const currentDays = quietHours().days;
+                          setQuietHours({
+                            ...quietHours(),
+                            days: { ...currentDays, [day.id]: !currentDays[day.id] }
+                          });
+                          props.setHasUnsavedChanges(true);
+                        }}
+                        title={day.fullLabel}
+                        class={`px-2 py-2 text-xs font-medium transition-all duration-200 ${
+                          quietHours().days[day.id]
+                            ? 'rounded-md bg-blue-500 text-white shadow-sm'
+                            : 'rounded-md bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600'
+                        }`}
+                      >
+                        {day.label}
+                      </button>
+                    )}
                   </For>
-                </select>
+                </div>
+                <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                  <Show when={quietHours().days.monday && quietHours().days.tuesday && quietHours().days.wednesday && quietHours().days.thursday && quietHours().days.friday && !quietHours().days.saturday && !quietHours().days.sunday}>
+                    Weekdays only
+                  </Show>
+                  <Show when={!quietHours().days.monday && !quietHours().days.tuesday && !quietHours().days.wednesday && !quietHours().days.thursday && !quietHours().days.friday && quietHours().days.saturday && quietHours().days.sunday}>
+                    Weekends only
+                  </Show>
+                </p>
               </div>
             </div>
-            
-            <div>
-              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Quiet Days</label>
-              <div class="grid grid-cols-7 gap-1">
-                <For each={days}>
-                  {(day) => (
-                    <button type="button"
-                      onClick={() => {
-                        const currentDays = quietHours().days;
-                        setQuietHours({
-                          ...quietHours(),
-                          days: { ...currentDays, [day.id]: !currentDays[day.id] }
-                        });
-                        props.setHasUnsavedChanges(true);
-                      }}
-                      title={day.fullLabel}
-                      class={`px-2 py-2 text-xs rounded-lg transition-all duration-200 font-medium ${
-                        quietHours().days[day.id]
-                          ? 'bg-blue-500 text-white shadow-sm'
-                          : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-600'
-                      }`}
-                    >
-                      {day.label}
-                    </button>
-                  )}
-                </For>
-              </div>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                <Show when={quietHours().days.monday && quietHours().days.tuesday && quietHours().days.wednesday && quietHours().days.thursday && quietHours().days.friday && !quietHours().days.saturday && !quietHours().days.sunday}>
-                  Weekdays only
-                </Show>
-                <Show when={!quietHours().days.monday && !quietHours().days.tuesday && !quietHours().days.wednesday && !quietHours().days.thursday && !quietHours().days.friday && quietHours().days.saturday && quietHours().days.sunday}>
-                  Weekends only
-                </Show>
-              </p>
-            </div>
-          </div>
-        </Show>
-      </div>
-      
-      {/* Cooldown Period */}
-      <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 sm:p-6">
-        <div class="flex items-start sm:items-center justify-between gap-4 flex-col sm:flex-row">
-          <div class="flex items-start gap-3">
-            <div class="w-10 h-10 bg-amber-100 dark:bg-amber-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-5 h-5 text-amber-600 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-            </div>
-            <div>
-              <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200">Alert Cooldown</h3>
-              <p class="text-sm text-gray-600 dark:text-gray-400">Limit alert frequency to prevent spam</p>
-            </div>
-          </div>
-          <label class="relative inline-flex items-center cursor-pointer">
-            <input
-              type="checkbox"
+          </Show>
+        </SettingsPanel>
+
+        {/* Cooldown Period */}
+        <SettingsPanel
+          title="Alert cooldown"
+          description="Limit alert frequency to prevent spam."
+          action={
+            <Toggle
               checked={cooldown().enabled}
               onChange={(e) => {
                 setCooldown({ ...cooldown(), enabled: e.currentTarget.checked });
                 props.setHasUnsavedChanges(true);
               }}
-              class="sr-only peer"
+              containerClass="sm:self-start"
+              label={<span class="text-xs font-medium text-gray-600 dark:text-gray-400">{cooldown().enabled ? 'Enabled' : 'Disabled'}</span>}
             />
-            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-          </label>
-        </div>
-        
-        <Show when={cooldown().enabled}>
-          <div class="space-y-4 mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div>
-                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Cooldown Period
-                </label>
-                <div class="relative">
-                  <input
-                    type="number"
-                    min="5"
-                    max="120"
-                    value={cooldown().minutes}
-                    onChange={(e) => {
-                      setCooldown({ ...cooldown(), minutes: parseInt(e.currentTarget.value) });
-                      props.setHasUnsavedChanges(true);
-                    }}
-                    class="w-full px-3 py-2 pr-16 text-sm border rounded-lg dark:bg-gray-600 dark:border-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                  <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400">minutes</span>
+          }
+          class="space-y-4"
+        >
+          <Show when={cooldown().enabled}>
+            <div class="space-y-4">
+              <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                <div class={formField}>
+                  <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>
+                    Cooldown period
+                  </label>
+                  <div class="relative">
+                    <input
+                      type="number"
+                      min="5"
+                      max="120"
+                      value={cooldown().minutes}
+                      onChange={(e) => {
+                        setCooldown({ ...cooldown(), minutes: parseInt(e.currentTarget.value) });
+                        props.setHasUnsavedChanges(true);
+                      }}
+                      class={controlClass('pr-16')}
+                    />
+                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-gray-500 dark:text-gray-400">minutes</span>
+                  </div>
+                  <p class={`${formHelpText} mt-1`}>Minimum time between alerts for the same issue</p>
                 </div>
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  Minimum time between alerts for the same issue
-                </p>
-              </div>
-              
-              <div>
-                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Max Alerts/Hour
-                </label>
-                <div class="relative">
-                  <input
-                    type="number"
-                    min="1"
-                    max="10"
-                    value={cooldown().maxAlerts}
-                    onChange={(e) => {
-                      setCooldown({ ...cooldown(), maxAlerts: parseInt(e.currentTarget.value) });
-                      props.setHasUnsavedChanges(true);
-                    }}
-                    class="w-full px-3 py-2 pr-16 text-sm border rounded-lg dark:bg-gray-600 dark:border-gray-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  />
-                  <span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400">alerts</span>
+                
+                <div class={formField}>
+                  <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>
+                    Max alerts / hour
+                  </label>
+                  <div class="relative">
+                    <input
+                      type="number"
+                      min="1"
+                      max="10"
+                      value={cooldown().maxAlerts}
+                      onChange={(e) => {
+                        setCooldown({ ...cooldown(), maxAlerts: parseInt(e.currentTarget.value) });
+                        props.setHasUnsavedChanges(true);
+                      }}
+                      class={controlClass('pr-16')}
+                    />
+                    <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-sm text-gray-500 dark:text-gray-400">alerts</span>
+                  </div>
+                  <p class={`${formHelpText} mt-1`}>Per guest/metric combination</p>
                 </div>
-                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  Per guest/metric combination
-                </p>
               </div>
             </div>
-          </div>
-        </Show>
-      </div>
-      
-      {/* Alert Grouping */}
-      <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 sm:p-6">
-        <div class="flex items-start sm:items-center justify-between gap-4 flex-col sm:flex-row">
-          <div class="flex items-start gap-3">
-            <div class="w-10 h-10 bg-green-100 dark:bg-green-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-              </svg>
-            </div>
-            <div>
-              <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200">Smart Grouping</h3>
-              <p class="text-sm text-gray-600 dark:text-gray-400">Bundle similar alerts together</p>
-            </div>
-          </div>
-          <label class="relative inline-flex items-center cursor-pointer">
-            <input
-              type="checkbox"
+          </Show>
+        </SettingsPanel>
+
+        {/* Alert Grouping */}
+        <SettingsPanel
+          title="Smart grouping"
+          description="Bundle similar alerts together."
+          action={
+            <Toggle
               checked={grouping().enabled}
               onChange={(e) => {
                 setGrouping({ ...grouping(), enabled: e.currentTarget.checked });
                 props.setHasUnsavedChanges(true);
               }}
-              class="sr-only peer"
+              containerClass="sm:self-start"
+              label={<span class="text-xs font-medium text-gray-600 dark:text-gray-400">{grouping().enabled ? 'Enabled' : 'Disabled'}</span>}
             />
-            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-          </label>
-        </div>
-        
-        <Show when={grouping().enabled}>
-          <div class="space-y-4 mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
-            <div>
-              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">
-                Grouping Window
-              </label>
-              <div class="flex items-center gap-3">
-                <input
-                  type="range"
-                  min="1"
-                  max="30"
-                  value={grouping().window}
-                  onChange={(e) => {
-                    setGrouping({ ...grouping(), window: parseInt(e.currentTarget.value) });
-                    props.setHasUnsavedChanges(true);
-                  }}
-                  class="flex-1"
-                />
-                <div class="w-16 px-2 py-1 text-sm text-center bg-gray-100 dark:bg-gray-600 rounded">
-                  {grouping().window} min
-                </div>
-              </div>
-              <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                Alerts within this window will be grouped together
-              </p>
-            </div>
-            
-            <div>
-              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">Grouping Strategy</label>
-              <div class="grid grid-cols-2 gap-2">
-                <label class={`relative flex items-center p-3 rounded-lg cursor-pointer border-2 transition-all ${
-                  grouping().byNode
-                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                    : 'border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                }`}>
+          }
+          class="space-y-4"
+        >
+          <Show when={grouping().enabled}>
+            <div class="space-y-4">
+              <div class={formField}>
+                <label class={labelClass('text-xs uppercase tracking-[0.08em]')}>
+                  Grouping window
+                </label>
+                <div class="flex items-center gap-3">
                   <input
-                    type="checkbox"
-                    checked={grouping().byNode}
+                    type="range"
+                    min="1"
+                    max="30"
+                    value={grouping().window}
                     onChange={(e) => {
-                      setGrouping({ ...grouping(), byNode: e.currentTarget.checked });
+                      setGrouping({ ...grouping(), window: parseInt(e.currentTarget.value) });
                       props.setHasUnsavedChanges(true);
                     }}
-                    class="sr-only"
+                    class="flex-1"
                   />
-                  <div class="flex items-center gap-2">
-                    <div class={`w-4 h-4 rounded border-2 flex items-center justify-center ${
+                  <div class="w-16 rounded-md bg-gray-100 px-2 py-1 text-center text-sm text-gray-700 dark:bg-gray-700 dark:text-gray-200">
+                    {grouping().window} min
+                  </div>
+                </div>
+                <p class={`${formHelpText} mt-1`}>Alerts within this window are grouped together.</p>
+              </div>
+
+              <div>
+                <span class={`${labelClass('text-xs uppercase tracking-[0.08em]')} mb-2 block`}>
+                  Grouping strategy
+                </span>
+                <div class="grid grid-cols-2 gap-2">
+                  <label class={`relative flex items-center gap-2 rounded-lg border-2 p-3 transition-all ${
+                    grouping().byNode
+                      ? 'border-blue-500 bg-blue-50 shadow-sm dark:bg-blue-900/20'
+                      : 'border-gray-200 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700'
+                  }`}>
+                    <input
+                      type="checkbox"
+                      checked={grouping().byNode}
+                      onChange={(e) => {
+                        setGrouping({ ...grouping(), byNode: e.currentTarget.checked });
+                        props.setHasUnsavedChanges(true);
+                      }}
+                      class="sr-only"
+                    />
+                    <div class={`flex h-4 w-4 items-center justify-center rounded border-2 ${
                       grouping().byNode
                         ? 'border-blue-500 bg-blue-500'
                         : 'border-gray-300 dark:border-gray-600'
                     }`}>
                       <Show when={grouping().byNode}>
-                        <svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                        <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                         </svg>
                       </Show>
                     </div>
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-300">By Node</span>
-                  </div>
-                </label>
-                <label class={`relative flex items-center p-3 rounded-lg cursor-pointer border-2 transition-all ${
-                  grouping().byGuest
-                    ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                    : 'border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700'
-                }`}>
-                  <input
-                    type="checkbox"
-                    checked={grouping().byGuest}
-                    onChange={(e) => {
-                      setGrouping({ ...grouping(), byGuest: e.currentTarget.checked });
-                      props.setHasUnsavedChanges(true);
-                    }}
-                    class="sr-only"
-                  />
-                  <div class="flex items-center gap-2">
-                    <div class={`w-4 h-4 rounded border-2 flex items-center justify-center ${
+                  </label>
+
+                  <label class={`relative flex items-center gap-2 rounded-lg border-2 p-3 transition-all ${
+                    grouping().byGuest
+                      ? 'border-blue-500 bg-blue-50 shadow-sm dark:bg-blue-900/20'
+                      : 'border-gray-200 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700'
+                  }`}>
+                    <input
+                      type="checkbox"
+                      checked={grouping().byGuest}
+                      onChange={(e) => {
+                        setGrouping({ ...grouping(), byGuest: e.currentTarget.checked });
+                        props.setHasUnsavedChanges(true);
+                      }}
+                      class="sr-only"
+                    />
+                    <div class={`flex h-4 w-4 items-center justify-center rounded border-2 ${
                       grouping().byGuest
                         ? 'border-blue-500 bg-blue-500'
                         : 'border-gray-300 dark:border-gray-600'
                     }`}>
                       <Show when={grouping().byGuest}>
-                        <svg class="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                        <svg class="h-3 w-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                         </svg>
                       </Show>
                     </div>
                     <span class="text-sm font-medium text-gray-700 dark:text-gray-300">By Guest</span>
-                  </div>
-                </label>
+                  </label>
+                </div>
               </div>
             </div>
-          </div>
-        </Show>
-      </div>
-      
-      {/* Escalation Rules */}
-      <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 sm:p-6">
-        <div class="flex items-start sm:items-center justify-between gap-4 flex-col sm:flex-row">
-          <div class="flex items-start gap-3">
-            <div class="w-10 h-10 bg-red-100 dark:bg-red-900/50 rounded-lg flex items-center justify-center flex-shrink-0">
-              <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-              </svg>
-            </div>
-            <div>
-              <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200">Alert Escalation</h3>
-              <p class="text-sm text-gray-600 dark:text-gray-400">Notify additional contacts for persistent issues</p>
-            </div>
-          </div>
-          <label class="relative inline-flex items-center cursor-pointer">
-            <input
-              type="checkbox"
+          </Show>
+        </SettingsPanel>
+
+        {/* Escalation Rules */}
+        <SettingsPanel
+          title="Alert escalation"
+          description="Notify additional contacts for persistent issues."
+          action={
+            <Toggle
               checked={escalation().enabled}
               onChange={(e) => {
                 setEscalation({ ...escalation(), enabled: e.currentTarget.checked });
                 props.setHasUnsavedChanges(true);
               }}
-              class="sr-only peer"
+              containerClass="sm:self-start"
+              label={<span class="text-xs font-medium text-gray-600 dark:text-gray-400">{escalation().enabled ? 'Enabled' : 'Disabled'}</span>}
             />
-            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-          </label>
-        </div>
-        
-        <Show when={escalation().enabled}>
-          <div class="space-y-3 mt-4 pt-4 border-t border-gray-200 dark:border-gray-600">
-            <p class="text-xs text-gray-600 dark:text-gray-400 mb-2">Define escalation levels for unresolved alerts:</p>
-            <For each={escalation().levels}>
-              {(level, index) => (
-                <div class="flex items-center gap-2 p-3 bg-white dark:bg-gray-600 rounded-lg border border-gray-200 dark:border-gray-500">
-                  <div class="flex-1 grid grid-cols-1 sm:grid-cols-2 gap-2 items-center">
-                    <div class="flex items-center gap-2">
-                      <span class="text-xs font-medium text-gray-600 dark:text-gray-400 whitespace-nowrap">After</span>
-                      <input
-                        type="number"
-                        min="5"
-                        max="180"
-                        value={level.after}
-                        onChange={(e) => {
-                          const newLevels = [...escalation().levels];
-                          newLevels[index()] = { ...level, after: parseInt(e.currentTarget.value) };
-                          setEscalation({ ...escalation(), levels: newLevels });
-                          props.setHasUnsavedChanges(true);
-                        }}
-                        class="w-16 px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                      />
-                      <span class="text-xs text-gray-600 dark:text-gray-400">min</span>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <span class="text-xs font-medium text-gray-600 dark:text-gray-400 whitespace-nowrap">notify</span>
-                      <select
-                        value={level.notify}
-                        onChange={(e) => {
-                          const newLevels = [...escalation().levels];
-                          newLevels[index()] = { ...level, notify: e.currentTarget.value };
-                          setEscalation({ ...escalation(), levels: newLevels });
-                          props.setHasUnsavedChanges(true);
-                        }}
-                        class="flex-1 px-2 py-1 text-sm border rounded dark:bg-gray-700 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                      >
-                        <option value="email">Email</option>
-                        <option value="webhook">Webhooks</option>
-                        <option value="all">All Channels</option>
-                      </select>
+          }
+          class="space-y-4"
+        >
+          <Show when={escalation().enabled}>
+            <div class="space-y-3">
+              <p class={formHelpText}>Define escalation levels for unresolved alerts:</p>
+              <For each={escalation().levels}>
+                {(level, index) => (
+                  <div class="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-gray-600 dark:bg-gray-700/40">
+                    <div class="flex flex-1 flex-col gap-3 sm:grid sm:grid-cols-2 sm:items-center sm:gap-2">
+                      <div class="flex items-center gap-2">
+                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400">After</span>
+                        <input
+                          type="number"
+                          min="5"
+                          max="180"
+                          value={level.after}
+                          onChange={(e) => {
+                            const newLevels = [...escalation().levels];
+                            newLevels[index()] = { ...level, after: parseInt(e.currentTarget.value) };
+                            setEscalation({ ...escalation(), levels: newLevels });
+                            props.setHasUnsavedChanges(true);
+                          }}
+                          class={`${controlClass('px-2 py-1 text-sm')} w-20`}
+                        />
+                        <span class="text-xs text-gray-600 dark:text-gray-400">min</span>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400">Notify</span>
+                        <select
+                          value={level.notify}
+                          onChange={(e) => {
+                            const newLevels = [...escalation().levels];
+                            newLevels[index()] = { ...level, notify: e.currentTarget.value };
+                            setEscalation({ ...escalation(), levels: newLevels });
+                            props.setHasUnsavedChanges(true);
+                          }}
+                          class={`${controlClass('px-2 py-1 text-sm')} flex-1`}
+                        >
+                          <option value="email">Email</option>
+                          <option value="webhook">Webhooks</option>
+                          <option value="all">All Channels</option>
+                        </select>
+                      </div>
                     </div>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const newLevels = escalation().levels.filter((_, i) => i !== index());
+                        setEscalation({ ...escalation(), levels: newLevels });
+                        props.setHasUnsavedChanges(true);
+                      }}
+                      class="rounded-md p-1.5 text-red-600 transition-colors hover:bg-red-100 dark:hover:bg-red-900/30"
+                      title="Remove escalation level"
+                    >
+                      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                      </svg>
+                    </button>
                   </div>
-                  <button type="button"
-                    onClick={() => {
-                      const newLevels = escalation().levels.filter((_, i) => i !== index());
-                      setEscalation({ ...escalation(), levels: newLevels });
-                      props.setHasUnsavedChanges(true);
-                    }}
-                    class="p-1.5 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
-                    title="Remove escalation level"
-                  >
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-                    </svg>
-                  </button>
-                </div>
-              )}
-            </For>
-            
-            <button type="button"
-              onClick={() => {
-                const lastLevel = escalation().levels[escalation().levels.length - 1];
-                const newAfter = lastLevel ? lastLevel.after + 30 : 15;
-                setEscalation({
-                  ...escalation(),
-                  levels: [...escalation().levels, { after: newAfter, notify: 'all' }]
-                });
-                props.setHasUnsavedChanges(true);
-              }}
-              class="w-full py-2 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-600 dark:text-gray-400 hover:border-gray-400 dark:hover:border-gray-500 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all duration-200 flex items-center justify-center gap-2"
-            >
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
-              </svg>
-              Add Escalation Level
-            </button>
-          </div>
-        </Show>
-      </div>
-      
-      {/* Configuration Summary */}
-      <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
-        <h3 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2 flex items-center gap-2">
-          <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-          </svg>
-          Current Configuration Summary
-        </h3>
-        <div class="space-y-1 text-xs text-blue-800 dark:text-blue-300">
+                )}
+              </For>
+
+              <button
+                type="button"
+                onClick={() => {
+                  const lastLevel = escalation().levels[escalation().levels.length - 1];
+                  const newAfter = lastLevel ? lastLevel.after + 30 : 15;
+                  setEscalation({
+                    ...escalation(),
+                    levels: [...escalation().levels, { after: newAfter, notify: 'all' }]
+                  });
+                  props.setHasUnsavedChanges(true);
+                }}
+                class="flex w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-300 py-2 text-sm text-gray-600 transition-all hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-400 dark:hover:border-gray-500 dark:hover:bg-gray-700"
+              >
+                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                </svg>
+                Add Escalation Level
+              </button>
+            </div>
+          </Show>
+        </SettingsPanel>
+
+        {/* Configuration Summary */}
+        <SettingsPanel
+          title="Configuration summary"
+          description="Preview of the active schedule settings."
+          tone="muted"
+          padding="lg"
+          bodyClass="space-y-1 text-sm text-blue-800 dark:text-blue-300"
+          class="lg:col-span-2"
+        >
           <Show when={quietHours().enabled}>
             <p>• Quiet hours active from {quietHours().start} to {quietHours().end} ({quietHours().timezone})</p>
           </Show>
@@ -1775,7 +1723,8 @@ function ScheduleTab(props: ScheduleTabProps) {
             <p>• {cooldown().minutes} minute cooldown between alerts, max {cooldown().maxAlerts} alerts per hour</p>
           </Show>
           <Show when={grouping().enabled}>
-            <p>• Grouping alerts within {grouping().window} minute windows
+            <p>
+              • Grouping alerts within {grouping().window} minute windows
               <Show when={grouping().byNode || grouping().byGuest}>
                 {' '}by {[grouping().byNode && 'node', grouping().byGuest && 'guest'].filter(Boolean).join(' and ')}
               </Show>
@@ -1787,12 +1736,11 @@ function ScheduleTab(props: ScheduleTabProps) {
           <Show when={!quietHours().enabled && !cooldown().enabled && !grouping().enabled && !escalation().enabled}>
             <p>• All notification controls are disabled - alerts will be sent immediately</p>
           </Show>
-        </div>
+        </SettingsPanel>
       </div>
     </div>
   );
 }
-
 // History Tab - Comprehensive alert table
 function HistoryTab() {
   const { state, activeAlerts } = useWebSocket();
@@ -2074,12 +2022,15 @@ function HistoryTab() {
   return (
     <div class="space-y-4">
       {/* Alert Trends Mini-Chart */}
-      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
-        <div class="flex items-center justify-between mb-3">
-          <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Alert Frequency 
-            <span class="text-xs text-gray-400 ml-2">({alertData().length} alerts)</span>
-          </h3>
+      <Card padding="md">
+        <div class="mb-3 flex items-start justify-between gap-3">
+          <SectionHeader
+            label="Trends"
+            title="Alert frequency"
+            description={<span class="text-xs text-gray-500 dark:text-gray-400">{alertData().length} alerts</span>}
+            size="sm"
+            class="flex-1"
+          />
           <div class="flex items-center gap-2">
             <Show when={selectedBarIndex() !== null}>
               <button type="button"
@@ -2162,7 +2113,7 @@ function HistoryTab() {
           <span>{timeFilter() === '24h' ? '24h ago' : timeFilter() === '7d' ? '7d ago' : timeFilter() === '30d' ? '30d ago' : '90d ago'}</span>
           <span>Now</span>
         </div>
-      </div>
+      </Card>
       
       {/* Filters */}
       <div class="flex flex-wrap gap-2 mb-4">
@@ -2366,4 +2317,4 @@ function HistoryTab() {
       </Show>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend-modern/src/stores/events.ts b/frontend-modern/src/stores/events.ts
index 2c7384b3a..8d7f1d991 100644
--- a/frontend-modern/src/stores/events.ts
+++ b/frontend-modern/src/stores/events.ts
@@ -1,7 +1,7 @@
 // Event bus for cross-component communication
 
 // Event types
-export type EventType = 'node_auto_registered' | 'refresh_nodes' | 'discovery_updated' | 'theme_changed';
+export type EventType = 'node_auto_registered' | 'refresh_nodes' | 'discovery_updated' | 'discovery_status' | 'theme_changed';
 
 // Event data types
 export interface NodeAutoRegisteredData {
@@ -17,6 +17,9 @@ export interface NodeAutoRegisteredData {
 }
 
 export interface DiscoveryUpdatedData {
+  scanning?: boolean;
+  cached?: boolean;
+  timestamp?: number;
   servers: Array<{
     ip: string;
     port: number;
@@ -26,16 +29,22 @@ export interface DiscoveryUpdatedData {
     release?: string;
   }>;
   errors?: string[];
-  timestamp?: number;
   immediate?: boolean;
   discoveredNodes?: number;
 }
 
+export interface DiscoveryStatusData {
+  scanning: boolean;
+  subnet?: string;
+  timestamp?: number;
+}
+
 // Map event types to their data types
 export type EventDataMap = {
   'node_auto_registered': NodeAutoRegisteredData;
   'refresh_nodes': void;
   'discovery_updated': DiscoveryUpdatedData;
+  'discovery_status': DiscoveryStatusData;
   'theme_changed': string;  // 'light' or 'dark'
 }
 
@@ -69,4 +78,4 @@ class EventBus {
   }
 }
 
-export const eventBus = new EventBus();
\ No newline at end of file
+export const eventBus = new EventBus();
diff --git a/frontend-modern/src/stores/websocket.ts b/frontend-modern/src/stores/websocket.ts
index a6cd2b14d..4bc157531 100644
--- a/frontend-modern/src/stores/websocket.ts
+++ b/frontend-modern/src/stores/websocket.ts
@@ -347,6 +347,17 @@ export function createWebSocketStore(url: string) {
           } else if (message.type === 'discovery_update') {
             // Discovery scan completed with new results
             eventBus.emit('discovery_updated', message.data);
+          } else if (message.type === 'discovery_started') {
+            eventBus.emit('discovery_status', {
+              scanning: true,
+              subnet: message.data?.subnet,
+              timestamp: message.data?.timestamp
+            });
+          } else if (message.type === 'discovery_complete') {
+            eventBus.emit('discovery_status', {
+              scanning: false,
+              timestamp: message.data?.timestamp
+            });
           } else if (message.type === 'settingsUpdate') {
             // Settings have been updated (e.g., theme change)
             if (message.data?.theme) {
diff --git a/internal/api/config_handlers.go b/internal/api/config_handlers.go
index 849a77031..e6e030f9f 100644
--- a/internal/api/config_handlers.go
+++ b/internal/api/config_handlers.go
@@ -45,6 +45,8 @@ type ConfigHandlers struct {
 	guestMetadataHandler *GuestMetadataHandler
 	setupCodes           map[string]*SetupCode // Map of code hash -> setup code details
 	codeMutex            sync.RWMutex          // Mutex for thread-safe code access
+	clusterDetectMutex   sync.Mutex
+	lastClusterDetection map[string]time.Time
 }
 
 // NewConfigHandlers creates a new ConfigHandlers instance
@@ -57,11 +59,12 @@ func NewConfigHandlers(cfg *config.Config, monitor *monitoring.Monitor, reloadFu
 		wsHub:                wsHub,
 		guestMetadataHandler: guestMetadataHandler,
 		setupCodes:           make(map[string]*SetupCode),
+		lastClusterDetection: make(map[string]time.Time),
 	}
-	
+
 	// Clean up expired codes periodically
 	go h.cleanupExpiredCodes()
-	
+
 	return h
 }
 
@@ -69,7 +72,7 @@ func NewConfigHandlers(cfg *config.Config, monitor *monitoring.Monitor, reloadFu
 func (h *ConfigHandlers) cleanupExpiredCodes() {
 	ticker := time.NewTicker(5 * time.Minute)
 	defer ticker.Stop()
-	
+
 	for range ticker.C {
 		h.codeMutex.Lock()
 		now := time.Now()
@@ -88,7 +91,7 @@ func (h *ConfigHandlers) cleanupExpiredCodes() {
 func sanitizeErrorMessage(err error, operation string) string {
 	// Log the detailed error internally
 	log.Error().Err(err).Str("operation", operation).Msg("Operation failed")
-	
+
 	// Return generic messages based on operation type
 	switch operation {
 	case "create_client":
@@ -102,52 +105,147 @@ func sanitizeErrorMessage(err error, operation string) string {
 	}
 }
 
+func normalizePVEUser(user string) string {
+	user = strings.TrimSpace(user)
+	if user == "" {
+		return user
+	}
+	if strings.Contains(user, "@") {
+		return user
+	}
+	return user + "@pam"
+}
+
+const clusterDetectionCooldown = 30 * time.Second
+
+func shouldSkipClusterAutoDetection(host, name string) bool {
+	if host == "" {
+		return false
+	}
+	lowerHost := strings.ToLower(host)
+	lowerName := strings.ToLower(name)
+	return strings.Contains(lowerHost, "192.168.77.") ||
+		strings.Contains(lowerHost, "192.168.88.") ||
+		strings.Contains(lowerHost, "test-") ||
+		strings.Contains(lowerName, "test-") ||
+		strings.Contains(lowerName, "persist-") ||
+		strings.Contains(lowerName, "concurrent-")
+}
+
+func (h *ConfigHandlers) maybeRefreshClusterInfo(instance *config.PVEInstance) {
+	if instance == nil {
+		return
+	}
+
+	if shouldSkipClusterAutoDetection(instance.Host, instance.Name) {
+		return
+	}
+
+	// Require credentials to attempt detection
+	if instance.TokenValue == "" && instance.Password == "" {
+		return
+	}
+
+	trimmedName := strings.TrimSpace(instance.ClusterName)
+	needsRefresh := !instance.IsCluster ||
+		len(instance.ClusterEndpoints) == 0 ||
+		trimmedName == "" ||
+		strings.EqualFold(trimmedName, "unknown cluster")
+
+	if !needsRefresh {
+		return
+	}
+
+	h.clusterDetectMutex.Lock()
+	last := h.lastClusterDetection[instance.Name]
+	if time.Since(last) < clusterDetectionCooldown {
+		h.clusterDetectMutex.Unlock()
+		return
+	}
+	h.lastClusterDetection[instance.Name] = time.Now()
+	h.clusterDetectMutex.Unlock()
+
+	clientConfig := config.CreateProxmoxConfig(instance)
+	isCluster, clusterName, clusterEndpoints := detectPVECluster(clientConfig, instance.Name)
+	if !isCluster || len(clusterEndpoints) == 0 {
+		log.Debug().
+			Str("instance", instance.Name).
+			Bool("previous_cluster", instance.IsCluster).
+			Msg("Cluster validation retry did not produce usable endpoints")
+		return
+	}
+
+	trimmedCluster := strings.TrimSpace(clusterName)
+	if trimmedCluster == "" || strings.EqualFold(trimmedCluster, "unknown cluster") {
+		clusterName = instance.Name
+	}
+
+	instance.IsCluster = true
+	instance.ClusterName = clusterName
+	instance.ClusterEndpoints = clusterEndpoints
+
+	log.Info().
+		Str("instance", instance.Name).
+		Str("cluster", clusterName).
+		Int("endpoints", len(clusterEndpoints)).
+		Msg("Updated cluster metadata after validation retry")
+
+	if h.persistence != nil {
+		if err := h.persistence.SaveNodesConfig(h.config.PVEInstances, h.config.PBSInstances); err != nil {
+			log.Warn().
+				Err(err).
+				Str("instance", instance.Name).
+				Msg("Failed to persist cluster detection update")
+		}
+	}
+}
+
 // NodeConfigRequest represents a request to add/update a node
 type NodeConfigRequest struct {
-	Type              string `json:"type"` // "pve" or "pbs"
-	Name              string `json:"name"`
-	Host              string `json:"host"`
-	User              string `json:"user,omitempty"`
-	Password          string `json:"password,omitempty"`
-	TokenName         string `json:"tokenName,omitempty"`
-	TokenValue        string `json:"tokenValue,omitempty"`
-	Fingerprint       string `json:"fingerprint,omitempty"`
-	VerifySSL         bool   `json:"verifySSL"`
-	MonitorVMs        bool   `json:"monitorVMs,omitempty"`        // PVE only
-	MonitorContainers bool   `json:"monitorContainers,omitempty"` // PVE only
-	MonitorStorage    bool   `json:"monitorStorage,omitempty"`    // PVE only
-	MonitorBackups     bool `json:"monitorBackups,omitempty"`     // PVE only
-	MonitorDatastores  bool `json:"monitorDatastores,omitempty"`  // PBS only
-	MonitorSyncJobs    bool `json:"monitorSyncJobs,omitempty"`    // PBS only
-	MonitorVerifyJobs  bool `json:"monitorVerifyJobs,omitempty"`  // PBS only
-	MonitorPruneJobs   bool `json:"monitorPruneJobs,omitempty"`   // PBS only
-	MonitorGarbageJobs bool `json:"monitorGarbageJobs,omitempty"` // PBS only
+	Type               string `json:"type"` // "pve" or "pbs"
+	Name               string `json:"name"`
+	Host               string `json:"host"`
+	User               string `json:"user,omitempty"`
+	Password           string `json:"password,omitempty"`
+	TokenName          string `json:"tokenName,omitempty"`
+	TokenValue         string `json:"tokenValue,omitempty"`
+	Fingerprint        string `json:"fingerprint,omitempty"`
+	VerifySSL          bool   `json:"verifySSL"`
+	MonitorVMs         bool   `json:"monitorVMs,omitempty"`         // PVE only
+	MonitorContainers  bool   `json:"monitorContainers,omitempty"`  // PVE only
+	MonitorStorage     bool   `json:"monitorStorage,omitempty"`     // PVE only
+	MonitorBackups     bool   `json:"monitorBackups,omitempty"`     // PVE only
+	MonitorDatastores  bool   `json:"monitorDatastores,omitempty"`  // PBS only
+	MonitorSyncJobs    bool   `json:"monitorSyncJobs,omitempty"`    // PBS only
+	MonitorVerifyJobs  bool   `json:"monitorVerifyJobs,omitempty"`  // PBS only
+	MonitorPruneJobs   bool   `json:"monitorPruneJobs,omitempty"`   // PBS only
+	MonitorGarbageJobs bool   `json:"monitorGarbageJobs,omitempty"` // PBS only
 }
 
 // NodeResponse represents a node in API responses
 type NodeResponse struct {
-	ID                string `json:"id"`
-	Type              string `json:"type"`
-	Name              string `json:"name"`
-	Host              string `json:"host"`
-	User              string `json:"user,omitempty"`
-	HasPassword       bool   `json:"hasPassword"`
-	TokenName         string `json:"tokenName,omitempty"`
-	HasToken          bool   `json:"hasToken"`
-	Fingerprint       string `json:"fingerprint,omitempty"`
-	VerifySSL         bool   `json:"verifySSL"`
-	MonitorVMs        bool   `json:"monitorVMs,omitempty"`
-	MonitorContainers bool   `json:"monitorContainers,omitempty"`
-	MonitorStorage    bool   `json:"monitorStorage,omitempty"`
-	MonitorBackups     bool `json:"monitorBackups,omitempty"`
-	MonitorDatastores  bool `json:"monitorDatastores,omitempty"`
-	MonitorSyncJobs    bool `json:"monitorSyncJobs,omitempty"`
-	MonitorVerifyJobs  bool `json:"monitorVerifyJobs,omitempty"`
-	MonitorPruneJobs   bool `json:"monitorPruneJobs,omitempty"`
-	MonitorGarbageJobs bool                  `json:"monitorGarbageJobs,omitempty"`
-	Status             string                `json:"status"` // "connected", "disconnected", "error"
-	IsCluster          bool                  `json:"isCluster,omitempty"`
-	ClusterName        string                `json:"clusterName,omitempty"`
+	ID                 string                   `json:"id"`
+	Type               string                   `json:"type"`
+	Name               string                   `json:"name"`
+	Host               string                   `json:"host"`
+	User               string                   `json:"user,omitempty"`
+	HasPassword        bool                     `json:"hasPassword"`
+	TokenName          string                   `json:"tokenName,omitempty"`
+	HasToken           bool                     `json:"hasToken"`
+	Fingerprint        string                   `json:"fingerprint,omitempty"`
+	VerifySSL          bool                     `json:"verifySSL"`
+	MonitorVMs         bool                     `json:"monitorVMs,omitempty"`
+	MonitorContainers  bool                     `json:"monitorContainers,omitempty"`
+	MonitorStorage     bool                     `json:"monitorStorage,omitempty"`
+	MonitorBackups     bool                     `json:"monitorBackups,omitempty"`
+	MonitorDatastores  bool                     `json:"monitorDatastores,omitempty"`
+	MonitorSyncJobs    bool                     `json:"monitorSyncJobs,omitempty"`
+	MonitorVerifyJobs  bool                     `json:"monitorVerifyJobs,omitempty"`
+	MonitorPruneJobs   bool                     `json:"monitorPruneJobs,omitempty"`
+	MonitorGarbageJobs bool                     `json:"monitorGarbageJobs,omitempty"`
+	Status             string                   `json:"status"` // "connected", "disconnected", "error"
+	IsCluster          bool                     `json:"isCluster,omitempty"`
+	ClusterName        string                   `json:"clusterName,omitempty"`
 	ClusterEndpoints   []config.ClusterEndpoint `json:"clusterEndpoints,omitempty"`
 }
 
@@ -159,55 +257,83 @@ func validateNodeAPI(clusterNode proxmox.ClusterStatus, baseConfig proxmox.Clien
 	if testHost == "" {
 		testHost = clusterNode.Name
 	}
-	
+
 	// Skip empty hostnames (shouldn't happen but be safe)
 	if testHost == "" {
 		return false
 	}
-	
+
 	// Create a test configuration for this specific node
 	testConfig := baseConfig
 	testConfig.Host = testHost
 	if !strings.HasPrefix(testConfig.Host, "http") {
 		testConfig.Host = fmt.Sprintf("https://%s:8006", testConfig.Host)
 	}
-	
+
 	// Use a very short timeout for validation - we just need to know if the API exists
 	testConfig.Timeout = 2 * time.Second
-	
+
 	log.Debug().
 		Str("node", clusterNode.Name).
 		Str("test_host", testConfig.Host).
 		Msg("Validating Proxmox API for cluster node")
-	
+
 	// Try to create a client and make a simple API call
 	testClient, err := proxmox.NewClient(testConfig)
 	if err != nil {
-		log.Debug().
-			Str("node", clusterNode.Name).
-			Err(err).
-			Msg("Failed to create test client for cluster node")
-		return false
+		// Many clusters use unique certificates per node. If the primary node
+		// was configured with fingerprint pinning, connecting to peers with the
+		// same fingerprint will fail. Fall back to a relaxed TLS check so we can
+		// still detect valid cluster members while keeping other errors (like
+		// auth) as hard failures.
+		isTLSMismatch := strings.Contains(err.Error(), "fingerprint") || strings.Contains(err.Error(), "x509") || strings.Contains(err.Error(), "certificate")
+		if isTLSMismatch {
+			log.Debug().
+				Str("node", clusterNode.Name).
+				Msg("Retrying cluster node validation without fingerprint pinning")
+			testConfig.Fingerprint = ""
+			testConfig.VerifySSL = false
+			testClient, err = proxmox.NewClient(testConfig)
+		}
+		if err != nil {
+			log.Debug().
+				Str("node", clusterNode.Name).
+				Err(err).
+				Msg("Failed to create test client for cluster node")
+			return false
+		}
 	}
-	
+
 	// Test with a simple API call that all Proxmox nodes should support
 	ctx, cancel := context.WithTimeout(context.Background(), 2*time.Second)
 	defer cancel()
-	
+
 	// Try to get the node version - this is a very lightweight API call
 	_, err = testClient.GetNodes(ctx)
 	if err != nil {
+		errMsg := err.Error()
+		// If we reached the API but were denied (common when per-node permissions
+		// differ), treat it as valid. We only want to filter out hosts that aren't
+		// actually Proxmox endpoints.
+		if strings.Contains(errMsg, "401") || strings.Contains(errMsg, "403") || strings.Contains(errMsg, "permission") {
+			log.Debug().
+				Str("node", clusterNode.Name).
+				Err(err).
+				Msg("Cluster node API responded but denied access; accepting for discovery")
+			return true
+		}
+
 		log.Debug().
 			Str("node", clusterNode.Name).
 			Err(err).
 			Msg("Node failed Proxmox API validation - likely not a Proxmox node")
 		return false
 	}
-	
+
 	log.Debug().
 		Str("node", clusterNode.Name).
 		Msg("Node passed Proxmox API validation")
-	
+
 	return true
 }
 
@@ -218,22 +344,22 @@ func detectPVECluster(clientConfig proxmox.ClientConfig, nodeName string) (isClu
 		log.Warn().Err(err).Msg("Failed to create client for cluster detection")
 		return false, "", nil
 	}
-	
+
 	// Try to get cluster status with retries to handle API permission propagation delays
 	// This addresses issue #437 where cluster detection fails on first attempt
 	var clusterStatus []proxmox.ClusterStatus
 	var lastErr error
-	
+
 	for attempt := 0; attempt < 3; attempt++ {
 		if attempt > 0 {
 			// Wait a bit for permissions to propagate
 			time.Sleep(time.Duration(attempt) * time.Second)
 			log.Debug().Int("attempt", attempt+1).Msg("Retrying cluster detection")
 		}
-		
+
 		ctx, cancel := context.WithTimeout(context.Background(), 5*time.Second)
 		defer cancel()
-		
+
 		// Get full cluster status to find the actual cluster name
 		// Note: This can cause certificate lookup errors on standalone nodes, but it's only done once during configuration
 		clusterStatus, lastErr = tempClient.GetClusterStatus(ctx)
@@ -241,7 +367,7 @@ func detectPVECluster(clientConfig proxmox.ClientConfig, nodeName string) (isClu
 			// Success!
 			break
 		}
-		
+
 		// Check if this is definitely not a cluster (e.g., 501 not implemented)
 		if strings.Contains(lastErr.Error(), "501") || strings.Contains(lastErr.Error(), "not implemented") {
 			// This is a standalone node, no need to retry
@@ -249,13 +375,13 @@ func detectPVECluster(clientConfig proxmox.ClientConfig, nodeName string) (isClu
 			return false, "", nil
 		}
 	}
-	
+
 	if lastErr != nil {
 		// This is expected for standalone nodes - they will return an error when accessing cluster endpoints
 		log.Debug().Err(lastErr).Msg("Could not get cluster status after retries - likely a standalone node")
 		return false, "", nil
 	}
-	
+
 	// Find the cluster name and collect nodes
 	var clusterNodes []proxmox.ClusterStatus
 	for _, status := range clusterStatus {
@@ -267,9 +393,9 @@ func detectPVECluster(clientConfig proxmox.ClientConfig, nodeName string) (isClu
 			clusterNodes = append(clusterNodes, status)
 		}
 	}
-	
+
 	log.Info().Int("cluster_nodes", len(clusterNodes)).Msg("Got cluster nodes")
-	
+
 	if len(clusterNodes) > 1 {
 		isCluster = true
 		log.Info().
@@ -277,7 +403,14 @@ func detectPVECluster(clientConfig proxmox.ClientConfig, nodeName string) (isClu
 			Str("node", nodeName).
 			Int("nodes", len(clusterNodes)).
 			Msg("Detected Proxmox cluster")
-		
+
+		scheme := "https://"
+		if strings.HasPrefix(strings.ToLower(clientConfig.Host), "http://") {
+			scheme = "http://"
+		}
+
+		var unvalidatedNodes []proxmox.ClusterStatus
+
 		for _, clusterNode := range clusterNodes {
 			// Validate that this node actually has a working Proxmox API
 			// This filters out qdevice VMs and other non-Proxmox participants
@@ -286,9 +419,10 @@ func detectPVECluster(clientConfig proxmox.ClientConfig, nodeName string) (isClu
 					Str("node", clusterNode.Name).
 					Str("ip", clusterNode.IP).
 					Msg("Skipping cluster node - no valid Proxmox API detected (likely qdevice or external node)")
+				unvalidatedNodes = append(unvalidatedNodes, clusterNode)
 				continue
 			}
-			
+
 			// Build the host URL with proper port
 			// Prefer IP if available, otherwise use node name
 			nodeHost := clusterNode.IP
@@ -299,35 +433,69 @@ func detectPVECluster(clientConfig proxmox.ClientConfig, nodeName string) (isClu
 			if !strings.Contains(nodeHost, ":") {
 				nodeHost = nodeHost + ":8006"
 			}
-			
+
 			endpoint := config.ClusterEndpoint{
 				NodeID:   clusterNode.ID,
 				NodeName: clusterNode.Name,
-				Host:     nodeHost,
+				Host:     scheme + nodeHost,
 				Online:   clusterNode.Online == 1,
 				LastSeen: time.Now(),
 			}
-			
+
 			if clusterNode.IP != "" {
 				endpoint.IP = clusterNode.IP
 			}
-			
+
 			clusterEndpoints = append(clusterEndpoints, endpoint)
 		}
-		
+
+		if len(clusterEndpoints) == 0 && len(unvalidatedNodes) > 0 {
+			log.Warn().
+				Str("cluster", clusterName).
+				Int("total_discovered", len(unvalidatedNodes)).
+				Msg("All detected cluster nodes failed validation; falling back to cluster metadata")
+
+			for _, clusterNode := range unvalidatedNodes {
+				nodeHost := clusterNode.IP
+				if nodeHost == "" {
+					nodeHost = clusterNode.Name
+				}
+				if nodeHost == "" {
+					continue
+				}
+				if !strings.Contains(nodeHost, ":") {
+					nodeHost = nodeHost + ":8006"
+				}
+
+				endpoint := config.ClusterEndpoint{
+					NodeID:   clusterNode.ID,
+					NodeName: clusterNode.Name,
+					Host:     scheme + nodeHost,
+					Online:   clusterNode.Online == 1,
+					LastSeen: time.Now(),
+				}
+
+				if clusterNode.IP != "" {
+					endpoint.IP = clusterNode.IP
+				}
+
+				clusterEndpoints = append(clusterEndpoints, endpoint)
+			}
+		}
+
 		// Log the final count of valid Proxmox nodes found
 		log.Info().
 			Str("cluster", clusterName).
 			Int("total_discovered", len(clusterNodes)).
 			Int("valid_proxmox_nodes", len(clusterEndpoints)).
 			Msg("Cluster node validation complete")
-		
+
 		// Fallback if we couldn't get the cluster name
 		if clusterName == "" {
 			clusterName = "Unknown Cluster"
 		}
 	}
-	
+
 	return isCluster, clusterName, clusterEndpoints
 }
 
@@ -337,6 +505,9 @@ func (h *ConfigHandlers) GetAllNodesForAPI() []NodeResponse {
 
 	// Add PVE nodes
 	for i, pve := range h.config.PVEInstances {
+		// Refresh cluster metadata if we previously failed to detect endpoints
+		h.maybeRefreshClusterInfo(&h.config.PVEInstances[i])
+		pve = h.config.PVEInstances[i]
 		node := NodeResponse{
 			ID:                generateNodeID("pve", i),
 			Type:              "pve",
@@ -392,14 +563,14 @@ func (h *ConfigHandlers) HandleGetNodes(w http.ResponseWriter, r *http.Request)
 	if os.Getenv("PULSE_MOCK_MODE") == "true" {
 		// Return mock nodes for settings page
 		mockNodes := []NodeResponse{}
-		
+
 		// Get mock state to extract node information
 		state := h.monitor.GetState()
-		
+
 		// Get all cluster nodes and standalone nodes
 		var clusterNodes []models.Node
 		var standaloneNodes []models.Node
-		
+
 		for _, node := range state.Nodes {
 			if node.Instance == "mock-cluster" {
 				clusterNodes = append(clusterNodes, node)
@@ -407,7 +578,7 @@ func (h *ConfigHandlers) HandleGetNodes(w http.ResponseWriter, r *http.Request)
 				standaloneNodes = append(standaloneNodes, node)
 			}
 		}
-		
+
 		// If we have cluster nodes, create ONE config entry for the cluster
 		if len(clusterNodes) > 0 {
 			// Build cluster endpoints for cluster nodes only
@@ -419,12 +590,12 @@ func (h *ConfigHandlers) HandleGetNodes(w http.ResponseWriter, r *http.Request)
 					Online:   n.Status == "online", // Set Online based on node status
 				})
 			}
-			
+
 			// Create a single cluster entry (representing the cluster config)
 			clusterNode := NodeResponse{
 				ID:                generateNodeID("pve", 0),
 				Type:              "pve",
-				Name:              "mock-cluster", // The cluster name
+				Name:              "mock-cluster",       // The cluster name
 				Host:              "192.168.0.100:8006", // Primary entry point
 				User:              "root@pam",
 				HasPassword:       true,
@@ -443,13 +614,13 @@ func (h *ConfigHandlers) HandleGetNodes(w http.ResponseWriter, r *http.Request)
 			}
 			mockNodes = append(mockNodes, clusterNode)
 		}
-		
+
 		// Add standalone nodes as individual entries
 		for i, node := range standaloneNodes {
 			standaloneNode := NodeResponse{
 				ID:                generateNodeID("pve", len(mockNodes)+i),
 				Type:              "pve",
-				Name:              node.Name, // Use the actual node name
+				Name:              node.Name,                               // Use the actual node name
 				Host:              fmt.Sprintf("192.168.0.%d:8006", 150+i), // Different IP range for standalone
 				User:              "root@pam",
 				HasPassword:       true,
@@ -468,35 +639,35 @@ func (h *ConfigHandlers) HandleGetNodes(w http.ResponseWriter, r *http.Request)
 			}
 			mockNodes = append(mockNodes, standaloneNode)
 		}
-		
+
 		// Add mock PBS instances
 		for i, pbs := range state.PBSInstances {
 			pbsNode := NodeResponse{
-				ID:                generateNodeID("pbs", i),
-				Type:              "pbs",
-				Name:              pbs.Name,
-				Host:              pbs.Host,
-				User:              "pulse@pbs",
-				HasPassword:       false,
-				TokenName:         "pulse",
-				HasToken:          true,
-				Fingerprint:       "",
-				VerifySSL:         false,
-				MonitorDatastores: true,
-				MonitorSyncJobs:   true,
-				MonitorVerifyJobs: true,
-				MonitorPruneJobs:  true,
+				ID:                 generateNodeID("pbs", i),
+				Type:               "pbs",
+				Name:               pbs.Name,
+				Host:               pbs.Host,
+				User:               "pulse@pbs",
+				HasPassword:        false,
+				TokenName:          "pulse",
+				HasToken:           true,
+				Fingerprint:        "",
+				VerifySSL:          false,
+				MonitorDatastores:  true,
+				MonitorSyncJobs:    true,
+				MonitorVerifyJobs:  true,
+				MonitorPruneJobs:   true,
 				MonitorGarbageJobs: true,
-				Status:            "connected", // Always connected in mock mode
+				Status:             "connected", // Always connected in mock mode
 			}
 			mockNodes = append(mockNodes, pbsNode)
 		}
-		
+
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(mockNodes)
 		return
 	}
-	
+
 	nodes := h.GetAllNodesForAPI()
 
 	w.Header().Set("Content-Type", "application/json")
@@ -510,7 +681,7 @@ func validateIPAddress(ip string) bool {
 	if parsedIP == nil {
 		return false
 	}
-	
+
 	// Ensure it's IPv4 or IPv6
 	return parsedIP.To4() != nil || parsedIP.To16() != nil
 }
@@ -532,12 +703,12 @@ func extractHostAndPort(hostStr string) (string, string, error) {
 	} else if strings.HasPrefix(hostStr, "https://") {
 		hostStr = strings.TrimPrefix(hostStr, "https://")
 	}
-	
+
 	// Remove trailing slash and path if present
 	if idx := strings.Index(hostStr, "/"); idx != -1 {
 		hostStr = hostStr[:idx]
 	}
-	
+
 	// Check if it contains a port
 	if strings.Contains(hostStr, ":") {
 		host, port, err := net.SplitHostPort(hostStr)
@@ -550,7 +721,7 @@ func extractHostAndPort(hostStr string) (string, string, error) {
 		}
 		return host, port, nil
 	}
-	
+
 	return hostStr, "", nil
 }
 
@@ -561,14 +732,14 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "Cannot modify nodes in mock mode. Please disable mock mode first: /opt/pulse/scripts/toggle-mock.sh off", http.StatusForbidden)
 		return
 	}
-	
+
 	var req NodeConfigRequest
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		log.Error().Err(err).Msg("Failed to decode add node request")
 		http.Error(w, "Invalid request body", http.StatusBadRequest)
 		return
 	}
-	
+
 	log.Info().
 		Str("type", req.Type).
 		Str("name", req.Name).
@@ -583,24 +754,24 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 		http.Error(w, "Name is required", http.StatusBadRequest)
 		return
 	}
-	
+
 	if req.Type == "" {
 		http.Error(w, "Type is required", http.StatusBadRequest)
 		return
 	}
-	
+
 	if req.Host == "" {
 		http.Error(w, "Host is required", http.StatusBadRequest)
 		return
 	}
-	
+
 	// Validate host format (IP address or hostname with optional port)
 	host, port, err := extractHostAndPort(req.Host)
 	if err != nil {
 		http.Error(w, "Invalid host format", http.StatusBadRequest)
 		return
 	}
-	
+
 	// If it looks like an IP address, validate it strictly
 	// Check if it starts with a digit (likely an IP)
 	if len(host) > 0 && (host[0] >= '0' && host[0] <= '9') {
@@ -623,13 +794,13 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 			return
 		}
 	}
-	
+
 	// Validate port if provided
 	if port != "" && !validatePort(port) {
 		http.Error(w, "Invalid port number", http.StatusBadRequest)
 		return
 	}
-	
+
 	if req.Type != "pve" && req.Type != "pbs" {
 		http.Error(w, "Invalid node type", http.StatusBadRequest)
 		return
@@ -661,6 +832,9 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 
 	// Add to appropriate list
 	if req.Type == "pve" {
+		if req.Password != "" && req.TokenName == "" && req.TokenValue == "" {
+			req.User = normalizePVEUser(req.User)
+		}
 		// Ensure host has protocol
 		host := req.Host
 		if !strings.HasPrefix(host, "http://") && !strings.HasPrefix(host, "https://") {
@@ -675,32 +849,32 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 				}
 			}
 		}
-		
+
 		// Check if node is part of a cluster (skip for test/invalid IPs)
 		var isCluster bool
 		var clusterName string
 		var clusterEndpoints []config.ClusterEndpoint
-		
+
 		// Skip cluster detection for obviously test/invalid IPs
-		skipClusterDetection := strings.Contains(req.Host, "192.168.77.") || 
+		skipClusterDetection := strings.Contains(req.Host, "192.168.77.") ||
 			strings.Contains(req.Host, "192.168.88.") ||
 			strings.Contains(req.Host, "test-") ||
 			strings.Contains(req.Name, "test-") ||
 			strings.Contains(req.Name, "persist-") ||
 			strings.Contains(req.Name, "concurrent-")
-			
+
 		if !skipClusterDetection {
 			clientConfig := config.CreateProxmoxConfigFromFields(host, req.User, req.Password, req.TokenName, req.TokenValue, req.Fingerprint, req.VerifySSL)
 			isCluster, clusterName, clusterEndpoints = detectPVECluster(clientConfig, req.Name)
 		}
-		
+
 		if isCluster {
 			log.Info().
 				Str("cluster", clusterName).
 				Int("endpoints", len(clusterEndpoints)).
 				Msg("Detected Proxmox cluster, auto-discovering all nodes")
 		}
-		
+
 		pve := config.PVEInstance{
 			Name:              req.Name,
 			Host:              host, // Use normalized host
@@ -719,7 +893,7 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 			ClusterEndpoints:  clusterEndpoints,
 		}
 		h.config.PVEInstances = append(h.config.PVEInstances, pve)
-		
+
 		if isCluster {
 			log.Info().
 				Str("cluster", clusterName).
@@ -744,13 +918,13 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 		if protocolEnd > 0 && !strings.Contains(host[protocolEnd:], ":") {
 			host = host + ":8007"
 		}
-		
+
 		// Parse PBS authentication details
 		var pbsUser string
 		var pbsPassword string
 		var pbsTokenName string
 		var pbsTokenValue string
-		
+
 		// Determine authentication method
 		if req.TokenName != "" && req.TokenValue != "" {
 			// Using token authentication - don't store user/password
@@ -767,16 +941,16 @@ func (h *ConfigHandlers) HandleAddNode(w http.ResponseWriter, r *http.Request) {
 				pbsUser = pbsUser + "@pbs" // Default to @pbs realm if not specified
 			}
 		}
-		
+
 		pbs := config.PBSInstance{
-			Name:              req.Name,
-			Host:              host,
-			User:              pbsUser,
-			Password:          pbsPassword,
-			TokenName:         pbsTokenName,
-			TokenValue:        pbsTokenValue,
-			Fingerprint:       req.Fingerprint,
-			VerifySSL:         req.VerifySSL,
+			Name:               req.Name,
+			Host:               host,
+			User:               pbsUser,
+			Password:           pbsPassword,
+			TokenName:          pbsTokenName,
+			TokenValue:         pbsTokenValue,
+			Fingerprint:        req.Fingerprint,
+			VerifySSL:          req.VerifySSL,
 			MonitorBackups:     true, // Enable by default for PBS
 			MonitorDatastores:  req.MonitorDatastores,
 			MonitorSyncJobs:    req.MonitorSyncJobs,
@@ -815,7 +989,7 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 		http.Error(w, "Invalid request body", http.StatusBadRequest)
 		return
 	}
-	
+
 	log.Info().
 		Str("type", req.Type).
 		Str("name", req.Name).
@@ -828,7 +1002,7 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 	// Parse token format if needed
 	user := req.User
 	tokenName := req.TokenName
-	
+
 	// If tokenName contains the full format (user@realm!tokenname), parse it
 	if strings.Contains(req.TokenName, "!") {
 		parts := strings.Split(req.TokenName, "!")
@@ -844,7 +1018,7 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 			user = parts[0]
 		}
 	}
-	
+
 	log.Info().
 		Str("parsedUser", user).
 		Str("parsedTokenName", tokenName).
@@ -855,7 +1029,7 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 		http.Error(w, "Host is required", http.StatusBadRequest)
 		return
 	}
-	
+
 	// Auto-generate name if not provided for test
 	if req.Name == "" {
 		// Extract hostname from URL
@@ -901,47 +1075,52 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 				}
 			}
 		}
-		
+
 		// Create a temporary client
+		authUser := req.User
+		if req.Password != "" && req.TokenName == "" && req.TokenValue == "" {
+			authUser = normalizePVEUser(authUser)
+			req.User = authUser
+		}
 		clientConfig := proxmox.ClientConfig{
 			Host:        host,
-			User:        req.User,
+			User:        authUser,
 			Password:    req.Password,
-			TokenName:   req.TokenName,  // Pass the full token ID
+			TokenName:   req.TokenName, // Pass the full token ID
 			TokenValue:  req.TokenValue,
 			VerifySSL:   req.VerifySSL,
 			Fingerprint: req.Fingerprint,
 		}
-		
+
 		tempClient, err := proxmox.NewClient(clientConfig)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "create_client"), http.StatusBadRequest)
 			return
 		}
-		
+
 		// Try to get nodes to test connection
 		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 		defer cancel()
-		
+
 		nodes, err := tempClient.GetNodes(ctx)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "connection"), http.StatusBadRequest)
 			return
 		}
-		
+
 		isCluster, _, clusterEndpoints := detectPVECluster(clientConfig, req.Name)
-		
+
 		response := map[string]interface{}{
-			"status": "success",
-			"message": fmt.Sprintf("Successfully connected to %d node(s)", len(nodes)),
+			"status":    "success",
+			"message":   fmt.Sprintf("Successfully connected to %d node(s)", len(nodes)),
 			"isCluster": isCluster,
 			"nodeCount": len(nodes),
 		}
-		
+
 		if isCluster {
 			response["clusterNodeCount"] = len(clusterEndpoints)
 		}
-		
+
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(response)
 	} else {
@@ -966,16 +1145,16 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 				host += ":8007"
 			}
 		}
-		
+
 		log.Info().
 			Str("processedHost", host).
 			Msg("PBS host after port processing")
-		
+
 		// PBS test connection
 		// Parse PBS authentication details
 		pbsUser := user
 		pbsTokenName := tokenName
-		
+
 		// Handle different token input formats
 		if req.TokenName != "" && req.TokenValue != "" {
 			// Check if token name contains the full format (user@realm!tokenname)
@@ -990,7 +1169,7 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 			// Password auth: ensure user has realm
 			pbsUser = pbsUser + "@pbs" // Default to @pbs realm if not specified
 		}
-		
+
 		clientConfig := pbs.ClientConfig{
 			Host:        host,
 			User:        pbsUser,
@@ -1000,29 +1179,29 @@ func (h *ConfigHandlers) HandleTestConnection(w http.ResponseWriter, r *http.Req
 			VerifySSL:   req.VerifySSL,
 			Fingerprint: req.Fingerprint,
 		}
-		
+
 		tempClient, err := pbs.NewClient(clientConfig)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "create_client"), http.StatusBadRequest)
 			return
 		}
-		
+
 		// Try to get datastores to test connection
 		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 		defer cancel()
-		
+
 		datastores, err := tempClient.GetDatastores(ctx)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "connection"), http.StatusBadRequest)
 			return
 		}
-		
+
 		response := map[string]interface{}{
-			"status": "success",
-			"message": fmt.Sprintf("Successfully connected. Found %d datastore(s)", len(datastores)),
+			"status":         "success",
+			"message":        fmt.Sprintf("Successfully connected. Found %d datastore(s)", len(datastores)),
 			"datastoreCount": len(datastores),
 		}
-		
+
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(response)
 	}
@@ -1035,7 +1214,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 		http.Error(w, "Cannot modify nodes in mock mode", http.StatusForbidden)
 		return
 	}
-	
+
 	nodeID := strings.TrimPrefix(r.URL.Path, "/api/config/nodes/")
 	if nodeID == "" {
 		http.Error(w, "Node ID required", http.StatusBadRequest)
@@ -1061,25 +1240,55 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 		http.Error(w, "Invalid node ID", http.StatusBadRequest)
 		return
 	}
-	
 
 	// Update the node
 	if nodeType == "pve" && index < len(h.config.PVEInstances) {
 		pve := &h.config.PVEInstances[index]
 		pve.Name = req.Name
-		pve.Host = req.Host
-		if req.User != "" {
-			pve.User = req.User
+
+		if req.Host != "" {
+			host := req.Host
+			if !strings.HasPrefix(host, "http://") && !strings.HasPrefix(host, "https://") {
+				host = "https://" + host
+			}
+			protocolEnd := 0
+			if strings.HasPrefix(host, "https://") {
+				protocolEnd = 8
+			} else if strings.HasPrefix(host, "http://") {
+				protocolEnd = 7
+			}
+			if protocolEnd > 0 && !strings.Contains(host[protocolEnd:], ":") {
+				host = host + ":8006"
+			}
+			pve.Host = host
 		}
-		if req.Password != "" {
-			pve.Password = req.Password
-		}
-		if req.TokenName != "" {
-			pve.TokenName = req.TokenName
-		}
-		if req.TokenValue != "" {
-			pve.TokenValue = req.TokenValue
+
+		if req.TokenName != "" || req.TokenValue != "" {
+			if req.TokenName != "" {
+				pve.TokenName = req.TokenName
+			}
+			if req.TokenValue != "" {
+				pve.TokenValue = req.TokenValue
+			}
+			// When using token authentication, clear password to avoid conflicts
+			pve.Password = ""
+			if req.User != "" {
+				pve.User = req.User
+			}
+		} else {
+			if req.User != "" {
+				pve.User = normalizePVEUser(req.User)
+			} else if pve.User != "" {
+				pve.User = normalizePVEUser(pve.User)
+			}
+			if req.Password != "" {
+				pve.Password = req.Password
+			}
+			// Clear token fields when using password authentication
+			pve.TokenName = ""
+			pve.TokenValue = ""
 		}
+
 		pve.Fingerprint = req.Fingerprint
 		pve.VerifySSL = req.VerifySSL
 		pve.MonitorVMs = req.MonitorVMs
@@ -1089,7 +1298,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 	} else if nodeType == "pbs" && index < len(h.config.PBSInstances) {
 		pbs := &h.config.PBSInstances[index]
 		pbs.Name = req.Name
-		
+
 		// Ensure PBS host has protocol and port
 		host := req.Host
 		if !strings.HasPrefix(host, "http://") && !strings.HasPrefix(host, "https://") {
@@ -1107,7 +1316,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 			host = host + ":8007"
 		}
 		pbs.Host = host
-		
+
 		// Determine authentication method and clear the unused fields
 		if req.TokenName != "" && req.TokenValue != "" {
 			// Using token authentication - clear user/password
@@ -1142,7 +1351,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 			}
 			pbs.User = pbsUser
 		}
-		
+
 		pbs.Fingerprint = req.Fingerprint
 		pbs.VerifySSL = req.VerifySSL
 		pbs.MonitorBackups = true // Enable by default for PBS
@@ -1162,7 +1371,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 		http.Error(w, "Failed to save configuration", http.StatusInternalServerError)
 		return
 	}
-	
+
 	// IMPORTANT: Preserve alert overrides when updating nodes
 	// This fixes issue #440 where PBS alert thresholds were being reset
 	// Alert overrides are stored separately from node configuration
@@ -1177,7 +1386,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 			if nodeType == "pbs" && index < len(h.config.PBSInstances) {
 				pbsName := h.config.PBSInstances[index].Name
 				monitoringID := "pbs-" + pbsName
-				
+
 				// Check if there are overrides for this PBS node
 				if alertConfig.Overrides != nil {
 					if _, exists := alertConfig.Overrides[monitoringID]; exists {
@@ -1189,7 +1398,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 					}
 				}
 			}
-			
+
 			// Apply the alert configuration to preserve all overrides
 			h.monitor.GetAlertManager().UpdateConfig(*alertConfig)
 			log.Debug().
@@ -1212,7 +1421,7 @@ func (h *ConfigHandlers) HandleUpdateNode(w http.ResponseWriter, r *http.Request
 	if h.monitor != nil && h.monitor.GetDiscoveryService() != nil {
 		log.Info().Msg("Triggering discovery refresh after adding node")
 		h.monitor.GetDiscoveryService().ForceRefresh()
-		
+
 		// Broadcast discovery update via WebSocket
 		if h.wsHub != nil {
 			// Wait a moment for discovery to complete
@@ -1246,7 +1455,7 @@ func (h *ConfigHandlers) HandleDeleteNode(w http.ResponseWriter, r *http.Request
 		http.Error(w, "Cannot modify nodes in mock mode", http.StatusForbidden)
 		return
 	}
-	
+
 	nodeID := strings.TrimPrefix(r.URL.Path, "/api/config/nodes/")
 	if nodeID == "" {
 		http.Error(w, "Node ID required", http.StatusBadRequest)
@@ -1288,14 +1497,14 @@ func (h *ConfigHandlers) HandleDeleteNode(w http.ResponseWriter, r *http.Request
 	// This way we can get the deleted node's info for immediate discovery
 	var deletedNodeHost string
 	var deletedNodeType string = nodeType
-	
+
 	// Get the host info of the deleted node for quick re-discovery
 	if nodeType == "pve" && index < len(h.config.PVEInstances) {
 		deletedNodeHost = h.config.PVEInstances[index].Host
 	} else if nodeType == "pbs" && index < len(h.config.PBSInstances) {
 		deletedNodeHost = h.config.PBSInstances[index].Host
 	}
-	
+
 	// Extract IP and port from the host URL for targeted discovery
 	var targetIP string
 	var targetPort int
@@ -1318,7 +1527,7 @@ func (h *ConfigHandlers) HandleDeleteNode(w http.ResponseWriter, r *http.Request
 			}
 		}
 	}
-	
+
 	// Reload monitor with new configuration
 	if h.reloadFunc != nil {
 		if err := h.reloadFunc(); err != nil {
@@ -1339,7 +1548,7 @@ func (h *ConfigHandlers) HandleDeleteNode(w http.ResponseWriter, r *http.Request
 			Timestamp: time.Now().Format(time.RFC3339),
 		})
 		log.Info().Msg("Broadcasted node deletion event")
-		
+
 		// If we know the deleted node's details, immediately add it to discovered list
 		if targetIP != "" && targetPort > 0 {
 			// Create a synthetic discovery result with just the deleted node
@@ -1357,11 +1566,11 @@ func (h *ConfigHandlers) HandleDeleteNode(w http.ResponseWriter, r *http.Request
 				"timestamp": time.Now().Unix(),
 				"immediate": true, // Flag to indicate this is immediate, not from a full scan
 			}
-			
+
 			// Immediately broadcast the deleted node as discovered
 			h.wsHub.BroadcastMessage(websocket.Message{
-				Type: "discovery_update",
-				Data: immediateResult,
+				Type:      "discovery_update",
+				Data:      immediateResult,
 				Timestamp: time.Now().Format(time.RFC3339),
 			})
 			log.Info().
@@ -1370,12 +1579,12 @@ func (h *ConfigHandlers) HandleDeleteNode(w http.ResponseWriter, r *http.Request
 				Str("type", deletedNodeType).
 				Msg("Immediately added deleted node to discovery")
 		}
-		
+
 		// Schedule a full discovery scan in the background
 		go func() {
 			// Short delay to let the monitor stabilize
 			time.Sleep(500 * time.Millisecond)
-			
+
 			// Trigger full discovery refresh
 			if h.monitor != nil && h.monitor.GetDiscoveryService() != nil {
 				h.monitor.GetDiscoveryService().ForceRefresh()
@@ -1414,7 +1623,7 @@ func (h *ConfigHandlers) HandleTestExistingNode(w http.ResponseWriter, r *http.R
 	// Get the node configuration
 	var host, user, password, tokenName, tokenValue, fingerprint string
 	var verifySSL bool
-	
+
 	if nodeType == "pve" && index < len(h.config.PVEInstances) {
 		pve := h.config.PVEInstances[index]
 		host = pve.Host
@@ -1449,28 +1658,28 @@ func (h *ConfigHandlers) HandleTestExistingNode(w http.ResponseWriter, r *http.R
 			VerifySSL:   verifySSL,
 			Fingerprint: fingerprint,
 		}
-		
+
 		tempClient, err := proxmox.NewClient(clientConfig)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "create_client"), http.StatusBadRequest)
 			return
 		}
-		
+
 		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 		defer cancel()
-		
+
 		nodes, err := tempClient.GetNodes(ctx)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "connection"), http.StatusBadRequest)
 			return
 		}
-		
+
 		response := map[string]interface{}{
-			"status": "success",
-			"message": fmt.Sprintf("Successfully connected to %d node(s)", len(nodes)),
+			"status":    "success",
+			"message":   fmt.Sprintf("Successfully connected to %d node(s)", len(nodes)),
 			"nodeCount": len(nodes),
 		}
-		
+
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(response)
 	} else {
@@ -1484,28 +1693,28 @@ func (h *ConfigHandlers) HandleTestExistingNode(w http.ResponseWriter, r *http.R
 			VerifySSL:   verifySSL,
 			Fingerprint: fingerprint,
 		}
-		
+
 		tempClient, err := pbs.NewClient(clientConfig)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "create_client"), http.StatusBadRequest)
 			return
 		}
-		
+
 		ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 		defer cancel()
-		
+
 		datastores, err := tempClient.GetDatastores(ctx)
 		if err != nil {
 			http.Error(w, sanitizeErrorMessage(err, "connection"), http.StatusBadRequest)
 			return
 		}
-		
+
 		response := map[string]interface{}{
-			"status": "success",
-			"message": fmt.Sprintf("Successfully connected. Found %d datastore(s)", len(datastores)),
+			"status":         "success",
+			"message":        fmt.Sprintf("Successfully connected. Found %d datastore(s)", len(datastores)),
 			"datastoreCount": len(datastores),
 		}
-		
+
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(response)
 	}
@@ -1520,12 +1729,17 @@ func (h *ConfigHandlers) HandleTestNodeConfig(w http.ResponseWriter, r *http.Req
 	}
 
 	var testResult map[string]interface{}
-	
+
 	if req.Type == "pve" {
 		// Create a temporary client to test connection
+		authUser := req.User
+		if req.Password != "" && req.TokenName == "" && req.TokenValue == "" {
+			authUser = normalizePVEUser(authUser)
+			req.User = authUser
+		}
 		clientConfig := proxmox.ClientConfig{
 			Host:        req.Host,
-			User:        req.User,
+			User:        authUser,
 			Password:    req.Password,
 			TokenName:   req.TokenName,
 			TokenValue:  req.TokenValue,
@@ -1543,7 +1757,7 @@ func (h *ConfigHandlers) HandleTestNodeConfig(w http.ResponseWriter, r *http.Req
 			startTime := time.Now()
 			ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 			defer cancel()
-			
+
 			if nodes, err := client.GetNodes(ctx); err != nil {
 				testResult = map[string]interface{}{
 					"status":  "error",
@@ -1580,7 +1794,7 @@ func (h *ConfigHandlers) HandleTestNodeConfig(w http.ResponseWriter, r *http.Req
 			startTime := time.Now()
 			ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 			defer cancel()
-			
+
 			if _, err := client.GetDatastores(ctx); err != nil {
 				testResult = map[string]interface{}{
 					"status":  "error",
@@ -1635,14 +1849,18 @@ func (h *ConfigHandlers) HandleTestNode(w http.ResponseWriter, r *http.Request)
 
 	// Find the node to test
 	var testResult map[string]interface{}
-	
+
 	if nodeType == "pve" && index < len(h.config.PVEInstances) {
 		pve := h.config.PVEInstances[index]
-		
+
 		// Create a temporary client to test connection
+		authUser := pve.User
+		if pve.TokenName == "" && pve.TokenValue == "" {
+			authUser = normalizePVEUser(authUser)
+		}
 		clientConfig := proxmox.ClientConfig{
 			Host:        pve.Host,
-			User:        pve.User,
+			User:        authUser,
 			Password:    pve.Password,
 			TokenName:   pve.TokenName,
 			TokenValue:  pve.TokenValue,
@@ -1660,7 +1878,7 @@ func (h *ConfigHandlers) HandleTestNode(w http.ResponseWriter, r *http.Request)
 			startTime := time.Now()
 			ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 			defer cancel()
-			
+
 			if nodes, err := client.GetNodes(ctx); err != nil {
 				testResult = map[string]interface{}{
 					"status":  "error",
@@ -1677,7 +1895,7 @@ func (h *ConfigHandlers) HandleTestNode(w http.ResponseWriter, r *http.Request)
 		}
 	} else if nodeType == "pbs" && index < len(h.config.PBSInstances) {
 		pbsInstance := h.config.PBSInstances[index]
-		
+
 		// Create a temporary client to test connection
 		clientConfig := pbs.ClientConfig{
 			Host:        pbsInstance.Host,
@@ -1699,7 +1917,7 @@ func (h *ConfigHandlers) HandleTestNode(w http.ResponseWriter, r *http.Request)
 			startTime := time.Now()
 			ctx, cancel := context.WithTimeout(context.Background(), 10*time.Second)
 			defer cancel()
-			
+
 			if _, err := client.GetDatastores(ctx); err != nil {
 				testResult = map[string]interface{}{
 					"status":  "error",
@@ -1734,15 +1952,15 @@ func (h *ConfigHandlers) getNodeStatus(nodeType, nodeName string) string {
 	if h.monitor == nil {
 		return "disconnected"
 	}
-	
+
 	// Get connection statuses from monitor
 	connectionStatus := h.monitor.GetConnectionStatuses()
-	
+
 	key := fmt.Sprintf("%s-%s", nodeType, nodeName)
 	if connected, ok := connectionStatus[key]; ok && connected {
 		return "connected"
 	}
-	
+
 	return "disconnected"
 }
 
@@ -1754,7 +1972,7 @@ func (h *ConfigHandlers) HandleGetSystemSettings(w http.ResponseWriter, r *http.
 		log.Warn().Err(err).Msg("Failed to load persisted system settings")
 		persistedSettings = &config.SystemSettings{}
 	}
-	
+
 	// Get current values from running config
 	settings := config.SystemSettings{
 		// Note: PVE polling is hardcoded to 10s
@@ -1767,14 +1985,14 @@ func (h *ConfigHandlers) HandleGetSystemSettings(w http.ResponseWriter, r *http.
 		AutoUpdateEnabled:       h.config.AutoUpdateEnabled,
 		AutoUpdateCheckInterval: int(h.config.AutoUpdateCheckInterval.Hours()),
 		AutoUpdateTime:          h.config.AutoUpdateTime,
-		LogLevel:                h.config.LogLevel, // Include log level
-		Theme:                   persistedSettings.Theme, // Include theme from persisted settings
-		AllowEmbedding:          persistedSettings.AllowEmbedding, // Include allowEmbedding from persisted settings
+		LogLevel:                h.config.LogLevel,                     // Include log level
+		Theme:                   persistedSettings.Theme,               // Include theme from persisted settings
+		AllowEmbedding:          persistedSettings.AllowEmbedding,      // Include allowEmbedding from persisted settings
 		AllowedEmbedOrigins:     persistedSettings.AllowedEmbedOrigins, // Include allowedEmbedOrigins from persisted settings
-		DiscoveryEnabled:        persistedSettings.DiscoveryEnabled, // Include discoveryEnabled from persisted settings
-		DiscoverySubnet:         persistedSettings.DiscoverySubnet, // Include discoverySubnet from persisted settings
+		DiscoveryEnabled:        persistedSettings.DiscoveryEnabled,    // Include discoveryEnabled from persisted settings
+		DiscoverySubnet:         persistedSettings.DiscoverySubnet,     // Include discoverySubnet from persisted settings
 	}
-	
+
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(settings)
 }
@@ -1786,22 +2004,22 @@ func (h *ConfigHandlers) HandleUpdateSystemSettingsOLD(w http.ResponseWriter, r
 		http.Error(w, "Invalid request body", http.StatusBadRequest)
 		return
 	}
-	
+
 	// Validate PBS polling interval (must be positive)
 	if settings.PBSPollingInterval < 0 {
 		http.Error(w, "PBS polling interval must be positive", http.StatusBadRequest)
 		return
 	}
-	
+
 	// Update polling intervals
 	needsReload := false
-	
+
 	// Note: PVE polling is hardcoded to 10s, only PBS interval can be configured
 	if settings.PBSPollingInterval > 0 {
 		h.config.PBSPollingInterval = time.Duration(settings.PBSPollingInterval) * time.Second
 		needsReload = true
 	}
-	
+
 	// Trigger a monitor reload if intervals changed
 	if needsReload && h.reloadFunc != nil {
 		log.Info().
@@ -1812,7 +2030,7 @@ func (h *ConfigHandlers) HandleUpdateSystemSettingsOLD(w http.ResponseWriter, r
 			// Don't fail the request, the setting was saved
 		}
 	}
-	
+
 	// Update allowed origins if provided
 	if settings.AllowedOrigins != "" {
 		h.config.AllowedOrigins = settings.AllowedOrigins
@@ -1825,7 +2043,7 @@ func (h *ConfigHandlers) HandleUpdateSystemSettingsOLD(w http.ResponseWriter, r
 			h.wsHub.SetAllowedOrigins(origins)
 		}
 	}
-	
+
 	// Update update-related settings
 	if settings.UpdateChannel != "" {
 		h.config.UpdateChannel = settings.UpdateChannel
@@ -1837,19 +2055,19 @@ func (h *ConfigHandlers) HandleUpdateSystemSettingsOLD(w http.ResponseWriter, r
 	if settings.AutoUpdateTime != "" {
 		h.config.AutoUpdateTime = settings.AutoUpdateTime
 	}
-	
+
 	// Save settings to persistence
 	if err := h.persistence.SaveSystemSettings(settings); err != nil {
 		log.Error().Err(err).Msg("Failed to persist system settings")
 		// Continue anyway - settings are applied in memory
 	}
-	
+
 	log.Info().
 		Int("pbsPollingInterval", settings.PBSPollingInterval).
 		Int("backendPort", settings.BackendPort).
 		Int("frontendPort", settings.FrontendPort).
 		Msg("Updated system settings in unified config")
-	
+
 	// Trigger monitor reload to apply new settings
 	if h.reloadFunc != nil {
 		if err := h.reloadFunc(); err != nil {
@@ -1861,10 +2079,10 @@ func (h *ConfigHandlers) HandleUpdateSystemSettingsOLD(w http.ResponseWriter, r
 				Msg("Monitor reloaded with new PBS polling interval")
 		}
 	}
-	
+
 	w.WriteHeader(http.StatusOK)
 	json.NewEncoder(w).Encode(map[string]interface{}{
-		"status": "success",
+		"status":  "success",
 		"message": "Settings updated successfully",
 	})
 }
@@ -1898,7 +2116,7 @@ func (h *ConfigHandlers) HandleExportConfig(w http.ResponseWriter, r *http.Reque
 		http.Error(w, "Passphrase is required", http.StatusBadRequest)
 		return
 	}
-	
+
 	// Require strong passphrase (at least 12 characters)
 	if len(req.Passphrase) < 12 {
 		http.Error(w, "Passphrase must be at least 12 characters long", http.StatusBadRequest)
@@ -2031,21 +2249,21 @@ func (h *ConfigHandlers) HandleDiscoverServers(w http.ResponseWriter, r *http.Re
 		// Return cached results from background discovery service
 		if discoveryService := h.monitor.GetDiscoveryService(); discoveryService != nil {
 			result, updated := discoveryService.GetCachedResult()
-			
+
 			// Add metadata about the cache
 			response := map[string]interface{}{
-				"servers":   result.Servers,
-				"errors":    result.Errors,
-				"cached":    true,
-				"updated":   updated.Unix(),
-				"age":       time.Since(updated).Seconds(),
+				"servers": result.Servers,
+				"errors":  result.Errors,
+				"cached":  true,
+				"updated": updated.Unix(),
+				"age":     time.Since(updated).Seconds(),
 			}
-			
+
 			w.Header().Set("Content-Type", "application/json")
 			json.NewEncoder(w).Encode(response)
 			return
 		}
-		
+
 		// No discovery service available, return empty result
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(map[string]interface{}{
@@ -2054,12 +2272,12 @@ func (h *ConfigHandlers) HandleDiscoverServers(w http.ResponseWriter, r *http.Re
 			"cached":  false,
 		})
 		return
-		
+
 	case http.MethodPost:
 		// Parse request
 		var req struct {
-			Subnet string `json:"subnet"` // CIDR notation or "auto"
-			UseCache bool `json:"use_cache"` // Whether to return cached results
+			Subnet   string `json:"subnet"`    // CIDR notation or "auto"
+			UseCache bool   `json:"use_cache"` // Whether to return cached results
 		}
 
 		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
@@ -2071,15 +2289,15 @@ func (h *ConfigHandlers) HandleDiscoverServers(w http.ResponseWriter, r *http.Re
 		if req.UseCache {
 			if discoveryService := h.monitor.GetDiscoveryService(); discoveryService != nil {
 				result, updated := discoveryService.GetCachedResult()
-				
+
 				response := map[string]interface{}{
-					"servers":   result.Servers,
-					"errors":    result.Errors,
-					"cached":    true,
-					"updated":   updated.Unix(),
-					"age":       time.Since(updated).Seconds(),
+					"servers": result.Servers,
+					"errors":  result.Errors,
+					"cached":  true,
+					"updated": updated.Unix(),
+					"age":     time.Since(updated).Seconds(),
 				}
-				
+
 				w.Header().Set("Content-Type", "application/json")
 				json.NewEncoder(w).Encode(response)
 				return
@@ -2092,22 +2310,22 @@ func (h *ConfigHandlers) HandleDiscoverServers(w http.ResponseWriter, r *http.Re
 			if req.Subnet != "" {
 				discoveryService.SetSubnet(req.Subnet)
 			}
-			
+
 			// Trigger a refresh
 			discoveryService.ForceRefresh()
-			
+
 			// Wait a moment for scan to start, then return current cache
 			time.Sleep(100 * time.Millisecond)
-			
+
 			result, updated := discoveryService.GetCachedResult()
 			response := map[string]interface{}{
-				"servers":   result.Servers,
-				"errors":    result.Errors,
-				"cached":    true,
-				"scanning":  true,
-				"updated":   updated.Unix(),
+				"servers":  result.Servers,
+				"errors":   result.Errors,
+				"cached":   true,
+				"scanning": true,
+				"updated":  updated.Unix(),
 			}
-			
+
 			w.Header().Set("Content-Type", "application/json")
 			json.NewEncoder(w).Encode(response)
 			return
@@ -2129,7 +2347,7 @@ func (h *ConfigHandlers) HandleDiscoverServers(w http.ResponseWriter, r *http.Re
 
 		w.Header().Set("Content-Type", "application/json")
 		json.NewEncoder(w).Encode(result)
-		
+
 	default:
 		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 	}
@@ -2146,16 +2364,16 @@ func (h *ConfigHandlers) HandleSetupScript(w http.ResponseWriter, r *http.Reques
 	query := r.URL.Query()
 	serverType := query.Get("type") // "pve" or "pbs"
 	serverHost := query.Get("host")
-	pulseURL := query.Get("pulse_url") // URL of the Pulse server for auto-registration
+	pulseURL := query.Get("pulse_url")                 // URL of the Pulse server for auto-registration
 	backupPerms := query.Get("backup_perms") == "true" // Whether to add backup management permissions
-	authToken := query.Get("auth_token") // Temporary auth token for auto-registration
-	
+	authToken := query.Get("auth_token")               // Temporary auth token for auto-registration
+
 	// Validate required parameters
 	if serverType == "" {
 		http.Error(w, "Missing required parameter: type (must be 'pve' or 'pbs')", http.StatusBadRequest)
 		return
 	}
-	
+
 	// If host is not provided, try to use a sensible default
 	if serverHost == "" {
 		if serverType == "pve" {
@@ -2167,7 +2385,7 @@ func (h *ConfigHandlers) HandleSetupScript(w http.ResponseWriter, r *http.Reques
 			Str("type", serverType).
 			Msg("No host parameter provided, using placeholder. Auto-registration will fail.")
 	}
-	
+
 	// If pulseURL is not provided, use the current request host
 	if pulseURL == "" {
 		scheme := "http"
@@ -2176,21 +2394,21 @@ func (h *ConfigHandlers) HandleSetupScript(w http.ResponseWriter, r *http.Reques
 		}
 		pulseURL = fmt.Sprintf("%s://%s", scheme, r.Host)
 	}
-	
+
 	log.Info().
 		Str("type", serverType).
 		Str("host", serverHost).
 		Bool("has_auth", h.config.AuthUser != "" || h.config.AuthPass != "" || h.config.APIToken != "").
 		Msg("HandleSetupScript called")
-	
+
 	// The setup script is now public - authentication happens via setup code
 	// No need to check auth here since the script will prompt for a code
-	
+
 	// Default to PVE if not specified
 	if serverType == "" {
 		serverType = "pve"
 	}
-	
+
 	// If pulse URL not provided, try to construct from request
 	if pulseURL == "" {
 		scheme := "http"
@@ -2199,7 +2417,7 @@ func (h *ConfigHandlers) HandleSetupScript(w http.ResponseWriter, r *http.Reques
 		}
 		pulseURL = fmt.Sprintf("%s://%s", scheme, r.Host)
 	}
-	
+
 	// Extract hostname/IP from the host URL if provided
 	serverName := "your-server"
 	if serverHost != "" {
@@ -2215,7 +2433,7 @@ func (h *ConfigHandlers) HandleSetupScript(w http.ResponseWriter, r *http.Reques
 			serverName = strings.Split(serverHost, ":")[0]
 		}
 	}
-	
+
 	// Extract Pulse IP from the pulse URL to make token name unique
 	pulseIP := "pulse"
 	if pulseURL != "" {
@@ -2229,12 +2447,12 @@ func (h *ConfigHandlers) HandleSetupScript(w http.ResponseWriter, r *http.Reques
 			}
 		}
 	}
-	
+
 	// Create unique token name based on Pulse IP and timestamp
 	// Adding timestamp ensures truly unique tokens even when running from same Pulse server
 	timestamp := time.Now().Unix()
 	tokenName := fmt.Sprintf("pulse-%s-%d", pulseIP, timestamp)
-	
+
 	// Log the token name for debugging
 	log.Info().
 		Str("pulseURL", pulseURL).
@@ -2242,16 +2460,16 @@ func (h *ConfigHandlers) HandleSetupScript(w http.ResponseWriter, r *http.Reques
 		Str("tokenName", tokenName).
 		Int64("timestamp", timestamp).
 		Msg("Generated unique token name for setup script")
-	
+
 	var script string
-	
+
 	if serverType == "pve" {
 		// Build storage permissions command if needed
 		storagePerms := ""
 		if backupPerms {
 			storagePerms = "\npveum aclmod /storage -user pulse-monitor@pam -role PVEDatastoreAdmin"
 		}
-		
+
 		script = fmt.Sprintf(`#!/bin/bash
 # Pulse Monitoring Setup Script for %s
 # Generated: %s
@@ -2536,7 +2754,7 @@ fi
 `, serverName, time.Now().Format("2006-01-02 15:04:05"), pulseIP,
 			tokenName, tokenName, tokenName, tokenName, tokenName, tokenName,
 			authToken, pulseURL, serverHost, tokenName, tokenName, storagePerms, tokenName, serverHost)
-		
+
 	} else { // PBS
 		script = fmt.Sprintf(`#!/bin/bash
 # Pulse Monitoring Setup Script for PBS %s
@@ -2775,7 +2993,7 @@ fi
 			tokenName, tokenName, tokenName, tokenName, tokenName,
 			authToken, pulseURL, serverHost, tokenName, tokenName, tokenName, tokenName)
 	}
-	
+
 	// Set headers for script download
 	w.Header().Set("Content-Type", "text/plain; charset=utf-8")
 	w.Header().Set("Content-Disposition", fmt.Sprintf("inline; filename=pulse-setup-%s.sh", serverType))
@@ -2800,23 +3018,23 @@ func (h *ConfigHandlers) HandleSetupScriptURL(w http.ResponseWriter, r *http.Req
 		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 		return
 	}
-	
+
 	// Parse request
 	var req struct {
 		Type        string `json:"type"`
 		Host        string `json:"host"`
 		BackupPerms bool   `json:"backupPerms"`
 	}
-	
+
 	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		http.Error(w, "Invalid request", http.StatusBadRequest)
 		return
 	}
-	
+
 	// Generate a temporary auth token (simpler than setup codes)
 	token := h.generateSetupCode() // Reuse the generation function
 	tokenHash := internalauth.HashAPIToken(token)
-	
+
 	// Store the token with expiry (5 minutes)
 	expiry := time.Now().Add(5 * time.Minute)
 	h.codeMutex.Lock()
@@ -2827,16 +3045,16 @@ func (h *ConfigHandlers) HandleSetupScriptURL(w http.ResponseWriter, r *http.Req
 		Host:      req.Host,
 	}
 	h.codeMutex.Unlock()
-	
+
 	log.Info().
 		Str("token_hash", tokenHash[:8]+"...").
 		Time("expiry", expiry).
 		Str("type", req.Type).
 		Msg("Generated temporary auth token")
-	
+
 	// Build the URL with the token included
 	host := r.Host
-	
+
 	// Dev environment fix: if we detect localhost from vite proxy AND we're in dev mode, use the actual IP
 	if host == "127.0.0.1:7656" || host == "localhost:7656" {
 		// Check if we're in development mode
@@ -2847,48 +3065,48 @@ func (h *ConfigHandlers) HandleSetupScriptURL(w http.ResponseWriter, r *http.Req
 		}
 		// For production, keep the original host (users will need proper proxy config)
 	}
-	
+
 	// Detect protocol - check both TLS and proxy headers
 	scheme := "http"
 	if r.TLS != nil || r.Header.Get("X-Forwarded-Proto") == "https" {
 		scheme = "https"
 	}
 	pulseURL := fmt.Sprintf("%s://%s", scheme, host)
-	
+
 	encodedHost := ""
 	if req.Host != "" {
 		encodedHost = "&host=" + url.QueryEscape(req.Host)
 	}
-	
+
 	backupPerms := ""
 	if req.BackupPerms {
 		backupPerms = "&backup_perms=true"
 	}
-	
+
 	// Include the token directly in the URL - much simpler!
 	scriptURL := fmt.Sprintf("%s/api/setup-script?type=%s%s&pulse_url=%s%s&auth_token=%s",
 		pulseURL, req.Type, encodedHost, pulseURL, backupPerms, token)
-	
+
 	// Return a simple curl command - no environment variables needed
 	// Don't include setupCode since it's already embedded in the URL
 	response := map[string]interface{}{
-		"url":        scriptURL,
-		"command":    fmt.Sprintf(`curl -sSL "%s" | bash`, scriptURL),
-		"expires":    expiry.Unix(),
+		"url":     scriptURL,
+		"command": fmt.Sprintf(`curl -sSL "%s" | bash`, scriptURL),
+		"expires": expiry.Unix(),
 	}
-	
+
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(response)
 }
 
 // AutoRegisterRequest represents a request from the setup script to auto-register a node
 type AutoRegisterRequest struct {
-	Type       string `json:"type"`       // "pve" or "pbs"
-	Host       string `json:"host"`       // The host URL
-	TokenID    string `json:"tokenId"`    // Full token ID like pulse-monitor@pam!pulse-token
+	Type       string `json:"type"`                 // "pve" or "pbs"
+	Host       string `json:"host"`                 // The host URL
+	TokenID    string `json:"tokenId"`              // Full token ID like pulse-monitor@pam!pulse-token
 	TokenValue string `json:"tokenValue,omitempty"` // The token value for the node
-	ServerName string `json:"serverName"` // Hostname or IP
-	SetupCode  string `json:"setupCode,omitempty"` // One-time setup code for authentication (deprecated)
+	ServerName string `json:"serverName"`           // Hostname or IP
+	SetupCode  string `json:"setupCode,omitempty"`  // One-time setup code for authentication (deprecated)
 	AuthToken  string `json:"authToken,omitempty"`  // Direct auth token from URL (new approach)
 	// New secure fields
 	RequestToken bool   `json:"requestToken,omitempty"` // If true, Pulse will generate and return a token
@@ -2902,7 +3120,7 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
 		return
 	}
-	
+
 	// Parse request body first to get the setup code
 	var req AutoRegisterRequest
 	body, err := io.ReadAll(r.Body)
@@ -2911,28 +3129,28 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 		http.Error(w, "Failed to read request body", http.StatusBadRequest)
 		return
 	}
-	
+
 	if err := json.Unmarshal(body, &req); err != nil {
 		log.Error().Err(err).Str("body", string(body)).Msg("Failed to parse auto-register request")
 		http.Error(w, "Invalid request format", http.StatusBadRequest)
 		return
 	}
-	
+
 	// Check authentication - require either setup code or API token if auth is enabled
 	authenticated := false
-	
+
 	// Support both setupCode (old) and authToken (new) fields
 	authCode := req.SetupCode
 	if req.AuthToken != "" {
 		authCode = req.AuthToken
 	}
-	
+
 	log.Debug().
 		Str("authToken", req.AuthToken).
 		Str("authCode", authCode).
 		Bool("hasConfigToken", h.config.APIToken != "").
 		Msg("Checking authentication for auto-register")
-	
+
 	// First check for setup code/auth token in the request
 	if authCode != "" {
 		// First check if it's the actual API token (for direct authentication)
@@ -2983,7 +3201,7 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 			h.codeMutex.Unlock()
 		}
 	}
-	
+
 	// If not authenticated via setup code, check API token if configured
 	if !authenticated && h.config.APIToken != "" {
 		apiToken := r.Header.Get("X-API-Token")
@@ -2993,7 +3211,7 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 			log.Info().Msg("Auto-register authenticated via API token")
 		}
 	}
-	
+
 	// If still not authenticated and auth is required, reject
 	// BUT: Always allow if a valid setup code/auth token was provided (even if expired/used)
 	// This ensures the error message is accurate
@@ -3007,16 +3225,16 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 		http.Error(w, "Invalid or expired setup code", http.StatusUnauthorized)
 		return
 	}
-	
+
 	// Log source IP for security auditing
 	clientIP := r.RemoteAddr
 	if forwarded := r.Header.Get("X-Forwarded-For"); forwarded != "" {
 		clientIP = forwarded
 	}
 	log.Info().Str("clientIP", clientIP).Msg("Auto-register request from")
-	
+
 	// Registration token validation removed - feature deprecated
-	
+
 	log.Info().
 		Str("type", req.Type).
 		Str("host", req.Host).
@@ -3042,7 +3260,7 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 		h.handleSecureAutoRegister(w, r, &req, clientIP)
 		return
 	}
-	
+
 	// Legacy mode - validate old required fields
 	if req.Type == "" || req.Host == "" || req.TokenID == "" || req.TokenValue == "" {
 		log.Error().
@@ -3085,23 +3303,23 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 			host += ":8007"
 		}
 	}
-	
+
 	// Create a node configuration
 	nodeConfig := NodeConfigRequest{
-		Type:              req.Type,
-		Name:              req.ServerName,
-		Host:              host, // Use normalized host
-		TokenName:         req.TokenID,
-		TokenValue:        req.TokenValue,
-		VerifySSL:         false, // Default to not verifying SSL for auto-registration
-		MonitorVMs:        true,
-		MonitorContainers: true,
-		MonitorStorage:    true,
-		MonitorBackups:    true,
-		MonitorDatastores: true,
-		MonitorSyncJobs:   true,
-		MonitorVerifyJobs: true,
-		MonitorPruneJobs:  true,
+		Type:               req.Type,
+		Name:               req.ServerName,
+		Host:               host, // Use normalized host
+		TokenName:          req.TokenID,
+		TokenValue:         req.TokenValue,
+		VerifySSL:          false, // Default to not verifying SSL for auto-registration
+		MonitorVMs:         true,
+		MonitorContainers:  true,
+		MonitorStorage:     true,
+		MonitorBackups:     true,
+		MonitorDatastores:  true,
+		MonitorSyncJobs:    true,
+		MonitorVerifyJobs:  true,
+		MonitorPruneJobs:   true,
 		MonitorGarbageJobs: false,
 	}
 
@@ -3133,16 +3351,16 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 			instance.Password = ""
 			instance.TokenName = nodeConfig.TokenName
 			instance.TokenValue = nodeConfig.TokenValue
-			
+
 			// Check for cluster if not already detected
 			if !instance.IsCluster {
 				clientConfig := proxmox.ClientConfig{
-					Host:        instance.Host,
-					TokenName:   nodeConfig.TokenName,
-					TokenValue:  nodeConfig.TokenValue,
-					VerifySSL:   instance.VerifySSL,
+					Host:       instance.Host,
+					TokenName:  nodeConfig.TokenName,
+					TokenValue: nodeConfig.TokenValue,
+					VerifySSL:  instance.VerifySSL,
 				}
-				
+
 				isCluster, clusterName, clusterEndpoints := detectPVECluster(clientConfig, instance.Name)
 				if isCluster {
 					instance.IsCluster = true
@@ -3175,14 +3393,14 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 		if req.Type == "pve" {
 			// Check for cluster detection using helper
 			clientConfig := proxmox.ClientConfig{
-				Host:        nodeConfig.Host,
-				TokenName:   nodeConfig.TokenName,
-				TokenValue:  nodeConfig.TokenValue,
-				VerifySSL:   nodeConfig.VerifySSL,
+				Host:       nodeConfig.Host,
+				TokenName:  nodeConfig.TokenName,
+				TokenValue: nodeConfig.TokenValue,
+				VerifySSL:  nodeConfig.VerifySSL,
 			}
-			
+
 			isCluster, clusterName, clusterEndpoints := detectPVECluster(clientConfig, nodeConfig.Name)
-			
+
 			newInstance := config.PVEInstance{
 				Name:              nodeConfig.Name,
 				Host:              nodeConfig.Host,
@@ -3198,7 +3416,7 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 				ClusterEndpoints:  clusterEndpoints,
 			}
 			h.config.PVEInstances = append(h.config.PVEInstances, newInstance)
-			
+
 			if isCluster {
 				log.Info().
 					Str("cluster", clusterName).
@@ -3234,14 +3452,14 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 			Bool("hasTokenValue", lastNode.TokenValue != "").
 			Msg("About to save PVE node")
 	}
-	
+
 	// Save configuration
 	if err := h.persistence.SaveNodesConfig(h.config.PVEInstances, h.config.PBSInstances); err != nil {
 		log.Error().Err(err).Msg("Failed to save auto-registered node")
 		http.Error(w, "Failed to save configuration", http.StatusInternalServerError)
 		return
 	}
-	
+
 	log.Info().Msg("Configuration saved successfully")
 
 	// Reload monitor to pick up new configuration
@@ -3268,24 +3486,24 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 	if h.wsHub != nil {
 		fmt.Println("[AUTO-REGISTER] WebSocket hub is available")
 		nodeInfo := map[string]interface{}{
-			"type":       req.Type,
-			"host":       req.Host,
-			"name":       req.ServerName,
-			"tokenId":    req.TokenID,
-			"hasToken":   true,
-			"verifySSL":  false,
-			"status":     "connected",
+			"type":      req.Type,
+			"host":      req.Host,
+			"name":      req.ServerName,
+			"tokenId":   req.TokenID,
+			"hasToken":  true,
+			"verifySSL": false,
+			"status":    "connected",
 		}
-		
+
 		// Broadcast the auto-registration success
 		fmt.Printf("[AUTO-REGISTER] Broadcasting message type: node_auto_registered for host: %s\n", req.Host)
 		h.wsHub.BroadcastMessage(websocket.Message{
-			Type: "node_auto_registered",
-			Data: nodeInfo,
+			Type:      "node_auto_registered",
+			Data:      nodeInfo,
 			Timestamp: time.Now().Format(time.RFC3339),
 		})
 		fmt.Println("[AUTO-REGISTER] Broadcast complete")
-		
+
 		// Also broadcast a discovery update to refresh the UI
 		if h.monitor != nil && h.monitor.GetDiscoveryService() != nil {
 			result, _ := h.monitor.GetDiscoveryService().GetCachedResult()
@@ -3302,7 +3520,7 @@ func (h *ConfigHandlers) HandleAutoRegister(w http.ResponseWriter, r *http.Reque
 				log.Info().Msg("Broadcasted discovery update after auto-registration")
 			}
 		}
-		
+
 		log.Info().
 			Str("host", req.Host).
 			Str("name", req.ServerName).
@@ -3329,7 +3547,7 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 		Str("host", req.Host).
 		Str("username", req.Username).
 		Msg("Processing secure auto-register request")
-	
+
 	// Generate a unique token name based on Pulse's IP/hostname
 	hostname, _ := os.Hostname()
 	if hostname == "" {
@@ -3337,7 +3555,7 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 	}
 	timestamp := time.Now().Unix()
 	tokenName := fmt.Sprintf("pulse-%s-%d", hostname, timestamp)
-	
+
 	// Generate a secure random token value
 	tokenBytes := make([]byte, 16)
 	if _, err := rand.Read(tokenBytes); err != nil {
@@ -3347,7 +3565,7 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 	}
 	tokenValue := fmt.Sprintf("%x-%x-%x-%x-%x",
 		tokenBytes[0:4], tokenBytes[4:6], tokenBytes[6:8], tokenBytes[8:10], tokenBytes[10:16])
-	
+
 	// Normalize the host URL
 	host := req.Host
 	if req.Type == "pve" {
@@ -3380,11 +3598,11 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 			host += ":8007"
 		}
 	}
-	
+
 	// Create the token on the remote server
 	var fullTokenID string
 	var createErr error
-	
+
 	if req.Type == "pve" {
 		// For PVE, create token via API
 		fullTokenID = fmt.Sprintf("pulse-monitor@pam!%s", tokenName)
@@ -3396,13 +3614,13 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 		// Note: This would require implementing token creation in the pbs package
 		// For now, we'll return the token for the script to create
 	}
-	
+
 	if createErr != nil {
 		log.Error().Err(createErr).Msg("Failed to create token on remote server")
 		http.Error(w, "Failed to create token on remote server", http.StatusInternalServerError)
 		return
 	}
-	
+
 	// Determine server name
 	serverName := req.ServerName
 	if serverName == "" {
@@ -3414,7 +3632,7 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 			serverName = serverName[:idx]
 		}
 	}
-	
+
 	// Add the node to configuration
 	if req.Type == "pve" {
 		pveNode := config.PVEInstance{
@@ -3431,27 +3649,27 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 		h.config.PVEInstances = append(h.config.PVEInstances, pveNode)
 	} else if req.Type == "pbs" {
 		pbsNode := config.PBSInstance{
-			Name:               serverName,
-			Host:               host,
-			TokenName:          fullTokenID,
-			TokenValue:         tokenValue,
-			VerifySSL:          false,
-			MonitorBackups:     true,
-			MonitorDatastores:  true,
-			MonitorSyncJobs:    true,
-			MonitorVerifyJobs:  true,
-			MonitorPruneJobs:   true,
+			Name:              serverName,
+			Host:              host,
+			TokenName:         fullTokenID,
+			TokenValue:        tokenValue,
+			VerifySSL:         false,
+			MonitorBackups:    true,
+			MonitorDatastores: true,
+			MonitorSyncJobs:   true,
+			MonitorVerifyJobs: true,
+			MonitorPruneJobs:  true,
 		}
 		h.config.PBSInstances = append(h.config.PBSInstances, pbsNode)
 	}
-	
+
 	// Save configuration
 	if err := h.persistence.SaveNodesConfig(h.config.PVEInstances, h.config.PBSInstances); err != nil {
 		log.Error().Err(err).Msg("Failed to save auto-registered node")
 		http.Error(w, "Failed to save configuration", http.StatusInternalServerError)
 		return
 	}
-	
+
 	// Reload monitor
 	if h.reloadFunc != nil {
 		go func() {
@@ -3460,7 +3678,7 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 			}
 		}()
 	}
-	
+
 	// Send success response with token details for script to create
 	w.Header().Set("Content-Type", "application/json")
 	json.NewEncoder(w).Encode(map[string]interface{}{
@@ -3473,4 +3691,3 @@ func (h *ConfigHandlers) handleSecureAutoRegister(w http.ResponseWriter, r *http
 	})
 
 }
-	
diff --git a/internal/api/frontend_embed.go b/internal/api/frontend_embed.go
index 3758f797c..d48d689a8 100644
--- a/internal/api/frontend_embed.go
+++ b/internal/api/frontend_embed.go
@@ -5,7 +5,11 @@ import (
 	"io"
 	"io/fs"
 	"net/http"
+	"net/http/httputil"
+	"net/url"
+	"os"
 	"strings"
+	"sync"
 
 	"github.com/rs/zerolog/log"
 )
@@ -15,6 +19,42 @@ import (
 //go:embed all:frontend-modern/dist
 var embeddedFrontend embed.FS
 
+var (
+	devProxyOnce sync.Once
+	devProxy     *httputil.ReverseProxy
+	devProxyErr  error
+	devProxyURL  string
+)
+
+func getFrontendDevProxy() (*httputil.ReverseProxy, error) {
+	devProxyOnce.Do(func() {
+		devURL := strings.TrimSpace(os.Getenv("FRONTEND_DEV_SERVER"))
+		if devURL == "" {
+			return
+		}
+
+		target, err := url.Parse(devURL)
+		if err != nil {
+			devProxyErr = err
+			return
+		}
+
+		proxy := httputil.NewSingleHostReverseProxy(target)
+		proxy.ErrorHandler = func(w http.ResponseWriter, r *http.Request, err error) {
+			log.Error().Err(err).Str("path", r.URL.Path).Msg("Frontend dev proxy error")
+			w.WriteHeader(http.StatusBadGateway)
+		}
+		devProxy = proxy
+		devProxyURL = target.String()
+		log.Warn().Str("frontend_dev_server", devProxyURL).Msg("Serving frontend via development proxy")
+	})
+
+	if devProxyErr != nil {
+		return nil, devProxyErr
+	}
+	return devProxy, nil
+}
+
 // getFrontendFS returns the embedded frontend filesystem
 func getFrontendFS() (http.FileSystem, error) {
 	// Strip the prefix to serve files from root
@@ -27,16 +67,24 @@ func getFrontendFS() (http.FileSystem, error) {
 
 // serveFrontendHandler returns a handler for serving the embedded frontend
 func serveFrontendHandler() http.HandlerFunc {
+	if proxy, err := getFrontendDevProxy(); err != nil {
+		log.Error().Err(err).Msg("Failed to initialize frontend dev proxy, falling back to embedded assets")
+	} else if proxy != nil {
+		return func(w http.ResponseWriter, r *http.Request) {
+			proxy.ServeHTTP(w, r)
+		}
+	}
+
 	// Get the embedded filesystem
 	fsys, err := getFrontendFS()
 	if err != nil {
 		log.Fatal().Err(err).Msg("Failed to get embedded frontend")
 	}
-	
+
 	return func(w http.ResponseWriter, r *http.Request) {
 		// Clean the path
 		p := r.URL.Path
-		
+
 		// Handle root path specially to avoid FileServer's directory redirect
 		// Issue #334: Serve index.html directly without using FileServer for root
 		if p == "/" || p == "" {
@@ -47,21 +95,21 @@ func serveFrontendHandler() http.HandlerFunc {
 				return
 			}
 			defer file.Close()
-			
+
 			// Check that it's not a directory
 			_, err = file.Stat()
 			if err != nil {
 				http.NotFound(w, r)
 				return
 			}
-			
+
 			// Read the file content
 			content, err := io.ReadAll(file)
 			if err != nil {
 				http.NotFound(w, r)
 				return
 			}
-			
+
 			// Serve the content with cache-busting headers
 			w.Header().Set("Content-Type", "text/html; charset=utf-8")
 			w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
@@ -70,15 +118,15 @@ func serveFrontendHandler() http.HandlerFunc {
 			w.Write(content)
 			return
 		}
-		
+
 		// Remove leading slash for filesystem lookup
 		lookupPath := strings.TrimPrefix(p, "/")
-		
+
 		// Check if file exists in embedded FS
 		file, err := fsys.Open(lookupPath)
 		if err == nil {
 			defer file.Close()
-			
+
 			// Get file info
 			stat, err := file.Stat()
 			if err == nil && !stat.IsDir() {
@@ -102,18 +150,18 @@ func serveFrontendHandler() http.HandlerFunc {
 					} else if strings.HasSuffix(lookupPath, ".svg") {
 						contentType = "image/svg+xml"
 					}
-					
+
 					w.Header().Set("Content-Type", contentType)
 					w.Write(content)
 					return
 				}
 			}
 		}
-		
+
 		// For SPA routing, serve index.html for non-API routes
-		if !strings.HasPrefix(p, "/api/") && 
-		   !strings.HasPrefix(p, "/ws") && 
-		   !strings.HasPrefix(p, "/socket.io/") {
+		if !strings.HasPrefix(p, "/api/") &&
+			!strings.HasPrefix(p, "/ws") &&
+			!strings.HasPrefix(p, "/socket.io/") {
 			// Serve index.html for client-side routing
 			indexFile, err := fsys.Open("index.html")
 			if err == nil {
@@ -129,8 +177,8 @@ func serveFrontendHandler() http.HandlerFunc {
 				}
 			}
 		}
-		
+
 		// Not found
 		http.NotFound(w, r)
 	}
-}
\ No newline at end of file
+}
diff --git a/internal/config/client_helpers.go b/internal/config/client_helpers.go
index c3c14f2e2..656aaeb02 100644
--- a/internal/config/client_helpers.go
+++ b/internal/config/client_helpers.go
@@ -1,15 +1,22 @@
 package config
 
 import (
+	"strings"
+
 	"github.com/rcourtman/pulse-go-rewrite/pkg/pbs"
 	"github.com/rcourtman/pulse-go-rewrite/pkg/proxmox"
 )
 
 // CreateProxmoxConfig creates a proxmox.ClientConfig from a PVEInstance
 func CreateProxmoxConfig(node *PVEInstance) proxmox.ClientConfig {
+	user := node.User
+	if node.TokenName == "" && node.TokenValue == "" && user != "" && !strings.Contains(user, "@") {
+		user = user + "@pam"
+	}
+
 	return proxmox.ClientConfig{
 		Host:        node.Host,
-		User:        node.User,
+		User:        user,
 		Password:    node.Password,
 		TokenName:   node.TokenName,
 		TokenValue:  node.TokenValue,
@@ -33,6 +40,10 @@ func CreatePBSConfig(node *PBSInstance) pbs.ClientConfig {
 
 // CreateProxmoxConfigFromFields creates a proxmox.ClientConfig from individual fields
 func CreateProxmoxConfigFromFields(host, user, password, tokenName, tokenValue, fingerprint string, verifySSL bool) proxmox.ClientConfig {
+	if tokenName == "" && tokenValue == "" && user != "" && !strings.Contains(user, "@") {
+		user = user + "@pam"
+	}
+
 	return proxmox.ClientConfig{
 		Host:        host,
 		User:        user,
@@ -55,4 +66,4 @@ func CreatePBSConfigFromFields(host, user, password, tokenName, tokenValue, fing
 		VerifySSL:   verifySSL,
 		Fingerprint: fingerprint,
 	}
-}
\ No newline at end of file
+}
diff --git a/internal/config/config.go b/internal/config/config.go
index 3b40615b8..35c79e39c 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -32,12 +32,12 @@ func IsPasswordHashed(password string) bool {
 	if !strings.HasPrefix(password, "$2") {
 		return false
 	}
-	
+
 	length := len(password)
 	if length == 60 {
 		return true // Perfect bcrypt hash
 	}
-	
+
 	// Warn about truncated or invalid hashes
 	if length >= 55 && length < 60 {
 		log.Error().
@@ -46,7 +46,7 @@ func IsPasswordHashed(password string) bool {
 			Msg("Bcrypt hash appears truncated! Should be 60 characters. Password will be treated as plaintext.")
 		return false // Treat as plaintext to force user to fix it
 	}
-	
+
 	return false
 }
 
@@ -54,13 +54,13 @@ func IsPasswordHashed(password string) bool {
 // NOTE: The envconfig tags are legacy and not used - configuration is loaded from encrypted JSON files
 type Config struct {
 	// Server settings
-	BackendHost   string `envconfig:"BACKEND_HOST" default:"0.0.0.0"`
-	BackendPort   int    `envconfig:"BACKEND_PORT" default:"3000"`
-	FrontendHost  string `envconfig:"FRONTEND_HOST" default:"0.0.0.0"`
-	FrontendPort  int    `envconfig:"FRONTEND_PORT" default:"7655"`
-	ConfigPath    string `envconfig:"CONFIG_PATH" default:"/etc/pulse"`
-	DataPath      string `envconfig:"DATA_PATH" default:"/var/lib/pulse"`
-	PublicURL     string `envconfig:"PULSE_PUBLIC_URL" default:""` // Full URL to access Pulse (e.g., http://192.168.1.100:7655)
+	BackendHost  string `envconfig:"BACKEND_HOST" default:"0.0.0.0"`
+	BackendPort  int    `envconfig:"BACKEND_PORT" default:"3000"`
+	FrontendHost string `envconfig:"FRONTEND_HOST" default:"0.0.0.0"`
+	FrontendPort int    `envconfig:"FRONTEND_PORT" default:"7655"`
+	ConfigPath   string `envconfig:"CONFIG_PATH" default:"/etc/pulse"`
+	DataPath     string `envconfig:"DATA_PATH" default:"/var/lib/pulse"`
+	PublicURL    string `envconfig:"PULSE_PUBLIC_URL" default:""` // Full URL to access Pulse (e.g., http://192.168.1.100:7655)
 
 	// Proxmox VE connections
 	PVEInstances []PVEInstance
@@ -92,14 +92,14 @@ type Config struct {
 	DisableAuth          bool   `envconfig:"DISABLE_AUTH" default:"false"`
 	AllowedOrigins       string `envconfig:"ALLOWED_ORIGINS" default:"*"`
 	IframeEmbeddingAllow string `envconfig:"IFRAME_EMBEDDING_ALLOW" default:"SAMEORIGIN"`
-	
+
 	// Proxy authentication settings
-	ProxyAuthSecret      string `envconfig:"PROXY_AUTH_SECRET"`
-	ProxyAuthUserHeader  string `envconfig:"PROXY_AUTH_USER_HEADER"`
-	ProxyAuthRoleHeader  string `envconfig:"PROXY_AUTH_ROLE_HEADER"`
+	ProxyAuthSecret        string `envconfig:"PROXY_AUTH_SECRET"`
+	ProxyAuthUserHeader    string `envconfig:"PROXY_AUTH_USER_HEADER"`
+	ProxyAuthRoleHeader    string `envconfig:"PROXY_AUTH_ROLE_HEADER"`
 	ProxyAuthRoleSeparator string `envconfig:"PROXY_AUTH_ROLE_SEPARATOR" default:"|"`
-	ProxyAuthAdminRole   string `envconfig:"PROXY_AUTH_ADMIN_ROLE" default:"admin"`
-	ProxyAuthLogoutURL   string `envconfig:"PROXY_AUTH_LOGOUT_URL"`
+	ProxyAuthAdminRole     string `envconfig:"PROXY_AUTH_ADMIN_ROLE" default:"admin"`
+	ProxyAuthLogoutURL     string `envconfig:"PROXY_AUTH_LOGOUT_URL"`
 	// HTTPS/TLS settings
 	HTTPSEnabled bool   `envconfig:"HTTPS_ENABLED" default:"false"`
 	TLSCertFile  string `envconfig:"TLS_CERT_FILE" default:""`
@@ -110,15 +110,15 @@ type Config struct {
 	AutoUpdateEnabled       bool          `envconfig:"AUTO_UPDATE_ENABLED" default:"false"`
 	AutoUpdateCheckInterval time.Duration `envconfig:"AUTO_UPDATE_CHECK_INTERVAL" default:"24h"`
 	AutoUpdateTime          string        `envconfig:"AUTO_UPDATE_TIME" default:"03:00"`
-	
+
 	// Discovery settings
 	DiscoveryEnabled bool   `envconfig:"DISCOVERY_ENABLED" default:"true"`
 	DiscoverySubnet  string `envconfig:"DISCOVERY_SUBNET" default:"auto"`
-	
+
 	// Deprecated - for backward compatibility
 	Port  int  `envconfig:"PORT"` // Maps to BackendPort
 	Debug bool `envconfig:"DEBUG" default:"false"`
-	
+
 	// Track which settings are overridden by environment variables
 	EnvOverrides map[string]bool `json:"-"`
 }
@@ -126,7 +126,7 @@ type Config struct {
 // PVEInstance represents a Proxmox VE connection
 type PVEInstance struct {
 	Name              string
-	Host              string   // Primary endpoint (user-provided)
+	Host              string // Primary endpoint (user-provided)
 	User              string
 	Password          string
 	TokenName         string
@@ -137,10 +137,10 @@ type PVEInstance struct {
 	MonitorContainers bool
 	MonitorStorage    bool
 	MonitorBackups    bool
-	
+
 	// Cluster support
-	IsCluster       bool              // True if this is a cluster
-	ClusterName     string            // Cluster name if applicable
+	IsCluster        bool              // True if this is a cluster
+	ClusterName      string            // Cluster name if applicable
 	ClusterEndpoints []ClusterEndpoint // All discovered cluster nodes
 }
 
@@ -182,7 +182,7 @@ func Load() (*Config, error) {
 	if dir := os.Getenv("PULSE_DATA_DIR"); dir != "" {
 		dataDir = dir
 	}
-	
+
 	// Load .env file if it exists (for deployment overrides)
 	envFile := filepath.Join(dataDir, ".env")
 	if _, err := os.Stat(envFile); err == nil {
@@ -192,17 +192,17 @@ func Load() (*Config, error) {
 			log.Info().Str("file", envFile).Msg("Loaded .env file for deployment overrides")
 		}
 	}
-	
+
 	// Also try loading from current directory for development
 	if err := godotenv.Load(); err == nil {
 		log.Info().Msg("Loaded configuration from .env in current directory")
 	}
-	
+
 	// Initialize config with defaults
 	cfg := &Config{
 		BackendHost:          "0.0.0.0",
 		BackendPort:          3000,
-		FrontendHost:         "0.0.0.0", 
+		FrontendHost:         "0.0.0.0",
 		FrontendPort:         7655,
 		ConfigPath:           dataDir,
 		DataPath:             dataDir,
@@ -222,7 +222,7 @@ func Load() (*Config, error) {
 		DiscoverySubnet:      "auto",
 		EnvOverrides:         make(map[string]bool),
 	}
-	
+
 	// Initialize persistence
 	persistence := NewConfigPersistence(dataDir)
 	if persistence != nil {
@@ -239,14 +239,14 @@ func Load() (*Config, error) {
 		} else if err != nil {
 			log.Warn().Err(err).Msg("Failed to load nodes configuration")
 		}
-		
+
 		// Load system configuration
 		if systemSettings, err := persistence.LoadSystemSettings(); err == nil && systemSettings != nil {
 			// Load PBS polling interval if configured
 			if systemSettings.PBSPollingInterval > 0 {
 				cfg.PBSPollingInterval = time.Duration(systemSettings.PBSPollingInterval) * time.Second
 			}
-			
+
 			if systemSettings.UpdateChannel != "" {
 				cfg.UpdateChannel = systemSettings.UpdateChannel
 			}
@@ -288,16 +288,16 @@ func Load() (*Config, error) {
 			}
 		}
 	}
-	
+
 	// Ensure PBS polling interval has default if not set
 	// Note: PVE polling is hardcoded to 10s in monitor.go
 	if cfg.PBSPollingInterval == 0 {
 		cfg.PBSPollingInterval = 60 * time.Second
 	}
-	
+
 	// Limited environment variable support
 	// NOTE: Node configuration is NOT done via env vars - use the web UI instead
-	
+
 	// Support both FRONTEND_PORT (preferred) and PORT (legacy) env vars
 	if frontendPort := os.Getenv("FRONTEND_PORT"); frontendPort != "" {
 		if p, err := strconv.Atoi(frontendPort); err == nil {
@@ -344,12 +344,12 @@ func Load() (*Config, error) {
 	} else {
 		log.Debug().Bool("DisableAuth", cfg.DisableAuth).Msg("DISABLE_AUTH not set, DisableAuth remains")
 	}
-	
+
 	// Load proxy authentication settings
 	if proxyAuthSecret := os.Getenv("PROXY_AUTH_SECRET"); proxyAuthSecret != "" {
 		cfg.ProxyAuthSecret = proxyAuthSecret
 		log.Info().Msg("Proxy authentication secret configured")
-		
+
 		// Load other proxy auth settings
 		if userHeader := os.Getenv("PROXY_AUTH_USER_HEADER"); userHeader != "" {
 			cfg.ProxyAuthUserHeader = userHeader
@@ -399,8 +399,7 @@ func Load() (*Config, error) {
 			log.Debug().Msg("Loaded pre-hashed password from env var")
 		}
 	}
-	
-	
+
 	// HTTPS/TLS configuration from environment
 	if httpsEnabled := os.Getenv("HTTPS_ENABLED"); httpsEnabled != "" {
 		cfg.HTTPSEnabled = httpsEnabled == "true" || httpsEnabled == "1"
@@ -414,11 +413,18 @@ func Load() (*Config, error) {
 		cfg.TLSKeyFile = tlsKeyFile
 		log.Debug().Str("key_file", tlsKeyFile).Msg("TLS key file from env var")
 	}
-	
+
 	// REMOVED: Update channel, auto-update, connection timeout, and allowed origins env vars
 	// These settings now ONLY come from system.json to prevent confusion
 	// Only keeping essential deployment/infrastructure env vars
-	
+
+	// Normalize PVE user fields for password authentication
+	for i := range cfg.PVEInstances {
+		if cfg.PVEInstances[i].TokenName == "" && cfg.PVEInstances[i].TokenValue == "" && cfg.PVEInstances[i].User != "" && !strings.Contains(cfg.PVEInstances[i].User, "@") {
+			cfg.PVEInstances[i].User = cfg.PVEInstances[i].User + "@pam"
+		}
+	}
+
 	if cfg.AllowedOrigins == "" {
 		// If not configured and we're in development mode (different ports for frontend/backend)
 		// allow localhost for development convenience
@@ -470,7 +476,7 @@ func Load() (*Config, error) {
 			log.Info().Str("url", detectedURL).Msg("Auto-detected public URL for webhook notifications")
 		}
 	}
-	
+
 	// Set log level
 	switch cfg.LogLevel {
 	case "debug":
@@ -482,12 +488,12 @@ func Load() (*Config, error) {
 	default:
 		zerolog.SetGlobalLevel(zerolog.InfoLevel) // Default to info level
 	}
-	
+
 	// Validate configuration
 	if err := cfg.Validate(); err != nil {
 		return nil, fmt.Errorf("invalid configuration: %w", err)
 	}
-	
+
 	return cfg, nil
 }
 
@@ -496,12 +502,12 @@ func SaveConfig(cfg *Config) error {
 	if globalPersistence == nil {
 		return fmt.Errorf("config persistence not initialized")
 	}
-	
+
 	// Save nodes configuration
 	if err := globalPersistence.SaveNodesConfig(cfg.PVEInstances, cfg.PBSInstances); err != nil {
 		return fmt.Errorf("failed to save nodes config: %w", err)
 	}
-	
+
 	// Save system configuration
 	systemSettings := SystemSettings{
 		// Note: PVE polling is hardcoded to 10s
@@ -519,11 +525,10 @@ func SaveConfig(cfg *Config) error {
 	if err := globalPersistence.SaveSystemSettings(systemSettings); err != nil {
 		return fmt.Errorf("failed to save system config: %w", err)
 	}
-	
+
 	return nil
 }
 
-
 // Validate checks if the configuration is valid
 func (c *Config) Validate() error {
 	// Validate server settings
@@ -533,13 +538,13 @@ func (c *Config) Validate() error {
 	if c.FrontendPort <= 0 || c.FrontendPort > 65535 {
 		return fmt.Errorf("invalid frontend port: %d", c.FrontendPort)
 	}
-	
+
 	// Validate monitoring settings
 	// Note: PVE polling is hardcoded to 10s
 	if c.ConnectionTimeout < time.Second {
 		return fmt.Errorf("connection timeout must be at least 1 second")
 	}
-	
+
 	// Validate PVE instances
 	for i, pve := range c.PVEInstances {
 		if pve.Host == "" {
@@ -594,12 +599,12 @@ func detectPublicURL(port int) string {
 			}
 		}
 	}
-	
+
 	// Method 2: Try to get the primary network interface IP
 	if ip := getOutboundIP(); ip != "" {
 		return fmt.Sprintf("http://%s:%d", ip, port)
 	}
-	
+
 	// Method 3: Check if running in Docker (check for .dockerenv)
 	if _, err := os.Stat("/.dockerenv"); err == nil {
 		// In Docker, try to get the host IP from default route
@@ -617,7 +622,7 @@ func detectPublicURL(port int) string {
 			}
 		}
 	}
-	
+
 	// Method 4: Get all non-loopback IPs and use the first private one
 	if addrs, err := net.InterfaceAddrs(); err == nil {
 		for _, addr := range addrs {
@@ -625,9 +630,9 @@ func detectPublicURL(port int) string {
 				if ipnet.IP.To4() != nil {
 					ip := ipnet.IP.String()
 					// Prefer private IPs (RFC1918)
-					if strings.HasPrefix(ip, "192.168.") || 
-					   strings.HasPrefix(ip, "10.") || 
-					   strings.HasPrefix(ip, "172.") {
+					if strings.HasPrefix(ip, "192.168.") ||
+						strings.HasPrefix(ip, "10.") ||
+						strings.HasPrefix(ip, "172.") {
 						return fmt.Sprintf("http://%s:%d", ip, port)
 					}
 				}
@@ -642,7 +647,7 @@ func detectPublicURL(port int) string {
 			}
 		}
 	}
-	
+
 	return ""
 }
 
@@ -658,7 +663,7 @@ func getOutboundIP() string {
 		}
 	}
 	defer conn.Close()
-	
+
 	localAddr := conn.LocalAddr().(*net.UDPAddr)
 	return localAddr.IP.String()
-}
\ No newline at end of file
+}
diff --git a/internal/notifications/notifications.go b/internal/notifications/notifications.go
index 018298500..6248b3506 100644
--- a/internal/notifications/notifications.go
+++ b/internal/notifications/notifications.go
@@ -185,6 +185,10 @@ func (n *NotificationManager) GetWebhooks() []WebhookConfig {
 	n.mu.RLock()
 	defer n.mu.RUnlock()
 	
+	if len(n.webhooks) == 0 {
+		return []WebhookConfig{}
+	}
+
 	webhooks := make([]WebhookConfig, len(n.webhooks))
 	copy(webhooks, n.webhooks)
 	return webhooks
diff --git a/scripts/.go-version b/scripts/.go-version
new file mode 100644
index 000000000..9fe83d7e5
--- /dev/null
+++ b/scripts/.go-version
@@ -0,0 +1 @@
+go1.25.1
diff --git a/scripts/dev-hot.sh b/scripts/dev-hot.sh
new file mode 100755
index 000000000..a31e16d29
--- /dev/null
+++ b/scripts/dev-hot.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+FRONTEND_DEV_HOST=${FRONTEND_DEV_HOST:-127.0.0.1}
+FRONTEND_DEV_PORT=${FRONTEND_DEV_PORT:-5173}
+FRONTEND_DEV_SERVER=${FRONTEND_DEV_SERVER:-http://${FRONTEND_DEV_HOST}:${FRONTEND_DEV_PORT}}
+BACKEND_CMD=${BACKEND_CMD:-go run ./cmd/pulse}
+VITE_ARGS=${VITE_ARGS:-}
+
+cleanup() {
+  local exit_code=${1:-$?}
+  trap - EXIT INT TERM
+  if [[ -n ${VITE_PID:-} ]] && kill -0 "$VITE_PID" >/dev/null 2>&1; then
+    kill "$VITE_PID" >/dev/null 2>&1 || true
+  fi
+  if [[ -n ${BACKEND_PID:-} ]] && kill -0 "$BACKEND_PID" >/dev/null 2>&1; then
+    kill "$BACKEND_PID" >/dev/null 2>&1 || true
+  fi
+  wait >/dev/null 2>&1 || true
+  exit "$exit_code"
+}
+
+trap cleanup EXIT INT TERM
+
+export FRONTEND_DEV_SERVER
+
+printf "[dev-hot] Starting Vite dev server at %s\n" "$FRONTEND_DEV_SERVER"
+(
+  cd frontend-modern
+  npm run dev -- --host "$FRONTEND_DEV_HOST" --port "$FRONTEND_DEV_PORT" $VITE_ARGS
+) &
+VITE_PID=$!
+
+# Give Vite a moment to boot up before starting the backend proxy.
+sleep 2
+
+printf "[dev-hot] Starting Pulse backend with FRONTEND_DEV_SERVER=%s\n" "$FRONTEND_DEV_SERVER"
+${BACKEND_CMD} &
+BACKEND_PID=$!
+
+# Wait for either process to exit and propagate the status code.
+wait -n "$VITE_PID" "$BACKEND_PID"
+EXIT_STATUS=$?
+cleanup "$EXIT_STATUS"
diff --git a/scripts/install-go-toolchain.sh b/scripts/install-go-toolchain.sh
new file mode 100755
index 000000000..137366f55
--- /dev/null
+++ b/scripts/install-go-toolchain.sh
@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+VERSION_FILE="${SCRIPT_DIR}/.go-version"
+DEFAULT_VERSION="go1.25.1"
+TARGET_ROOT="/opt/toolchains/go"
+DOWNLOAD_ROOT="https://dl.google.com/go"
+GOPATH_DIR="/var/lib/pulse/go"
+CACHE_DIR="/var/cache/pulse/go-build"
+TMP_DIR="/var/cache/pulse/tmp"
+
+if [[ ! -f "$VERSION_FILE" ]]; then
+  echo "$DEFAULT_VERSION" | sudo tee "$VERSION_FILE" >/dev/null
+fi
+VERSION="$(tr -d '
+
' < "$VERSION_FILE")"
+ARCHIVE="${VERSION}.linux-amd64.tar.gz"
+DOWNLOAD_DIR="${TMPDIR:-/tmp}/go-install"
+ARCHIVE_PATH="$DOWNLOAD_DIR/$ARCHIVE"
+SHA_PATH="$ARCHIVE_PATH.sha256"
+
+mkdir -p "$DOWNLOAD_DIR"
+
+if [[ ! -f "$ARCHIVE_PATH" ]]; then
+  curl -fsSL "$DOWNLOAD_ROOT/$ARCHIVE" -o "$ARCHIVE_PATH"
+fi
+curl -fsSL "$DOWNLOAD_ROOT/$ARCHIVE.sha256" -o "$SHA_PATH"
+
+CHECKSUM="$(tr -d '
+
' < "$SHA_PATH")"
+printf '%s  %s
+' "$CHECKSUM" "$ARCHIVE_PATH" | sha256sum -c -
+
+sudo mkdir -p "$TARGET_ROOT"
+sudo rm -rf "$TARGET_ROOT/$VERSION"
+sudo tar -C "$TARGET_ROOT" -xzf "$ARCHIVE_PATH"
+sudo mv "$TARGET_ROOT/go" "$TARGET_ROOT/$VERSION"
+sudo ln -sfn "$TARGET_ROOT/$VERSION" "$TARGET_ROOT/current"
+sudo ln -sfn /opt/toolchains/go/current /usr/local/go
+
+sudo mkdir -p "$GOPATH_DIR" "$GOPATH_DIR/bin" "$GOPATH_DIR/pkg"
+sudo chown -R pulse:pulse "$GOPATH_DIR"
+
+sudo mkdir -p "$CACHE_DIR" "$TMP_DIR"
+sudo chown -R pulse:pulse "$CACHE_DIR" "$TMP_DIR"
+
+sudo ln -sfn /opt/toolchains/go/current/bin/go /usr/local/bin/go
+sudo ln -sfn /opt/toolchains/go/current/bin/gofmt /usr/local/bin/gofmt