diff --git a/src/app/apis/connector/connector.service.ts b/src/app/apis/connector/connector.service.ts
index a8bc6393..286eb053 100644
--- a/src/app/apis/connector/connector.service.ts
+++ b/src/app/apis/connector/connector.service.ts
@@ -215,6 +215,18 @@ export class ConnectorService extends BaseService {
     );
     return this.httpGet<any>(endpoint);
   }
+
+  public getConnectorMetrics(baseHref: string, connectorType: string, connectorName: string): Promise<any> {
+    this.logger?.info(
+      "[ConnectorService] Getting the Connector metrics:" + connectorName ,
+    );
+    const endpoint: string = this.endpoint(
+      "debezium/:connectorType/connectors/:connectorName/metrics",
+      baseHref,
+      { connectorType, connectorName },
+    );
+    return this.httpGet<any>(endpoint);
+  }
   
 
   /**
@@ -385,19 +397,19 @@ export class ConnectorService extends BaseService {
   /**
    * Get the available connector metrics for the supplied clusterId and connector name
    */
-  public getConnectorMetrics(
-    clusterId: number,
-    connectorName: string
-  ): Promise<any[]> {
-    this.logger?.info("[ConnectorService] Getting the connector metrics.");
+  // public getConnectorMetrics(
+  //   clusterId: number,
+  //   connectorName: string
+  // ): Promise<any[]> {
+  //   this.logger?.info("[ConnectorService] Getting the connector metrics.");
 
-    const endpoint: string = this.endpoint(
-      "/connectors/:clusterId/:connectorName/metrics",
-      "",
-      { clusterId, connectorName }
-    );
-    return this.httpGet<any[]>(endpoint);
-  }
+  //   const endpoint: string = this.endpoint(
+  //     "/connectors/:clusterId/:connectorName/metrics",
+  //     "",
+  //     { clusterId, connectorName }
+  //   );
+  //   return this.httpGet<any[]>(endpoint);
+  // }
 
   /**
    * Get the Connector config
diff --git a/src/app/components/ConnectorStatusComponent.css b/src/app/components/ConnectorStatusComponent.css
new file mode 100644
index 00000000..2dc1d714
--- /dev/null
+++ b/src/app/components/ConnectorStatusComponent.css
@@ -0,0 +1,4 @@
+.connector-status_task-status-text .pf-v5-c-helper-text__item{
+    /* text-align: center; */
+    display: grid !important;
+}
\ No newline at end of file
diff --git a/src/app/components/ConnectorStatusComponent.tsx b/src/app/components/ConnectorStatusComponent.tsx
index 243dc1b6..bd28858b 100644
--- a/src/app/components/ConnectorStatusComponent.tsx
+++ b/src/app/components/ConnectorStatusComponent.tsx
@@ -1,4 +1,5 @@
-import { Label } from "@patternfly/react-core";
+import { getTaskStatus } from "@app/utils";
+import { HelperText, HelperTextItem, Label } from "@patternfly/react-core";
 import {
   CheckCircleIcon,
   ExclamationCircleIcon,
@@ -6,40 +7,64 @@ import {
   PauseCircleIcon,
 } from "@patternfly/react-icons";
 import React from "react";
+import './ConnectorStatusComponent.css'
 
 interface ConnectorStatusComponentProps {
   status: string;
+  task?: boolean;
 }
 
+type variantType =
+  | "success"
+  | "warning"
+  | "error"
+  | "default"
+  | "indeterminate"
+  | undefined;
+
 export const ConnectorStatusComponent: React.FC<
   ConnectorStatusComponentProps
-> = ({ status }) => {
+> = ({ status, task }) => {
   let labelColor = undefined;
+  let variant = undefined as variantType;
   let icon: React.ReactNode;
 
   switch (status) {
     case "RUNNING":
       labelColor = "green";
+      variant = "success";
       icon = <CheckCircleIcon />;
       break;
     case "STOPPED":
       labelColor = "orange";
+      variant = "warning";
       icon = <ExclamationTriangleIcon />;
       break;
     case "PAUSED":
+      variant = "warning";
       labelColor = "blue";
       icon = <PauseCircleIcon />;
       break;
     case "FAILED":
     case "DESTROYED":
       labelColor = "red";
+      variant = "error";
       icon = <ExclamationCircleIcon />;
       break;
     default:
       labelColor = "blue";
+      variant = "success";
       break;
   }
 
+  if (task)
+    return (
+      <HelperText className="connector-status_task-status-text">
+        <HelperTextItem variant={variant} hasIcon>
+          {status}
+        </HelperTextItem>
+      </HelperText>
+    );
   return (
     <Label
       color={
diff --git a/src/app/hooks/index.ts b/src/app/hooks/index.ts
index 8fbb339e..de0e3007 100644
--- a/src/app/hooks/index.ts
+++ b/src/app/hooks/index.ts
@@ -1,3 +1,4 @@
 export * from './usePostWithReturnApi';
 export * from './useFetchApi';
-export * from './usePostWithReturnApi';
\ No newline at end of file
+export * from './usePostWithReturnApi';
+export * from './useFetchApiMultiVariableApi';
\ No newline at end of file
diff --git a/src/app/hooks/useFetchApiMultiVariableApi.tsx b/src/app/hooks/useFetchApiMultiVariableApi.tsx
new file mode 100644
index 00000000..e21428b0
--- /dev/null
+++ b/src/app/hooks/useFetchApiMultiVariableApi.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { FetchApiResult } from "./useFetchApi";
+
+function useFetchApiMultiVariableApi<T>(
+  url: string | null,
+  api: any,
+  serviceRef: any,
+  multiVariable: any,
+  pollingInterval?: number
+): FetchApiResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let ignore = false;
+
+    const fetchData = async () => {
+      try {
+        const apiCall = api.bind(serviceRef);
+        const response = await apiCall(url, ...multiVariable);
+        setData(response);
+        setIsLoading(false);
+      } catch (error) {
+        setIsLoading(false);
+        setError(error as Error);
+
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    if (url) {
+      fetchData();
+    }
+
+    if (pollingInterval) {
+      const intervalId = setInterval(() => {
+          if (!ignore) {
+              fetchData();
+          }
+      }, pollingInterval);
+
+      return () => {
+          clearInterval(intervalId);
+          ignore = true;
+      };
+  }
+
+  return () => {
+      ignore = true;
+  };
+
+  }, [api, serviceRef, url, pollingInterval]);
+
+  return { data, isLoading, error };
+}
+
+export default useFetchApiMultiVariableApi;
diff --git a/src/app/pages/connectorDetails/ConnectorDetails.css b/src/app/pages/connectorDetails/ConnectorDetails.css
deleted file mode 100644
index a34cc07f..00000000
--- a/src/app/pages/connectorDetails/ConnectorDetails.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.connector-details_task-status-text .pf-v5-c-helper-text__item{
-    /* text-align: center; */
-    display: grid !important;
-}
\ No newline at end of file
diff --git a/src/app/pages/connectorDetails/ConnectorDetails.tsx b/src/app/pages/connectorDetails/ConnectorDetails.tsx
index 0d1c013e..96164673 100644
--- a/src/app/pages/connectorDetails/ConnectorDetails.tsx
+++ b/src/app/pages/connectorDetails/ConnectorDetails.tsx
@@ -1,7 +1,7 @@
 import { AppLayoutContext } from "@app/AppLayout";
 import { Services } from "@app/apis/services";
 import {
-    Button,
+  Button,
   Card,
   CardBody,
   CardTitle,
@@ -19,6 +19,7 @@ import {
   GridItem,
   HelperText,
   HelperTextItem,
+  Icon,
   MenuToggle,
   MenuToggleElement,
   PageSection,
@@ -43,8 +44,18 @@ import {
   DeleteConnectorModel,
 } from "@app/components";
 import { POLLING_INTERVAL } from "@app/constants";
-import { TimesCircleIcon } from "@patternfly/react-icons";
-import "./ConnectorDetails.css";
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  PencilAltIcon,
+  TimesCircleIcon,
+} from "@patternfly/react-icons";
+import useFetchApiMultiVariableApi from "@app/hooks/useFetchApiMultiVariableApi";
+import {
+  convertMilliSecToTime,
+  getConnectorType,
+  getTaskStatus,
+} from "@app/utils";
 
 interface ConnectorDetailsProps {
   // Add any props you need for the component
@@ -117,6 +128,21 @@ export const ConnectorDetails: React.FC<ConnectorDetailsProps> = (props) => {
     error: connectorStatusError,
   } = getConnectorStatus;
 
+  const getConnectorMetricsFetch =
+    useFetchApiMultiVariableApi<ConnectorMetrics>(
+      clusterUrl,
+      connectorService.getConnectorMetrics,
+      connectorService,
+      ["mysql", connectorName],
+      POLLING_INTERVAL.FiveSeconds
+    );
+
+  const {
+    data: connectorMetrics,
+    isLoading: connectorMetricsLoading,
+    error: connectorMetricsError,
+  } = getConnectorMetricsFetch;
+
   const onConnectorPause = () => {
     connectorService
       .pauseConnector(clusterUrl, connectorName!)
@@ -286,9 +312,21 @@ export const ConnectorDetails: React.FC<ConnectorDetailsProps> = (props) => {
               <GridItem span={6}>
                 <Card>
                   <CardTitle>
-                    <Title headingLevel="h4" size="xl">
-                      Connector configuration
-                    </Title>
+                    <Split hasGutter>
+                      <SplitItem>
+                        <Title headingLevel="h4" size="xl">
+                          Connector configuration
+                        </Title>
+                      </SplitItem>
+                      <SplitItem isFilled></SplitItem>
+                      <SplitItem>
+                        <Tooltip
+                          content={<div>Edit connector configuration</div>}
+                        >
+                          <Button variant="link" icon={<PencilAltIcon />} />
+                        </Tooltip>
+                      </SplitItem>
+                    </Split>
                   </CardTitle>
                   <CardBody>
                     <DescriptionList
@@ -336,19 +374,12 @@ export const ConnectorDetails: React.FC<ConnectorDetailsProps> = (props) => {
                           >{`Id: ${task.id}`}</CardTitle>
                           <CardBody>
                             <Stack>
-                              <Tooltip
-                                content={
-                                  <div>
-                                    {task.trace}
-                                  </div>
-                                }
-                              >
+                              <Tooltip content={<div>{task.trace}</div>}>
                                 <Button variant="plain">
-                                <HelperText className="connector-details_task-status-text">
-                                  <HelperTextItem variant="error" hasIcon>
-                                    {task.state}
-                                  </HelperTextItem>
-                                </HelperText>
+                                  <ConnectorStatusComponent
+                                    status={task.state}
+                                    task={true}
+                                  />
                                 </Button>
                               </Tooltip>
 
@@ -361,14 +392,94 @@ export const ConnectorDetails: React.FC<ConnectorDetailsProps> = (props) => {
                   </CardBody>
                 </Card>
               </GridItem>
-              <GridItem span={3} rowSpan={2}>
+              <GridItem span={4}>
                 <Card>
                   <CardTitle>
                     <Title headingLevel="h4" size="xl">
                       Essential connector metrics
                     </Title>
                   </CardTitle>
-                  <CardBody>Coming soon</CardBody>
+                  <CardBody>
+                    <DescriptionList isHorizontal isCompact isFluid>
+                      <DescriptionListGroup>
+                        <DescriptionListTerm>
+                          Streaming in progress:
+                        </DescriptionListTerm>
+                        <DescriptionListDescription>
+                          {connectorMetrics?.connector.metrics.Connected ? (
+                            <Icon status="success">
+                              <CheckCircleIcon />
+                            </Icon>
+                          ) : (
+                            <Icon status="danger">
+                              <ExclamationCircleIcon />
+                            </Icon>
+                          )}
+                        </DescriptionListDescription>
+                      </DescriptionListGroup>
+                    </DescriptionList>
+                    {connectorMetrics?.tasks &&
+                      connectorMetrics?.tasks.map((task) => {
+                        return (
+                          <>
+                            <div
+                              style={{
+                                marginBottom: "5px",
+                                marginTop: "15px",
+                                fontWeight: "bold",
+                              }}
+                            >
+                              Task Id: {task.id}
+                            </div>
+
+                            {task.namespaces &&
+                              task.namespaces.map((namespace) => {
+                                return (
+                                  <>
+                                    {namespace.name && (
+                                      <div
+                                        style={{
+                                          fontWeight: "bold",
+                                        }}
+                                      >
+                                        Namespace: {namespace.name}
+                                      </div>
+                                    )}
+                                    <DescriptionList
+                                      displaySize={"lg"}
+                                      columnModifier={{ lg: "2Col" }}
+                                      style={{ marginBottom: "10px" }}
+                                    >
+                                      <Card component="div">
+                                        <DescriptionListTerm>
+                                          Time since last event:
+                                        </DescriptionListTerm>
+                                        <DescriptionListDescription>
+                                          {convertMilliSecToTime(
+                                            +namespace.metrics
+                                              .MilliSecondsSinceLastEvent
+                                          )}
+                                        </DescriptionListDescription>
+                                      </Card>
+                                      <Card component="div">
+                                        <DescriptionListTerm>
+                                          Total number of events:
+                                        </DescriptionListTerm>
+                                        <DescriptionListDescription>
+                                          {
+                                            namespace.metrics
+                                              .TotalNumberOfEventsSeen
+                                          }
+                                        </DescriptionListDescription>
+                                      </Card>
+                                    </DescriptionList>
+                                  </>
+                                );
+                              })}
+                          </>
+                        );
+                      })}
+                  </CardBody>
                 </Card>
               </GridItem>
             </Grid>
diff --git a/src/app/utils/connector.d.ts b/src/app/utils/connector.d.ts
index b6446658..6d5476ce 100644
--- a/src/app/utils/connector.d.ts
+++ b/src/app/utils/connector.d.ts
@@ -96,6 +96,31 @@ enum ConnectorType {
   "sink",
 }
 
+interface ConnectorMetrics {
+  name: string;
+  "tasks.max": string;
+  connector: ConnectorMetricsConnection;
+  tasks?: (TasksEntity)[] | null;
+}
+interface ConnectorMetricsConnection {
+  metrics: MetricsConnectorConnected;
+}
+interface MetricsConnectorConnected {
+  Connected: string;
+}
+interface TasksEntity {
+  id: number;
+  namespaces?: (TaskNamespaceMetrics)[] | null;
+}
+interface TaskNamespaceMetrics {
+  metrics: TaskMetrics;
+  name?: string | null;
+}
+interface TaskMetrics {
+  MilliSecondsSinceLastEvent: string;
+  TotalNumberOfEventsSeen: string;
+}
+
 interface ConnectorNameStatus {
   name: string;
   connector: Connector;
diff --git a/src/app/utils/utilityFunctions.ts b/src/app/utils/utilityFunctions.ts
index 10f26d35..fd7f606c 100644
--- a/src/app/utils/utilityFunctions.ts
+++ b/src/app/utils/utilityFunctions.ts
@@ -21,6 +21,23 @@ export const getConnectorClass = (connectorType: string | undefined) => {
   }
 };
 
+export const getConnectorType = (connectorType: string | undefined) => {
+  switch (connectorType) {
+    case "io.debezium.connector.mysql.MySqlConnector":
+      return "mysql";
+    case "io.debezium.connector.postgresql.PostgresConnector":
+      return "postgres";
+    case "io.debezium.connector.mongodb.MongoDbConnector":
+      return "mongodb";
+    case "io.debezium.connector.sqlserver.SqlServerConnector":
+      return "sqlserver";
+    case "io.debezium.connector.oracle.OracleConnector":
+      return "oracle";
+    default:
+      return "";
+  }
+};
+
 
 export function mapToObject(map:  Map<string, string>) {
   const obj = {} as Record<string, string>;
@@ -28,4 +45,54 @@ export function mapToObject(map:  Map<string, string>) {
     obj[key] = value;
   });
   return obj;
-}
\ No newline at end of file
+}
+
+export const convertMilliSecToTime = (millisec: number) => {
+  const seconds = (millisec / 1000).toFixed(1);
+  const minutes = (millisec / (1000 * 60)).toFixed(2);
+  const hours = (millisec / (1000 * 60 * 60)).toFixed(2);
+  const days = (millisec / (1000 * 60 * 60 * 24)).toFixed(1);
+  if (parseInt(seconds) < 60) {
+    return seconds + ' Sec';
+  } else if (parseInt(minutes) < 60) {
+    return minutes + ' Min';
+  } else if (parseInt(hours) < 24) {
+    return hours + ' Hrs';
+  } else {
+    return days + ' Days';
+  }
+};
+
+export type TaskStateColor =
+  | "blue"
+  | "cyan"
+  | "green"
+  | "orange"
+  | "purple"
+  | "red"
+  | "grey"
+  | "gold"
+  | undefined;
+
+export const getTaskStatus = (taskState: string): TaskStateColor => {
+  let labelColor: TaskStateColor;
+  switch (taskState) {
+    case "RUNNING":
+      labelColor = "green";
+      break;
+    case "STOPPED":
+      labelColor = "orange";
+      break;
+    case "PAUSED":
+      labelColor = "blue";
+      break;
+    case "FAILED":
+    case "DESTROYED":
+      labelColor = "red";
+      break;
+    default:
+      labelColor = "blue";
+      break;
+  }
+  return labelColor;
+};
\ No newline at end of file