diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index 63c2fa6..6ea7f51 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -1353,8 +1353,8 @@ const UnifiedBackups: Component = () => {
                       type="button"
                       onClick={() => setChartTimeRange(7)}
                       class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 7
-                          ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
-                          : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
+                        ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
+                        : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
                         }`}
                     >
                       7d
@@ -1363,8 +1363,8 @@ const UnifiedBackups: Component = () => {
                       type="button"
                       onClick={() => setChartTimeRange(30)}
                       class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 30
-                          ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
-                          : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
+                        ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
+                        : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
                         }`}
                     >
                       30d
@@ -1373,8 +1373,8 @@ const UnifiedBackups: Component = () => {
                       type="button"
                       onClick={() => setChartTimeRange(90)}
                       class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 90
-                          ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
-                          : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
+                        ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
+                        : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
                         }`}
                     >
                       90d
@@ -1383,8 +1383,8 @@ const UnifiedBackups: Component = () => {
                       type="button"
                       onClick={() => setChartTimeRange(365)}
                       class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${chartTimeRange() === 365
-                          ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
-                          : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
+                        ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-700'
+                        : 'border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700'
                         }`}
                     >
                       1y
@@ -1871,7 +1871,6 @@ const UnifiedBackups: Component = () => {
           .backup-table {
             table-layout: fixed;
             width: 100%;
-            min-width: 1200px;
           }
           .backup-table th,
           .backup-table td {
@@ -1954,8 +1953,8 @@ const UnifiedBackups: Component = () => {
                                 <div class="flex items-center gap-2 min-w-0 flex-1">
                                   <span
                                     class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0 ${item.type === 'VM'
-                                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                                        : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                                      ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
+                                      : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
                                       }`}
                                   >
                                     {item.type}
@@ -1968,10 +1967,10 @@ const UnifiedBackups: Component = () => {
                                 <div class="flex items-center gap-2 shrink-0">
                                   <span
                                     class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${item.backupType === 'snapshot'
-                                        ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-                                        : item.backupType === 'local'
-                                          ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-                                          : 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200'
+                                      ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
+                                      : item.backupType === 'local'
+                                        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+                                        : 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200'
                                       }`}
                                   >
                                     {item.backupType === 'snapshot'
@@ -2036,76 +2035,67 @@ const UnifiedBackups: Component = () => {
                 </div>
 
                 {/* Desktop Table View */}
-                <table class="backup-table hidden lg:table">
+                <table class="backup-table hidden md:table">
                   <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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%] min-w-[60px]"
                         onClick={() => handleSort('vmid')}
-                        style="width: 60px;"
                       >
                         {hasHostBackups() ? 'VMID/Host' : 'VMID'}{' '}
                         {sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%] min-w-[60px]"
                         onClick={() => handleSort('type')}
-                        style="width: 60px;"
                       >
                         Type {sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-auto"
                         onClick={() => handleSort('name')}
-                        style="width: 150px;"
                       >
                         Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="hidden xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
                         onClick={() => handleSort('node')}
-                        style="width: 100px;"
                       >
                         Node {sortKey() === 'node' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <Show when={backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'}>
                         <th
-                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="hidden 2xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
                           onClick={() => handleSort('owner')}
-                          style="width: 80px;"
                         >
                           Owner {sortKey() === 'owner' && (sortDirection() === 'asc' ? '▲' : '▼')}
                         </th>
                       </Show>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[14%] min-w-[120px]"
                         onClick={() => handleSort('backupTime')}
-                        style="width: 140px;"
                       >
                         Time {sortKey() === 'backupTime' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <Show when={backupTypeFilter() !== 'snapshot'}>
                         <th
-                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
                           onClick={() => handleSort('size')}
-                          style="width: 80px;"
                         >
                           Size {sortKey() === 'size' && (sortDirection() === 'asc' ? '▲' : '▼')}
                         </th>
                       </Show>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[8%]"
                         onClick={() => handleSort('backupType')}
-                        style="width: 80px;"
                       >
                         Backup{' '}
                         {sortKey() === 'backupType' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <Show when={backupTypeFilter() !== 'snapshot'}>
                         <th
-                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="hidden xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[12%]"
                           onClick={() => handleSort('storage')}
-                          style="width: 150px;"
                         >
                           Location{' '}
                           {sortKey() === 'storage' && (sortDirection() === 'asc' ? '▲' : '▼')}
@@ -2113,17 +2103,15 @@ const UnifiedBackups: Component = () => {
                       </Show>
                       <Show when={backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'}>
                         <th
-                          class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="hidden lg:table-cell px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 w-[6%]"
                           onClick={() => handleSort('verified')}
-                          style="width: 60px;"
                         >
                           Verified{' '}
                           {sortKey() === 'verified' && (sortDirection() === 'asc' ? '▲' : '▼')}
                         </th>
                       </Show>
                       <th
-                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider"
-                        style="width: 200px;"
+                        class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%]"
                       >
                         Details
                       </th>
@@ -2136,14 +2124,17 @@ const UnifiedBackups: Component = () => {
                           <tr class="bg-gray-50 dark:bg-gray-900/40">
                             <td
                               colspan={(() => {
-                                let cols = 7; // Base columns: VMID, Type, Name, Node, Time, Backup, Details
-                                if (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote')
-                                  cols++; // Add Owner column
-                                if (backupTypeFilter() !== 'snapshot') cols++; // Add Size column
-                                if (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote')
-                                  cols++; // Add Verified column
-                                if (backupTypeFilter() !== 'snapshot') cols++; // Add Location column
-                                return cols;
+                                let cols = 4; // Base: VMID, Type, Name, Time
+                                if (backupTypeFilter() === 'all' || backupTypeFilter() === 'remote') {
+                                  // Owner - hidden on 2xl
+                                  // We can't easily adjust colspan based on media query in JS without a hook.
+                                  // For now, let's just set a high colspan or use a simpler approach.
+                                  // A safer bet for responsive tables with colspans is to just set it to a large number like 100
+                                  // provided the table layout handles it, or try to be accurate.
+                                  // Given the complexity of responsive hiding, colspan=100 is often the easiest hack for full-width rows.
+                                  return 20;
+                                }
+                                return 20;
                               })()}
                               class="py-1 pr-2 pl-3 text-[12px] sm:text-sm font-semibold text-slate-700 dark:text-slate-100"
                             >
@@ -2164,10 +2155,10 @@ const UnifiedBackups: Component = () => {
                                 <td class="p-0.5 px-1.5 align-middle">
                                   <span
                                     class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.type === 'VM'
-                                        ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
-                                        : item.type === 'Host'
-                                          ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300'
-                                          : 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'
+                                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
+                                      : item.type === 'Host'
+                                        ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300'
+                                        : 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'
                                       }`}
                                   >
                                     {item.type}
@@ -2176,13 +2167,13 @@ const UnifiedBackups: Component = () => {
                                 <td class="p-0.5 px-1.5 text-sm align-middle">
                                   {item.name || '-'}
                                 </td>
-                                <td class="p-0.5 px-1.5 text-sm align-middle">{item.node}</td>
+                                <td class="hidden xl:table-cell p-0.5 px-1.5 text-sm align-middle">{item.node}</td>
                                 <Show
                                   when={
                                     backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'
                                   }
                                 >
-                                  <td class="p-0.5 px-1.5 text-xs align-middle text-gray-500 dark:text-gray-400">
+                                  <td class="hidden 2xl:table-cell p-0.5 px-1.5 text-xs align-middle text-gray-500 dark:text-gray-400">
                                     {item.owner ? item.owner.split('@')[0] : '-'}
                                   </td>
                                 </Show>
@@ -2193,19 +2184,19 @@ const UnifiedBackups: Component = () => {
                                 </td>
                                 <Show when={backupTypeFilter() !== 'snapshot'}>
                                   <td
-                                    class={`p-0.5 px-1.5 align-middle ${getSizeColor(item.size)}`}
+                                    class={`hidden lg:table-cell p-0.5 px-1.5 align-middle ${getSizeColor(item.size)}`}
                                   >
                                     {item.size ? formatBytes(item.size) : '-'}
                                   </td>
                                 </Show>
-                                <td class="p-0.5 px-1.5 align-middle">
+                                <td class="hidden lg:table-cell p-0.5 px-1.5 align-middle">
                                   <div class="flex items-center gap-1">
                                     <span
                                       class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.backupType === 'snapshot'
-                                          ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-300'
-                                          : item.backupType === 'local'
-                                            ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300'
-                                            : 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300'
+                                        ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/20 dark:text-yellow-300'
+                                        : item.backupType === 'local'
+                                          ? 'bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300'
+                                          : 'bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300'
                                         }`}
                                     >
                                       {item.backupType === 'snapshot'
@@ -2255,7 +2246,7 @@ const UnifiedBackups: Component = () => {
                                   </div>
                                 </td>
                                 <Show when={backupTypeFilter() !== 'snapshot'}>
-                                  <td class="p-0.5 px-1.5 text-sm align-middle">
+                                  <td class="hidden xl:table-cell p-0.5 px-1.5 text-sm align-middle">
                                     {item.storage ||
                                       (item.datastore &&
                                         (item.namespace && item.namespace !== 'root'
@@ -2269,7 +2260,7 @@ const UnifiedBackups: Component = () => {
                                     backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'
                                   }
                                 >
-                                  <td class="p-0.5 px-1.5 text-center align-middle">
+                                  <td class="hidden lg:table-cell p-0.5 px-1.5 text-center align-middle">
                                     {item.backupType === 'remote' ? (
                                       item.verified ? (
                                         <span title="PBS backup verified">
@@ -2315,7 +2306,7 @@ const UnifiedBackups: Component = () => {
                                   </td>
                                 </Show>
                                 <td
-                                  class="p-0.5 px-1.5 cursor-help align-middle"
+                                  class="hidden md:table-cell p-0.5 px-1.5 cursor-help align-middle"
                                   onMouseEnter={(e) => {
                                     const details = [];
 
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index eda36d7..e9bb07e 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -927,12 +927,12 @@ export function Dashboard(props: DashboardProps) {
       <Show when={connected() && initialDataReceived() && filteredGuests().length > 0}>
         <ComponentErrorBoundary name="Guest Table">
           <Card padding="none" class="mb-4 overflow-hidden">
-            <ScrollableTable minWidth="750px">
-              <table class="w-full min-w-[750px] md:min-w-[840px] lg:min-w-[970px] table-fixed border-collapse">
+            <ScrollableTable minWidth="600px">
+              <table class="w-full min-w-[600px] table-fixed 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 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                      class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 w-auto"
                       onClick={() => handleSort('name')}
                       onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
                       tabindex="0"
@@ -942,7 +942,7 @@ export function Dashboard(props: DashboardProps) {
                       Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[52px] sm:w-[58px] lg:w-[64px] xl:w-[70px] 2xl:w-[87px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[5%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('type')}
                       title="Type"
                     >
@@ -951,7 +951,7 @@ export function Dashboard(props: DashboardProps) {
                       {sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[50px] sm:w-[56px] lg:w-[62px] xl:w-[70px] 2xl:w-[92px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden lg:table-cell px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[5%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('vmid')}
                       title="VM/Container ID"
                     >
@@ -960,7 +960,7 @@ export function Dashboard(props: DashboardProps) {
                       {sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[56px] sm:w-[64px] lg:w-[72px] xl:w-[84px] 2xl:w-[125px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden sm:table-cell px-1.5 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wide w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('uptime')}
                       title="Uptime"
                     >
@@ -969,13 +969,13 @@ export function Dashboard(props: DashboardProps) {
                       {sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('cpu')}
                     >
                       CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('memory')}
                       title="Memory"
                     >
@@ -984,13 +984,13 @@ export function Dashboard(props: DashboardProps) {
                       {sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden sm:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('disk')}
                     >
                       Disk {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('diskRead')}
                       title="Disk Read"
                     >
@@ -999,7 +999,7 @@ export function Dashboard(props: DashboardProps) {
                       {sortKey() === 'diskRead' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('diskWrite')}
                       title="Disk Write"
                     >
@@ -1008,7 +1008,7 @@ export function Dashboard(props: DashboardProps) {
                       {sortKey() === 'diskWrite' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('networkIn')}
                       title="Network In"
                     >
@@ -1017,7 +1017,7 @@ export function Dashboard(props: DashboardProps) {
                       {sortKey() === 'networkIn' && (sortDirection() === 'asc' ? '▲' : '▼')}
                     </th>
                     <th
-                      class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                      class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[6%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                       onClick={() => handleSort('networkOut')}
                       title="Network Out"
                     >
diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index d14b8f5..c80890b 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -406,7 +406,7 @@ export function GuestRow(props: GuestRowProps) {
   // Get first cell styling
   const firstCellClass = createMemo(() => {
     const base =
-      'py-0.5 pr-2 whitespace-nowrap relative w-[140px] sm:w-[160px] lg:w-[180px] xl:w-[240px] 2xl:w-[380px]';
+      'py-0.5 pr-2 whitespace-nowrap relative w-auto';
     const indent = props.isGroupedView ? GROUPED_FIRST_CELL_INDENT : DEFAULT_FIRST_CELL_INDENT;
     return `${base} ${indent}`;
   });
@@ -424,258 +424,254 @@ export function GuestRow(props: GuestRowProps) {
   return (
     <>
       <tr class={rowClass()} style={rowStyle()} onClick={toggleDrawer} aria-expanded={drawerOpen()}>
-      {/* Name - Sticky column */}
-      <td class={firstCellClass()}>
-        <div class="flex items-center gap-2">
-          <div class="flex items-center gap-1.5 flex-1 min-w-0">
-            <StatusDot
-              variant={guestStatus().variant}
-              title={guestStatus().label}
-              ariaLabel={guestStatus().label}
-              size="xs"
-            />
-            <div class="flex-1 min-w-0">
-              {/* Name - show input when editing, otherwise show name with optional link */}
-              <Show
-                when={isEditingUrl()}
-                fallback={
-                  <div class="flex items-center gap-1.5 min-w-0">
-                    <span
-                      class="text-sm font-medium text-gray-900 dark:text-gray-100 cursor-text select-none overflow-hidden text-ellipsis"
-                      style="cursor: text;"
-                      title={`${props.guest.name}${customUrl() ? ' - Click to edit URL' : ' - Click to add URL'}`}
-                      onClick={startEditingUrl}
-                      data-guest-name-editable
-                    >
-                      {props.guest.name}
-                    </span>
-                    <Show when={customUrl()}>
-                      <a
-                        href={customUrl()}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
-                        title="Open in new tab"
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <svg
-                          class="w-3.5 h-3.5"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                          />
-                        </svg>
-                      </a>
-                    </Show>
-                  </div>
-                }
-              >
-                <div class="flex-1 flex items-center gap-1 min-w-0" data-url-editor>
-                  <input
-                    ref={urlInputRef}
-                    type="text"
-                    value={editingUrlValue()}
-                    data-guest-id={guestId()}
-                    onInput={(e) => {
-                      editingValues.set(guestId(), e.currentTarget.value);
-                      setEditingValuesVersion(v => v + 1);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        e.preventDefault();
-                        saveUrl();
-                      } else if (e.key === 'Escape') {
-                        e.preventDefault();
-                        cancelEditingUrl();
-                      }
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                    placeholder="https://192.168.1.100:8006"
-                    class="flex-1 min-w-0 px-2 py-0.5 text-sm border border-blue-500 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  />
-                  <button
-                    type="button"
-                    data-url-editor-button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      saveUrl();
-                    }}
-                    class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
-                    title="Save (or press Enter)"
-                  >
-                    ✓
-                  </button>
-                  <button
-                    type="button"
-                    data-url-editor-button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      deleteUrl();
-                    }}
-                    class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
-                    title="Delete URL"
-                  >
-                    ✕
-                  </button>
-                </div>
-              </Show>
-            </div>
-          </div>
-
-          {/* Tag badges - hide when editing URL to save space */}
-          <Show when={!isEditingUrl()}>
-            <div class="flex" data-prevent-toggle onClick={(event) => event.stopPropagation()}>
-              <TagBadges
-                tags={Array.isArray(props.guest.tags) ? props.guest.tags : []}
-                maxVisible={3}
-                onTagClick={props.onTagClick}
-                activeSearch={props.activeSearch}
+        {/* Name - Sticky column */}
+        <td class={firstCellClass()}>
+          <div class="flex items-center gap-2">
+            <div class="flex items-center gap-1.5 flex-1 min-w-0">
+              <StatusDot
+                variant={guestStatus().variant}
+                title={guestStatus().label}
+                ariaLabel={guestStatus().label}
+                size="xs"
               />
+              <div class="flex-1 min-w-0">
+                {/* Name - show input when editing, otherwise show name with optional link */}
+                <Show
+                  when={isEditingUrl()}
+                  fallback={
+                    <div class="flex items-center gap-1.5 min-w-0">
+                      <span
+                        class="text-sm font-medium text-gray-900 dark:text-gray-100 cursor-text select-none overflow-hidden text-ellipsis"
+                        style="cursor: text;"
+                        title={`${props.guest.name}${customUrl() ? ' - Click to edit URL' : ' - Click to add URL'}`}
+                        onClick={startEditingUrl}
+                        data-guest-name-editable
+                      >
+                        {props.guest.name}
+                      </span>
+                      <Show when={customUrl()}>
+                        <a
+                          href={customUrl()}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class={`flex-shrink-0 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors ${shouldAnimateIcon() ? 'animate-fadeIn' : ''}`}
+                          title="Open in new tab"
+                          onClick={(event) => event.stopPropagation()}
+                        >
+                          <svg
+                            class="w-3.5 h-3.5"
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                            />
+                          </svg>
+                        </a>
+                      </Show>
+                    </div>
+                  }
+                >
+                  <div class="flex-1 flex items-center gap-1 min-w-0" data-url-editor>
+                    <input
+                      ref={urlInputRef}
+                      type="text"
+                      value={editingUrlValue()}
+                      data-guest-id={guestId()}
+                      onInput={(e) => {
+                        editingValues.set(guestId(), e.currentTarget.value);
+                        setEditingValuesVersion(v => v + 1);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault();
+                          saveUrl();
+                        } else if (e.key === 'Escape') {
+                          e.preventDefault();
+                          cancelEditingUrl();
+                        }
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      placeholder="https://192.168.1.100:8006"
+                      class="flex-1 min-w-0 px-2 py-0.5 text-sm border border-blue-500 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
+                    <button
+                      type="button"
+                      data-url-editor-button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        saveUrl();
+                      }}
+                      class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      title="Save (or press Enter)"
+                    >
+                      ✓
+                    </button>
+                    <button
+                      type="button"
+                      data-url-editor-button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        deleteUrl();
+                      }}
+                      class="flex-shrink-0 w-6 h-6 flex items-center justify-center text-xs bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+                      title="Delete URL"
+                    >
+                      ✕
+                    </button>
+                  </div>
+                </Show>
+              </div>
             </div>
-          </Show>
 
-          <Show when={lockLabel()}>
+            {/* Tag badges - hide when editing URL to save space */}
+            <Show when={!isEditingUrl()}>
+              <div class="flex" data-prevent-toggle onClick={(event) => event.stopPropagation()}>
+                <TagBadges
+                  tags={Array.isArray(props.guest.tags) ? props.guest.tags : []}
+                  maxVisible={3}
+                  onTagClick={props.onTagClick}
+                  activeSearch={props.activeSearch}
+                />
+              </div>
+            </Show>
+
+            <Show when={lockLabel()}>
+              <span
+                class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"
+                title={`Guest is locked (${lockLabel()})`}
+              >
+                Lock: {lockLabel()}
+              </span>
+            </Show>
+          </div>
+        </td>
+
+        {/* Type */}
+        <td class="hidden lg:table-cell py-0.5 px-2 whitespace-nowrap w-[5%]">
+          <div class="flex h-[24px] items-center">
             <span
-              class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"
-              title={`Guest is locked (${lockLabel()})`}
-            >
-              Lock: {lockLabel()}
-            </span>
-          </Show>
-        </div>
-      </td>
-
-      {/* Type */}
-      <td class="py-0.5 px-2 whitespace-nowrap w-[52px] sm:w-[58px] lg:w-[64px] xl:w-[70px] 2xl:w-[87px]">
-        <div class="flex h-[24px] items-center">
-          <span
-            class={`inline-block px-1.5 py-0.5 text-xs font-medium rounded ${
-              props.guest.type === 'qemu'
+              class={`inline-block px-1.5 py-0.5 text-xs font-medium rounded ${props.guest.type === 'qemu'
                 ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300'
                 : 'bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300'
+                }`}
+            >
+              {isVM(props.guest) ? 'VM' : 'LXC'}
+            </span>
+          </div>
+        </td>
+
+        {/* VMID */}
+        <td class="hidden lg:table-cell py-0.5 px-1.5 whitespace-nowrap w-[5%] text-sm text-gray-600 dark:text-gray-400 align-middle">
+          {props.guest.vmid}
+        </td>
+
+        {/* Uptime */}
+        <td
+          class={`hidden sm:table-cell py-0.5 px-1.5 w-[8%] text-sm whitespace-nowrap align-middle ${props.guest.uptime < 3600 ? 'text-orange-500' : 'text-gray-600 dark:text-gray-400'
             }`}
-          >
-            {isVM(props.guest) ? 'VM' : 'LXC'}
-          </span>
-        </div>
-      </td>
+        >
+          <Show when={isRunning()} fallback="-">
+            {formatUptime(props.guest.uptime)}
+          </Show>
+        </td>
 
-      {/* VMID */}
-      <td class="py-0.5 px-1.5 whitespace-nowrap w-[50px] sm:w-[56px] lg:w-[62px] xl:w-[70px] 2xl:w-[92px] text-sm text-gray-600 dark:text-gray-400 align-middle">
-        {props.guest.vmid}
-      </td>
-
-      {/* Uptime */}
-      <td
-        class={`py-0.5 px-1.5 w-[56px] sm:w-[64px] lg:w-[72px] xl:w-[84px] 2xl:w-[125px] text-sm whitespace-nowrap align-middle ${
-          props.guest.uptime < 3600 ? 'text-orange-500' : 'text-gray-600 dark:text-gray-400'
-        }`}
-      >
-        <Show when={isRunning()} fallback="-">
-          {formatUptime(props.guest.uptime)}
-        </Show>
-      </td>
-
-      {/* CPU */}
-      <td class="py-0.5 px-2 w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px]">
-        <Show when={isRunning()} fallback={<span class="text-sm text-gray-400">-</span>}>
-          <MetricBar
-            value={cpuPercent()}
-            label={formatPercent(cpuPercent())}
-            sublabel={
-              props.guest.cpus
-                ? `${props.guest.cpus} ${props.guest.cpus === 1 ? 'core' : 'cores'}`
-                : undefined
-            }
-            type="cpu"
-            resourceId={metricsKey()}
-          />
-        </Show>
-      </td>
-
-      {/* Memory */}
-      <td class="py-0.5 px-2 w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px]">
-        <div title={memoryTooltip() ?? undefined}>
+        {/* CPU */}
+        <td class="py-0.5 px-2 w-[10%]">
           <Show when={isRunning()} fallback={<span class="text-sm text-gray-400">-</span>}>
             <MetricBar
-              value={memPercent()}
-              label={formatPercent(memPercent())}
-              sublabel={memoryUsageLabel()}
-              type="memory"
+              value={cpuPercent()}
+              label={formatPercent(cpuPercent())}
+              sublabel={
+                props.guest.cpus
+                  ? `${props.guest.cpus} ${props.guest.cpus === 1 ? 'core' : 'cores'}`
+                  : undefined
+              }
+              type="cpu"
               resourceId={metricsKey()}
             />
           </Show>
-        </div>
-      </td>
+        </td>
 
-      {/* Disk – surface usage even if guest is currently stopped so users can see last reported values */}
-      <td class="py-0.5 px-2 w-[80px] sm:w-[90px] lg:w-[110px] xl:w-[160px] 2xl:w-[204px]">
-        <Show
-          when={hasDiskUsage()}
-          fallback={
-            <span class="text-gray-400 text-sm cursor-help" title={getDiskStatusTooltip()}>
-              -
-            </span>
-          }
-        >
-          <MetricBar
-            value={diskPercent()}
-            label={formatPercent(diskPercent())}
-            sublabel={
-              props.guest.disk
-                ? `${formatBytes(props.guest.disk.used, 0)}/${formatBytes(props.guest.disk.total, 0)}`
-                : undefined
+        {/* Memory */}
+        <td class="py-0.5 px-2 w-[10%]">
+          <div title={memoryTooltip() ?? undefined}>
+            <Show when={isRunning()} fallback={<span class="text-sm text-gray-400">-</span>}>
+              <MetricBar
+                value={memPercent()}
+                label={formatPercent(memPercent())}
+                sublabel={memoryUsageLabel()}
+                type="memory"
+                resourceId={metricsKey()}
+              />
+            </Show>
+          </div>
+        </td>
+
+        {/* Disk – surface usage even if guest is currently stopped so users can see last reported values */}
+        <td class="hidden sm:table-cell py-0.5 px-2 w-[10%]">
+          <Show
+            when={hasDiskUsage()}
+            fallback={
+              <span class="text-gray-400 text-sm cursor-help" title={getDiskStatusTooltip()}>
+                -
+              </span>
             }
-            type="disk"
-            resourceId={metricsKey()}
-          />
-        </Show>
-      </td>
+          >
+            <MetricBar
+              value={diskPercent()}
+              label={formatPercent(diskPercent())}
+              sublabel={
+                props.guest.disk
+                  ? `${formatBytes(props.guest.disk.used, 0)}/${formatBytes(props.guest.disk.total, 0)}`
+                  : undefined
+              }
+              type="disk"
+              resourceId={metricsKey()}
+            />
+          </Show>
+        </td>
 
-      {/* Disk I/O */}
-      <td class="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
-        <div class="flex h-[24px] items-center">
-          <IOMetric value={props.guest.diskRead} disabled={!isRunning()} />
-        </div>
-      </td>
-      <td class="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
-        <div class="flex h-[24px] items-center">
-          <IOMetric value={props.guest.diskWrite} disabled={!isRunning()} />
-        </div>
-      </td>
+        {/* Disk I/O */}
+        <td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
+          <div class="flex h-[24px] items-center">
+            <IOMetric value={props.guest.diskRead} disabled={!isRunning()} />
+          </div>
+        </td>
+        <td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
+          <div class="flex h-[24px] items-center">
+            <IOMetric value={props.guest.diskWrite} disabled={!isRunning()} />
+          </div>
+        </td>
 
-      {/* Network I/O */}
-      <td class="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
-        <div class="flex h-[24px] items-center">
-          <IOMetric value={props.guest.networkIn} disabled={!isRunning()} />
-        </div>
-      </td>
-      <td class="py-0.5 px-2 w-[56px] sm:w-[62px] lg:w-[70px] xl:w-[78px] 2xl:w-[106px]">
-        <div class="flex h-[24px] items-center">
-          <IOMetric value={props.guest.networkOut} disabled={!isRunning()} />
-        </div>
-      </td>
+        {/* Network I/O */}
+        <td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
+          <div class="flex h-[24px] items-center">
+            <IOMetric value={props.guest.networkIn} disabled={!isRunning()} />
+          </div>
+        </td>
+        <td class="hidden lg:table-cell py-0.5 px-2 w-[6%]">
+          <div class="flex h-[24px] items-center">
+            <IOMetric value={props.guest.networkOut} disabled={!isRunning()} />
+          </div>
+        </td>
       </tr>
       <Show when={drawerOpen() && canShowDrawer()}>
         <tr
-          class={`text-[11px] ${
-            isRunning() && props.parentNodeOnline !== false
-              ? 'bg-gray-50/60 text-gray-600 dark:bg-gray-800/40 dark:text-gray-300'
-              : 'bg-gray-100/70 text-gray-400 dark:bg-gray-900/30 dark:text-gray-500'
-          }`}
+          class={`text-[11px] ${isRunning() && props.parentNodeOnline !== false
+            ? 'bg-gray-50/60 text-gray-600 dark:bg-gray-800/40 dark:text-gray-300'
+            : 'bg-gray-100/70 text-gray-400 dark:bg-gray-900/30 dark:text-gray-500'
+            }`}
           aria-hidden={!isRunning() || props.parentNodeOnline === false}
         >
           <td class="px-4 py-2" colSpan={11}>
             <div
-              class={`flex flex-wrap gap-3 justify-start ${
-                drawerDisabled() ? 'opacity-50 saturate-75 pointer-events-none' : ''
-              }`}
+              class={`flex flex-wrap gap-3 justify-start ${drawerDisabled() ? 'opacity-50 saturate-75 pointer-events-none' : ''
+                }`}
             >
               <Show
                 when={hasDrawerContent()}
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index 72134eb..c846e25 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -1182,7 +1182,7 @@ const DockerContainerRow: Component<{
             </div>
           </div>
         </td>
-        <td class="px-2 py-0.5">
+        <td class="hidden sm:table-cell px-2 py-0.5">
           <span
             class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${runtimeInfo.badgeClass}`}
             title={
@@ -1194,7 +1194,7 @@ const DockerContainerRow: Component<{
             {runtimeInfo.label}
           </span>
         </td>
-        <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
+        <td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
           <span title={container.image}>
             {container.image || '—'}
           </span>
@@ -1204,7 +1204,7 @@ const DockerContainerRow: Component<{
             {statusLabel()}
           </span>
         </td>
-        <td class="px-2 py-0.5 min-w-[180px]">
+        <td class="hidden md:table-cell px-2 py-0.5">
           <Show
             when={isRunning() && container.cpuPercent && container.cpuPercent > 0}
             fallback={<span class="text-xs text-gray-400">—</span>}
@@ -1217,7 +1217,7 @@ const DockerContainerRow: Component<{
             />
           </Show>
         </td>
-        <td class="px-2 py-0.5 min-w-[240px]">
+        <td class="hidden md:table-cell px-2 py-0.5">
           <Show
             when={isRunning() && container.memoryUsageBytes && container.memoryUsageBytes > 0}
             fallback={<span class="text-xs text-gray-400">—</span>}
@@ -1231,7 +1231,7 @@ const DockerContainerRow: Component<{
             />
           </Show>
         </td>
-        <td class="px-2 py-0.5 min-w-[220px]">
+        <td class="hidden xl:table-cell px-2 py-0.5">
           <Show when={hasDiskStats()} fallback={<span class="text-xs text-gray-400">—</span>}>
             <Show
               when={diskPercent() !== null}
@@ -1247,13 +1247,13 @@ const DockerContainerRow: Component<{
             </Show>
           </Show>
         </td>
-        <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
+        <td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
           <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>
           </Show>
         </td>
-        <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
+        <td class="hidden sm:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
           <Show when={isRunning()} fallback={<span class="text-gray-400">—</span>}>
             {uptime()}
           </Show>
@@ -1539,8 +1539,8 @@ const DockerContainerRow: Component<{
                             <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'
+                                  ? '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}
@@ -1946,12 +1946,12 @@ const DockerServiceRow: Component<{
             </div>
           </div>
         </td>
-        <td class="px-2 py-0.5">
+        <td class="hidden sm:table-cell px-2 py-0.5">
           <span class={`inline-flex items-center rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap ${typeBadgeClass('service')}`}>
             Service
           </span>
         </td>
-        <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
+        <td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300">
           <span title={service.image}>
             {service.image || '—'}
           </span>
@@ -1961,16 +1961,16 @@ const DockerServiceRow: Component<{
             {badge.label}
           </span>
         </td>
-        <td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500 min-w-[150px]">—</td>
-        <td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500 min-w-[210px]">—</td>
-        <td class="px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500 min-w-[200px]">—</td>
-        <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
+        <td class="hidden md:table-cell px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
+        <td class="hidden md:table-cell px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
+        <td class="hidden xl:table-cell px-2 py-0.5 text-xs text-gray-400 dark:text-gray-500">—</td>
+        <td class="hidden lg:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
           <span class="font-semibold text-gray-900 dark:text-gray-100">
             {(service.runningTasks ?? 0)}/{service.desiredTasks ?? 0}
           </span>
           <span class="ml-1 text-gray-500 dark:text-gray-400">tasks</span>
         </td>
-        <td class="px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
+        <td class="hidden sm:table-cell px-2 py-0.5 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">
           <Show when={updatedAt} fallback="—">
             {(timestamp) => (
               <span title={new Date(timestamp()).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}>
@@ -2425,12 +2425,12 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
         }
       >
         <Card padding="none" class="overflow-hidden">
-          <ScrollableTable minWidth="1080px">
-            <table class="w-full min-w-[1080px] table-fixed border-collapse whitespace-nowrap">
+          <ScrollableTable>
+            <table class="w-full table-fixed border-collapse whitespace-nowrap">
               <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 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[22%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('resource')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('resource')}
                     tabIndex={0}
@@ -2459,7 +2459,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                     </div>
                   </th>
                   <th
-                    class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="hidden sm:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('type')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('type')}
                     tabIndex={0}
@@ -2473,7 +2473,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                     </div>
                   </th>
                   <th
-                    class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('image')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('image')}
                     tabIndex={0}
@@ -2501,7 +2501,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                     </div>
                   </th>
                   <th
-                    class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[13%] min-w-[150px] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="hidden md:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[13%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('cpu')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('cpu')}
                     tabIndex={0}
@@ -2515,7 +2515,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                     </div>
                   </th>
                   <th
-                    class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%] min-w-[210px] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="hidden md:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('memory')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('memory')}
                     tabIndex={0}
@@ -2529,7 +2529,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                     </div>
                   </th>
                   <th
-                    class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] min-w-[200px] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="hidden xl:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('disk')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('disk')}
                     tabIndex={0}
@@ -2543,7 +2543,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                     </div>
                   </th>
                   <th
-                    class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[9%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="hidden lg:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[9%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('tasks')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('tasks')}
                     tabIndex={0}
@@ -2557,7 +2557,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                     </div>
                   </th>
                   <th
-                    class="px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                    class="hidden sm:table-cell px-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer select-none hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                     onClick={() => handleSort('updated')}
                     onKeyDown={(e) => e.key === 'Enter' && handleSort('updated')}
                     tabIndex={0}
diff --git a/frontend-modern/src/components/Storage/DiskList.tsx b/frontend-modern/src/components/Storage/DiskList.tsx
index 1f7a59d..ea2783b 100644
--- a/frontend-modern/src/components/Storage/DiskList.tsx
+++ b/frontend-modern/src/components/Storage/DiskList.tsx
@@ -154,31 +154,31 @@ export const DiskList: Component<DiskListProps> = (props) => {
             <table class="w-full">
               <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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                     Node
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                     Device
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[20%]">
                     Model
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%]">
                     Type
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%]">
                     FS
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                     Health
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%]">
                     SSD Life
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">
+                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell w-[8%]">
                     Temp
                   </th>
-                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                  <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                     Size
                   </th>
                   <th class="px-2 py-1.5 w-8"></th>
@@ -202,19 +202,19 @@ export const DiskList: Component<DiskListProps> = (props) => {
                               {disk.devPath}
                             </span>
                           </td>
-                          <td class="px-2 py-1.5 text-xs">
+                          <td class="hidden md:table-cell px-2 py-1.5 text-xs">
                             <span class="text-gray-700 dark:text-gray-300">
                               {disk.model || 'Unknown'}
                             </span>
                           </td>
-                          <td class="px-2 py-1.5 text-xs">
+                          <td class="hidden sm:table-cell px-2 py-1.5 text-xs">
                             <span
                               class={`inline-block px-1.5 py-0.5 text-[10px] font-medium rounded ${getDiskTypeBadge(disk.type)}`}
                             >
                               {disk.type.toUpperCase()}
                             </span>
                           </td>
-                          <td class="px-2 py-1.5 text-xs">
+                          <td class="hidden lg:table-cell px-2 py-1.5 text-xs">
                             <Show
                               when={disk.used && disk.used !== 'unknown'}
                               fallback={<span class="text-gray-400">-</span>}
@@ -231,22 +231,21 @@ export const DiskList: Component<DiskListProps> = (props) => {
                               {health.text}
                             </span>
                           </td>
-                          <td class="px-2 py-1.5 text-xs">
+                          <td class="hidden md:table-cell px-2 py-1.5 text-xs">
                             <Show
                               when={disk.wearout > 0}
                               fallback={<span class="text-gray-400">-</span>}
                             >
                               <div class="relative w-24 h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
                                 <div
-                                  class={`absolute top-0 left-0 h-full ${
-                                    disk.wearout >= 50
-                                      ? 'bg-green-500/60 dark:bg-green-500/50'
-                                      : disk.wearout >= 20
-                                        ? 'bg-yellow-500/60 dark:bg-yellow-500/50'
-                                        : disk.wearout >= 10
-                                          ? 'bg-orange-500/60 dark:bg-orange-500/50'
-                                          : 'bg-red-500/60 dark:bg-red-500/50'
-                                  }`}
+                                  class={`absolute top-0 left-0 h-full ${disk.wearout >= 50
+                                    ? 'bg-green-500/60 dark:bg-green-500/50'
+                                    : disk.wearout >= 20
+                                      ? 'bg-yellow-500/60 dark:bg-yellow-500/50'
+                                      : disk.wearout >= 10
+                                        ? 'bg-orange-500/60 dark:bg-orange-500/50'
+                                        : 'bg-red-500/60 dark:bg-red-500/50'
+                                    }`}
                                   style={{ width: `${disk.wearout}%` }}
                                 />
                                 <span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">
@@ -261,13 +260,12 @@ export const DiskList: Component<DiskListProps> = (props) => {
                               fallback={<span class="font-medium text-gray-400">-</span>}
                             >
                               <span
-                                class={`font-medium ${
-                                  disk.temperature > 70
-                                    ? 'text-red-600 dark:text-red-400'
-                                    : disk.temperature > 60
-                                      ? 'text-yellow-600 dark:text-yellow-400'
-                                      : 'text-green-600 dark:text-green-400'
-                                }`}
+                                class={`font-medium ${disk.temperature > 70
+                                  ? 'text-red-600 dark:text-red-400'
+                                  : disk.temperature > 60
+                                    ? 'text-yellow-600 dark:text-yellow-400'
+                                    : 'text-green-600 dark:text-green-400'
+                                  }`}
                               >
                                 {disk.temperature}°C
                               </span>
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 9c37102..22d946d 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -566,8 +566,8 @@ const Storage: Component = () => {
             onClick={() => setTabView('pools')}
             type="button"
             class={`inline-flex items-center px-2 sm:px-3 py-1 text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 ${tabView() === 'pools'
-                ? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
-                : 'hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
+              ? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
+              : 'hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
               }`}
           >
             Storage Pools
@@ -576,8 +576,8 @@ const Storage: Component = () => {
             onClick={() => setTabView('disks')}
             type="button"
             class={`inline-flex items-center px-2 sm:px-3 py-1 text-sm font-medium border-b-2 border-transparent text-gray-600 dark:text-gray-400 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 ${tabView() === 'disks'
-                ? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
-                : 'hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
+              ? 'text-blue-600 dark:text-blue-300 border-blue-500 dark:border-blue-400'
+              : 'hover:text-blue-500 dark:hover:text-blue-300 hover:border-blue-300/70 dark:hover:border-blue-500/50'
               }`}
           >
             Physical Disks
@@ -750,30 +750,30 @@ const Storage: Component = () => {
                 <table class="w-full">
                   <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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto">
                         Storage
                       </th>
-                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden md:table-cell">
+                      <th class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                         Type
                       </th>
-                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">
+                      <th class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%]">
                         Content
                       </th>
-                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">
+                      <th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                         Status
                       </th>
                       <Show when={viewMode() === 'node'}>
-                        <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">
+                        <th class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%]">
                           Shared
                         </th>
                       </Show>
-                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider min-w-[200px]">
+                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] min-w-[150px]">
                         Usage
                       </th>
-                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">
+                      <th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                         Free
                       </th>
-                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider">
+                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                         Total
                       </th>
                       <th class="px-2 py-1.5 w-8"></th>
@@ -1061,8 +1061,8 @@ const Storage: Component = () => {
                                           <Show when={zfsPool && zfsPool.state !== 'ONLINE'}>
                                             <span
                                               class={`px-1.5 py-0.5 rounded text-[10px] font-medium ${zfsPool?.state === 'DEGRADED'
-                                                  ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
-                                                  : 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
+                                                ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
+                                                : 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
                                                 }`}
                                             >
                                               {zfsPool?.state}
@@ -1109,12 +1109,12 @@ const Storage: Component = () => {
                                           </Show>
                                         </div>
                                       </td>
-                                      <td class="p-0.5 px-1.5 hidden md:table-cell">
+                                      <td class="hidden md:table-cell p-0.5 px-1.5">
                                         <span class="inline-block px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
                                           {storage.type}
                                         </span>
                                       </td>
-                                      <td class="p-0.5 px-1.5 hidden lg:table-cell">
+                                      <td class="hidden lg:table-cell p-0.5 px-1.5">
                                         <span
                                           class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap truncate max-w-[220px]"
                                           title={storage.content || '-'}
@@ -1122,18 +1122,18 @@ const Storage: Component = () => {
                                           {storage.content || '-'}
                                         </span>
                                       </td>
-                                      <td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
+                                      <td class="hidden sm:table-cell p-0.5 px-1.5 text-xs whitespace-nowrap">
                                         <span
                                           class={`${storage.status === 'available'
-                                              ? 'text-green-600 dark:text-green-400'
-                                              : 'text-red-600 dark:text-red-400'
+                                            ? 'text-green-600 dark:text-green-400'
+                                            : 'text-red-600 dark:text-red-400'
                                             }`}
                                         >
                                           {storage.status || 'unknown'}
                                         </span>
                                       </td>
                                       <Show when={viewMode() === 'node'}>
-                                        <td class="p-0.5 px-1.5 hidden lg:table-cell">
+                                        <td class="hidden lg:table-cell p-0.5 px-1.5">
                                           <span class="text-xs text-gray-600 dark:text-gray-400">
                                             {storage.shared ? '✓' : '-'}
                                           </span>
@@ -1141,7 +1141,7 @@ const Storage: Component = () => {
                                       </Show>
 
                                       <td class="p-0.5 px-1.5">
-                                        <div class="relative min-w-[200px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
+                                        <div class="relative min-w-[150px] h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
                                           <div
                                             class={`absolute top-0 left-0 h-full ${getProgressBarColor(usagePercent)}`}
                                             style={{ width: `${usagePercent}%` }}
@@ -1155,7 +1155,7 @@ const Storage: Component = () => {
                                           </span>
                                         </div>
                                       </td>
-                                      <td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
+                                      <td class="hidden sm:table-cell p-0.5 px-1.5 text-xs whitespace-nowrap">
                                         {formatBytes(storage.free || 0, 0)}
                                       </td>
                                       <td class="p-0.5 px-1.5 text-xs whitespace-nowrap">
@@ -1166,8 +1166,8 @@ const Storage: Component = () => {
                                     <Show when={isCephStorage() && isExpanded()}>
                                       <tr
                                         class={`text-[11px] border-t border-gray-200 dark:border-gray-700 ${drawerDisabled()
-                                            ? 'bg-gray-100/70 text-gray-400 dark:bg-gray-900/30 dark:text-gray-500'
-                                            : 'bg-gray-50/60 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300'
+                                          ? 'bg-gray-100/70 text-gray-400 dark:bg-gray-900/30 dark:text-gray-500'
+                                          : 'bg-gray-50/60 text-gray-700 dark:bg-gray-900/30 dark:text-gray-300'
                                           }`}
                                       >
                                         <td colSpan={9} class="px-4 py-3">
@@ -1233,10 +1233,10 @@ const Storage: Component = () => {
                                               </span>
                                               <span
                                                 class={`px-1.5 py-0.5 rounded text-xs font-medium ${storage.zfsPool!.state === 'ONLINE'
-                                                    ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
-                                                    : storage.zfsPool!.state === 'DEGRADED'
-                                                      ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
-                                                      : 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
+                                                  ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
+                                                  : storage.zfsPool!.state === 'DEGRADED'
+                                                    ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
+                                                    : 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300'
                                                   }`}
                                               >
                                                 {storage.zfsPool!.state}
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index 3621459..74a9902 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -355,387 +355,384 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
   return (
     <>
       <Card padding="none" class="mb-4 overflow-hidden">
-      <div class="overflow-x-auto">
-        <table class="w-full min-w-[600px] table-fixed 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-3 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[18%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 whitespace-nowrap"
-                onClick={() => handleSort('name')}
-                onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
-                tabindex="0"
-                role="button"
-                aria-label={`Sort by name ${
-                  sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''
-                }`}
-              >
-                {props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}{' '}
-                {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
-              </th>
-              <th
-                class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
-                onClick={() => handleSort('uptime')}
-              >
-                Uptime {sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
-              </th>
-              <th
-                class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
-                onClick={() => handleSort('cpu')}
-              >
-                CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
-              </th>
-              <th
-                class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
-                onClick={() => handleSort('memory')}
-              >
-                Memory {sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
-              </th>
-              <th
-                class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[16%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
-                onClick={() => handleSort('disk')}
-              >
-                {props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}{' '}
-                {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
-              </th>
-              <Show when={hasAnyTemperatureData()}>
+        <div class="overflow-x-auto">
+          <table class="w-full table-fixed 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="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
-                  onClick={() => handleSort('temperature')}
+                  class="pl-3 pr-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 whitespace-nowrap"
+                  onClick={() => handleSort('name')}
+                  onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
+                  tabindex="0"
+                  role="button"
+                  aria-label={`Sort by name ${sortKey() === 'name' ? (sortDirection() === 'asc' ? 'ascending' : 'descending') : ''
+                    }`}
                 >
-                  Temp{' '}
-                  {sortKey() === 'temperature' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                  {props.currentTab === 'backups' ? 'Node / PBS' : 'Node'}{' '}
+                  {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
-              </Show>
-              <For each={countColumns()}>
-                {(column) => (
+                <th
+                  class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[12%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                  onClick={() => handleSort('uptime')}
+                >
+                  Uptime {sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </th>
+                <th
+                  class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] sm:w-[15%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                  onClick={() => handleSort('cpu')}
+                >
+                  CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </th>
+                <th
+                  class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] sm:w-[15%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                  onClick={() => handleSort('memory')}
+                >
+                  Memory {sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </th>
+                <th
+                  class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                  onClick={() => handleSort('disk')}
+                >
+                  {props.currentTab === 'backups' && props.pbsInstances ? 'Storage / Disk' : 'Disk'}{' '}
+                  {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </th>
+                <Show when={hasAnyTemperatureData()}>
                   <th
-                    class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
-                    onClick={() => handleSort(column.key)}
+                    class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                    onClick={() => handleSort('temperature')}
                   >
-                    {column.header}{' '}
-                    {sortKey() === column.key && (sortDirection() === 'asc' ? '▲' : '▼')}
+                    Temp{' '}
+                    {sortKey() === 'temperature' && (sortDirection() === 'asc' ? '▲' : '▼')}
                   </th>
-                )}
-              </For>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-            <For each={sortedItems()}>
-              {(item) => {
-                const isPVE = item.type === 'pve';
-                const isPBS = item.type === 'pbs';
-                const node = isPVE ? (item.data as Node) : null;
-                const pbs = isPBS ? (item.data as PBSInstance) : null;
-
-                const online = isItemOnline(item);
-                const statusIndicator = createMemo(() =>
-                  isPVE ? getNodeStatusIndicator(node as Node) : getPBSStatusIndicator(pbs as PBSInstance),
-                );
-                const cpuPercentValue = getCpuPercent(item);
-                const memoryPercentValue = getMemoryPercent(item);
-                const diskPercentValue = getDiskPercent(item);
-                const diskSublabel = getDiskSublabel(item);
-                const cpuTemperatureValue = getCpuTemperatureValue(item);
-                const uptimeValue = isPVE ? node?.uptime ?? 0 : isPBS ? pbs?.uptime ?? 0 : 0;
-                const displayName = () => {
-                  if (isPVE) return getNodeDisplayName(node as Node);
-                  return (pbs as PBSInstance).name;
-                };
-                const showActualName = () => isPVE && hasAlternateDisplayName(node as Node);
-
-                // Use unique node ID (not hostname) to handle duplicate node names
-                const nodeId = isPVE ? node!.id : pbs!.name;
-                const isSelected = () => props.selectedNode === nodeId;
-                // Use the full resource ID for alert matching
-                const resourceId = isPVE ? node!.id || node!.name : pbs!.id || pbs!.name;
-                // Use namespaced metric key for sparklines
-                const metricsKey = buildMetricKey('node', resourceId);
-                const alertStyles = createMemo(() =>
-                  getAlertStyles(resourceId, activeAlerts, alertsEnabled()),
-                );
-                const showAlertHighlight = createMemo(
-                  () => alertStyles().hasUnacknowledgedAlert && online,
-                );
-
-                const rowStyle = createMemo(() => {
-                  const styles: Record<string, string> = {};
-                  const shadows: string[] = [];
-
-                  if (showAlertHighlight()) {
-                    const color = alertStyles().severity === 'critical' ? '#ef4444' : '#eab308';
-                    shadows.push(`inset 4px 0 0 0 ${color}`);
-                  }
-
-                  if (isSelected()) {
-                    shadows.push('0 0 0 1px rgba(59, 130, 246, 0.5)');
-                    shadows.push('0 2px 4px -1px rgba(0, 0, 0, 0.1)');
-                  }
-
-                  if (shadows.length > 0) {
-                    styles['box-shadow'] = shadows.join(', ');
-                  }
-
-                  return styles;
-                });
-
-                const rowClass = createMemo(() => {
-                  const baseHover = 'cursor-pointer transition-all duration-200 relative hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:shadow-sm';
-
-                  if (isSelected()) {
-                    return `cursor-pointer transition-all duration-200 relative bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:shadow-sm z-10`;
-                  }
-
-                  if (showAlertHighlight()) {
-                    return alertStyles().severity === 'critical'
-                      ? 'cursor-pointer transition-all duration-200 relative bg-red-50 dark:bg-red-950/30 hover:bg-red-100 dark:hover:bg-red-950/40 hover:shadow-sm'
-                      : 'cursor-pointer transition-all duration-200 relative bg-yellow-50 dark:bg-yellow-950/20 hover:bg-yellow-100 dark:hover:bg-yellow-950/30 hover:shadow-sm';
-                  }
-
-                  let className = baseHover;
-
-                  if (props.selectedNode && props.selectedNode !== nodeId) {
-                    className += ' opacity-50 hover:opacity-80';
-                  }
-
-                  if (!online) {
-                    className += ' opacity-60';
-                  }
-
-                  return className;
-                });
-
-                return (
-                  <tr
-                    class={rowClass()}
-                    style={rowStyle()}
-                    onClick={() => props.onNodeClick(nodeId, item.type)}
-                  >
-                    <td
-                      class={`pr-2 py-0.5 whitespace-nowrap ${showAlertHighlight() ? 'pl-4' : 'pl-3'}`}
+                </Show>
+                <For each={countColumns()}>
+                  {(column) => (
+                    <th
+                      class="hidden lg:table-cell px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                      onClick={() => handleSort(column.key)}
                     >
-                      <div class="flex items-center gap-1.5">
-                        <StatusDot
-                          variant={statusIndicator().variant}
-                          title={statusIndicator().label}
-                          ariaLabel={statusIndicator().label}
-                          size="xs"
-                        />
-                        <a
-                          href={
-                            isPVE
-                              ? node!.guestURL || node!.host || `https://${node!.name}:8006`
-                              : pbs!.host || `https://${pbs!.name}:8007`
-                          }
-                          target="_blank"
-                          onClick={(e) => e.stopPropagation()}
-                          class="font-medium text-[11px] text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
-                        >
-                          {displayName()}
-                        </a>
-                        <Show when={showActualName()}>
-                          <span class="text-[9px] text-gray-500 dark:text-gray-400">
-                            ({(node as Node).name})
-                          </span>
-                        </Show>
-                        <Show when={isPVE}>
-                          <span class="text-[9px] px-1 py-0 rounded text-[8px] font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400">
-                            PVE
-                          </span>
-                        </Show>
-                        <Show when={isPVE && node!.pveVersion}>
-                          <span class="text-[9px] text-gray-500 dark:text-gray-400">
-                            v{node!.pveVersion.split('/')[1] || node!.pveVersion}
-                          </span>
-                        </Show>
-                        <Show when={isPVE && node!.isClusterMember !== undefined}>
-                          <span
-                            class={`text-[9px] px-1 py-0 rounded text-[8px] font-medium whitespace-nowrap ${
-                              node!.isClusterMember
-                                ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
-                                : 'bg-gray-100 text-gray-600 dark:bg-gray-700/50 dark:text-gray-400'
-                            }`}
-                          >
-                            {node!.isClusterMember ? node!.clusterName : 'Standalone'}
-                          </span>
-                        </Show>
-                        <Show when={isPBS}>
-                          <span class="text-[9px] px-1 py-0 rounded text-[8px] font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">
-                            PBS
-                          </span>
-                        </Show>
-                        <Show when={isPBS && pbs!.version}>
-                          <span class="text-[9px] text-gray-500 dark:text-gray-400">
-                            v{pbs!.version}
-                          </span>
-                        </Show>
-                      </div>
-                    </td>
-                    <td class="px-2 py-0.5 whitespace-nowrap">
-                      <span
-                        class={`text-xs ${
-                          isPVE && (node?.uptime ?? 0) < 3600
-                            ? 'text-orange-500'
-                            : 'text-gray-600 dark:text-gray-400'
-                        }`}
+                      {column.header}{' '}
+                      {sortKey() === column.key && (sortDirection() === 'asc' ? '▲' : '▼')}
+                    </th>
+                  )}
+                </For>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              <For each={sortedItems()}>
+                {(item) => {
+                  const isPVE = item.type === 'pve';
+                  const isPBS = item.type === 'pbs';
+                  const node = isPVE ? (item.data as Node) : null;
+                  const pbs = isPBS ? (item.data as PBSInstance) : null;
+
+                  const online = isItemOnline(item);
+                  const statusIndicator = createMemo(() =>
+                    isPVE ? getNodeStatusIndicator(node as Node) : getPBSStatusIndicator(pbs as PBSInstance),
+                  );
+                  const cpuPercentValue = getCpuPercent(item);
+                  const memoryPercentValue = getMemoryPercent(item);
+                  const diskPercentValue = getDiskPercent(item);
+                  const diskSublabel = getDiskSublabel(item);
+                  const cpuTemperatureValue = getCpuTemperatureValue(item);
+                  const uptimeValue = isPVE ? node?.uptime ?? 0 : isPBS ? pbs?.uptime ?? 0 : 0;
+                  const displayName = () => {
+                    if (isPVE) return getNodeDisplayName(node as Node);
+                    return (pbs as PBSInstance).name;
+                  };
+                  const showActualName = () => isPVE && hasAlternateDisplayName(node as Node);
+
+                  // Use unique node ID (not hostname) to handle duplicate node names
+                  const nodeId = isPVE ? node!.id : pbs!.name;
+                  const isSelected = () => props.selectedNode === nodeId;
+                  // Use the full resource ID for alert matching
+                  const resourceId = isPVE ? node!.id || node!.name : pbs!.id || pbs!.name;
+                  // Use namespaced metric key for sparklines
+                  const metricsKey = buildMetricKey('node', resourceId);
+                  const alertStyles = createMemo(() =>
+                    getAlertStyles(resourceId, activeAlerts, alertsEnabled()),
+                  );
+                  const showAlertHighlight = createMemo(
+                    () => alertStyles().hasUnacknowledgedAlert && online,
+                  );
+
+                  const rowStyle = createMemo(() => {
+                    const styles: Record<string, string> = {};
+                    const shadows: string[] = [];
+
+                    if (showAlertHighlight()) {
+                      const color = alertStyles().severity === 'critical' ? '#ef4444' : '#eab308';
+                      shadows.push(`inset 4px 0 0 0 ${color}`);
+                    }
+
+                    if (isSelected()) {
+                      shadows.push('0 0 0 1px rgba(59, 130, 246, 0.5)');
+                      shadows.push('0 2px 4px -1px rgba(0, 0, 0, 0.1)');
+                    }
+
+                    if (shadows.length > 0) {
+                      styles['box-shadow'] = shadows.join(', ');
+                    }
+
+                    return styles;
+                  });
+
+                  const rowClass = createMemo(() => {
+                    const baseHover = 'cursor-pointer transition-all duration-200 relative hover:bg-gray-50 dark:hover:bg-gray-700/50 hover:shadow-sm';
+
+                    if (isSelected()) {
+                      return `cursor-pointer transition-all duration-200 relative bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 dark:hover:bg-blue-900/30 hover:shadow-sm z-10`;
+                    }
+
+                    if (showAlertHighlight()) {
+                      return alertStyles().severity === 'critical'
+                        ? 'cursor-pointer transition-all duration-200 relative bg-red-50 dark:bg-red-950/30 hover:bg-red-100 dark:hover:bg-red-950/40 hover:shadow-sm'
+                        : 'cursor-pointer transition-all duration-200 relative bg-yellow-50 dark:bg-yellow-950/20 hover:bg-yellow-100 dark:hover:bg-yellow-950/30 hover:shadow-sm';
+                    }
+
+                    let className = baseHover;
+
+                    if (props.selectedNode && props.selectedNode !== nodeId) {
+                      className += ' opacity-50 hover:opacity-80';
+                    }
+
+                    if (!online) {
+                      className += ' opacity-60';
+                    }
+
+                    return className;
+                  });
+
+                  return (
+                    <tr
+                      class={rowClass()}
+                      style={rowStyle()}
+                      onClick={() => props.onNodeClick(nodeId, item.type)}
+                    >
+                      <td
+                        class={`pr-2 py-0.5 whitespace-nowrap ${showAlertHighlight() ? 'pl-4' : 'pl-3'}`}
                       >
-                        <Show
-                          when={online && uptimeValue}
-                          fallback="-"
-                        >
-                          {formatUptime(uptimeValue)}
-                        </Show>
-                      </span>
-                    </td>
-                    <td class="px-2 py-0.5">
-                      <Show
-                        when={online && cpuPercentValue !== null}
-                        fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
-                      >
-                        <MetricBar
-                          value={cpuPercentValue ?? 0}
-                          label={formatPercent(cpuPercentValue ?? 0)}
-                          sublabel={
-                            isPVE && node!.cpuInfo?.cores
-                              ? `${node!.cpuInfo.cores} cores`
-                              : undefined
-                          }
-                          type="cpu"
-                          resourceId={metricsKey}
-                        />
-                      </Show>
-                    </td>
-                    <td class="px-2 py-0.5">
-                      <Show
-                        when={online && memoryPercentValue !== null}
-                        fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
-                      >
-                        <MetricBar
-                          value={memoryPercentValue ?? 0}
-                          label={formatPercent(memoryPercentValue ?? 0)}
-                          sublabel={
-                            isPVE && node!.memory
-                              ? `${formatBytes(node!.memory.used, 0)}/${formatBytes(node!.memory.total, 0)}`
-                              : isPBS && pbs!.memoryTotal
-                                ? `${formatBytes(pbs!.memoryUsed, 0)}/${formatBytes(pbs!.memoryTotal, 0)}`
-                                : undefined
-                          }
-                          type="memory"
-                          resourceId={metricsKey}
-                        />
-                      </Show>
-                    </td>
-                    <td class="px-2 py-0.5">
-                      <Show
-                        when={online && diskPercentValue !== null}
-                        fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
-                      >
-                        <MetricBar
-                          value={diskPercentValue ?? 0}
-                          label={formatPercent(diskPercentValue ?? 0)}
-                          sublabel={diskSublabel}
-                          type="disk"
-                          resourceId={metricsKey}
-                        />
-                      </Show>
-                    </td>
-                    <Show when={hasAnyTemperatureData()}>
-                      <td class="px-2 py-0.5 whitespace-nowrap text-center">
-                        <Show
-                          when={
-                            online &&
-                            isPVE &&
-                            cpuTemperatureValue !== null &&
-                            (node!.temperature?.hasCPU ?? node!.temperature?.hasGPU ?? node!.temperature?.available) &&
-                            isTemperatureMonitoringEnabled(node!)
-                          }
-                          fallback={
-                            <span class="text-xs text-gray-400 dark:text-gray-500">-</span>
-                          }
-                        >
-                          {(() => {
-                            const value = cpuTemperatureValue as number;
-                            const severityClass =
-                              value >= 80
-                                ? 'text-red-600 dark:text-red-400'
-                                : value >= 70
-                                  ? 'text-yellow-600 dark:text-yellow-400'
-                                  : 'text-green-600 dark:text-green-400';
-
-                            const temp = node!.temperature;
-                            const cpuMinValue =
-                              typeof temp?.cpuMin === 'number' && temp.cpuMin > 0 ? temp.cpuMin : null;
-                            const cpuMaxValue =
-                              typeof temp?.cpuMaxRecord === 'number' && temp.cpuMaxRecord > 0
-                                ? temp.cpuMaxRecord
-                                : null;
-                            const hasMinMax = cpuMinValue !== null && cpuMaxValue !== null;
-
-                            const gpus = temp?.gpu ?? [];
-                            const hasGPU = gpus.length > 0;
-
-                            if (hasMinMax || hasGPU) {
-                              const min = Math.round(cpuMinValue!);
-                              const max = Math.round(cpuMaxValue!);
-
-                              const getTooltipColor = (temp: number) => {
-                                if (temp >= 80) return 'text-red-400';
-                                if (temp >= 70) return 'text-yellow-400';
-                                return 'text-green-400';
-                              };
-
-                              return (
-                                <span class="relative inline-block group">
-                                  <span class={`text-xs font-medium ${severityClass} cursor-help`}>
-                                    {value}°C
-                                  </span>
-                                  <span class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs whitespace-nowrap bg-gray-900 dark:bg-gray-700 text-white rounded shadow-lg z-50 pointer-events-none">
-                                    {hasMinMax && (
-                                      <div>
-                                        <span class="text-gray-300">CPU:</span> <span class={getTooltipColor(min)}>{min}</span>-<span class={getTooltipColor(max)}>{max}</span>°C
-                                      </div>
-                                    )}
-                                    {hasGPU && gpus.map((gpu) => {
-                                      const gpuTemp = gpu.edge ?? gpu.junction ?? gpu.mem ?? 0;
-                                      return (
-                                        <div>
-                                          <span class="text-gray-300">GPU:</span> <span class={getTooltipColor(gpuTemp)}>{Math.round(gpuTemp)}</span>°C
-                                          {gpu.edge && ` E:${Math.round(gpu.edge)}`}
-                                          {gpu.junction && ` J:${Math.round(gpu.junction)}`}
-                                          {gpu.mem && ` M:${Math.round(gpu.mem)}`}
-                                        </div>
-                                      );
-                                    })}
-                                  </span>
-                                </span>
-                              );
+                        <div class="flex items-center gap-1.5">
+                          <StatusDot
+                            variant={statusIndicator().variant}
+                            title={statusIndicator().label}
+                            ariaLabel={statusIndicator().label}
+                            size="xs"
+                          />
+                          <a
+                            href={
+                              isPVE
+                                ? node!.guestURL || node!.host || `https://${node!.name}:8006`
+                                : pbs!.host || `https://${pbs!.name}:8007`
                             }
-
-                            return <span class={`text-xs font-medium ${severityClass}`}>{value}°C</span>;
-                          })()}
+                            target="_blank"
+                            onClick={(e) => e.stopPropagation()}
+                            class="font-medium text-[11px] text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400"
+                          >
+                            {displayName()}
+                          </a>
+                          <Show when={showActualName()}>
+                            <span class="text-[9px] text-gray-500 dark:text-gray-400">
+                              ({(node as Node).name})
+                            </span>
+                          </Show>
+                          <Show when={isPVE}>
+                            <span class="text-[9px] px-1 py-0 rounded text-[8px] font-medium bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400">
+                              PVE
+                            </span>
+                          </Show>
+                          <Show when={isPVE && node!.pveVersion}>
+                            <span class="text-[9px] text-gray-500 dark:text-gray-400">
+                              v{node!.pveVersion.split('/')[1] || node!.pveVersion}
+                            </span>
+                          </Show>
+                          <Show when={isPVE && node!.isClusterMember !== undefined}>
+                            <span
+                              class={`text-[9px] px-1 py-0 rounded text-[8px] font-medium whitespace-nowrap ${node!.isClusterMember
+                                  ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                                  : 'bg-gray-100 text-gray-600 dark:bg-gray-700/50 dark:text-gray-400'
+                                }`}
+                            >
+                              {node!.isClusterMember ? node!.clusterName : 'Standalone'}
+                            </span>
+                          </Show>
+                          <Show when={isPBS}>
+                            <span class="text-[9px] px-1 py-0 rounded text-[8px] font-medium bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400">
+                              PBS
+                            </span>
+                          </Show>
+                          <Show when={isPBS && pbs!.version}>
+                            <span class="text-[9px] text-gray-500 dark:text-gray-400">
+                              v{pbs!.version}
+                            </span>
+                          </Show>
+                        </div>
+                      </td>
+                      <td class="hidden sm:table-cell px-2 py-0.5 whitespace-nowrap">
+                        <span
+                          class={`text-xs ${isPVE && (node?.uptime ?? 0) < 3600
+                              ? 'text-orange-500'
+                              : 'text-gray-600 dark:text-gray-400'
+                            }`}
+                        >
+                          <Show
+                            when={online && uptimeValue}
+                            fallback="-"
+                          >
+                            {formatUptime(uptimeValue)}
+                          </Show>
+                        </span>
+                      </td>
+                      <td class="px-2 py-0.5">
+                        <Show
+                          when={online && cpuPercentValue !== null}
+                          fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
+                        >
+                          <MetricBar
+                            value={cpuPercentValue ?? 0}
+                            label={formatPercent(cpuPercentValue ?? 0)}
+                            sublabel={
+                              isPVE && node!.cpuInfo?.cores
+                                ? `${node!.cpuInfo.cores} cores`
+                                : undefined
+                            }
+                            type="cpu"
+                            resourceId={metricsKey}
+                          />
                         </Show>
                       </td>
-                    </Show>
-                    <For each={countColumns()}>
-                      {(column) => {
-                        const value = getCountValue(item, column.key);
-                        const display = online ? value ?? '-' : '-';
-                        const textClass = online
-                          ? 'text-xs text-gray-700 dark:text-gray-300'
-                          : 'text-xs text-gray-400 dark:text-gray-500';
-                        return (
-                          <td class="px-2 py-0.5 whitespace-nowrap text-center">
-                            <span class={textClass}>{display}</span>
-                          </td>
-                        );
-                      }}
-                    </For>
-                  </tr>
-                );
-              }}
-            </For>
-          </tbody>
-        </table>
-      </div>
+                      <td class="px-2 py-0.5">
+                        <Show
+                          when={online && memoryPercentValue !== null}
+                          fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
+                        >
+                          <MetricBar
+                            value={memoryPercentValue ?? 0}
+                            label={formatPercent(memoryPercentValue ?? 0)}
+                            sublabel={
+                              isPVE && node!.memory
+                                ? `${formatBytes(node!.memory.used, 0)}/${formatBytes(node!.memory.total, 0)}`
+                                : isPBS && pbs!.memoryTotal
+                                  ? `${formatBytes(pbs!.memoryUsed, 0)}/${formatBytes(pbs!.memoryTotal, 0)}`
+                                  : undefined
+                            }
+                            type="memory"
+                            resourceId={metricsKey}
+                          />
+                        </Show>
+                      </td>
+                      <td class="hidden md:table-cell px-2 py-0.5">
+                        <Show
+                          when={online && diskPercentValue !== null}
+                          fallback={<span class="text-xs text-gray-500 dark:text-gray-400">-</span>}
+                        >
+                          <MetricBar
+                            value={diskPercentValue ?? 0}
+                            label={formatPercent(diskPercentValue ?? 0)}
+                            sublabel={diskSublabel}
+                            type="disk"
+                            resourceId={metricsKey}
+                          />
+                        </Show>
+                      </td>
+                      <Show when={hasAnyTemperatureData()}>
+                        <td class="hidden lg:table-cell px-2 py-0.5 whitespace-nowrap text-center">
+                          <Show
+                            when={
+                              online &&
+                              isPVE &&
+                              cpuTemperatureValue !== null &&
+                              (node!.temperature?.hasCPU ?? node!.temperature?.hasGPU ?? node!.temperature?.available) &&
+                              isTemperatureMonitoringEnabled(node!)
+                            }
+                            fallback={
+                              <span class="text-xs text-gray-400 dark:text-gray-500">-</span>
+                            }
+                          >
+                            {(() => {
+                              const value = cpuTemperatureValue as number;
+                              const severityClass =
+                                value >= 80
+                                  ? 'text-red-600 dark:text-red-400'
+                                  : value >= 70
+                                    ? 'text-yellow-600 dark:text-yellow-400'
+                                    : 'text-green-600 dark:text-green-400';
+
+                              const temp = node!.temperature;
+                              const cpuMinValue =
+                                typeof temp?.cpuMin === 'number' && temp.cpuMin > 0 ? temp.cpuMin : null;
+                              const cpuMaxValue =
+                                typeof temp?.cpuMaxRecord === 'number' && temp.cpuMaxRecord > 0
+                                  ? temp.cpuMaxRecord
+                                  : null;
+                              const hasMinMax = cpuMinValue !== null && cpuMaxValue !== null;
+
+                              const gpus = temp?.gpu ?? [];
+                              const hasGPU = gpus.length > 0;
+
+                              if (hasMinMax || hasGPU) {
+                                const min = Math.round(cpuMinValue!);
+                                const max = Math.round(cpuMaxValue!);
+
+                                const getTooltipColor = (temp: number) => {
+                                  if (temp >= 80) return 'text-red-400';
+                                  if (temp >= 70) return 'text-yellow-400';
+                                  return 'text-green-400';
+                                };
+
+                                return (
+                                  <span class="relative inline-block group">
+                                    <span class={`text-xs font-medium ${severityClass} cursor-help`}>
+                                      {value}°C
+                                    </span>
+                                    <span class="invisible group-hover:visible absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs whitespace-nowrap bg-gray-900 dark:bg-gray-700 text-white rounded shadow-lg z-50 pointer-events-none">
+                                      {hasMinMax && (
+                                        <div>
+                                          <span class="text-gray-300">CPU:</span> <span class={getTooltipColor(min)}>{min}</span>-<span class={getTooltipColor(max)}>{max}</span>°C
+                                        </div>
+                                      )}
+                                      {hasGPU && gpus.map((gpu) => {
+                                        const gpuTemp = gpu.edge ?? gpu.junction ?? gpu.mem ?? 0;
+                                        return (
+                                          <div>
+                                            <span class="text-gray-300">GPU:</span> <span class={getTooltipColor(gpuTemp)}>{Math.round(gpuTemp)}</span>°C
+                                            {gpu.edge && ` E:${Math.round(gpu.edge)}`}
+                                            {gpu.junction && ` J:${Math.round(gpu.junction)}`}
+                                            {gpu.mem && ` M:${Math.round(gpu.mem)}`}
+                                          </div>
+                                        );
+                                      })}
+                                    </span>
+                                  </span>
+                                );
+                              }
+
+                              return <span class={`text-xs font-medium ${severityClass}`}>{value}°C</span>;
+                            })()}
+                          </Show>
+                        </td>
+                      </Show>
+                      <For each={countColumns()}>
+                        {(column) => {
+                          const value = getCountValue(item, column.key);
+                          const display = online ? value ?? '-' : '-';
+                          const textClass = online
+                            ? 'text-xs text-gray-700 dark:text-gray-300'
+                            : 'text-xs text-gray-400 dark:text-gray-500';
+                          return (
+                            <td class="hidden lg:table-cell px-2 py-0.5 whitespace-nowrap text-center">
+                              <span class={textClass}>{display}</span>
+                            </td>
+                          );
+                        }}
+                      </For>
+                    </tr>
+                  );
+                }}
+              </For>
+            </tbody>
+          </table>
+        </div>
       </Card>
     </>
   );