From 0c7af34ad2d9b9dff96d7ca5e94edb7618a86446 Mon Sep 17 00:00:00 2001
From: "courtmanr@gmail.com" <courtmanr@gmail.com>
Date: Sun, 23 Nov 2025 22:53:33 +0000
Subject: [PATCH] Implement status bars for Storage, Backups, and Hosts tabs
 #744

---
 VERSION                                       |    2 +-
 .../src/components/Backups/BackupsFilter.tsx  |  145 ++-
 .../src/components/Backups/UnifiedBackups.tsx |   70 +-
 .../src/components/Dashboard/Dashboard.tsx    |   14 +-
 .../components/Dashboard/DashboardFilter.tsx  |   87 +-
 .../components/Docker/DockerSummaryStats.tsx  |   22 +-
 .../src/components/Storage/Storage.tsx        | 1008 +++++++++--------
 .../src/components/Storage/StorageFilter.tsx  |   68 +-
 8 files changed, 768 insertions(+), 648 deletions(-)

diff --git a/VERSION b/VERSION
index 20b5160..13d83d1 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-4.32.4
+4.32.5
diff --git a/frontend-modern/src/components/Backups/BackupsFilter.tsx b/frontend-modern/src/components/Backups/BackupsFilter.tsx
index df4a385..0146cb6 100644
--- a/frontend-modern/src/components/Backups/BackupsFilter.tsx
+++ b/frontend-modern/src/components/Backups/BackupsFilter.tsx
@@ -21,6 +21,8 @@ interface BackupsFilterProps {
   setSortDirection: (value: 'asc' | 'desc') => void;
   sortOptions?: { value: string; label: string }[];
   onReset?: () => void;
+  statusFilter?: () => 'all' | 'verified' | 'unverified';
+  setStatusFilter?: (value: 'all' | 'verified' | 'unverified') => void;
 }
 
 export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
@@ -305,44 +307,40 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
             <button
               type="button"
               onClick={() => props.setViewMode('all')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.viewMode() === 'all'
-                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'all'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               All
             </button>
             <button
               type="button"
               onClick={() => props.setViewMode(props.viewMode() === 'snapshot' ? 'all' : 'snapshot')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.viewMode() === 'snapshot'
-                  ? 'bg-white dark:bg-gray-800 text-yellow-600 dark:text-yellow-400 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'snapshot'
+                ? 'bg-white dark:bg-gray-800 text-yellow-600 dark:text-yellow-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               Snapshots
             </button>
             <button
               type="button"
               onClick={() => props.setViewMode(props.viewMode() === 'pve' ? 'all' : 'pve')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.viewMode() === 'pve'
-                  ? 'bg-white dark:bg-gray-800 text-orange-600 dark:text-orange-400 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'pve'
+                ? 'bg-white dark:bg-gray-800 text-orange-600 dark:text-orange-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               PVE
             </button>
             <button
               type="button"
               onClick={() => props.setViewMode(props.viewMode() === 'pbs' ? 'all' : 'pbs')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.viewMode() === 'pbs'
-                  ? 'bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'pbs'
+                ? 'bg-white dark:bg-gray-800 text-purple-600 dark:text-purple-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               PBS
             </button>
@@ -363,44 +361,40 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
               <button
                 type="button"
                 onClick={() => props.setTypeFilter!('all')}
-                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                  props.typeFilter!() === 'all'
-                    ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-                }`}
+                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'all'
+                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                  }`}
               >
                 All Types
               </button>
               <button
                 type="button"
                 onClick={() => props.setTypeFilter!(props.typeFilter!() === 'VM' ? 'all' : 'VM')}
-                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                  props.typeFilter!() === 'VM'
-                    ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-                }`}
+                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'VM'
+                  ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                  }`}
               >
                 VM
               </button>
               <button
                 type="button"
                 onClick={() => props.setTypeFilter!(props.typeFilter!() === 'LXC' ? 'all' : 'LXC')}
-                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                  props.typeFilter!() === 'LXC'
-                    ? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-                }`}
+                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'LXC'
+                  ? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                  }`}
               >
                 LXC
               </button>
               <button
                 type="button"
                 onClick={() => props.setTypeFilter!(props.typeFilter!() === 'Host' ? 'all' : 'Host')}
-                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                  props.typeFilter!() === 'Host'
-                    ? 'bg-white dark:bg-gray-800 text-orange-600 dark:text-orange-400 shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-                }`}
+                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.typeFilter!() === 'Host'
+                  ? 'bg-white dark:bg-gray-800 text-orange-600 dark:text-orange-400 shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                  }`}
               >
                 PMG
               </button>
