diff --git a/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx b/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx
index 473784db8..4707a1182 100644
--- a/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx
+++ b/frontend-modern/src/components/Dashboard/DiskHealthSummary.tsx
@@ -64,25 +64,25 @@ export const DiskHealthSummary: Component<DiskHealthSummaryProps> = (props) => {
           {/* Health Status */}
           <div class="flex items-center justify-between text-xs">
             <span class="text-gray-600 dark:text-gray-400">Status</span>
-            <div class="flex gap-3">
+            <div class="flex gap-2">
               <Show when={diskStats().healthy > 0}>
-                <span class="text-green-600 dark:text-green-400">
-                  ✅ {diskStats().healthy}
+                <span class="px-1.5 py-0.5 text-xs rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">
+                  {diskStats().healthy} healthy
                 </span>
               </Show>
               <Show when={diskStats().failing > 0}>
-                <span class="text-red-600 dark:text-red-400">
-                  ❌ {diskStats().failing}
+                <span class="px-1.5 py-0.5 text-xs rounded bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400">
+                  {diskStats().failing} failed
                 </span>
               </Show>
               <Show when={diskStats().lowLife > 0}>
-                <span class="text-yellow-600 dark:text-yellow-400">
-                  ⚠️ {diskStats().lowLife} low
+                <span class="px-1.5 py-0.5 text-xs rounded bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400">
+                  {diskStats().lowLife} low
                 </span>
               </Show>
               <Show when={diskStats().unknown > 0}>
-                <span class="text-gray-500">
-                  ❓ {diskStats().unknown}
+                <span class="px-1.5 py-0.5 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-400">
+                  {diskStats().unknown} unknown
                 </span>
               </Show>
             </div>
diff --git a/frontend-modern/src/components/Storage/DiskList.tsx b/frontend-modern/src/components/Storage/DiskList.tsx
index 6fcf75eae..e15361a7d 100644
--- a/frontend-modern/src/components/Storage/DiskList.tsx
+++ b/frontend-modern/src/components/Storage/DiskList.tsx
@@ -36,18 +36,34 @@ export const DiskList: Component<DiskListProps> = (props) => {
     });
   });
   
-  // Get health status color and icon
+  // Get health status color and badge
   const getHealthStatus = (disk: PhysicalDisk) => {
     if (disk.health === 'PASSED') {
       // Check wearout for SSDs
       if (disk.wearout > 0 && disk.wearout < 10) {
-        return { color: 'text-yellow-500', icon: '⚠️', text: 'Low Life' };
+        return { 
+          color: 'text-yellow-700 dark:text-yellow-400', 
+          bgColor: 'bg-yellow-100 dark:bg-yellow-900/30',
+          text: 'LOW LIFE' 
+        };
       }
-      return { color: 'text-green-500', icon: '✅', text: 'Healthy' };
+      return { 
+        color: 'text-green-700 dark:text-green-400', 
+        bgColor: 'bg-green-100 dark:bg-green-900/30',
+        text: 'HEALTHY' 
+      };
     } else if (disk.health === 'FAILED') {
-      return { color: 'text-red-500', icon: '❌', text: 'Failed' };
+      return { 
+        color: 'text-red-700 dark:text-red-400', 
+        bgColor: 'bg-red-100 dark:bg-red-900/30',
+        text: 'FAILED' 
+      };
     }
-    return { color: 'text-gray-500', icon: '❓', text: 'Unknown' };
+    return { 
+      color: 'text-gray-700 dark:text-gray-400', 
+      bgColor: 'bg-gray-100 dark:bg-gray-700',
+      text: 'UNKNOWN' 
+    };
   };
   
   // Get disk type badge color
@@ -84,10 +100,10 @@ export const DiskList: Component<DiskListProps> = (props) => {
                 <div class="flex-1">
                   {/* Header with model and health */}
                   <div class="flex items-center gap-3 mb-2">
-                    <span class={`text-lg ${health.color}`} title={health.text}>
-                      {health.icon}
+                    <span class={`px-2 py-0.5 text-xs font-medium rounded ${health.bgColor} ${health.color}`}>
+                      {health.text}
                     </span>
-                    <h3 class="text-lg font-semibold text-gray-900">
+                    <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
                       {disk.model || 'Unknown Model'}
                     </h3>
                     <span class={`px-2 py-1 text-xs font-medium rounded-full ${getDiskTypeBadge(disk.type)}`}>