diff --git a/web/locales/en/plugin__netobserv-plugin.json b/web/locales/en/plugin__netobserv-plugin.json
index ed63c2bd8..020765727 100644
--- a/web/locales/en/plugin__netobserv-plugin.json
+++ b/web/locales/en/plugin__netobserv-plugin.json
@@ -6,6 +6,7 @@
   "n/a": "n/a",
   "View alert details": "View alert details",
   "View health dashboard": "View health dashboard",
+  "View FlowCollector status": "View FlowCollector status",
   "Name": "Name",
   "Subnet label": "Subnet label",
   "IP": "IP",
@@ -202,9 +203,13 @@
   "Cancel": "Cancel",
   "Delete": "Delete",
   "Network Observability FlowCollector status": "Network Observability FlowCollector status",
+  "FlowCollector status": "FlowCollector status",
+  "Configuration error": "Configuration error",
+  "Configuration warnings": "Configuration warnings",
   "Network Observability is on hold": "Network Observability is on hold",
   "Execution mode is set to OnHold. All operator-managed workloads have been deleted, while preserving other resources. To change execution mode, update or remove \"spec.execution.mode\" in the FlowCollector resource.": "Execution mode is set to OnHold. All operator-managed workloads have been deleted, while preserving other resources. To change execution mode, update or remove \"spec.execution.mode\" in the FlowCollector resource.",
   "Edit FlowCollector": "Edit FlowCollector",
+  "FlowCollector must be ready to open Network Traffic": "FlowCollector must be ready to open Network Traffic",
   "Open Network Traffic page": "Open Network Traffic page",
   "An error occured while retreiving FlowCollector: {{error}}": "An error occured while retreiving FlowCollector: {{error}}",
   "Create FlowCollector": "Create FlowCollector",
@@ -226,6 +231,10 @@
   "Metric": "Metric",
   "Data": "Data",
   "Review": "Review",
+  "eBPF agents": "eBPF agents",
+  "Flowlogs pipeline": "Flowlogs pipeline",
+  "Monitoring": "Monitoring",
+  "Console plugin": "Console plugin",
   "It will disable flow collection globally. All resources managed by the FlowCollector will be deleted, such as pods and services.": "It will disable flow collection globally. All resources managed by the FlowCollector will be deleted, such as pods and services.",
   "The following metric will stop being collected: ": "The following metric will stop being collected: ",
   "Delete {{kind}} {{name}}?": "Delete {{kind}} {{name}}?",
@@ -234,7 +243,16 @@
   "Create {{kind}}": "Create {{kind}}",
   "Update by completing the form. Current values are from the existing resource.": "Update by completing the form. Current values are from the existing resource.",
   "Create by completing the form. Default values are provided as example.": "Create by completing the form. Default values are provided as example.",
+  "Component statuses": "Component statuses",
+  "Component": "Component",
+  "State": "State",
+  "Replicas": "Replicas",
+  "Unused: {{list}}": "Unused: {{list}}",
   "{{kind}} resource doesn't exists yet.": "{{kind}} resource doesn't exists yet.",
+  "eBPF Agent": "eBPF Agent",
+  "Flowlogs Pipeline": "Flowlogs Pipeline",
+  "Console Plugin": "Console Plugin",
+  "Conditions": "Conditions",
   "Type": "Type",
   "Status": "Status",
   "Reason": "Reason",
@@ -343,7 +361,6 @@
   "Mode": "Mode",
   "alert": "alert",
   "recording": "recording",
-  "State": "State",
   "Severity": "Severity",
   "Active since": "Active since",
   "Labels": "Labels",
@@ -500,6 +517,12 @@
   "Results": "Results",
   "Query summary": "Query summary",
   "Find in view": "Find in view",
+  "FlowCollector is ready": "FlowCollector is ready",
+  "FlowCollector is degraded": "FlowCollector is degraded",
+  "FlowCollector is pending": "FlowCollector is pending",
+  "FlowCollector has errors": "FlowCollector has errors",
+  "FlowCollector is on hold": "FlowCollector is on hold",
+  "Loading FlowCollector status...": "Loading FlowCollector status...",
   "Show all graphs": "Show all graphs",
   "Focus on this graph": "Focus on this graph",
   "Show total": "Show total",
