From ec27914713aaa6d404a45d6360e80710566b3871 Mon Sep 17 00:00:00 2001
From: Mateusz <76775507+szczygiel-m@users.noreply.github.com>
Date: Thu, 10 Aug 2023 16:36:08 +0200
Subject: [PATCH] Feature/groups topics (#1702)

Implemented groups and topic groups

Co-authored-by: Karol Szapsza <kszapsza@gmail.com>
---
 .github/workflows/ci-console.yml              |   2 +-
 hermes-console-vue/.eslintrc.cjs              |   2 +
 hermes-console-vue/json-server/db.json        |  24 ++++
 hermes-console-vue/json-server/routes.json    |   8 +-
 hermes-console-vue/package.json               |   3 +
 .../src/api/hermes-client/index.ts            |  31 +++++
 hermes-console-vue/src/api/topic.ts           |   2 +-
 .../components/console-alert/ConsoleAlert.vue |   2 +-
 .../console-footer/ConsoleFooter.vue          |   2 +-
 .../theme-switch/ThemeSwitch.spec.ts          |   8 +-
 .../use-constraints/useConstraints.spec.ts    |  43 +++---
 .../use-constraints/useConstraints.ts         |  51 +++++++
 .../useConsumerGroups.spec.ts                 |  69 ++++++++++
 .../use-consumer-groups/useConsumerGroups.ts  |  46 +++++++
 .../groups/use-groups/useGroups.spec.ts       |  75 +++++++++++
 .../groups/use-groups/useGroups.ts            |  75 +++++++++++
 .../useInconsistentTopics.spec.ts             |  53 ++++++++
 .../useInconsistentTopics.ts                  |  44 ++++++
 .../use-readiness/useReadiness.spec.ts        |  51 +++++++
 .../readiness/use-readiness/useReadiness.ts   |  41 ++++++
 .../use-subscription/useSubscription.spec.ts  |  28 ++--
 .../topic/use-topic/useTopic.spec.ts          |   2 +-
 .../use-constraints/useConstraints.ts         |  34 -----
 .../useConsumerGroups.spec.ts                 |  59 ---------
 .../use-consumer-groups/useConsumerGroups.ts  |  27 ----
 .../useInconsistentTopics.spec.ts             |  56 --------
 .../useInconsistentTopics.ts                  |  27 ----
 .../use-readiness/useReadiness.spec.ts        |  54 --------
 .../composables/use-readiness/useReadiness.ts |  25 ----
 hermes-console-vue/src/dummy/groups.ts        |  33 +++++
 hermes-console-vue/src/dummy/topics.ts        |  16 +++
 hermes-console-vue/src/i18n/en-US.ts          |  48 +++++++
 hermes-console-vue/src/main.ts                |   1 +
 hermes-console-vue/src/mocks/handlers.ts      | 125 ++++++++++++++++++
 hermes-console-vue/src/router/index.ts        |  26 ++--
 .../admin/consistency/ConsistencyView.spec.ts |  35 ++---
 .../admin/consistency/ConsistencyView.vue     |   4 +-
 .../InconsistentTopicsListing.spec.ts         |  28 +++-
 .../admin/constraints/ConstraintsView.spec.ts |  33 ++---
 .../admin/constraints/ConstraintsView.vue     |   4 +-
 .../ConstraintsListing.spec.ts                |  22 ++-
 .../ConsumerGroupsView.spec.ts                |  27 ++--
 .../consumer-groups/ConsumerGroupsView.vue    |  17 ++-
 .../ConsumerGroupMembers.spec.ts              |  20 ++-
 .../admin/readiness/ReadinessView.spec.ts     |  17 ++-
 .../views/admin/readiness/ReadinessView.vue   |   6 +-
 .../group-topics/GroupTopicsView.spec.ts      |  94 +++++++++++++
 .../views/group-topics/GroupTopicsView.vue    |  89 +++++++++++++
 .../GroupTopicsListing.spec.ts                |  82 ++++++++++++
 .../GroupTopicsListing.vue                    |  68 ++++++++++
 .../src/views/groups/GroupsView.spec.ts       | 123 +++++++++++++++++
 .../src/views/groups/GroupsView.vue           |  85 ++++++++++++
 .../views/groups/group-form/GroupForm.spec.ts |  92 +++++++++++++
 .../src/views/groups/group-form/GroupForm.vue |  66 +++++++++
 .../groups/group-listing/GroupListing.spec.ts |  91 +++++++++++++
 .../groups/group-listing/GroupListing.vue     |  81 ++++++++++++
 .../src/views/home/HomeView.spec.ts           |   2 +-
 .../views/subscription/SubscriptionView.vue   |  25 ++--
 .../subscription/filters-card/FiltersCard.vue |   4 +-
 .../subscription/headers-card/HeadersCard.vue |   4 +-
 .../HealthProblemsAlerts.vue                  |  18 ++-
 .../properties-card/PropertiesCard.spec.ts    |  37 +++---
 .../SubscriptionBreadcrumbs.spec.ts           |  63 ---------
 .../SubscriptionBreadcrumbs.vue               |  39 ------
 .../SubscriptionMetadata.spec.ts              |  10 ++
 .../SubscriptionMetadata.vue                  |   5 +-
 .../UndeliveredMessagesCard.vue               |   2 +-
 .../src/views/topic/TopicView.vue             |   8 +-
 .../topic/properties-list/PropertiesList.vue  |   4 +-
 hermes-console-vue/tsconfig.vitest.json       |   2 +-
 hermes-management/build.gradle                |  17 +--
 .../management/config/JerseyProperties.java   |   2 +-
 72 files changed, 1930 insertions(+), 589 deletions(-)
 rename hermes-console-vue/src/composables/{ => constraints}/use-constraints/useConstraints.spec.ts (50%)
 create mode 100644 hermes-console-vue/src/composables/constraints/use-constraints/useConstraints.ts
 create mode 100644 hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts
 create mode 100644 hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts
 create mode 100644 hermes-console-vue/src/composables/groups/use-groups/useGroups.spec.ts
 create mode 100644 hermes-console-vue/src/composables/groups/use-groups/useGroups.ts
 create mode 100644 hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.spec.ts
 create mode 100644 hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.ts
 create mode 100644 hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.spec.ts
 create mode 100644 hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts
 delete mode 100644 hermes-console-vue/src/composables/use-constraints/useConstraints.ts
 delete mode 100644 hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.spec.ts
 delete mode 100644 hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.ts
 delete mode 100644 hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.spec.ts
 delete mode 100644 hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.ts
 delete mode 100644 hermes-console-vue/src/composables/use-readiness/useReadiness.spec.ts
 delete mode 100644 hermes-console-vue/src/composables/use-readiness/useReadiness.ts
 create mode 100644 hermes-console-vue/src/dummy/groups.ts
 create mode 100644 hermes-console-vue/src/dummy/topics.ts
 create mode 100644 hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts
 create mode 100644 hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
 create mode 100644 hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.spec.ts
 create mode 100644 hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue
 create mode 100644 hermes-console-vue/src/views/groups/GroupsView.spec.ts
 create mode 100644 hermes-console-vue/src/views/groups/GroupsView.vue
 create mode 100644 hermes-console-vue/src/views/groups/group-form/GroupForm.spec.ts
 create mode 100644 hermes-console-vue/src/views/groups/group-form/GroupForm.vue
 create mode 100644 hermes-console-vue/src/views/groups/group-listing/GroupListing.spec.ts
 create mode 100644 hermes-console-vue/src/views/groups/group-listing/GroupListing.vue
 delete mode 100644 hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.spec.ts
 delete mode 100644 hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.vue

diff --git a/.github/workflows/ci-console.yml b/.github/workflows/ci-console.yml
index ac68d0a521..3431872abe 100644
--- a/.github/workflows/ci-console.yml
+++ b/.github/workflows/ci-console.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Run frontend tests
         run: yarn && yarn test:unit
       - name: Run linter
diff --git a/hermes-console-vue/.eslintrc.cjs b/hermes-console-vue/.eslintrc.cjs
index 379c5bd2da..5fde39b3b2 100644
--- a/hermes-console-vue/.eslintrc.cjs
+++ b/hermes-console-vue/.eslintrc.cjs
@@ -43,5 +43,7 @@ module.exports = {
         memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
       },
     ],
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
   },
 };
