diff --git a/frontend-modern/src/components/Alerts/ResourceTable.tsx b/frontend-modern/src/components/Alerts/ResourceTable.tsx
index 40f51bb..8c691c0 100644
--- a/frontend-modern/src/components/Alerts/ResourceTable.tsx
+++ b/frontend-modern/src/components/Alerts/ResourceTable.tsx
@@ -398,10 +398,10 @@ export function ResourceTable(props: ResourceTableProps) {
       >
         <span
           class={`text-sm ${isDisabledMetric
-              ? 'text-gray-400 dark:text-gray-500 italic'
-              : metricProps.isOverridden
-                ? 'text-gray-900 dark:text-gray-100 font-bold'
-                : 'text-gray-900 dark:text-gray-100'
+            ? 'text-gray-400 dark:text-gray-500 italic'
+            : metricProps.isOverridden
+              ? 'text-gray-900 dark:text-gray-100 font-bold'
+              : 'text-gray-900 dark:text-gray-100'
             }`}
         >
           {displayText}
@@ -483,6 +483,7 @@ export function ResourceTable(props: ResourceTableProps) {
       padding="none"
       class="overflow-hidden border border-gray-200 dark:border-gray-700"
       border={false}
+      tone="glass"
     >
       <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
         <SectionHeader title={props.title} size="sm" />
@@ -591,8 +592,8 @@ export function ResourceTable(props: ResourceTableProps) {
                               }
                             }}
                             class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isOff()
-                                ? 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 italic placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:opacity-60 pointer-events-none'
-                                : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500'
+                              ? 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 italic placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:opacity-60 pointer-events-none'
+                              : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500'
                               }`}
                             title={
                               isOff()
@@ -868,7 +869,7 @@ export function ResourceTable(props: ResourceTableProps) {
 
                           return (
                             <tr
-                              class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
+                              class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors animate-enter ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
                             >
                               {/* Alert toggle column */}
                               <td class="p-1 px-2 text-center align-middle">
@@ -940,8 +941,8 @@ export function ResourceTable(props: ResourceTableProps) {
                                             rel="noopener noreferrer"
                                             onClick={(e) => e.stopPropagation()}
                                             class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
-                                                ? 'text-gray-500 dark:text-gray-500'
-                                                : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
+                                              ? 'text-gray-500 dark:text-gray-500'
+                                              : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
                                               }`}
                                             title={`Open ${resource.displayName || resource.name} web interface`}
                                           >
@@ -1148,8 +1149,8 @@ export function ResourceTable(props: ResourceTableProps) {
                                                   setActiveMetricInput(null);
                                                 }}
                                                 class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
-                                                    ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
-                                                    : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
+                                                  ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
+                                                  : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
                                                   }`}
                                               />
                                             </div>
@@ -1379,7 +1380,7 @@ export function ResourceTable(props: ResourceTableProps) {
 
                       return (
                         <tr
-                          class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
+                          class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors animate-enter ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
                         >
                           {/* Alert toggle column */}
                           <td class="p-1 px-2 text-center align-middle">
@@ -1456,8 +1457,8 @@ export function ResourceTable(props: ResourceTableProps) {
                                       rel="noopener noreferrer"
                                       onClick={(e) => e.stopPropagation()}
                                       class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
-                                          ? 'text-gray-500 dark:text-gray-500'
-                                          : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
+                                        ? 'text-gray-500 dark:text-gray-500'
+                                        : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
                                         }`}
                                       title={`Open ${resource.displayName || resource.name} web interface`}
                                     >
@@ -1600,8 +1601,8 @@ export function ResourceTable(props: ResourceTableProps) {
                                             setActiveMetricInput(null);
                                           }}
                                           class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
