diff --git a/frontend/packages/rhoas-plugin/src/topology/components/TopologyKafkaPanel.tsx b/frontend/packages/rhoas-plugin/src/topology/components/TopologyKafkaPanel.tsx
new file mode 100644
index 00000000000..9e5e5036d09
--- /dev/null
+++ b/frontend/packages/rhoas-plugin/src/topology/components/TopologyKafkaPanel.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import {
+  navFactory,
+  SimpleTabNav,
+  ResourceIcon
+} from '@console/internal/components/utils';
+import * as UIActions from '@console/internal/actions/ui';
+import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { Node } from '@patternfly/react-topology';
+import { ResourceSummary } from '@console/internal/components/utils';
+
+type PropsFromState = {
+  selectedDetailsTab?: any;
+};
+
+type PropsFromDispatch = {
+  onClickTab?: (name: string) => void;
+};
+
+const stateToProps = ({ UI }): PropsFromState => ({
+  selectedDetailsTab: UI.getIn(['overview', 'selectedDetailsTab']),
+});
+
+const dispatchToProps = (dispatch): PropsFromDispatch => ({
+  onClickTab: (name) => dispatch(UIActions.selectOverviewDetailsTab(name)),
+});
+
+type OwnProps = {
+  item: Node;
+};
+
+type TopologyHelmReleasePanelProps = PropsFromState & PropsFromDispatch & OwnProps;
+
+const DetailsComponent: React.FC<any> = ({ obj }) => {
+  return (<>
+    <div style={{ "padding": 20 }}>
+      <ResourceSummary resource={obj} />
+    </div>
+  </>)
+}
+
+export const ConnectedTopologyHelmReleasePanel: React.FC<TopologyHelmReleasePanelProps> = ({
+  item,
+  selectedDetailsTab,
+  onClickTab,
+}: TopologyHelmReleasePanelProps) => {
+  // Resource
+  const mkc = item?.getData().resource;
+  if (!mkc) {
+    return <>No data</>
+  }
+
+  return (
+    <div className="overview__sidebar-pane resource-overview">
+      <div className="overview__sidebar-pane-head resource-overview__heading">
+        <h1 className="co-m-pane__heading">
+          <div className="co-m-pane__name co-resource-item">
+            <ResourceIcon className="co-m-resource-icon--lg" kind="MKC" />
+            <h3>Managed Kafka Connection</h3>
+          </div>
+        </h1>
+      </div>
+
+      <Alert
+        variant="default"
+        title="ManagedService"
+        actionClose={<AlertActionCloseButton />}
+        isInline
+      >
+        This resource represents service that exist outside your cluster.
+        To view details about resource please go to <br/>
+        <a href="https://cloud.redhat.com/beta/application-services/openshift-streams/">OpenShift Streams Apache Kafka </a> console.
+
+      </Alert>
+
+      <SimpleTabNav
+        selectedTab={selectedDetailsTab}
+        onClickTab={onClickTab}
+        tabs={[
+          { name: "Details", component: navFactory.details(DetailsComponent).component },
+        ]}
+        tabProps={{ obj: mkc }}
+        additionalClassNames="co-m-horizontal-nav__menu--within-sidebar co-m-horizontal-nav__menu--within-overview-sidebar"
+      />
+    </div>
+  );
+};
+
+export default connect<PropsFromState, PropsFromDispatch, TopologyHelmReleasePanelProps>(
+  stateToProps,
+  dispatchToProps,
+)(ConnectedTopologyHelmReleasePanel);
diff --git a/frontend/packages/rhoas-plugin/src/topology/components/rhoasComponentFactory.ts b/frontend/packages/rhoas-plugin/src/topology/components/rhoasComponentFactory.ts
index fbc0dabaaf3..ceabb239e97 100644
--- a/frontend/packages/rhoas-plugin/src/topology/components/rhoasComponentFactory.ts
+++ b/frontend/packages/rhoas-plugin/src/topology/components/rhoasComponentFactory.ts
@@ -22,7 +22,6 @@ import {
 } from '@patternfly/react-topology';
 import { kebabOptionsToMenu } from '@console/internal/components/utils';
 import KafkaNode from './KafkaNode';