diff --git a/hermes-console-vue/json-server/db.json b/hermes-console-vue/json-server/db.json
index d93c334615..06ed60aa9f 100644
--- a/hermes-console-vue/json-server/db.json
+++ b/hermes-console-vue/json-server/db.json
@@ -1,4 +1,28 @@
 {
+  "groups": [
+    "pl.allegro.public.offer",
+    "pl.allegro.public.offer.product",
+    "pl.allegro.public.order",
+    "pl.allegro.public.user",
+    "pl.allegro.public.group",
+    "pl.allegro.public.admin"
+  ],
+  "topicNames": [
+    "pl.allegro.public.offer.product.ProductEventV1",
+    "pl.allegro.public.offer.product.ProductEventV2",
+    "pl.allegro.public.offer.product.ProductEventV3",
+    "pl.allegro.public.offer.product.ProductEventV4",
+    "pl.allegro.public.offer.OfferEventV1",
+    "pl.allegro.public.offer.OfferEventV2",
+    "pl.allegro.public.offer.OfferEventV3",
+    "pl.allegro.public.order.OrderEventV1",
+    "pl.allegro.public.order.OrderEventV2",
+    "pl.allegro.public.user.UserCreatedEvent",
+    "pl.allegro.public.user.UserChangedEvent",
+    "pl.allegro.public.group.DummyEvent",
+    "pl.allegro.public.admin.AdminOfferActionEvent",
+    "pl.allegro.public.admin.AdminOrderActionEvent"
+  ],
   "offlineClientsSource": {
     "source": "https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
   },
diff --git a/hermes-console-vue/json-server/routes.json b/hermes-console-vue/json-server/routes.json
index 8a0bf70a46..cf76245007 100644
--- a/hermes-console-vue/json-server/routes.json
+++ b/hermes-console-vue/json-server/routes.json
@@ -1,7 +1,9 @@
 {
-  "/readiness/datacenters": "/readinessDatacenters",
-  "/workload-constraints": "/constraints",
   "/consistency/inconsistencies/topics": "/inconsistentTopics",
+  "/groups": "/groups",
+  "/owners/sources/Service%20Catalog/:id": "/topicsOwners/:id",
+  "/readiness/datacenters": "/readinessDatacenters",
+  "/topics": "/topicNames",
   "/topics/:id/metrics": "/topicsMetrics/:id",
   "/topics/:id/preview": "/topicPreview",
   "/topics/:id/offline-clients-source": "/offlineClientsSource",
@@ -12,5 +14,5 @@
   "/topics/:topicName/subscriptions/:id/metrics": "/subscriptionsMetrics/:id",
   "/topics/:topicName/subscriptions/:id/undelivered": "/subscriptionUndeliveredMessages",
   "/topics/:topicName/subscriptions/:id/undelivered/last": "/subscriptionUndeliveredMessages/:id",
-  "/owners/sources/Service%20Catalog/:id": "/topicsOwners/:id"
+  "/workload-constraints": "/constraints"
 }
diff --git a/hermes-console-vue/package.json b/hermes-console-vue/package.json
index 599898e838..c92657b99c 100644
--- a/hermes-console-vue/package.json
+++ b/hermes-console-vue/package.json
@@ -2,6 +2,9 @@
   "name": "hermes-console-vue",
   "description": "Console for Hermes Management",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check build-only",
diff --git a/hermes-console-vue/src/api/hermes-client/index.ts b/hermes-console-vue/src/api/hermes-client/index.ts
index d779f8b2e1..74c6205187 100644
--- a/hermes-console-vue/src/api/hermes-client/index.ts
+++ b/hermes-console-vue/src/api/hermes-client/index.ts
@@ -1,5 +1,8 @@
 import axios from 'axios';
 import type { AppConfiguration } from '@/api/app-configuration';
+import type { ConstraintsConfig } from '@/api/constraints';
+import type { ConsumerGroup } from '@/api/consumer-group';
+import type { DatacenterReadiness } from '@/api/datacenter-readiness';
 import type {
   MessagePreview,
   TopicMetrics,
@@ -60,3 +63,31 @@ export function fetchOfflineClientsSource(
     `/topics/${topicName}/offline-clients-source`,
   );
 }
+
+export function fetchConstraints(): ResponsePromise<ConstraintsConfig> {
+  return axios.get<ConstraintsConfig>('/workload-constraints');
+}
+
+export function fetchReadiness(): ResponsePromise<DatacenterReadiness[]> {
+  return axios.get<DatacenterReadiness[]>('/readiness/datacenters');
+}
+
+export function fetchConsumerGroups(
+  topicName: string,
+  subscription: string,
+): ResponsePromise<ConsumerGroup[]> {
+  return axios.get<ConsumerGroup[]>(
+    `/topics/${topicName}/subscriptions/${subscription}/consumer-groups`,
+  );
+}
+
+export function fetchInconsistentTopics(): ResponsePromise<string[]> {
+  return axios.get<string[]>('/consistency/inconsistencies/topics');
+}
+
+export function fetchTopicNames(): ResponsePromise<string[]> {
+  return axios.get<string[]>('/topics');
+}
+export function fetchGroupNames(): ResponsePromise<string[]> {
+  return axios.get<string[]>('/groups');
+}
diff --git a/hermes-console-vue/src/api/topic.ts b/hermes-console-vue/src/api/topic.ts
index 6695c9d9e7..0f8f9da1e1 100644
--- a/hermes-console-vue/src/api/topic.ts
+++ b/hermes-console-vue/src/api/topic.ts
@@ -40,7 +40,7 @@ export enum Ack {
 }
 
 export interface PublishingAuth {
-  publishers: string[];
+  publishers?: string[];
   enabled: boolean;
   unauthenticatedAccessEnabled: boolean;
 }
diff --git a/hermes-console-vue/src/components/console-alert/ConsoleAlert.vue b/hermes-console-vue/src/components/console-alert/ConsoleAlert.vue
index 4d1a19ee80..98ab23e19e 100644
--- a/hermes-console-vue/src/components/console-alert/ConsoleAlert.vue
+++ b/hermes-console-vue/src/components/console-alert/ConsoleAlert.vue
@@ -9,7 +9,7 @@
 
 <template>
   <v-alert
-    :title="props.title"
+    :title="props.title ?? ''"
     :text="props.text"
     variant="elevated"
     :type="props.type"
diff --git a/hermes-console-vue/src/components/console-footer/ConsoleFooter.vue b/hermes-console-vue/src/components/console-footer/ConsoleFooter.vue
index a69fbba23d..e447d7f278 100644
--- a/hermes-console-vue/src/components/console-footer/ConsoleFooter.vue
+++ b/hermes-console-vue/src/components/console-footer/ConsoleFooter.vue
@@ -10,7 +10,7 @@
     <v-row justify="center" no-gutters>
       <v-btn
         v-for="link in links"
-        :key="link"
+        :key="link.href"
         variant="text"
         class="mx-2"
         rounded="xl"
diff --git a/hermes-console-vue/src/components/theme-switch/ThemeSwitch.spec.ts b/hermes-console-vue/src/components/theme-switch/ThemeSwitch.spec.ts
index cbb3488592..ba5325626b 100644
--- a/hermes-console-vue/src/components/theme-switch/ThemeSwitch.spec.ts
+++ b/hermes-console-vue/src/components/theme-switch/ThemeSwitch.spec.ts
@@ -24,26 +24,26 @@ describe('ThemeSwitch', () => {
     ['dark', 'light'],
   ])(
     'should change Vuetify theme on button click (initial theme: %s)',
-    (initialTheme: string, changedTheme: string) => {
+    async (initialTheme: string, changedTheme: string) => {
       // given
       const { getByRole } = render(ThemeSwitch, { testVuetify });
       testVuetify.theme.global.name.value = initialTheme;
 
       // when
-      fireEvent.click(getByRole('button'));
+      await fireEvent.click(getByRole('button'));
 
       // then
       expect(testVuetify.theme.global.name.value).toBe(changedTheme);
     },
   );
 
-  it('should persist theme preference in local storage', () => {
+  it('should persist theme preference in local storage', async () => {
     // given
     const { getByRole } = render(ThemeSwitch, { testVuetify });
     testVuetify.theme.global.name.value = 'light';
 
     // when
-    fireEvent.click(getByRole('button'));
+    await fireEvent.click(getByRole('button'));
 
     // then
     expect(localStorage.getItem('hermes-console-theme')).toBe('dark');
diff --git a/hermes-console-vue/src/composables/use-constraints/useConstraints.spec.ts b/hermes-console-vue/src/composables/constraints/use-constraints/useConstraints.spec.ts
similarity index 50%
rename from hermes-console-vue/src/composables/use-constraints/useConstraints.spec.ts
rename to hermes-console-vue/src/composables/constraints/use-constraints/useConstraints.spec.ts
index ed9c0470c4..b581e32571 100644
--- a/hermes-console-vue/src/composables/use-constraints/useConstraints.spec.ts
+++ b/hermes-console-vue/src/composables/constraints/use-constraints/useConstraints.spec.ts
@@ -1,41 +1,37 @@
+import { afterEach } from 'vitest';
 import { dummyConstraints } from '@/dummy/constraints';
-import { useConstraints } from '@/composables/use-constraints/useConstraints';
+import {
+  fetchConstraintsErrorHandler,
+  fetchConstraintsHandler,
+} from '@/mocks/handlers';
+import { setupServer } from 'msw/node';
+import { useConstraints } from '@/composables/constraints/use-constraints/useConstraints';
 import { waitFor } from '@testing-library/vue';
-import axios from 'axios';
-import type { Mocked } from 'vitest';
-
-vitest.mock('axios');
-const mockedAxios = axios as Mocked<typeof axios>;
 
 describe('useConstraints', () => {
-  it('should hit constraints Hermes API endpoint', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: [] });
-
-    // when
-    useConstraints();
+  const server = setupServer(
+    fetchConstraintsHandler({ constraints: dummyConstraints }),
+  );
 
-    // then
-    await waitFor(() => {
-      expect(mockedAxios.get.mock.calls[0][0]).toBe('/workload-constraints');
-    });
+  afterEach(() => {
+    server.resetHandlers();
   });
 
   it('should fetch constraints names from Hermes backend', async () => {
     // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyConstraints });
+    server.listen();
 
     // when
     const { topicConstraints, subscriptionConstraints, loading, error } =
       useConstraints();
 
     // then
-    expect(loading.value).toBe(true);
-    expect(error.value).toBe(false);
+    expect(loading.value).toBeTruthy();
+    expect(error.value.fetchConstraints).toBeNull();
 
     await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(false);
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchConstraints).toBeNull();
       expect(topicConstraints.value?.['pl.group.Topic1'].consumersNumber).toBe(
         2,
       );
@@ -48,14 +44,15 @@ describe('useConstraints', () => {
 
   it('should set error to true on workload endpoint failure', async () => {
     // given
-    mockedAxios.get.mockRejectedValueOnce({});
+    server.use(fetchConstraintsErrorHandler({ errorCode: 500 }));
+    server.listen();
 
     // when
     const { error } = useConstraints();
 
     // then
     await waitFor(() => {
-      expect(error.value).toBe(true);
+      expect(error.value.fetchConstraints).not.toBeNull();
     });
   });
 });
diff --git a/hermes-console-vue/src/composables/constraints/use-constraints/useConstraints.ts b/hermes-console-vue/src/composables/constraints/use-constraints/useConstraints.ts
new file mode 100644
index 0000000000..a93a9da382
--- /dev/null
+++ b/hermes-console-vue/src/composables/constraints/use-constraints/useConstraints.ts
@@ -0,0 +1,51 @@
+import { computed, ref } from 'vue';
+import { fetchConstraints as getConstraints } from '@/api/hermes-client';
+import type { Constraint, ConstraintsConfig } from '@/api/constraints';
+import type { Ref } from 'vue';
+
+export interface UseConstraints {
+  topicConstraints: Ref<Record<string, Constraint> | undefined>;
+  subscriptionConstraints: Ref<Record<string, Constraint> | undefined>;
+  loading: Ref<boolean>;
+  error: Ref<UseConstraintsErrors>;
+}
+
+export interface UseConstraintsErrors {
+  fetchConstraints: Error | null;
+}
+
+export function useConstraints(): UseConstraints {
+  const constraints = ref<ConstraintsConfig>();
+  const error = ref<UseConstraintsErrors>({
+    fetchConstraints: null,
+  });
+  const loading = ref(false);
+
+  const topicConstraints = computed((): Record<string, Constraint> => {
+    return constraints.value?.topicConstraints ?? {};
+  });
+
+  const subscriptionConstraints = computed((): Record<string, Constraint> => {
+    return constraints.value?.subscriptionConstraints ?? {};
+  });
+
+  const fetchConstraints = async () => {
+    try {
+      loading.value = true;
+      constraints.value = (await getConstraints()).data;
+    } catch (e) {
+      error.value.fetchConstraints = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  fetchConstraints();
+
+  return {
+    topicConstraints,
+    subscriptionConstraints,
+    loading,
+    error,
+  };
+}
diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts
new file mode 100644
index 0000000000..4c9fd4f34b
--- /dev/null
+++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.spec.ts
@@ -0,0 +1,69 @@
+import { afterEach } from 'vitest';
+import { dummyConsumerGroups } from '@/dummy/consumerGroups';
+import { dummySubscription } from '@/dummy/subscription';
+import { dummyTopic } from '@/dummy/topic';
+import {
+  fetchConsumerGroupsErrorHandler,
+  fetchConsumerGroupsHandler,
+} from '@/mocks/handlers';
+import { setupServer } from 'msw/node';
+import { useConsumerGroups } from '@/composables/consumer-groups/use-consumer-groups/useConsumerGroups';
+import { waitFor } from '@testing-library/vue';
+
+describe('useConsumerGroups', () => {
+  const topicName = dummyTopic.name;
+  const subscriptionName = dummySubscription.name;
+
+  const server = setupServer(
+    fetchConsumerGroupsHandler({
+      consumerGroups: dummyConsumerGroups,
+      topicName,
+      subscriptionName,
+    }),
+  );
+
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  it('should fetch consumerGroups details from Hermes API', async () => {
+    // given
+    server.listen();
+
+    // when
+    const { consumerGroups, loading, error } = useConsumerGroups(
+      topicName,
+      subscriptionName,
+    );
+
+    // then
+    expect(loading.value).toBeTruthy();
+
+    await waitFor(() => {
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchConsumerGroups).toBeNull();
+      expect(consumerGroups.value).toEqual(consumerGroups.value);
+    });
+  });
+
+  it('should set error to true on consumerGroups endpoint failure', async () => {
+    // given
+    server.use(
+      fetchConsumerGroupsErrorHandler({
+        errorCode: 500,
+        topicName,
+        subscriptionName,
+      }),
+    );
+    server.listen();
+
+    // when
+    const { loading, error } = useConsumerGroups(topicName, subscriptionName);
+
+    // then
+    await waitFor(() => {
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchConsumerGroups).not.toBeNull();
+    });
+  });
+});
diff --git a/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts
new file mode 100644
index 0000000000..8956243cef
--- /dev/null
+++ b/hermes-console-vue/src/composables/consumer-groups/use-consumer-groups/useConsumerGroups.ts
@@ -0,0 +1,46 @@
+import { fetchConsumerGroups as getConsumerGroups } from '@/api/hermes-client';
+import { ref } from 'vue';
+import type { ConsumerGroup } from '@/api/consumer-group';
+import type { Ref } from 'vue';
+
+export interface UseConsumerGroups {
+  consumerGroups: Ref<ConsumerGroup[] | undefined>;
+  loading: Ref<boolean>;
+  error: Ref<UseConsumerGroupsErrors>;
+}
+
+export interface UseConsumerGroupsErrors {
+  fetchConsumerGroups: Error | null;
+}
+
+export function useConsumerGroups(
+  topicName: string,
+  subscriptionName: string,
+): UseConsumerGroups {
+  const consumerGroups = ref<ConsumerGroup[]>();
+  const error = ref<UseConsumerGroupsErrors>({
+    fetchConsumerGroups: null,
+  });
+  const loading = ref(false);
+
+  const fetchConsumerGroups = async () => {
+    try {
+      loading.value = true;
+      consumerGroups.value = (
+        await getConsumerGroups(topicName, subscriptionName)
+      ).data;
+    } catch (e) {
+      error.value.fetchConsumerGroups = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  fetchConsumerGroups();
+
+  return {
+    consumerGroups,
+    loading,
+    error,
+  };
+}
diff --git a/hermes-console-vue/src/composables/groups/use-groups/useGroups.spec.ts b/hermes-console-vue/src/composables/groups/use-groups/useGroups.spec.ts
new file mode 100644
index 0000000000..a1e11fe9a3
--- /dev/null
+++ b/hermes-console-vue/src/composables/groups/use-groups/useGroups.spec.ts
@@ -0,0 +1,75 @@
+import { afterEach } from 'vitest';
+import { dummyGroupNames } from '@/dummy/groups';
+import { dummyTopicNames } from '@/dummy/topics';
+import {
+  fetchGroupNamesErrorHandler,
+  fetchGroupNamesHandler,
+  fetchTopicNamesErrorHandler,
+  fetchTopicNamesHandler,
+} from '@/mocks/handlers';
+import { setupServer } from 'msw/node';
+import { useGroups } from '@/composables/groups/use-groups/useGroups';
+import { waitFor } from '@testing-library/vue';
+
+describe('useGroups', () => {
+  const server = setupServer(
+    fetchGroupNamesHandler({ groupNames: dummyGroupNames }),
+    fetchTopicNamesHandler({ topicNames: dummyTopicNames }),
+  );
+
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  it('should fetch group and topic names from Hermes backend', async () => {
+    // given
+    server.listen();
+
+    // when
+    const { groups, loading, error } = useGroups();
+
+    // then
+    expect(loading.value).toBeTruthy();
+    expect(error.value.fetchTopicNames).toBeNull();
+    expect(error.value.fetchGroupNames).toBeNull();
+
+    await waitFor(() => {
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchGroupNames).toBeNull();
+      expect(error.value.fetchTopicNames).toBeNull();
+      expect(groups.value?.length).toBe(6);
+      expect(groups.value?.[0].name).toBe('pl.allegro.public.admin');
+      expect(groups.value?.[0].topics[0]).toContain('AdminOfferActionEvent');
+      expect(groups.value?.[2].topics.length).toBe(3);
+      expect(groups.value?.[3].topics.length).toBe(4);
+    });
+  });
+
+  it('should set error to true on /groups endpoint failure', async () => {
+    // given
+    server.use(fetchGroupNamesErrorHandler({ errorCode: 500 }));
+    server.listen();
+
+    // when
+    const { error } = useGroups();
+
+    // then
+    await waitFor(() => {
+      expect(error.value.fetchGroupNames).not.toBeNull();
+    });
+  });
+
+  it('should set error to true on /topics endpoint failure', async () => {
+    // given
+    server.use(fetchTopicNamesErrorHandler({ errorCode: 500 }));
+    server.listen();
+
+    // when
+    const { error } = useGroups();
+
+    // then
+    await waitFor(() => {
+      expect(error.value.fetchTopicNames).not.toBeNull();
+    });
+  });
+});
diff --git a/hermes-console-vue/src/composables/groups/use-groups/useGroups.ts b/hermes-console-vue/src/composables/groups/use-groups/useGroups.ts
new file mode 100644
index 0000000000..d89b7f407b
--- /dev/null
+++ b/hermes-console-vue/src/composables/groups/use-groups/useGroups.ts
@@ -0,0 +1,75 @@
+import { computed, ref } from 'vue';
+import { fetchGroupNames as getGroupNames } from '@/api/hermes-client';
+import { fetchTopicNames as getTopicNames } from '@/api/hermes-client';
+import type { Ref } from 'vue';
+
+export interface UseGroups {
+  groups: Ref<Group[] | undefined>;
+  loading: Ref<boolean>;
+  error: Ref<UseGroupsErrors>;
+}
+
+export interface UseGroupsErrors {
+  fetchGroupNames: Error | null;
+  fetchTopicNames: Error | null;
+}
+
+export interface Group {
+  name: string;
+  topics: string[];
+}
+
+export function useGroups(): UseGroups {
+  const groupNames = ref<string[]>();
+  const topicNames = ref<string[]>();
+  const error = ref<UseGroupsErrors>({
+    fetchGroupNames: null,
+    fetchTopicNames: null,
+  });
+  const loading = ref(false);
+
+  const groups = computed((): Group[] | undefined => {
+    return groupNames.value
+      ?.map((groupName) => ({
+        name: groupName,
+        topics:
+          topicNames.value?.filter(
+            (topicName) =>
+              topicName.indexOf(groupName) === 0 &&
+              groupName.length === topicName.lastIndexOf('.'),
+          ) ?? [],
+      }))
+      .sort(({ name: a }, { name: b }) => a.localeCompare(b));
+  });
+
+  const fetchGroupNames = async () => {
+    try {
+      loading.value = true;
+      groupNames.value = (await getGroupNames()).data;
+    } catch (e) {
+      error.value.fetchGroupNames = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const fetchTopicNames = async () => {
+    try {
+      loading.value = true;
+      topicNames.value = (await getTopicNames()).data;
+    } catch (e) {
+      error.value.fetchTopicNames = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  fetchGroupNames();
+  fetchTopicNames();
+
+  return {
+    groups,
+    loading,
+    error,
+  };
+}
diff --git a/hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.spec.ts b/hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.spec.ts
new file mode 100644
index 0000000000..428891e357
--- /dev/null
+++ b/hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.spec.ts
@@ -0,0 +1,53 @@
+import { afterEach } from 'vitest';
+import { dummyInconsistentTopics } from '@/dummy/inconsistentTopics';
+import {
+  fetchInconsistentTopicsErrorHandler,
+  fetchInconsistentTopicsHandler,
+} from '@/mocks/handlers';
+import { setupServer } from 'msw/node';
+import { useInconsistentTopics } from '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics';
+import { waitFor } from '@testing-library/vue';
+
+describe('useInconsistentTopics', () => {
+  const server = setupServer(
+    fetchInconsistentTopicsHandler({ topics: dummyInconsistentTopics }),
+  );
+
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  it('should fetch topics consistency details from Hermes API', async () => {
+    // given
+    server.listen();
+
+    // when
+    const { topics, loading, error } = useInconsistentTopics();
+
+    // then
+    expect(loading.value).toBeTruthy();
+
+    await waitFor(() => {
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchInconsistentTopics).toBeNull();
+      expect(topics.value).toEqual(
+        expect.arrayContaining(dummyInconsistentTopics),
+      );
+    });
+  });
+
+  it('should set error to true on topics consistency endpoint failure', async () => {
+    // given
+    server.use(fetchInconsistentTopicsErrorHandler({ errorCode: 500 }));
+    server.listen();
+
+    // when
+    const { loading, error } = useInconsistentTopics();
+
+    // then
+    await waitFor(() => {
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchInconsistentTopics).not.toBeNull();
+    });
+  });
+});
diff --git a/hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.ts b/hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.ts
new file mode 100644
index 0000000000..bbf0a2bdd6
--- /dev/null
+++ b/hermes-console-vue/src/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics.ts
@@ -0,0 +1,44 @@
+import { computed, ref } from 'vue';
+import { fetchInconsistentTopics as getInconsistentTopics } from '@/api/hermes-client';
+import type { Ref } from 'vue';
+
+export interface UseInconsistentTopics {
+  topics: Ref<string[] | undefined>;
+  loading: Ref<boolean>;
+  error: Ref<UseInconsistentTopicsErrors>;
+}
+
+export interface UseInconsistentTopicsErrors {
+  fetchInconsistentTopics: Error | null;
+}
+
+export function useInconsistentTopics(): UseInconsistentTopics {
+  const topicNames = ref<string[]>();
+  const error = ref<UseInconsistentTopicsErrors>({
+    fetchInconsistentTopics: null,
+  });
+  const loading = ref(false);
+
+  const topics = computed((): string[] | undefined => {
+    return topicNames.value?.sort((a, b) => a.localeCompare(b));
+  });
+
+  const fetchInconsistentTopics = async () => {
+    try {
+      loading.value = true;
+      topicNames.value = (await getInconsistentTopics()).data;
+    } catch (e) {
+      error.value.fetchInconsistentTopics = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  fetchInconsistentTopics();
+
+  return {
+    topics,
+    loading,
+    error,
+  };
+}
diff --git a/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.spec.ts b/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.spec.ts
new file mode 100644
index 0000000000..2598fb696e
--- /dev/null
+++ b/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.spec.ts
@@ -0,0 +1,51 @@
+import { afterEach } from 'vitest';
+import { dummyDatacentersReadiness } from '@/dummy/readiness';
+import {
+  fetchReadinessErrorHandler,
+  fetchReadinessHandler,
+} from '@/mocks/handlers';
+import { setupServer } from 'msw/node';
+import { useReadiness } from '@/composables/readiness/use-readiness/useReadiness';
+import { waitFor } from '@testing-library/vue';
+
+describe('useReadiness', () => {
+  const server = setupServer(
+    fetchReadinessHandler({ datacentersReadiness: dummyDatacentersReadiness }),
+  );
+
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
+  it('should fetch readiness details from Hermes API', async () => {
+    // given
+    server.listen();
+
+    // when
+    const { datacentersReadiness, loading, error } = useReadiness();
+
+    // then
+    expect(loading.value).toBeTruthy();
+
+    await waitFor(() => {
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchReadiness).toBeNull();
+      expect(datacentersReadiness.value).toEqual(dummyDatacentersReadiness);
+    });
+  });
+
+  it('should set error to true on datacenters readiness endpoint failure', async () => {
+    // given
+    server.use(fetchReadinessErrorHandler({ errorCode: 500 }));
+    server.listen();
+
+    // when
+    const { loading, error } = useReadiness();
+
+    // then
+    await waitFor(() => {
+      expect(loading.value).toBeFalsy();
+      expect(error.value.fetchReadiness).not.toBeNull();
+    });
+  });
+});
diff --git a/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts b/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts
new file mode 100644
index 0000000000..ea95dead9e
--- /dev/null
+++ b/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts
@@ -0,0 +1,41 @@
+import { fetchReadiness as getReadiness } from '@/api/hermes-client';
+import { ref } from 'vue';
+import type { DatacenterReadiness } from '@/api/datacenter-readiness';
+import type { Ref } from 'vue';
+
+export interface UseReadiness {
+  datacentersReadiness: Ref<DatacenterReadiness[] | undefined>;
+  loading: Ref<boolean>;
+  error: Ref<UseReadinessErrors>;
+}
+
+export interface UseReadinessErrors {
+  fetchReadiness: Error | null;
+}
+
+export function useReadiness(): UseReadiness {
+  const datacentersReadiness = ref<DatacenterReadiness[]>();
+  const error = ref<UseReadinessErrors>({
+    fetchReadiness: null,
+  });
+  const loading = ref(false);
+
+  const fetchReadiness = async () => {
+    try {
+      loading.value = true;
+      datacentersReadiness.value = (await getReadiness()).data;
+    } catch (e) {
+      error.value.fetchReadiness = e as Error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  fetchReadiness();
+
+  return {
+    datacentersReadiness,
+    loading,
+    error,
+  };
+}
diff --git a/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.spec.ts b/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.spec.ts
index a71d7c6dc4..519f80e169 100644
--- a/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.spec.ts
+++ b/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.spec.ts
@@ -68,11 +68,11 @@ describe('useSubscription', () => {
     } = useSubscription('topic', 'subscription');
 
     // then
-    expect(loading.value).toBe(true);
+    expect(loading.value).toBeTruthy();
 
     await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(false);
+      expect(loading.value).toBeFalsy();
+      expect(error.value).toBeFalsy();
       expect(subscription.value).toEqual(dummySubscription);
       expect(subscriptionMetrics.value).toEqual(dummySubscriptionMetrics);
       expect(subscriptionHealth.value).toEqual(dummySubscriptionHealth);
@@ -92,8 +92,8 @@ describe('useSubscription', () => {
 
     // then
     await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(true);
+      expect(loading.value).toBeFalsy();
+      expect(error.value).toBeTruthy();
     });
   });
 
@@ -110,8 +110,8 @@ describe('useSubscription', () => {
 
     // then
     await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(true);
+      expect(loading.value).toBeFalsy();
+      expect(error.value).toBeTruthy();
     });
   });
 
@@ -128,8 +128,8 @@ describe('useSubscription', () => {
 
     // then
     await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(true);
+      expect(loading.value).toBeFalsy();
+      expect(error.value).toBeTruthy();
     });
   });
 
@@ -147,9 +147,9 @@ describe('useSubscription', () => {
 
     // then
     await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(false);
-      expect(subscriptionLastUndeliveredMessage.value).toBe(null);
+      expect(loading.value).toBeFalsy();
+      expect(error.value).toBeFalsy();
+      expect(subscriptionLastUndeliveredMessage.value).toBeNull();
     });
   });
 
@@ -169,8 +169,8 @@ describe('useSubscription', () => {
 
     // then
     await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(false);
+      expect(loading.value).toBeFalsy();
+      expect(error.value).toBeFalsy();
       expect(subscriptionUndeliveredMessages.value).toEqual([]);
     });
   });
diff --git a/hermes-console-vue/src/composables/topic/use-topic/useTopic.spec.ts b/hermes-console-vue/src/composables/topic/use-topic/useTopic.spec.ts
index e747fef4d9..cbcaafd22b 100644
--- a/hermes-console-vue/src/composables/topic/use-topic/useTopic.spec.ts
+++ b/hermes-console-vue/src/composables/topic/use-topic/useTopic.spec.ts
@@ -20,7 +20,7 @@ import {
 } from '@/mocks/handlers';
 import { setupServer } from 'msw/node';
 import { useTopic } from '@/composables/topic/use-topic/useTopic';
-import type { UseTopicErrors } from '@/composables/types';
+import type { UseTopicErrors } from '@/composables/topic/use-topic/useTopic';
 
 describe('useTopic', () => {
   const server = setupServer(...successfulTopicHandlers);
diff --git a/hermes-console-vue/src/composables/use-constraints/useConstraints.ts b/hermes-console-vue/src/composables/use-constraints/useConstraints.ts
deleted file mode 100644
index 6f9de2716b..0000000000
--- a/hermes-console-vue/src/composables/use-constraints/useConstraints.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { computed, ref } from 'vue';
-import axios from 'axios';
-import type { Constraint, ConstraintsConfig } from '@/api/constraints';
-
-export function useConstraints() {
-  const constraints = ref<ConstraintsConfig>();
-  const error = ref<boolean>(false);
-
-  const loading = computed(() => !error.value && !constraints.value);
-
-  const topicConstraints = computed((): Record<string, Constraint> => {
-    return constraints.value?.topicConstraints ?? {};
-  });
-
-  const subscriptionConstraints = computed((): Record<string, Constraint> => {
-    return constraints.value?.subscriptionConstraints ?? {};
-  });
-
-  function fetchConstraints() {
-    axios
-      .get<ConstraintsConfig>('/workload-constraints')
-      .then((response) => (constraints.value = response.data))
-      .catch(() => (error.value = true));
-  }
-
-  fetchConstraints();
-
-  return {
-    topicConstraints,
-    subscriptionConstraints,
-    loading,
-    error,
-  };
-}
diff --git a/hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.spec.ts b/hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.spec.ts
deleted file mode 100644
index d1b3debc06..0000000000
--- a/hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { dummyConsumerGroups } from '@/dummy/consumerGroups';
-import { useConsumerGroups } from '@/composables/use-consumer-groups/useConsumerGroups';
-import { waitFor } from '@testing-library/vue';
-import axios from 'axios';
-import type { Mocked } from 'vitest';
-
-vitest.mock('axios');
-const mockedAxios = axios as Mocked<typeof axios>;
-
-describe('useConsumerGroups', () => {
-  it('should hit expected Hermes API endpoint', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyConsumerGroups });
-
-    // when
-    useConsumerGroups('topic', 'subscription');
-
-    // then
-    await waitFor(() => {
-      expect(mockedAxios.get.mock.calls[0][0]).toBe(
-        '/topics/topic/subscriptions/subscription/consumer-groups',
-      );
-    });
-  });
-
-  it('should fetch consumerGroups details from Hermes API', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyConsumerGroups });
-
-    // when
-    const { consumerGroups, loading, error } = useConsumerGroups(
-      'topic',
-      'subscription',
-    );
-
-    // then
-    expect(loading.value).toBe(true);
-
-    await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(false);
-      expect(consumerGroups.value).toEqual(consumerGroups.value);
-    });
-  });
-
-  it('should set error to true on consumerGroups endpoint failure', async () => {
-    // given
-    mockedAxios.get.mockRejectedValueOnce({});
-
-    // when
-    const { loading, error } = useConsumerGroups('topic', 'subscription');
-
-    // then
-    await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(true);
-    });
-  });
-});
diff --git a/hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.ts b/hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.ts
deleted file mode 100644
index dba1c68a40..0000000000
--- a/hermes-console-vue/src/composables/use-consumer-groups/useConsumerGroups.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { computed, ref } from 'vue';
-import axios from 'axios';
-import type { ConsumerGroup } from '@/api/consumer-group';
-
-export function useConsumerGroups(topicName: string, subscriptionName: string) {
-  const consumerGroups = ref<ConsumerGroup[]>();
-  const error = ref<boolean>(false);
-
-  const loading = computed(() => !error.value && !consumerGroups.value);
-
-  function fetchConsumerGroups() {
-    axios
-      .get<ConsumerGroup[]>(
-        `/topics/${topicName}/subscriptions/${subscriptionName}/consumer-groups`,
-      )
-      .then((response) => (consumerGroups.value = response.data))
-      .catch(() => (error.value = true));
-  }
-
-  fetchConsumerGroups();
-
-  return {
-    consumerGroups,
-    loading,
-    error,
-  };
-}
diff --git a/hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.spec.ts b/hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.spec.ts
deleted file mode 100644
index b8427c0182..0000000000
--- a/hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { dummyInconsistentTopics } from '@/dummy/inconsistentTopics';
-import { useInconsistentTopics } from '@/composables/use-inconsistent-topics/useInconsistentTopics';
-import { waitFor } from '@testing-library/vue';
-import axios from 'axios';
-import type { Mocked } from 'vitest';
-
-vitest.mock('axios');
-const mockedAxios = axios as Mocked<typeof axios>;
-
-describe('useInconsistentTopics', () => {
-  it('should hit expected Hermes API endpoint', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyInconsistentTopics });
-
-    // when
-    useInconsistentTopics();
-
-    // then
-    await waitFor(() => {
-      expect(mockedAxios.get.mock.calls[0][0]).toBe(
-        '/consistency/inconsistencies/topics',
-      );
-    });
-  });
-
-  it('should fetch topics consistency details from Hermes API', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyInconsistentTopics });
-
-    // when
-    const { topics, loading, error } = useInconsistentTopics();
-
-    // then
-    expect(loading.value).toBe(true);
-
-    await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(false);
-      expect(topics.value).toEqual(dummyInconsistentTopics);
-    });
-  });
-
-  it('should set error to true on topics consistency endpoint failure', async () => {
-    // given
-    mockedAxios.get.mockRejectedValueOnce({});
-
-    // when
-    const { loading, error } = useInconsistentTopics();
-
-    // then
-    await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(true);
-    });
-  });
-});
diff --git a/hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.ts b/hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.ts
deleted file mode 100644
index eeffd2bd7e..0000000000
--- a/hermes-console-vue/src/composables/use-inconsistent-topics/useInconsistentTopics.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { computed, ref } from 'vue';
-import axios from 'axios';
-
-export function useInconsistentTopics() {
-  const topicNames = ref<string[]>();
-  const error = ref<boolean>(false);
-  const loading = computed(() => !error.value && !topicNames.value);
-
-  const topics = computed((): string[] | undefined => {
-    return topicNames.value?.sort((a, b) => a.localeCompare(b));
-  });
-
-  function fetchTopicNames() {
-    axios
-      .get<string[]>('/consistency/inconsistencies/topics')
-      .then((response) => (topicNames.value = response.data))
-      .catch(() => (error.value = true));
-  }
-
-  fetchTopicNames();
-
-  return {
-    topics,
-    loading,
-    error,
-  };
-}
diff --git a/hermes-console-vue/src/composables/use-readiness/useReadiness.spec.ts b/hermes-console-vue/src/composables/use-readiness/useReadiness.spec.ts
deleted file mode 100644
index f0abc0eafb..0000000000
--- a/hermes-console-vue/src/composables/use-readiness/useReadiness.spec.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { dummyDatacentersReadiness } from '@/dummy/readiness';
-import { useReadiness } from '@/composables/use-readiness/useReadiness';
-import { waitFor } from '@testing-library/vue';
-import axios from 'axios';
-import type { Mocked } from 'vitest';
-
-vitest.mock('axios');
-const mockedAxios = axios as Mocked<typeof axios>;
-
-describe('useReadiness', () => {
-  it('should hit expected Hermes API endpoint', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyDatacentersReadiness });
-
-    // when
-    useReadiness();
-
-    // then
-    await waitFor(() => {
-      expect(mockedAxios.get.mock.calls[0][0]).toBe('/readiness/datacenters');
-    });
-  });
-
-  it('should fetch readiness details from Hermes API', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyDatacentersReadiness });
-
-    // when
-    const { datacentersReadiness, loading, error } = useReadiness();
-
-    // then
-    expect(loading.value).toBe(true);
-
-    await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(false);
-      expect(datacentersReadiness.value).toEqual(dummyDatacentersReadiness);
-    });
-  });
-
-  it('should set error to true on datacenters readiness endpoint failure', async () => {
-    // given
-    mockedAxios.get.mockRejectedValueOnce({});
-
-    // when
-    const { loading, error } = useReadiness();
-
-    // then
-    await waitFor(() => {
-      expect(loading.value).toBe(false);
-      expect(error.value).toBe(true);
-    });
-  });
-});
diff --git a/hermes-console-vue/src/composables/use-readiness/useReadiness.ts b/hermes-console-vue/src/composables/use-readiness/useReadiness.ts
deleted file mode 100644
index eacc258ea3..0000000000
--- a/hermes-console-vue/src/composables/use-readiness/useReadiness.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { computed, ref } from 'vue';
-import axios from 'axios';
-import type { DatacenterReadiness } from '@/api/datacenter-readiness';
-
-export function useReadiness() {
-  const datacentersReadiness = ref<DatacenterReadiness[]>();
-  const error = ref<boolean>(false);
-
-  const loading = computed(() => !error.value && !datacentersReadiness.value);
-
-  function fetchReadiness() {
-    axios
-      .get<DatacenterReadiness[]>('/readiness/datacenters')
-      .then((response) => (datacentersReadiness.value = response.data))
-      .catch(() => (error.value = true));
-  }
-
-  fetchReadiness();
-
-  return {
-    datacentersReadiness,
-    loading,
-    error,
-  };
-}
diff --git a/hermes-console-vue/src/dummy/groups.ts b/hermes-console-vue/src/dummy/groups.ts
new file mode 100644
index 0000000000..4bac63bce7
--- /dev/null
+++ b/hermes-console-vue/src/dummy/groups.ts
@@ -0,0 +1,33 @@
+import type { Group } from '@/composables/groups/use-groups/useGroups';
+
+export const dummyGroupNames = [
+  'pl.allegro.public.offer',
+  'pl.allegro.public.offer.product',
+  'pl.allegro.public.order',
+  'pl.allegro.public.user',
+  'pl.allegro.public.group',
+  'pl.allegro.public.admin',
+];
+
+export const dummyGroups: Group[] = [
+  {
+    name: 'pl.allegro.offer',
+    topics: ['pl.allegro.offer.OfferEventV1'],
+  },
+  {
+    name: 'pl.allegro.offer.product',
+    topics: [
+      'pl.allegro.offer.product.ProductEventV1',
+      'pl.allegro.offer.product.ProductEventV2',
+    ],
+  },
+  ...dummyGroupNames.slice(2).map((name) => ({ name, topics: [] })),
+];
+
+export const dummyGroup: Group = {
+  name: 'pl.allegro.offer.product',
+  topics: [
+    'pl.allegro.offer.product.ProductEventV1',
+    'pl.allegro.offer.product.ProductEventV2',
+  ],
+};
diff --git a/hermes-console-vue/src/dummy/topics.ts b/hermes-console-vue/src/dummy/topics.ts
new file mode 100644
index 0000000000..a1ec8cce88
--- /dev/null
+++ b/hermes-console-vue/src/dummy/topics.ts
@@ -0,0 +1,16 @@
+export const dummyTopicNames = [
+  'pl.allegro.public.offer.product.ProductEventV1',
+  'pl.allegro.public.offer.product.ProductEventV2',
+  'pl.allegro.public.offer.product.ProductEventV3',
+  'pl.allegro.public.offer.product.ProductEventV4',
+  'pl.allegro.public.offer.OfferEventV1',
+  'pl.allegro.public.offer.OfferEventV2',
+  'pl.allegro.public.offer.OfferEventV3',
+  'pl.allegro.public.order.OrderEventV1',
+  'pl.allegro.public.order.OrderEventV2',
+  'pl.allegro.public.user.UserCreatedEvent',
+  'pl.allegro.public.user.UserChangedEvent',
+  'pl.allegro.public.group.DummyEvent',
+  'pl.allegro.public.admin.AdminOfferActionEvent',
+  'pl.allegro.public.admin.AdminOrderActionEvent',
+];
diff --git a/hermes-console-vue/src/i18n/en-US.ts b/hermes-console-vue/src/i18n/en-US.ts
index 487731dc30..4d7a91f3b7 100644
--- a/hermes-console-vue/src/i18n/en-US.ts
+++ b/hermes-console-vue/src/i18n/en-US.ts
@@ -108,6 +108,54 @@ const en_US = {
       text: 'Could not fetch information about datacenters readiness',
     },
   },