-                                              ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
-                                              : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
+                                            ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
+                                            : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
                                             }`}
                                         />
                                       </div>
diff --git a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
index d213da8..38fb805 100644
--- a/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
+++ b/frontend-modern/src/components/Alerts/ThresholdsTable.tsx
@@ -1,6 +1,7 @@
 import { createSignal, createMemo, Show, For, onMount, onCleanup, createEffect } from 'solid-js';
 import { useNavigate, useLocation } from '@solidjs/router';
 import Toggle from '@/components/shared/Toggle';
+import { Card } from '@/components/shared/Card';
 
 // Workaround for eslint false-positive when `For` is used only in JSX
 const __ensureForUsage = For;
@@ -198,37 +199,37 @@ interface ThresholdsTableProps {
   setDockerDefaults: (
     value:
       | {
-          cpu: number;
-          memory: number;
-          disk: number;
-          restartCount: number;
-          restartWindow: number;
-          memoryWarnPct: number;
-          memoryCriticalPct: number;
-          serviceWarnGapPercent: number;
-          serviceCriticalGapPercent: number;
-        }
+        cpu: number;
+        memory: number;
+        disk: number;
+        restartCount: number;
+        restartWindow: number;
+        memoryWarnPct: number;
+        memoryCriticalPct: number;
+        serviceWarnGapPercent: number;
+        serviceCriticalGapPercent: number;
+      }
       | ((prev: {
-          cpu: number;
-          memory: number;
-          disk: number;
-          restartCount: number;
-          restartWindow: number;
-          memoryWarnPct: number;
-          memoryCriticalPct: number;
-          serviceWarnGapPercent: number;
-          serviceCriticalGapPercent: number;
-        }) => {
-          cpu: number;
-          memory: number;
-          disk: number;
-          restartCount: number;
-          restartWindow: number;
-          memoryWarnPct: number;
-          memoryCriticalPct: number;
-          serviceWarnGapPercent: number;
-          serviceCriticalGapPercent: number;
-        }),
+        cpu: number;
+        memory: number;
+        disk: number;
+        restartCount: number;
+        restartWindow: number;
+        memoryWarnPct: number;
+        memoryCriticalPct: number;
+        serviceWarnGapPercent: number;
+        serviceCriticalGapPercent: number;
+      }) => {
+        cpu: number;
+        memory: number;
+        disk: number;
+        restartCount: number;
+        restartWindow: number;
+        memoryWarnPct: number;
+        memoryCriticalPct: number;
+        serviceWarnGapPercent: number;
+        serviceCriticalGapPercent: number;
+      }),
   ) => void;
   dockerIgnoredPrefixes: () => string[];
   setDockerIgnoredPrefixes: (value: string[] | ((prev: string[]) => string[])) => void;
@@ -309,9 +310,9 @@ export function ThresholdsTable(props: ThresholdsTableProps) {
 
   const [searchTerm, setSearchTerm] = createSignal('');
   const [editingId, setEditingId] = createSignal<string | null>(null);
-const [editingThresholds, setEditingThresholds] = createSignal<
-  Record<string, number | undefined>
->({});
+  const [editingThresholds, setEditingThresholds] = createSignal<
+    Record<string, number | undefined>
+  >({});
   const [editingNote, setEditingNote] = createSignal('');
   const [activeTab, setActiveTab] = createSignal<'proxmox' | 'pmg' | 'hosts' | 'docker'>('proxmox');
   let searchInputRef: HTMLInputElement | undefined;
@@ -640,7 +641,7 @@ const [editingThresholds, setEditingThresholds] = createSignal<
     if (search) {
       return nodes.filter((n) => n.name.toLowerCase().includes(search));
     }
-  return nodes;
+    return nodes;
   }, []);
 
   const hostAgentsWithOverrides = createMemo<Resource[]>((prev = []) => {
@@ -1103,13 +1104,13 @@ const [editingThresholds, setEditingThresholds] = createSignal<
     const differs =
       current.enabled !== factory.enabled ||
       (current.warningDays ?? DEFAULT_SNAPSHOT_WARNING) !==
-        (factory.warningDays ?? DEFAULT_SNAPSHOT_WARNING) ||
+      (factory.warningDays ?? DEFAULT_SNAPSHOT_WARNING) ||
       (current.criticalDays ?? DEFAULT_SNAPSHOT_CRITICAL) !==
-        (factory.criticalDays ?? DEFAULT_SNAPSHOT_CRITICAL) ||
+      (factory.criticalDays ?? DEFAULT_SNAPSHOT_CRITICAL) ||
       (current.warningSizeGiB ?? DEFAULT_SNAPSHOT_WARNING_SIZE) !==
-        (factory.warningSizeGiB ?? DEFAULT_SNAPSHOT_WARNING_SIZE) ||
+      (factory.warningSizeGiB ?? DEFAULT_SNAPSHOT_WARNING_SIZE) ||
       (current.criticalSizeGiB ?? DEFAULT_SNAPSHOT_CRITICAL_SIZE) !==
-        (factory.criticalSizeGiB ?? DEFAULT_SNAPSHOT_CRITICAL_SIZE);
+      (factory.criticalSizeGiB ?? DEFAULT_SNAPSHOT_CRITICAL_SIZE);
     return differs ? 1 : 0;
   });
 
@@ -1118,9 +1119,9 @@ const [editingThresholds, setEditingThresholds] = createSignal<
     const backupFactory = backupFactoryConfig();
     return backupCurrent.enabled !== backupFactory.enabled ||
       (backupCurrent.warningDays ?? DEFAULT_BACKUP_WARNING) !==
-        (backupFactory.warningDays ?? DEFAULT_BACKUP_WARNING) ||
+      (backupFactory.warningDays ?? DEFAULT_BACKUP_WARNING) ||
       (backupCurrent.criticalDays ?? DEFAULT_BACKUP_CRITICAL) !==
-        (backupFactory.criticalDays ?? DEFAULT_BACKUP_CRITICAL)
+      (backupFactory.criticalDays ?? DEFAULT_BACKUP_CRITICAL)
       ? 1
       : 0;
   });
@@ -1179,11 +1180,11 @@ const [editingThresholds, setEditingThresholds] = createSignal<
 
     const filteredGuests = search
       ? guests.filter(
-          (g) =>
-            g.name.toLowerCase().includes(search) ||
-            g.vmid?.toString().includes(search) ||
-            g.node?.toLowerCase().includes(search),
-        )
+        (g) =>
+          g.name.toLowerCase().includes(search) ||
+          g.vmid?.toString().includes(search) ||
+          g.node?.toLowerCase().includes(search),
+      )
       : guests;
 
     // Group by node
@@ -1631,9 +1632,9 @@ const [editingThresholds, setEditingThresholds] = createSignal<
 
     const hasStateOnlyOverride = Boolean(
       resource.disabled ||
-        resource.disableConnectivity ||
-        resource.poweredOffSeverity !== undefined ||
-        noteForOverride !== undefined,
+      resource.disableConnectivity ||
+      resource.poweredOffSeverity !== undefined ||
+      noteForOverride !== undefined,
     );
 
     // If no threshold overrides or state flags remain, remove the override entirely
@@ -1739,11 +1740,11 @@ const [editingThresholds, setEditingThresholds] = createSignal<
     setEditingNote('');
   };
 
-const cancelEdit = () => {
-  setEditingId(null);
-  setEditingThresholds({});
-  setEditingNote('');
-};
+  const cancelEdit = () => {
+    setEditingId(null);
+    setEditingThresholds({});
+    setEditingNote('');
+  };
 
   const updateMetricDelay = (
     typeKey: 'guest' | 'node' | 'storage' | 'pbs',
@@ -2217,44 +2218,40 @@ const cancelEdit = () => {
           <button
             type="button"
             onClick={() => handleTabClick('proxmox')}
-            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${
-              activeTab() === 'proxmox'
+            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${activeTab() === 'proxmox'
                 ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                 : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-            }`}
+              }`}
           >
             Proxmox / PBS
           </button>
           <button
             type="button"
             onClick={() => handleTabClick('pmg')}
-            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${
-              activeTab() === 'pmg'
+            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${activeTab() === 'pmg'
                 ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                 : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-            }`}
+              }`}
           >
             Mail Gateway
           </button>
           <button
             type="button"
             onClick={() => handleTabClick('hosts')}
-            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${
-              activeTab() === 'hosts'
+            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${activeTab() === 'hosts'
                 ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                 : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-            }`}
+              }`}
           >
             Host Agents
           </button>
           <button
             type="button"
             onClick={() => handleTabClick('docker')}
-            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${
-              activeTab() === 'docker'
+            class={`py-3 px-1 border-b-2 font-medium text-sm transition-colors cursor-pointer ${activeTab() === 'docker'
                 ? 'border-blue-500 text-blue-600 dark:text-blue-400'
                 : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300'
-            }`}
+              }`}
           >
             Containers
           </button>
@@ -2360,9 +2357,9 @@ const cancelEdit = () => {
                 factoryDefaults={
                   props.factoryNodeDefaults
                     ? {
-                        cpu: props.factoryNodeDefaults.cpu,
-                        memory: props.factoryNodeDefaults.memory,
-                      }
+                      cpu: props.factoryNodeDefaults.cpu,
+                      memory: props.factoryNodeDefaults.memory,
+                    }
                     : undefined
                 }
                 onResetDefaults={props.resetNodeDefaults}
