diff --git a/management/src/pages/System.jsx b/management/src/pages/System.jsx
index 9d7726b..5495ace 100644
--- a/management/src/pages/System.jsx
+++ b/management/src/pages/System.jsx
@@ -105,6 +105,7 @@ const System = () => {
         case 'cache': return '⚡';
         case 'proxy': return '🌐';
         case 'application': return '📱';
+        case 'app': return '📱';
         case 'logging': return '📋';
         case 'monitoring': return '📊';
         default: return '📦';
@@ -116,13 +117,33 @@ const System = () => {
         case 'database': return 'border-l-blue-500';
         case 'cache': return 'border-l-yellow-500';
         case 'proxy': return 'border-l-green-500';
-        case 'application': return 'border-l-purple-500';
+        case 'application': case 'app': return 'border-l-purple-500';
         case 'logging': return 'border-l-orange-500';
         case 'monitoring': return 'border-l-red-500';
         default: return 'border-l-gray-500';
       }
     };
     
+    const getStatusColor = (status) => {
+      switch (status) {
+        case 'healthy': case 'responding': return 'text-green-600';
+        case 'timeout': case 'warning': return 'text-yellow-600';
+        case 'unreachable': case 'error': case 'health_check_failed': return 'text-red-600';
+        case 'running': case 'Up': return 'text-green-600';
+        default: return 'text-gray-600';
+      }
+    };
+    
+    const getStatusIcon = (status) => {
+      switch (status) {
+        case 'healthy': case 'responding': return '✅';
+        case 'timeout': return '⏱️';
+        case 'unreachable': case 'error': return '❌';
+        case 'running': case 'Up': return '🟢';
+        default: return '⚪';
+      }
+    };
+    
     return (
       <div className={`bg-gray-50 rounded-lg p-4 border-l-4 ${getTypeColor(metrics.type)} border border-gray-200`}>
         <div className="flex items-center justify-between mb-3">
@@ -137,77 +158,71 @@ const System = () => {
           )}
         </div>
         