+  groups: {
+    actions: {
+      create: 'New Group',
+      search: 'search…',
+    },
+    connectionError: {
+      title: 'Connection error',
+      text: 'Could not fetch topic groups',
+    },
+    groupBreadcrumbs: {
+      home: 'home',
+      groups: 'groups',
+    },
+    groupForm: {
+      cancel: 'Cancel',
+      edu:
+        'When creating a group please make sure that it complies with ' +
+        'general group standards and naming conventions. Ensure that ' +
+        'a group that meets your requirements does not already exist.',
+      groupName: 'Group name',
+      save: 'Save',
+      createTitle: 'Create group',
+      editTitle: 'Edit group',
+      validation: {
+        groupName: 'Group name must not be empty',
+      },
+    },
+    groupListing: {
+      index: '#',
+      name: 'Group name',
+      noGroups: 'No groups found',
+      topicsChip: 'topics: ',
+      appliedFilter: '(applied filter: “{filter}”)',
+    },
+    groupTopicsListing: {
+      index: '#',
+      name: 'Topic name',
+      noTopics: 'No topics found',
+      appliedFilter: '(applied filter: “{filter}”)',
+    },
+    heading: 'Groups',
+  },
+  groupTopics: {
+    groupTopicsBreadcrumbs: {
+      home: 'home',
+      groups: 'groups',
+    },
+  },
   topicView: {
     header: {
       topic: 'TOPIC',
diff --git a/hermes-console-vue/src/main.ts b/hermes-console-vue/src/main.ts
index caf772cb11..e5bb01ab7f 100644
--- a/hermes-console-vue/src/main.ts
+++ b/hermes-console-vue/src/main.ts
@@ -14,6 +14,7 @@ import router from './router';
 if (import.meta.env.DEV) {
   axios.defaults.baseURL = 'http://localhost:3000';
 }
+axios.defaults.timeout = 5000;
 
 const vuetify = createVuetify({
   theme: {
diff --git a/hermes-console-vue/src/mocks/handlers.ts b/hermes-console-vue/src/mocks/handlers.ts
index 756375faa5..d2dc108ec2 100644
--- a/hermes-console-vue/src/mocks/handlers.ts
+++ b/hermes-console-vue/src/mocks/handlers.ts
@@ -10,6 +10,9 @@ import {
   dummyTopicOwner,
 } from '@/dummy/topic';
 import { rest } from 'msw';
+import type { ConstraintsConfig } from '@/api/constraints';
+import type { ConsumerGroup } from '@/api/consumer-group';
+import type { DatacenterReadiness } from '@/api/datacenter-readiness';
 import type {
   MessagePreview,
   TopicMetrics,
@@ -171,3 +174,125 @@ export const successfulTopicHandlers = [
     subscription: secondDummySubscription,
   }),
 ];
+
+export const fetchConstraintsHandler = ({
+  constraints,
+}: {
+  constraints: ConstraintsConfig;
+}) =>
+  rest.get(`${url}/workload-constraints`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(constraints));
+  });
+
+export const fetchConstraintsErrorHandler = ({
+  errorCode = 500,
+}: {
+  errorCode?: number;
+}) =>
+  rest.get(`${url}/workload-constraints`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
+export const fetchReadinessHandler = ({
+  datacentersReadiness,
+}: {
+  datacentersReadiness: DatacenterReadiness[];
+}) =>
+  rest.get(`${url}/readiness/datacenters`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(datacentersReadiness));
+  });
+
+export const fetchReadinessErrorHandler = ({
+  errorCode = 500,
+}: {
+  errorCode?: number;
+}) =>
+  rest.get(`${url}/readiness/datacenters`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
+export const fetchConsumerGroupsHandler = ({
+  consumerGroups,
+  topicName,
+  subscriptionName,
+}: {
+  consumerGroups: ConsumerGroup[];
+  topicName: string;
+  subscriptionName: string;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/consumer-groups`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(consumerGroups));
+    },
+  );
+
+export const fetchConsumerGroupsErrorHandler = ({
+  errorCode = 500,
+  topicName,
+  subscriptionName,
+}: {
+  errorCode?: number;
+  topicName: string;
+  subscriptionName: string;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/consumer-groups`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const fetchInconsistentTopicsHandler = ({
+  topics,
+}: {
+  topics: string[];
+}) =>
+  rest.get(`${url}/consistency/inconsistencies/topics`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(topics));
+  });
+
+export const fetchInconsistentTopicsErrorHandler = ({
+  errorCode = 500,
+}: {
+  errorCode?: number;
+}) =>
+  rest.get(`${url}/consistency/inconsistencies/topics`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
+export const fetchTopicNamesHandler = ({
+  topicNames,
+}: {
+  topicNames: string[];
+}) =>
+  rest.get(`${url}/topics`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(topicNames));
+  });
+
+export const fetchTopicNamesErrorHandler = ({
+  errorCode = 500,
+}: {
+  errorCode?: number;
+}) =>
+  rest.get(`${url}/topics`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
+export const fetchGroupNamesHandler = ({
+  groupNames,
+}: {
+  groupNames: string[];
+}) =>
+  rest.get(`${url}/groups`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(groupNames));
+  });
+
+export const fetchGroupNamesErrorHandler = ({
+  errorCode = 500,
+}: {
+  errorCode?: number;
+}) =>
+  rest.get(`${url}/groups`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
diff --git a/hermes-console-vue/src/router/index.ts b/hermes-console-vue/src/router/index.ts
index 91c140d404..4587a92908 100644
--- a/hermes-console-vue/src/router/index.ts
+++ b/hermes-console-vue/src/router/index.ts
@@ -6,38 +6,48 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: () => import('../views/home/HomeView.vue'),
+      component: () => import('@/views/home/HomeView.vue'),
     },
     {
-      path: '/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId',
-      name: 'subscription',
-      component: () => import('../views/subscription/SubscriptionView.vue'),
+      path: '/groups',
+      name: 'groups',
+      component: () => import('@/views/groups/GroupsView.vue'),
+    },
+    {
+      path: '/groups/:groupId',
+      name: 'groupTopics',
+      component: () => import('@/views/group-topics/GroupTopicsView.vue'),
     },
     {
       path: '/groups/:groupId/topics/:topicName',
       name: 'topic',
       component: () => import('@/views/topic/TopicView.vue'),
     },