diff --git a/web/moduleMapper/dummy.tsx b/web/moduleMapper/dummy.tsx
index eac27bca3..3868e1cfd 100644
--- a/web/moduleMapper/dummy.tsx
+++ b/web/moduleMapper/dummy.tsx
@@ -196,76 +196,97 @@ export function useK8sWatchResource(req: any) {
                 {
                   "lastTransitionTime": "2025-04-08T09:01:44Z",
                   "message": "4 ready components, 0 with failure, 1 pending",
-                  "reason": "Pending",
-                  "status": "False",
+                  "reason": "Ready,Degraded",
+                  "status": "True",
                   "type": "Ready"
                 },
                 {
-                  "lastTransitionTime": "2025-04-08T09:01:44Z",
-                  "message": "Deployment netobserv-plugin not ready: 1/1 (Deployment does not have minimum availability.)",
-                  "reason": "DeploymentNotReady",
-                  "status": "True",
-                  "type": "WaitingFlowCollectorLegacy"
+                  "lastTransitionTime": "2025-04-08T09:01:43Z",
+                  "message": "",
+                  "reason": "Valid",
+                  "status": "False",
+                  "type": "ConfigurationIssue"
                 },
                 {
                   "lastTransitionTime": "2025-04-08T09:01:44Z",
                   "message": "",
                   "reason": "Ready",
-                  "status": "False",
-                  "type": "WaitingMonitoring"
+                  "status": "True",
+                  "type": "AgentReady"
                 },
                 {
-                  "lastTransitionTime": "2025-04-08T09:01:43Z",
+                  "lastTransitionTime": "2025-04-08T09:01:45Z",
                   "message": "",
                   "reason": "Ready",
-                  "status": "False",
-                  "type": "WaitingNetworkPolicy"
+                  "status": "True",
+                  "type": "ProcessorReady"
                 },
                 {
-                  "lastTransitionTime": "2025-04-08T09:01:43Z",
-                  "message": "",
-                  "reason": "Valid",
+                  "lastTransitionTime": "2025-04-08T09:01:44Z",
+                  // eslint-disable-next-line max-len
+                  "message": "Deployment netobserv-plugin not ready: 1/1 (Deployment does not have minimum availability.)",
+                  "reason": "DeploymentNotReady",
                   "status": "False",
-                  "type": "ConfigurationIssue"
+                  "type": "PluginReady"
                 },
                 {
-                  "lastTransitionTime": "2026-01-15T15:44:51Z",
-                  // eslint-disable-next-line max-len
-                  "message": "LokiStack has issues [name: loki, namespace: netobserv]: Warning: The schema configuration does not contain the most recent schema version and needs an update; Degraded: Missing object storage secret",
-                  "reason": "LokiStackIssues",
-                  "status": "False",
-                  "type": "LokiIssue"
+                  "lastTransitionTime": "2025-04-08T09:01:44Z",
+                  "message": "",
+                  "reason": "Ready",
+                  "status": "True",
+                  "type": "MonitoringReady"
                 },
                 {
                   "lastTransitionTime": "2026-01-15T16:05:26Z",
                   // eslint-disable-next-line max-len
-                  "message": "LokiStack has warnings [name: loki, namespace: netobserv]: Warning: The schema configuration does not contain the most recent schema version and needs an update",
+                  "message": "LokiStack has warnings [name: loki, namespace: netobserv]: Warning: schema needs update",
                   "reason": "LokiStackWarnings",
                   "status": "True",
                   "type": "LokiWarning"
+                }
+              ],
+              "components": {
+                "agent": {
+                  "state": "Ready",
+                  "desiredReplicas": 3,
+                  "readyReplicas": 3
                 },
-                {
-                  "lastTransitionTime": "2025-04-08T09:01:45Z",
-                  "message": "",
-                  "reason": "Ready",
-                  "status": "False",
-                  "type": "WaitingFLPParent"
+                "processor": {
+                  "state": "Ready",
+                  "desiredReplicas": 1,
+                  "readyReplicas": 1
                 },
-                {
-                  "lastTransitionTime": "2025-04-08T09:01:45Z",
-                  "message": "",
-                  "reason": "Ready",
-                  "status": "False",
-                  "type": "WaitingFLPMonolith"
-                },
-                {
-                  "lastTransitionTime": "2025-04-08T09:01:44Z",
-                  "message": "Transformer only used with Kafka",
-                  "reason": "ComponentUnused",
-                  "status": "Unknown",
-                  "type": "WaitingFLPTransformer"
+                "plugin": {
+                  "state": "InProgress",
+                  "reason": "DeploymentNotReady",
+                  // eslint-disable-next-line max-len
+                  "message": "Deployment netobserv-plugin not ready: 1/1",
+                  "desiredReplicas": 1,
+                  "readyReplicas": 0
                 }
-              ]
+              },
+              "integrations": {
+                "monitoring": {
+                  "state": "Ready"
+                },
+                "loki": {
+                  "state": "Unused"
+                },
+                "exporters": [
+                  {
+                    "name": "kafka-exporter",
+                    "type": "Kafka",
+                    "state": "Ready",
+                    "reason": "Configured"
+                  },
+                  {
+                    "name": "otel-exporter",
+                    "type": "OpenTelemetry",
+                    "state": "Ready",
+                    "reason": "Configured"
+                  }
+                ]
+              }
             }
             setResource(fc);
             break;
