diff --git a/config/product/kafka.js b/config/product/kafka.js
index ba6fe617b86..f9ec11b455c 100644
--- a/config/product/kafka.js
+++ b/config/product/kafka.js
@@ -12,34 +12,34 @@ export function init(store) {
   } = DSL(store, NAME);
 
   product({
-    //TODO (Creatone): Add condition for Kafka.
-    //ifHave:     IF_HAVE.V2_MONITORING, // possible RBAC issue here if mon turned on but user doesn't have view/read roles on pod monitors
+    //  TODO (Creatone): Add condition for Kafka.
+    //  ifHave:     IF_HAVE.V2_MONITORING, // possible RBAC issue here if mon turned on but user doesn't have view/read roles on pod monitors
     icon:       'kafka',
-    weight:     90,
+    weight:     89,
   });
 
   virtualType({
     label:      'Kafka',
     namespaced: false,
-    name:       'monitoring-overview',
+    name:       'kafka',
     weight:     105,
-    route:      { name: 'c-cluster-monitoring' },
+    route:      { name: 'c-cluster-kafka' },
     exact:      true,
     overview:   true,
   });
 
   virtualType({
-    label:         'Create',
+    label:         'Service',
     group:         'kafka',
-    name:     'create',
+    name:     'service',
     icon:     'globe',
-    route: { name: 'c-cluster-kafka-create' }
+    route: { name: 'c-cluster-kafka-service' }
   });
 
-  configureType('create', { showListMasthead: false });
+  configureType('service', { showListMasthead: false });
 
   basicType([
     'kafka',
-    'create',
+    'service',
   ]);
 }
diff --git a/config/types.js b/config/types.js
index 03296131535..4780bd3a114 100644
--- a/config/types.js
+++ b/config/types.js
@@ -120,6 +120,10 @@ export const MONITORING = {
   }
 };
 