-import { ManagedKafkaConnectionModel } from "../../models";
 import { K8sResourceKind, modelFor, referenceFor } from '@console/internal/module/k8s';
 import { KebabOption } from '@console/internal/components/utils';
 import {
@@ -30,6 +29,7 @@ import {
 } from '@patternfly/react-topology';
 import { getResource } from '@console/topology/src/utils';
 import { ModifyApplication } from '@console/topology/src/actions';
+import { MANAGED_KAFKA_TOPOLOGY_TYPE } from '../rhoas-topology-plugin'
 
 export const rhoasActions = (
   contextMenuResource: K8sResourceKind
@@ -52,7 +52,7 @@ export const getRhoasComponentFactory = (): ComponentFactory => {
   return (kind, type): React.ComponentType<{ element: GraphElement }> | undefined => {
     switch (type) {
       // Using resource kind as model kind for simplicity
-      case ManagedKafkaConnectionModel.kind:
+      case MANAGED_KAFKA_TOPOLOGY_TYPE:
         return withCreateConnector(
           createConnectorCallback(),
           CreateConnector,
diff --git a/frontend/packages/rhoas-plugin/src/topology/rhoas-data-transformer.ts b/frontend/packages/rhoas-plugin/src/topology/rhoas-data-transformer.ts
index 7663f860fdf..d77392fc76c 100644
--- a/frontend/packages/rhoas-plugin/src/topology/rhoas-data-transformer.ts
+++ b/frontend/packages/rhoas-plugin/src/topology/rhoas-data-transformer.ts
@@ -1,45 +1,65 @@
 import { Model, NodeModel } from '@patternfly/react-topology';
-import { K8sResourceKind } from '@console/internal/module/k8s';
-import { OdcNodeModel, TopologyDataResources } from '@console/topology/src/topology-types';
-
+import { apiVersionForModel, K8sResourceKind } from '@console/internal/module/k8s';
+import {
+  TopologyDataObject,
+  TopologyDataResources
+} from '@console/topology/src/topology-types';
+​
 import { KAFKA_WIDTH, KAFKA_HEIGHT, KAFKA_PADDING } from "./components/const"
 import { ManagedKafkaConnectionModel } from '../models'
+import {
+  getTopologyNodeItem,
+} from '@console/topology/src/data-transforms/transform-utils';
+import { OverviewItem } from '@console/shared/src';
+​import {MANAGED_KAFKA_TOPOLOGY_TYPE} from "./rhoas-topology-plugin"
 
-export const getTopologyRhoasItem = (
-  objArray: K8sResourceKind[]
+const KAFKA_PROPS = {
+  width: KAFKA_WIDTH,
+  height: KAFKA_HEIGHT,
+  group: false,
+  visible: true,
+  style: {
+    padding: KAFKA_PADDING,
+  },
+};
+​
+export const createOverviewItem = (obj: K8sResourceKind): OverviewItem<K8sResourceKind> => {
+  if (!obj.apiVersion) {
+    obj.apiVersion = apiVersionForModel(ManagedKafkaConnectionModel);
+  }
+  if (!obj.kind) {
+    obj.kind = ManagedKafkaConnectionModel.kind;
+  }
+​
+  return {
+    obj,
+  }
+};
+​
+export const getTopologyRhoasNodes = (
+  kafkaConnections: K8sResourceKind[]
 ): NodeModel[] => {
-  const returnData = [];
-  for (const obj of objArray) {
-    const managedKafka: OdcNodeModel = {
-      id: "ManagedKafkaConnection" + obj.metadata.uid,
-      type: ManagedKafkaConnectionModel.kind,
-      resourceKind: ManagedKafkaConnectionModel.kind,
-      group: false,
-      label: obj.metadata.name,
-      children: [],
-      width: KAFKA_WIDTH,
-      height: KAFKA_HEIGHT,
-      visible: true,
-      style: {
-        padding: KAFKA_PADDING,
-      },
+  const nodes = [];
+  for (const obj of kafkaConnections) {
+    const data: TopologyDataObject = {
+      id: obj.metadata.uid,
+      name: obj.metadata.name,
+      type: MANAGED_KAFKA_TOPOLOGY_TYPE,
+      resource: obj,
+      // resources is poorly named, should be overviewItem, eventually going away.
+      resources: createOverviewItem(obj),
       data: {
-        resource: obj
+        resource: obj,
       }
     };
-    returnData.push(managedKafka);
+    nodes.push(getTopologyNodeItem(obj, ManagedKafkaConnectionModel.kind, data, KAFKA_PROPS));
   }
-
-  return returnData;
-};
-
-export const getRhoasTopologyDataModel = () => {
-
-  return (namespace: string, resources: TopologyDataResources): Promise<Model> => {
-    const items = getTopologyRhoasItem(resources.kafkaConnections.data);
-
-    return Promise.resolve({
-      nodes: items
-    });
-  };
+​
+  return nodes;
 };
+​
+export const getRhoasTopologyDataModel = () =>
+  (namespace: string, resources: TopologyDataResources): Promise<Model> =>
+    Promise.resolve({
+      nodes: getTopologyRhoasNodes(resources.kafkaConnections.data)
+  });
diff --git a/frontend/packages/rhoas-plugin/src/topology/rhoas-topology-plugin.tsx b/frontend/packages/rhoas-plugin/src/topology/rhoas-topology-plugin.tsx
index 358b06bebda..33722f0256d 100644
--- a/frontend/packages/rhoas-plugin/src/topology/rhoas-topology-plugin.tsx
+++ b/frontend/packages/rhoas-plugin/src/topology/rhoas-topology-plugin.tsx
@@ -13,6 +13,8 @@ export type TopologyConsumedExtensions =
   | TopologyDataModelFactory
 
 
+export const MANAGED_KAFKA_TOPOLOGY_TYPE = ManagedKafkaConnectionModel.kind
+
 const getRhoasWatchedResources = (namespace: string): WatchK8sResources<any> => {
   return {
     kafkaConnections: {
@@ -37,7 +39,8 @@ export const rhoasTopologyPlugin: Plugin<TopologyConsumedExtensions> = [
       id: 'rhoas-topology-model-factory',
       priority: 400,
       getDataModel: getRhoasTopologyDataModel,
-      resources: getRhoasWatchedResources
+      resources: getRhoasWatchedResources,
+      workloadKeys: ['kafkaConnections']
     },
   }
 ];