@@ -289,15 +310,19 @@ export function useK8sWatchResource(req: any) {
       // simulate an update
       setTimeout(() => {
         const fc = _.cloneDeep(resource);
-        // 70% chance to update, 30% chance to skip
-        if (Math.random() < 0.7 && fc.status && fc.status.conditions) {
-          const randomIndex = Math.floor(Math.random() * fc.status.conditions.length);
-          const condition = fc.status.conditions[randomIndex];
-          condition.status = condition.status === 'True' ? 'False' : 'True';
-          
-          // Enable/disable Loki based on LokiIssue status
-          if (condition.type === 'LokiIssue' || condition.type === 'LokiWarning') {
-            fc.spec!.loki.enable = condition.status === 'True';
+        if (Math.random() < 0.7 && fc.status) {
+          const states = ['Ready', 'InProgress', 'Degraded', 'Failure'];
+          const r = Math.random();
+          if (r < 0.5 && fc.status.components) {
+            const comps = ['agent', 'processor', 'plugin'];
+            const comp = comps[Math.floor(Math.random() * comps.length)];
+            if (fc.status.components[comp]) {
+              fc.status.components[comp].state = states[Math.floor(Math.random() * states.length)];
+            }
+          } else if (fc.status.integrations) {
+            if (fc.status.integrations.monitoring) {
+              fc.status.integrations.monitoring.state = states[Math.floor(Math.random() * states.length)];
+            }
           }
         }
         setResource(fc);
diff --git a/web/setup-tests.tsx b/web/setup-tests.tsx
index d050766a4..24d575aee 100644
--- a/web/setup-tests.tsx
+++ b/web/setup-tests.tsx
@@ -28,6 +28,7 @@ jest.mock('@openshift-console/dynamic-plugin-sdk', () => {
       return null;
     },
     useResolvedExtensions: jest.fn(),
+    useK8sWatchResource: jest.fn(() => [null, false, null]),
     useK8sModels: () => {
       return [{}, false];
     },
diff --git a/web/src/components/alerts/banner.tsx b/web/src/components/alerts/banner.tsx
index 0d3882f1e..ffc92a179 100644
--- a/web/src/components/alerts/banner.tsx
+++ b/web/src/components/alerts/banner.tsx
@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from '../../utils/url';
+import { flowCollectorStatusPath, useNavigate } from '../../utils/url';
 import './banner.css';
 
 export interface AlertBannerProps {
@@ -41,6 +41,9 @@ export const AlertBanner: React.FC<AlertBannerProps> = ({ rule, onDelete }) => {
           <React.Fragment>
             <AlertActionLink onClick={routeAlert}>{t('View alert details')}</AlertActionLink>
             <AlertActionLink onClick={routeDashboard}>{t('View health dashboard')}</AlertActionLink>
+            <AlertActionLink onClick={() => navigate(flowCollectorStatusPath)}>
+              {t('View FlowCollector status')}
+            </AlertActionLink>
           </React.Fragment>
         }
       >
diff --git a/web/src/components/forms/flowCollector-status.tsx b/web/src/components/forms/flowCollector-status.tsx
index 15e8397b2..77b4048a6 100644
--- a/web/src/components/forms/flowCollector-status.tsx
+++ b/web/src/components/forms/flowCollector-status.tsx
@@ -1,12 +1,24 @@
 import React, { FC } from 'react';
 
-import { Alert, AlertVariant, Button, Flex, FlexItem, PageSection, Text, Title } from '@patternfly/react-core';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  Flex,
+  FlexItem,
+  PageSection,
+  TextContent,
+  Title,
+  Tooltip
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { flowCollectorEditPath, flowCollectorNewPath, netflowTrafficPath, useNavigate } from '../../utils/url';
+import { FlowCollectorStatusIcon } from '../status/flowcollector-status-icon';
 import './forms.css';
 import { Pipeline } from './pipeline';
 import { ResourceStatus } from './resource-status';
 import { Consumer, ResourceWatcher } from './resource-watcher';
+import { getFlowCollectorOverallStatus } from './utils';
 
 export type FlowCollectorStatusProps = {};
 
@@ -26,20 +38,48 @@ export const FlowCollectorStatus: FC<FlowCollectorStatusProps> = () => {
     >
       <Consumer>
         {ctx => {
-          // Check if operator is in hold mode
-          const isOnHold = ctx.data?.spec?.execution?.mode === 'OnHold';
+          const status = getFlowCollectorOverallStatus(ctx.data, ctx.loadError);
+          const showTrafficButton = status === 'ready' || status === 'degraded';
+          const configIssue = (
+            (ctx.data?.status?.conditions as Array<{
+              type: string;
+              status: string;
+              reason?: string;
+              message?: string;
+            }>) || []
+          ).find(c => c.type === 'ConfigurationIssue' && c.status === 'True');
 
           return (
             <PageSection id="pageSection">
               <div id="pageHeader">
-                <Title headingLevel="h1" size="2xl">
-                  {t('Network Observability FlowCollector status')}
-                </Title>
+                <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
+                  <FlexItem>
+                    <Title headingLevel="h1" size="2xl">
+                      {t('Network Observability FlowCollector status')}
+                    </Title>
+                  </FlexItem>
+                  <FlexItem>
+                    <Button variant="plain" aria-label={t('FlowCollector status')} style={{ cursor: 'default' }}>
+                      <FlowCollectorStatusIcon status={status} />
+                    </Button>
+                  </FlexItem>
+                </Flex>
               </div>
               {ctx.data && (
                 <Flex className="status-container" direction={{ default: 'column' }}>
+                  {configIssue && (
+                    <FlexItem>
+                      <Alert
+                        variant={configIssue.reason === 'Error' ? AlertVariant.danger : AlertVariant.warning}
+                        isInline
+                        title={configIssue.reason === 'Error' ? t('Configuration error') : t('Configuration warnings')}
+                      >
+                        {configIssue.message}
+                      </Alert>
+                    </FlexItem>
+                  )}
                   <FlexItem flex={{ default: 'flex_1' }}>
-                    {isOnHold ? (
+                    {status === 'onHold' ? (
                       <Alert variant={AlertVariant.info} isInline title={t('Network Observability is on hold')}>
                         {t(
                           // eslint-disable-next-line max-len
@@ -72,18 +112,22 @@ export const FlowCollectorStatus: FC<FlowCollectorStatusProps> = () => {
                           {t('Edit FlowCollector')}
                         </Button>
                       </FlexItem>
-                      {!isOnHold && (
-                        <FlexItem>
+                      <FlexItem>
+                        <Tooltip
+                          content={t('FlowCollector must be ready to open Network Traffic')}
+                          trigger={showTrafficButton ? 'manual' : 'mouseenter focus'}
+                        >
                           <Button
                             id="open-network-traffic"
                             data-test-id="open-network-traffic"
                             variant="link"
-                            onClick={() => navigate(netflowTrafficPath)}
+                            isAriaDisabled={!showTrafficButton}
+                            onClick={() => showTrafficButton && navigate(netflowTrafficPath)}
                           >
                             {t('Open Network Traffic page')}
                           </Button>
-                        </FlexItem>
-                      )}
+                        </Tooltip>
+                      </FlexItem>
                     </Flex>
                   </FlexItem>
                 </Flex>
@@ -91,9 +135,9 @@ export const FlowCollectorStatus: FC<FlowCollectorStatusProps> = () => {
               {ctx.loadError && (
                 <Flex direction={{ default: 'column' }}>
                   <FlexItem>
-                    <Text>
+                    <TextContent>
                       {t('An error occured while retreiving FlowCollector: {{error}}', { error: ctx.loadError })}
-                    </Text>
+                    </TextContent>
                   </FlexItem>
                   <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
                     <Button id="create-flow-collector" onClick={() => navigate(flowCollectorNewPath)}>
diff --git a/web/src/components/forms/pipeline.tsx b/web/src/components/forms/pipeline.tsx
index 910622448..94b838c4f 100644
--- a/web/src/components/forms/pipeline.tsx
+++ b/web/src/components/forms/pipeline.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { K8sResourceCondition, K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
+import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
 
 import {
   DEFAULT_EDGE_TYPE as edgeType,
@@ -33,30 +33,95 @@ import _ from 'lodash';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
+export interface ComponentStatus {
+  state?: string;
+  reason?: string;
+  message?: string;
+  desiredReplicas?: number;
+  readyReplicas?: number;
+  unhealthyPodCount?: number;
+  podIssues?: string;
+}
+
+export interface ExporterStatus {
+  name: string;
+  type: string;
+  state: string;
+  reason?: string;
+  message?: string;
+}
+
 export interface Step {
   id: string;
   type?: string;
   label: string;
   runAfterTasks?: string[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   data?: any;
 }
 export interface StepProps {
   element: Node;
 }
 
+const stateToRunStatus = (cs: ComponentStatus | undefined): RunStatus => {
+  if (!cs) {
+    return RunStatus.Pending;
+  }
+  switch (cs.state) {
+    case 'Ready':
+      return cs.unhealthyPodCount ? RunStatus.Cancelled : RunStatus.Succeeded;
+    case 'Degraded':
+      return RunStatus.Cancelled;
+    case 'InProgress':
+      return RunStatus.Pending;
+    case 'Failure':
+      return RunStatus.Failed;
+    case 'Unused':
+      return RunStatus.Skipped;
+    default:
+      return RunStatus.Pending;
+  }
+};
+
+const exporterStateToRunStatus = (state: string): RunStatus => {
+  switch (state) {
+    case 'Ready':
+      return RunStatus.Succeeded;
+    case 'Failure':
+      return RunStatus.Failed;
+    case 'Degraded':
+      return RunStatus.Cancelled;
+    case 'InProgress':
+      return RunStatus.Pending;
+    default:
+      return RunStatus.Skipped;
+  }
+};
+
+const replicaLabel = (cs: ComponentStatus | undefined, baseLabel: string): string => {
+  if (cs?.desiredReplicas != null && cs?.readyReplicas != null) {
+    return `${baseLabel} (${cs.readyReplicas}/${cs.desiredReplicas})`;
+  }
+  return baseLabel;
+};
+
+const EMPTY_EXPORTERS: ExporterStatus[] = [];
+
 export const StepNode: React.FunctionComponent<StepProps> = ({ element }) => {
-  const data = element.getData();
+  try {
+    const data = element.getData();
 
-  const whenDecorator = data?.whenStatus ? (
-    <WhenDecorator element={element} status={data.whenStatus} leftOffset={whenOffset} />
-  ) : null;
+    const whenDecorator = data?.whenStatus ? (
+      <WhenDecorator element={element} status={data.whenStatus} leftOffset={whenOffset} />
+    ) : null;
 
-  return (
-    <TaskNode element={element} selected={data?.selected} status={data?.status} onSelect={() => data?.onSelect?.()}>
-      {whenDecorator}
-    </TaskNode>
-  );
+    return (
+      <TaskNode element={element} selected={data?.selected} status={data?.status} onSelect={() => data?.onSelect?.()}>
+        {whenDecorator}
+      </TaskNode>
+    );
+  } catch {
+    return null;
+  }
 };
 
 const pipelineComponentFactory = (kind: ModelKind, type: string) => {
@@ -98,121 +163,80 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
   const fit = React.useCallback(() => {
     if (controller && controller.hasGraph()) {
       controller.getGraph().fit();
-      // Only reveal after fit completes
       requestAnimationFrame(() => {
         setIsLayouting(false);
       });
     }
   }, [controller]);
 
-  const getStatus = React.useCallback(
-    (types: string[], status: string) => {
-      let hasWarning = false;
-      let hasFailure = false;
-
-      for (let i = 0; i < types.length; i++) {
-        const type = types[i];
-        const condition: K8sResourceCondition | null = existing?.status?.conditions?.find(
-          (condition: K8sResourceCondition) => condition.type === type
-        );
-        if (condition?.status !== status && condition?.reason !== 'Unused') {
-          if (condition?.status === 'Unknown') {
-            return RunStatus.Skipped;
-          } else if (condition?.type.startsWith('Waiting') || condition?.reason === 'Pending') {
-            return RunStatus.Pending;
-          }
-          // Check if this is a warning type
-          if (type.toLowerCase().includes('warning')) {
-            hasWarning = true;
-          } else {
-            hasFailure = true;
-          }
-        }
-      }
-      // Failures take priority over warnings
-      if (hasFailure) {
-        return RunStatus.Failed;
-      }
-      if (hasWarning) {
-        // PatternFly topology doesn't have a dedicated Warning status,
-        // but we can use the same color scheme by using RunStatus.Cancelled
-        // which typically shows yellow/orange
-        return RunStatus.Cancelled;
-      }
-      return RunStatus.Succeeded;
-    },
-    [existing?.status?.conditions]
-  );
+  const agentStatus: ComponentStatus | undefined = existing?.status?.components?.agent;
+  const processorStatus: ComponentStatus | undefined = existing?.status?.components?.processor;
+  const pluginStatus: ComponentStatus | undefined = existing?.status?.components?.plugin;
+  const lokiStatus: ComponentStatus | undefined = existing?.status?.integrations?.loki;
+  const monitoringStatus: ComponentStatus | undefined = existing?.status?.integrations?.monitoring;
+  const exporterStatuses: ExporterStatus[] = existing?.status?.integrations?.exporters || EMPTY_EXPORTERS;
 
   const getSteps = React.useCallback(() => {
     const steps: Step[] = [];
 
-    const overallTypes = ['Ready'];
-
-    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'],
+        id: 'agent',
+        label: replicaLabel(agentStatus, t('eBPF agents')),
         data: {
-          status: getStatus(types, 'False'),
-          selected: _.some(selectedTypes, t => types.includes(t)),
-          onSelect: () => setSelectedTypes(types)
+          status: stateToRunStatus(agentStatus),
+          selected: selectedTypes.includes('agent'),
+          onSelect: () => setSelectedTypes(['agent'])
         }
       });
     }
 
-    const flpStatuses = ['WaitingFLPParent', 'WaitingFLPMonolith'];
     if (existing?.spec?.deploymentModel === 'Kafka') {
-      const types = ['WaitingFLPTransformer'];
+      const kafkaCondition = existing?.status?.conditions?.find((c: any) => c.type === 'KafkaReady');
+      let kafkaRunStatus = RunStatus.Pending;
+      if (kafkaCondition) {
+        kafkaRunStatus =
+          kafkaCondition.status === 'True'
+            ? RunStatus.Succeeded
+            : kafkaCondition.status === 'False'
+            ? RunStatus.Failed
+            : RunStatus.Pending;
+      }
       steps.push({
         id: 'kafka',
         label: 'Kafka',
-        runAfterTasks: ['ebpf'],
+        runAfterTasks: ['agent'],
         data: {
-          status: getStatus(types, 'False'),
-          selected: _.some(selectedTypes, t => types.includes(t)),
-          onSelect: () => setSelectedTypes(types)
+          status: kafkaRunStatus,
+          selected: selectedTypes.includes('kafka'),
+          onSelect: () => setSelectedTypes(['kafka'])
         }
       });
-      flpStatuses.push(...types);
     }
 
     if (existing?.spec) {
       steps.push({
-        id: 'flp',
-        label: 'Flowlogs pipeline',
-        runAfterTasks: [_.last(steps)!.id],
+        id: 'processor',
+        label: replicaLabel(processorStatus, t('Flowlogs pipeline')),
+        runAfterTasks: steps.length ? [_.last(steps)!.id] : [],
         data: {
-          status: getStatus(flpStatuses, 'False'),
-          selected: _.some(selectedTypes, t => flpStatuses.includes(t)),
-          onSelect: () => setSelectedTypes(flpStatuses)
+          status: stateToRunStatus(processorStatus),
+          selected: selectedTypes.includes('processor'),
+          onSelect: () => setSelectedTypes(['processor'])
         }
       });
     }
 
     const cpRunAfter: string[] = [];
     if (existing?.spec?.loki?.enable) {
-      const types = ['WaitingLokiStack', 'WaitingDemoLoki'];
       steps.push({
         id: 'loki',
         label: 'Loki',
-        runAfterTasks: ['flp'],
+        runAfterTasks: ['processor'],
         data: {
-          status: getStatus(types, 'False'),
-          selected: _.some(selectedTypes, t => types.includes(t)),
-          onSelect: () => setSelectedTypes(types)
+          status: stateToRunStatus(lokiStatus),
+          selected: selectedTypes.includes('loki'),
+          onSelect: () => setSelectedTypes(['loki'])
         }
       });
       cpRunAfter.push('loki');
@@ -220,39 +244,42 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
 
     if (existing?.spec?.prometheus?.querier?.enable) {
       steps.push({
-        id: 'prom',
-        label: 'Prometheus',
-        runAfterTasks: ['flp'],
+        id: 'monitoring',
+        label: t('Monitoring'),
+        runAfterTasks: ['processor'],
         data: {
-          onSelect: () => setSelectedTypes([])
+          status: stateToRunStatus(monitoringStatus),
+          selected: selectedTypes.includes('monitoring'),
+          onSelect: () => setSelectedTypes(['monitoring'])
         }
       });
-      cpRunAfter.push('prom');
+      cpRunAfter.push('monitoring');
     }
 
-    if (existing?.spec?.exporters?.length) {
-      existing.spec.exporters.forEach((exporter: any, i: number) => {
+    if (exporterStatuses.length) {
+      exporterStatuses.forEach((exp: ExporterStatus, i: number) => {
         steps.push({
           id: `exporter-${i}`,
-          label: exporter.type || t('Unknown'),
-          runAfterTasks: ['flp'],
+          label: exp.name || exp.type || t('Unknown'),
+          runAfterTasks: ['processor'],
           data: {
-            onSelect: () => setSelectedTypes([])
+            status: exporterStateToRunStatus(exp.state),
+            selected: selectedTypes.includes(`exporter-${i}`),
+            onSelect: () => setSelectedTypes([`exporter-${i}`])
           }
         });
       });
     }
 
-    if (existing?.spec?.consolePlugin?.enable && cpRunAfter.length) {
-      const types = ['WaitingWebConsole'];
+    if (existing?.spec?.consolePlugin?.enable) {
       steps.push({
         id: 'plugin',
-        label: 'Console plugin',
-        runAfterTasks: cpRunAfter,
+        label: replicaLabel(pluginStatus, t('Console plugin')),
+        runAfterTasks: cpRunAfter.length ? cpRunAfter : ['processor'],
         data: {
-          status: getStatus(types, 'False'),
-          selected: _.some(selectedTypes, t => types.includes(t)),
-          onSelect: () => setSelectedTypes(types)
+          status: stateToRunStatus(pluginStatus),
+          selected: selectedTypes.includes('plugin'),
+          onSelect: () => setSelectedTypes(['plugin'])
         }
       });
     }
@@ -267,7 +294,17 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
       ...s
     })) as PipelineNodeModel[];
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [existing?.spec, getStatus, selectedTypes, setSelectedTypes]);
+  }, [
+    existing?.spec,
+    agentStatus,
+    processorStatus,
+    pluginStatus,
+    lokiStatus,
+    monitoringStatus,
+    exporterStatuses,
+    selectedTypes,
+    setSelectedTypes
+  ]);
 
   React.useEffect(() => {
     if (!containerRef.current) return;
@@ -291,11 +328,8 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
       return;
     }
 
-    // Hide graph during layout to prevent visible repositioning
     setIsLayouting(true);
 
-    // Update the model - the layoutEndEvent listener will call fit() when layout completes
-    // This ensures layout and fit happen together without visible intermediate states
     controller.fromModel(
       {
         nodes,
@@ -310,7 +344,6 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
     );
   }, [controller, nodes, edges]);
 
-  //create controller on startup and register factories
   React.useEffect(() => {
     const c = new Visualization();
     c.registerComponentFactory(pipelineComponentFactory);
@@ -319,7 +352,6 @@ export const Pipeline: React.FC<FlowCollectorPipelineProps> = ({ existing, selec
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Register layout end event listener separately to avoid stale closure
   React.useEffect(() => {
     if (!controller) return;
 
diff --git a/web/src/components/forms/resource-status.tsx b/web/src/components/forms/resource-status.tsx
index 8ddd6bf61..877b14fb8 100644
--- a/web/src/components/forms/resource-status.tsx
+++ b/web/src/components/forms/resource-status.tsx
@@ -1,9 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { K8sResourceCondition, K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Text, TextVariants } from '@patternfly/react-core';
+import { Button, Label, Text, TextVariants, Title } from '@patternfly/react-core';
+import {
+  BanIcon,
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  HourglassHalfIcon,
+  UnknownIcon
+} from '@patternfly/react-icons';
 import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '../../utils/url';
+import { ComponentStatus, ExporterStatus } from './pipeline';
 
 export type ResourceStatusProps = {
   group: string;
@@ -14,6 +24,128 @@ export type ResourceStatusProps = {
   setSelectedTypes: (types: string[]) => void;
 };
 
+type LabelColor = 'green' | 'orange' | 'red' | 'blue' | 'grey';
+
+const stateColor = (state: string | undefined): LabelColor => {
+  switch (state) {
+    case 'Ready':
+      return 'green';
+    case 'Degraded':
+      return 'orange';
+    case 'Failure':
+      return 'red';
+    case 'InProgress':
+      return 'blue';
+    case 'Unused':
+      return 'grey';
+    default:
+      return 'grey';
+  }
+};
+
+const StateIcon: FC<{ state: string | undefined }> = ({ state }) => {
+  switch (state) {
+    case 'Ready':
+      return <CheckCircleIcon color="var(--pf-v5-global--success-color--100)" />;
+    case 'Degraded':
+      return <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />;
+    case 'Failure':
+      return <ExclamationCircleIcon color="var(--pf-v5-global--danger-color--100)" />;
+    case 'InProgress':
+      return <HourglassHalfIcon color="var(--pf-v5-global--info-color--100)" />;
+    case 'Unused':
+      return <BanIcon color="var(--pf-v5-global--disabled-color--100)" />;
+    default:
+      return <UnknownIcon color="var(--pf-v5-global--disabled-color--100)" />;
+  }
+};
+
+interface ComponentRowData {
+  id: string;
+  name: string;
+  status: ComponentStatus;
+}
+
+const ComponentStatusTable: FC<{
+  components: ComponentRowData[];
+  exporters: ExporterStatus[];
+  selectedTypes: string[];
+  setSelectedTypes: (types: string[]) => void;
+}> = ({ components, exporters, selectedTypes, setSelectedTypes }) => {
+  const { t } = useTranslation('plugin__netobserv-plugin');
+  const activeComponents = components.filter(c => c.status.state !== 'Unused');
+  const unusedComponents = components.filter(c => c.status.state === 'Unused');
+
+  if (!activeComponents.length && !exporters.length) {
+    return null;
+  }
+
+  return (
+    <div style={{ marginBottom: '1rem' }}>
+      <Title headingLevel="h3" size="md" style={{ marginBottom: '0.5rem' }}>
+        {t('Component statuses')}
+      </Title>
+      <Table variant="compact">
+        <Thead>
+          <Tr>
+            <Th>{t('Component')}</Th>
+            <Th>{t('State')}</Th>
+            <Th>{t('Replicas')}</Th>
+            <Th>{t('Details')}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {activeComponents.map(c => (
+            <Tr
+              key={c.id}
+              isRowSelected={selectedTypes.includes(c.id)}
+              isClickable
+              onRowClick={() => setSelectedTypes([c.id])}
+            >
+              <Td>
+                <StateIcon state={c.status.state} /> {c.name}
+              </Td>
+              <Td>
+                <Label color={stateColor(c.status.state)}>{c.status.state}</Label>
+              </Td>
+              <Td>
+                {c.status.desiredReplicas != null ? `${c.status.readyReplicas ?? 0}/${c.status.desiredReplicas}` : '-'}
+              </Td>
+              <Td>
+                {c.status.podIssues ? c.status.podIssues : c.status.message ? c.status.message : c.status.reason || '-'}
+              </Td>
+            </Tr>
+          ))}
+          {exporters.map((exp, i) => (
+            <Tr
+              key={`exporter-${i}`}
+              isRowSelected={selectedTypes.includes(`exporter-${i}`)}
+              isClickable
+              onRowClick={() => setSelectedTypes([`exporter-${i}`])}
+            >
+              <Td>
+                <StateIcon state={exp.state} /> {exp.name || exp.type}
+              </Td>
+              <Td>
+                <Label color={stateColor(exp.state)}>{exp.state}</Label>
+              </Td>
+              <Td>-</Td>
+              <Td>{exp.message || exp.reason || '-'}</Td>
+            </Tr>
+          ))}
+          {unusedComponents.length > 0 && (
+            <Tr>
+              <Td colSpan={4} style={{ color: 'var(--pf-v5-global--disabled-color--100)', fontStyle: 'italic' }}>
+                {t('Unused: {{list}}', { list: unusedComponents.map(c => c.name).join(', ') })}
+              </Td>
+            </Tr>
+          )}
+        </Tbody>
+      </Table>
+    </div>
+  );
+};
+
 export const ResourceStatus: FC<ResourceStatusProps> = ({
   group,
   version,
@@ -40,12 +172,28 @@ export const ResourceStatus: FC<ResourceStatusProps> = ({
     );
   }
 
+  const components: ComponentRowData[] = [];
+  if (existing.status?.components?.agent) {
+    components.push({ id: 'agent', name: t('eBPF Agent'), status: existing.status.components.agent });
+  }
+  if (existing.status?.components?.processor) {
+    components.push({ id: 'processor', name: t('Flowlogs Pipeline'), status: existing.status.components.processor });
+  }
+  if (existing.status?.components?.plugin) {
+    components.push({ id: 'plugin', name: t('Console Plugin'), status: existing.status.components.plugin });
+  }
+  if (existing.status?.integrations?.loki) {
+    components.push({ id: 'loki', name: 'Loki', status: existing.status.integrations.loki });
+  }
+  if (existing.status?.integrations?.monitoring) {
+    components.push({ id: 'monitoring', name: t('Monitoring'), status: existing.status.integrations.monitoring });
+  }
+  const exporters: ExporterStatus[] = existing.status?.integrations?.exporters || [];
+
   const sortConditions = [
-    // 1. Global Ready
     (c: K8sResourceCondition) => c.type === 'Ready',
-    // 2. Used components / conditions
-    (c: K8sResourceCondition) => c.reason !== 'ComponentUnused'
-    // 3. Others (unused components)
+    (c: K8sResourceCondition) => c.type === 'ConfigurationIssue',
+    (c: K8sResourceCondition) => c.type === 'KafkaReady'
   ];
   const conditions = ((existing?.status?.conditions || []) as K8sResourceCondition[]).sort((a, b) => {
     for (const pred of sortConditions) {
@@ -59,36 +207,82 @@ export const ResourceStatus: FC<ResourceStatusProps> = ({
     }
     return 0;
   });
+
   return (
-    <Table id="resource-status-table" data-test={conditions.find(c => c.type === 'Ready')?.message} variant={'compact'}>
-      <Thead>
-        <Tr>
-          <Th>{t('Type')}</Th>
-          <Th>{t('Status')}</Th>
-          <Th>{t('Reason')}</Th>
-          <Th>{t('Message')}</Th>
-          <Th>{t('Changed')}</Th>
-        </Tr>
-      </Thead>
-      <Tbody>
-        {conditions.map((condition, i) => (
-          <Tr
-            id={`${condition.type}-row`}
-            data-test-status={`${condition.status}`}
-            data-test-reason={`${condition.reason}`}
-            key={i}
-            isRowSelected={selectedTypes.includes(condition.type)}
-            onClick={() => setSelectedTypes([condition.type])}
-          >
-            <Td>{condition.type}</Td>
-            <Td>{condition.status}</Td>
-            <Td>{condition.reason}</Td>
-            <Td>{condition.message}</Td>
-            <Td>{condition.lastTransitionTime}</Td>
+    <>
+      <ComponentStatusTable
+        components={components}
+        exporters={exporters}
+        selectedTypes={selectedTypes}
+        setSelectedTypes={setSelectedTypes}
+      />
+
+      <Title headingLevel="h3" size="md" style={{ marginBottom: '0.5rem' }}>
+        {t('Conditions')}
+      </Title>
+      <Table id="resource-status-table" data-test={conditions.find(c => c.type === 'Ready')?.message} variant="compact">
+        <Thead>
+          <Tr>
+            <Th>{t('Type')}</Th>
+            <Th>{t('Status')}</Th>
+            <Th>{t('Reason')}</Th>
+            <Th>{t('Message')}</Th>
+            <Th>{t('Changed')}</Th>
           </Tr>
-        ))}
-      </Tbody>
-    </Table>
+        </Thead>
+        <Tbody>
+          {conditions.map((condition, i) => {
+            const isWarning =
+              condition.type === 'ConfigurationIssue' && condition.status === 'True' && condition.reason === 'Warnings';
+            const isError =
+              (condition.type === 'ConfigurationIssue' &&
+                condition.status === 'True' &&
+                condition.reason === 'Error') ||
+              (condition.type !== 'ConfigurationIssue' &&
+                condition.status === 'False' &&
+                condition.reason !== 'Pending' &&
+                condition.reason !== 'Valid');
+            return (
+              <Tr
+                id={`${condition.type}-row`}
+                data-test-status={`${condition.status}`}
+                data-test-reason={`${condition.reason}`}
+                key={i}
+              >
+                <Td>
+                  {isError ? (
+                    <ExclamationCircleIcon color="var(--pf-v5-global--danger-color--100)" />
+                  ) : isWarning ? (
+                    <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />
+                  ) : condition.status === 'True' && condition.type !== 'ConfigurationIssue' ? (
+                    <CheckCircleIcon color="var(--pf-v5-global--success-color--100)" />
+                  ) : condition.status === 'False' && condition.reason === 'Pending' ? (
+                    <HourglassHalfIcon color="var(--pf-v5-global--info-color--100)" />
+                  ) : (
+                    <UnknownIcon color="var(--pf-v5-global--disabled-color--100)" />
+                  )}{' '}
+                  {condition.type}
+                </Td>
+                <Td>{condition.status}</Td>
+                <Td>{condition.reason}</Td>
+                <Td
+                  style={
+                    isWarning
+                      ? { color: 'var(--pf-v5-global--warning-color--200)' }
+                      : isError
+                      ? { color: 'var(--pf-v5-global--danger-color--100)' }
+                      : undefined
+                  }
+                >
+                  {condition.message}
+                </Td>
+                <Td>{condition.lastTransitionTime}</Td>
+              </Tr>
+            );
+          })}
+        </Tbody>
+      </Table>
+    </>
   );
 };
 
diff --git a/web/src/components/forms/utils.ts b/web/src/components/forms/utils.ts
index 910a84139..aeeb8cdf2 100644
--- a/web/src/components/forms/utils.ts
+++ b/web/src/components/forms/utils.ts
@@ -1,9 +1,41 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
+import { K8sResourceCondition, K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
 import { UiSchema } from '@rjsf/utils';
 import _ from 'lodash';
 import { ClusterServiceVersionKind } from './types';
 
+export type FlowCollectorOverallStatus = 'ready' | 'degraded' | 'pending' | 'error' | 'onHold' | 'loading';
+
+export const getFlowCollectorOverallStatus = (
+  cr: K8sResourceKind | undefined,
+  loadError: unknown
+): FlowCollectorOverallStatus => {
+  if (loadError) {
+    return 'error';
+  }
+  if (!cr) {
+    return 'loading';
+  }
+  if (cr.spec?.execution?.mode === 'OnHold') {
+    return 'onHold';
+  }
+  const conditions = cr.status?.conditions as K8sResourceCondition[] | undefined;
+  if (!conditions) {
+    return 'pending';
+  }
+  const readyCondition = conditions.find(c => c.type === 'Ready');
+  if (readyCondition?.status === 'True') {
+    if (readyCondition.reason === 'Ready,Degraded') {
+      return 'degraded';
+    }
+    return 'ready';
+  }
+  if (readyCondition?.status === 'False') {
+    return readyCondition.reason === 'Pending' ? 'pending' : 'error';
+  }
+  return 'pending';
+};
+
 export const appendRecursive = (obj: any, key: string, value?: string) => {
   if (!obj) {
     return obj;
diff --git a/web/src/components/health/network-health.tsx b/web/src/components/health/network-health.tsx
index 487b4503d..6bcd69efe 100644
--- a/web/src/components/health/network-health.tsx
+++ b/web/src/components/health/network-health.tsx
@@ -23,6 +23,7 @@ import { localStorageHealthRefreshKey, useLocalStorage } from '../../utils/local
 import { usePoll } from '../../utils/poll-hook';
 import { useTheme } from '../../utils/theme-hook';
 import { RefreshDropdown } from '../dropdowns/refresh-dropdown';
+import FlowCollectorStatusIndicator from '../status/flowcollector-status-indicator';
 import { HealthDrawerContainer } from './health-drawer-container';
 import HealthError from './health-error';
 import { fetchNetworkHealth } from './health-fetcher';
@@ -182,7 +183,14 @@ export const NetworkHealth: React.FC<{}> = ({}) => {
                   <FlexItem flex={{ default: 'flex_1' }}>
                     <Flex direction={{ default: 'column' }}>
                       <FlexItem>
-                        <Title headingLevel={TextVariants.h1}>{t('Network Health')}</Title>
+                        <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
+                          <FlexItem>
+                            <Title headingLevel={TextVariants.h1}>{t('Network Health')}</Title>
+                          </FlexItem>
+                          <FlexItem>
+                            <FlowCollectorStatusIndicator />
+                          </FlexItem>
+                        </Flex>
                       </FlexItem>
                       <FlexItem>
                         <HealthSummary rules={rules} stats={health} forceCollapsed={isScoringDrawerOpen} />
diff --git a/web/src/components/netflow-traffic.tsx b/web/src/components/netflow-traffic.tsx
index 658dfbe2e..cc0119c6a 100644
--- a/web/src/components/netflow-traffic.tsx
+++ b/web/src/components/netflow-traffic.tsx
@@ -78,6 +78,7 @@ import GuidedTourPopover, { GuidedTourHandle } from './guided-tour/guided-tour';
 import Modals from './modals/modals';
 import './netflow-traffic.css';
 import { SearchEvent, SearchHandle } from './search/search';
+import FlowCollectorStatusIndicator from './status/flowcollector-status-indicator';
 import TabsContainer from './tabs/tabs-container';
 import { FiltersToolbar } from './toolbar/filters-toolbar';
 import ChipsPopover from './toolbar/filters/chips-popover';
@@ -454,7 +455,14 @@ export const NetflowTraffic: React.FC<NetflowTrafficProps> = ({
       <div id="pageHeader">
         <Flex direction={{ default: 'row' }}>
           <FlexItem flex={{ default: 'flex_1' }}>
-            <Title headingLevel={TextVariants.h1}>{t('Network Traffic')}</Title>
+            <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
+              <FlexItem>
+                <Title headingLevel={TextVariants.h1}>{t('Network Traffic')}</Title>
+              </FlexItem>
+              <FlexItem>
+                <FlowCollectorStatusIndicator />
+              </FlexItem>
+            </Flex>
           </FlexItem>
           <FlexItem>{actions()}</FlexItem>
         </Flex>
diff --git a/web/src/components/status/__tests__/flowcollector-status.spec.tsx b/web/src/components/status/__tests__/flowcollector-status.spec.tsx
new file mode 100644
index 000000000..d0067e2cf
--- /dev/null
+++ b/web/src/components/status/__tests__/flowcollector-status.spec.tsx
@@ -0,0 +1,156 @@
+import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import { render } from '@testing-library/react';
+import * as React from 'react';
+import { getFlowCollectorOverallStatus } from '../../forms/utils';
+import { FlowCollectorStatusIcon } from '../flowcollector-status-icon';
+import { FlowCollectorStatusIndicator } from '../flowcollector-status-indicator';
+
+describe('getFlowCollectorOverallStatus', () => {
+  it('should return loading when CR is undefined', () => {
+    expect(getFlowCollectorOverallStatus(undefined, null)).toBe('loading');
+  });
+
+  it('should return error on load error', () => {
+    expect(getFlowCollectorOverallStatus(undefined, 'some error')).toBe('error');
+  });
+
+  it('should return onHold when execution mode is OnHold', () => {
+    const cr = { spec: { execution: { mode: 'OnHold' } } };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('onHold');
+  });
+
+  it('should return pending when no conditions', () => {
+    const cr = { spec: {} };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('pending');
+  });
+
+  it('should return ready when Ready condition is True', () => {
+    const cr = {
+      status: { conditions: [{ type: 'Ready', status: 'True', reason: 'Ready' }] }
+    };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('ready');
+  });
+
+  it('should return degraded when Ready is True with reason Ready,Degraded', () => {
+    const cr = {
+      status: {
+        conditions: [{ type: 'Ready', status: 'True', reason: 'Ready,Degraded' }]
+      }
+    };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('degraded');
+  });
+
+  it('should return pending when Ready condition is missing', () => {
+    const cr = {
+      status: { conditions: [{ type: 'AgentReady', status: 'True', reason: 'Ready' }] }
+    };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('pending');
+  });
+
+  it('should return pending when Ready is False with reason Pending', () => {
+    const cr = {
+      status: {
+        conditions: [
+          { type: 'Ready', status: 'False', reason: 'Pending' },
+          { type: 'PluginReady', status: 'False', reason: 'DeploymentNotReady' }
+        ]
+      }
+    };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('pending');
+  });
+
+  it('should return error when Ready is False with non-Pending reason', () => {
+    const cr = {
+      status: {
+        conditions: [
+          { type: 'Ready', status: 'False', reason: 'Failed' },
+          { type: 'PluginReady', status: 'False', reason: 'CrashLoopBackOff' }
+        ]
+      }
+    };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('error');
+  });
+
+  it('should return ready when Ready is True regardless of other conditions', () => {
+    const cr = {
+      status: {
+        conditions: [
+          { type: 'Ready', status: 'True', reason: 'Ready' },
+          { type: 'ConfigurationIssue', status: 'True', reason: 'Warnings' },
+          { type: 'LokiWarning', status: 'True', reason: 'LokiStackWarnings' }
+        ]
+      }
+    };
+    expect(getFlowCollectorOverallStatus(cr, null)).toBe('ready');
+  });
+});
+
+describe('<FlowCollectorStatusIcon />', () => {
+  it('should render spinner for loading', () => {
+    const { container } = render(<FlowCollectorStatusIcon status="loading" />);
+    expect(container.querySelector('[role="progressbar"]')).toBeTruthy();
+  });
+
+  it('should render icon for ready', () => {
+    const { container } = render(<FlowCollectorStatusIcon status="ready" />);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+
+  it('should render icon for degraded', () => {
+    const { container } = render(<FlowCollectorStatusIcon status="degraded" />);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+
+  it('should render icon for pending', () => {
+    const { container } = render(<FlowCollectorStatusIcon status="pending" />);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+
+  it('should render icon for error', () => {
+    const { container } = render(<FlowCollectorStatusIcon status="error" />);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+
+  it('should render icon for onHold', () => {
+    const { container } = render(<FlowCollectorStatusIcon status="onHold" />);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+});
+
+const useK8sWatchResourceMock = useK8sWatchResource as jest.Mock;
+
+describe('<FlowCollectorStatusIndicator />', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render a clickable button', () => {
+    useK8sWatchResourceMock.mockReturnValue([null, false, null]);
+    const { container } = render(<FlowCollectorStatusIndicator />);
+    const button = container.querySelector('#flowcollector-status-indicator');
+    expect(button).toBeTruthy();
+  });
+
+  it('should render spinner when CR is loading', () => {
+    useK8sWatchResourceMock.mockReturnValue([null, false, null]);
+    const { container } = render(<FlowCollectorStatusIndicator />);
+    expect(container.querySelector('[role="progressbar"]')).toBeTruthy();
+  });
+
+  it('should render icon when CR is ready', () => {
+    useK8sWatchResourceMock.mockReturnValue([
+      { status: { conditions: [{ type: 'Ready', status: 'True', reason: 'Ready' }] } },
+      true,
+      null
+    ]);
+    const { container } = render(<FlowCollectorStatusIndicator />);
+    expect(container.querySelector('svg')).toBeTruthy();
+    expect(container.querySelector('[role="progressbar"]')).toBeFalsy();
+  });
+
+  it('should render icon on load error', () => {
+    useK8sWatchResourceMock.mockReturnValue([null, false, 'load error']);
+    const { container } = render(<FlowCollectorStatusIndicator />);
+    expect(container.querySelector('svg')).toBeTruthy();
+  });
+});
diff --git a/web/src/components/status/flowcollector-status-icon.tsx b/web/src/components/status/flowcollector-status-icon.tsx
new file mode 100644
index 000000000..d337cc679
--- /dev/null
+++ b/web/src/components/status/flowcollector-status-icon.tsx
@@ -0,0 +1,60 @@
+import { Spinner, Tooltip } from '@patternfly/react-core';
+import {
+  ConnectedIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  PauseCircleIcon
+} from '@patternfly/react-icons';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlowCollectorOverallStatus } from '../forms/utils';
+
+export interface FlowCollectorStatusIconProps {
+  status: FlowCollectorOverallStatus;
+}
+
+export const FlowCollectorStatusIcon: React.FC<FlowCollectorStatusIconProps> = ({ status }) => {
+  const { t } = useTranslation('plugin__netobserv-plugin');
+
+  const tooltipContent = React.useMemo(() => {
+    switch (status) {
+      case 'ready':
+        return t('FlowCollector is ready');
+      case 'degraded':
+        return t('FlowCollector is degraded');
+      case 'pending':
+        return t('FlowCollector is pending');
+      case 'error':
+        return t('FlowCollector has errors');
+      case 'onHold':
+        return t('FlowCollector is on hold');
+      case 'loading':
+        return t('Loading FlowCollector status...');
+    }
+  }, [status, t]);
+
+  const icon = React.useMemo(() => {
+    switch (status) {
+      case 'ready':
+        return <ConnectedIcon color="var(--pf-v5-global--success-color--100)" />;
+      case 'degraded':
+        return <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />;
+      case 'pending':
+        return <ExclamationTriangleIcon color="var(--pf-v5-global--warning-color--100)" />;
+      case 'error':
+        return <ExclamationCircleIcon color="var(--pf-v5-global--danger-color--100)" />;
+      case 'onHold':
+        return <PauseCircleIcon color="var(--pf-v5-global--info-color--100)" />;
+      case 'loading':
+        return <Spinner size="md" />;
+    }
+  }, [status]);
+
+  return (
+    <Tooltip content={tooltipContent} position="bottom">
+      <span style={{ display: 'inline-flex', verticalAlign: 'middle' }}>{icon}</span>
+    </Tooltip>
+  );
+};
+
+export default FlowCollectorStatusIcon;
diff --git a/web/src/components/status/flowcollector-status-indicator.tsx b/web/src/components/status/flowcollector-status-indicator.tsx
new file mode 100644
index 000000000..2cf7b8e17
--- /dev/null
+++ b/web/src/components/status/flowcollector-status-indicator.tsx
@@ -0,0 +1,37 @@
+import { K8sResourceKind, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import { Button } from '@patternfly/react-core';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { flowCollectorStatusPath, useNavigate } from '../../utils/url';
+import { getFlowCollectorOverallStatus } from '../forms/utils';
+import { FlowCollectorStatusIcon } from './flowcollector-status-icon';
+
+export const FlowCollectorStatusIndicator: React.FC = () => {
+  const { t } = useTranslation('plugin__netobserv-plugin');
+  const navigate = useNavigate();
+
+  const [fc, , loadError] = useK8sWatchResource<K8sResourceKind>({
+    groupVersionKind: {
+      group: 'flows.netobserv.io',
+      version: 'v1beta2',
+      kind: 'FlowCollector'
+    },
+    name: 'cluster',
+    isList: false
+  });
+
+  const status = getFlowCollectorOverallStatus(fc, loadError);
+
+  return (
+    <Button
+      id="flowcollector-status-indicator"
+      variant="plain"
+      aria-label={t('FlowCollector status')}
+      onClick={() => navigate(flowCollectorStatusPath)}
+    >
+      <FlowCollectorStatusIcon status={status} />
+    </Button>
+  );
+};
+
+export default FlowCollectorStatusIndicator;