@@ -413,22 +407,20 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
             <button
               type="button"
               onClick={() => props.setGroupBy('date')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.groupBy() === 'date'
-                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy() === 'date'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               By Date
             </button>
             <button
               type="button"
               onClick={() => props.setGroupBy(props.groupBy() === 'guest' ? 'date' : 'guest')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.groupBy() === 'guest'
-                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy() === 'guest'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               By Guest
             </button>
@@ -476,6 +468,42 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
 
           <div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
 
+          {/* Status Filter */}
+          <div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
+            <button
+              type="button"
+              onClick={() => props.setStatusFilter && props.setStatusFilter('all')}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'all'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
+            >
+              All
+            </button>
+            <button
+              type="button"
+              onClick={() => props.setStatusFilter && props.setStatusFilter('verified')}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'verified'
+                ? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
+            >
+              Verified
+            </button>
+            <button
+              type="button"
+              onClick={() => props.setStatusFilter && props.setStatusFilter('unverified')}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'unverified'
+                ? 'bg-white dark:bg-gray-800 text-amber-600 dark:text-amber-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
+            >
+              Unverified
+            </button>
+          </div>
+
+          <div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
+
           {/* Reset Button */}
           <button
             onClick={() => {
@@ -485,19 +513,20 @@ export const BackupsFilter: Component<BackupsFilterProps> = (props) => {
                 props.setSearch('');
                 props.setViewMode('all');
                 props.setGroupBy('date');
+                if (props.setStatusFilter) props.setStatusFilter('all');
               }
             }}
             title="Reset all filters"
-            class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
-              props.search().trim() !== '' ||
-              props.viewMode() !== 'all' ||
-              props.groupBy() !== 'date' ||
-              props.sortKey() !== 'backupTime' ||
-              props.sortDirection() !== 'desc' ||
-              (props.typeFilter && props.typeFilter() !== 'all')
+            class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${props.search().trim() !== '' ||
+                props.viewMode() !== 'all' ||
+                props.groupBy() !== 'date' ||
+                props.sortKey() !== 'backupTime' ||
+                props.sortDirection() !== 'desc' ||
+                (props.typeFilter && props.typeFilter() !== 'all') ||
+                (props.statusFilter && props.statusFilter() !== 'all')
                 ? 'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-900/70'
                 : 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
-            }`}
+              }`}
           >
             <svg
               width="14"
diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index 1bbfd14..63c2fa6 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -58,6 +58,7 @@ const UnifiedBackups: Component = () => {
   const [selectedNode, setSelectedNode] = createSignal<string | null>(null);
   const [typeFilter, setTypeFilter] = createSignal<'all' | FilterableGuestType>('all');
   const [backupTypeFilter, setBackupTypeFilter] = createSignal<'all' | BackupType>('all');
+  const [statusFilter, setStatusFilter] = createSignal<'all' | 'verified' | 'unverified'>('all');
   const [groupByMode, setGroupByMode] = createSignal<'date' | 'guest'>('date');
 
   // Convert between UI filter and internal filter for BackupsFilter component
@@ -429,6 +430,7 @@ const UnifiedBackups: Component = () => {
     const search = searchTerm().toLowerCase();
     const type = typeFilter();
     const backupType = backupTypeFilter();
+    const status = statusFilter();
     const dateRange = selectedDateRange();
     const nodeFilter = selectedNode();
 
@@ -533,6 +535,15 @@ const UnifiedBackups: Component = () => {
       data = data.filter((item) => item.backupType === backupType);
     }
 
+    // Status filter
+    if (status !== 'all') {
+      data = data.filter((item) => {
+        if (status === 'verified') return item.verified === true;
+        if (status === 'unverified') return item.verified === false;
+        return true;
+      });
+    }
+
     // Sort
     const key = sortKey();
     const dir = sortDirection();
@@ -734,6 +745,7 @@ const UnifiedBackups: Component = () => {
     setIsSearchLocked(false);
     setTypeFilter('all');
     setBackupTypeFilter('all');
+    setStatusFilter('all');
     setGroupByMode('date');
     setSortKey('backupTime');
     setSortDirection('desc');
@@ -764,6 +776,7 @@ const UnifiedBackups: Component = () => {
           selectedNode() ||
           typeFilter() !== 'all' ||
           backupTypeFilter() !== 'all' ||
+          statusFilter() !== 'all' ||
           selectedDateRange() !== null ||
           sortKey() !== 'backupTime' ||
           sortDirection() !== 'desc'
@@ -1149,9 +1162,8 @@ const UnifiedBackups: Component = () => {
 
                     return (
                       <tr
-                        class={`hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer transition-colors ${
-                          isSelected() ? 'bg-blue-50 dark:bg-blue-900/20' : ''
-                        }`}
+                        class={`hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer transition-colors ${isSelected() ? 'bg-blue-50 dark:bg-blue-900/20' : ''
+                          }`}
                         onClick={() => {
                           const currentSearch = searchTerm();
                           const nodeFilter = `node:${pbs.name}`;
@@ -1199,9 +1211,8 @@ const UnifiedBackups: Component = () => {
                         <td class="p-0.5 px-1.5 whitespace-nowrap">
                           <div class="flex items-center gap-1">
                             <span
-                              class={`h-2 w-2 rounded-full ${
-                                isOnline() ? 'bg-green-500' : 'bg-red-500'
-                              }`}
+                              class={`h-2 w-2 rounded-full ${isOnline() ? 'bg-green-500' : 'bg-red-500'
+                                }`}
                             />
                             <span class="text-xs text-gray-600 dark:text-gray-400">
                               {isOnline() ? 'Online' : 'Offline'}
@@ -1341,44 +1352,40 @@ const UnifiedBackups: Component = () => {
                     <button
                       type="button"
                       onClick={() => setChartTimeRange(7)}
-                      class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
-                        chartTimeRange() === 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'
-                      }`}
+                        }`}
                     >
                       7d
                     </button>
                     <button
                       type="button"
                       onClick={() => setChartTimeRange(30)}
-                      class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
-                        chartTimeRange() === 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'
-                      }`}
+                        }`}
                     >
                       30d
                     </button>
                     <button
                       type="button"
                       onClick={() => setChartTimeRange(90)}
-                      class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
-                        chartTimeRange() === 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'
-                      }`}
+                        }`}
                     >
                       90d
                     </button>
                     <button
                       type="button"
                       onClick={() => setChartTimeRange(365)}
-                      class={`p-0.5 px-1.5 text-xs border rounded transition-colors ${
-                        chartTimeRange() === 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'
-                      }`}
+                        }`}
                     >
                       1y
                     </button>
@@ -1695,9 +1702,8 @@ const UnifiedBackups: Component = () => {
                             let tooltipText = `${formattedDate}`;
 
                             if (d.total > 0) {
-                              tooltipText += `\nAvailable: ${d.total} backup${
-                                d.total > 1 ? 's' : ''
-                              }`;
+                              tooltipText += `\nAvailable: ${d.total} backup${d.total > 1 ? 's' : ''
+                                }`;
 
                               const breakdown: string[] = [];
                               if (d.snapshots > 0) breakdown.push(`Snapshots: ${d.snapshots}`);
@@ -1846,6 +1852,8 @@ const UnifiedBackups: Component = () => {
           searchInputRef={(el) => (searchInputRef = el)}
           typeFilter={typeFilter}
           setTypeFilter={setTypeFilter}
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
           hasHostBackups={hasHostBackups}
           sortOptions={sortKeyOptions}
           sortKey={sortKey}
@@ -1945,11 +1953,10 @@ const UnifiedBackups: Component = () => {
                               <div class="flex items-center justify-between gap-2 mb-1">
                                 <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'
+                                    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'
-                                    }`}
+                                      }`}
                                   >
                                     {item.type}
                                   </span>
@@ -1960,13 +1967,12 @@ const UnifiedBackups: Component = () => {
                                 </div>
                                 <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'
+                                    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'
-                                    }`}
+                                      }`}
                                   >
                                     {item.backupType === 'snapshot'
                                       ? 'SNAP'
@@ -2157,13 +2163,12 @@ const UnifiedBackups: Component = () => {
                                 <td class="p-0.5 pl-5 pr-1.5 text-sm align-middle">{item.vmid}</td>
                                 <td class="p-0.5 px-1.5 align-middle">
                                   <span
-                                    class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${
-                                      item.type === 'VM'
+                                    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'
-                                    }`}
+                                      }`}
                                   >
                                     {item.type}
                                   </span>
@@ -2196,13 +2201,12 @@ const UnifiedBackups: Component = () => {
                                 <td class="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'
+                                      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'
-                                      }`}
+                                        }`}
                                     >
                                       {item.backupType === 'snapshot'
                                         ? 'Snapshot'
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index f783b93..7bbdcff 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -196,7 +196,7 @@ interface DashboardProps {
 }
 
 type ViewMode = 'all' | 'vm' | 'lxc';
-type StatusMode = 'all' | 'running' | 'stopped';
+type StatusMode = 'all' | 'running' | 'degraded' | 'stopped';
 type GroupingMode = 'grouped' | 'flat';
 
 export function Dashboard(props: DashboardProps) {
@@ -232,7 +232,9 @@ export function Dashboard(props: DashboardProps) {
 
   const [statusMode, setStatusMode] = usePersistentSignal<StatusMode>('dashboardStatusMode', 'all', {
     deserialize: (raw) =>
-      raw === 'all' || raw === 'running' || raw === 'stopped' ? raw : ('all' as StatusMode),
+      raw === 'all' || raw === 'running' || raw === 'degraded' || raw === 'stopped'
+        ? (raw as StatusMode)
+        : 'all',
   });
 
   // Grouping mode - grouped by node or flat list
@@ -487,6 +489,14 @@ export function Dashboard(props: DashboardProps) {
     // Filter by status
     if (statusMode() === 'running') {
       guests = guests.filter((g) => g.status === 'running');
+    } else if (statusMode() === 'degraded') {
+      guests = guests.filter((g) => {
+        const status = (g.status || '').toLowerCase();
+        return (
+          DEGRADED_HEALTH_STATUSES.has(status) ||
+          (status !== 'running' && !OFFLINE_HEALTH_STATUSES.has(status))
+        );
+      });
     } else if (statusMode() === 'stopped') {
       guests = guests.filter((g) => g.status !== 'running');
     }
diff --git a/frontend-modern/src/components/Dashboard/DashboardFilter.tsx b/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
index 54296ec..46195e8 100644
--- a/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
+++ b/frontend-modern/src/components/Dashboard/DashboardFilter.tsx
@@ -11,8 +11,8 @@ interface DashboardFilterProps {
   isSearchLocked: () => boolean;
   viewMode: () => 'all' | 'vm' | 'lxc';
   setViewMode: (value: 'all' | 'vm' | 'lxc') => void;
-  statusMode: () => 'all' | 'running' | 'stopped';
-  setStatusMode: (value: 'all' | 'running' | 'stopped') => void;
+  statusMode: () => 'all' | 'running' | 'degraded' | 'stopped';
+  setStatusMode: (value: 'all' | 'running' | 'degraded' | 'stopped') => void;
   groupingMode: () => 'grouped' | 'flat';
   setGroupingMode: (value: 'grouped' | 'flat') => void;
   setSortKey: (value: string) => void;
@@ -292,33 +292,30 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
             <button
               type="button"
               onClick={() => props.setViewMode('all')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.viewMode() === 'all'
-                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'all'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               All
             </button>
             <button
               type="button"
               onClick={() => props.setViewMode(props.viewMode() === 'vm' ? 'all' : 'vm')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.viewMode() === 'vm'
-                  ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'vm'
+                ? 'bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               VMs
             </button>
             <button
               type="button"
               onClick={() => props.setViewMode(props.viewMode() === 'lxc' ? 'all' : 'lxc')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.viewMode() === 'lxc'
-                  ? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.viewMode() === 'lxc'
+                ? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               LXCs
             </button>
@@ -331,33 +328,40 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
             <button
               type="button"
               onClick={() => props.setStatusMode('all')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.statusMode() === 'all'
-                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'all'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
             >
               All
             </button>
             <button
               type="button"
               onClick={() => props.setStatusMode(props.statusMode() === 'running' ? 'all' : 'running')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.statusMode() === 'running'
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'running'
                   ? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
                   : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+                }`}
             >
               Running
             </button>