+    {
+      path: '/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId',
+      name: 'subscription',
+      component: () => import('@/views/subscription/SubscriptionView.vue'),
+    },
     {
       path: '/readiness/',
       name: 'readiness',
-      component: () => import('../views/admin/readiness/ReadinessView.vue'),
+      component: () => import('@/views/admin/readiness/ReadinessView.vue'),
     },
     {
       path: '/constraints/',
       name: 'constraints',
-      component: () => import('../views/admin/constraints/ConstraintsView.vue'),
+      component: () => import('@/views/admin/constraints/ConstraintsView.vue'),
     },
     {
       path: '/consistency/',
       name: 'consistency',
-      component: () => import('../views/admin/consistency/ConsistencyView.vue'),
+      component: () => import('@/views/admin/consistency/ConsistencyView.vue'),
     },
     {
       path: '/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId/diagnostics/',
       name: 'consumerGroups',
       component: () =>
-        import('../views/admin/consumer-groups/ConsumerGroupsView.vue'),
+        import('@/views/admin/consumer-groups/ConsumerGroupsView.vue'),
     },
   ],
 });
diff --git a/hermes-console-vue/src/views/admin/consistency/ConsistencyView.spec.ts b/hermes-console-vue/src/views/admin/consistency/ConsistencyView.spec.ts
index 75b56324c2..24e5f44b83 100644
--- a/hermes-console-vue/src/views/admin/consistency/ConsistencyView.spec.ts
+++ b/hermes-console-vue/src/views/admin/consistency/ConsistencyView.spec.ts
@@ -1,15 +1,20 @@
-import { computed, ref } from 'vue';
 import { dummyInconsistentTopics } from '@/dummy/inconsistentTopics';
+import { ref } from 'vue';
 import { render } from '@/utils/test-utils';
-import { useInconsistentTopics } from '@/composables/use-inconsistent-topics/useInconsistentTopics';
+import { useInconsistentTopics } from '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics';
 import ConsistencyView from '@/views/admin/consistency/ConsistencyView.vue';