@@ -2745,7 +2742,7 @@ const cancelEdit = () => {
         </Show>
 
         <Show when={activeTab() === 'docker'}>
-          <div class="mb-6 rounded-lg border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+          <Card padding="md" tone="glass" class="mb-6">
             <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div>
                 <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">
@@ -2763,26 +2760,26 @@ const cancelEdit = () => {
                   onClick={handleResetDockerIgnored}
                 >
                   Reset
-        </button>
-      </Show>
-    </div>
-    <textarea
-      value={dockerIgnoredInput()}
-      onInput={(event) => handleDockerIgnoredChange(event.currentTarget.value)}
-      onKeyDown={(event) => {
-        // Ensure Enter key works in textarea for creating new lines
-        if (event.key === 'Enter') {
-          // Don't prevent default - allow the newline to be inserted
-          event.stopPropagation();
-        }
-      }}
-      placeholder="runner-"
-      rows={4}
-      class="mt-4 w-full rounded-md border border-gray-300 bg-white p-3 text-sm text-gray-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-sky-400 dark:focus:ring-sky-600/40"
-    />
-  </div>
+                </button>
+              </Show>
+            </div>
+            <textarea
+              value={dockerIgnoredInput()}
+              onInput={(event) => handleDockerIgnoredChange(event.currentTarget.value)}
+              onKeyDown={(event) => {
+                // Ensure Enter key works in textarea for creating new lines
+                if (event.key === 'Enter') {
+                  // Don't prevent default - allow the newline to be inserted
+                  event.stopPropagation();
+                }
+              }}
+              placeholder="runner-"
+              rows={4}
+              class="mt-4 w-full rounded-md border border-gray-300 bg-white p-3 text-sm text-gray-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:focus:border-sky-400 dark:focus:ring-sky-600/40"
+            />
+          </Card>
 
-          <div class="mb-6 rounded-lg border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
+          <Card padding="md" tone="glass" class="mb-6">
             <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
               <div>
                 <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Swarm service alerts</h3>
@@ -2865,7 +2862,7 @@ const cancelEdit = () => {
                 {serviceGapValidationMessage()}
               </p>
             )}
-          </div>
+          </Card>
 
           <Show when={hasSection('dockerHosts')}>
             <div ref={registerSection('dockerHosts')} class="scroll-mt-24">
diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index a84dfdb..8e1022d 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -1864,7 +1864,7 @@ const UnifiedBackups: Component = () => {
         />
 
         {/* Table */}
-        <Card padding="none" class="mb-4 overflow-hidden">
+        <Card padding="none" tone="glass" 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; }
@@ -2138,7 +2138,7 @@ const UnifiedBackups: Component = () => {
                           </tr>
                           <For each={group.items}>
                             {(item) => (
-                              <tr class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                              <tr class="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/30 animate-enter">
                                 <td class="p-0.5 pl-5 pr-1.5 text-sm align-middle">{item.vmid}</td>
                                 <td class="p-0.5 px-1.5 align-middle">
                                   <span
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index ef72430..b7f1fee 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -929,165 +929,165 @@ export function Dashboard(props: DashboardProps) {
       {/* Table View */}
       <Show when={connected() && initialDataReceived() && filteredGuests().length > 0}>
         <ComponentErrorBoundary name="Guest Table">
-          <Card padding="none" class="mb-4 bg-white dark:bg-gray-800">
+          <Card padding="none" tone="glass" class="mb-4">
             <div class="overflow-x-auto">
-            {/* Desktop Header */}
-            <div
-              class="grid border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 text-[11px] sm:text-xs font-medium uppercase tracking-wider sticky top-0 z-20 min-w-[520px] md:min-w-0"
-              style={{ 'grid-template-columns': headerGridTemplate() }}
-            >
-              {/* Name Header */}
+              {/* Desktop Header */}
               <div
-                class="pl-4 pr-2 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center whitespace-nowrap"
-                onClick={() => handleSort('name')}
+                class="grid border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 text-[11px] sm:text-xs font-medium uppercase tracking-wider sticky top-0 z-20 min-w-[520px] md:min-w-0"
+                style={{ 'grid-template-columns': headerGridTemplate() }}
               >
-                Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                {/* Name Header */}
+                <div
+                  class="pl-4 pr-2 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center whitespace-nowrap"
+                  onClick={() => handleSort('name')}
+                >
+                  Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </div>
+
+                {/* Type */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('type')}
+                  title="Type"
+                >
+                  <span class="hidden xl:inline">Type</span>
+                  <span class="xl:hidden">T</span>
+                  {sortKey() === 'type' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
+                {/* VMID */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('vmid')}
+                  title="VMID"
+                >
+                  <span class="hidden xl:inline">VMID</span>
+                  <span class="xl:hidden">ID</span>
+                  {sortKey() === 'vmid' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
+                {/* Uptime */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('uptime')}
+                  title="Uptime"
+                >
+                  <span class="hidden xl:inline">Uptime</span>
+                  <span class="xl:hidden">Up</span>
+                  {sortKey() === 'uptime' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
+                {/* CPU */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('cpu')}
+                >
+                  CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </div>
+                {/* Memory */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('memory')}
+                  title="Memory"
+                >
+                  <span class="hidden xl:inline">Memory</span>
+                  <span class="xl:hidden">Mem</span>
+                  {sortKey() === 'memory' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
+                {/* Disk */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('disk')}
+                >
+                  Disk {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </div>
+                {/* Disk Read */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('diskRead')}
+                  title="Disk Read"
+                >
+                  <span class="hidden xl:inline">Disk Read</span>
+                  <span class="xl:hidden">D Rd</span>
+                  {sortKey() === 'diskRead' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
+                {/* Disk Write */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('diskWrite')}
+                  title="Disk Write"
+                >
+                  <span class="hidden xl:inline">Disk Write</span>
+                  <span class="xl:hidden">D Wr</span>
+                  {sortKey() === 'diskWrite' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
+                {/* Net In */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('networkIn')}
+                  title="Net In"
+                >
+                  <span class="hidden xl:inline">Net In</span>
+                  <span class="xl:hidden">N In</span>
+                  {sortKey() === 'networkIn' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
+                {/* Net Out */}
+                <div
+                  class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
+                  onClick={() => handleSort('networkOut')}
+                  title="Net Out"
+                >
+                  <span class="hidden xl:inline">Net Out</span>
+                  <span class="xl:hidden">N Out</span>
+                  {sortKey() === 'networkOut' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+                </div>
               </div>
 
-              {/* Type */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('type')}
-                title="Type"
-              >
-                <span class="hidden xl:inline">Type</span>
-                <span class="xl:hidden">T</span>
-                {sortKey() === 'type' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
+              {/* Guest List */}
+              <div class="divide-y divide-gray-200 dark:divide-gray-700 min-w-[520px] md:min-w-0">
+                <For
+                  each={Object.entries(groupedGuests()).sort(([instanceIdA], [instanceIdB]) => {
+                    const nodeA = nodeByInstance()[instanceIdA];
+                    const nodeB = nodeByInstance()[instanceIdB];
+                    const labelA = nodeA ? getNodeDisplayName(nodeA) : instanceIdA;
+                    const labelB = nodeB ? getNodeDisplayName(nodeB) : instanceIdB;
+                    return labelA.localeCompare(labelB) || instanceIdA.localeCompare(instanceIdB);
+                  })}
+                  fallback={<></>}
+                >
+                  {([instanceId, guests]) => {
+                    const node = nodeByInstance()[instanceId];
+                    return (
+                      <>
+                        <Show when={node && groupingMode() === 'grouped'}>
+                          <NodeGroupHeader node={node!} />
+                        </Show>
+                        <For each={guests} fallback={<></>}>
+                          {(guest) => {
+                            const guestId = guest.id || `${guest.instance}-${guest.vmid}`;
+                            const metadata =
+                              guestMetadata()[guestId] ||
+                              guestMetadata()[`${guest.node}-${guest.vmid}`];
+                            const parentNode = node ?? resolveParentNode(guest);
+                            const parentNodeOnline = parentNode ? isNodeOnline(parentNode) : true;
+                            return (
+                              <ComponentErrorBoundary name="GuestRow">
+                                <GuestRow
+                                  guest={guest}
+                                  alertStyles={getAlertStyles(guestId, activeAlerts, alertsEnabled())}
+                                  customUrl={metadata?.customUrl}
+                                  onTagClick={handleTagClick}
+                                  activeSearch={search()}
+                                  parentNodeOnline={parentNodeOnline}
+                                  onCustomUrlUpdate={handleCustomUrlUpdate}
+                                  isGroupedView={groupingMode() === 'grouped'}
+                                />
+                              </ComponentErrorBoundary>
+                            );
+                          }}
+                        </For>
+                      </>
+                    );
+                  }}
+                </For>
               </div>
-              {/* VMID */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('vmid')}
-                title="VMID"
-              >
-                <span class="hidden xl:inline">VMID</span>
-                <span class="xl:hidden">ID</span>
-                {sortKey() === 'vmid' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
-              </div>
-              {/* Uptime */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('uptime')}
-                title="Uptime"
-              >
-                <span class="hidden xl:inline">Uptime</span>
-                <span class="xl:hidden">Up</span>
-                {sortKey() === 'uptime' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
-              </div>
-              {/* CPU */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('cpu')}
-              >
-                CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
-              </div>
-              {/* Memory */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('memory')}
-                title="Memory"
-              >
-                <span class="hidden xl:inline">Memory</span>
-                <span class="xl:hidden">Mem</span>
-                {sortKey() === 'memory' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
-              </div>
-              {/* Disk */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('disk')}
-              >
-                Disk {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
-              </div>
-              {/* Disk Read */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('diskRead')}
-                title="Disk Read"
-              >
-                <span class="hidden xl:inline">Disk Read</span>
-                <span class="xl:hidden">D Rd</span>
-                {sortKey() === 'diskRead' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
-              </div>
-              {/* Disk Write */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('diskWrite')}
-                title="Disk Write"
-              >
-                <span class="hidden xl:inline">Disk Write</span>
-                <span class="xl:hidden">D Wr</span>
-                {sortKey() === 'diskWrite' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
-              </div>
-              {/* Net In */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('networkIn')}
-                title="Net In"
-              >
-                <span class="hidden xl:inline">Net In</span>
-                <span class="xl:hidden">N In</span>
-                {sortKey() === 'networkIn' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
-              </div>
-              {/* Net Out */}
-              <div
-                class="px-1 py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 flex items-center justify-center whitespace-nowrap"
-                onClick={() => handleSort('networkOut')}
-                title="Net Out"
-              >
-                <span class="hidden xl:inline">Net Out</span>
-                <span class="xl:hidden">N Out</span>
-                {sortKey() === 'networkOut' && (sortDirection() === 'asc' ? ' ▲' : ' ▼')}
-              </div>
-            </div>
-
-            {/* Guest List */}
-            <div class="divide-y divide-gray-200 dark:divide-gray-700 min-w-[520px] md:min-w-0">
-              <For
-                each={Object.entries(groupedGuests()).sort(([instanceIdA], [instanceIdB]) => {
-                  const nodeA = nodeByInstance()[instanceIdA];
-                  const nodeB = nodeByInstance()[instanceIdB];
-                  const labelA = nodeA ? getNodeDisplayName(nodeA) : instanceIdA;
-                  const labelB = nodeB ? getNodeDisplayName(nodeB) : instanceIdB;
-                  return labelA.localeCompare(labelB) || instanceIdA.localeCompare(instanceIdB);
-                })}
-                fallback={<></>}
-              >
-                {([instanceId, guests]) => {
-                  const node = nodeByInstance()[instanceId];
-                  return (
-                    <>
-                      <Show when={node && groupingMode() === 'grouped'}>
-                        <NodeGroupHeader node={node!} />
-                      </Show>
-                      <For each={guests} fallback={<></>}>
-                        {(guest) => {
-                          const guestId = guest.id || `${guest.instance}-${guest.vmid}`;
-                          const metadata =
-                            guestMetadata()[guestId] ||
-                            guestMetadata()[`${guest.node}-${guest.vmid}`];
-                          const parentNode = node ?? resolveParentNode(guest);
-                          const parentNodeOnline = parentNode ? isNodeOnline(parentNode) : true;
-                          return (
-                            <ComponentErrorBoundary name="GuestRow">
-                              <GuestRow
-                                guest={guest}
-                                alertStyles={getAlertStyles(guestId, activeAlerts, alertsEnabled())}
-                                customUrl={metadata?.customUrl}
-                                onTagClick={handleTagClick}
-                                activeSearch={search()}
-                                parentNodeOnline={parentNodeOnline}
-                                onCustomUrlUpdate={handleCustomUrlUpdate}
-                                isGroupedView={groupingMode() === 'grouped'}
-                              />
-                            </ComponentErrorBoundary>
-                          );
-                        }}
-                      </For>
-                    </>
-                  );
-                }}
-              </For>
-            </div>
             </div>
           </Card>
         </ComponentErrorBoundary>
diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index cd879e0..dacddf5 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -455,7 +455,7 @@ export function GuestRow(props: GuestRowProps) {
   });
 
   const rowClass = createMemo(() => {
-    const base = 'transition-all duration-200 relative';
+    const base = 'transition-all duration-200 relative animate-enter';
     const hover = 'hover:shadow-sm';
     const alertBg = hasUnacknowledgedAlert()
       ? props.alertStyles?.severity === 'critical'
diff --git a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
index 3b6110e..0b43e9f 100644
--- a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
@@ -142,7 +142,7 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
   };
 
   return (
-    <Card padding="none" class="mb-4 overflow-hidden">
+    <Card padding="none" tone="glass" class="mb-4 overflow-hidden">
       <ScrollableTable minWidth="300px" persistKey="docker-host-summary">
         <table class="w-full table-fixed border-collapse sm:whitespace-nowrap">
           <thead>
@@ -227,7 +227,7 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
                 };
 
                 const rowClass = () => {
-                  const baseHover = 'cursor-pointer transition-all duration-200 relative hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:shadow-sm';
+                  const baseHover = 'cursor-pointer transition-all duration-200 relative hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:shadow-sm animate-enter';
 
                   if (selected) {
                     return 'cursor-pointer transition-all duration-200 relative bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:shadow-sm z-10';
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index 129c7f6..15f9c1f 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -1252,7 +1252,7 @@ const DockerContainerRow: Component<{
   return (
     <>
       <div
-        class={`grid items-center transition-all duration-200 ${hasDrawerContent() ? 'cursor-pointer' : ''} ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'} ${!isRunning() ? 'opacity-60' : ''}`}
+        class={`grid items-center transition-all duration-200 animate-enter ${hasDrawerContent() ? 'cursor-pointer' : ''} ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'} ${!isRunning() ? 'opacity-60' : ''}`}
         style={{ 'grid-template-columns': props.gridTemplate() }}
         onClick={toggle}
         aria-expanded={expanded()}
@@ -1949,7 +1949,7 @@ const DockerServiceRow: Component<{
   return (
     <>
       <div
-        class={`grid items-center transition-all duration-200 ${hasTasks() ? 'cursor-pointer' : ''} ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'} ${!isHealthy() ? 'opacity-60' : ''}`}
+        class={`grid items-center transition-all duration-200 animate-enter ${hasTasks() ? 'cursor-pointer' : ''} ${expanded() ? 'bg-gray-50 dark:bg-gray-800/40' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'} ${!isHealthy() ? 'opacity-60' : ''}`}
         style={{ 'grid-template-columns': props.gridTemplate() }}
         onClick={toggle}
         aria-expanded={expanded()}
@@ -2407,7 +2407,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
           </Card>
         }
       >
-        <Card padding="none" class="overflow-hidden">
+        <Card padding="none" tone="glass" class="overflow-hidden">
           <div class="overflow-x-auto">
             {/* Header Row */}
             <div
diff --git a/frontend-modern/src/components/Hosts/HostsOverview.tsx b/frontend-modern/src/components/Hosts/HostsOverview.tsx
index fa698c8..8886b9d 100644
--- a/frontend-modern/src/components/Hosts/HostsOverview.tsx
+++ b/frontend-modern/src/components/Hosts/HostsOverview.tsx
@@ -170,7 +170,7 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
                   </Card>
                 }
               >
-                <Card padding="none" class="overflow-hidden">
+                <Card padding="none" tone="glass" class="overflow-hidden">
                   <ScrollableTable>
                     <table class="w-full border-collapse">
                       <thead>
@@ -243,7 +243,7 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
                             });
 
                             const rowClass = () => {
-                              const base = 'border-b border-gray-200 dark:border-gray-700 transition-all duration-200';
+                              const base = 'border-b border-gray-200 dark:border-gray-700 transition-all duration-200 animate-enter';
                               const hover = 'hover:bg-gray-50 dark:hover:bg-gray-800/50';
                               const clickable = hasDrawerContent() ? 'cursor-pointer' : '';
                               const expanded = drawerOpen() ? 'bg-gray-50 dark:bg-gray-800/40' : '';
diff --git a/frontend-modern/src/components/PMG/MailGateway.tsx b/frontend-modern/src/components/PMG/MailGateway.tsx
index d1d74c8..f497343 100644
--- a/frontend-modern/src/components/PMG/MailGateway.tsx
+++ b/frontend-modern/src/components/PMG/MailGateway.tsx
@@ -97,7 +97,7 @@ const MailGateway: Component = () => {
             const rblPct = (rbl / Math.max(inbound, 1)) * 100;
 
             return (
-              <div class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden">
+              <Card padding="none" tone="glass" class="overflow-hidden">
                 {/* Instance Header Strip */}
                 <div class="sticky top-0 z-10 flex items-center justify-between px-3 py-2 bg-gray-50 dark:bg-gray-800/40 border-b border-gray-200 dark:border-gray-700">
                   <div class="flex items-center gap-3">
@@ -133,14 +133,14 @@ const MailGateway: Component = () => {
                         </div>
                         <table class="w-full text-xs">
                           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs font-semibold text-gray-900 dark:text-gray-100">{formatNum(total)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">{formatDec(total / 24)}/hr</div>
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Total processed</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(inbound)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -149,7 +149,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Inbound</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(outbound)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -158,7 +158,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Outbound</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs font-medium text-orange-600 dark:text-orange-400">{formatNum(spam)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -167,7 +167,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Spam caught</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs font-medium text-red-600 dark:text-red-400">{formatNum(virus)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -189,7 +189,7 @@ const MailGateway: Component = () => {
                         </div>
                         <table class="w-full text-xs">
                           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatDec(bytesIn / 1024 / 1024)} MB</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -198,7 +198,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Inbound bytes</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatDec(bytesOut / 1024 / 1024)} MB</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -223,7 +223,7 @@ const MailGateway: Component = () => {
                         </div>
                         <table class="w-full text-xs">
                           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs font-medium text-orange-600 dark:text-orange-400">{formatNum(qSpam)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -232,7 +232,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Spam quarantined</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs font-medium text-red-600 dark:text-red-400">{formatNum(qVirus)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -241,7 +241,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Virus quarantined</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs font-medium text-yellow-600 dark:text-yellow-400">{formatNum(qAttachment)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -250,7 +250,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Attachments blocked</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(qBlacklist)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -259,7 +259,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Blacklisted</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs font-semibold text-gray-900 dark:text-gray-100">{formatNum(qTotal)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -315,7 +315,7 @@ const MailGateway: Component = () => {
                         </div>
                         <table class="w-full text-xs">
                           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(bouncesIn)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -324,7 +324,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Bounces inbound</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(bouncesOut)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -333,7 +333,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Bounces outbound</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(rbl)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -342,7 +342,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">RBL rejects</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(pregreet)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -351,7 +351,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Pregreet rejects</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(greylist)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -360,7 +360,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Greylisted</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">{formatNum(junk)}</div>
                                 <div class="text-[11px] text-gray-500 dark:text-gray-400">
@@ -369,7 +369,7 @@ const MailGateway: Component = () => {
                               </td>
                               <td class="px-2 py-1.5 text-[11px] text-gray-500 dark:text-gray-400">Junk mail</td>
                             </tr>
-                            <tr>
+                            <tr class="animate-enter">
                               <td class="px-2 py-1.5">
                                 <div class="text-xs text-gray-900 dark:text-gray-100">
                                   {pmg.mailStats?.averageProcessTimeMs ? formatDec(pmg.mailStats.averageProcessTimeMs / 1000, 2) : '—'} s
@@ -421,7 +421,7 @@ const MailGateway: Component = () => {
                                 const oldestClass = oldestAge > 1800 ? 'text-amber-600 dark:text-amber-400' : 'text-gray-700 dark:text-gray-300';
 
                                 return (
-                                  <tr>
+                                  <tr class="animate-enter">
                                     <td class="px-2 py-1.5 text-xs font-medium text-gray-900 dark:text-gray-100 truncate max-w-[150px]">{node.name}</td>
                                     <td class="px-2 py-1.5 text-xs text-gray-700 dark:text-gray-300 capitalize">{node.role || '—'}</td>
                                     <td class="px-2 py-1.5">
@@ -463,7 +463,7 @@ const MailGateway: Component = () => {
                     </div>
                   </Show>
                 </div>
-              </div>
+              </Card>
             );
           }}
         </For>
diff --git a/frontend-modern/src/components/Replication/Replication.tsx b/frontend-modern/src/components/Replication/Replication.tsx
index fe7790c..1ef362e 100644
--- a/frontend-modern/src/components/Replication/Replication.tsx
+++ b/frontend-modern/src/components/Replication/Replication.tsx
@@ -101,7 +101,7 @@ const Replication: Component = () => {
             </Card>
           }
         >
-          <Card padding="none">
+          <Card padding="none" tone="glass">
             <div class="overflow-x-auto">
               <table class="min-w-[1000px] w-full divide-y divide-gray-200 dark:divide-gray-700">
                 <thead class="bg-gray-50 dark:bg-gray-900/40">
@@ -121,7 +121,7 @@ const Replication: Component = () => {
                     {(job) => {
                       const badge = getStatusBadge(job);
                       return (
-                        <tr class="hover:bg-gray-50/80 dark:hover:bg-gray-900/40 transition-colors">
+                        <tr class="hover:bg-gray-50/80 dark:hover:bg-gray-900/40 transition-colors animate-enter">
                           <td class="px-4 py-3">
                             <div class="font-medium text-gray-900 dark:text-gray-100 truncate max-w-[200px]">
                               {job.guestName || `VM ${job.guestId ?? ''}`}
diff --git a/frontend-modern/src/components/Settings/APITokenManager.tsx b/frontend-modern/src/components/Settings/APITokenManager.tsx
index f6360ce..da835b9 100644
--- a/frontend-modern/src/components/Settings/APITokenManager.tsx
+++ b/frontend-modern/src/components/Settings/APITokenManager.tsx
@@ -122,26 +122,26 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
       label: 'Host agent',
       scopes: [HOST_AGENT_SCOPE],
       description: 'Allow pulse-host-agent to submit OS, CPU, and disk metrics.',
-  },
-  {
-    label: 'Container report',
-    scopes: [DOCKER_REPORT_SCOPE],
-    description: 'Permits container agents (Docker or Podman) to stream host and container telemetry only.',
-  },
-  {
-    label: 'Container manage',
-    scopes: [DOCKER_REPORT_SCOPE, DOCKER_MANAGE_SCOPE],
-    description: 'Extends container reporting with lifecycle actions (restart, stop, etc.).',
-  },
-  {
-    label: 'Settings read',
-    scopes: [SETTINGS_READ_SCOPE],
-    description: 'Read configuration snapshots and diagnostics without modifying anything.',
-  },
-  {
-    label: 'Settings admin',
-    scopes: [SETTINGS_READ_SCOPE, SETTINGS_WRITE_SCOPE],
-    description: 'Full settings read/write – equivalent to automation with admin privileges.',
+    },
+    {
+      label: 'Container report',
+      scopes: [DOCKER_REPORT_SCOPE],
+      description: 'Permits container agents (Docker or Podman) to stream host and container telemetry only.',
+    },
+    {
+      label: 'Container manage',
+      scopes: [DOCKER_REPORT_SCOPE, DOCKER_MANAGE_SCOPE],
+      description: 'Extends container reporting with lifecycle actions (restart, stop, etc.).',
+    },
+    {
+      label: 'Settings read',
+      scopes: [SETTINGS_READ_SCOPE],
+      description: 'Read configuration snapshots and diagnostics without modifying anything.',
+    },
+    {
+      label: 'Settings admin',
+      scopes: [SETTINGS_READ_SCOPE, SETTINGS_WRITE_SCOPE],
+      description: 'Full settings read/write – equivalent to automation with admin privileges.',
     },
   ];
 
@@ -421,36 +421,32 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               </p>
             </div>
             <div
-              class={`rounded-lg border p-4 text-sm shadow-sm ${
-                hasWildcardTokens()
+              class={`rounded-lg border p-4 text-sm shadow-sm ${hasWildcardTokens()
                   ? 'border-amber-300/80 bg-amber-50/80 text-amber-900 dark:border-amber-700/70 dark:bg-amber-900/20 dark:text-amber-100'
                   : 'border-gray-200/70 bg-white/70 text-gray-700 dark:border-gray-700/70 dark:bg-gray-900/40 dark:text-gray-300'
-              }`}
+                }`}
             >
               <div
-                class={`text-[0.7rem] font-semibold uppercase tracking-wide ${
-                  hasWildcardTokens()
+                class={`text-[0.7rem] font-semibold uppercase tracking-wide ${hasWildcardTokens()
                     ? 'text-amber-700 dark:text-amber-300'
                     : 'text-gray-500 dark:text-gray-400'
-                }`}
+                  }`}
               >
                 Full access tokens
               </div>
               <div
-                class={`mt-1 text-2xl font-semibold ${
-                  hasWildcardTokens()
+                class={`mt-1 text-2xl font-semibold ${hasWildcardTokens()
                     ? 'text-amber-800 dark:text-amber-100'
                     : 'text-gray-900 dark:text-gray-100'
-                }`}
+                  }`}
               >
                 {wildcardCount()}
               </div>
               <p
-                class={`mt-1 text-xs ${
-                  hasWildcardTokens()
+                class={`mt-1 text-xs ${hasWildcardTokens()
                     ? 'text-amber-700 dark:text-amber-200'
                     : 'text-gray-500 dark:text-gray-400'
-                }`}
+                  }`}
               >
                 {hasWildcardTokens()
                   ? 'Legacy wildcard tokens – rotate into scoped presets when possible.'
@@ -517,7 +513,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
           </Card>
         }
       >
-        <Card padding="none" class="overflow-hidden border border-gray-200 dark:border-gray-700">
+        <Card padding="none" tone="glass" class="overflow-hidden">
           <div class="flex flex-wrap items-center justify-between gap-3 border-b border-gray-200 bg-gray-50/60 px-5 py-4 dark:border-gray-700 dark:bg-gray-900/40">
             <div>
               <h4 class="text-sm font-semibold text-gray-800 dark:text-gray-100">Token inventory</h4>
@@ -579,18 +575,17 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                     const scopeBadges = rawScopes.includes('*')
                       ? [{ value: '*', label: 'Full' }]
                       : rawScopes.map((scope) => ({
-                          value: scope,
-                          label: API_SCOPE_LABELS[scope] ?? scope,
-                        }));
+                        value: scope,
+                        label: API_SCOPE_LABELS[scope] ?? scope,
+                      }));
                     const rowIsWildcard = scopeBadges.some((scope) => scope.value === '*');
 
                     return (
                       <tr
-                        class={`transition-colors ${
-                          rowIsWildcard
+                        class={`transition-colors animate-enter ${rowIsWildcard
                             ? 'bg-amber-50/50 dark:bg-amber-900/10'
                             : 'bg-white dark:bg-gray-900/10'
-                        } hover:bg-blue-50/40 dark:hover:bg-gray-800/50`}
+                          } hover:bg-blue-50/40 dark:hover:bg-gray-800/50`}
                       >
                         <td class="whitespace-nowrap px-5 py-3 font-medium text-gray-900 dark:text-gray-100">
                           {token.name || 'Untitled'}
@@ -605,11 +600,10 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                                 const isWildcard = scope.value === '*';
                                 return (
                                   <span
-                                    class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${
-                                      isWildcard
+                                    class={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${isWildcard
                                         ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
                                         : 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300'
-                                    }`}
+                                      }`}
                                     title={scope.value}
                                   >
                                     {scope.label}
@@ -667,9 +661,8 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
 
       <Card
         padding="lg"
-        class={`border border-gray-200 dark:border-gray-700 transition-shadow ${
-          createHighlight() ? 'ring-2 ring-blue-500/60 shadow-lg' : ''
-        }`}
+        class={`border border-gray-200 dark:border-gray-700 transition-shadow ${createHighlight() ? 'ring-2 ring-blue-500/60 shadow-lg' : ''
+          }`}
         ref={(el: HTMLDivElement) => {
           createSectionRef = el;
         }}
@@ -723,11 +716,10 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
               <div class="flex flex-wrap gap-2">
                 <button
                   type="button"
-                  class={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold transition ${
-                    isFullAccessSelected()
+                  class={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold transition ${isFullAccessSelected()
                       ? 'border-blue-500 bg-blue-600 text-white shadow-sm'
                       : 'border-gray-300 bg-white text-gray-700 hover:border-blue-400 hover:text-blue-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-blue-400 dark:hover:text-blue-200'
-                  }`}
+                    }`}
                   onClick={clearScopes}
                   title="Legacy wildcard – all permissions"
                 >
@@ -738,11 +730,10 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                   {(preset) => (
                     <button
                       type="button"
-                      class={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold transition ${
-                        presetMatchesSelection(preset.scopes)
+                      class={`inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold transition ${presetMatchesSelection(preset.scopes)
                           ? 'border-blue-500 bg-blue-600 text-white shadow-sm'
                           : 'border-gray-300 bg-white text-gray-700 hover:border-blue-400 hover:text-blue-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-blue-400 dark:hover:text-blue-200'
-                      }`}
+                        }`}
                       onClick={() => applyScopePreset(preset.scopes)}
                       title={preset.description}
                     >
@@ -771,11 +762,10 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
                             return (
                               <button
                                 type="button"
-                                class={`rounded-full border px-3 py-1 text-xs font-semibold transition ${
-                                  isActive()
+                                class={`rounded-full border px-3 py-1 text-xs font-semibold transition ${isActive()
                                     ? 'border-blue-500 bg-blue-600 text-white shadow-sm'
                                     : 'border-gray-300 bg-white text-gray-700 hover:border-blue-400 hover:text-blue-600 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:border-blue-400 dark:hover:text-blue-200'
-                                }`}
+                                  }`}
                                 onClick={() => {
                                   setSelectedScopes((prev) => {
                                     if (prev.includes(option.value)) {
diff --git a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
index 771f0b0..58d22d9 100644
--- a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
+++ b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
@@ -1,5 +1,6 @@
 import { Component, For, Show, createMemo } from 'solid-js';
 import type { NodeConfig } from '@/types/nodes';
+import { Card } from '@/components/shared/Card';
 
 type NodeConfigWithStatus = NodeConfig & {
   hasPassword?: boolean;
@@ -271,7 +272,7 @@ const resolvePveStatusMeta = (
 
 export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
   return (
-    <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+    <Card padding="none" tone="glass" class="overflow-x-auto rounded-lg">
       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
         <thead class="bg-gray-50 dark:bg-gray-800/70">
           <tr>
@@ -310,7 +311,7 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
                 ),
               );
               return (
-                <tr class="even:bg-gray-50/60 dark:even:bg-gray-800/30 hover:bg-blue-50/40 dark:hover:bg-blue-900/20 transition-colors">
+                <tr class="even:bg-gray-50/60 dark:even:bg-gray-800/30 hover:bg-blue-50/40 dark:hover:bg-blue-900/20 transition-colors animate-enter">
                   <td class="align-top py-3 pl-4 pr-3">
                     <div class="min-w-0 space-y-1">
                       <div class="flex items-start gap-3">
@@ -492,7 +493,7 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
           </For>
         </tbody>
       </table>
-    </div>
+    </Card>
   );
 };
 
@@ -541,7 +542,7 @@ const resolvePbsStatusMeta = (
 
 export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
   return (
-    <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+    <Card padding="none" tone="glass" class="overflow-x-auto rounded-lg">
       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
         <thead class="bg-gray-50 dark:bg-gray-800/70">
           <tr>
@@ -567,7 +568,7 @@ export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
             {(node) => {
               const statusMeta = createMemo(() => resolvePbsStatusMeta(node, props.statePbs));
               return (
-                <tr class="even:bg-gray-50/60 dark:even:bg-gray-800/30 hover:bg-blue-50/40 dark:hover:bg-blue-900/20 transition-colors">
+                <tr class="even:bg-gray-50/60 dark:even:bg-gray-800/30 hover:bg-blue-50/40 dark:hover:bg-blue-900/20 transition-colors animate-enter">
                   <td class="align-top py-3 pl-4 pr-3">
                     <div class="min-w-0 space-y-1">
                       <div class="flex items-start gap-3">
@@ -675,7 +676,7 @@ export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
           </For>
         </tbody>
       </table>
-    </div>
+    </Card>
   );
 };
 
@@ -724,7 +725,7 @@ const resolvePmgStatusMeta = (
 
 export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
   return (
-    <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+    <Card padding="none" tone="glass" class="overflow-x-auto rounded-lg">
       <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 text-sm">
         <thead class="bg-gray-50 dark:bg-gray-800/70">
           <tr>
@@ -750,7 +751,7 @@ export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
             {(node) => {
               const statusMeta = createMemo(() => resolvePmgStatusMeta(node, props.statePmg));
               return (
-                <tr class="even:bg-gray-50/60 dark:even:bg-gray-800/30 hover:bg-blue-50/40 dark:hover:bg-blue-900/20 transition-colors">
+                <tr class="even:bg-gray-50/60 dark:even:bg-gray-800/30 hover:bg-blue-50/40 dark:hover:bg-blue-900/20 transition-colors animate-enter">
                   <td class="align-top py-3 pl-4 pr-3">
                     <div class="min-w-0 space-y-1">
                       <div class="flex items-start gap-3">
@@ -847,6 +848,6 @@ export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
           </For>
         </tbody>
       </table>
-    </div>
+    </Card>
   );
 };
diff --git a/frontend-modern/src/components/Settings/UnifiedAgents.tsx b/frontend-modern/src/components/Settings/UnifiedAgents.tsx
index a7ddf88..4ad6cb4 100644
--- a/frontend-modern/src/components/Settings/UnifiedAgents.tsx
+++ b/frontend-modern/src/components/Settings/UnifiedAgents.tsx
@@ -635,7 +635,7 @@ export const UnifiedAgents: Component = () => {
                     </div>
                 </Show>
 
-                <div class="overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+                <Card padding="none" tone="glass" class="overflow-hidden rounded-lg">
                     <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                         <thead class="bg-gray-50 dark:bg-gray-800">
                             <tr>
@@ -656,7 +656,7 @@ export const UnifiedAgents: Component = () => {
                                 </tr>
                             }>
                                 {(agent) => (
-                                    <tr>
+                                    <tr class="animate-enter">
                                         <td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-900 dark:text-gray-100">
                                             {agent.displayName || agent.hostname}
                                             <Show when={agent.displayName && agent.displayName !== agent.hostname}>
@@ -709,7 +709,7 @@ export const UnifiedAgents: Component = () => {
                             </For>
                         </tbody>
                     </table>
-                </div>
+                </Card>
             </Card>
         </div >
     );
diff --git a/frontend-modern/src/components/Storage/DiskList.tsx b/frontend-modern/src/components/Storage/DiskList.tsx
index ea2783b..ee6b1fa 100644
--- a/frontend-modern/src/components/Storage/DiskList.tsx
+++ b/frontend-modern/src/components/Storage/DiskList.tsx
@@ -149,7 +149,7 @@ export const DiskList: Component<DiskListProps> = (props) => {
       </Show>
 
       <Show when={filteredDisks().length > 0}>
-        <Card padding="none" class="overflow-hidden">
+        <Card padding="none" tone="glass" class="overflow-hidden">
           <div class="overflow-x-auto">
             <table class="w-full">
               <thead>
@@ -191,7 +191,7 @@ export const DiskList: Component<DiskListProps> = (props) => {
 
                     return (
                       <>
-                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors">
+                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30 transition-colors animate-enter">
                           <td class="px-2 py-1.5 text-xs">
                             <span class="font-medium text-gray-900 dark:text-gray-100">
                               {disk.node}
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 267474b..d886ac9 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -742,7 +742,7 @@ const Storage: Component = () => {
         {/* Storage Table - shows for both PVE and PBS storage */}
         <Show when={connected() && initialDataReceived() && sortedStorage().length > 0}>
           <ComponentErrorBoundary name="Storage Table">
-            <Card padding="none" class="mb-4 overflow-hidden">
+            <Card padding="none" tone="glass" 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; }
@@ -1043,7 +1043,7 @@ const Storage: Component = () => {
                                 return (
                                   <>
                                     <tr
-                                      class={`${rowClass()} transition-colors`}
+                                      class={`${rowClass()} transition-colors animate-enter`}
                                       style={rowStyle()}
                                       onClick={toggleDrawer}
                                       aria-expanded={canExpand() && isExpanded() ? 'true' : 'false'}
diff --git a/frontend-modern/src/components/shared/Card.tsx b/frontend-modern/src/components/shared/Card.tsx
index d343d56..89e043b 100644
--- a/frontend-modern/src/components/shared/Card.tsx
+++ b/frontend-modern/src/components/shared/Card.tsx
@@ -1,6 +1,6 @@
 import { JSX, splitProps, mergeProps } from 'solid-js';
 
-type Tone = 'default' | 'muted' | 'info' | 'success' | 'warning' | 'danger';
+type Tone = 'default' | 'muted' | 'info' | 'success' | 'warning' | 'danger' | 'glass';
 type Padding = 'none' | 'sm' | 'md' | 'lg';
 
 type CardProps = {
@@ -17,6 +17,7 @@ const toneClassMap: Record<Tone, string> = {
   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',
+  glass: 'glass',
 };
 
 const paddingClassMap: Record<Padding, string> = {
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index 7590a84..1edc874 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -498,7 +498,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
   };
 
   return (
-    <Card padding="none" class="mb-4 overflow-hidden">
+    <Card padding="none" tone="glass" class="mb-4 overflow-hidden">
       <div>
         {/* Header */}
         <div
@@ -569,7 +569,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
               });
 
               const rowClass = createMemo(() => {
-                const baseHover = 'cursor-pointer transition-all duration-200 relative hover:shadow-sm group';
+                const baseHover = 'cursor-pointer transition-all duration-200 relative hover:shadow-sm group animate-enter';
 
                 if (isSelected()) {
                   return `cursor-pointer transition-all duration-200 relative hover:shadow-sm z-10 group`;
diff --git a/frontend-modern/src/components/shared/StatusDot.tsx b/frontend-modern/src/components/shared/StatusDot.tsx
index b71daba..8b1b4b7 100644
--- a/frontend-modern/src/components/shared/StatusDot.tsx
+++ b/frontend-modern/src/components/shared/StatusDot.tsx
@@ -14,9 +14,9 @@ interface StatusDotProps {
 }
 
 const VARIANT_CLASSES: Record<StatusIndicatorVariant, string> = {
-  success: 'bg-emerald-500 dark:bg-emerald-400',
-  warning: 'bg-amber-500 dark:bg-amber-400',
-  danger: 'bg-red-500 dark:bg-red-400',
+  success: 'bg-emerald-500 dark:bg-emerald-400 glow-success',
+  warning: 'bg-amber-500 dark:bg-amber-400 glow-warning',
+  danger: 'bg-red-500 dark:bg-red-400 glow-danger',
   muted: 'bg-gray-400 dark:bg-gray-500',
 };
 
diff --git a/frontend-modern/src/index.css b/frontend-modern/src/index.css
index 11edcf2..78355dd 100644
--- a/frontend-modern/src/index.css
+++ b/frontend-modern/src/index.css
@@ -478,4 +478,51 @@ body,
 
 .delay-300 {
   animation-delay: 300ms;
+}
+
+/* Glassmorphism Utilities */
+.glass {
+  @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border border-white/20 dark:border-gray-700/30 shadow-sm;
+}
+
+.glass-panel {
+  @apply bg-white/60 dark:bg-gray-900/60 backdrop-blur-xl border border-gray-200/50 dark:border-gray-700/50;
+}
+
+.glass-hover {
+  @apply hover:bg-white/90 dark:hover:bg-gray-800/90 transition-colors duration-200;
+}
+
+/* Staggered Entry Animation */
+@keyframes enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-enter {
+  animation: enter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+}
+
+/* Glow effects for status dots */
+.glow-success {
+  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
+}
+
+.glow-warning {
+  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
+}
+
+.glow-danger {
+  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
+}
+
+.glow-info {
+  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
 }
\ No newline at end of file