+            <button
+              type="button"
+              onClick={() => props.setStatusMode(props.statusMode() === 'degraded' ? 'all' : 'degraded')}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'degraded'
+                  ? 'bg-white dark:bg-gray-800 text-amber-600 dark:text-amber-400 shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
+            >
+              Degraded
+            </button>
             <button
               type="button"
               onClick={() => props.setStatusMode(props.statusMode() === 'stopped' ? 'all' : 'stopped')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.statusMode() === 'stopped'
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusMode() === 'stopped'
                   ? 'bg-white dark:bg-gray-800 text-red-600 dark:text-red-400 shadow-sm'
                   : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+                }`}
             >
               Stopped
             </button>
@@ -370,11 +374,10 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
             <button
               type="button"
               onClick={() => props.setGroupingMode('grouped')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.groupingMode() === 'grouped'
-                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupingMode() === 'grouped'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
               title="Group by node"
             >
               Grouped
@@ -382,11 +385,10 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
             <button
               type="button"
               onClick={() => props.setGroupingMode(props.groupingMode() === 'flat' ? 'grouped' : 'flat')}
-              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                props.groupingMode() === 'flat'
-                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-              }`}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupingMode() === 'flat'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
               title="Flat list view"
             >
               List
@@ -411,14 +413,13 @@ export const DashboardFilter: Component<DashboardFilterProps> = (props) => {
               props.setGroupingMode('grouped');
             }}
             title="Reset all filters"
-            class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
-              props.search() ||
+            class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${props.search() ||
               props.viewMode() !== 'all' ||
               props.statusMode() !== 'all' ||
               props.groupingMode() !== 'grouped'
-                ? 'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-900/70'
-                : 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
-            }`}
+              ? 'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-900/70'
+              : 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
+              }`}
           >
             <svg
               width="14"