-
-vi.mock('@/composables/use-inconsistent-topics/useInconsistentTopics');
-
-const useInconsistentTopicsStub: ReturnType<typeof useInconsistentTopics> = {
-  topics: computed(() => dummyInconsistentTopics),
-  error: ref(false),
-  loading: computed(() => false),
+import type { UseInconsistentTopics } from '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics';
+
+vi.mock(
+  '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics',
+);
+
+const useInconsistentTopicsStub: UseInconsistentTopics = {
+  topics: ref(dummyInconsistentTopics),
+  error: ref({
+    fetchInconsistentTopics: null,
+  }),
+  loading: ref(false),
 };
 
 describe('ConsistencyView', () => {
@@ -31,7 +36,7 @@ describe('ConsistencyView', () => {
     // given
     vi.mocked(useInconsistentTopics).mockReturnValueOnce({
       ...useInconsistentTopicsStub,
-      loading: computed(() => true),
+      loading: ref(true),
     });
 
     // when
@@ -46,7 +51,7 @@ describe('ConsistencyView', () => {
     // given
     vi.mocked(useInconsistentTopics).mockReturnValueOnce({
       ...useInconsistentTopicsStub,
-      loading: computed(() => false),
+      loading: ref(false),
     });
 
     // when
@@ -61,8 +66,8 @@ describe('ConsistencyView', () => {
     // given
     vi.mocked(useInconsistentTopics).mockReturnValueOnce({
       ...useInconsistentTopicsStub,
-      loading: computed(() => false),
-      error: ref(true),
+      loading: ref(false),
+      error: ref({ fetchInconsistentTopics: new Error() }),
     });
 
     // when
@@ -78,8 +83,8 @@ describe('ConsistencyView', () => {
     // given
     vi.mocked(useInconsistentTopics).mockReturnValueOnce({
       ...useInconsistentTopicsStub,
-      loading: computed(() => false),
-      error: ref(false),
+      loading: ref(false),
+      error: ref({ fetchInconsistentTopics: null }),
     });
 
     // when
diff --git a/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue b/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue
index 9a2d291bbf..e975050698 100644
--- a/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue
+++ b/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useI18n } from 'vue-i18n';
-  import { useInconsistentTopics } from '@/composables/use-inconsistent-topics/useInconsistentTopics';
+  import { useInconsistentTopics } from '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import InconsistentTopicsListing from '@/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue';
   import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
@@ -29,7 +29,7 @@
         <v-breadcrumbs :items="breadcrumbsItems" density="compact" />
         <loading-spinner v-if="loading" />
         <console-alert
-          v-if="error"
+          v-if="error.fetchInconsistentTopics"
           :title="$t('consistency.connectionError.title')"
           :text="$t('consistency.connectionError.text')"
           type="error"
diff --git a/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.spec.ts b/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.spec.ts
index afe16ca846..89841f9a02 100644
--- a/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.spec.ts
+++ b/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.spec.ts
@@ -60,10 +60,22 @@ describe('ConstraintsListing', () => {
 
     // then
     expect(rows).toHaveLength(2);
-    expect(within(rows[0]!).getByText(/index/)).toBeVisible();
-    expect(within(rows[0]!).getByText(/name/)).toBeVisible();
-    expect(within(rows[1]!).getByText(/noTopics/)).toBeVisible();
-    expect(within(rows[1]!).getByText(/appliedFilter/)).toBeVisible();
+    expect(
+      within(rows[0]!).getByText(
+        'consistency.inconsistentTopics.listing.index',
+      ),
+    ).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('consistency.inconsistentTopics.listing.name'),
+    ).toBeVisible();
+    expect(
+      within(rows[1]!).getByText(/consistency.inconsistentTopics.noTopics/),
+    ).toBeVisible();
+    expect(
+      within(rows[1]!).getByText(
+        /consistency.inconsistentTopics.appliedFilter/,
+      ),
+    ).toBeVisible();
   });
 
   it('should render an empty inconsistent topics listing without filter applied', () => {
@@ -79,9 +91,13 @@ describe('ConstraintsListing', () => {
 
     // then
     expect(rows).toHaveLength(2);
-    expect(within(rows[1]!).getByText(/noTopics/)).toBeVisible();
     expect(
-      within(rows[1]!).queryByText(/appliedFilter/),
+      within(rows[1]!).getByText('consistency.inconsistentTopics.noTopics'),
+    ).toBeVisible();
+    expect(
+      within(rows[1]!).queryByText(
+        'consistency.inconsistentTopics.appliedFilter',
+      ),
     ).not.toBeInTheDocument();
   });
 });
diff --git a/hermes-console-vue/src/views/admin/constraints/ConstraintsView.spec.ts b/hermes-console-vue/src/views/admin/constraints/ConstraintsView.spec.ts
index 8823a26a47..e2e4857439 100644
--- a/hermes-console-vue/src/views/admin/constraints/ConstraintsView.spec.ts
+++ b/hermes-console-vue/src/views/admin/constraints/ConstraintsView.spec.ts
@@ -1,18 +1,19 @@
-import { computed, ref } from 'vue';
 import { dummyConstraints } from '@/dummy/constraints';
+import { ref } from 'vue';
 import { render } from '@/utils/test-utils';
-import { useConstraints } from '@/composables/use-constraints/useConstraints';
+import { useConstraints } from '@/composables/constraints/use-constraints/useConstraints';
 import ConstraintsView from '@/views/admin/constraints/ConstraintsView.vue';
+import type { UseConstraints } from '@/composables/constraints/use-constraints/useConstraints';
 
-vi.mock('@/composables/use-constraints/useConstraints');
+vi.mock('@/composables/constraints/use-constraints/useConstraints');
 
-const useConstraintsStub: ReturnType<typeof useConstraints> = {
-  topicConstraints: computed(() => dummyConstraints.topicConstraints),
-  subscriptionConstraints: computed(
-    () => dummyConstraints.subscriptionConstraints,
-  ),
-  loading: computed(() => false),
-  error: ref(false),
+const useConstraintsStub: UseConstraints = {
+  topicConstraints: ref(dummyConstraints.topicConstraints),
+  subscriptionConstraints: ref(dummyConstraints.subscriptionConstraints),
+  loading: ref(false),
+  error: ref({
+    fetchConstraints: null,
+  }),
 };
 
 describe('ConstraintsView', () => {
@@ -35,7 +36,7 @@ describe('ConstraintsView', () => {
     // given
     vi.mocked(useConstraints).mockReturnValueOnce({
       ...useConstraintsStub,
-      loading: computed(() => true),
+      loading: ref(true),
     });
 
     // when
@@ -50,7 +51,7 @@ describe('ConstraintsView', () => {
     // given
     vi.mocked(useConstraints).mockReturnValueOnce({
       ...useConstraintsStub,
-      loading: computed(() => false),
+      loading: ref(false),
     });
 
     // when
@@ -65,8 +66,8 @@ describe('ConstraintsView', () => {
     // given
     vi.mocked(useConstraints).mockReturnValueOnce({
       ...useConstraintsStub,
-      loading: computed(() => false),
-      error: ref(true),
+      loading: ref(false),
+      error: ref({ fetchConstraints: new Error() }),
     });
 
     // when
@@ -82,8 +83,8 @@ describe('ConstraintsView', () => {
     // given
     vi.mocked(useConstraints).mockReturnValueOnce({
       ...useConstraintsStub,
-      loading: computed(() => false),
-      error: ref(false),
+      loading: ref(false),
+      error: ref({ fetchConstraints: null }),
     });
 
     // when
diff --git a/hermes-console-vue/src/views/admin/constraints/ConstraintsView.vue b/hermes-console-vue/src/views/admin/constraints/ConstraintsView.vue
index 227a416cbb..115902eac6 100644
--- a/hermes-console-vue/src/views/admin/constraints/ConstraintsView.vue
+++ b/hermes-console-vue/src/views/admin/constraints/ConstraintsView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useConstraints } from '@/composables/use-constraints/useConstraints';
+  import { useConstraints } from '@/composables/constraints/use-constraints/useConstraints';
   import { useI18n } from 'vue-i18n';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import ConstraintsListing from '@/views/admin/constraints/constraints-listing/ConstraintsListing.vue';
@@ -31,7 +31,7 @@
         <v-breadcrumbs :items="breadcrumbsItems" density="compact" />
         <loading-spinner v-if="loading" />
         <console-alert
-          v-if="error"
+          v-if="error.fetchConstraints"
           :title="$t('constraints.connectionError.title')"
           :text="$t('constraints.connectionError.text')"
           type="error"
diff --git a/hermes-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.spec.ts b/hermes-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.spec.ts
index 6bde259990..ea77467c51 100644
--- a/hermes-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.spec.ts
+++ b/hermes-console-vue/src/views/admin/constraints/constraints-listing/ConstraintsListing.spec.ts
@@ -81,10 +81,18 @@ describe('ConstraintsListing', () => {
 
     // then
     expect(rows).toHaveLength(2);
-    expect(within(rows[0]!).getByText(/index/)).toBeVisible();
-    expect(within(rows[0]!).getByText(/name/)).toBeVisible();
-    expect(within(rows[1]!).getByText(/noConstraints/)).toBeVisible();
-    expect(within(rows[1]!).getByText(/appliedFilter/)).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('constraints.listing.index'),
+    ).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('constraints.listing.name'),
+    ).toBeVisible();
+    expect(
+      within(rows[1]!).getByText(/constraints.listing.noConstraints/),
+    ).toBeVisible();
+    expect(
+      within(rows[1]!).getByText(/constraints.listing.appliedFilter/),
+    ).toBeVisible();
   });
 
   it('should render an empty constraint listing without filter applied', () => {
@@ -98,9 +106,11 @@ describe('ConstraintsListing', () => {
 
     // then
     expect(rows).toHaveLength(2);
-    expect(within(rows[1]!).getByText(/noConstraints/)).toBeVisible();
     expect(
-      within(rows[1]!).queryByText(/appliedFilter/),
+      within(rows[1]!).getByText('constraints.listing.noConstraints'),
+    ).toBeVisible();
+    expect(
+      within(rows[1]!).queryByText('constraints.listing.appliedFilter'),
     ).not.toBeInTheDocument();
   });
 });
diff --git a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts
index 3bbd3b9a79..92fddcf7f7 100644
--- a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts
+++ b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.spec.ts
@@ -1,17 +1,20 @@
 import { beforeEach } from 'vitest';
-import { computed, ref } from 'vue';
 import { dummyConsumerGroups } from '@/dummy/consumerGroups';
+import { ref } from 'vue';
 import { render } from '@/utils/test-utils';
-import { useConsumerGroups } from '@/composables/use-consumer-groups/useConsumerGroups';
+import { useConsumerGroups } from '@/composables/consumer-groups/use-consumer-groups/useConsumerGroups';
 import ConsumerGroupsView from '@/views/admin/consumer-groups/ConsumerGroupsView.vue';
 import router from '@/router';
+import type { UseConsumerGroups } from '@/composables/consumer-groups/use-consumer-groups/useConsumerGroups';
 
-vi.mock('@/composables/use-consumer-groups/useConsumerGroups');
+vi.mock('@/composables/consumer-groups/use-consumer-groups/useConsumerGroups');
 
-const useConsumerGroupsStub: ReturnType<typeof useConsumerGroups> = {
+const useConsumerGroupsStub: UseConsumerGroups = {
   consumerGroups: ref(dummyConsumerGroups),
-  loading: computed(() => false),
-  error: ref(false),
+  loading: ref(false),
+  error: ref({
+    fetchConsumerGroups: null,
+  }),
 };
 
 describe('ConsumerGroupsView', () => {
@@ -40,7 +43,7 @@ describe('ConsumerGroupsView', () => {
     // given
     vi.mocked(useConsumerGroups).mockReturnValueOnce({
       ...useConsumerGroupsStub,
-      loading: computed(() => true),
+      loading: ref(true),
     });
 
     // when
@@ -55,7 +58,7 @@ describe('ConsumerGroupsView', () => {
     // given
     vi.mocked(useConsumerGroups).mockReturnValueOnce({
       ...useConsumerGroupsStub,
-      loading: computed(() => false),
+      loading: ref(false),
     });
 
     // when
@@ -70,8 +73,8 @@ describe('ConsumerGroupsView', () => {
     // given
     vi.mocked(useConsumerGroups).mockReturnValueOnce({
       ...useConsumerGroupsStub,
-      loading: computed(() => false),
-      error: ref(true),
+      loading: ref(false),
+      error: ref({ fetchConsumerGroups: new Error() }),
     });
 
     // when
@@ -87,8 +90,8 @@ describe('ConsumerGroupsView', () => {
     // given
     vi.mocked(useConsumerGroups).mockReturnValueOnce({
       ...useConsumerGroupsStub,
-      loading: computed(() => false),
-      error: ref(false),
+      loading: ref(false),
+      error: ref({ fetchConsumerGroups: null }),
     });
 
     // when
diff --git a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue
index 69fee6db6a..0ff82c04cb 100644
--- a/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue
+++ b/hermes-console-vue/src/views/admin/consumer-groups/ConsumerGroupsView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { useConsumerGroups } from '@/composables/use-consumer-groups/useConsumerGroups';
+  import { useConsumerGroups } from '@/composables/consumer-groups/use-consumer-groups/useConsumerGroups';
   import { useI18n } from 'vue-i18n';
   import { useRoute } from 'vue-router';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
@@ -24,19 +24,19 @@
     },
     {
       title: t('consumerGroups.breadcrumbs.groups'),
-      href: '/groups',
+      href: '/#/groups',
     },
     {
       title: groupId,
-      href: `/groups/${groupId}`,
+      href: `/#/groups/${groupId}`,
     },
     {
       title: topicId,
-      href: `/groups/${groupId}/topics/${topicId}`,
+      href: `/#/groups/${groupId}/topics/${topicId}`,
     },
     {
       title: subscriptionId,
-      href: `/groups/${groupId}/topics/${topicId}/subscriptions/${subscriptionId}`,
+      href: `/#/groups/${groupId}/topics/${topicId}/subscriptions/${subscriptionId}`,
     },
     {
       title: t('consumerGroups.breadcrumbs.title'),
@@ -51,7 +51,7 @@
         <v-breadcrumbs :items="breadcrumbsItems" density="compact" />
         <loading-spinner v-if="loading" />
         <console-alert
-          v-if="error"
+          v-if="error.fetchConsumerGroups"
           :title="$t('consumerGroups.connectionError.title')"
           :text="$t('consumerGroups.connectionError.text')"
           type="error"
@@ -77,7 +77,10 @@
         </v-card>
       </v-col>
     </v-row>
-    <consumer-groups-table :consumer-groups="consumerGroups" />
+    <consumer-groups-table
+      v-if="consumerGroups"
+      :consumer-groups="consumerGroups"
+    />
   </v-container>
 </template>
 
diff --git a/hermes-console-vue/src/views/admin/consumer-groups/consumer-group-member/ConsumerGroupMembers.spec.ts b/hermes-console-vue/src/views/admin/consumer-groups/consumer-group-member/ConsumerGroupMembers.spec.ts
index a95ec2369b..8dca9207a7 100644
--- a/hermes-console-vue/src/views/admin/consumer-groups/consumer-group-member/ConsumerGroupMembers.spec.ts
+++ b/hermes-console-vue/src/views/admin/consumer-groups/consumer-group-member/ConsumerGroupMembers.spec.ts
@@ -14,11 +14,21 @@ describe('ConsumerGroupMembers', () => {
 
     // then
     expect(rows).toHaveLength(4);
-    expect(within(rows[0]!).getByText(/type/)).toBeVisible();
-    expect(within(rows[0]!).getByText(/partition/)).toBeVisible();
-    expect(within(rows[0]!).getByText(/currentOffset/)).toBeVisible();
-    expect(within(rows[0]!).getByText(/endOffset/)).toBeVisible();
-    expect(within(rows[0]!).getByText(/lag/)).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('consumerGroups.listing.type'),
+    ).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('consumerGroups.listing.partition'),
+    ).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('consumerGroups.listing.currentOffset'),
+    ).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('consumerGroups.listing.endOffset'),
+    ).toBeVisible();
+    expect(
+      within(rows[0]!).getByText('consumerGroups.listing.lag'),
+    ).toBeVisible();
 
     props.members.forEach((member, index) => {
       expect(
diff --git a/hermes-console-vue/src/views/admin/readiness/ReadinessView.spec.ts b/hermes-console-vue/src/views/admin/readiness/ReadinessView.spec.ts
index 0753fe7e1c..315b339bd8 100644
--- a/hermes-console-vue/src/views/admin/readiness/ReadinessView.spec.ts
+++ b/hermes-console-vue/src/views/admin/readiness/ReadinessView.spec.ts
@@ -1,15 +1,18 @@
 import { computed, ref } from 'vue';
 import { dummyDatacentersReadiness } from '@/dummy/readiness';
 import { render } from '@/utils/test-utils';
-import { useReadiness } from '@/composables/use-readiness/useReadiness';
+import { useReadiness } from '@/composables/readiness/use-readiness/useReadiness';
 import ReadinessView from '@/views/admin/readiness/ReadinessView.vue';
+import type { UseReadiness } from '@/composables/readiness/use-readiness/useReadiness';
 
-vi.mock('@/composables/use-readiness/useReadiness');
+vi.mock('@/composables/readiness/use-readiness/useReadiness');
 
-const useReadinessStub: ReturnType<typeof useReadiness> = {
+const useReadinessStub: UseReadiness = {
   datacentersReadiness: ref(dummyDatacentersReadiness),
-  error: ref(false),
-  loading: computed(() => false),
+  error: ref({
+    fetchReadiness: null,
+  }),
+  loading: ref(false),
 };
 
 describe('ReadinessView', () => {
@@ -60,7 +63,7 @@ describe('ReadinessView', () => {
     vi.mocked(useReadiness).mockReturnValueOnce({
       ...useReadinessStub,
       loading: computed(() => false),
-      error: ref(true),
+      error: ref({ fetchReadiness: new Error() }),
     });
 
     // when
@@ -77,7 +80,7 @@ describe('ReadinessView', () => {
     vi.mocked(useReadiness).mockReturnValueOnce({
       ...useReadinessStub,
       loading: computed(() => false),
-      error: ref(false),
+      error: ref({ fetchReadiness: null }),
     });
 
     // when
diff --git a/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue b/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue
index 612e58a794..0b127b0e78 100644
--- a/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue
+++ b/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { useI18n } from 'vue-i18n';
-  import { useReadiness } from '@/composables/use-readiness/useReadiness';
+  import { useReadiness } from '@/composables/readiness/use-readiness/useReadiness';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
 
@@ -26,14 +26,14 @@
         <v-breadcrumbs :items="breadcrumbsItems" density="compact" />
         <loading-spinner v-if="loading" />
         <console-alert
-          v-if="error"
+          v-if="error.fetchReadiness"
           :title="$t('readiness.connectionError.title')"
           :text="$t('readiness.connectionError.text')"
           type="error"
         />
       </v-col>
     </v-row>
-    <v-container v-if="!loading && !error">
+    <v-container v-if="!loading && !error.fetchReadiness">
       <v-row dense>
         <v-col md="12">
           <p class="text-h4 font-weight-bold mb-3">
diff --git a/hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts b/hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts
new file mode 100644
index 0000000000..b4683a114c
--- /dev/null
+++ b/hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts
@@ -0,0 +1,94 @@
+import { dummyGroups } from '@/dummy/groups';
+import { ref } from 'vue';
+import { render } from '@/utils/test-utils';
+import { useGroups } from '@/composables/groups/use-groups/useGroups';
+import GroupTopicsView from '@/views/group-topics/GroupTopicsView.vue';
+import type { UseGroups } from '@/composables/groups/use-groups/useGroups';
+
+vi.mock('@/composables/groups/use-groups/useGroups');
+
+const useGroupsStub: UseGroups = {
+  groups: ref(dummyGroups),
+  loading: ref(false),
+  error: ref({
+    fetchTopicNames: null,
+    fetchGroupNames: null,
+  }),
+};
+
+describe('GroupTopicsView', () => {
+  it('should render if data was successfully fetched', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce(useGroupsStub);
+
+    // when
+    const { getByText } = render(GroupTopicsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(getByText('groups.actions.search')).toBeVisible();
+  });
+
+  it('should show loading spinner when fetching data', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(true),
+    });
+
+    // when
+    const { queryByTestId } = render(GroupTopicsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByTestId('loading-spinner')).toBeVisible();
+  });
+
+  it('should hide loading spinner when data fetch is complete', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(false),
+    });
+
+    // when
+    const { queryByTestId } = render(GroupTopicsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByTestId('loading-spinner')).not.toBeInTheDocument();
+  });
+
+  it('should show error message when fetching data failed', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(false),
+      error: ref({ fetchTopicNames: new Error(), fetchGroupNames: null }),
+    });
+
+    // when
+    const { queryByText } = render(GroupTopicsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByText('groups.connectionError.title')).toBeVisible();
+    expect(queryByText('groups.connectionError.text')).toBeVisible();
+  });
+
+  it('should not show error message when data was fetch successfully', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(false),
+      error: ref({ fetchTopicNames: null, fetchGroupNames: null }),
+    });
+
+    // when
+    const { queryByText } = render(GroupTopicsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByText('groups.connectionError.title')).not.toBeInTheDocument();
+  });
+});
diff --git a/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue b/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
new file mode 100644
index 0000000000..f8910ce297
--- /dev/null
+++ b/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+  import { useGroups } from '@/composables/groups/use-groups/useGroups';
+  import { useI18n } from 'vue-i18n';
+  import { useRoute } from 'vue-router';
+  import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
+  import GroupTopicsListing from '@/views/group-topics/group-topics-listing/GroupTopicsListing.vue';
+  import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
+
+  const route = useRoute();
+  const params = route.params as Record<string, string>;
+  const { groupId } = params;
+  const { t } = useI18n();
+
+  const { groups, loading, error } = useGroups();
+
+  const filter = ref<string>();
+
+  const group = computed(() => {
+    return (groups.value || [])?.find((i) => i.name === groupId);
+  });
+
+  const breadcrumbsItems = [
+    {
+      title: t('subscription.subscriptionBreadcrumbs.home'),
+      href: '/',
+    },
+    {
+      title: t('subscription.subscriptionBreadcrumbs.groups'),
+      href: '/#/groups',
+    },
+    {
+      title: groupId,
+      href: `/#/groups/${groupId}`,
+    },
+  ];
+</script>
+
+<template>
+  <v-container>
+    <v-row dense>
+      <v-col md="12">
+        <v-breadcrumbs :items="breadcrumbsItems" />
+        <loading-spinner v-if="loading" />
+        <console-alert
+          v-if="error.fetchTopicNames || error.fetchGroupNames"
+          :title="t('groups.connectionError.title')"
+          :text="t('groups.connectionError.text')"
+          type="error"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col md="12">
+        <v-card density="compact">
+          <v-card-item>
+            <p class="text-overline">Group</p>
+            <p class="text-h4 font-weight-bold mb-2">
+              {{ groupId }}
+            </p>
+          </v-card-item>
+        </v-card>
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col md="12">
+        <v-text-field
+          single-line
+          :label="t('groups.actions.search')"
+          density="compact"
+          v-model="filter"
+          prepend-inner-icon="mdi-magnify"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col md="12">
+        <group-topics-listing
+          v-if="group && group.topics.length > 0"
+          :group="group"
+          :filter="filter"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.spec.ts b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.spec.ts
new file mode 100644
index 0000000000..093ce7c0d0
--- /dev/null
+++ b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.spec.ts
@@ -0,0 +1,82 @@
+import { dummyGroup } from '@/dummy/groups';
+import { render } from '@/utils/test-utils';
+import { within } from '@testing-library/vue';
+import GroupTopicsListing from '@/views/group-topics/group-topics-listing/GroupTopicsListing.vue';
+
+describe('GroupTopicsListing', () => {
+  it('should render group topics listing with no filter applied', () => {
+    // given
+    const props = {
+      group: dummyGroup,
+    };
+
+    // when
+    const { getByText } = render(GroupTopicsListing, { props });
+
+    // then
+    dummyGroup.topics.forEach((name, index) => {
+      const topicRow = getByText(name).closest('tr')!;
+      expect(within(topicRow).getByText(`${index + 1}`)).toBeInTheDocument();
+      expect(within(topicRow).getByText(name)).toBeInTheDocument();
+    });
+  });
+
+  it('should render group topics listing with a filter applied', () => {
+    // given
+    const props = {
+      group: dummyGroup,
+      filter: 'V1',
+    };
+
+    // when
+    const topics = render(GroupTopicsListing, { props })
+      .getAllByText(/ProductEventV1/)
+      .map((topic) => topic.closest('tr'));
+
+    // then
+    expect(topics).toHaveLength(1);
+  });
+
+  it('should render group topics listing with a filter applied (no results)', () => {
+    // given
+    const props = {
+      groups: dummyGroup,
+      filter: 'pl.allegro.i18n.DummyEventV1',
+    };
+
+    // when
+    const rows = render(GroupTopicsListing, { props }).getAllByRole('row');
+
+    // then
+    expect(rows).toHaveLength(2);
+    expect(within(rows[0]!).getByText(/index/)).toBeInTheDocument();
+    expect(
+      within(rows[0]!).getByText('groups.groupTopicsListing.name'),
+    ).toBeInTheDocument();
+    expect(
+      within(rows[1]!).getByText(/groups.groupTopicsListing.noTopics/),
+    ).toBeInTheDocument();
+    expect(
+      within(rows[1]!).getByText(/groups.groupTopicsListing.appliedFilter/),
+    ).toBeInTheDocument();
+  });
+
+  it('should render an empty group topics listing without filter applied', () => {
+    // given
+    const props = {
+      groups: [],
+    };
+
+    // when
+    const rows = render(GroupTopicsListing, { props }).getAllByRole('row');
+
+    // then
+    expect(rows).toHaveLength(2);
+    expect(
+      within(rows[1]!).getByText('groups.groupTopicsListing.noTopics'),
+    ).toBeInTheDocument();
+    expect(
+      within(rows[1]!).queryByText('groups.groupTopicsListing.appliedFilter'),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue
new file mode 100644
index 0000000000..c57b291e90
--- /dev/null
+++ b/hermes-console-vue/src/views/group-topics/group-topics-listing/GroupTopicsListing.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import type { Group } from '@/composables/groups/use-groups/useGroups';
+
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    group?: Group;
+    filter?: string;
+  }>();
+
+  const filteredTopics = computed(() => {
+    return (props.group?.topics ?? []).filter(
+      (topic) => !props.filter || topic.includes(props.filter),
+    );
+  });
+
+  function onTopicClick(topicName: string) {
+    router.push({ path: `/groups/${props.group?.name}/topics/${topicName}` });
+  }
+</script>
+
+<template>
+  <v-card class="mb-2">
+    <v-table density="comfortable" hover>
+      <thead>
+        <tr>
+          <th>{{ t('groups.groupTopicsListing.index') }}</th>
+          <th>{{ t('groups.groupTopicsListing.name') }}</th>
+        </tr>
+      </thead>
+      <tbody v-if="filteredTopics.length > 0">
+        <tr
+          v-for="(topic, index) in filteredTopics"
+          :key="topic"
+          class="topics-table__row"
+          @click="onTopicClick(topic)"
+        >
+          <td class="text-medium-emphasis">
+            {{ index + 1 }}
+          </td>
+          <td class="font-weight-medium">
+            {{ topic }}
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-else>
+        <tr>
+          <th colspan="3" class="text-center text-medium-emphasis">
+            {{ t('groups.groupTopicsListing.noTopics') }}
+            <template v-if="filter">
+              {{ t('groups.groupTopicsListing.appliedFilter', { filter }) }}
+            </template>
+          </th>
+        </tr>
+      </tbody>
+    </v-table>
+  </v-card>
+</template>
+
+<style scoped lang="scss">
+  .topics-table__row:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/hermes-console-vue/src/views/groups/GroupsView.spec.ts b/hermes-console-vue/src/views/groups/GroupsView.spec.ts
new file mode 100644
index 0000000000..2fed90f130
--- /dev/null
+++ b/hermes-console-vue/src/views/groups/GroupsView.spec.ts
@@ -0,0 +1,123 @@
+import { dummyGroups } from '@/dummy/groups';
+import { fireEvent, waitFor } from '@testing-library/vue';
+import { ref } from 'vue';
+import { render } from '@/utils/test-utils';
+import { useGroups } from '@/composables/groups/use-groups/useGroups';
+import GroupsView from '@/views/groups/GroupsView.vue';
+import type { UseGroups } from '@/composables/groups/use-groups/useGroups';
+
+vi.mock('@/composables/groups/use-groups/useGroups');
+
+const useGroupsStub: UseGroups = {
+  groups: ref(dummyGroups),
+  loading: ref(false),
+  error: ref({
+    fetchTopicNames: null,
+    fetchGroupNames: null,
+  }),
+};
+
+describe('GroupsView', () => {
+  it('should render', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce(useGroupsStub);
+
+    // when
+    const { getByText } = render(GroupsView);
+
+    // then
+    expect(getByText('groups.heading')).toBeInTheDocument();
+    expect(getByText('groups.actions.create')).toBeInTheDocument();
+  });
+
+  it('should open modal on `new group` button click', async () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce(useGroupsStub);
+
+    // given
+    const { getByText } = render(GroupsView);
+
+    // when
+    await fireEvent.click(getByText('groups.actions.create')!);
+
+    // then
+    await waitFor(() => {
+      expect(getByText('groups.groupForm.createTitle')).toBeInTheDocument();
+    });
+  });
+
+  it('should render if data was successfully fetched', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce(useGroupsStub);
+
+    // when
+    const { getByText } = render(GroupsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(getByText('groups.actions.search')).toBeVisible();
+  });
+
+  it('should show loading spinner when fetching data', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(true),
+    });
+
+    // when
+    const { queryByTestId } = render(GroupsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByTestId('loading-spinner')).toBeVisible();
+  });
+
+  it('should hide loading spinner when data fetch is complete', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(false),
+    });
+
+    // when
+    const { queryByTestId } = render(GroupsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByTestId('loading-spinner')).not.toBeInTheDocument();
+  });
+
+  it('should show error message when fetching data failed', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(false),
+      error: ref({ fetchTopicNames: new Error(), fetchGroupNames: null }),
+    });
+
+    // when
+    const { queryByText } = render(GroupsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByText('groups.connectionError.title')).toBeVisible();
+    expect(queryByText('groups.connectionError.text')).toBeVisible();
+  });
+
+  it('should not show error message when data was fetch successfully', () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce({
+      ...useGroupsStub,
+      loading: ref(false),
+      error: ref({ fetchTopicNames: null, fetchGroupNames: null }),
+    });
+
+    // when
+    const { queryByText } = render(GroupsView);
+
+    // then
+    expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
+    expect(queryByText('groups.connectionError.title')).not.toBeInTheDocument();
+  });
+});
diff --git a/hermes-console-vue/src/views/groups/GroupsView.vue b/hermes-console-vue/src/views/groups/GroupsView.vue
new file mode 100644
index 0000000000..199f26963f
--- /dev/null
+++ b/hermes-console-vue/src/views/groups/GroupsView.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useGroups } from '@/composables/groups/use-groups/useGroups';
+  import { useI18n } from 'vue-i18n';
+  import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
+  import GroupForm from '@/views/groups/group-form/GroupForm.vue';
+  import GroupListing from '@/views/groups/group-listing/GroupListing.vue';
+  import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
+
+  const { groups, loading, error } = useGroups();
+  const { t } = useI18n();
+
+  const filter = ref<string>();
+  const createGroupDialogOpen = ref(false);
+  const breadcrumbsItems = [
+    {
+      title: t('subscription.subscriptionBreadcrumbs.home'),
+      href: '/',
+    },
+    {
+      title: t('subscription.subscriptionBreadcrumbs.groups'),
+      href: '/#/groups',
+    },
+  ];
+</script>
+
+<template>
+  <v-container>
+    <v-row dense>
+      <v-col md="12">
+        <v-breadcrumbs :items="breadcrumbsItems" density="compact" />
+        <loading-spinner v-if="loading" />
+        <console-alert
+          v-if="error.fetchGroupNames || error.fetchTopicNames"
+          :title="t('groups.connectionError.title')"
+          :text="t('groups.connectionError.text')"
+          type="error"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col md="10">
+        <p class="text-h4 font-weight-bold mb-3">
+          {{ t('groups.heading') }}
+        </p>
+      </v-col>
+      <v-col md="2">
+        <v-btn
+          prepend-icon="mdi-folder-plus-outline"
+          color="secondary"
+          block
+          @click="createGroupDialogOpen = true"
+        >
+          {{ t('groups.actions.create') }}
+        </v-btn>
+        <group-form
+          operation="create"
+          v-model:dialog-open="createGroupDialogOpen"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col md="12">
+        <v-text-field
+          single-line
+          :label="t('groups.actions.search')"
+          density="compact"
+          v-model="filter"
+          prepend-inner-icon="mdi-magnify"
+        />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col md="12">
+        <group-listing
+          v-if="groups && groups.length > 0"
+          :groups="groups"
+          :filter="filter"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/hermes-console-vue/src/views/groups/group-form/GroupForm.spec.ts b/hermes-console-vue/src/views/groups/group-form/GroupForm.spec.ts
new file mode 100644
index 0000000000..8310f4c0aa
--- /dev/null
+++ b/hermes-console-vue/src/views/groups/group-form/GroupForm.spec.ts
@@ -0,0 +1,92 @@
+import { fireEvent, waitFor } from '@testing-library/vue';
+import { render } from '@/utils/test-utils';
+import GroupForm from '@/views/groups/group-form/GroupForm.vue';
+
+describe('GroupForm', () => {
+  it('should render form (create variant)', () => {
+    // given
+    const props = {
+      dialogOpen: true,
+      operation: 'create',
+    };
+
+    // when
+    const { queryByText } = render(GroupForm, { props });
+
+    // then
+    expect(queryByText('groups.groupForm.createTitle')).toBeInTheDocument();
+    expect(queryByText('groups.groupForm.edu')).toBeInTheDocument();
+  });
+
+  it('should render form (edit variant)', () => {
+    // given
+    const props = {
+      dialogOpen: true,
+      operation: 'edit',
+    };
+
+    // when
+    const { queryByText } = render(GroupForm, { props });
+
+    // then
+    expect(queryByText('groups.groupForm.editTitle')).toBeInTheDocument();
+    expect(queryByText('groups.groupForm.edu')).not.toBeInTheDocument();
+  });
+
+  it('should not show name validation error for untouched form', () => {
+    // given
+    const props = {
+      dialogOpen: true,
+      operation: 'create',
+    };
+
+    // when
+    const { queryByText } = render(GroupForm, { props });
+
+    // then
+    expect(
+      queryByText('groups.groupForm.validation.groupName'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should show name validation error after invalid form submit', async () => {
+    // given
+    const props = {
+      dialogOpen: true,
+      operation: 'create',
+    };
+
+    // when
+    const { getByText } = render(GroupForm, { props });
+    await fireEvent.click(getByText('groups.groupForm.save'));
+
+    // then
+    await waitFor(() => {
+      expect(
+        getByText('groups.groupForm.validation.groupName'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should not show name validation error for valid group name', async () => {
+    // given
+    const props = {
+      dialogOpen: true,
+      operation: 'create',
+    };
+
+    // when
+    const { getByLabelText, queryByText } = render(GroupForm, { props });
+
+    await fireEvent.update(
+      getByLabelText('groups.groupForm.groupName'),
+      'pl.allegro.sample',
+    );
+    await fireEvent.click(queryByText('groups.groupForm.save')!);
+
+    // then
+    expect(
+      queryByText('groups.groupForm.validation.groupName'),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/hermes-console-vue/src/views/groups/group-form/GroupForm.vue b/hermes-console-vue/src/views/groups/group-form/GroupForm.vue
new file mode 100644
index 0000000000..f41205ade6
--- /dev/null
+++ b/hermes-console-vue/src/views/groups/group-form/GroupForm.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+  import { useI18n } from 'vue-i18n';
+  import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
+
+  const props = defineProps<{
+    dialogOpen: boolean;
+    operation: 'create' | 'edit';
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'update:dialogOpen', dialog: boolean): void;
+  }>();
+
+  const { t } = useI18n();
+
+  const groupNameRules = [
+    (value: string) => {
+      if (value) return true;
+      return t('groups.groupForm.validation.groupName');
+    },
+  ];
+</script>
+
+<template>
+  <v-dialog
+    :model-value="props.dialogOpen"
+    @update:model-value="(value) => emit('update:dialogOpen', value)"
+    width="100%"
+    min-width="30%"
+  >
+    <v-form @submit.prevent>
+      <v-card>
+        <v-card-title>
+          {{
+            props.operation === 'create'
+              ? t('groups.groupForm.createTitle')
+              : t('groups.groupForm.editTitle')
+          }}
+        </v-card-title>
+        <v-card-item v-if="props.operation === 'create'">
+          <console-alert :text="t('groups.groupForm.edu')" type="warning" />
+        </v-card-item>
+        <v-card-item>
+          <v-text-field
+            :label="t('groups.groupForm.groupName')"
+            :rules="groupNameRules"
+            autofocus
+            required
+          ></v-text-field>
+        </v-card-item>
+        <v-card-actions>
+          <v-col class="text-right">
+            <v-btn type="submit" color="primary">
+              {{ t('groups.groupForm.save') }}
+            </v-btn>
+            <v-btn @click="emit('update:dialogOpen', false)">
+              {{ t('groups.groupForm.cancel') }}
+            </v-btn>
+          </v-col>
+        </v-card-actions>
+      </v-card>
+    </v-form>
+  </v-dialog>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/hermes-console-vue/src/views/groups/group-listing/GroupListing.spec.ts b/hermes-console-vue/src/views/groups/group-listing/GroupListing.spec.ts
new file mode 100644
index 0000000000..9dd1b51157
--- /dev/null
+++ b/hermes-console-vue/src/views/groups/group-listing/GroupListing.spec.ts
@@ -0,0 +1,91 @@
+import { dummyGroups } from '@/dummy/groups';
+import { render } from '@/utils/test-utils';
+import { within } from '@testing-library/vue';
+import GroupListing from '@/views/groups/group-listing/GroupListing.vue';
+
+describe('GroupListing', () => {
+  it('should render group listing with no filter applied', () => {
+    // given
+    const props = {
+      groups: dummyGroups,
+    };
+
+    // when
+    const { getByText } = render(GroupListing, { props });
+
+    // then
+    dummyGroups.forEach(({ name, topics }, index) => {
+      const groupRow = getByText(name).closest('tr')!;
+      expect(within(groupRow).getByText(`${index + 1}`)).toBeInTheDocument();
+      expect(within(groupRow).getByText(name)).toBeInTheDocument();
+      expect(
+        within(groupRow).getByText(
+          `groups.groupListing.topicsChip ${topics.length}`,
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should render group listing with a filter applied', () => {
+    // given
+    const props = {
+      groups: dummyGroups,
+      filter: 'pl.allegro.offer',
+    };
+
+    // when
+    const groups = render(GroupListing, { props })
+      .getAllByText(/pl\.allegro\.offer/)
+      .map((group) => group.closest('tr'));
+
+    // then
+    expect(groups).toHaveLength(2);
+    expect(within(groups[0]!).getByText(/topicsChip 1/)).toBeInTheDocument();
+    expect(within(groups[1]!).getByText(/topicsChip 2/)).toBeInTheDocument();
+  });
+
+  it('should render group listing with a filter applied (no results)', () => {
+    // given
+    const props = {
+      groups: dummyGroups,
+      filter: 'pl.allegro.i18n.DummyEventV1',
+    };
+
+    // when
+    const rows = render(GroupListing, { props }).getAllByRole('row');
+
+    // then
+    expect(rows).toHaveLength(2);
+    expect(
+      within(rows[0]!).getByText('groups.groupListing.index'),
+    ).toBeInTheDocument();
+    expect(
+      within(rows[0]!).getByText('groups.groupListing.name'),
+    ).toBeInTheDocument();
+    expect(
+      within(rows[1]!).getByText(/groups.groupListing.noGroups/),
+    ).toBeInTheDocument();
+    expect(
+      within(rows[1]!).getByText(/groups.groupListing.appliedFilter/),
+    ).toBeInTheDocument();
+  });
+
+  it('should render an empty group listing without filter applied', () => {
+    // given
+    const props = {
+      groups: [],
+    };
+
+    // when
+    const rows = render(GroupListing, { props }).getAllByRole('row');
+
+    // then
+    expect(rows).toHaveLength(2);
+    expect(
+      within(rows[1]!).getByText('groups.groupListing.noGroups'),
+    ).toBeInTheDocument();
+    expect(
+      within(rows[1]!).queryByText('groups.groupListing.appliedFilter'),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/hermes-console-vue/src/views/groups/group-listing/GroupListing.vue b/hermes-console-vue/src/views/groups/group-listing/GroupListing.vue
new file mode 100644
index 0000000000..f0bc2b59d7
--- /dev/null
+++ b/hermes-console-vue/src/views/groups/group-listing/GroupListing.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+  import { computed } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useRouter } from 'vue-router';
+  import type { Group } from '@/composables/groups/use-groups/useGroups';
+
+  const router = useRouter();
+  const { t } = useI18n();
+
+  const props = defineProps<{
+    groups?: Group[];
+    filter?: string;
+  }>();
+
+  const filteredGroups = computed(() => {
+    return (props.groups ?? []).filter(
+      (group) => !props.filter || group.name.includes(props.filter),
+    );
+  });
+
+  function onGroupClick(groupName: string) {
+    router.push({ path: `/groups/${groupName}` });
+  }
+</script>
+
+<template>
+  <v-card class="mb-2">
+    <v-table density="comfortable" hover>
+      <thead>
+        <tr>
+          <th>{{ t('groups.groupListing.index') }}</th>
+          <th>{{ t('groups.groupListing.name') }}</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody v-if="filteredGroups.length > 0">
+        <tr
+          v-for="(group, index) in filteredGroups"
+          :key="group.name"
+          class="groups-table__row"
+          @click="onGroupClick(group.name)"
+        >
+          <td class="text-medium-emphasis">
+            {{ index + 1 }}
+          </td>
+          <td class="font-weight-medium">
+            {{ group.name }}
+          </td>
+          <td class="text-right">
+            <v-chip
+              color="secondary"
+              size="small"
+              density="comfortable"
+              variant="flat"
+            >
+              {{ t('groups.groupListing.topicsChip') }}
+              {{ group.topics.length }}
+            </v-chip>
+            <v-icon icon="mdi-chevron-right"></v-icon>
+          </td>
+        </tr>
+      </tbody>
+      <tbody v-else>
+        <tr>
+          <th colspan="3" class="text-center text-medium-emphasis">
+            {{ t('groups.groupListing.noGroups') }}
+            <template v-if="filter">
+              {{ t('groups.groupListing.appliedFilter', { filter }) }}
+            </template>
+          </th>
+        </tr>
+      </tbody>
+    </v-table>
+  </v-card>
+</template>
+
+<style scoped lang="scss">
+  .groups-table__row:hover {
+    cursor: pointer;
+  }
+</style>
diff --git a/hermes-console-vue/src/views/home/HomeView.spec.ts b/hermes-console-vue/src/views/home/HomeView.spec.ts
index ad95e546d0..30e1018fe7 100644
--- a/hermes-console-vue/src/views/home/HomeView.spec.ts
+++ b/hermes-console-vue/src/views/home/HomeView.spec.ts
@@ -9,7 +9,7 @@ describe('HomeView', () => {
     const { getByText } = render(HomeView);
 
     // then
-    expect(getByText(/console/i)).toBeVisible();
+    expect(getByText('homeView.links.console')).toBeVisible();
   });
 
   it.each([
diff --git a/hermes-console-vue/src/views/subscription/SubscriptionView.vue b/hermes-console-vue/src/views/subscription/SubscriptionView.vue
index 5e1bd0a633..6c74ecd0ff 100644
--- a/hermes-console-vue/src/views/subscription/SubscriptionView.vue
+++ b/hermes-console-vue/src/views/subscription/SubscriptionView.vue
@@ -42,15 +42,15 @@
     },
     {
       title: t('subscription.subscriptionBreadcrumbs.groups'),
-      href: '/groups',
+      href: '/#/groups',
     },
     {
       title: groupId,
-      href: `/groups/${groupId}`,
+      href: `/#/groups/${groupId}`,
     },
     {
       title: topicId,
-      href: `/groups/${groupId}/topics/${topicId}`,
+      href: `/#/groups/${groupId}/topics/${topicId}`,
     },
     {
       title: subscriptionId,
@@ -77,8 +77,8 @@
       <v-row dense>
         <v-col md="12">
           <health-problems-alerts
-            v-if="subscriptionHealth?.problems"
-            :problems="subscriptionHealth.problems"
+            v-if="subscriptionHealth && subscriptionHealth.problems"
+            :problems="subscriptionHealth?.problems"
           />
           <subscription-metadata
             v-if="subscription"
@@ -117,16 +117,19 @@
       <v-row dense>
         <v-col md="12">
           <filters-card
-            v-if="subscription?.filters.length > 0"
-            :filters="subscription!.filters"
+            v-if="subscription && subscription?.filters.length > 0"
+            :filters="subscription?.filters"
           />
           <headers-card
-            v-if="subscription?.headers.length > 0"
-            :headers="subscription!.headers"
+            v-if="!!subscription && subscription.headers.length > 0"
+            :headers="subscription?.headers"
           />
           <undelivered-messages-card
-            v-if="subscriptionUndeliveredMessages?.length > 0"
-            :undelivered-messages="subscriptionUndeliveredMessages!"
+            v-if="
+              subscriptionUndeliveredMessages &&
+              subscriptionUndeliveredMessages?.length > 0
+            "
+            :undelivered-messages="subscriptionUndeliveredMessages"
           />
         </v-col>
       </v-row>
diff --git a/hermes-console-vue/src/views/subscription/filters-card/FiltersCard.vue b/hermes-console-vue/src/views/subscription/filters-card/FiltersCard.vue
index 8ff8b2d375..4d26933237 100644
--- a/hermes-console-vue/src/views/subscription/filters-card/FiltersCard.vue
+++ b/hermes-console-vue/src/views/subscription/filters-card/FiltersCard.vue
@@ -2,7 +2,7 @@
   import type { MessageFilterSpecification } from '@/api/subscription';
 
   const props = defineProps<{
-    filters: MessageFilterSpecification[];
+    filters?: MessageFilterSpecification[];
   }>();
 </script>
 
@@ -34,7 +34,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(filter, index) in props.filters" :key="index">
+        <tr v-for="(filter, index) in props.filters ?? []" :key="index">
           <td>{{ index + 1 }}</td>
           <td>{{ filter.type }}</td>
           <td>{{ filter.path }}{{ filter.header }}</td>
diff --git a/hermes-console-vue/src/views/subscription/headers-card/HeadersCard.vue b/hermes-console-vue/src/views/subscription/headers-card/HeadersCard.vue
index 6c4650facd..8e891f07e3 100644
--- a/hermes-console-vue/src/views/subscription/headers-card/HeadersCard.vue
+++ b/hermes-console-vue/src/views/subscription/headers-card/HeadersCard.vue
@@ -2,7 +2,7 @@
   import type { Header } from '@/api/subscription';
 
   const props = defineProps<{
-    headers: Header[];
+    headers?: Header[];
   }>();
 </script>
 
@@ -28,7 +28,7 @@
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(header, index) in props.headers" :key="index">
+        <tr v-for="(header, index) in props.headers ?? []" :key="index">
           <td>{{ index + 1 }}</td>
           <td>{{ header.name }}</td>
           <td>{{ header.value }}</td>
diff --git a/hermes-console-vue/src/views/subscription/health-problems-alerts/HealthProblemsAlerts.vue b/hermes-console-vue/src/views/subscription/health-problems-alerts/HealthProblemsAlerts.vue
index 2d60daf8e9..ef0b691687 100644
--- a/hermes-console-vue/src/views/subscription/health-problems-alerts/HealthProblemsAlerts.vue
+++ b/hermes-console-vue/src/views/subscription/health-problems-alerts/HealthProblemsAlerts.vue
@@ -1,18 +1,16 @@
 <script setup lang="ts">
-  import {
-    ProblemCode,
-    SubscriptionHealthProblem,
-  } from '@/api/subscription-health';
+  import { ProblemCode } from '@/api/subscription-health';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
+  import type { SubscriptionHealthProblem } from '@/api/subscription-health';
 
   const props = defineProps<{
-    problems: SubscriptionHealthProblem[];
+    problems?: SubscriptionHealthProblem[];
   }>();
 </script>
 
 <template>
   <console-alert
-    v-if="props.problems.some(({ code }) => code === ProblemCode.LAGGING)"
+    v-if="props.problems?.some(({ code }) => code === ProblemCode.LAGGING)"
     :title="$t('subscription.healthProblemsAlerts.lagging.title')"
     :text="$t('subscription.healthProblemsAlerts.lagging.text')"
     type="warning"
@@ -21,7 +19,7 @@
   />
   <console-alert
     v-if="
-      props.problems.some(({ code }) => code === ProblemCode.MALFUNCTIONING)
+      props.problems?.some(({ code }) => code === ProblemCode.MALFUNCTIONING)
     "
     :title="$t('subscription.healthProblemsAlerts.malfunctioning.title')"
     :text="$t('subscription.healthProblemsAlerts.malfunctioning.text')"
@@ -31,7 +29,7 @@
   />
   <console-alert
     v-if="
-      props.problems.some(
+      props.problems?.some(
         ({ code }) => code === ProblemCode.RECEIVING_MALFORMED_MESSAGES,
       )
     "
@@ -42,7 +40,7 @@
     class="mb-2"
   />
   <console-alert
-    v-if="props.problems.some(({ code }) => code === ProblemCode.TIMING_OUT)"
+    v-if="props.problems?.some(({ code }) => code === ProblemCode.TIMING_OUT)"
     :title="$t('subscription.healthProblemsAlerts.timingOut.title')"
     :text="$t('subscription.healthProblemsAlerts.timingOut.text')"
     type="warning"
@@ -50,7 +48,7 @@
     class="mb-2"
   />
   <console-alert
-    v-if="props.problems.some(({ code }) => code === ProblemCode.UNREACHABLE)"
+    v-if="props.problems?.some(({ code }) => code === ProblemCode.UNREACHABLE)"
     :title="$t('subscription.healthProblemsAlerts.unreachable.title')"
     :text="$t('subscription.healthProblemsAlerts.unreachable.text')"
     type="warning"
diff --git a/hermes-console-vue/src/views/subscription/properties-card/PropertiesCard.spec.ts b/hermes-console-vue/src/views/subscription/properties-card/PropertiesCard.spec.ts
index 91f46531a8..7b46de4bdd 100644
--- a/hermes-console-vue/src/views/subscription/properties-card/PropertiesCard.spec.ts
+++ b/hermes-console-vue/src/views/subscription/properties-card/PropertiesCard.spec.ts
@@ -47,7 +47,7 @@ describe('PropertiesCard', () => {
     [DeliveryType.BATCH, 'BATCH'],
   ])(
     'should render subscription delivery type (%s)',
-    (deliveryType, deliveryTypeText) => {
+    (deliveryType: DeliveryType, deliveryTypeText: string) => {
       // given
       const props = {
         subscription: { ...dummySubscription, deliveryType },
@@ -67,21 +67,24 @@ describe('PropertiesCard', () => {
   it.each([
     [SubscriptionMode.ANYCAST, 'ANYCAST'],
     [SubscriptionMode.BROADCAST, 'BROADCAST'],
-  ])('should render subscription mode (%s)', (mode, modeText) => {
-    // given
-    const props = {
-      subscription: { ...dummySubscription, mode },
-    };
+  ])(
+    'should render subscription mode (%s)',
+    (mode: SubscriptionMode, modeText: string) => {
+      // given
+      const props = {
+        subscription: { ...dummySubscription, mode },
+      };
 
-    // when
-    const { getByText } = render(PropertiesCard, { props });
+      // when
+      const { getByText } = render(PropertiesCard, { props });
 
-    // then
-    const modeRow = getByText('subscription.propertiesCard.mode').closest(
-      'tr',
-    )!;
-    expect(within(modeRow).getByText(modeText)).toBeVisible();
-  });
+      // then
+      const modeRow = getByText('subscription.propertiesCard.mode').closest(
+        'tr',
+      )!;
+      expect(within(modeRow).getByText(modeText)).toBeVisible();
+    },
+  );
 
   it('should render subscription rate limit for SERIAL delivery type', () => {
     // given
@@ -416,7 +419,7 @@ describe('PropertiesCard', () => {
     [Severity.NON_IMPORTANT, 'NON_IMPORTANT'],
   ])(
     'should render subscription monitoring severity (%s)',
-    (severity, severityName) => {
+    (severity: Severity, severityName: string) => {
       // given
       const props = {
         subscription: {
@@ -463,7 +466,7 @@ describe('PropertiesCard', () => {
 
   it.each([true, false])(
     'should render subscription http/2 configuration flag (%s)',
-    (http2Enabled) => {
+    (http2Enabled: boolean) => {
       // given
       const props = {
         subscription: {
@@ -511,7 +514,7 @@ describe('PropertiesCard', () => {
 
   it.each([true, false])(
     'should render subscription auto remove flag',
-    (autoDeleteWithTopicEnabled) => {
+    (autoDeleteWithTopicEnabled: boolean) => {
       // given
       const props = {
         subscription: {
diff --git a/hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.spec.ts b/hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.spec.ts
deleted file mode 100644
index 449fba5cbf..0000000000
--- a/hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.spec.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { render } from '@/utils/test-utils';
-import SubscriptionBreadcrumbs from '@/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.vue';
-
-describe('SubscriptionBreadcrumbs', () => {
-  const props = {
-    groupId: 'pl.allegro.public.group',
-    topicId: 'pl.allegro.public.group.DummyEvent',
-    subscriptionId: 'foobar-service',
-  };
-
-  it('should render `home` breadcrumb with an anchor to a home page', () => {
-    // given
-    const { getByText } = render(SubscriptionBreadcrumbs, { props });
-
-    // when
-    const element = getByText(
-      'subscription.subscriptionBreadcrumbs.home',
-    ) as HTMLAnchorElement;
-
-    // then
-    expect(element).toHaveAttribute('href', '/');
-  });
-
-  it('should render `groups` breadcrumb with an anchor to a group listing', () => {
-    // given
-    const { getByText } = render(SubscriptionBreadcrumbs, { props });
-
-    // when
-    const element = getByText(
-      'subscription.subscriptionBreadcrumbs.groups',
-    ) as HTMLAnchorElement;
-
-    // then
-    expect(element).toHaveAttribute('href', '/groups');
-  });
-
-  it('should render a breadcrumb with an anchor to topics listing', () => {
-    // given
-    const { getByText } = render(SubscriptionBreadcrumbs, { props });
-
-    // when
-    const element = getByText('pl.allegro.public.group') as HTMLAnchorElement;
-
-    // then
-    expect(element).toHaveAttribute('href', '/groups/pl.allegro.public.group');
-  });
-
-  it('should render a breadcrumb with an anchor to topic page', () => {
-    // given
-    const { getByText } = render(SubscriptionBreadcrumbs, { props });
-
-    // when
-    const element = getByText(
-      'pl.allegro.public.group.DummyEvent',
-    ) as HTMLAnchorElement;
-
-    // then
-    expect(element).toHaveAttribute(
-      'href',
-      '/groups/pl.allegro.public.group/topics/pl.allegro.public.group.DummyEvent',
-    );
-  });
-});
diff --git a/hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.vue b/hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.vue
deleted file mode 100644
index 6c212df9ff..0000000000
--- a/hermes-console-vue/src/views/subscription/subscription-breadcrumbs/SubscriptionBreadcrumbs.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-  import { useI18n } from 'vue-i18n';
-
-  const props = defineProps<{
-    groupId: string;
-    topicId: string;
-    subscriptionId: string;
-  }>();
-
-  const { t } = useI18n();
-
-  const items = [
-    {
-      title: t('subscription.subscriptionBreadcrumbs.home'),
-      href: '/',
-    },
-    {
-      title: t('subscription.subscriptionBreadcrumbs.groups'),
-      href: '/groups',
-    },
-    {
-      title: props.groupId,
-      href: `/groups/${props.groupId}`,
-    },
-    {
-      title: props.topicId,
-      href: `/groups/${props.groupId}/topics/${props.topicId}`,
-    },
-    {
-      title: props.subscriptionId,
-    },
-  ];
-</script>
-
-<template>
-  <v-breadcrumbs :items="items" density="compact" />
-</template>
-
-<style scoped lang="scss"></style>
diff --git a/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.spec.ts b/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.spec.ts
index b5e3f31d16..9ef73de8b5 100644
--- a/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.spec.ts
+++ b/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.spec.ts
@@ -1,9 +1,19 @@
+import { beforeEach } from 'vitest';
 import { dummySubscription } from '@/dummy/subscription';
 import { render } from '@/utils/test-utils';
 import { State } from '@/api/subscription';
+import router from '@/router';
 import SubscriptionMetadata from '@/views/subscription/subscription-metadata/SubscriptionMetadata.vue';
 
 describe('SubscriptionMetadata', () => {
+  beforeEach(async () => {
+    await router.push(
+      '/groups/pl.allegro.public.group' +
+        '/topics/pl.allegro.public.group.DummyEvent' +
+        '/subscriptions/foobar-service',
+    );
+  });
+
   it('should render subscription metadata box', () => {
     // given
     const props = {
diff --git a/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.vue b/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.vue
index 6e34ab0863..ef82656b8b 100644
--- a/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.vue
+++ b/hermes-console-vue/src/views/subscription/subscription-metadata/SubscriptionMetadata.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { State } from '@/api/subscription';
+  import { useRoute } from 'vue-router';
   import TooltipIcon from '@/components/tooltip-icon/TooltipIcon.vue';
   import type { Subscription } from '@/api/subscription';
 
@@ -7,6 +8,8 @@
     subscription: Subscription;
     authorized: boolean;
   }>();
+
+  const route = useRoute();
 </script>
 
 <template>
@@ -50,7 +53,7 @@
         />
         <v-btn
           v-if="props.authorized"
-          to="./diagnostics"
+          :to="`${route.path}/diagnostics`"
           color="green"
           prepend-icon="mdi-doctor"
         >
diff --git a/hermes-console-vue/src/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue b/hermes-console-vue/src/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue
index a9842aeecd..7c2e174db0 100644
--- a/hermes-console-vue/src/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue
+++ b/hermes-console-vue/src/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue
@@ -3,7 +3,7 @@
   import type { SentMessageTrace } from '@/api/subscription-undelivered';
 
   const props = defineProps<{
-    undeliveredMessages: SentMessageTrace[];
+    undeliveredMessages?: SentMessageTrace[];
   }>();
 </script>
 
diff --git a/hermes-console-vue/src/views/topic/TopicView.vue b/hermes-console-vue/src/views/topic/TopicView.vue
index 59dd70a01b..f068b3358b 100644
--- a/hermes-console-vue/src/views/topic/TopicView.vue
+++ b/hermes-console-vue/src/views/topic/TopicView.vue
@@ -40,15 +40,15 @@
     },
     {
       title: t('subscription.subscriptionBreadcrumbs.groups'),
-      href: '/groups',
+      href: '/#/groups',
     },
     {
       title: groupId,
-      href: `/groups/${groupId}`,
+      href: `/#/groups/${groupId}`,
     },
     {
       title: topicName,
-      href: `/groups/${groupId}/topics/${topicName}`,
+      href: `/#/groups/${groupId}/topics/${topicName}`,
     },
   ];
   const configStore = useAppConfigStore();
@@ -96,7 +96,7 @@
       v-if="
         configStore.appConfig?.topic.offlineClientsEnabled &&
         offlineClientsSource?.source &&
-        topic.offlineStorage.enabled
+        topic?.offlineStorage.enabled
       "
       :source="offlineClientsSource.source"
     />
diff --git a/hermes-console-vue/src/views/topic/properties-list/PropertiesList.vue b/hermes-console-vue/src/views/topic/properties-list/PropertiesList.vue
index 3af927ad2f..f76d1e6577 100644
--- a/hermes-console-vue/src/views/topic/properties-list/PropertiesList.vue
+++ b/hermes-console-vue/src/views/topic/properties-list/PropertiesList.vue
@@ -15,9 +15,9 @@
     ? 'infinite'
     : `${props.topic.offlineStorage.retentionTime.duration} days`;
   const authorizedPublishers =
-    props.topic.auth.publishers.length === 0
+    props.topic.auth.publishers?.length === 0
       ? t('topicView.properties.authorizedPublishersNotSet')
-      : props.topic.auth.publishers.join(', ');
+      : props.topic.auth.publishers?.join(', ');
   const labels = props.topic.labels.map((label) => label.value).join(', ');
   const retentionTime = `${
     props.topic.retentionTime.duration
diff --git a/hermes-console-vue/tsconfig.vitest.json b/hermes-console-vue/tsconfig.vitest.json
index 52c5596c3b..55a23f55b5 100644
--- a/hermes-console-vue/tsconfig.vitest.json
+++ b/hermes-console-vue/tsconfig.vitest.json
@@ -9,7 +9,7 @@
       "jsdom",
       "vitest/globals",
       "@testing-library/jest-dom"
-    ],
+    ]
   },
   "skipLibCheck": true
 }
diff --git a/hermes-management/build.gradle b/hermes-management/build.gradle
index f77907d958..b87c572805 100644
--- a/hermes-management/build.gradle
+++ b/hermes-management/build.gradle
@@ -49,16 +49,6 @@ dependencies {
     testImplementation group: 'org.testcontainers', name: 'kafka', version: versions.testcontainers
 }
 
-//task buildHermesConsole(type: Exec) {
-//    workingDir '../hermes-console'
-//    commandLine './package.sh'
-//}
-//
-//task attachHermesConsole(type: Copy, dependsOn: 'buildHermesConsole') {
-//    from '../hermes-console/dist/static'
-//    into(sourceSets.main.output.resourcesDir.path + '/static')
-//}
-
 node {
     version = '20.4.0'
     distBaseUrl = 'https://nodejs.org/dist'
@@ -71,11 +61,11 @@ node {
 yarnSetup.dependsOn(nodeSetup)
 yarn.dependsOn(npmSetup)
 
-task buildHermesConsoleV2(type: YarnTask, dependsOn: yarn) {
+task buildHermesConsole(type: YarnTask, dependsOn: yarn) {
     args = ['build-only']
 }
 
-task attachHermesConsoleV2(type: Copy, dependsOn: 'buildHermesConsoleV2') {
+task attachHermesConsole(type: Copy, dependsOn: 'buildHermesConsole') {
     from '../hermes-console-vue/dist'
     into(sourceSets.main.output.resourcesDir.path + '/static')
 }
@@ -88,5 +78,4 @@ tasks.register('prepareIndexTemplate') {
     }
 }
 
-//jar.dependsOn(attachHermesConsole, attachHermesConsoleV2, 'prepareIndexTemplate')
-jar.dependsOn(attachHermesConsoleV2, 'prepareIndexTemplate')
+jar.dependsOn(attachHermesConsole, 'prepareIndexTemplate')
diff --git a/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/JerseyProperties.java b/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/JerseyProperties.java
index fa75972746..07e5ce83d3 100644
--- a/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/JerseyProperties.java
+++ b/hermes-management/src/main/java/pl/allegro/tech/hermes/management/config/JerseyProperties.java
@@ -9,7 +9,7 @@
 public class JerseyProperties {
 
     private List<String> packagesToScan = new ArrayList<>();
-    private String filterStaticContentRegexp = "/(status|components|css|img|js|partials|assets|favicon.ico)/.*";
+    private String filterStaticContentRegexp = "(/status/|/assets/|favicon.ico).*";
 
     public List<String> getPackagesToScan() {
         return packagesToScan;