diff --git a/frontend-modern/src/components/Alerts/ResourceTable.tsx b/frontend-modern/src/components/Alerts/ResourceTable.tsx
index 9673eb6d5..40f51bbb2 100644
--- a/frontend-modern/src/components/Alerts/ResourceTable.tsx
+++ b/frontend-modern/src/components/Alerts/ResourceTable.tsx
@@ -397,13 +397,12 @@ export function ResourceTable(props: ResourceTableProps) {
         title={isDisabledMetric ? 'Disabled (no alerts for this metric)' : ''}
       >
         <span
-          class={`text-sm ${
-            isDisabledMetric
+          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'
-          }`}
+            }`}
         >
           {displayText}
         </span>
@@ -523,7 +522,7 @@ export function ResourceTable(props: ResourceTableProps) {
           </thead>
           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
             {/* Global Defaults Row */}
-              <Show
+            <Show
               when={props.globalDefaults && props.setGlobalDefaults && props.setHasUnsavedChanges}
             >
               <tr
@@ -591,11 +590,10 @@ export function ResourceTable(props: ResourceTableProps) {
                                 props.setHasUnsavedChanges(true);
                               }
                             }}
-                            class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${
-                              isOff()
+                            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'
-                            }`}
+                              }`}
                             title={
                               isOff()
                                 ? 'Click to enable this metric'
@@ -908,26 +906,26 @@ export function ResourceTable(props: ResourceTableProps) {
                                 </Show>
                               </td>
                               <td class="p-1 px-2">
-                                <div class="flex items-center gap-2">
+                                <div class="flex items-center gap-2 min-w-0">
                                   <Show
                                     when={resource.type === 'node'}
                                     fallback={
                                       <span
-                                        class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+                                        class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
                                       >
                                         {resource.name}
                                       </span>
                                     }
                                   >
                                     <div
-                                      class="flex flex-wrap items-center gap-3"
+                                      class="flex items-center gap-3 min-w-0"
                                       title={resource.status || undefined}
                                     >
                                       <Show
                                         when={resource.host}
                                         fallback={
                                           <span
-                                            class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+                                            class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
                                           >
                                             {resource.type === 'node'
                                               ? resource.name
@@ -941,11 +939,10 @@ export function ResourceTable(props: ResourceTableProps) {
                                             target="_blank"
                                             rel="noopener noreferrer"
                                             onClick={(e) => e.stopPropagation()}
-                                            class={`text-sm font-medium transition-colors duration-150 ${
-                                              resource.disabled
+                                            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'
-                                            }`}
+                                              }`}
                                             title={`Open ${resource.displayName || resource.name} web interface`}
                                           >
                                             {resource.type === 'node'
@@ -1052,9 +1049,9 @@ export function ResourceTable(props: ResourceTableProps) {
                                                 const sliderMax =
                                                   metric === 'temperature'
                                                     ? Math.max(
-                                                        sliderMin,
-                                                        bounds.max > 0 ? bounds.max : 120,
-                                                      )
+                                                      sliderMin,
+                                                      bounds.max > 0 ? bounds.max : 120,
+                                                    )
                                                     : bounds.max;
                                                 const defaultSliderValue = () => {
                                                   if (metric === 'disk') return 90;
@@ -1118,7 +1115,7 @@ export function ResourceTable(props: ResourceTableProps) {
                                                   if (
                                                     isEditing() &&
                                                     activeMetricInput()?.resourceId ===
-                                                      resource.id &&
+                                                    resource.id &&
                                                     activeMetricInput()?.metric === metric
                                                   ) {
                                                     queueMicrotask(() => {
@@ -1150,11 +1147,10 @@ export function ResourceTable(props: ResourceTableProps) {
                                                   }
                                                   setActiveMetricInput(null);
                                                 }}
-                                                class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${
-                                                  isDisabled()
+                                                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'
-                                                }`}
+                                                  }`}
                                               />
                                             </div>
                                           </div>
@@ -1423,9 +1419,9 @@ export function ResourceTable(props: ResourceTableProps) {
                             <Show
                               when={resource.type === 'node'}
                               fallback={
-                                <div class="flex items-center gap-2">
+                                <div class="flex items-center gap-2 min-w-0">
                                   <span
-                                    class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+                                    class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
                                   >
                                     {resource.name}
                                   </span>
@@ -1438,14 +1434,14 @@ export function ResourceTable(props: ResourceTableProps) {
                               }
                             >
                               <div
-                                class="flex flex-wrap items-center gap-3"
+                                class="flex items-center gap-3 min-w-0"
                                 title={resource.status || undefined}
                               >
                                 <Show
                                   when={resource.host}
                                   fallback={
                                     <span
-                                      class={`text-sm font-medium ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+                                      class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
                                     >
                                       {resource.type === 'node'
                                         ? resource.name
@@ -1459,11 +1455,10 @@ export function ResourceTable(props: ResourceTableProps) {
                                       target="_blank"
                                       rel="noopener noreferrer"
                                       onClick={(e) => e.stopPropagation()}
-                                      class={`text-sm font-medium transition-colors duration-150 ${
-                                        resource.disabled
+                                      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'
-                                      }`}
+                                        }`}
                                       title={`Open ${resource.displayName || resource.name} web interface`}
                                     >
                                       {resource.type === 'node'
@@ -1518,12 +1513,12 @@ export function ResourceTable(props: ResourceTableProps) {
                                   return;
                                 }
                                 setActiveMetricInput({ resourceId: resource.id, metric });
-        props.onEdit(
-          resource.id,
-          resource.thresholds ? { ...resource.thresholds } : {},
-          resource.defaults ? { ...resource.defaults } : {},
-          typeof resource.note === 'string' ? resource.note : undefined,
-        );
+                                props.onEdit(
+                                  resource.id,
+                                  resource.thresholds ? { ...resource.thresholds } : {},
+                                  resource.defaults ? { ...resource.defaults } : {},
+                                  typeof resource.note === 'string' ? resource.note : undefined,
+                                );
                               };
 
                               return (
@@ -1559,9 +1554,9 @@ export function ResourceTable(props: ResourceTableProps) {
                                           min="-1"
                                           max={
                                             metric.includes('disk') ||
-                                            metric.includes('memory') ||
-                                            metric.includes('cpu') ||
-                                            metric === 'usage'
+                                              metric.includes('memory') ||
+                                              metric.includes('cpu') ||
+                                              metric === 'usage'
                                               ? 100
                                               : 10000
                                           }
@@ -1604,11 +1599,10 @@ export function ResourceTable(props: ResourceTableProps) {
                                             }
                                             setActiveMetricInput(null);
                                           }}
-                                          class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${
-                                            isDisabled()
+                                          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'
-                                          }`}
+                                            }`}
                                         />
                                       </div>
                                     </Show>
@@ -1695,7 +1689,7 @@ export function ResourceTable(props: ResourceTableProps) {
                                   <div class="flex items-center gap-1">
                                     <button
                                       type="button"
-                                onClick={() =>
+                                      onClick={() =>
                                         props.onEdit(
                                           resource.id,
                                           resource.thresholds ? { ...resource.thresholds } : {},
diff --git a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
index 58adca8fd..3b6110eb8 100644
--- a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
@@ -210,7 +210,6 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
                 const selected = props.selectedHostId() === summary.host.id;
                 const online = isHostOnline(summary.host);
                 const uptimeLabel = summary.uptimeSeconds ? formatUptime(summary.uptimeSeconds) : '—';
-                const agentLabel = summary.host.agentVersion ? summary.host.agentVersion : '—';
 
                 const rowStyle = () => {
                   const styles: Record<string, string> = {};
@@ -256,72 +255,34 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
                     onClick={() => props.onSelect(summary.host.id)}
                   >
                     <td class="pr-2 py-1 pl-3 align-middle">
-                      <div class="flex flex-wrap items-center gap-1.5 sm:flex-nowrap sm:whitespace-nowrap sm:min-w-0">
+                      <div class="flex items-center gap-1.5 min-w-0">
                         <StatusDot
                           variant={hostStatus().variant}
                           title={hostStatus().label}
                           ariaLabel={hostStatus().label}
                           size="xs"
                         />
-                        <span class="font-medium text-[11px] text-gray-900 dark:text-gray-100 sm:truncate sm:max-w-[200px]">
+                        <span class="font-medium text-[11px] text-gray-900 dark:text-gray-100 truncate" title={getDisplayName(summary.host)}>
                           {getDisplayName(summary.host)}
                         </span>
                         <Show when={getDisplayName(summary.host) !== summary.host.hostname}>
-                          <span class="hidden sm:inline text-[9px] text-gray-500 dark:text-gray-400 sm:whitespace-nowrap">
+                          <span class="hidden sm:inline text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
                             ({summary.host.hostname})
                           </span>
                         </Show>
-                        <span
-                          class={`text-[9px] px-1 py-0 rounded font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
-                          title={runtimeInfo.raw || runtimeInfo.label}
-                        >
-                          {runtimeInfo.label}
-                        </span>
-                        <Show when={runtimeVersion}>
-                          <span class="text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                            v{runtimeVersion}
-                          </span>
-                        </Show>
-                      </div>
-                      <div class="mt-2 grid grid-cols-1 gap-1 text-[10px] text-gray-500 dark:text-gray-400 sm:hidden">
-                        <div class="flex items-center gap-1">
-                          <span class="font-semibold text-gray-600 dark:text-gray-300">Uptime:</span>
-                          <span>{uptimeLabel}</span>
-                        </div>
-                        <div class="flex items-start gap-1">
-                          <span class="font-semibold text-gray-600 dark:text-gray-300">Last:</span>
-                          <span class="flex-1">
-                            <span>{summary.lastSeenRelative}</span>
-                            <Show when={summary.lastSeenAbsolute}>
-                              <span class="block text-[9px] text-gray-400 dark:text-gray-500">
-                                {summary.lastSeenAbsolute}
-                              </span>
-                            </Show>
-                          </span>
-                        </div>
-                        <div class="flex flex-wrap items-center gap-1">
-                          <span class="font-semibold text-gray-600 dark:text-gray-300">Agent:</span>
+                        <div class="hidden xl:flex items-center gap-1.5 ml-1">
                           <span
-                            class={
-                              agentOutdated
-                                ? 'rounded px-1 py-0.5 bg-yellow-100 dark:bg-yellow-900/20 text-yellow-700 dark:text-yellow-400 font-medium'
-                                : 'rounded px-1 py-0.5 bg-green-100 dark:bg-green-900/20 text-green-700 dark:text-green-400 font-medium'
-                            }
+                            class={`text-[9px] px-1 py-0 rounded font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
+                            title={runtimeInfo.raw || runtimeInfo.label}
                           >
-                            {agentLabel}
+                            {runtimeInfo.label}
                           </span>
-                          <Show when={agentOutdated}>
-                            <span class="text-[9px] font-medium text-yellow-600 dark:text-yellow-500">
-                              Update recommended
+                          <Show when={runtimeVersion}>
+                            <span class="text-[9px] text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                              v{runtimeVersion}
                             </span>
                           </Show>
                         </div>
-                        <Show when={summary.host.intervalSeconds}>
-                          <div class="flex items-center gap-1">
-                            <span class="font-semibold text-gray-600 dark:text-gray-300">Interval:</span>
-                            <span>{summary.host.intervalSeconds}s</span>
-                          </div>
-                        </Show>
                       </div>
                     </td>
                     <td class="px-0.5 md:px-2 py-1 align-middle">
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index 04eb97fa5..129c7f6a2 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -122,15 +122,15 @@ interface DockerColumnDef extends ColumnConfig {
 // - supplementary: Visible on large screens and up (lg: 1024px+)
 // - detailed: Visible on extra large screens and up (xl: 1280px+)
 export const DOCKER_COLUMNS: DockerColumnDef[] = [
-  { id: 'resource', label: 'Resource', priority: 'essential', minWidth: '150px', flex: 2, sortKey: 'resource' },
-  { id: 'type', label: 'Type', priority: 'primary', minWidth: '60px', maxWidth: '80px', sortKey: 'type' },
-  { id: 'image', label: 'Image / Stack', shortLabel: 'Image', priority: 'supplementary', minWidth: '100px', flex: 1, sortKey: 'image' },
-  { id: 'status', label: 'Status', priority: 'essential', minWidth: '80px', maxWidth: '120px', sortKey: 'status' },
-  { id: 'cpu', label: 'CPU', priority: 'secondary', minWidth: '80px', flex: 1, sortKey: 'cpu' },
-  { id: 'memory', label: 'Memory', shortLabel: 'Mem', priority: 'secondary', minWidth: '90px', flex: 1, sortKey: 'memory' },
-  { id: 'disk', label: 'Disk', priority: 'detailed', minWidth: '90px', flex: 1, sortKey: 'disk' },
-  { id: 'tasks', label: 'Tasks / Restarts', shortLabel: 'Tasks', priority: 'supplementary', minWidth: '70px', maxWidth: '100px', sortKey: 'tasks' },
-  { id: 'updated', label: 'Updated / Uptime', shortLabel: 'Updated', priority: 'primary', minWidth: '60px', maxWidth: '90px', sortKey: 'updated' },
+  { id: 'resource', label: 'Resource', priority: 'essential', minWidth: '100px', flex: 1.5, sortKey: 'resource' },
+  { id: 'type', label: 'Type', priority: 'essential', minWidth: '24px', maxWidth: '50px', sortKey: 'type' },
+  { id: 'image', label: 'Image / Stack', shortLabel: 'Image', priority: 'essential', minWidth: '80px', flex: 1, sortKey: 'image' },
+  { id: 'status', label: 'Status', priority: 'essential', minWidth: '60px', maxWidth: '100px', sortKey: 'status' },
+  { id: 'cpu', label: 'CPU', priority: 'essential', minWidth: '50px', flex: 1, sortKey: 'cpu' },
+  { id: 'memory', label: 'Memory', shortLabel: 'Mem', priority: 'essential', minWidth: '50px', flex: 1, sortKey: 'memory' },
+  { id: 'disk', label: 'Disk', priority: 'essential', minWidth: '50px', flex: 1, sortKey: 'disk' },
+  { id: 'tasks', label: 'Tasks / Restarts', shortLabel: 'Tasks', priority: 'essential', minWidth: '40px', maxWidth: '70px', sortKey: 'tasks' },
+  { id: 'updated', label: 'Updated / Uptime', shortLabel: 'Updated', priority: 'essential', minWidth: '50px', maxWidth: '80px', sortKey: 'updated' },
 ];
 
 // Global state for currently expanded drawer (only one drawer open at a time)
@@ -1080,7 +1080,7 @@ const DockerContainerRow: Component<{
     switch (column.id) {
       case 'resource':
         return (
-          <div class={`${resourceIndent()} pr-2 py-0.5`}>
+          <div class={`${resourceIndent()} pr-2 py-0.5 overflow-hidden`}>
             <div class="flex items-center gap-1.5 min-w-0">
               <StatusDot
                 variant={containerStatusIndicator().variant}
@@ -1088,13 +1088,13 @@ const DockerContainerRow: Component<{
                 ariaLabel={containerStatusIndicator().label}
                 size="xs"
               />
-              <div class="flex-1 min-w-0">
+              <div class="flex-1 min-w-0 truncate">
                 <Show
                   when={isEditingUrl()}
                   fallback={
                     <div class="flex items-center gap-1.5 flex-1 min-w-0">
                       <span
-                        class="text-sm font-semibold text-gray-900 dark:text-gray-100 cursor-text select-none"
+                        class="text-sm font-semibold text-gray-900 dark:text-gray-100 cursor-text select-none truncate"
                         style="cursor: text;"
                         title={`${containerTitle()}${customUrl() ? ' - Click to edit URL' : ' - Click to add URL'}`}
                         onClick={startEditingUrl}
@@ -1104,10 +1104,10 @@ const DockerContainerRow: Component<{
                       </span>
                       <Show when={podName()}>
                         {(name) => (
-                          <span class="inline-flex items-center gap-1 rounded bg-purple-100 px-1.5 py-0.5 text-[10px] font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
+                          <span class="inline-flex items-center gap-1 rounded bg-purple-100 px-1.5 py-0.5 text-[10px] font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-200 flex-shrink-0">
                             Pod: {name()}
                             <Show when={isPodInfra()}>
-                              <span class="rounded bg-purple-200 px-1 py-0.5 text-[9px] uppercase text-purple-800 dark:bg-purple-800/50 dark:text-purple-200">
+                              <span class="rounded bg-purple-200 px-1 py-0.5 text-[9px] uppercase text-purple-800 dark:bg-purple-800/50 dark:text-purple-200 ml-1">
                                 infra
                               </span>
                             </Show>
@@ -1130,11 +1130,11 @@ const DockerContainerRow: Component<{
                       </Show>
                       <Show when={props.showHostContext}>
                         <span
-                          class="inline-flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300"
+                          class="inline-flex items-center gap-1 rounded bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-gray-800 dark:text-gray-300 flex-shrink-0 max-w-[120px]"
                           title={`Host: ${hostDisplayName()}`}
                         >
                           <StatusDot variant={hostStatus().variant} title={hostStatus().label} ariaLabel={hostStatus().label} size="xs" />
-                          <span class="max-w-[160px] truncate">{hostDisplayName()}</span>
+                          <span class="truncate">{hostDisplayName()}</span>
                         </span>
                       </Show>
                     </div>
@@ -1162,7 +1162,7 @@ const DockerContainerRow: Component<{
         );
       case 'type':
         return (
-          <div class="px-2 py-0.5 flex items-center">
+          <div class="px-2 py-0.5 flex items-center overflow-hidden">
             <span class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`} title={runtimeVersion() ? `${runtimeInfo.label} ${runtimeVersion()}` : runtimeInfo.raw || runtimeInfo.label}>
               {runtimeInfo.label}
             </span>
@@ -1170,19 +1170,19 @@ const DockerContainerRow: Component<{
         );
       case 'image':
         return (
-          <div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 truncate">
+          <div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 truncate overflow-hidden">
             <span title={container.image}>{container.image || '—'}</span>
           </div>
         );
       case 'status':
         return (
-          <div class="px-2 py-0.5 text-xs">
-            <span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${statusBadgeClass()}`}>{statusLabel()}</span>
+          <div class="px-2 py-0.5 text-xs overflow-hidden">
+            <span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap block truncate ${statusBadgeClass()}`}>{statusLabel()}</span>
           </div>
         );
       case 'cpu':
         return (
-          <div class="px-2 py-0.5 flex items-center">
+          <div class="px-2 py-0.5 flex items-center overflow-hidden">
             <ResponsiveMetricCell
               value={cpuPercent()}
               type="cpu"
@@ -1195,7 +1195,7 @@ const DockerContainerRow: Component<{
         );
       case 'memory':
         return (
-          <div class="px-2 py-0.5 flex items-center">
+          <div class="px-2 py-0.5 flex items-center overflow-hidden">
             <ResponsiveMetricCell
               value={memPercent()}
               type="memory"
@@ -1209,7 +1209,7 @@ const DockerContainerRow: Component<{
         );
       case 'disk':
         return (
-          <div class="px-2 py-0.5 flex items-center">
+          <div class="px-2 py-0.5 flex items-center overflow-hidden">
             <Show when={hasDiskStats()} fallback={<span class="text-xs text-gray-400">—</span>}>
               <Show when={diskPercent() !== null} fallback={<span class="text-xs text-gray-700 dark:text-gray-300">{diskUsageLabel()}</span>}>
                 <ResponsiveMetricCell
@@ -1227,7 +1227,7 @@ const DockerContainerRow: Component<{
         );
       case 'tasks':
         return (
-          <div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
+          <div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 overflow-hidden whitespace-nowrap">
             <Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
               {restarts()}
               <span class="text-[10px] text-gray-500 dark:text-gray-400 ml-1">restarts</span>
@@ -1236,7 +1236,7 @@ const DockerContainerRow: Component<{
         );
       case 'updated':
         return (
-          <div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
+          <div class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 overflow-hidden whitespace-nowrap">
             <Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
               <Show when={props.isMobile()} fallback={uptime()}>
                 {formatUptime(container.uptimeSeconds || 0, true)}
@@ -1264,339 +1264,339 @@ const DockerContainerRow: Component<{
 
       <Show when={expanded() && hasDrawerContent()}>
         <div class="bg-gray-50 dark:bg-gray-900/50 px-4 py-3">
-            <div class="flex flex-wrap justify-start gap-3">
-              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                  Summary
-                </div>
-                <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
-                  <div class="flex items-center justify-between gap-2">
-                    <span class="font-medium text-gray-700 dark:text-gray-200">Runtime</span>
-                    <span
-                      class={`inline-flex items-center gap-2 rounded-full px-2 py-0.5 text-[10px] font-semibold ${runtimeInfo.badgeClass}`}
-                      title={runtimeInfo.raw || runtimeInfo.label}
-                    >
-                      {runtimeInfo.label}
-                      <Show when={runtimeVersion()}>
-                        {(version) => (
-                          <span class="text-[10px] text-gray-500 dark:text-gray-400">{version()}</span>
-                        )}
-                      </Show>
-                    </span>
-                  </div>
-                  <div class="flex items-start justify-between gap-2">
-                    <span class="font-medium text-gray-700 dark:text-gray-200">Image</span>
-                    <span class="flex-1 truncate text-right text-gray-600 dark:text-gray-300" title={container.image}>
-                      {container.image || '—'}
-                    </span>
-                  </div>
-                  <Show when={podName()}>
-                    {(name) => (
-                      <div class="flex items-center justify-between gap-2">
-                        <span class="font-medium text-gray-700 dark:text-gray-200">Pod</span>
-                        <span class="text-right text-gray-600 dark:text-gray-300">
-                          {name()}
-                          <Show when={isPodInfra()}>
-                            <span class="ml-2 rounded bg-purple-100 px-1.5 py-0.5 text-[10px] font-semibold text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
-                              infra
-                            </span>
-                          </Show>
-                        </span>
-                      </div>
-                    )}
-                  </Show>
-                  <Show when={podmanMetadata()?.composeProject}>
-                    {(project) => (
-                      <div class="flex items-center justify-between gap-2">
-                        <span class="font-medium text-gray-700 dark:text-gray-200">Compose Project</span>
-                        <span class="text-right text-gray-600 dark:text-gray-300">{project()}</span>
-                      </div>
-                    )}
-                  </Show>
-                  <Show when={podmanMetadata()?.composeService}>
-                    {(service) => (
-                      <div class="flex items-center justify-between gap-2">
-                        <span class="font-medium text-gray-700 dark:text-gray-200">Compose Service</span>
-                        <span class="text-right text-gray-600 dark:text-gray-300">{service()}</span>
-                      </div>
-                    )}
-                  </Show>
-                  <Show when={podmanMetadata()?.autoUpdatePolicy}>
-                    {(policy) => (
-                      <div class="flex items-center justify-between gap-2">
-                        <span class="font-medium text-gray-700 dark:text-gray-200">Auto Update</span>
-                        <span class="text-right text-gray-600 dark:text-gray-300">
-                          {policy()}
-                          <Show when={podmanMetadata()?.autoUpdateRestart}>
-                            {(restart) => (
-                              <span class="ml-2 text-[10px] text-gray-500 dark:text-gray-400">restart: {restart()}</span>
-                            )}
-                          </Show>
-                        </span>
-                      </div>
-                    )}
-                  </Show>
-                  <Show when={podmanMetadata()?.userNamespace}>
-                    {(userns) => (
-                      <div class="flex items-center justify-between gap-2">
-                        <span class="font-medium text-gray-700 dark:text-gray-200">User Namespace</span>
-                        <span class="text-right text-gray-600 dark:text-gray-300">{userns()}</span>
-                      </div>
-                    )}
-                  </Show>
-                  <div class="flex items-center justify-between gap-2">
-                    <span class="font-medium text-gray-700 dark:text-gray-200">State</span>
-                    <span class="text-right text-gray-600 dark:text-gray-300">{statusLabel()}</span>
-                  </div>
-                  <div class="flex items-center justify-between gap-2">
-                    <span class="font-medium text-gray-700 dark:text-gray-200">Restarts</span>
-                    <span class="text-right text-gray-600 dark:text-gray-300">{restarts()}</span>
-                  </div>
-                  <Show when={createdRelative()}>
-                    {(created) => (
-                      <div class="flex flex-col gap-0.5">
-                        <span class="font-medium text-gray-700 dark:text-gray-200">Created</span>
-                        <div class="text-right text-gray-600 dark:text-gray-300">
-                          {created()}
-                          <Show when={createdAbsolute()}>
-                            {(abs) => (
-                              <div class="text-[10px] text-gray-500 dark:text-gray-400">{abs()}</div>
-                            )}
-                          </Show>
-                        </div>
-                      </div>
-                    )}
-                  </Show>
-                  <Show when={startedRelative()}>
-                    {(started) => (
-                      <div class="flex flex-col gap-0.5">
-                        <span class="font-medium text-gray-700 dark:text-gray-200">Started</span>
-                        <div class="text-right text-gray-600 dark:text-gray-300">
-                          {started()}
-                          <Show when={startedAbsolute()}>
-                            {(abs) => (
-                              <div class="text-[10px] text-gray-500 dark:text-gray-400">{abs()}</div>
-                            )}
-                          </Show>
-                        </div>
-                      </div>
-                    )}
-                  </Show>
-                  <div class="flex items-center justify-between gap-2">
-                    <span class="font-medium text-gray-700 dark:text-gray-200">Uptime</span>
-                    <span class="text-right text-gray-600 dark:text-gray-300">{uptime()}</span>
-                  </div>
-                </div>
-                <Show when={runtimeInfo.id === 'podman'}>
-                  <div class="mt-3 rounded border border-dashed border-purple-200 px-2 py-1 text-[10px] text-purple-700 dark:border-purple-700/60 dark:text-purple-200">
-                    Podman hosts report container metrics, but Swarm services and tasks are unavailable. Runtime annotations and compose metadata appear below when present.
-                  </div>
-                </Show>
+          <div class="flex flex-wrap justify-start gap-3">
+            <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+              <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                Summary
               </div>
-              <Show when={container.ports && container.ports.length > 0}>
-                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                  <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                    Ports
-                  </div>
-                  <div class="mt-1 flex flex-wrap gap-1 text-[11px] text-gray-600 dark:text-gray-300">
-                    {container.ports!.map((port) => {
-                      const label = port.publicPort
-                        ? `${port.publicPort}:${port.privatePort}/${port.protocol}`
-                        : `${port.privatePort}/${port.protocol}`;
-                      return (
-                        <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
-                          {label}
-                        </span>
-                      );
-                    })}
-                  </div>
-                </div>
-              </Show>
-
-              <Show when={container.networks && container.networks.length > 0}>
-                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                  <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                    Networks
-                  </div>
-                  <div class="mt-1 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
-                    {container.networks!.map((network) => (
-                      <div class="rounded border border-dashed border-gray-200 p-2 last:mb-0 dark:border-gray-700/70">
-                        <div class="font-medium text-gray-700 dark:text-gray-200">{network.name}</div>
-                        <div class="mt-0.5 flex flex-wrap gap-1 text-[10px] text-gray-500 dark:text-gray-400">
-                          <Show when={network.ipv4}>
-                            <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
-                              {network.ipv4}
-                            </span>
-                          </Show>
-                          <Show when={network.ipv6}>
-                            <span class="rounded bg-purple-100 px-1.5 py-0.5 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
-                              {network.ipv6}
-                            </span>
-                          </Show>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </Show>
-
-              <Show when={hasPodmanMetadata()}>
-                <div class="min-w-[220px] flex-1 rounded border border-purple-200 bg-white/70 p-2 shadow-sm dark:border-purple-700/60 dark:bg-purple-950/20">
-                  <div class="text-[11px] font-medium uppercase tracking-wide text-purple-700 dark:text-purple-200">
-                    Podman Metadata
-                  </div>
-                  <div class="mt-1 space-y-2 text-[11px] text-gray-600 dark:text-gray-300">
-                    <For each={podmanMetadataSections()}>
-                      {(section) => (
-                        <div class="space-y-1 border-b border-purple-100 pb-1 last:border-b-0 last:pb-0 dark:border-purple-800/30">
-                          <div class="text-[10px] font-semibold uppercase tracking-wide text-purple-600 dark:text-purple-300">
-                            {section.title}
-                          </div>
-                          <div class="space-y-1">
-                            <For each={section.items}>
-                              {(item) => (
-                                <div class="flex items-start justify-between gap-2">
-                                  <span class="font-medium text-gray-700 dark:text-gray-200">{item.label}</span>
-                                  <span
-                                    class="max-w-[220px] break-all text-right text-gray-600 dark:text-gray-300"
-                                    title={item.value || '—'}
-                                  >
-                                    {item.value || '—'}
-                                  </span>
-                                </div>
-                              )}
-                            </For>
-                          </div>
-                        </div>
+              <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
+                <div class="flex items-center justify-between gap-2">
+                  <span class="font-medium text-gray-700 dark:text-gray-200">Runtime</span>
+                  <span
+                    class={`inline-flex items-center gap-2 rounded-full px-2 py-0.5 text-[10px] font-semibold ${runtimeInfo.badgeClass}`}
+                    title={runtimeInfo.raw || runtimeInfo.label}
+                  >
+                    {runtimeInfo.label}
+                    <Show when={runtimeVersion()}>
+                      {(version) => (
+                        <span class="text-[10px] text-gray-500 dark:text-gray-400">{version()}</span>
                       )}
-                    </For>
-                  </div>
+                    </Show>
+                  </span>
                 </div>
-              </Show>
-
-              <Show when={hasBlockIo()}>
-                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                  <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                    Block I/O
-                  </div>
-                  <div class="mt-1 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
-                    <div class="flex items-center justify-between">
-                      <span>Read</span>
-                      <div class="text-right">
-                        <div class="font-semibold text-gray-900 dark:text-gray-100">
-                          {formatBytes(blockIoReadBytes())}
-                        </div>
-                        <Show when={blockIoReadRateLabel()}>
-                          <div class="text-[10px] text-gray-500 dark:text-gray-400">
-                            {blockIoReadRateLabel()}
-                          </div>
+                <div class="flex items-start justify-between gap-2">
+                  <span class="font-medium text-gray-700 dark:text-gray-200">Image</span>
+                  <span class="flex-1 truncate text-right text-gray-600 dark:text-gray-300" title={container.image}>
+                    {container.image || '—'}
+                  </span>
+                </div>
+                <Show when={podName()}>
+                  {(name) => (
+                    <div class="flex items-center justify-between gap-2">
+                      <span class="font-medium text-gray-700 dark:text-gray-200">Pod</span>
+                      <span class="text-right text-gray-600 dark:text-gray-300">
+                        {name()}
+                        <Show when={isPodInfra()}>
+                          <span class="ml-2 rounded bg-purple-100 px-1.5 py-0.5 text-[10px] font-semibold text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
+                            infra
+                          </span>
+                        </Show>
+                      </span>
+                    </div>
+                  )}
+                </Show>
+                <Show when={podmanMetadata()?.composeProject}>
+                  {(project) => (
+                    <div class="flex items-center justify-between gap-2">
+                      <span class="font-medium text-gray-700 dark:text-gray-200">Compose Project</span>
+                      <span class="text-right text-gray-600 dark:text-gray-300">{project()}</span>
+                    </div>
+                  )}
+                </Show>
+                <Show when={podmanMetadata()?.composeService}>
+                  {(service) => (
+                    <div class="flex items-center justify-between gap-2">
+                      <span class="font-medium text-gray-700 dark:text-gray-200">Compose Service</span>
+                      <span class="text-right text-gray-600 dark:text-gray-300">{service()}</span>
+                    </div>
+                  )}
+                </Show>
+                <Show when={podmanMetadata()?.autoUpdatePolicy}>
+                  {(policy) => (
+                    <div class="flex items-center justify-between gap-2">
+                      <span class="font-medium text-gray-700 dark:text-gray-200">Auto Update</span>
+                      <span class="text-right text-gray-600 dark:text-gray-300">
+                        {policy()}
+                        <Show when={podmanMetadata()?.autoUpdateRestart}>
+                          {(restart) => (
+                            <span class="ml-2 text-[10px] text-gray-500 dark:text-gray-400">restart: {restart()}</span>
+                          )}
+                        </Show>
+                      </span>
+                    </div>
+                  )}
+                </Show>
+                <Show when={podmanMetadata()?.userNamespace}>
+                  {(userns) => (
+                    <div class="flex items-center justify-between gap-2">
+                      <span class="font-medium text-gray-700 dark:text-gray-200">User Namespace</span>
+                      <span class="text-right text-gray-600 dark:text-gray-300">{userns()}</span>
+                    </div>
+                  )}
+                </Show>
+                <div class="flex items-center justify-between gap-2">
+                  <span class="font-medium text-gray-700 dark:text-gray-200">State</span>
+                  <span class="text-right text-gray-600 dark:text-gray-300">{statusLabel()}</span>
+                </div>
+                <div class="flex items-center justify-between gap-2">
+                  <span class="font-medium text-gray-700 dark:text-gray-200">Restarts</span>
+                  <span class="text-right text-gray-600 dark:text-gray-300">{restarts()}</span>
+                </div>
+                <Show when={createdRelative()}>
+                  {(created) => (
+                    <div class="flex flex-col gap-0.5">
+                      <span class="font-medium text-gray-700 dark:text-gray-200">Created</span>
+                      <div class="text-right text-gray-600 dark:text-gray-300">
+                        {created()}
+                        <Show when={createdAbsolute()}>
+                          {(abs) => (
+                            <div class="text-[10px] text-gray-500 dark:text-gray-400">{abs()}</div>
+                          )}
                         </Show>
                       </div>
                     </div>
-                    <div class="flex items-center justify-between">
-                      <span>Write</span>
-                      <div class="text-right">
-                        <div class="font-semibold text-gray-900 dark:text-gray-100">
-                          {formatBytes(blockIoWriteBytes())}
-                        </div>
-                        <Show when={blockIoWriteRateLabel()}>
-                          <div class="text-[10px] text-gray-500 dark:text-gray-400">
-                            {blockIoWriteRateLabel()}
-                          </div>
+                  )}
+                </Show>
+                <Show when={startedRelative()}>
+                  {(started) => (
+                    <div class="flex flex-col gap-0.5">
+                      <span class="font-medium text-gray-700 dark:text-gray-200">Started</span>
+                      <div class="text-right text-gray-600 dark:text-gray-300">
+                        {started()}
+                        <Show when={startedAbsolute()}>
+                          {(abs) => (
+                            <div class="text-[10px] text-gray-500 dark:text-gray-400">{abs()}</div>
+                          )}
                         </Show>
                       </div>
                     </div>
-                  </div>
+                  )}
+                </Show>
+                <div class="flex items-center justify-between gap-2">
+                  <span class="font-medium text-gray-700 dark:text-gray-200">Uptime</span>
+                  <span class="text-right text-gray-600 dark:text-gray-300">{uptime()}</span>
                 </div>
-              </Show>
-
-              <Show when={hasMounts()}>
-                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                  <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                    Mounts
-                  </div>
-                  <div class="mt-1 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
-                    <For each={mounts()}>
-                      {(mount) => {
-                        const destination = mount.destination || mount.source || mount.name || 'mount';
-                        const rw = mount.rw === false ? 'read-only' : 'read-write';
-                        return (
-                          <div class="rounded border border-dashed border-gray-200 p-2 last:mb-0 dark:border-gray-700/70">
-                            <div class="flex items-center justify-between gap-2">
-                              <span class="truncate font-medium text-gray-700 dark:text-gray-200" title={destination}>
-                                {destination}
-                              </span>
-                              <Show when={mount.type}>
-                                <span class="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400">
-                                  {mount.type}
-                                </span>
-                              </Show>
-                            </div>
-                            <Show when={mount.source}>
-                              <div class="mt-1 truncate text-[11px] text-gray-600 dark:text-gray-300" title={mount.source}>
-                                {mount.source}
-                              </div>
-                            </Show>
-                            <div class="mt-1 flex flex-wrap gap-1 text-[10px] text-gray-500 dark:text-gray-400">
-                              <span
-                                class={`rounded px-1.5 py-0.5 ${mount.rw === false
-                                  ? 'bg-gray-200 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200'
-                                  : 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-                                  }`}
-                              >
-                                {rw}
-                              </span>
-                              <Show when={mount.mode}>
-                                <span class="rounded bg-gray-200 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200">
-                                  mode: {mount.mode}
-                                </span>
-                              </Show>
-                              <Show when={mount.driver}>
-                                <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
-                                  {mount.driver}
-                                </span>
-                              </Show>
-                              <Show when={mount.name}>
-                                <span class="rounded bg-purple-100 px-1.5 py-0.5 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
-                                  {mount.name}
-                                </span>
-                              </Show>
-                              <Show when={mount.propagation}>
-                                <span class="rounded bg-gray-100 px-1.5 py-0.5 text-gray-600 dark:bg-gray-800/40 dark:text-gray-300">
-                                  {mount.propagation}
-                                </span>
-                              </Show>
-                            </div>
-                          </div>
-                        );
-                      }}
-                    </For>
-                  </div>
-                </div>
-              </Show>
-
-              <Show when={container.labels && Object.keys(container.labels).length > 0}>
-                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                  <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                    Labels
-                  </div>
-                  <div class="mt-1 flex flex-wrap gap-1 text-[11px] text-gray-600 dark:text-gray-300">
-                    {Object.entries(container.labels!).map(([key, value]) => {
-                      const fullLabel = value ? `${key}: ${value}` : key;
-                      return (
-                        <span
-                          class="max-w-full truncate rounded bg-gray-200 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200"
-                          title={fullLabel}
-                        >
-                          {key}
-                          <Show when={value}>: {value}</Show>
-                        </span>
-                      );
-                    })}
-                  </div>
+              </div>
+              <Show when={runtimeInfo.id === 'podman'}>
+                <div class="mt-3 rounded border border-dashed border-purple-200 px-2 py-1 text-[10px] text-purple-700 dark:border-purple-700/60 dark:text-purple-200">
+                  Podman hosts report container metrics, but Swarm services and tasks are unavailable. Runtime annotations and compose metadata appear below when present.
                 </div>
               </Show>
             </div>
+            <Show when={container.ports && container.ports.length > 0}>
+              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                  Ports
+                </div>
+                <div class="mt-1 flex flex-wrap gap-1 text-[11px] text-gray-600 dark:text-gray-300">
+                  {container.ports!.map((port) => {
+                    const label = port.publicPort
+                      ? `${port.publicPort}:${port.privatePort}/${port.protocol}`
+                      : `${port.privatePort}/${port.protocol}`;
+                    return (
+                      <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+                        {label}
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            </Show>
+
+            <Show when={container.networks && container.networks.length > 0}>
+              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                  Networks
+                </div>
+                <div class="mt-1 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
+                  {container.networks!.map((network) => (
+                    <div class="rounded border border-dashed border-gray-200 p-2 last:mb-0 dark:border-gray-700/70">
+                      <div class="font-medium text-gray-700 dark:text-gray-200">{network.name}</div>
+                      <div class="mt-0.5 flex flex-wrap gap-1 text-[10px] text-gray-500 dark:text-gray-400">
+                        <Show when={network.ipv4}>
+                          <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+                            {network.ipv4}
+                          </span>
+                        </Show>
+                        <Show when={network.ipv6}>
+                          <span class="rounded bg-purple-100 px-1.5 py-0.5 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
+                            {network.ipv6}
+                          </span>
+                        </Show>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </Show>
+
+            <Show when={hasPodmanMetadata()}>
+              <div class="min-w-[220px] flex-1 rounded border border-purple-200 bg-white/70 p-2 shadow-sm dark:border-purple-700/60 dark:bg-purple-950/20">
+                <div class="text-[11px] font-medium uppercase tracking-wide text-purple-700 dark:text-purple-200">
+                  Podman Metadata
+                </div>
+                <div class="mt-1 space-y-2 text-[11px] text-gray-600 dark:text-gray-300">
+                  <For each={podmanMetadataSections()}>
+                    {(section) => (
+                      <div class="space-y-1 border-b border-purple-100 pb-1 last:border-b-0 last:pb-0 dark:border-purple-800/30">
+                        <div class="text-[10px] font-semibold uppercase tracking-wide text-purple-600 dark:text-purple-300">
+                          {section.title}
+                        </div>
+                        <div class="space-y-1">
+                          <For each={section.items}>
+                            {(item) => (
+                              <div class="flex items-start justify-between gap-2">
+                                <span class="font-medium text-gray-700 dark:text-gray-200">{item.label}</span>
+                                <span
+                                  class="max-w-[220px] break-all text-right text-gray-600 dark:text-gray-300"
+                                  title={item.value || '—'}
+                                >
+                                  {item.value || '—'}
+                                </span>
+                              </div>
+                            )}
+                          </For>
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            </Show>
+
+            <Show when={hasBlockIo()}>
+              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                  Block I/O
+                </div>
+                <div class="mt-1 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
+                  <div class="flex items-center justify-between">
+                    <span>Read</span>
+                    <div class="text-right">
+                      <div class="font-semibold text-gray-900 dark:text-gray-100">
+                        {formatBytes(blockIoReadBytes())}
+                      </div>
+                      <Show when={blockIoReadRateLabel()}>
+                        <div class="text-[10px] text-gray-500 dark:text-gray-400">
+                          {blockIoReadRateLabel()}
+                        </div>
+                      </Show>
+                    </div>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <span>Write</span>
+                    <div class="text-right">
+                      <div class="font-semibold text-gray-900 dark:text-gray-100">
+                        {formatBytes(blockIoWriteBytes())}
+                      </div>
+                      <Show when={blockIoWriteRateLabel()}>
+                        <div class="text-[10px] text-gray-500 dark:text-gray-400">
+                          {blockIoWriteRateLabel()}
+                        </div>
+                      </Show>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Show>
+
+            <Show when={hasMounts()}>
+              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                  Mounts
+                </div>
+                <div class="mt-1 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
+                  <For each={mounts()}>
+                    {(mount) => {
+                      const destination = mount.destination || mount.source || mount.name || 'mount';
+                      const rw = mount.rw === false ? 'read-only' : 'read-write';
+                      return (
+                        <div class="rounded border border-dashed border-gray-200 p-2 last:mb-0 dark:border-gray-700/70">
+                          <div class="flex items-center justify-between gap-2">
+                            <span class="truncate font-medium text-gray-700 dark:text-gray-200" title={destination}>
+                              {destination}
+                            </span>
+                            <Show when={mount.type}>
+                              <span class="text-[10px] uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                                {mount.type}
+                              </span>
+                            </Show>
+                          </div>
+                          <Show when={mount.source}>
+                            <div class="mt-1 truncate text-[11px] text-gray-600 dark:text-gray-300" title={mount.source}>
+                              {mount.source}
+                            </div>
+                          </Show>
+                          <div class="mt-1 flex flex-wrap gap-1 text-[10px] text-gray-500 dark:text-gray-400">
+                            <span
+                              class={`rounded px-1.5 py-0.5 ${mount.rw === false
+                                ? 'bg-gray-200 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200'
+                                : 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
+                                }`}
+                            >
+                              {rw}
+                            </span>
+                            <Show when={mount.mode}>
+                              <span class="rounded bg-gray-200 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200">
+                                mode: {mount.mode}
+                              </span>
+                            </Show>
+                            <Show when={mount.driver}>
+                              <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+                                {mount.driver}
+                              </span>
+                            </Show>
+                            <Show when={mount.name}>
+                              <span class="rounded bg-purple-100 px-1.5 py-0.5 text-purple-700 dark:bg-purple-900/40 dark:text-purple-200">
+                                {mount.name}
+                              </span>
+                            </Show>
+                            <Show when={mount.propagation}>
+                              <span class="rounded bg-gray-100 px-1.5 py-0.5 text-gray-600 dark:bg-gray-800/40 dark:text-gray-300">
+                                {mount.propagation}
+                              </span>
+                            </Show>
+                          </div>
+                        </div>
+                      );
+                    }}
+                  </For>
+                </div>
+              </div>
+            </Show>
+
+            <Show when={container.labels && Object.keys(container.labels).length > 0}>
+              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                  Labels
+                </div>
+                <div class="mt-1 flex flex-wrap gap-1 text-[11px] text-gray-600 dark:text-gray-300">
+                  {Object.entries(container.labels!).map(([key, value]) => {
+                    const fullLabel = value ? `${key}: ${value}` : key;
+                    return (
+                      <span
+                        class="max-w-full truncate rounded bg-gray-200 px-1.5 py-0.5 text-gray-700 dark:bg-gray-700/60 dark:text-gray-200"
+                        title={fullLabel}
+                      >
+                        {key}
+                        <Show when={value}>: {value}</Show>
+                      </span>
+                    );
+                  })}
+                </div>
+              </div>
+            </Show>
+          </div>
         </div>
       </Show>
     </>
@@ -1961,125 +1961,125 @@ const DockerServiceRow: Component<{
 
       <Show when={expanded() && hasTasks()}>
         <div class="bg-gray-50 dark:bg-gray-900/60 px-4 py-3">
-            <div class="flex flex-wrap justify-start gap-3">
-              <div class="min-w-[320px] flex-1 rounded border border-gray-200 bg-white/70 p-3 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                <div class="flex items-center justify-between text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                  <span>Tasks</span>
-                  <span class="text-[10px] font-normal text-gray-500 dark:text-gray-400">
-                    {tasks.length} {tasks.length === 1 ? 'entry' : 'entries'}
-                  </span>
-                </div>
-                <div class="mt-2 overflow-x-auto">
-                  <table class="min-w-full divide-y divide-gray-100 dark:divide-gray-800/60 text-xs">
-                    <thead class="bg-gray-100 dark:bg-gray-900/40 text-[10px] uppercase tracking-wide text-gray-600 dark:text-gray-200">
-                      <tr>
-                        <th class="py-1 pr-2 text-left font-medium">Task</th>
-                        <th class="py-1 px-2 text-left font-medium w-[80px]">Type</th>
-                        <th class="py-1 px-2 text-left font-medium">Node</th>
-                        <th class="py-1 px-2 text-left font-medium">State</th>
-                        <th class="py-1 px-2 text-left font-medium w-[120px]">CPU</th>
-                        <th class="py-1 px-2 text-left font-medium w-[140px]">Memory</th>
-                        <th class="py-1 px-2 text-left font-medium">Updated</th>
-                      </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800/50">
-                      <For each={tasks}>
-                        {(task) => {
-                          const container = findContainerForTask(host.containers || [], task);
-                          const cpu = container?.cpuPercent ?? 0;
-                          const mem = container?.memoryPercent ?? 0;
-                          const updated = ensureMs(task.updatedAt ?? task.createdAt ?? task.startedAt);
-                          const taskLabel = () => {
-                            if (task.containerName) return task.containerName;
-                            if (task.containerId) return task.containerId.slice(0, 12);
-                            if (task.slot !== undefined) return `slot-${task.slot}`;
-                            return task.id ?? 'Task';
-                          };
-                          const taskTitle = () => {
-                            const label = taskLabel();
-                            if (task.containerId && task.containerId !== label) {
-                              return `${label} \u2014 ${task.containerId}`;
-                            }
-                            if (task.id && task.id !== label) {
-                              return `${label} \u2014 ${task.id}`;
-                            }
-                            return label;
-                          };
-                          const state = toLower(task.currentState ?? task.desiredState ?? 'unknown');
-                          const taskMetricsKey = container?.id ? buildMetricKey('dockerContainer', container.id) : undefined;
-                          const stateClass = () => {
-                            if (state === 'running') {
-                              return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
-                            }
-                            if (state === 'failed' || state === 'error') {
-                              return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300';
-                            }
-                            return 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
-                          };
-                          return (
-                            <tr class="hover:bg-gray-100 dark:hover:bg-gray-800/40">
-                              <td class="py-1 pr-2">
-                                <div class="flex items-center gap-1 text-sm text-gray-900 dark:text-gray-100">
-                                  <span class="truncate font-medium" title={taskTitle()}>
-                                    {taskLabel()}
+          <div class="flex flex-wrap justify-start gap-3">
+            <div class="min-w-[320px] flex-1 rounded border border-gray-200 bg-white/70 p-3 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+              <div class="flex items-center justify-between text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                <span>Tasks</span>
+                <span class="text-[10px] font-normal text-gray-500 dark:text-gray-400">
+                  {tasks.length} {tasks.length === 1 ? 'entry' : 'entries'}
+                </span>
+              </div>
+              <div class="mt-2 overflow-x-auto">
+                <table class="min-w-full divide-y divide-gray-100 dark:divide-gray-800/60 text-xs">
+                  <thead class="bg-gray-100 dark:bg-gray-900/40 text-[10px] uppercase tracking-wide text-gray-600 dark:text-gray-200">
+                    <tr>
+                      <th class="py-1 pr-2 text-left font-medium">Task</th>
+                      <th class="py-1 px-2 text-left font-medium w-[80px]">Type</th>
+                      <th class="py-1 px-2 text-left font-medium">Node</th>
+                      <th class="py-1 px-2 text-left font-medium">State</th>
+                      <th class="py-1 px-2 text-left font-medium w-[120px]">CPU</th>
+                      <th class="py-1 px-2 text-left font-medium w-[140px]">Memory</th>
+                      <th class="py-1 px-2 text-left font-medium">Updated</th>
+                    </tr>
+                  </thead>
+                  <tbody class="divide-y divide-gray-100 dark:divide-gray-800/50">
+                    <For each={tasks}>
+                      {(task) => {
+                        const container = findContainerForTask(host.containers || [], task);
+                        const cpu = container?.cpuPercent ?? 0;
+                        const mem = container?.memoryPercent ?? 0;
+                        const updated = ensureMs(task.updatedAt ?? task.createdAt ?? task.startedAt);
+                        const taskLabel = () => {
+                          if (task.containerName) return task.containerName;
+                          if (task.containerId) return task.containerId.slice(0, 12);
+                          if (task.slot !== undefined) return `slot-${task.slot}`;
+                          return task.id ?? 'Task';
+                        };
+                        const taskTitle = () => {
+                          const label = taskLabel();
+                          if (task.containerId && task.containerId !== label) {
+                            return `${label} \u2014 ${task.containerId}`;
+                          }
+                          if (task.id && task.id !== label) {
+                            return `${label} \u2014 ${task.id}`;
+                          }
+                          return label;
+                        };
+                        const state = toLower(task.currentState ?? task.desiredState ?? 'unknown');
+                        const taskMetricsKey = container?.id ? buildMetricKey('dockerContainer', container.id) : undefined;
+                        const stateClass = () => {
+                          if (state === 'running') {
+                            return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300';
+                          }
+                          if (state === 'failed' || state === 'error') {
+                            return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300';
+                          }
+                          return 'bg-gray-200 text-gray-600 dark:bg-gray-700 dark:text-gray-300';
+                        };
+                        return (
+                          <tr class="hover:bg-gray-100 dark:hover:bg-gray-800/40">
+                            <td class="py-1 pr-2">
+                              <div class="flex items-center gap-1 text-sm text-gray-900 dark:text-gray-100">
+                                <span class="truncate font-medium" title={taskTitle()}>
+                                  {taskLabel()}
+                                </span>
+                              </div>
+                            </td>
+                            <td class="py-1 px-2">
+                              <span
+                                class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass(
+                                  'task',
+                                )}`}
+                              >
+                                Task
+                              </span>
+                            </td>
+                            <td class="py-1 px-2 text-gray-600 dark:text-gray-400">
+                              {task.nodeName || task.nodeId || '—'}
+                            </td>
+                            <td class="py-1 px-2">
+                              <span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${stateClass()}`}>
+                                {task.currentState || task.desiredState || 'Unknown'}
+                              </span>
+                            </td>
+                            <td class="py-1 px-2 w-[120px]">
+                              <Show when={cpu > 0} fallback={<span class="text-gray-400">—</span>}>
+                                <MetricBar
+                                  value={Math.min(100, cpu)}
+                                  label={formatPercent(cpu)}
+                                  type="cpu"
+                                  resourceId={taskMetricsKey}
+                                />
+                              </Show>
+                            </td>
+                            <td class="py-1 px-2 w-[140px]">
+                              <Show when={mem > 0} fallback={<span class="text-gray-400">—</span>}>
+                                <MetricBar
+                                  value={Math.min(100, mem)}
+                                  label={formatPercent(mem)}
+                                  type="memory"
+                                  resourceId={taskMetricsKey}
+                                />
+                              </Show>
+                            </td>
+                            <td class="py-1 px-2 text-gray-600 dark:text-gray-400 whitespace-nowrap">
+                              <Show when={updated} fallback="—">
+                                {(timestamp) => (
+                                  <span title={new Date(timestamp()).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}>
+                                    {formatRelativeTime(timestamp())}
                                   </span>
-                                </div>
-                              </td>
-                              <td class="py-1 px-2">
-                                <span
-                                  class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass(
-                                    'task',
-                                  )}`}
-                                >
-                                  Task
-                                </span>
-                              </td>
-                              <td class="py-1 px-2 text-gray-600 dark:text-gray-400">
-                                {task.nodeName || task.nodeId || '—'}
-                              </td>
-                              <td class="py-1 px-2">
-                                <span class={`rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${stateClass()}`}>
-                                  {task.currentState || task.desiredState || 'Unknown'}
-                                </span>
-                              </td>
-                              <td class="py-1 px-2 w-[120px]">
-                                <Show when={cpu > 0} fallback={<span class="text-gray-400">—</span>}>
-                                  <MetricBar
-                                    value={Math.min(100, cpu)}
-                                    label={formatPercent(cpu)}
-                                    type="cpu"
-                                    resourceId={taskMetricsKey}
-                                  />
-                                </Show>
-                              </td>
-                              <td class="py-1 px-2 w-[140px]">
-                                <Show when={mem > 0} fallback={<span class="text-gray-400">—</span>}>
-                                  <MetricBar
-                                    value={Math.min(100, mem)}
-                                    label={formatPercent(mem)}
-                                    type="memory"
-                                    resourceId={taskMetricsKey}
-                                  />
-                                </Show>
-                              </td>
-                              <td class="py-1 px-2 text-gray-600 dark:text-gray-400 whitespace-nowrap">
-                                <Show when={updated} fallback="—">
-                                  {(timestamp) => (
-                                    <span title={new Date(timestamp()).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}>
-                                      {formatRelativeTime(timestamp())}
-                                    </span>
-                                  )}
-                                </Show>
-                              </td>
-                            </tr>
-                          );
-                        }}
-                      </For>
-                    </tbody>
-                  </table>
-                </div>
+                                )}
+                              </Show>
+                            </td>
+                          </tr>
+                        );
+                      }}
+                    </For>
+                  </tbody>
+                </table>
               </div>
             </div>
+          </div>
         </div>
       </Show>
     </>
@@ -2411,7 +2411,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
           <div class="overflow-x-auto">
             {/* Header Row */}
             <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-[400px] md:min-w-0"
+              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': gridTemplate() }}
             >
               <For each={visibleColumns()}>
@@ -2464,7 +2464,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
             </div>
 
             {/* Rows */}
-            <div class="divide-y divide-gray-200 dark:divide-gray-700 min-w-[400px] md:min-w-0">
+            <div class="divide-y divide-gray-200 dark:divide-gray-700 min-w-[520px] md:min-w-0">
               <Show
                 when={isGroupedView()}
                 fallback={
diff --git a/frontend-modern/src/components/Hosts/HostsOverview.tsx b/frontend-modern/src/components/Hosts/HostsOverview.tsx
index 19b95d966..fa698c822 100644
--- a/frontend-modern/src/components/Hosts/HostsOverview.tsx
+++ b/frontend-modern/src/components/Hosts/HostsOverview.tsx
@@ -171,345 +171,345 @@ export const HostsOverview: Component<HostsOverviewProps> = (props) => {
                 }
               >
                 <Card padding="none" class="overflow-hidden">
-                      <ScrollableTable>
-                        <table class="w-full border-collapse">
-                          <thead>
-                            <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
-                              <th class="pl-4 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[24%]">
-                                Host
-                              </th>
-                              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]">
-                                Platform
-                              </th>
-                              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
-                                CPU
-                              </th>
-                              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
-                                Memory
-                              </th>
-                              <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%]">
-                                Uptime
-                              </th>
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <For each={filteredHosts()}>
-                              {(host) => {
-                                const cpuPercent = () => host.cpuUsage ?? 0;
-                                const memPercent = () => host.memory?.usage ?? 0;
-                                const memUsed = () => formatBytes(host.memory?.used ?? 0, 0);
-                                const memTotal = () => formatBytes(host.memory?.total ?? 0, 0);
-                                const hostStatus = createMemo(() => getHostStatusIndicator(host));
+                  <ScrollableTable>
+                    <table class="w-full border-collapse">
+                      <thead>
+                        <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
+                          <th class="pl-4 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[24%]">
+                            Host
+                          </th>
+                          <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%]">
+                            Platform
+                          </th>
+                          <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
+                            CPU
+                          </th>
+                          <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%]">
+                            Memory
+                          </th>
+                          <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[14%]">
+                            Uptime
+                          </th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <For each={filteredHosts()}>
+                          {(host) => {
+                            const cpuPercent = () => host.cpuUsage ?? 0;
+                            const memPercent = () => host.memory?.usage ?? 0;
+                            const memUsed = () => formatBytes(host.memory?.used ?? 0, 0);
+                            const memTotal = () => formatBytes(host.memory?.total ?? 0, 0);
+                            const hostStatus = createMemo(() => getHostStatusIndicator(host));
 
-                                // Drawer state
-                                const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(host.id) ?? false);
+                            // Drawer state
+                            const [drawerOpen, setDrawerOpen] = createSignal(drawerState.get(host.id) ?? false);
 
-                                // Check if we have additional info to show in drawer
-                                const hasDrawerContent = createMemo(() => {
-                                  return (
-                                    (host.disks && host.disks.length > 0) ||
-                                    (host.networkInterfaces && host.networkInterfaces.length > 0) ||
-                                    (host.raid && host.raid.length > 0) ||
-                                    host.loadAverage ||
-                                    host.cpuCount ||
-                                    host.kernelVersion ||
-                                    host.architecture ||
-                                    host.agentVersion ||
-                                    (host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0)
-                                  );
-                                });
+                            // Check if we have additional info to show in drawer
+                            const hasDrawerContent = createMemo(() => {
+                              return (
+                                (host.disks && host.disks.length > 0) ||
+                                (host.networkInterfaces && host.networkInterfaces.length > 0) ||
+                                (host.raid && host.raid.length > 0) ||
+                                host.loadAverage ||
+                                host.cpuCount ||
+                                host.kernelVersion ||
+                                host.architecture ||
+                                host.agentVersion ||
+                                (host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0)
+                              );
+                            });
 
-                                const toggleDrawer = (event: MouseEvent) => {
-                                  if (!hasDrawerContent()) return;
-                                  const target = event.target as HTMLElement;
-                                  if (target.closest('a, button, [data-prevent-toggle]')) {
-                                    return;
-                                  }
-                                  setDrawerOpen((prev) => !prev);
-                                };
+                            const toggleDrawer = (event: MouseEvent) => {
+                              if (!hasDrawerContent()) return;
+                              const target = event.target as HTMLElement;
+                              if (target.closest('a, button, [data-prevent-toggle]')) {
+                                return;
+                              }
+                              setDrawerOpen((prev) => !prev);
+                            };
 
-                                // Sync drawer state
-                                createEffect(on(() => host.id, (id) => {
-                                  const stored = drawerState.get(id);
-                                  if (stored !== undefined) {
-                                    setDrawerOpen(stored);
-                                  } else {
-                                    setDrawerOpen(false);
-                                  }
-                                }));
+                            // Sync drawer state
+                            createEffect(on(() => host.id, (id) => {
+                              const stored = drawerState.get(id);
+                              if (stored !== undefined) {
+                                setDrawerOpen(stored);
+                              } else {
+                                setDrawerOpen(false);
+                              }
+                            }));
 
-                                createEffect(() => {
-                                  drawerState.set(host.id, drawerOpen());
-                                });
+                            createEffect(() => {
+                              drawerState.set(host.id, drawerOpen());
+                            });
 
-                                const rowClass = () => {
-                                  const base = 'border-b border-gray-200 dark:border-gray-700 transition-all duration-200';
-                                  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' : '';
-                                  return `${base} ${hover} ${clickable} ${expanded}`;
-                                };
+                            const rowClass = () => {
+                              const base = 'border-b border-gray-200 dark:border-gray-700 transition-all duration-200';
+                              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' : '';
+                              return `${base} ${hover} ${clickable} ${expanded}`;
+                            };
 
-                                return (
-                                  <>
-                                    <tr class={rowClass()} onClick={toggleDrawer} aria-expanded={drawerOpen()}>
-                                      <td class="pl-4 pr-2 py-2">
-                                        <div>
-                                          <div class="flex items-center gap-2">
-                                            <StatusDot
-                                              variant={hostStatus().variant}
-                                              title={hostStatus().label}
-                                              ariaLabel={hostStatus().label}
-                                              size="xs"
-                                            />
-                                            <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
-                                              {host.displayName || host.hostname || host.id}
-                                            </p>
+                            return (
+                              <>
+                                <tr class={rowClass()} onClick={toggleDrawer} aria-expanded={drawerOpen()}>
+                                  <td class="pl-4 pr-2 py-2">
+                                    <div>
+                                      <div class="flex items-center gap-2 min-w-0">
+                                        <StatusDot
+                                          variant={hostStatus().variant}
+                                          title={hostStatus().label}
+                                          ariaLabel={hostStatus().label}
+                                          size="xs"
+                                        />
+                                        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 truncate">
+                                          {host.displayName || host.hostname || host.id}
+                                        </p>
+                                      </div>
+                                      <Show when={host.displayName && host.displayName !== host.hostname}>
+                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
+                                          {host.hostname}
+                                        </p>
+                                      </Show>
+                                      <Show when={host.lastSeen}>
+                                        <p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5 truncate">
+                                          Updated {formatRelativeTime(host.lastSeen!)}
+                                        </p>
+                                      </Show>
+                                    </div>
+                                  </td>
+                                  <td class="px-2 py-2">
+                                    <div class="text-xs text-gray-700 dark:text-gray-300">
+                                      <p class="font-medium capitalize">{host.platform || '—'}</p>
+                                      <Show when={host.osName}>
+                                        <p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
+                                          {host.osName} {host.osVersion}
+                                        </p>
+                                      </Show>
+                                    </div>
+                                  </td>
+                                  <td class="px-2 py-2">
+                                    <Show
+                                      when={cpuPercent() > 0}
+                                      fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
+                                    >
+                                      <MetricBar
+                                        label={formatPercent(cpuPercent())}
+                                        value={cpuPercent()}
+                                        type="cpu"
+                                      />
+                                    </Show>
+                                  </td>
+                                  <td class="px-2 py-2">
+                                    <Show
+                                      when={memPercent() > 0}
+                                      fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
+                                    >
+                                      <MetricBar
+                                        label={`${memUsed()} / ${memTotal()}`}
+                                        value={memPercent()}
+                                        type="memory"
+                                      />
+                                    </Show>
+                                  </td>
+                                  <td class="px-2 py-2">
+                                    <Show
+                                      when={host.uptimeSeconds}
+                                      fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
+                                    >
+                                      <span class="text-xs text-gray-700 dark:text-gray-300">
+                                        {formatUptime(host.uptimeSeconds!)}
+                                      </span>
+                                    </Show>
+                                  </td>
+                                </tr>
+
+                                {/* Drawer - Additional Info */}
+                                <Show when={drawerOpen() && hasDrawerContent()}>
+                                  <tr class="bg-gray-50 dark:bg-gray-900/50">
+                                    <td class="px-4 py-3" colSpan={5}>
+                                      <div class="flex flex-wrap justify-start gap-3">
+                                        {/* System Info */}
+                                        <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                                          <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">System</div>
+                                          <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
+                                            <Show when={host.cpuCount}>
+                                              <div class="flex items-center justify-between gap-2">
+                                                <span class="font-medium text-gray-700 dark:text-gray-200">CPUs</span>
+                                                <span class="text-right text-gray-600 dark:text-gray-300">{host.cpuCount}</span>
+                                              </div>
+                                            </Show>
+                                            <Show when={host.loadAverage && host.loadAverage.length > 0}>
+                                              <div class="flex items-center justify-between gap-2">
+                                                <span class="font-medium text-gray-700 dark:text-gray-200">Load Avg</span>
+                                                <span class="text-right text-gray-600 dark:text-gray-300">{host.loadAverage!.map(l => l.toFixed(2)).join(', ')}</span>
+                                              </div>
+                                            </Show>
+                                            <Show when={host.architecture}>
+                                              <div class="flex items-center justify-between gap-2">
+                                                <span class="font-medium text-gray-700 dark:text-gray-200">Arch</span>
+                                                <span class="text-right text-gray-600 dark:text-gray-300">{host.architecture}</span>
+                                              </div>
+                                            </Show>
+                                            <Show when={host.kernelVersion}>
+                                              <div class="flex items-center justify-between gap-2">
+                                                <span class="font-medium text-gray-700 dark:text-gray-200">Kernel</span>
+                                                <span class="text-right text-gray-600 dark:text-gray-300 truncate">{host.kernelVersion}</span>
+                                              </div>
+                                            </Show>
+                                            <Show when={host.agentVersion}>
+                                              <div class="flex items-center justify-between gap-2">
+                                                <span class="font-medium text-gray-700 dark:text-gray-200">Agent</span>
+                                                <span class="text-right text-gray-600 dark:text-gray-300">{host.agentVersion}</span>
+                                              </div>
+                                            </Show>
                                           </div>
-                                          <Show when={host.displayName && host.displayName !== host.hostname}>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                                              {host.hostname}
-                                            </p>
-                                          </Show>
-                                          <Show when={host.lastSeen}>
-                                            <p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
-                                              Updated {formatRelativeTime(host.lastSeen!)}
-                                            </p>
-                                          </Show>
                                         </div>
-                                      </td>
-                                      <td class="px-2 py-2">
-                                        <div class="text-xs text-gray-700 dark:text-gray-300">
-                                          <p class="font-medium capitalize">{host.platform || '—'}</p>
-                                          <Show when={host.osName}>
-                                            <p class="text-[10px] text-gray-500 dark:text-gray-400 mt-0.5">
-                                              {host.osName} {host.osVersion}
-                                            </p>
-                                          </Show>
-                                        </div>
-                                      </td>
-                                      <td class="px-2 py-2">
-                                        <Show
-                                          when={cpuPercent() > 0}
-                                          fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
-                                        >
-                                          <MetricBar
-                                            label={formatPercent(cpuPercent())}
-                                            value={cpuPercent()}
-                                            type="cpu"
-                                          />
-                                        </Show>
-                                      </td>
-                                      <td class="px-2 py-2">
-                                        <Show
-                                          when={memPercent() > 0}
-                                          fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
-                                        >
-                                          <MetricBar
-                                            label={`${memUsed()} / ${memTotal()}`}
-                                            value={memPercent()}
-                                            type="memory"
-                                          />
-                                        </Show>
-                                      </td>
-                                      <td class="px-2 py-2">
-                                        <Show
-                                          when={host.uptimeSeconds}
-                                          fallback={<span class="text-xs text-gray-500 dark:text-gray-400">—</span>}
-                                        >
-                                          <span class="text-xs text-gray-700 dark:text-gray-300">
-                                            {formatUptime(host.uptimeSeconds!)}
-                                          </span>
-                                        </Show>
-                                      </td>
-                                    </tr>
 
-                                    {/* Drawer - Additional Info */}
-                                    <Show when={drawerOpen() && hasDrawerContent()}>
-                                      <tr class="bg-gray-50 dark:bg-gray-900/50">
-                                        <td class="px-4 py-3" colSpan={5}>
-                                          <div class="flex flex-wrap justify-start gap-3">
-                                            {/* System Info */}
-                                            <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                                              <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">System</div>
-                                              <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
-                                                <Show when={host.cpuCount}>
-                                                  <div class="flex items-center justify-between gap-2">
-                                                    <span class="font-medium text-gray-700 dark:text-gray-200">CPUs</span>
-                                                    <span class="text-right text-gray-600 dark:text-gray-300">{host.cpuCount}</span>
-                                                  </div>
-                                                </Show>
-                                                <Show when={host.loadAverage && host.loadAverage.length > 0}>
-                                                  <div class="flex items-center justify-between gap-2">
-                                                    <span class="font-medium text-gray-700 dark:text-gray-200">Load Avg</span>
-                                                    <span class="text-right text-gray-600 dark:text-gray-300">{host.loadAverage!.map(l => l.toFixed(2)).join(', ')}</span>
-                                                  </div>
-                                                </Show>
-                                                <Show when={host.architecture}>
-                                                  <div class="flex items-center justify-between gap-2">
-                                                    <span class="font-medium text-gray-700 dark:text-gray-200">Arch</span>
-                                                    <span class="text-right text-gray-600 dark:text-gray-300">{host.architecture}</span>
-                                                  </div>
-                                                </Show>
-                                                <Show when={host.kernelVersion}>
-                                                  <div class="flex items-center justify-between gap-2">
-                                                    <span class="font-medium text-gray-700 dark:text-gray-200">Kernel</span>
-                                                    <span class="text-right text-gray-600 dark:text-gray-300 truncate">{host.kernelVersion}</span>
-                                                  </div>
-                                                </Show>
-                                                <Show when={host.agentVersion}>
-                                                  <div class="flex items-center justify-between gap-2">
-                                                    <span class="font-medium text-gray-700 dark:text-gray-200">Agent</span>
-                                                    <span class="text-right text-gray-600 dark:text-gray-300">{host.agentVersion}</span>
-                                                  </div>
-                                                </Show>
-                                              </div>
-                                            </div>
-
-                                            {/* Network Interfaces */}
-                                            <Show when={host.networkInterfaces && host.networkInterfaces.length > 0}>
-                                              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                                                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Network</div>
-                                                <div class="mt-2 space-y-2 text-[11px]">
-                                                  <For each={host.networkInterfaces?.slice(0, 4)}>
-                                                    {(iface) => (
-                                                      <div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
-                                                        <div class="font-medium text-gray-700 dark:text-gray-200">{iface.name}</div>
-                                                        <Show when={iface.addresses && iface.addresses.length > 0}>
-                                                          <div class="flex flex-wrap gap-1 mt-1 text-[10px]">
-                                                            <For each={iface.addresses}>
-                                                              {(addr) => (
-                                                                <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
-                                                                  {addr}
-                                                                </span>
-                                                              )}
-                                                            </For>
-                                                          </div>
-                                                        </Show>
-                                                      </div>
-                                                    )}
-                                                  </For>
-                                                </div>
-                                              </div>
-                                            </Show>
-
-                                            {/* Disk Info */}
-                                            <Show when={host.disks && host.disks.length > 0}>
-                                              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                                                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Disks</div>
-                                                <div class="mt-2 space-y-2 text-[11px]">
-                                                  <For each={host.disks?.slice(0, 3)}>
-                                                    {(disk) => {
-                                                      const diskPercent = () => disk.usage ?? 0;
-                                                      return (
-                                                        <div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
-                                                          <div class="flex items-center justify-between">
-                                                            <span class="font-medium text-gray-700 dark:text-gray-200 truncate">{disk.mountpoint || disk.device}</span>
-                                                            <span class="text-[10px] text-gray-500 dark:text-gray-400">
-                                                              {formatBytes(disk.used ?? 0, 0)} / {formatBytes(disk.total ?? 0, 0)}
+                                        {/* Network Interfaces */}
+                                        <Show when={host.networkInterfaces && host.networkInterfaces.length > 0}>
+                                          <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                                            <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Network</div>
+                                            <div class="mt-2 space-y-2 text-[11px]">
+                                              <For each={host.networkInterfaces?.slice(0, 4)}>
+                                                {(iface) => (
+                                                  <div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
+                                                    <div class="font-medium text-gray-700 dark:text-gray-200">{iface.name}</div>
+                                                    <Show when={iface.addresses && iface.addresses.length > 0}>
+                                                      <div class="flex flex-wrap gap-1 mt-1 text-[10px]">
+                                                        <For each={iface.addresses}>
+                                                          {(addr) => (
+                                                            <span class="rounded bg-blue-100 px-1.5 py-0.5 text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+                                                              {addr}
                                                             </span>
-                                                          </div>
-                                                          <Show when={diskPercent() > 0}>
-                                                            <div class="mt-1">
-                                                              <MetricBar
-                                                                value={diskPercent()}
-                                                                label={formatPercent(diskPercent())}
-                                                                type="disk"
-                                                              />
-                                                            </div>
-                                                          </Show>
-                                                        </div>
-                                                      );
-                                                    }}
-                                                  </For>
-                                                </div>
-                                              </div>
-                                            </Show>
+                                                          )}
+                                                        </For>
+                                                      </div>
+                                                    </Show>
+                                                  </div>
+                                                )}
+                                              </For>
+                                            </div>
+                                          </div>
+                                        </Show>
 
-                                            {/* Temperature Sensors */}
-                                            <Show when={host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0}>
-                                              <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                                                <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Temperatures</div>
-                                                <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
-                                                  <For each={Object.entries(host.sensors!.temperatureCelsius!).slice(0, 5)}>
-                                                    {([name, temp]) => (
-                                                      <div class="flex items-center justify-between gap-2">
-                                                        <span class="font-medium text-gray-700 dark:text-gray-200 truncate">{name}</span>
-                                                        <span class={`text-right ${temp > 80 ? 'text-red-600 dark:text-red-400 font-semibold' : 'text-gray-600 dark:text-gray-300'}`}>
-                                                          {temp.toFixed(1)}°C
+                                        {/* Disk Info */}
+                                        <Show when={host.disks && host.disks.length > 0}>
+                                          <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                                            <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Disks</div>
+                                            <div class="mt-2 space-y-2 text-[11px]">
+                                              <For each={host.disks?.slice(0, 3)}>
+                                                {(disk) => {
+                                                  const diskPercent = () => disk.usage ?? 0;
+                                                  return (
+                                                    <div class="rounded border border-dashed border-gray-200 p-2 dark:border-gray-700/70">
+                                                      <div class="flex items-center justify-between">
+                                                        <span class="font-medium text-gray-700 dark:text-gray-200 truncate">{disk.mountpoint || disk.device}</span>
+                                                        <span class="text-[10px] text-gray-500 dark:text-gray-400">
+                                                          {formatBytes(disk.used ?? 0, 0)} / {formatBytes(disk.total ?? 0, 0)}
                                                         </span>
                                                       </div>
-                                                    )}
-                                                  </For>
-                                                </div>
-                                              </div>
-                                            </Show>
-
-                                            {/* RAID Arrays */}
-                                            <Show when={host.raid && host.raid.length > 0}>
-                                              <For each={host.raid!}>
-                                                {(array) => {
-                                                  const isDegraded = () => array.state.toLowerCase().includes('degraded') || array.failedDevices > 0;
-                                                  const isRebuilding = () => array.state.toLowerCase().includes('recover') || array.state.toLowerCase().includes('resync') || array.rebuildPercent > 0;
-                                                  const isHealthy = () => !isDegraded() && !isRebuilding() && array.state.toLowerCase().includes('clean');
-
-                                                  const stateColor = () => {
-                                                    if (isDegraded()) return 'text-red-600 dark:text-red-400 font-semibold';
-                                                    if (isRebuilding()) return 'text-amber-600 dark:text-amber-400 font-semibold';
-                                                    if (isHealthy()) return 'text-green-600 dark:text-green-400';
-                                                    return 'text-gray-600 dark:text-gray-300';
-                                                  };
-
-                                                  return (
-                                                    <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
-                                                      <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
-                                                        RAID {array.level.replace('raid', '')} - {array.device}
-                                                      </div>
-                                                      <div class="mt-2 space-y-1 text-[11px]">
-                                                        <div class="flex items-center justify-between gap-2">
-                                                          <span class="font-medium text-gray-700 dark:text-gray-200">State</span>
-                                                          <span class={stateColor()}>{array.state}</span>
+                                                      <Show when={diskPercent() > 0}>
+                                                        <div class="mt-1">
+                                                          <MetricBar
+                                                            value={diskPercent()}
+                                                            label={formatPercent(diskPercent())}
+                                                            type="disk"
+                                                          />
                                                         </div>
-                                                        <div class="flex items-center justify-between gap-2">
-                                                          <span class="font-medium text-gray-700 dark:text-gray-200">Devices</span>
-                                                          <span class="text-gray-600 dark:text-gray-300">
-                                                            {array.activeDevices}/{array.totalDevices}
-                                                            {array.failedDevices > 0 && <span class="text-red-600 dark:text-red-400"> ({array.failedDevices} failed)</span>}
-                                                          </span>
-                                                        </div>
-                                                        <Show when={isRebuilding() && array.rebuildPercent > 0}>
-                                                          <div class="flex items-center justify-between gap-2">
-                                                            <span class="font-medium text-gray-700 dark:text-gray-200">Rebuild</span>
-                                                            <span class="text-amber-600 dark:text-amber-400 font-medium">
-                                                              {array.rebuildPercent.toFixed(1)}%
-                                                            </span>
-                                                          </div>
-                                                          <Show when={array.rebuildSpeed}>
-                                                            <div class="flex items-center justify-between gap-2">
-                                                              <span class="font-medium text-gray-700 dark:text-gray-200">Speed</span>
-                                                              <span class="text-gray-600 dark:text-gray-300">{array.rebuildSpeed}</span>
-                                                            </div>
-                                                          </Show>
-                                                        </Show>
-                                                      </div>
+                                                      </Show>
                                                     </div>
                                                   );
                                                 }}
                                               </For>
-                                            </Show>
+                                            </div>
                                           </div>
-                                        </td>
-                                      </tr>
-                                    </Show>
-                                  </>
-                                );
-                              }}
-                            </For>
-                          </tbody>
-                        </table>
-                      </ScrollableTable>
-                    </Card>
-                  </Show>
+                                        </Show>
+
+                                        {/* Temperature Sensors */}
+                                        <Show when={host.sensors?.temperatureCelsius && Object.keys(host.sensors.temperatureCelsius).length > 0}>
+                                          <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                                            <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">Temperatures</div>
+                                            <div class="mt-2 space-y-1 text-[11px] text-gray-600 dark:text-gray-300">
+                                              <For each={Object.entries(host.sensors!.temperatureCelsius!).slice(0, 5)}>
+                                                {([name, temp]) => (
+                                                  <div class="flex items-center justify-between gap-2">
+                                                    <span class="font-medium text-gray-700 dark:text-gray-200 truncate">{name}</span>
+                                                    <span class={`text-right ${temp > 80 ? 'text-red-600 dark:text-red-400 font-semibold' : 'text-gray-600 dark:text-gray-300'}`}>
+                                                      {temp.toFixed(1)}°C
+                                                    </span>
+                                                  </div>
+                                                )}
+                                              </For>
+                                            </div>
+                                          </div>
+                                        </Show>
+
+                                        {/* RAID Arrays */}
+                                        <Show when={host.raid && host.raid.length > 0}>
+                                          <For each={host.raid!}>
+                                            {(array) => {
+                                              const isDegraded = () => array.state.toLowerCase().includes('degraded') || array.failedDevices > 0;
+                                              const isRebuilding = () => array.state.toLowerCase().includes('recover') || array.state.toLowerCase().includes('resync') || array.rebuildPercent > 0;
+                                              const isHealthy = () => !isDegraded() && !isRebuilding() && array.state.toLowerCase().includes('clean');
+
+                                              const stateColor = () => {
+                                                if (isDegraded()) return 'text-red-600 dark:text-red-400 font-semibold';
+                                                if (isRebuilding()) return 'text-amber-600 dark:text-amber-400 font-semibold';
+                                                if (isHealthy()) return 'text-green-600 dark:text-green-400';
+                                                return 'text-gray-600 dark:text-gray-300';
+                                              };
+
+                                              return (
+                                                <div class="min-w-[220px] flex-1 rounded border border-gray-200 bg-white/70 p-2 shadow-sm dark:border-gray-600/70 dark:bg-gray-900/30">
+                                                  <div class="text-[11px] font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
+                                                    RAID {array.level.replace('raid', '')} - {array.device}
+                                                  </div>
+                                                  <div class="mt-2 space-y-1 text-[11px]">
+                                                    <div class="flex items-center justify-between gap-2">
+                                                      <span class="font-medium text-gray-700 dark:text-gray-200">State</span>
+                                                      <span class={stateColor()}>{array.state}</span>
+                                                    </div>
+                                                    <div class="flex items-center justify-between gap-2">
+                                                      <span class="font-medium text-gray-700 dark:text-gray-200">Devices</span>
+                                                      <span class="text-gray-600 dark:text-gray-300">
+                                                        {array.activeDevices}/{array.totalDevices}
+                                                        {array.failedDevices > 0 && <span class="text-red-600 dark:text-red-400"> ({array.failedDevices} failed)</span>}
+                                                      </span>
+                                                    </div>
+                                                    <Show when={isRebuilding() && array.rebuildPercent > 0}>
+                                                      <div class="flex items-center justify-between gap-2">
+                                                        <span class="font-medium text-gray-700 dark:text-gray-200">Rebuild</span>
+                                                        <span class="text-amber-600 dark:text-amber-400 font-medium">
+                                                          {array.rebuildPercent.toFixed(1)}%
+                                                        </span>
+                                                      </div>
+                                                      <Show when={array.rebuildSpeed}>
+                                                        <div class="flex items-center justify-between gap-2">
+                                                          <span class="font-medium text-gray-700 dark:text-gray-200">Speed</span>
+                                                          <span class="text-gray-600 dark:text-gray-300">{array.rebuildSpeed}</span>
+                                                        </div>
+                                                      </Show>
+                                                    </Show>
+                                                  </div>
+                                                </div>
+                                              );
+                                            }}
+                                          </For>
+                                        </Show>
+                                      </div>
+                                    </td>
+                                  </tr>
+                                </Show>
+                              </>
+                            );
+                          }}
+                        </For>
+                      </tbody>
+                    </table>
+                  </ScrollableTable>
+                </Card>
+              </Show>
             </>
           }
         >
diff --git a/frontend-modern/src/components/PMG/MailGateway.tsx b/frontend-modern/src/components/PMG/MailGateway.tsx
index 6f13b5427..d1d74c851 100644
--- a/frontend-modern/src/components/PMG/MailGateway.tsx
+++ b/frontend-modern/src/components/PMG/MailGateway.tsx
@@ -422,7 +422,7 @@ const MailGateway: Component = () => {
 
                                 return (
                                   <tr>
-                                    <td class="px-2 py-1.5 text-xs font-medium text-gray-900 dark:text-gray-100">{node.name}</td>
+                                    <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">
                                       <div class="flex items-center gap-1.5">
diff --git a/frontend-modern/src/components/Replication/Replication.tsx b/frontend-modern/src/components/Replication/Replication.tsx
index b2b0e80b2..fe7790cd1 100644
--- a/frontend-modern/src/components/Replication/Replication.tsx
+++ b/frontend-modern/src/components/Replication/Replication.tsx
@@ -123,7 +123,7 @@ const Replication: Component = () => {
                       return (
                         <tr class="hover:bg-gray-50/80 dark:hover:bg-gray-900/40 transition-colors">
                           <td class="px-4 py-3">
-                            <div class="font-medium text-gray-900 dark:text-gray-100">
+                            <div class="font-medium text-gray-900 dark:text-gray-100 truncate max-w-[200px]">
                               {job.guestName || `VM ${job.guestId ?? ''}`}
                             </div>
                             <div class="text-xs text-gray-500 dark:text-gray-400">
diff --git a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
index cfaca1daf..771f0b0c2 100644
--- a/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
+++ b/frontend-modern/src/components/Settings/ConfiguredNodeTables.tsx
@@ -319,7 +319,7 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
                           <p class="font-medium text-gray-900 dark:text-gray-100 truncate">
                             {node.name}
                           </p>
-                          <p class="text-xs text-gray-600 dark:text-gray-400 break-all">
+                          <p class="text-xs text-gray-600 dark:text-gray-400 truncate">
                             {node.host}
                           </p>
                         </div>
@@ -339,16 +339,16 @@ export const PveNodesTable: Component<PveNodesTableProps> = (props) => {
                                   const pulseStatus = endpoint.PulseReachable === null || endpoint.PulseReachable === undefined
                                     ? 'unknown'
                                     : endpoint.PulseReachable
-                                    ? 'reachable'
-                                    : 'unreachable';
+                                      ? 'reachable'
+                                      : 'unreachable';
 
                                   const statusColor = endpoint.Online && pulseStatus === 'reachable'
                                     ? 'border-green-200 bg-green-50 text-green-700 dark:border-green-700 dark:bg-green-900/20 dark:text-green-300'
                                     : pulseStatus === 'unreachable'
-                                    ? 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300'
-                                    : endpoint.Online
-                                    ? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
-                                    : 'border-gray-200 bg-gray-100 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400';
+                                      ? 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-300'
+                                      : endpoint.Online
+                                        ? 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-700 dark:bg-blue-900/20 dark:text-blue-300'
+                                        : 'border-gray-200 bg-gray-100 text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400';
 
                                   return (
                                     <div class={`rounded border px-3 py-2 text-[0.7rem] ${statusColor}`}>
@@ -576,7 +576,7 @@ export const PbsNodesTable: Component<PbsNodesTableProps> = (props) => {
                           <p class="font-medium text-gray-900 dark:text-gray-100 truncate">
                             {node.name}
                           </p>
-                          <p class="text-xs text-gray-600 dark:text-gray-400 break-all">
+                          <p class="text-xs text-gray-600 dark:text-gray-400 truncate">
                             {node.host}
                           </p>
                         </div>
@@ -759,7 +759,7 @@ export const PmgNodesTable: Component<PmgNodesTableProps> = (props) => {
                           <p class="font-medium text-gray-900 dark:text-gray-100 truncate">
                             {node.name}
                           </p>
-                          <p class="text-xs text-gray-600 dark:text-gray-400 break-all">
+                          <p class="text-xs text-gray-600 dark:text-gray-400 truncate">
                             {node.host}
                           </p>
                         </div>
diff --git a/internal/api/router.go b/internal/api/router.go
index 18bd1aa11..a796abd95 100644
--- a/internal/api/router.go
+++ b/internal/api/router.go
@@ -1469,6 +1469,10 @@ func (r *Router) ServeHTTP(w http.ResponseWriter, req *http.Request) {
 		if req.URL.Path == "/api/setup-script-url" {
 			skipCSRF = true
 		}
+		// Skip CSRF for bootstrap token validation (used during initial setup before session exists)
+		if req.URL.Path == "/api/security/validate-bootstrap-token" {
+			skipCSRF = true
+		}
 		if strings.HasPrefix(req.URL.Path, "/api/") && !skipCSRF && !CheckCSRF(w, req) {
 			http.Error(w, "CSRF token validation failed", http.StatusForbidden)
 			LogAuditEvent("csrf_failure", "", GetClientIP(req), req.URL.Path, false, "Invalid CSRF token")
diff --git a/mock.env b/mock.env
index a698f3946..dae2cf5b9 100644
--- a/mock.env
+++ b/mock.env
@@ -1 +1,6 @@
-PULSE_MOCK_MODE=false
+PULSE_MOCK_MODE=true
+PULSE_MOCK_NODES=7
+PULSE_MOCK_VMS_PER_NODE=5
+PULSE_MOCK_LXCS_PER_NODE=8
+PULSE_MOCK_RANDOM_METRICS=true
+PULSE_MOCK_STOPPED_PERCENT=20