-        {metrics.error || metrics.status === 'health_check_failed' || metrics.status === 'unreachable' ? (
-          <div className="text-sm text-red-600">
-            <div className="font-medium">
-              {metrics.status === 'health_check_failed' ? 'Health Check Failed' :
-               metrics.status === 'unreachable' ? 'Unreachable' :
-               metrics.status === 'timeout' ? 'Timeout' : 'Not Available'}
-            </div>
-            <div className="text-xs mt-1">{metrics.error || metrics.message}</div>
+        <div className="space-y-2 text-sm">
+          <div className="flex justify-between items-center">
+            <span className="text-gray-500">Status</span>
+            <span className={`font-medium flex items-center ${getStatusColor(metrics.status)}`}>
+              <span className="mr-1">{getStatusIcon(metrics.status)}</span>
+              {metrics.status === 'health_check_failed' ? 'Failed' : 
+               metrics.status.charAt(0).toUpperCase() + metrics.status.slice(1)}
+            </span>
           </div>
-        ) : metrics.status === 'responding' ? (
-          <div className="space-y-2 text-sm">
-            <div className="flex justify-between">
-              <span className="text-gray-500">Status</span>
-              <span className="font-medium text-green-600">Responding</span>
+          
+          {metrics.error && (
+            <div className="bg-red-50 border border-red-200 rounded p-2">
+              <div className="text-xs font-medium text-red-800">Error Details:</div>
+              <div className="text-xs text-red-700 mt-1">{metrics.error}</div>
             </div>
-            <div className="text-xs text-gray-500">
-              Basic connectivity confirmed
+          )}
+          
+          {metrics.raw && metrics.status === 'healthy' && (
+            <div className="bg-green-50 border border-green-200 rounded p-2">
+              <div className="text-xs text-green-700">Response: {metrics.raw.trim()}</div>
             </div>
-          </div>
-        ) : metrics.source === 'docker_compose' || metrics.source === 'process_list' ? (
-          <div className="space-y-2 text-sm">
-            <div className="flex justify-between">
-              <span className="text-gray-500">Status</span>
-              <span className={`font-medium ${
-                metrics.status === 'running' ? 'text-green-600' : 
-                metrics.status === 'Up' ? 'text-green-600' : 'text-red-600'
-              }`}>
-                {metrics.status}
-              </span>
-            </div>
-            {metrics.health && (
+          )}
+          
+          {/* Show resource metrics if available */}
+          {metrics.cpu && (
+            <>
               <div className="flex justify-between">
-                <span className="text-gray-500">Health</span>
-                <span className="font-medium">{metrics.health}</span>
+                <span className="text-gray-500">CPU</span>
+                <span className="font-medium">{metrics.cpu}</span>
               </div>
-            )}
-            {metrics.ports && (
               <div className="flex justify-between">
-                <span className="text-gray-500">Ports</span>
-                <span className="font-medium text-xs">{metrics.ports}</span>
+                <span className="text-gray-500">Memory</span>
+                <span className="font-medium">{metrics.memory?.percentage || metrics.memory}</span>
               </div>
-            )}
-            <div className="text-xs text-blue-600 mt-2">
+              <div className="flex justify-between">
+                <span className="text-gray-500">Network I/O</span>
+                <span className="font-medium text-xs">{metrics.network}</span>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-gray-500">Disk I/O</span>
+                <span className="font-medium text-xs">{metrics.disk}</span>
+              </div>
+            </>
+          )}
+          
+          {metrics.health && metrics.health !== 'unknown' && (
+            <div className="flex justify-between">
+              <span className="text-gray-500">Health</span>
+              <span className="font-medium">{metrics.health}</span>
+            </div>
+          )}
+          
+          {metrics.ports && (
+            <div className="flex justify-between">
+              <span className="text-gray-500">Ports</span>
+              <span className="font-medium text-xs">{metrics.ports}</span>
+            </div>
+          )}
+          
+          {metrics.source && (
+            <div className="text-xs text-blue-600 mt-2 border-t pt-2">
               Source: {metrics.source.replace('_', ' ').toUpperCase()}
             </div>
-          </div>
-        ) : (
-          <div className="space-y-2 text-sm">
-            <div className="flex justify-between">
-              <span className="text-gray-500">CPU</span>
-              <span className="font-medium">{metrics.cpu}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">Memory</span>
-              <span className="font-medium">{metrics.memory?.percentage || metrics.memory}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">Network I/O</span>
-              <span className="font-medium text-xs">{metrics.network}</span>
-            </div>
-            <div className="flex justify-between">
-              <span className="text-gray-500">Disk I/O</span>
-              <span className="font-medium text-xs">{metrics.disk}</span>
-            </div>
-            {metrics.source && (
-              <div className="text-xs text-blue-600 mt-2">
-                Source: {metrics.source.replace('_', ' ').toUpperCase()}
-              </div>
-            )}
-          </div>
-        )}
+          )}
+        </div>
       </div>
     );
   };
@@ -326,6 +341,25 @@ const System = () => {
               <span className="text-sm text-gray-500">Uptime</span>
               <span className="text-sm font-medium">{systemInfo.platform.uptime}</span>
             </div>
+            {/* Container Health Summary */}
+            <div className="border-t pt-2 mt-3">
+              <div className="text-xs text-gray-500 mb-1">Service Health</div>
+              <div className="flex space-x-1">
+                {Object.entries(systemInfo.containers).map(([name, metrics]) => {
+                  const isHealthy = metrics.status === 'healthy' || metrics.status === 'responding';
+                  return (
+                    <div
+                      key={name}
+                      className={`w-3 h-3 rounded-full ${
+                        isHealthy ? 'bg-green-400' : 
+                        metrics.status === 'timeout' ? 'bg-yellow-400' : 'bg-red-400'
+                      }`}
+                      title={`${name}: ${metrics.status}`}
+                    />
+                  );
+                })}
+              </div>
+            </div>
           </div>
         </StatusCard>