+export const KAFKA = {
+  SERVICE:   'kafka.strimzi.io.kafka',
+};
+
 export const LONGHORN = {
   ENGINES:       'longhorn.io.engine',
   ENGINE_IMAGES: 'longhorn.io.engineimage',
diff --git a/models/kafka.strimzi.io.kafka.js b/models/kafka.strimzi.io.kafka.js
new file mode 100644
index 00000000000..188b2977538
--- /dev/null
+++ b/models/kafka.strimzi.io.kafka.js
@@ -0,0 +1,13 @@
+import SteveModel from '@/plugins/steve/steve-class';
+
+export const PROVIDERS = [
+  {
+
+    name:     'kafka',
+    labelKey: 'kafkas.kafka.strimzi.io.kafka',
+    default:  { },
+  },
+];
+
+export default class Kafka extends SteveModel {
+}
diff --git a/models/kafka.strimzi.io.service.js b/models/kafka.strimzi.io.service.js
new file mode 100644
index 00000000000..4e3c591fe04
--- /dev/null
+++ b/models/kafka.strimzi.io.service.js
@@ -0,0 +1,23 @@
+import SteveModel from '@/plugins/steve/steve-class';
+
+export default class KafkaService extends SteveModel {
+  get _detailLocation() {
+    const id = this.id?.replace(/.*\//, '');
+
+    return {
+      name:   'c-cluster-kafka-service-namespace-id',
+      params: {
+        cluster: this.$rootGetters['clusterId'], id, namespace: this.metadata.namespace
+      },
+      query: { resource: this.type }
+    };
+  }
+
+  get doneOverride() {
+    return {
+      name:   'c-cluster-kafka-service',
+      params: { cluster: this.$rootGetters['clusterId'] },
+      query:  { resource: this.type }
+    };
+  }
+}
diff --git a/pages/c/_cluster/kafka/index.vue b/pages/c/_cluster/kafka/index.vue
index e407a230837..1add3c71965 100644
--- a/pages/c/_cluster/kafka/index.vue
+++ b/pages/c/_cluster/kafka/index.vue
@@ -143,7 +143,7 @@ export default {
     <header class="row">
       <div class="col span-12">
         <h1>
-          <t k="monitoring.overview.title" />
+          Kafka dashboard
         </h1>
         <div>
           <t k="monitoring.overview.subtitle" :raw="true" />
diff --git a/pages/c/_cluster/kafka/create/index.vue b/pages/c/_cluster/kafka/service/_id.vue
similarity index 90%
rename from pages/c/_cluster/kafka/create/index.vue
rename to pages/c/_cluster/kafka/service/_id.vue
index 204884d26b8..085105e9a0d 100644
--- a/pages/c/_cluster/kafka/create/index.vue
+++ b/pages/c/_cluster/kafka/service/_id.vue
@@ -2,7 +2,7 @@
 import ResourceDetail from '@/components/ResourceDetail';
 
 export default {
-  name: 'RouteReceiverCreate',
+  name: 'KafkaService',
 
   components: { ResourceDetail },
 
diff --git a/pages/c/_cluster/kafka/service/create.vue b/pages/c/_cluster/kafka/service/create.vue
new file mode 100644
index 00000000000..085105e9a0d
--- /dev/null
+++ b/pages/c/_cluster/kafka/service/create.vue
@@ -0,0 +1,19 @@
+<script>
+import ResourceDetail from '@/components/ResourceDetail';
+
+export default {
+  name: 'KafkaService',
+
+  components: { ResourceDetail },
+
+  data() {
+    const { query:{ resource } } = this.$route;
+
+    return { resource };
+  }
+};
+</script>
+
+<template>
+  <ResourceDetail :resource-override="resource" />
+</template>
diff --git a/pages/c/_cluster/kafka/service/index.vue b/pages/c/_cluster/kafka/service/index.vue
new file mode 100644
index 00000000000..371e509ca8d
--- /dev/null
+++ b/pages/c/_cluster/kafka/service/index.vue
@@ -0,0 +1,82 @@
+<script>
+import Loading from '@/components/Loading';
+import Tabbed from '@/components/Tabbed';
+import Tab from '@/components/Tabbed/Tab';
+import TypeDescription from '@/components/TypeDescription';
+
+import ResourceTable from '@/components/ResourceTable';
+import { MONITORING } from '@/config/types';
+import { KAFKA } from '@/config/types';
+import { allHash } from '@/utils/promise';
+export default {
+  components: {
+    Loading, Tabbed, Tab, ResourceTable, TypeDescription
+  },
+
+  async fetch() {
+    this.kafkaService = this.$store.getters['cluster/schemaFor'](KAFKA.SERVICE);
+    this.serviceMonitorSchema = this.$store.getters['cluster/schemaFor'](MONITORING.SERVICEMONITOR);
+
+    const hash = await allHash( {
+      kafkaServices:     this.$store.dispatch('cluster/findAll', { type: MONITORING.PODMONITOR } ),
+      serviceMonitors: this.$store.dispatch('cluster/findAll', { type: MONITORING.SERVICEMONITOR } )
+    });
+
+    this.kafkaServices = hash.kafkaServices;
+    this.serviceMonitors = hash.serviceMonitors;
+  },
+
+  data() {
+    const initTab = this.$route.query.resource || MONITORING.SPOOFED.PODMONITOR;
+
+    return {
+      kafkaServices: [], serviceMonitors: [], kafkaService: null, serviceMonitorSchema: null, initTab
+    };
+  },
+
+  computed: {
+    createRoute() {
+      const activeResource = this.$refs?.tabs?.activeTabName || this.routeSchema.id;
+
+      return {
+        name:   'c-cluster-kafka-service-create',
+        params: { cluster: this.$route.params.cluster },
+        query:  { resource: activeResource }
+      };
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <div class="row header mb-40">
+      <h1>  Kafka creation</h1>
+      <div>
+        <button class="btn btn-lg role-primary float right" @click="$router.push(createRoute)">
+          {{ t('resourceList.head.createFromYaml') }}
+        </button>
+      </div>
+    </div>
+    <Tabbed ref="tabs" :default-tab="initTab">
+      <Tab :name="kafkaService.id" :label="$store.getters['type-map/labelFor'](kafkaService, 2)">
+        <TypeDescription :resource="kafkaService.id" />
+        <ResourceTable :schema="kafkaService" :rows="kafkaServices" />
+      </Tab>
+      <Tab :name="serviceMonitorSchema.id" :label="$store.getters['type-map/labelFor'](serviceMonitorSchema, 2)">
+        <TypeDescription :resource="serviceMonitorSchema.id" />
+        <ResourceTable :schema="serviceMonitorSchema" :rows="serviceMonitors" />
+      </Tab>
+    </Tabbed>
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.header{
+  display: flex;
+  H1{
+    flex: 1;
+  }
+}
+</style>