diff --git a/web/src/components/forms/pipeline.tsx b/web/src/components/forms/pipeline.tsx
index 1ada2450f..bdb718048 100644
--- a/web/src/components/forms/pipeline.tsx
+++ b/web/src/components/forms/pipeline.tsx
@@ -149,15 +149,27 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
     const steps: Step[] = [];
 
     const overallTypes = ['Ready'];
-    const overallStatus = getStatus(overallTypes, 'True');
+
+    steps.push({
+      id: 'overall',
+      label: 'Overall',
+      data: {
+        status: getStatus(overallTypes, 'True'),
+        selected: _.some(selectedTypes, t => overallTypes.includes(t)),
+        onSelect: () => setSelectedTypes(overallTypes)
+      }
+    });
+
     if (existing?.spec?.agent?.type === 'eBPF') {
+      const types = ['WaitingEBPFAgents'];
       steps.push({
         id: 'ebpf',
         label: 'eBPF agents',
+        runAfterTasks: ['overall'],
         data: {
-          status: overallStatus,
-          selected: _.some(selectedTypes, t => overallTypes.includes(t)),
-          onSelect: () => setSelectedTypes(overallTypes)
+          status: getStatus(types, 'False'),
+          selected: _.some(selectedTypes, t => types.includes(t)),
+          onSelect: () => setSelectedTypes(types)
         }
       });
     }
@@ -193,7 +205,7 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
 
     const cpRunAfter: string[] = [];
     if (existing?.spec?.loki?.enable) {
-      const types = ['LokiIssue', 'LokiWarning'];
+      const types = ['WaitingLokiStack', 'WaitingDemoLoki'];
       steps.push({
         id: 'loki',
         label: 'Loki',
@@ -233,14 +245,15 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
     }
 
     if (existing?.spec?.consolePlugin?.enable && cpRunAfter.length) {
+      const types = ['WaitingWebConsole'];
       steps.push({
         id: 'plugin',
         label: 'Console plugin',
         runAfterTasks: cpRunAfter,
         data: {
-          status: overallStatus,
-          selected: _.some(selectedTypes, t => overallTypes.includes(t)),
-          onSelect: () => setSelectedTypes(overallTypes)
+          status: getStatus(types, 'False'),
+          selected: _.some(selectedTypes, t => types.includes(t)),
+          onSelect: () => setSelectedTypes(types)
         }
       });
     }
diff --git a/web/src/components/forms/resource-status.tsx b/web/src/components/forms/resource-status.tsx
index 2a7c43f91..148e32522 100644
--- a/web/src/components/forms/resource-status.tsx
+++ b/web/src/components/forms/resource-status.tsx
@@ -39,7 +39,25 @@ export const ResourceStatus: FC<ResourceStatusProps> = ({
     );
   }
 
-  const conditions = (existing?.status?.conditions || []) as K8sResourceCondition[];
+  const sortConditions = [
+    // 1. Global Ready
+    (c: K8sResourceCondition) => c.type === 'Ready',
+    // 2. Used components / conditions
+    (c: K8sResourceCondition) => c.reason !== 'ComponentUnused'
+    // 3. Others (unused components)
+  ];
+  const conditions = ((existing?.status?.conditions || []) as K8sResourceCondition[]).sort((a, b) => {
+    for (const pred of sortConditions) {
+      if (pred(a) && pred(b)) {
+        return 0;
+      } else if (pred(a)) {
+        return -1;
+      } else if (pred(b)) {
+        return 1;
+      }
+    }
+    return 0;
+  });
   return (
     <Table id="resource-status-table" data-test={conditions.find(c => c.type === 'Ready')?.message} variant={'compact'}>
       <Thead>