diff --git a/frontend-modern/src/components/Docker/DockerSummaryStats.tsx b/frontend-modern/src/components/Docker/DockerSummaryStats.tsx
index 1626ea6..cd113c3 100644
--- a/frontend-modern/src/components/Docker/DockerSummaryStats.tsx
+++ b/frontend-modern/src/components/Docker/DockerSummaryStats.tsx
@@ -67,6 +67,7 @@ export interface DockerSummaryStats {
   containers: {
     total: number;
     running: number;
+    degraded: number;
     stopped: number;
     error: number;
   };
@@ -123,6 +124,7 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
     // Container stats
     let totalContainers = 0;
     let runningContainers = 0;
+    let degradedContainers = 0;
     let stoppedContainers = 0;
     let errorContainers = 0;
 
@@ -144,8 +146,15 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
 
       containers.forEach(container => {
         const state = container.state?.toLowerCase();
+        const health = container.health?.toLowerCase();
+
         if (state === 'running') {
-          runningContainers++;
+          if (health === 'unhealthy') {
+            degradedContainers++;
+          } else {
+            runningContainers++;
+          }
+
           // Sum CPU/Memory for running containers
           if (typeof container.cpuPercent === 'number' && !Number.isNaN(container.cpuPercent)) {
             totalCpu += container.cpuPercent;
@@ -187,6 +196,7 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
       containers: {
         total: totalContainers,
         running: runningContainers,
+        degraded: degradedContainers,
         stopped: stoppedContainers,
         error: errorContainers,
       },
@@ -305,6 +315,16 @@ export const DockerSummaryStatsBar: Component<DockerSummaryStatsProps> = (props)
           isActive={isActive('container-state', 'running')}
         />
 
+        <Show when={summary().containers.degraded > 0}>
+          <StatCard
+            label="Degraded"
+            value={summary().containers.degraded}
+            variant="warning"
+            onClick={() => props.onFilterChange?.({ type: 'container-state', value: 'degraded' })}
+            isActive={isActive('container-state', 'degraded')}
+          />
+        </Show>
+
         <Show when={summary().containers.stopped > 0}>
           <StatCard
             label="Stopped"
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index bf4cf63..9c37102 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -49,6 +49,14 @@ const Storage: Component = () => {
       deserialize: (raw) => (raw === 'desc' ? 'desc' : 'asc'),
     },
   );
+  const [statusFilter, setStatusFilter] = usePersistentSignal<'all' | 'available' | 'offline'>(
+    'storageStatusFilter',
+    'all',
+    {
+      deserialize: (raw) =>
+        raw === 'all' || raw === 'available' || raw === 'offline' ? raw : 'all',
+    },
+  );
 
   // Create a mapping from node instance ID to node object
   const nodeByInstance = createMemo(() => {
@@ -316,6 +324,18 @@ const Storage: Component = () => {
       }
     }
 
+    // Apply status filter
+    if (statusFilter() !== 'all') {
+      storage = storage.filter((s) => {
+        if (statusFilter() === 'available') {
+          return s.status === 'available';
+        } else {
+          // Offline includes anything not available
+          return s.status !== 'available';
+        }
+      });
+    }
+
     // Apply search filter
     let search = searchTerm().toLowerCase().trim();
     if (search) {
@@ -477,6 +497,7 @@ const Storage: Component = () => {
     setViewMode('node');
     setSortKey('name');
     setSortDirection('asc');
+    setStatusFilter('all');
   };
 
   // Handle keyboard shortcuts
@@ -495,7 +516,12 @@ const Storage: Component = () => {
       // Escape key behavior
       if (e.key === 'Escape') {
         // Clear search and reset filters
-        if (searchTerm().trim() || selectedNode() || viewMode() !== 'node') {
+        if (
+          searchTerm().trim() ||
+          selectedNode() ||
+          viewMode() !== 'node' ||
+          statusFilter() !== 'all'
+        ) {
           resetFilters();
 
           // Blur the search input if it's focused
@@ -539,22 +565,20 @@ const Storage: Component = () => {
           <button
             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'
+            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'
-            }`}
+              }`}
           >
             Storage Pools
           </button>
           <button
             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'
+            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'
-            }`}
+              }`}
           >
             Physical Disks
           </button>
@@ -573,6 +597,8 @@ const Storage: Component = () => {
           setSortKey={setSortKey}
           sortDirection={sortDirection}
           setSortDirection={setSortDirection}
+          statusFilter={statusFilter}
+          setStatusFilter={setStatusFilter}
           searchInputRef={(el) => (searchInputRef = el)}
         />
       </Show>
@@ -777,527 +803,521 @@ const Storage: Component = () => {
                               {(validNode) => <NodeGroupHeader node={validNode()} colspan={9} />}
                             </Show>
 
-                          {/* Storage Rows */}
-                          <For each={storages} fallback={<></>}>
-                            {(storage) => {
-                              const usagePercent =
-                                storage.total > 0 ? (storage.used / storage.total) * 100 : 0;
-                              const isDisabled = storage.status !== 'available';
-                              const pbsNamesDisplay = createMemo(() => {
-                                const names = storage.pbsNames?.filter(
-                                  (name): name is string => Boolean(name),
-                                );
-                                if (!names || names.length === 0) return '';
-                                return [...names].sort((a, b) => a.localeCompare(b)).join(', ');
-                              });
-
-                              const nodeListDisplay = createMemo(() => {
-                                const nodes =
-                                  storage.nodes && storage.nodes.length > 0
-                                    ? storage.nodes.filter((node): node is string => Boolean(node))
-                                    : [storage.node].filter((node): node is string => Boolean(node));
-                                return nodes.join(', ');
-                              });
-
-                              const alertStyles = createMemo(() =>
-                                getAlertStyles(
-                                  storage.id || `${storage.instance}-${storage.node}-${storage.name}`,
-                                  activeAlerts,
-                                  alertsEnabled(),
-                                ),
-                              );
-
-                              const parentNodeOnline = createMemo(() => {
-                                if (viewMode() === 'node' && node) {
-                                  return node.status === 'online' && (node.uptime || 0) > 0;
-                                }
-                                return true;
-                              });
-
-                              const showAlertHighlight = createMemo(
-                                () => alertStyles().hasUnacknowledgedAlert && parentNodeOnline(),
-                              );
-
-                              const isCephStorage = createMemo(() => isCephType(storage.type));
-                              const canExpand = createMemo(() => isCephStorage());
-                              const zfsPool = storage.zfsPool;
-                              const storageRowId = createMemo(
-                                () => storage.id || `${storage.instance}-${storage.node}-${storage.name}`,
-                              );
-                              const cephCluster = createMemo(
-                                () => cephClusterByInstance()[storage.instance],
-                              );
-                              const cephInstanceStorages = createMemo(() =>
-                                (state.storage || []).filter(
-                                  (item) =>
-                                    item.instance === storage.instance && isCephType(item.type),
-                                ),
-                              );
-                              const cephHealthLabel = createMemo(() => {
-                                const health = (cephCluster()?.health || '').toUpperCase();
-                                if (!health || health === 'HEALTH_UNKNOWN') {
-                                  return '';
-                                }
-                                return getCephHealthLabel(health);
-                              });
-                              const cephHealthClass = createMemo(() => {
-                                const health = (cephCluster()?.health || '').toUpperCase();
-                                if (!health || health === 'HEALTH_UNKNOWN') {
-                                  return '';
-                                }
-                                return getCephHealthStyles(health);
-                              });
-                              const drawerDisabled = createMemo(
-                                () => isDisabled || !parentNodeOnline(),
-                              );
-                              const cephSummaryText = createMemo(() => {
-                                const cluster = cephCluster();
-                                const parts: string[] = [];
-
-                                if (cluster && Number.isFinite(cluster.totalBytes)) {
-                                  const total = Math.max(0, cluster.totalBytes || 0);
-                                  const used = Math.max(0, cluster.usedBytes || 0);
-                                  const percent = total > 0 ? (used / total) * 100 : 0;
-                                  parts.push(
-                                    `${formatBytes(used, 0)} / ${formatBytes(total, 0)} (${formatPercent(percent)})`,
+                            {/* Storage Rows */}
+                            <For each={storages} fallback={<></>}>
+                              {(storage) => {
+                                const usagePercent =
+                                  storage.total > 0 ? (storage.used / storage.total) * 100 : 0;
+                                const isDisabled = storage.status !== 'available';
+                                const pbsNamesDisplay = createMemo(() => {
+                                  const names = storage.pbsNames?.filter(
+                                    (name): name is string => Boolean(name),
                                   );
-                                  if (
-                                    Number.isFinite(cluster.numOsds) &&
-                                    Number.isFinite(cluster.numOsdsUp)
-                                  ) {
-                                    parts.push(`OSDs ${cluster.numOsdsUp}/${cluster.numOsds}`);
+                                  if (!names || names.length === 0) return '';
+                                  return [...names].sort((a, b) => a.localeCompare(b)).join(', ');
+                                });
+
+                                const nodeListDisplay = createMemo(() => {
+                                  const nodes =
+                                    storage.nodes && storage.nodes.length > 0
+                                      ? storage.nodes.filter((node): node is string => Boolean(node))
+                                      : [storage.node].filter((node): node is string => Boolean(node));
+                                  return nodes.join(', ');
+                                });
+
+                                const alertStyles = createMemo(() =>
+                                  getAlertStyles(
+                                    storage.id || `${storage.instance}-${storage.node}-${storage.name}`,
+                                    activeAlerts,
+                                    alertsEnabled(),
+                                  ),
+                                );
+
+                                const parentNodeOnline = createMemo(() => {
+                                  if (viewMode() === 'node' && node) {
+                                    return node.status === 'online' && (node.uptime || 0) > 0;
                                   }
-                                  if (Number.isFinite(cluster.numPGs) && cluster.numPGs > 0) {
-                                    parts.push(`PGs ${cluster.numPGs.toLocaleString()}`);
+                                  return true;
+                                });
+
+                                const showAlertHighlight = createMemo(
+                                  () => alertStyles().hasUnacknowledgedAlert && parentNodeOnline(),
+                                );
+
+                                const isCephStorage = createMemo(() => isCephType(storage.type));
+                                const canExpand = createMemo(() => isCephStorage());
+                                const zfsPool = storage.zfsPool;
+                                const storageRowId = createMemo(
+                                  () => storage.id || `${storage.instance}-${storage.node}-${storage.name}`,
+                                );
+                                const cephCluster = createMemo(
+                                  () => cephClusterByInstance()[storage.instance],
+                                );
+                                const cephInstanceStorages = createMemo(() =>
+                                  (state.storage || []).filter(
+                                    (item) =>
+                                      item.instance === storage.instance && isCephType(item.type),
+                                  ),
+                                );
+                                const cephHealthLabel = createMemo(() => {
+                                  const health = (cephCluster()?.health || '').toUpperCase();
+                                  if (!health || health === 'HEALTH_UNKNOWN') {
+                                    return '';
                                   }
-                                } else {
-                                  const storages = cephInstanceStorages();
-                                  if (storages.length > 0) {
-                                    const totals = storages.reduce(
-                                      (acc, item) => {
-                                        acc.total += Math.max(0, item.total || 0);
-                                        acc.used += Math.max(0, item.used || 0);
-                                        return acc;
-                                      },
-                                      { total: 0, used: 0 },
+                                  return getCephHealthLabel(health);
+                                });
+                                const cephHealthClass = createMemo(() => {
+                                  const health = (cephCluster()?.health || '').toUpperCase();
+                                  if (!health || health === 'HEALTH_UNKNOWN') {
+                                    return '';
+                                  }
+                                  return getCephHealthStyles(health);
+                                });
+                                const drawerDisabled = createMemo(
+                                  () => isDisabled || !parentNodeOnline(),
+                                );
+                                const cephSummaryText = createMemo(() => {
+                                  const cluster = cephCluster();
+                                  const parts: string[] = [];
+
+                                  if (cluster && Number.isFinite(cluster.totalBytes)) {
+                                    const total = Math.max(0, cluster.totalBytes || 0);
+                                    const used = Math.max(0, cluster.usedBytes || 0);
+                                    const percent = total > 0 ? (used / total) * 100 : 0;
+                                    parts.push(
+                                      `${formatBytes(used, 0)} / ${formatBytes(total, 0)} (${formatPercent(percent)})`,
                                     );
-                                    if (totals.total > 0) {
-                                      const percent = (totals.used / totals.total) * 100;
-                                      parts.push(
-                                        `${formatBytes(totals.used, 0)} / ${formatBytes(totals.total, 0)} (${formatPercent(percent)})`,
+                                    if (
+                                      Number.isFinite(cluster.numOsds) &&
+                                      Number.isFinite(cluster.numOsdsUp)
+                                    ) {
+                                      parts.push(`OSDs ${cluster.numOsdsUp}/${cluster.numOsds}`);
+                                    }
+                                    if (Number.isFinite(cluster.numPGs) && cluster.numPGs > 0) {
+                                      parts.push(`PGs ${cluster.numPGs.toLocaleString()}`);
+                                    }
+                                  } else {
+                                    const storages = cephInstanceStorages();
+                                    if (storages.length > 0) {
+                                      const totals = storages.reduce(
+                                        (acc, item) => {
+                                          acc.total += Math.max(0, item.total || 0);
+                                          acc.used += Math.max(0, item.used || 0);
+                                          return acc;
+                                        },
+                                        { total: 0, used: 0 },
                                       );
+                                      if (totals.total > 0) {
+                                        const percent = (totals.used / totals.total) * 100;
+                                        parts.push(
+                                          `${formatBytes(totals.used, 0)} / ${formatBytes(totals.total, 0)} (${formatPercent(percent)})`,
+                                        );
+                                      }
                                     }
                                   }
-                                }
 
-                                return parts.join(' • ');
-                              });
-                              const cephPoolsText = createMemo(() => {
-                                const cluster = cephCluster();
-                                if (cluster && cluster.pools && cluster.pools.length > 0) {
-                                  return cluster.pools
+                                  return parts.join(' • ');
+                                });
+                                const cephPoolsText = createMemo(() => {
+                                  const cluster = cephCluster();
+                                  if (cluster && cluster.pools && cluster.pools.length > 0) {
+                                    return cluster.pools
+                                      .slice(0, 2)
+                                      .map((pool) => {
+                                        if (!pool) return '';
+                                        const total = Math.max(1, pool.storedBytes + pool.availableBytes);
+                                        const percent = total > 0 ? (pool.storedBytes / total) * 100 : 0;
+                                        return `${pool.name}: ${formatPercent(percent)}`;
+                                      })
+                                      .filter(Boolean)
+                                      .join(', ');
+                                  }
+
+                                  const storages = cephInstanceStorages();
+                                  if (storages.length === 0) {
+                                    return '';
+                                  }
+
+                                  return storages
                                     .slice(0, 2)
-                                    .map((pool) => {
-                                      if (!pool) return '';
-                                      const total = Math.max(1, pool.storedBytes + pool.availableBytes);
-                                      const percent = total > 0 ? (pool.storedBytes / total) * 100 : 0;
-                                      return `${pool.name}: ${formatPercent(percent)}`;
+                                    .map((item) => {
+                                      const total = Math.max(1, item.total || 0);
+                                      const used = Math.max(0, item.used || 0);
+                                      const percent = total > 0 ? (used / total) * 100 : 0;
+                                      return `${item.name}: ${formatPercent(percent)}`;
                                     })
                                     .filter(Boolean)
                                     .join(', ');
-                                }
-
-                                const storages = cephInstanceStorages();
-                                if (storages.length === 0) {
+                                });
+                                const cephHealthMessage = createMemo(() => {
+                                  const cluster = cephCluster();
+                                  if (cluster?.healthMessage) {
+                                    return cluster.healthMessage;
+                                  }
+                                  if (cluster && cluster.health && cluster.health !== 'HEALTH_UNKNOWN') {
+                                    return '';
+                                  }
+                                  if (cephInstanceStorages().length > 0) {
+                                    return 'Derived from storage metrics – live Ceph telemetry unavailable.';
+                                  }
                                   return '';
-                                }
-
-                                return storages
-                                  .slice(0, 2)
-                                  .map((item) => {
-                                    const total = Math.max(1, item.total || 0);
-                                    const used = Math.max(0, item.used || 0);
-                                    const percent = total > 0 ? (used / total) * 100 : 0;
-                                    return `${item.name}: ${formatPercent(percent)}`;
-                                  })
-                                  .filter(Boolean)
-                                  .join(', ');
-                              });
-                              const cephHealthMessage = createMemo(() => {
-                                const cluster = cephCluster();
-                                if (cluster?.healthMessage) {
-                                  return cluster.healthMessage;
-                                }
-                                if (cluster && cluster.health && cluster.health !== 'HEALTH_UNKNOWN') {
-                                  return '';
-                                }
-                                if (cephInstanceStorages().length > 0) {
-                                  return 'Derived from storage metrics – live Ceph telemetry unavailable.';
-                                }
-                                return '';
-                              });
-                              const isExpanded = createMemo(
-                                () => expandedStorage() === storageRowId(),
-                              );
-
-                              const hasAcknowledgedOnlyAlert = createMemo(
-                                () => alertStyles().hasAcknowledgedOnlyAlert && parentNodeOnline(),
-                              );
-
-                              const rowClass = createMemo(() => {
-                                const classes = [
-                                  'transition-all duration-200',
-                                  'hover:bg-gray-50 dark:hover:bg-gray-700/30',
-                                  'hover:shadow-sm',
-                                ];
-
-                                if (showAlertHighlight()) {
-                                  classes.push(
-                                    alertStyles().severity === 'critical'
-                                      ? 'bg-red-50 dark:bg-red-950/30'
-                                      : 'bg-yellow-50 dark:bg-yellow-950/20',
-                                  );
-                                } else if (hasAcknowledgedOnlyAlert()) {
-                                  classes.push('bg-gray-50/40 dark:bg-gray-800/40');
-                                }
-
-                                if (isDisabled || !parentNodeOnline()) {
-                                  classes.push('opacity-60');
-                                }
-
-                                if (canExpand()) {
-                                  classes.push('cursor-pointer');
-                                }
-
-                                if (canExpand() && isExpanded()) {
-                                  classes.push('bg-gray-50 dark:bg-gray-800/40');
-                                }
-
-                                return classes.join(' ');
-                              });
-
-                              const rowStyle = createMemo(() => {
-                                if (showAlertHighlight()) {
-                                  const color =
-                                    alertStyles().severity === 'critical' ? '#ef4444' : '#eab308';
-                                  return {
-                                    'box-shadow': `inset 4px 0 0 0 ${color}`,
-                                  };
-                                }
-                                if (hasAcknowledgedOnlyAlert()) {
-                                  return {
-                                    'box-shadow': 'inset 4px 0 0 0 rgba(156, 163, 175, 0.8)',
-                                  };
-                                }
-                                return {} as Record<string, string>;
-                              });
-
-                              const firstCellHasIndicator = createMemo(
-                                () => showAlertHighlight() || hasAcknowledgedOnlyAlert(),
-                              );
-
-                              const firstCellClass = createMemo(() => {
-                                if (viewMode() === 'node') {
-                                  return firstCellHasIndicator()
-                                    ? 'p-0.5 pl-7 pr-1.5'
-                                    : 'p-0.5 pl-8 pr-1.5';
-                                }
-                                return firstCellHasIndicator()
-                                  ? 'p-0.5 pl-3 pr-1.5'
-                                  : 'p-0.5 pl-3 pr-1.5';
-                              });
-
-                              const toggleDrawer = () => {
-                                if (!canExpand()) return;
-                                setExpandedStorage((prev) =>
-                                  prev === storageRowId() ? null : storageRowId(),
+                                });
+                                const isExpanded = createMemo(
+                                  () => expandedStorage() === storageRowId(),
                                 );
-                              };
 
-                              return (
-                                <>
-                                  <tr
-                                    class={`${rowClass()} transition-colors`}
-                                    style={rowStyle()}
-                                    onClick={toggleDrawer}
-                                    aria-expanded={canExpand() && isExpanded() ? 'true' : 'false'}
-                                  >
-                                    <td class={`${firstCellClass()} align-middle`}>
-                                      <div class="flex items-center gap-2 min-w-0">
-                                        <span
-                                          class={`text-sm font-medium text-gray-900 dark:text-gray-100 truncate ${
-                                            canExpand() ? 'max-w-[180px]' : 'max-w-[200px]'
-                                          }`}
-                                          title={storage.name}
-                                        >
-                                          {storage.name}
-                                        </span>
-                                        {/* ZFS Health Badge */}
-                                        <Show when={zfsPool && zfsPool.state !== 'ONLINE'}>
+                                const hasAcknowledgedOnlyAlert = createMemo(
+                                  () => alertStyles().hasAcknowledgedOnlyAlert && parentNodeOnline(),
+                                );
+
+                                const rowClass = createMemo(() => {
+                                  const classes = [
+                                    'transition-all duration-200',
+                                    'hover:bg-gray-50 dark:hover:bg-gray-700/30',
+                                    'hover:shadow-sm',
+                                  ];
+
+                                  if (showAlertHighlight()) {
+                                    classes.push(
+                                      alertStyles().severity === 'critical'
+                                        ? 'bg-red-50 dark:bg-red-950/30'
+                                        : 'bg-yellow-50 dark:bg-yellow-950/20',
+                                    );
+                                  } else if (hasAcknowledgedOnlyAlert()) {
+                                    classes.push('bg-gray-50/40 dark:bg-gray-800/40');
+                                  }
+
+                                  if (isDisabled || !parentNodeOnline()) {
+                                    classes.push('opacity-60');
+                                  }
+
+                                  if (canExpand()) {
+                                    classes.push('cursor-pointer');
+                                  }
+
+                                  if (canExpand() && isExpanded()) {
+                                    classes.push('bg-gray-50 dark:bg-gray-800/40');
+                                  }
+
+                                  return classes.join(' ');
+                                });
+
+                                const rowStyle = createMemo(() => {
+                                  if (showAlertHighlight()) {
+                                    const color =
+                                      alertStyles().severity === 'critical' ? '#ef4444' : '#eab308';
+                                    return {
+                                      'box-shadow': `inset 4px 0 0 0 ${color}`,
+                                    };
+                                  }
+                                  if (hasAcknowledgedOnlyAlert()) {
+                                    return {
+                                      'box-shadow': 'inset 4px 0 0 0 rgba(156, 163, 175, 0.8)',
+                                    };
+                                  }
+                                  return {} as Record<string, string>;
+                                });
+
+                                const firstCellHasIndicator = createMemo(
+                                  () => showAlertHighlight() || hasAcknowledgedOnlyAlert(),
+                                );
+
+                                const firstCellClass = createMemo(() => {
+                                  if (viewMode() === 'node') {
+                                    return firstCellHasIndicator()
+                                      ? 'p-0.5 pl-7 pr-1.5'
+                                      : 'p-0.5 pl-8 pr-1.5';
+                                  }
+                                  return firstCellHasIndicator()
+                                    ? 'p-0.5 pl-3 pr-1.5'
+                                    : 'p-0.5 pl-3 pr-1.5';
+                                });
+
+                                const toggleDrawer = () => {
+                                  if (!canExpand()) return;
+                                  setExpandedStorage((prev) =>
+                                    prev === storageRowId() ? null : storageRowId(),
+                                  );
+                                };
+
+                                return (
+                                  <>
+                                    <tr
+                                      class={`${rowClass()} transition-colors`}
+                                      style={rowStyle()}
+                                      onClick={toggleDrawer}
+                                      aria-expanded={canExpand() && isExpanded() ? 'true' : 'false'}
+                                    >
+                                      <td class={`${firstCellClass()} align-middle`}>
+                                        <div class="flex items-center gap-2 min-w-0">
                                           <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'
-                                            }`}
+                                            class={`text-sm font-medium text-gray-900 dark:text-gray-100 truncate ${canExpand() ? 'max-w-[180px]' : 'max-w-[200px]'
+                                              }`}
+                                            title={storage.name}
                                           >
-                                            {zfsPool?.state}
+                                            {storage.name}
                                           </span>
-                                        </Show>
-                                        {/* ZFS Error Badge */}
-                                        <Show
-                                          when={
-                                            zfsPool &&
-                                            (zfsPool.readErrors > 0 ||
-                                              zfsPool.writeErrors > 0 ||
-                                              zfsPool.checksumErrors > 0)
-                                          }
-                                        >
-                                          <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">
-                                            ERRORS
-                                          </span>
-                                        </Show>
-                                        <Show when={viewMode() === 'storage'}>
-                                          <Show when={storage.pbsNames}>
+                                          {/* ZFS Health Badge */}
+                                          <Show when={zfsPool && zfsPool.state !== 'ONLINE'}>
                                             <span
-                                              class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap truncate max-w-[240px]"
-                                              title={pbsNamesDisplay()}
+                                              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'
+                                                }`}
                                             >
-                                              ({pbsNamesDisplay()})
+                                              {zfsPool?.state}
                                             </span>
                                           </Show>
-                                          <Show when={!storage.pbsNames}>
-                                            <span
-                                              class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap truncate max-w-[240px]"
-                                              title={nodeListDisplay()}
-                                            >
-                                              ({nodeListDisplay()})
+                                          {/* ZFS Error Badge */}
+                                          <Show
+                                            when={
+                                              zfsPool &&
+                                              (zfsPool.readErrors > 0 ||
+                                                zfsPool.writeErrors > 0 ||
+                                                zfsPool.checksumErrors > 0)
+                                            }
+                                          >
+                                            <span class="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300">
+                                              ERRORS
                                             </span>
                                           </Show>
-                                        </Show>
-                                        <Show when={isCephStorage() && cephHealthLabel()}>
-                                          <span
-                                            class={`px-1.5 py-0.5 rounded text-[10px] font-medium ${cephHealthClass()}`}
-                                            title={cephCluster()?.healthMessage}
-                                          >
-                                            {cephHealthLabel()}
-                                          </span>
-                                        </Show>
-                                      </div>
-                                    </td>
-                                    <td class="p-0.5 px-1.5 hidden md:table-cell">
-                                      <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">
-                                      <span
-                                        class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap truncate max-w-[220px]"
-                                        title={storage.content || '-'}
-                                      >
-                                        {storage.content || '-'}
-                                      </span>
-                                    </td>
-                                    <td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
-                                      <span
-                                        class={`${
-                                          storage.status === 'available'
-                                            ? '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">
-                                        <span class="text-xs text-gray-600 dark:text-gray-400">
-                                          {storage.shared ? '✓' : '-'}
+                                          <Show when={viewMode() === 'storage'}>
+                                            <Show when={storage.pbsNames}>
+                                              <span
+                                                class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap truncate max-w-[240px]"
+                                                title={pbsNamesDisplay()}
+                                              >
+                                                ({pbsNamesDisplay()})
+                                              </span>
+                                            </Show>
+                                            <Show when={!storage.pbsNames}>
+                                              <span
+                                                class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap truncate max-w-[240px]"
+                                                title={nodeListDisplay()}
+                                              >
+                                                ({nodeListDisplay()})
+                                              </span>
+                                            </Show>
+                                          </Show>
+                                          <Show when={isCephStorage() && cephHealthLabel()}>
+                                            <span
+                                              class={`px-1.5 py-0.5 rounded text-[10px] font-medium ${cephHealthClass()}`}
+                                              title={cephCluster()?.healthMessage}
+                                            >
+                                              {cephHealthLabel()}
+                                            </span>
+                                          </Show>
+                                        </div>
+                                      </td>
+                                      <td class="p-0.5 px-1.5 hidden md:table-cell">
+                                        <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>
-                                    </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={`absolute top-0 left-0 h-full ${getProgressBarColor(usagePercent)}`}
-                                          style={{ width: `${usagePercent}%` }}
-                                        />
-                                        <span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">
-                                          <span class="whitespace-nowrap px-0.5">
-                                            {formatPercent(usagePercent)} (
-                                            {formatBytes(storage.used || 0, 0)}/
-                                            {formatBytes(storage.total || 0, 0)})
-                                          </span>
-                                        </span>
-                                      </div>
-                                    </td>
-                                    <td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
-                                      {formatBytes(storage.free || 0, 0)}
-                                    </td>
-                                    <td class="p-0.5 px-1.5 text-xs whitespace-nowrap">
-                                      {formatBytes(storage.total || 0, 0)}
-                                    </td>
-                                    <td class="p-0.5 px-1.5"></td>
-                                  </tr>
-                                  <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'
-                                      }`}
-                                    >
-                                      <td colSpan={9} class="px-4 py-3">
-                                        <div
-                                          class={`grid gap-3 md:grid-cols-2 xl:grid-cols-2 ${
-                                            drawerDisabled() ? 'opacity-60 pointer-events-none' : ''
-                                          }`}
+                                      <td class="p-0.5 px-1.5 hidden lg:table-cell">
+                                        <span
+                                          class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap truncate max-w-[220px]"
+                                          title={storage.content || '-'}
                                         >
-                                          <div class="rounded-lg border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-600/60 dark:bg-gray-900/30">
-                                            <div class="flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-200">
-                                              <span>Ceph Cluster</span>
-                                              <span>{cephCluster()?.name || storage.instance}</span>
-                                              <Show when={cephHealthLabel()}>
-                                                <span class={`px-1.5 py-0.5 rounded text-[10px] font-medium ${cephHealthClass()}`}>
-                                                  {cephHealthLabel()}
+                                          {storage.content || '-'}
+                                        </span>
+                                      </td>
+                                      <td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
+                                        <span
+                                          class={`${storage.status === 'available'
+                                              ? '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">
+                                          <span class="text-xs text-gray-600 dark:text-gray-400">
+                                            {storage.shared ? '✓' : '-'}
+                                          </span>
+                                        </td>
+                                      </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={`absolute top-0 left-0 h-full ${getProgressBarColor(usagePercent)}`}
+                                            style={{ width: `${usagePercent}%` }}
+                                          />
+                                          <span class="absolute inset-0 flex items-center justify-center text-[10px] font-medium text-gray-800 dark:text-gray-100 leading-none">
+                                            <span class="whitespace-nowrap px-0.5">
+                                              {formatPercent(usagePercent)} (
+                                              {formatBytes(storage.used || 0, 0)}/
+                                              {formatBytes(storage.total || 0, 0)})
+                                            </span>
+                                          </span>
+                                        </div>
+                                      </td>
+                                      <td class="p-0.5 px-1.5 text-xs hidden sm:table-cell whitespace-nowrap">
+                                        {formatBytes(storage.free || 0, 0)}
+                                      </td>
+                                      <td class="p-0.5 px-1.5 text-xs whitespace-nowrap">
+                                        {formatBytes(storage.total || 0, 0)}
+                                      </td>
+                                      <td class="p-0.5 px-1.5"></td>
+                                    </tr>
+                                    <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'
+                                          }`}
+                                      >
+                                        <td colSpan={9} class="px-4 py-3">
+                                          <div
+                                            class={`grid gap-3 md:grid-cols-2 xl:grid-cols-2 ${drawerDisabled() ? 'opacity-60 pointer-events-none' : ''
+                                              }`}
+                                          >
+                                            <div class="rounded-lg border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-600/60 dark:bg-gray-900/30">
+                                              <div class="flex items-center gap-2 text-xs font-semibold text-gray-700 dark:text-gray-200">
+                                                <span>Ceph Cluster</span>
+                                                <span>{cephCluster()?.name || storage.instance}</span>
+                                                <Show when={cephHealthLabel()}>
+                                                  <span class={`px-1.5 py-0.5 rounded text-[10px] font-medium ${cephHealthClass()}`}>
+                                                    {cephHealthLabel()}
+                                                  </span>
+                                                </Show>
+                                              </div>
+                                              <Show when={cephSummaryText()}>
+                                                <div class="mt-2 text-[12px] text-gray-600 dark:text-gray-300">
+                                                  {cephSummaryText()}
+                                                </div>
+                                              </Show>
+                                              <Show when={cephHealthMessage()}>
+                                                <div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
+                                                  {cephHealthMessage()}
+                                                </div>
+                                              </Show>
+                                            </div>
+                                            <div class="rounded-lg border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-600/60 dark:bg-gray-900/30 text-gray-600 dark:text-gray-300">
+                                              <div class="text-xs font-semibold text-gray-700 dark:text-gray-200">
+                                                Pools
+                                              </div>
+                                              <Show
+                                                when={cephPoolsText()}
+                                                fallback={
+                                                  <div class="mt-2 text-[12px] text-gray-500 dark:text-gray-400">
+                                                    No pool data available
+                                                  </div>
+                                                }
+                                              >
+                                                <div class="mt-2 text-[12px]">{cephPoolsText()}</div>
+                                              </Show>
+                                            </div>
+                                          </div>
+                                        </td>
+                                      </tr>
+                                    </Show>
+                                    <Show
+                                      when={
+                                        storage.zfsPool &&
+                                        (storage.zfsPool.state !== 'ONLINE' ||
+                                          storage.zfsPool.readErrors > 0 ||
+                                          storage.zfsPool.writeErrors > 0 ||
+                                          storage.zfsPool.checksumErrors > 0)
+                                      }
+                                    >
+                                      <tr class="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500">
+                                        <td colspan="9" class="p-2">
+                                          <div class="text-xs space-y-1">
+                                            <div class="flex items-center gap-2">
+                                              <span class="font-semibold text-yellow-700 dark:text-yellow-400">
+                                                ZFS Pool Status:
+                                              </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'
+                                                  }`}
+                                              >
+                                                {storage.zfsPool!.state}
+                                              </span>
+                                              <Show
+                                                when={
+                                                  storage.zfsPool!.readErrors > 0 ||
+                                                  storage.zfsPool!.writeErrors > 0 ||
+                                                  storage.zfsPool!.checksumErrors > 0
+                                                }
+                                              >
+                                                <span class="text-red-600 dark:text-red-400">
+                                                  Errors: {storage.zfsPool!.readErrors} read,{' '}
+                                                  {storage.zfsPool!.writeErrors} write,{' '}
+                                                  {storage.zfsPool!.checksumErrors} checksum
                                                 </span>
                                               </Show>
                                             </div>
-                                            <Show when={cephSummaryText()}>
-                                              <div class="mt-2 text-[12px] text-gray-600 dark:text-gray-300">
-                                                {cephSummaryText()}
-                                              </div>
-                                            </Show>
-                                            <Show when={cephHealthMessage()}>
-                                              <div class="mt-2 text-[11px] text-gray-500 dark:text-gray-400">
-                                                {cephHealthMessage()}
-                                              </div>
-                                            </Show>
-                                          </div>
-                                          <div class="rounded-lg border border-gray-200 bg-white/80 p-4 shadow-sm dark:border-gray-600/60 dark:bg-gray-900/30 text-gray-600 dark:text-gray-300">
-                                            <div class="text-xs font-semibold text-gray-700 dark:text-gray-200">
-                                              Pools
-                                            </div>
                                             <Show
-                                              when={cephPoolsText()}
-                                              fallback={
-                                                <div class="mt-2 text-[12px] text-gray-500 dark:text-gray-400">
-                                                  No pool data available
-                                                </div>
-                                              }
+                                              when={storage.zfsPool!.devices.some(
+                                                (d) =>
+                                                  d.state !== 'ONLINE' ||
+                                                  d.readErrors > 0 ||
+                                                  d.writeErrors > 0 ||
+                                                  d.checksumErrors > 0,
+                                              )}
                                             >
-                                              <div class="mt-2 text-[12px]">{cephPoolsText()}</div>
-                                            </Show>
-                                          </div>
-                                        </div>
-                                      </td>
-                                    </tr>
-                                  </Show>
-                                  <Show
-                                    when={
-                                      storage.zfsPool &&
-                                      (storage.zfsPool.state !== 'ONLINE' ||
-                                        storage.zfsPool.readErrors > 0 ||
-                                        storage.zfsPool.writeErrors > 0 ||
-                                        storage.zfsPool.checksumErrors > 0)
-                                    }
-                                  >
-                                    <tr class="bg-yellow-50 dark:bg-yellow-950/20 border-l-4 border-yellow-500">
-                                      <td colspan="9" class="p-2">
-                                        <div class="text-xs space-y-1">
-                                          <div class="flex items-center gap-2">
-                                            <span class="font-semibold text-yellow-700 dark:text-yellow-400">
-                                              ZFS Pool Status:
-                                            </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'
-                                              }`}
-                                            >
-                                              {storage.zfsPool!.state}
-                                            </span>
-                                            <Show
-                                              when={
-                                                storage.zfsPool!.readErrors > 0 ||
-                                                storage.zfsPool!.writeErrors > 0 ||
-                                                storage.zfsPool!.checksumErrors > 0
-                                              }
-                                            >
-                                              <span class="text-red-600 dark:text-red-400">
-                                                Errors: {storage.zfsPool!.readErrors} read,{' '}
-                                                {storage.zfsPool!.writeErrors} write,{' '}
-                                                {storage.zfsPool!.checksumErrors} checksum
-                                              </span>
-                                            </Show>
-                                          </div>
-                                          <Show
-                                            when={storage.zfsPool!.devices.some(
-                                              (d) =>
-                                                d.state !== 'ONLINE' ||
-                                                d.readErrors > 0 ||
-                                                d.writeErrors > 0 ||
-                                                d.checksumErrors > 0,
-                                            )}
-                                          >
-                                            <div class="ml-4 space-y-0.5">
-                                              <For
-                                                each={storage.zfsPool!.devices.filter(
-                                                  (d) =>
-                                                    d.state !== 'ONLINE' ||
-                                                    d.readErrors > 0 ||
-                                                    d.writeErrors > 0 ||
-                                                    d.checksumErrors > 0,
-                                                )}
-                                              >
-                                                {(device) => (
-                                                  <div class="flex items-center gap-2 text-xs">
-                                                    <span class="text-gray-600 dark:text-gray-400">
-                                                      Device {device.name}:
-                                                    </span>
-                                                    <span
-                                                      class={`${device.state !== 'ONLINE' ? 'text-red-600 dark:text-red-400' : 'text-yellow-600 dark:text-yellow-400'}`}
-                                                    >
-                                                      {device.state}
-                                                      <Show
-                                                        when={
-                                                          device.readErrors > 0 ||
-                                                          device.writeErrors > 0 ||
-                                                          device.checksumErrors > 0
-                                                        }
+                                              <div class="ml-4 space-y-0.5">
+                                                <For
+                                                  each={storage.zfsPool!.devices.filter(
+                                                    (d) =>
+                                                      d.state !== 'ONLINE' ||
+                                                      d.readErrors > 0 ||
+                                                      d.writeErrors > 0 ||
+                                                      d.checksumErrors > 0,
+                                                  )}
+                                                >
+                                                  {(device) => (
+                                                    <div class="flex items-center gap-2 text-xs">
+                                                      <span class="text-gray-600 dark:text-gray-400">
+                                                        Device {device.name}:
+                                                      </span>
+                                                      <span
+                                                        class={`${device.state !== 'ONLINE' ? 'text-red-600 dark:text-red-400' : 'text-yellow-600 dark:text-yellow-400'}`}
                                                       >
-                                                        <span class="ml-1">
-                                                          ({device.readErrors}R/{device.writeErrors}
-                                                          W/{device.checksumErrors}C errors)
-                                                        </span>
-                                                      </Show>
-                                                      <Show when={device.message?.trim()}>
-                                                        {(message) => (
-                                                          <span class="ml-1 text-gray-500 dark:text-gray-400">
-                                                            {message()}
+                                                        {device.state}
+                                                        <Show
+                                                          when={
+                                                            device.readErrors > 0 ||
+                                                            device.writeErrors > 0 ||
+                                                            device.checksumErrors > 0
+                                                          }
+                                                        >
+                                                          <span class="ml-1">
+                                                            ({device.readErrors}R/{device.writeErrors}
+                                                            W/{device.checksumErrors}C errors)
                                                           </span>
-                                                        )}
-                                                      </Show>
-                                                    </span>
-                                                  </div>
-                                                )}
-                                              </For>
-                                            </div>
-                                          </Show>
-                                        </div>
-                                      </td>
-                                    </tr>
-                                  </Show>
-                                </>
-                              );
-                            }}
-                          </For>
-                        </>
-                      );
+                                                        </Show>
+                                                        <Show when={device.message?.trim()}>
+                                                          {(message) => (
+                                                            <span class="ml-1 text-gray-500 dark:text-gray-400">
+                                                              {message()}
+                                                            </span>
+                                                          )}
+                                                        </Show>
+                                                      </span>
+                                                    </div>
+                                                  )}
+                                                </For>
+                                              </div>
+                                            </Show>
+                                          </div>
+                                        </td>
+                                      </tr>
+                                    </Show>
+                                  </>
+                                );
+                              }}
+                            </For>
+                          </>
+                        );
                       }}
                     </For>
                   </tbody>
diff --git a/frontend-modern/src/components/Storage/StorageFilter.tsx b/frontend-modern/src/components/Storage/StorageFilter.tsx
index 0de54a8..df5cab7 100644
--- a/frontend-modern/src/components/Storage/StorageFilter.tsx
+++ b/frontend-modern/src/components/Storage/StorageFilter.tsx
@@ -15,6 +15,8 @@ interface StorageFilterProps {
   setSortDirection: (value: 'asc' | 'desc') => void;
   sortOptions?: { value: string; label: string }[];
   searchInputRef?: (el: HTMLInputElement) => void;
+  statusFilter?: () => 'all' | 'available' | 'offline';
+  setStatusFilter?: (value: 'all' | 'available' | 'offline') => void;
 }
 
 export const StorageFilter: Component<StorageFilterProps> = (props) => {
@@ -299,22 +301,20 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
               <button
                 type="button"
                 onClick={() => props.setGroupBy!('node')}
-                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                  props.groupBy!() === 'node'
-                    ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-                }`}
+                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy!() === 'node'
+                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                  }`}
               >
                 By Node
               </button>
               <button
                 type="button"
                 onClick={() => props.setGroupBy!(props.groupBy!() === 'storage' ? 'node' : 'storage')}
-                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${
-                  props.groupBy!() === 'storage'
-                    ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
-                    : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
-                }`}
+                class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.groupBy!() === 'storage'
+                  ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                  }`}
               >
                 By Storage
               </button>
@@ -322,6 +322,41 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
             <div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
           </Show>
 
+          {/* Status Filter */}
+          <div class="inline-flex rounded-lg bg-gray-100 dark:bg-gray-700 p-0.5">
+            <button
+              type="button"
+              onClick={() => props.setStatusFilter && props.setStatusFilter('all')}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'all'
+                ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
+            >
+              All
+            </button>
+            <button
+              type="button"
+              onClick={() => props.setStatusFilter && props.setStatusFilter('available')}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'available'
+                ? 'bg-white dark:bg-gray-800 text-green-600 dark:text-green-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
+            >
+              Available
+            </button>
+            <button
+              type="button"
+              onClick={() => props.setStatusFilter && props.setStatusFilter('offline')}
+              class={`px-2.5 py-1 text-xs font-medium rounded-md transition-all ${props.statusFilter && props.statusFilter() === 'offline'
+                ? 'bg-white dark:bg-gray-800 text-red-600 dark:text-red-400 shadow-sm'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                }`}
+            >
+              Offline
+            </button>
+          </div>
+          <div class="h-5 w-px bg-gray-200 dark:bg-gray-600 hidden sm:block"></div>
+
           {/* Sort controls */}
           <div class="flex items-center gap-2">
             <span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
@@ -368,16 +403,17 @@ export const StorageFilter: Component<StorageFilterProps> = (props) => {
               props.setSortKey('name');
               props.setSortDirection('asc');
               if (props.setGroupBy) props.setGroupBy('node');
+              if (props.setStatusFilter) props.setStatusFilter('all');
             }}
             title="Reset all filters"
-            class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${
-              props.search().trim() !== '' ||
-              props.sortKey() !== 'name' ||
-              props.sortDirection() !== 'asc' ||
-              (props.groupBy && props.groupBy!() !== 'node')
+            class={`flex items-center justify-center px-2.5 py-1 text-xs font-medium rounded-lg transition-colors ${props.search().trim() !== '' ||
+                props.sortKey() !== 'name' ||
+                props.sortDirection() !== 'asc' ||
+                (props.groupBy && props.groupBy!() !== 'node') ||
+                (props.statusFilter && props.statusFilter!() !== 'all')
                 ? 'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 hover:bg-blue-200 dark:hover:bg-blue-900/70'
                 : 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600'
-            }`}
+              }`}
           >
             <svg
               width="14"