diff --git a/hermes-console-vue/json-server/db.json b/hermes-console-vue/json-server/db.json
index 670f0f4813..88ef25dcf5 100644
--- a/hermes-console-vue/json-server/db.json
+++ b/hermes-console-vue/json-server/db.json
@@ -99,8 +99,6 @@
     "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"
@@ -119,11 +117,11 @@
   ],
   "readinessDatacenters": [
     {
-      "datacenter":  "DC1",
+      "datacenter": "DC1",
       "isReady": true
     },
     {
-      "datacenter":  "DC2",
+      "datacenter": "DC2",
       "isReady": false
     }
   ],
@@ -136,8 +134,7 @@
         "consumersNumber": 4
       }
     },
-    "subscriptionConstraints":
-    {
+    "subscriptionConstraints": {
       "pl.group.Topic$subscription": {
         "consumersNumber": 6
       },
@@ -327,7 +324,7 @@
         "requestTimeout": 1000,
         "socketTimeout": 0,
         "sendingDelay": 0,
-        "backoffMultiplier": 1.0,
+        "backoffMultiplier": 1,
         "backoffMaxIntervalInSec": 600,
         "retryClientErrors": true,
         "backoffMaxIntervalMillis": 600000
@@ -336,7 +333,7 @@
       "trackingMode": "trackingOff",
       "owner": {
         "source": "Service Catalog",
-        "id": "42"
+        "id": "41"
       },
       "monitoringDetails": {
         "severity": "NON_IMPORTANT",
@@ -401,7 +398,7 @@
       "trackingMode": "trackingOff",
       "owner": {
         "source": "Service Catalog",
-        "id": "42"
+        "id": "41"
       },
       "monitoringDetails": {
         "severity": "NON_IMPORTANT",
@@ -564,10 +561,12 @@
       }
     },
     "owner": {
-      "sources": [{
-        "name": "Crowd",
-        "placeholder": "Crowd group (or groups separated by ',')"
-      }]
+      "sources": [
+        {
+          "name": "Crowd",
+          "placeholder": "Crowd group (or groups separated by ',')"
+        }
+      ]
     },
     "topic": {
       "messagePreviewEnabled": true,
@@ -592,19 +591,24 @@
       "removeSchema": false,
       "schemaIdAwareSerializationEnabled": false,
       "avroContentTypeMetadataRequired": true,
-      "contentTypes": [{
-        "value": "AVRO",
-        "label": "AVRO"
-      }, {
-        "value": "JSON",
-        "label": "JSON"
-      }],
+      "contentTypes": [
+        {
+          "value": "AVRO",
+          "label": "AVRO"
+        },
+        {
+          "value": "JSON",
+          "label": "JSON"
+        }
+      ],
       "readOnlyModeEnabled": false,
       "allowedTopicLabels": [],
-      "retentionUnits": [{
-        "value": "DAYS",
-        "label": "DAYS"
-      }],
+      "retentionUnits": [
+        {
+          "value": "DAYS",
+          "label": "DAYS"
+        }
+      ],
       "offlineRetransmissionEnabled": false,
       "offlineRetransmissionDescription": "Offline retransmission"
     },
@@ -626,13 +630,16 @@
         },
         "deliveryType": "SERIAL"
       },
-      "deliveryTypes": [{
-        "value": "SERIAL",
-        "label": "SERIAL"
-      }, {
-        "value": "BATCH",
-        "label": "BATCH"
-      }]
+      "deliveryTypes": [
+        {
+          "value": "SERIAL",
+          "label": "SERIAL"
+        },
+        {
+          "value": "BATCH",
+          "label": "BATCH"
+        }
+      ]
     },
     "consistency": {
       "maxGroupBatchSize": 10
@@ -654,4 +661,4 @@
       "avroSubscriptionCount": 100
     }
   }
-}
+}
\ No newline at end of file
diff --git a/hermes-console-vue/json-server/server.ts b/hermes-console-vue/json-server/server.ts
index b24f67b22c..23d7cbd20b 100644
--- a/hermes-console-vue/json-server/server.ts
+++ b/hermes-console-vue/json-server/server.ts
@@ -23,6 +23,30 @@ server.post('/topics/*/subscriptions/*/moveOffsetsToTheEnd', (req, res) => {
   res.sendStatus(200);
 });
 
+server.delete('/groups/:group', (req, res) => {
+  res.sendStatus(200);
+});
+
+server.delete('/topics/:topic', (req, res) => {
+  res.sendStatus(200);
+});
+
+server.delete('/subscriptions/:subscription', (req, res) => {
+  res.sendStatus(200);
+});
+
+server.put('/topics/*/subscriptions/*/state', (req, res) => {
+  res.sendStatus(200);
+});
+
+server.delete('/consistency/inconsistencies/topics', (req, res) => {
+  res.sendStatus(200);
+});
+
+server.post('/readiness/datacenters/:dc', (req, res) => {
+  res.sendStatus(200);
+});
+
 const router = jsonServer.router('json-server/db.json');
 server.use(router);
 
diff --git a/hermes-console-vue/src/api/hermes-client/index.ts b/hermes-console-vue/src/api/hermes-client/index.ts
index ede389f11e..f946aec50b 100644
--- a/hermes-console-vue/src/api/hermes-client/index.ts
+++ b/hermes-console-vue/src/api/hermes-client/index.ts
@@ -1,4 +1,5 @@
-import axios from 'axios';
+import { State } from '@/api/subscription';
+import axios from '@/utils/axios/axios-instance';
 import qs from 'query-string';
 import type { AccessTokenResponse } from '@/api/access-token-response';
 import type { AppConfiguration } from '@/api/app-configuration';
@@ -15,10 +16,13 @@ import type {
 } from '@/api/topic';
 import type { OfflineClientsSource } from '@/api/offline-clients-source';
 import type { Owner } from '@/api/owner';
-import type { ResponsePromise } from '@/utils/axios-utils';
+import type { ResponsePromise } from '@/utils/axios/axios-utils';
 import type { Role } from '@/api/role';
+import type { SentMessageTrace } from '@/api/subscription-undelivered';
 import type { Stats } from '@/api/stats';
 import type { Subscription } from '@/api/subscription';
+import type { SubscriptionHealth } from '@/api/subscription-health';
+import type { SubscriptionMetrics } from '@/api/subscription-metrics';
 
 export function fetchTopic(
   topicName: string,
@@ -26,7 +30,7 @@ export function fetchTopic(
   return axios.get<TopicWithSchema>(`/topics/${topicName}`);
 }
 
-export function fetchTopicOwner(ownerId: string): ResponsePromise<Owner> {
+export function fetchOwner(ownerId: string): ResponsePromise<Owner> {
   return axios.get<Owner>(`/owners/sources/Service Catalog/${ownerId}`);
 }
 
@@ -57,6 +61,71 @@ export function fetchTopicSubscriptionDetails(
   );
 }
 
+export function fetchSubscription(
+  topicName: string,
+  subscriptionName: string,
+): ResponsePromise<Subscription> {
+  return axios.get<Subscription>(
+    `/topics/${topicName}/subscriptions/${subscriptionName}`,
+  );
+}
+
+export function suspendSubscription(
+  topicName: string,
+  subscriptionName: string,
+): ResponsePromise<void> {
+  return axios.put(
+    `/topics/${topicName}/subscriptions/${subscriptionName}/state`,
+    State.SUSPENDED,
+  );
+}
+
+export function activateSubscription(
+  topicName: string,
+  subscriptionName: string,
+): ResponsePromise<void> {
+  return axios.put(
+    `/topics/${topicName}/subscriptions/${subscriptionName}/state`,
+    State.ACTIVE,
+  );
+}
+
+export function fetchSubscriptionMetrics(
+  topicName: string,
+  subscriptionName: string,
+): ResponsePromise<SubscriptionMetrics> {
+  return axios.get<SubscriptionMetrics>(
+    `/topics/${topicName}/subscriptions/${subscriptionName}/metrics`,
+  );
+}
+
+export function fetchSubscriptionHealth(
+  topicName: string,
+  subscriptionName: string,
+): ResponsePromise<SubscriptionHealth> {
+  return axios.get<SubscriptionHealth>(
+    `/topics/${topicName}/subscriptions/${subscriptionName}/health`,
+  );
+}
+
+export function fetchSubscriptionUndeliveredMessages(
+  topicName: string,
+  subscriptionName: string,
+): ResponsePromise<SentMessageTrace[]> {
+  return axios.get<SentMessageTrace[]>(
+    `/topics/${topicName}/subscriptions/${subscriptionName}/undelivered`,
+  );
+}
+
+export function fetchSubscriptionLastUndeliveredMessage(
+  topicName: string,
+  subscriptionName: string,
+): ResponsePromise<SentMessageTrace> {
+  return axios.get<SentMessageTrace>(
+    `/topics/${topicName}/subscriptions/${subscriptionName}/undelivered/last`,
+  );
+}
+
 export function fetchAppConfiguration(): ResponsePromise<AppConfiguration> {
   return axios.get<AppConfiguration>('/console', {
     headers: { accept: 'application/json' },
@@ -168,3 +237,44 @@ export function moveSubscriptionOffsets(
     `/topics/${topicName}/subscriptions/${subscription}/moveOffsetsToTheEnd`,
   );
 }
+
+export function removeTopic(topic: String): ResponsePromise<void> {
+  return axios.delete(`/topics/${topic}`);
+}
+
+export function removeSubscription(
+  topic: String,
+  subscription: String,
+): ResponsePromise<void> {
+  return axios.delete(`/topics/${topic}/subscriptions/${subscription}`);
+}
+
+export function removeGroup(group: String): ResponsePromise<void> {
+  return axios.delete(`/groups/${group}`);
+}
+
+export function removeInconsistentTopic(topic: string): ResponsePromise<void> {
+  return axios.delete('/consistency/inconsistencies/topics', {
+    params: {
+      topicName: topic,
+    },
+    paramsSerializer: {
+      indexes: null,
+    },
+  });
+}
+
+export function switchReadiness(
+  datacenter: string,
+  desiredState: boolean,
+): ResponsePromise<void> {
+  return axios.post(
+    `/readiness/datacenters/${datacenter}`,
+    qs.stringify({
+      isReady: desiredState,
+    }),
+    {
+      'Content-Type': 'application/json',
+    } as AxiosRequestConfig,
+  );
+}
diff --git a/hermes-console-vue/src/components/app-notification/AppNotification.vue b/hermes-console-vue/src/components/app-notification/AppNotification.vue
index 944963e4fa..6d0502c05a 100644
--- a/hermes-console-vue/src/components/app-notification/AppNotification.vue
+++ b/hermes-console-vue/src/components/app-notification/AppNotification.vue
@@ -3,7 +3,9 @@
   const props = defineProps<{
     notification: Notification;
   }>();
-  defineEmits(['close']);
+  const emit = defineEmits<{
+    close: [];
+  }>();
 </script>
 
 <template>
@@ -15,7 +17,7 @@
     border="start"
     elevation="3"
     width="500"
-    @click:close="$emit('close')"
+    @click:close="emit('close')"
   />
 </template>
 <style scoped lang="scss"></style>
diff --git a/hermes-console-vue/src/components/confirmation-dialog/ConfirmationDialog.spec.ts b/hermes-console-vue/src/components/confirmation-dialog/ConfirmationDialog.spec.ts
new file mode 100644
index 0000000000..5ac517f014
--- /dev/null
+++ b/hermes-console-vue/src/components/confirmation-dialog/ConfirmationDialog.spec.ts
@@ -0,0 +1,147 @@
+import {
+  appConfigStoreState,
+  createTestingPiniaWithState,
+} from '@/dummy/store';
+import { createTestingPinia } from '@pinia/testing';
+import { dummyAppConfig } from '@/dummy/app-config';
+import { expect } from 'vitest';
+import { render } from '@/utils/test-utils';
+import ConfirmationDialog from '@/components/confirmation-dialog/ConfirmationDialog.vue';
+import userEvent from '@testing-library/user-event';
+
+describe('ConfirmationDialog', () => {
+  const props = {
+    actionButtonEnabled: true,
+    title: 'Confirmation dialog',
+    text: 'Dummy text',
+    modelValue: true,
+  };
+
+  it('renders properly', () => {
+    // when
+    const { getByText, queryByText } = render(ConfirmationDialog, {
+      testPinia: createTestingPiniaWithState(),
+      props,
+    });
+
+    // then
+    expect(getByText('Confirmation dialog')).toBeVisible();
+    expect(
+      queryByText('confirmationDialog.confirmText'),
+    ).not.toBeInTheDocument();
+    expect(getByText('Dummy text')).toBeVisible();
+    expect(
+      getByText('confirmationDialog.confirm').closest('button'),
+    ).toBeEnabled();
+    expect(
+      getByText('confirmationDialog.cancel').closest('button'),
+    ).toBeEnabled();
+  });
+
+  it('should disable action button', async () => {
+    //given
+    const props = {
+      actionButtonEnabled: false,
+      title: 'Confirmation dialog',
+      text: 'Dummy text',
+      modelValue: true,
+    };
+
+    // when
+    const { getByText } = render(ConfirmationDialog, {
+      testPinia: createTestingPiniaWithState(),
+      props,
+    });
+
+    // then
+    expect(
+      getByText('confirmationDialog.confirm').closest('button'),
+    ).toBeDisabled();
+  });
+
+  it('should require confirmation text', () => {
+    // when
+    const { getByText, getAllByText } = render(ConfirmationDialog, {
+      testPinia: createTestingPinia({
+        initialState: {
+          appConfig: {
+            ...appConfigStoreState,
+            appConfig: {
+              ...dummyAppConfig,
+              console: {
+                ...dummyAppConfig.console,
+                criticalEnvironment: true,
+              },
+            },
+          },
+        },
+      }),
+      props,
+    });
+
+    // then
+    expect(
+      getAllByText('confirmationDialog.confirmText')[0],
+    ).toBeInTheDocument();
+    expect(
+      getByText('confirmationDialog.confirm').closest('button'),
+    ).toBeDisabled();
+    expect(
+      getByText('confirmationDialog.cancel').closest('button'),
+    ).toBeEnabled();
+  });
+
+  it('should enable button when confirmation text match', async () => {
+    // when
+    const { getByText, getAllByText, getAllByRole } = render(
+      ConfirmationDialog,
+      {
+        testPinia: createTestingPinia({
+          initialState: {
+            appConfig: {
+              ...appConfigStoreState,
+              appConfig: {
+                ...dummyAppConfig,
+                console: {
+                  ...dummyAppConfig.console,
+                  criticalEnvironment: true,
+                },
+              },
+            },
+          },
+        }),
+        props,
+      },
+    );
+
+    // then
+    expect(
+      getAllByText('confirmationDialog.confirmText')[0],
+    ).toBeInTheDocument();
+    expect(
+      getByText('confirmationDialog.confirm').closest('button'),
+    ).toBeDisabled();
+    expect(
+      getByText('confirmationDialog.cancel').closest('button'),
+    ).toBeEnabled();
+
+    //when
+    await userEvent.type(getAllByRole('textbox')[1], 'not matching text');
+
+    //then
+    expect(getAllByRole('textbox')[1]).toHaveValue('not matching text');
+    expect(
+      getByText('confirmationDialog.confirm').closest('button'),
+    ).toBeDisabled();
+
+    //when
+    await userEvent.clear(getAllByRole('textbox')[1]);
+    await userEvent.type(getAllByRole('textbox')[1], 'prod');
+
+    //then
+    expect(getAllByRole('textbox')[1]).toHaveValue('prod');
+    expect(
+      getByText('confirmationDialog.confirm').closest('button'),
+    ).toBeEnabled();
+  });
+});
diff --git a/hermes-console-vue/src/components/confirmation-dialog/ConfirmationDialog.vue b/hermes-console-vue/src/components/confirmation-dialog/ConfirmationDialog.vue
new file mode 100644
index 0000000000..349306c9e1
--- /dev/null
+++ b/hermes-console-vue/src/components/confirmation-dialog/ConfirmationDialog.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
+  import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
+
+  const props = defineProps<{
+    actionButtonEnabled: boolean;
+    title: string;
+    text: string;
+  }>();
+
+  const configStore = useAppConfigStore();
+
+  const confirmationText = ref<string>();
+</script>
+
+<template>
+  <v-dialog width="100%" min-width="30%">
+    <v-form>
+      <v-card>
+        <v-card-title v-if="title">
+          {{ props.title }}
+        </v-card-title>
+        <v-card-text v-if="text">
+          <console-alert :text="props.text" type="warning" />
+        </v-card-text>
+        <v-card-text
+          v-if="configStore.loadedConfig.console.criticalEnvironment"
+        >
+          <v-text-field
+            :label="$t('confirmationDialog.confirmText')"
+            type="input"
+            v-model="confirmationText"
+            prepend-inner-icon="mdi-alert"
+          />
+        </v-card-text>
+        <v-card-actions>
+          <v-col class="text-right">
+            <v-btn
+              type="confirm"
+              color="primary"
+              @click="$emit('action')"
+              :disabled="
+                (configStore.loadedConfig.console.criticalEnvironment &&
+                  confirmationText !== 'prod') ||
+                !actionButtonEnabled
+              "
+            >
+              {{ $t('confirmationDialog.confirm') }}
+            </v-btn>
+            <v-btn @click="$emit('cancel')">
+              {{ $t('confirmationDialog.cancel') }}
+            </v-btn>
+          </v-col>
+        </v-card-actions>
+      </v-card>
+    </v-form>
+  </v-dialog>
+</template>
+
+<style scoped></style>
diff --git a/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts b/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts
index 9a6611dffd..3c14ced6d9 100644
--- a/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts
+++ b/hermes-console-vue/src/components/console-header/ConsoleHeader.spec.ts
@@ -5,8 +5,8 @@ import {
 } from '@/dummy/store';
 import { createTestingPinia } from '@pinia/testing';
 import { dummyAppConfig } from '@/dummy/app-config';
+import { dummyExpiredToken, dummyValidToken } from '@/dummy/jwt-tokens';
 import { expect } from 'vitest';
-import { expiredToken, validToken } from '@/utils/jwt-utils';
 import { render } from '@/utils/test-utils';
 import ConsoleHeader from '@/components/console-header/ConsoleHeader.vue';
 
@@ -123,7 +123,7 @@ describe('ConsoleHeader', () => {
           },
           auth: {
             ...authStoreState,
-            accessToken: validToken,
+            accessToken: dummyValidToken,
           },
         },
       }),
@@ -153,7 +153,7 @@ describe('ConsoleHeader', () => {
           },
           auth: {
             ...authStoreState,
-            accessToken: expiredToken,
+            accessToken: dummyExpiredToken,
           },
         },
       }),
diff --git a/hermes-console-vue/src/composables/dialog/use-dialog/useDialog.ts b/hermes-console-vue/src/composables/dialog/use-dialog/useDialog.ts
new file mode 100644
index 0000000000..2472a18f43
--- /dev/null
+++ b/hermes-console-vue/src/composables/dialog/use-dialog/useDialog.ts
@@ -0,0 +1,44 @@
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+
+export interface UseDialog {
+  isDialogOpened: Ref<boolean>;
+  actionButtonEnabled: Ref<boolean>;
+  openDialog: () => void;
+  closeDialog: () => void;
+  enableActionButton: () => void;
+  disableActionButton: () => void;
+}
+
+export function useDialog(
+  isOpenedByDefault: boolean = false,
+  actionButtonEnabledByDefault: boolean = true,
+): UseDialog {
+  const isDialogOpened = ref(isOpenedByDefault);
+  const actionButtonEnabled = ref(actionButtonEnabledByDefault);
+
+  function openDialog() {
+    isDialogOpened.value = true;
+  }
+
+  function closeDialog() {
+    isDialogOpened.value = false;
+  }
+
+  function enableActionButton() {
+    actionButtonEnabled.value = true;
+  }
+
+  function disableActionButton() {
+    actionButtonEnabled.value = false;
+  }
+
+  return {
+    isDialogOpened,
+    actionButtonEnabled,
+    openDialog,
+    closeDialog,
+    enableActionButton,
+    disableActionButton,
+  };
+}
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
index a1e11fe9a3..a00e2753f9 100644
--- a/hermes-console-vue/src/composables/groups/use-groups/useGroups.spec.ts
+++ b/hermes-console-vue/src/composables/groups/use-groups/useGroups.spec.ts
@@ -1,12 +1,20 @@
 import { afterEach } from 'vitest';
+import { createTestingPinia } from '@pinia/testing';
 import { dummyGroupNames } from '@/dummy/groups';
 import { dummyTopicNames } from '@/dummy/topics';
+import {
+  expectNotificationDispatched,
+  notificationStoreSpy,
+} from '@/utils/test-utils';
 import {
   fetchGroupNamesErrorHandler,
   fetchGroupNamesHandler,
   fetchTopicNamesErrorHandler,
   fetchTopicNamesHandler,
+  removeGroupErrorHandler,
+  removeGroupHandler,
 } from '@/mocks/handlers';
+import { setActivePinia } from 'pinia';
 import { setupServer } from 'msw/node';
 import { useGroups } from '@/composables/groups/use-groups/useGroups';
 import { waitFor } from '@testing-library/vue';
@@ -17,6 +25,14 @@ describe('useGroups', () => {
     fetchTopicNamesHandler({ topicNames: dummyTopicNames }),
   );
 
+  const pinia = createTestingPinia({
+    fakeApp: true,
+  });
+
+  beforeEach(() => {
+    setActivePinia(pinia);
+  });
+
   afterEach(() => {
     server.resetHandlers();
   });
@@ -72,4 +88,46 @@ describe('useGroups', () => {
       expect(error.value.fetchTopicNames).not.toBeNull();
     });
   });
+
+  it('should show message that removing group was successful', async () => {
+    // given
+    server.use(removeGroupHandler({ group: dummyGroupNames[0] }));
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeGroup } = useGroups();
+
+    // when
+    await removeGroup(dummyGroupNames[0]);
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'success',
+        text: 'notifications.group.delete.success',
+      });
+    });
+  });
+
+  it('should show message that removing group was unsuccessful', async () => {
+    // given
+    server.use(
+      removeGroupErrorHandler({ group: dummyGroupNames[0], errorCode: 500 }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeGroup } = useGroups();
+
+    // when
+    await removeGroup(dummyGroupNames[0]);
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'error',
+        title: 'notifications.group.delete.failure',
+      });
+    });
+  });
 });
diff --git a/hermes-console-vue/src/composables/groups/use-groups/useGroups.ts b/hermes-console-vue/src/composables/groups/use-groups/useGroups.ts
index d89b7f407b..9894e1323e 100644
--- a/hermes-console-vue/src/composables/groups/use-groups/useGroups.ts
+++ b/hermes-console-vue/src/composables/groups/use-groups/useGroups.ts
@@ -1,12 +1,18 @@
 import { computed, ref } from 'vue';
-import { fetchGroupNames as getGroupNames } from '@/api/hermes-client';
+import {
+  removeGroup as deleteGroup,
+  fetchGroupNames as getGroupNames,
+} from '@/api/hermes-client';
 import { fetchTopicNames as getTopicNames } from '@/api/hermes-client';
+import { useGlobalI18n } from '@/i18n';
+import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications';
 import type { Ref } from 'vue';
 
 export interface UseGroups {
   groups: Ref<Group[] | undefined>;
   loading: Ref<boolean>;
   error: Ref<UseGroupsErrors>;
+  removeGroup: (groupId: string) => Promise<boolean>;
 }
 
 export interface UseGroupsErrors {
@@ -20,6 +26,8 @@ export interface Group {
 }
 
 export function useGroups(): UseGroups {
+  const notificationStore = useNotificationsStore();
+
   const groupNames = ref<string[]>();
   const topicNames = ref<string[]>();
   const error = ref<UseGroupsErrors>({
@@ -64,6 +72,28 @@ export function useGroups(): UseGroups {
     }
   };
 
+  const removeGroup = async (groupId: string): Promise<boolean> => {
+    try {
+      await deleteGroup(groupId);
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t('notifications.group.delete.success', {
+          groupId,
+        }),
+        type: 'success',
+      });
+      return true;
+    } catch (e) {
+      notificationStore.dispatchNotification({
+        title: useGlobalI18n().t('notifications.group.delete.failure', {
+          groupId,
+        }),
+        text: (e as Error).message,
+        type: 'error',
+      });
+      return false;
+    }
+  };
+
   fetchGroupNames();
   fetchTopicNames();
 
@@ -71,5 +101,6 @@ export function useGroups(): UseGroups {
     groups,
     loading,
     error,
+    removeGroup,
   };
 }
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
index 428891e357..0aabec74db 100644
--- 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
@@ -1,9 +1,17 @@
 import { afterEach } from 'vitest';
+import { createTestingPinia } from '@pinia/testing';
 import { dummyInconsistentTopics } from '@/dummy/inconsistentTopics';
+import {
+  expectNotificationDispatched,
+  notificationStoreSpy,
+} from '@/utils/test-utils';
 import {
   fetchInconsistentTopicsErrorHandler,
   fetchInconsistentTopicsHandler,
+  removeInconsistentTopicErrorHandler,
+  removeInconsistentTopicHandler,
 } from '@/mocks/handlers';
+import { setActivePinia } from 'pinia';
 import { setupServer } from 'msw/node';
 import { useInconsistentTopics } from '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics';
 import { waitFor } from '@testing-library/vue';
@@ -13,6 +21,14 @@ describe('useInconsistentTopics', () => {
     fetchInconsistentTopicsHandler({ topics: dummyInconsistentTopics }),
   );
 
+  const pinia = createTestingPinia({
+    fakeApp: true,
+  });
+
+  beforeEach(() => {
+    setActivePinia(pinia);
+  });
+
   afterEach(() => {
     server.resetHandlers();
   });
@@ -50,4 +66,44 @@ describe('useInconsistentTopics', () => {
       expect(error.value.fetchInconsistentTopics).not.toBeNull();
     });
   });
+
+  it('should show message that removing inconsistentTopic was successful', async () => {
+    // given
+    server.use(removeInconsistentTopicHandler());
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeInconsistentTopic } = useInconsistentTopics();
+
+    // when
+    await removeInconsistentTopic(dummyInconsistentTopics[0]);
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'success',
+        text: 'notifications.inconsistentTopic.delete.success',
+      });
+    });
+  });
+
+  it('should show message that removing inconsistentTopic was unsuccessful', async () => {
+    // given
+    server.use(removeInconsistentTopicErrorHandler({ errorCode: 500 }));
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeInconsistentTopic } = useInconsistentTopics();
+
+    // when
+    await removeInconsistentTopic(dummyInconsistentTopics[0]);
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'error',
+        title: 'notifications.inconsistentTopic.delete.failure',
+      });
+    });
+  });
 });
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
index bbf0a2bdd6..a2e104d40d 100644
--- 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
@@ -1,11 +1,17 @@
 import { computed, ref } from 'vue';
-import { fetchInconsistentTopics as getInconsistentTopics } from '@/api/hermes-client';
+import {
+  removeInconsistentTopic as deleteInconsistentTopic,
+  fetchInconsistentTopics as getInconsistentTopics,
+} from '@/api/hermes-client';
+import { useGlobalI18n } from '@/i18n';
+import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications';
 import type { Ref } from 'vue';
 
 export interface UseInconsistentTopics {
   topics: Ref<string[] | undefined>;
   loading: Ref<boolean>;
   error: Ref<UseInconsistentTopicsErrors>;
+  removeInconsistentTopic: (topic: string) => Promise<boolean>;
 }
 
 export interface UseInconsistentTopicsErrors {
@@ -13,6 +19,8 @@ export interface UseInconsistentTopicsErrors {
 }
 
 export function useInconsistentTopics(): UseInconsistentTopics {
+  const notificationStore = useNotificationsStore();
+
   const topicNames = ref<string[]>();
   const error = ref<UseInconsistentTopicsErrors>({
     fetchInconsistentTopics: null,
@@ -34,11 +42,40 @@ export function useInconsistentTopics(): UseInconsistentTopics {
     }
   };
 
+  const removeInconsistentTopic = async (topic: string): Promise<boolean> => {
+    try {
+      await deleteInconsistentTopic(topic);
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t(
+          'notifications.inconsistentTopic.delete.success',
+          {
+            topic,
+          },
+        ),
+        type: 'success',
+      });
+      return true;
+    } catch (e) {
+      notificationStore.dispatchNotification({
+        title: useGlobalI18n().t(
+          'notifications.inconsistentTopic.delete.failure',
+          {
+            topic,
+          },
+        ),
+        text: (e as Error).message,
+        type: 'error',
+      });
+      return false;
+    }
+  };
+
   fetchInconsistentTopics();
 
   return {
     topics,
     loading,
     error,
+    removeInconsistentTopic,
   };
 }
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
index 2598fb696e..c57666be8b 100644
--- a/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.spec.ts
+++ b/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.spec.ts
@@ -1,9 +1,17 @@
 import { afterEach } from 'vitest';
+import { createTestingPinia } from '@pinia/testing';
 import { dummyDatacentersReadiness } from '@/dummy/readiness';
+import {
+  expectNotificationDispatched,
+  notificationStoreSpy,
+} from '@/utils/test-utils';
 import {
   fetchReadinessErrorHandler,
   fetchReadinessHandler,
+  switchReadinessErrorHandler,
+  switchReadinessHandler,
 } from '@/mocks/handlers';
+import { setActivePinia } from 'pinia';
 import { setupServer } from 'msw/node';
 import { useReadiness } from '@/composables/readiness/use-readiness/useReadiness';
 import { waitFor } from '@testing-library/vue';
@@ -13,6 +21,18 @@ describe('useReadiness', () => {
     fetchReadinessHandler({ datacentersReadiness: dummyDatacentersReadiness }),
   );
 
+  const pinia = createTestingPinia({
+    fakeApp: true,
+  });
+
+  beforeEach(() => {
+    setActivePinia(pinia);
+  });
+
+  afterEach(() => {
+    server.resetHandlers();
+  });
+
   afterEach(() => {
     server.resetHandlers();
   });
@@ -48,4 +68,53 @@ describe('useReadiness', () => {
       expect(error.value.fetchReadiness).not.toBeNull();
     });
   });
+
+  it('should show message that switching readiness subscription was successful', async () => {
+    // given
+    server.use(
+      switchReadinessHandler({
+        datacenter: dummyDatacentersReadiness[0].datacenter,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { switchReadinessState } = useReadiness();
+
+    // when
+    await switchReadinessState(dummyDatacentersReadiness[0].datacenter, true);
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'success',
+        text: 'notifications.readiness.switch.success',
+      });
+    });
+  });
+
+  it('should show message that switching readiness subscription was unsuccessful', async () => {
+    // given
+    server.use(
+      switchReadinessErrorHandler({
+        datacenter: dummyDatacentersReadiness[0].datacenter,
+        errorCode: 500,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { switchReadinessState } = useReadiness();
+
+    // when
+    await switchReadinessState(dummyDatacentersReadiness[0].datacenter, true);
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'error',
+        title: 'notifications.readiness.switch.failure',
+      });
+    });
+  });
 });
diff --git a/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts b/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts
index ea95dead9e..0df0d56b67 100644
--- a/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts
+++ b/hermes-console-vue/src/composables/readiness/use-readiness/useReadiness.ts
@@ -1,5 +1,10 @@
-import { fetchReadiness as getReadiness } from '@/api/hermes-client';
+import {
+  fetchReadiness as getReadiness,
+  switchReadiness,
+} from '@/api/hermes-client';
 import { ref } from 'vue';
+import { useGlobalI18n } from '@/i18n';
+import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications';
 import type { DatacenterReadiness } from '@/api/datacenter-readiness';
 import type { Ref } from 'vue';
 
@@ -7,6 +12,10 @@ export interface UseReadiness {
   datacentersReadiness: Ref<DatacenterReadiness[] | undefined>;
   loading: Ref<boolean>;
   error: Ref<UseReadinessErrors>;
+  switchReadinessState: (
+    datacenter: string,
+    desiredState: boolean,
+  ) => Promise<boolean>;
 }
 
 export interface UseReadinessErrors {
@@ -14,6 +23,8 @@ export interface UseReadinessErrors {
 }
 
 export function useReadiness(): UseReadiness {
+  const notificationStore = useNotificationsStore();
+
   const datacentersReadiness = ref<DatacenterReadiness[]>();
   const error = ref<UseReadinessErrors>({
     fetchReadiness: null,
@@ -31,11 +42,37 @@ export function useReadiness(): UseReadiness {
     }
   };
 
+  const switchReadinessState = async (
+    datacenter: string,
+    desiredState: boolean,
+  ): Promise<boolean> => {
+    try {
+      await switchReadiness(datacenter, desiredState);
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t('notifications.readiness.switch.success', {
+          datacenter,
+        }),
+        type: 'success',
+      });
+      return true;
+    } catch (e) {
+      notificationStore.dispatchNotification({
+        title: useGlobalI18n().t('notifications.readiness.switch.failure', {
+          datacenter,
+        }),
+        text: (e as Error).message,
+        type: 'error',
+      });
+      return false;
+    }
+  };
+
   fetchReadiness();
 
   return {
     datacentersReadiness,
     loading,
     error,
+    switchReadinessState,
   };
 }
diff --git a/hermes-console-vue/src/composables/roles/use-roles/useRoles.spec.ts b/hermes-console-vue/src/composables/roles/use-roles/useRoles.spec.ts
index 9849da6bba..712214a324 100644
--- a/hermes-console-vue/src/composables/roles/use-roles/useRoles.spec.ts
+++ b/hermes-console-vue/src/composables/roles/use-roles/useRoles.spec.ts
@@ -1,6 +1,12 @@
 import { afterEach } from 'vitest';
+import { createTestingPinia } from '@pinia/testing';
 import { dummyRoles } from '@/dummy/roles';
+import {
+  expectNotificationDispatched,
+  notificationStoreSpy,
+} from '@/utils/test-utils';
 import { fetchRolesErrorHandler, fetchRolesHandler } from '@/mocks/handlers';
+import { setActivePinia } from 'pinia';
 import { setupServer } from 'msw/node';
 import { useRoles } from '@/composables/roles/use-roles/useRoles';
 import { waitFor } from '@testing-library/vue';
@@ -12,6 +18,14 @@ describe('useRoles', () => {
     fetchRolesHandler({ roles: dummyRoles, path: '/roles' }),
   );
 
+  const pinia = createTestingPinia({
+    fakeApp: true,
+  });
+
+  beforeEach(() => {
+    setActivePinia(pinia);
+  });
+
   afterEach(() => {
     server.resetHandlers();
   });
@@ -83,6 +97,7 @@ describe('useRoles', () => {
     // given
     server.use(fetchRolesErrorHandler({ errorCode: 500, path: '/roles' }));
     server.listen();
+    const notificationStore = notificationStoreSpy();
 
     // when
     const { loading, error } = useRoles(null, null);
@@ -91,6 +106,10 @@ describe('useRoles', () => {
     await waitFor(() => {
       expect(loading.value).toBeFalsy();
       expect(error.value.fetchRoles).not.toBeNull();
+      expectNotificationDispatched(notificationStore, {
+        type: 'warning',
+        text: 'notifications.roles.fetch.failure',
+      });
     });
   });
 });
diff --git a/hermes-console-vue/src/composables/roles/use-roles/useRoles.ts b/hermes-console-vue/src/composables/roles/use-roles/useRoles.ts
index 14c5da62aa..d6e08e5cc9 100644
--- a/hermes-console-vue/src/composables/roles/use-roles/useRoles.ts
+++ b/hermes-console-vue/src/composables/roles/use-roles/useRoles.ts
@@ -1,5 +1,7 @@
 import { fetchRoles as getRoles } from '@/api/hermes-client';
 import { ref } from 'vue';
+import { useGlobalI18n } from '@/i18n';
+import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications';
 import type { Ref } from 'vue';
 import type { Role } from '@/api/role';
 
@@ -17,6 +19,8 @@ export function useRoles(
   topicName: string | null,
   subscriptionName: string | null,
 ): UseRoles {
+  const notificationStore = useNotificationsStore();
+
   const roles = ref<Role[]>();
   const error = ref<UseRolesErrors>({
     fetchRoles: null,
@@ -30,7 +34,10 @@ export function useRoles(
       ).data;
     } catch (e) {
       error.value.fetchRoles = e as Error;
-      // TODO should send notification
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t('notifications.roles.fetch.failure'),
+        type: 'warning',
+      });
     } finally {
       loading.value = false;
     }
diff --git a/hermes-console-vue/src/composables/search/useSearch.ts b/hermes-console-vue/src/composables/search/useSearch.ts
index e21275f372..bd9cb16746 100644
--- a/hermes-console-vue/src/composables/search/useSearch.ts
+++ b/hermes-console-vue/src/composables/search/useSearch.ts
@@ -68,11 +68,14 @@ export function useSearch(): UseSearch {
   };
 }
 
+const patternPrefix = '(?i).*';
+const patternSuffix = '.*';
+
 function buildQuery(filter: SearchFilter, pattern: string): Object {
   return {
     query: {
       [filter]: {
-        like: pattern,
+        like: `${patternPrefix}${pattern}${patternSuffix}`,
       },
     },
   };
diff --git a/hermes-console-vue/src/composables/use-stats/useStats.spec.ts b/hermes-console-vue/src/composables/stats/use-stats/useStats.spec.ts
similarity index 98%
rename from hermes-console-vue/src/composables/use-stats/useStats.spec.ts
rename to hermes-console-vue/src/composables/stats/use-stats/useStats.spec.ts
index 6c245bc823..eaba154479 100644
--- a/hermes-console-vue/src/composables/use-stats/useStats.spec.ts
+++ b/hermes-console-vue/src/composables/stats/use-stats/useStats.spec.ts
@@ -2,7 +2,7 @@ import { afterEach } from 'vitest';
 import { fetchStatsErrorHandler, fetchStatsHandler } from '@/mocks/handlers';
 import { setupServer } from 'msw/node';
 import { statsResponse } from '@/dummy/stats';
-import { useStats } from '@/composables/use-stats/useStats';
+import { useStats } from '@/composables/stats/use-stats/useStats';
 import { waitFor } from '@testing-library/vue';
 
 describe('useStats', () => {
diff --git a/hermes-console-vue/src/composables/use-stats/useStats.ts b/hermes-console-vue/src/composables/stats/use-stats/useStats.ts
similarity index 100%
rename from hermes-console-vue/src/composables/use-stats/useStats.ts
rename to hermes-console-vue/src/composables/stats/use-stats/useStats.ts
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 519f80e169..e78f06be4d 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
@@ -1,62 +1,51 @@
-import { beforeEach } from 'vitest';
+import { afterEach } from 'vitest';
+import { createTestingPinia } from '@pinia/testing';
 import {
   dummySubscription,
   dummySubscriptionHealth,
   dummySubscriptionMetrics,
-  dummyUndeliveredMessage,
-  dummyUndeliveredMessages,
 } from '@/dummy/subscription';
+import { expect } from 'vitest';
+import {
+  expectNotificationDispatched,
+  notificationStoreSpy,
+} from '@/utils/test-utils';
+import {
+  fetchSubscriptionErrorHandler,
+  fetchSubscriptionHealthErrorHandler,
+  fetchSubscriptionLastUndeliveredMessageErrorHandler,
+  fetchSubscriptionMetricsErrorHandler,
+  fetchSubscriptionUndeliveredMessagesErrorHandler,
+  removeSubscriptionErrorHandler,
+  removeSubscriptionHandler,
+  subscriptionStateErrorHandler,
+  subscriptionStateHandler,
+  successfulSubscriptionHandlers,
+} from '@/mocks/handlers';
+import { setActivePinia } from 'pinia';
+import { setupServer } from 'msw/node';
 import { useSubscription } from '@/composables/subscription/use-subscription/useSubscription';
 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>;
+import type { UseSubscriptionsErrors } from '@/composables/subscription/use-subscription/useSubscription';
 
 describe('useSubscription', () => {
-  beforeEach(() => {
-    vitest.resetAllMocks();
-  });
+  const server = setupServer(...successfulSubscriptionHandlers);
 
-  it('should hit expected Hermes API endpoints', async () => {
-    // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscription });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionMetrics });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionHealth });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessages });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessage });
+  const pinia = createTestingPinia({
+    fakeApp: true,
+  });
 
-    // when
-    useSubscription('topic', 'subscription');
+  beforeEach(() => {
+    setActivePinia(pinia);
+  });
 
-    // then
-    await waitFor(() => {
-      expect(mockedAxios.get.mock.calls[0][0]).toBe(
-        '/topics/topic/subscriptions/subscription',
-      );
-      expect(mockedAxios.get.mock.calls[1][0]).toBe(
-        '/topics/topic/subscriptions/subscription/metrics',
-      );
-      expect(mockedAxios.get.mock.calls[2][0]).toBe(
-        '/topics/topic/subscriptions/subscription/health',
-      );
-      expect(mockedAxios.get.mock.calls[3][0]).toBe(
-        '/topics/topic/subscriptions/subscription/undelivered',
-      );
-      expect(mockedAxios.get.mock.calls[4][0]).toBe(
-        '/topics/topic/subscriptions/subscription/undelivered/last',
-      );
-    });
+  afterEach(() => {
+    server.resetHandlers();
   });
 
   it('should fetch subscription details from Hermes API', async () => {
     // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscription });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionMetrics });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionHealth });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessages });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessage });
+    server.listen();
 
     // when
     const {
@@ -65,14 +54,14 @@ describe('useSubscription', () => {
       subscriptionHealth,
       loading,
       error,
-    } = useSubscription('topic', 'subscription');
+    } = useSubscription(dummySubscription.topicName, dummySubscription.name);
 
     // then
     expect(loading.value).toBeTruthy();
 
     await waitFor(() => {
       expect(loading.value).toBeFalsy();
-      expect(error.value).toBeFalsy();
+      expectNoErrors(error.value);
       expect(subscription.value).toEqual(dummySubscription);
       expect(subscriptionMetrics.value).toEqual(dummySubscriptionMetrics);
       expect(subscriptionHealth.value).toEqual(dummySubscriptionHealth);
@@ -81,11 +70,8 @@ describe('useSubscription', () => {
 
   it('should set error to true on subscription endpoint failure', async () => {
     // given
-    mockedAxios.get.mockRejectedValueOnce({});
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionMetrics });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionHealth });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessages });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessage });
+    server.use(fetchSubscriptionErrorHandler({ errorCode: 500 }));
+    server.listen();
 
     // when
     const { loading, error } = useSubscription('topic', 'subscription');
@@ -93,85 +79,289 @@ describe('useSubscription', () => {
     // then
     await waitFor(() => {
       expect(loading.value).toBeFalsy();
-      expect(error.value).toBeTruthy();
+      expect(error.value.fetchSubscription).not.toBeNull();
     });
   });
 
   it('should set error to true on subscription metrics endpoint failure', async () => {
     // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscription });
-    mockedAxios.get.mockRejectedValueOnce({});
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionHealth });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessages });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessage });
+    server.use(fetchSubscriptionMetricsErrorHandler({ errorCode: 500 }));
+    server.listen();
 
     // when
-    const { loading, error } = useSubscription('topic', 'subscription');
+    const { loading, error } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
 
     // then
     await waitFor(() => {
       expect(loading.value).toBeFalsy();
-      expect(error.value).toBeTruthy();
+      expect(error.value.fetchSubscriptionMetrics).not.toBeNull();
     });
   });
 
   it('should set error to true on subscription health endpoint failure', async () => {
     // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscription });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionMetrics });
-    mockedAxios.get.mockRejectedValueOnce({});
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessages });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessage });
+    server.use(fetchSubscriptionHealthErrorHandler({ errorCode: 500 }));
+    server.listen();
 
     // when
-    const { loading, error } = useSubscription('topic', 'subscription');
+    const { loading, error } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
 
     // then
     await waitFor(() => {
       expect(loading.value).toBeFalsy();
-      expect(error.value).toBeTruthy();
+      expect(error.value.fetchSubscriptionHealth).not.toBeNull();
     });
   });
 
   it('should set last undelivered message to `null` on backend HTTP 404', async () => {
     // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscription });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionMetrics });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionHealth });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessages });
-    mockedAxios.get.mockRejectedValueOnce({});
+    server.use(
+      fetchSubscriptionLastUndeliveredMessageErrorHandler({ errorCode: 404 }),
+    );
+    server.listen();
 
     // when
     const { subscriptionLastUndeliveredMessage, loading, error } =
-      useSubscription('topic', 'subscription');
+      useSubscription(dummySubscription.topicName, dummySubscription.name);
 
     // then
     await waitFor(() => {
       expect(loading.value).toBeFalsy();
-      expect(error.value).toBeFalsy();
+      expect(
+        error.value.fetchSubscriptionLastUndeliveredMessage,
+      ).not.toBeNull();
       expect(subscriptionLastUndeliveredMessage.value).toBeNull();
     });
   });
 
   it('should ignore undelivered endpoint failure and set empty list', async () => {
     // given
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscription });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionMetrics });
-    mockedAxios.get.mockResolvedValueOnce({ data: dummySubscriptionHealth });
-    mockedAxios.get.mockRejectedValueOnce({});
-    mockedAxios.get.mockResolvedValueOnce({ data: dummyUndeliveredMessage });
+    server.use(
+      fetchSubscriptionUndeliveredMessagesErrorHandler({ errorCode: 404 }),
+    );
+    server.listen();
 
     // when
     const { subscriptionUndeliveredMessages, loading, error } = useSubscription(
-      'topic',
-      'subscription',
+      dummySubscription.topicName,
+      dummySubscription.name,
     );
 
     // then
     await waitFor(() => {
       expect(loading.value).toBeFalsy();
-      expect(error.value).toBeFalsy();
+      expect(error.value.fetchSubscriptionUndeliveredMessages).not.toBeNull();
       expect(subscriptionUndeliveredMessages.value).toEqual([]);
     });
   });
+
+  it('should show message that removing subscription was successful', async () => {
+    // given
+    server.use(
+      removeSubscriptionHandler({
+        topic: dummySubscription.topicName,
+        subscription: dummySubscription.name,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeSubscription } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
+
+    // when
+    await removeSubscription();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'success',
+        text: 'notifications.subscription.delete.success',
+      });
+    });
+  });
+
+  it('should show message that removing subscription was unsuccessful', async () => {
+    // given
+    server.use(
+      removeSubscriptionErrorHandler({
+        topic: dummySubscription.topicName,
+        subscription: dummySubscription.name,
+        errorCode: 500,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeSubscription } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
+
+    // when
+    await removeSubscription();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'error',
+        title: 'notifications.subscription.delete.failure',
+      });
+    });
+  });
+
+  it('should show message that suspending subscription was successful', async () => {
+    // given
+    server.use(
+      subscriptionStateHandler({
+        topic: dummySubscription.topicName,
+        subscription: dummySubscription.name,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { suspendSubscription } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
+
+    // when
+    await suspendSubscription();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'success',
+        text: 'notifications.subscription.suspend.success',
+      });
+    });
+  });
+
+  it('should show message that suspending subscription was unsuccessful', async () => {
+    // given
+    server.use(
+      subscriptionStateErrorHandler({
+        topic: dummySubscription.topicName,
+        subscription: dummySubscription.name,
+        errorCode: 500,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { suspendSubscription } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
+
+    // when
+    await suspendSubscription();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'error',
+        title: 'notifications.subscription.suspend.failure',
+      });
+    });
+  });
+
+  it('should show message that activating subscription was successful', async () => {
+    // given
+    server.use(
+      subscriptionStateHandler({
+        topic: dummySubscription.topicName,
+        subscription: dummySubscription.name,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { activateSubscription } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
+
+    // when
+    await activateSubscription();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'success',
+        text: 'notifications.subscription.activate.success',
+      });
+    });
+  });
+
+  it('should show message that activating subscription was unsuccessful', async () => {
+    // given
+    server.use(
+      subscriptionStateErrorHandler({
+        topic: dummySubscription.topicName,
+        subscription: dummySubscription.name,
+        errorCode: 500,
+      }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { activateSubscription } = useSubscription(
+      dummySubscription.topicName,
+      dummySubscription.name,
+    );
+
+    // when
+    await activateSubscription();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'error',
+        title: 'notifications.subscription.activate.failure',
+      });
+    });
+  });
 });
+
+function expectErrors(
+  errors: UseSubscriptionsErrors,
+  {
+    fetchSubscription = false,
+    fetchOwner = false,
+    fetchSubscriptionMetrics = false,
+    fetchSubscriptionHealth = false,
+    fetchSubscriptionUndeliveredMessages = false,
+    fetchSubscriptionLastUndeliveredMessage = false,
+  },
+) {
+  (fetchSubscription && expect(errors.fetchSubscription).not.toBeNull()) ||
+    expect(errors.fetchSubscription).toBeNull();
+  (fetchOwner && expect(errors.fetchOwner).not.toBeNull()) ||
+    expect(errors.fetchOwner).toBeNull();
+  (fetchSubscriptionMetrics &&
+    expect(errors.fetchSubscriptionMetrics).not.toBeNull()) ||
+    expect(errors.fetchSubscriptionMetrics).toBeNull();
+  (fetchSubscriptionHealth &&
+    expect(errors.fetchSubscriptionHealth).not.toBeNull()) ||
+    expect(errors.fetchSubscriptionHealth).toBeNull();
+  (fetchSubscriptionUndeliveredMessages &&
+    expect(errors.fetchSubscriptionUndeliveredMessages).not.toBeNull()) ||
+    expect(errors.fetchSubscriptionUndeliveredMessages).toBeNull();
+  (fetchSubscriptionLastUndeliveredMessage &&
+    expect(errors.fetchSubscriptionLastUndeliveredMessage).not.toBeNull()) ||
+    expect(errors.fetchSubscriptionLastUndeliveredMessage).toBeNull();
+}
+
+function expectNoErrors(errors: UseSubscriptionsErrors) {
+  expectErrors(errors, {});
+}
diff --git a/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.ts b/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.ts
index bb8c24891f..52dad90eed 100644
--- a/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.ts
+++ b/hermes-console-vue/src/composables/subscription/use-subscription/useSubscription.ts
@@ -1,94 +1,227 @@
-import { computed, ref } from 'vue';
-import axios from 'axios';
+import {
+  activateSubscription as activate,
+  removeSubscription as deleteSubscription,
+  fetchOwner as getOwner,
+  fetchSubscription as getSubscription,
+  fetchSubscriptionHealth as getSubscriptionHealth,
+  fetchSubscriptionLastUndeliveredMessage as getSubscriptionLastUndeliveredMessage,
+  fetchSubscriptionMetrics as getSubscriptionMetrics,
+  fetchSubscriptionUndeliveredMessages as getSubscriptionUndeliveredMessages,
+  suspendSubscription as suspend,
+} from '@/api/hermes-client';
+import { ref } from 'vue';
+import { useGlobalI18n } from '@/i18n';
+import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications';
+import type { Owner } from '@/api/owner';
+import type { Ref } from 'vue';
 import type { SentMessageTrace } from '@/api/subscription-undelivered';
 import type { Subscription } from '@/api/subscription';
 import type { SubscriptionHealth } from '@/api/subscription-health';
 import type { SubscriptionMetrics } from '@/api/subscription-metrics';
 
-export function useSubscription(topicName: string, subscriptionName: string) {
+export interface UseSubscription {
+  subscription: Ref<Subscription | undefined>;
+  owner: Ref<Owner | undefined>;
+  subscriptionMetrics: Ref<SubscriptionMetrics | undefined>;
+  subscriptionHealth: Ref<SubscriptionHealth | undefined>;
+  subscriptionUndeliveredMessages: Ref<SentMessageTrace[] | null>;
+  subscriptionLastUndeliveredMessage: Ref<SentMessageTrace | null>;
+  loading: Ref<boolean>;
+  error: Ref<UseSubscriptionsErrors>;
+  removeSubscription: () => Promise<boolean>;
+  suspendSubscription: () => Promise<boolean>;
+  activateSubscription: () => Promise<boolean>;
+}
+
+export interface UseSubscriptionsErrors {
+  fetchSubscription: Error | null;
+  fetchOwner: Error | null;
+  fetchSubscriptionMetrics: Error | null;
+  fetchSubscriptionHealth: Error | null;
+  fetchSubscriptionUndeliveredMessages: Error | null;
+  fetchSubscriptionLastUndeliveredMessage: Error | null;
+}
+
+export function useSubscription(
+  topicName: string,
+  subscriptionName: string,
+): UseSubscription {
+  const notificationStore = useNotificationsStore();
+
   const subscription = ref<Subscription>();
+  const owner = ref<Owner>();
   const subscriptionMetrics = ref<SubscriptionMetrics>();
   const subscriptionHealth = ref<SubscriptionHealth>();
-  const subscriptionUndeliveredMessages = ref<SentMessageTrace[]>();
-  const subscriptionLastUndeliveredMessage = ref<SentMessageTrace | null>();
-
-  const error = ref<boolean>(false);
-
-  const loading = computed(
-    () =>
-      !error.value &&
-      !(
-        subscription.value &&
-        subscriptionMetrics.value &&
-        subscriptionHealth.value &&
-        subscriptionUndeliveredMessages.value &&
-        subscriptionLastUndeliveredMessage.value !== undefined
-      ),
-  );
-
-  function fetchSubscription() {
-    axios
-      .get<Subscription>(
-        `/topics/${topicName}/subscriptions/${subscriptionName}`,
-      )
-      .then((response) => (subscription.value = response.data))
-      .catch(() => (error.value = true));
-  }
-
-  function fetchSubscriptionMetrics() {
-    axios
-      .get<SubscriptionMetrics>(
-        `/topics/${topicName}/subscriptions/${subscriptionName}/metrics`,
-      )
-      .then((response) => (subscriptionMetrics.value = response.data))
-      .catch(() => (error.value = true));
-  }
-
-  function fetchSubscriptionHealth() {
-    axios
-      .get<SubscriptionHealth>(
-        `/topics/${topicName}/subscriptions/${subscriptionName}/health`,
-      )
-      .then((response) => (subscriptionHealth.value = response.data))
-      .catch(() => (error.value = true));
-  }
-
-  function fetchSubscriptionUndeliveredMessages() {
-    axios
-      .get<SentMessageTrace[]>(
-        `/topics/${topicName}/subscriptions/${subscriptionName}/undelivered`,
-      )
-      .then(
-        (response) => (subscriptionUndeliveredMessages.value = response.data),
-      )
-      .catch(() => (subscriptionUndeliveredMessages.value = []));
-  }
-
-  function fetchSubscriptionLastUndeliveredMessage() {
-    axios
-      .get<SentMessageTrace>(
-        `/topics/${topicName}/subscriptions/${subscriptionName}/undelivered/last`,
-      )
-      .then(
-        (response) =>
-          (subscriptionLastUndeliveredMessage.value = response.data),
-      )
-      .catch(() => (subscriptionLastUndeliveredMessage.value = null));
-  }
+  const subscriptionUndeliveredMessages = ref<SentMessageTrace[]>([]);
+  const subscriptionLastUndeliveredMessage = ref<SentMessageTrace | null>(null);
+  const loading = ref(false);
+  const error = ref<UseSubscriptionsErrors>({
+    fetchSubscription: null,
+    fetchOwner: null,
+    fetchSubscriptionMetrics: null,
+    fetchSubscriptionHealth: null,
+    fetchSubscriptionUndeliveredMessages: null,
+    fetchSubscriptionLastUndeliveredMessage: null,
+  });
+
+  const fetchSubscription = async () => {
+    try {
+      loading.value = true;
+      await fetchSubscriptionInfo();
+      if (subscription.value) {
+        await Promise.allSettled([
+          fetchSubscriptionOwner(subscription.value.owner.id),
+          fetchSubscriptionMetrics(),
+          fetchSubscriptionHealth(),
+          fetchSubscriptionUndeliveredMessages(),
+          fetchSubscriptionLastUndeliveredMessage(),
+        ]);
+      }
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const fetchSubscriptionInfo = async () => {
+    try {
+      subscription.value = (
+        await getSubscription(topicName, subscriptionName)
+      ).data;
+    } catch (e) {
+      error.value.fetchSubscription = e as Error;
+    }
+  };
+
+  const fetchSubscriptionOwner = async (ownerId: string) => {
+    try {
+      owner.value = (await getOwner(ownerId)).data;
+    } catch (e) {
+      error.value.fetchOwner = e as Error;
+    }
+  };
+
+  const fetchSubscriptionMetrics = async () => {
+    try {
+      subscriptionMetrics.value = (
+        await getSubscriptionMetrics(topicName, subscriptionName)
+      ).data;
+    } catch (e) {
+      error.value.fetchSubscriptionMetrics = e as Error;
+    }
+  };
+
+  const fetchSubscriptionHealth = async () => {
+    try {
+      subscriptionHealth.value = (
+        await getSubscriptionHealth(topicName, subscriptionName)
+      ).data;
+    } catch (e) {
+      error.value.fetchSubscriptionHealth = e as Error;
+    }
+  };
+
+  const fetchSubscriptionUndeliveredMessages = async () => {
+    try {
+      subscriptionUndeliveredMessages.value = (
+        await getSubscriptionUndeliveredMessages(topicName, subscriptionName)
+      ).data;
+    } catch (e) {
+      error.value.fetchSubscriptionUndeliveredMessages = e as Error;
+    }
+  };
+
+  const fetchSubscriptionLastUndeliveredMessage = async () => {
+    try {
+      subscriptionLastUndeliveredMessage.value = (
+        await getSubscriptionLastUndeliveredMessage(topicName, subscriptionName)
+      ).data;
+    } catch (e) {
+      error.value.fetchSubscriptionLastUndeliveredMessage = e as Error;
+    }
+  };
+
+  const removeSubscription = async (): Promise<boolean> => {
+    try {
+      await deleteSubscription(topicName, subscriptionName);
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t('notifications.subscription.delete.success', {
+          subscriptionName,
+        }),
+        type: 'success',
+      });
+      return true;
+    } catch (e) {
+      notificationStore.dispatchNotification({
+        title: useGlobalI18n().t('notifications.subscription.delete.failure', {
+          subscriptionName,
+        }),
+        text: (e as Error).message,
+        type: 'error',
+      });
+      return false;
+    }
+  };
+
+  const suspendSubscription = async (): Promise<boolean> => {
+    try {
+      await suspend(topicName, subscriptionName);
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t('notifications.subscription.suspend.success', {
+          subscriptionName,
+        }),
+        type: 'success',
+      });
+      return true;
+    } catch (e) {
+      notificationStore.dispatchNotification({
+        title: useGlobalI18n().t('notifications.subscription.suspend.failure', {
+          subscriptionName,
+        }),
+        text: (e as Error).message,
+        type: 'error',
+      });
+      return false;
+    }
+  };
+
+  const activateSubscription = async (): Promise<boolean> => {
+    try {
+      await activate(topicName, subscriptionName);
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t('notifications.subscription.activate.success', {
+          subscriptionName,
+        }),
+        type: 'success',
+      });
+      return true;
+    } catch (e) {
+      notificationStore.dispatchNotification({
+        title: useGlobalI18n().t(
+          'notifications.subscription.activate.failure',
+          {
+            subscriptionName,
+          },
+        ),
+        text: (e as Error).message,
+        type: 'error',
+      });
+      return false;
+    }
+  };
 
   fetchSubscription();
-  fetchSubscriptionMetrics();
-  fetchSubscriptionHealth();
-  fetchSubscriptionUndeliveredMessages();
-  fetchSubscriptionLastUndeliveredMessage();
 
   return {
     subscription,
+    owner,
     subscriptionMetrics,
     subscriptionHealth,
     subscriptionUndeliveredMessages,
     subscriptionLastUndeliveredMessage,
     loading,
     error,
+    removeSubscription,
+    suspendSubscription,
+    activateSubscription,
   };
 }
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 cbcaafd22b..f002d8c8cd 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
@@ -1,32 +1,49 @@
 import { afterEach, describe, expect } from 'vitest';
+import { createTestingPinia } from '@pinia/testing';
 import {
-  dummySubscription,
-  secondDummySubscription,
-} from '@/dummy/subscription';
-import {
+  dummyOwner,
   dummyTopic,
   dummyTopicMessagesPreview,
   dummyTopicMetrics,
-  dummyTopicOwner,
 } from '@/dummy/topic';
 import {
+  dummySubscription,
+  secondDummySubscription,
+} from '@/dummy/subscription';
+import {
+  expectNotificationDispatched,
+  notificationStoreSpy,
+} from '@/utils/test-utils';
+import {
+  fetchOwnerErrorHandler,
   fetchTopicErrorHandler,
   fetchTopicMessagesPreviewErrorHandler,
   fetchTopicMetricsErrorHandler,
-  fetchTopicOwnerErrorHandler,
   fetchTopicSubscriptionDetailsErrorHandler,
   fetchTopicSubscriptionsErrorHandler,
+  removeTopicErrorHandler,
+  removeTopicHandler,
   successfulTopicHandlers,
 } from '@/mocks/handlers';
+import { setActivePinia } from 'pinia';
 import { setupServer } from 'msw/node';
 import { useTopic } from '@/composables/topic/use-topic/useTopic';
+import { waitFor } from '@testing-library/vue';
 import type { UseTopicErrors } from '@/composables/topic/use-topic/useTopic';
 
 describe('useTopic', () => {
   const server = setupServer(...successfulTopicHandlers);
 
   const topicName = dummyTopic.name;
-  const topicOwner = dummyTopicOwner.id;
+  const topicOwner = dummyOwner.id;
+
+  const pinia = createTestingPinia({
+    fakeApp: true,
+  });
+
+  beforeEach(() => {
+    setActivePinia(pinia);
+  });
 
   afterEach(() => {
     server.resetHandlers();
@@ -61,7 +78,7 @@ describe('useTopic', () => {
     // and: correct data was returned
     await topicPromise;
     expect(topic.value).toEqual(dummyTopic);
-    expect(owner.value).toEqual(dummyTopicOwner);
+    expect(owner.value).toEqual(dummyOwner);
     expect(metrics.value).toEqual(dummyTopicMetrics);
     expect(messages.value).toEqual(dummyTopicMessagesPreview);
     expect(subscriptions.value).toEqual([
@@ -76,7 +93,7 @@ describe('useTopic', () => {
 
   const expectedDataForErrorTest = {
     expectedTopic: dummyTopic,
-    expectedOwner: dummyTopicOwner,
+    expectedOwner: dummyOwner,
     expectedMessages: dummyTopicMessagesPreview,
     expectedMetrics: dummyTopicMetrics,
     expectedSubscriptions: [dummySubscription, secondDummySubscription],
@@ -93,7 +110,7 @@ describe('useTopic', () => {
       expectedSubscriptions: undefined,
     },
     {
-      mockHandler: fetchTopicOwnerErrorHandler({ topicOwner }),
+      mockHandler: fetchOwnerErrorHandler({ owner: topicOwner }),
       expectedErrors: { fetchOwner: true },
       ...expectedDataForErrorTest,
       expectedOwner: undefined,
@@ -173,6 +190,48 @@ describe('useTopic', () => {
       expectErrors(error.value, expectedErrors);
     },
   );
+
+  it('should show message that removing topic was successful', async () => {
+    // given
+    server.use(removeTopicHandler({ topic: dummyTopic.name }));
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeTopic } = useTopic(dummyTopic.name);
+
+    // when
+    await removeTopic();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'success',
+        text: 'notifications.topic.delete.success',
+      });
+    });
+  });
+
+  it('should show message that removing topic was unsuccessful', async () => {
+    // given
+    server.use(
+      removeTopicErrorHandler({ topic: dummyTopic.name, errorCode: 500 }),
+    );
+    server.listen();
+    const notificationStore = notificationStoreSpy();
+
+    const { removeTopic } = useTopic(dummyTopic.name);
+
+    // when
+    await removeTopic();
+
+    // then
+    await waitFor(() => {
+      expectNotificationDispatched(notificationStore, {
+        type: 'error',
+        title: 'notifications.topic.delete.failure',
+      });
+    });
+  });
 });
 
 function expectErrors(
diff --git a/hermes-console-vue/src/composables/topic/use-topic/useTopic.ts b/hermes-console-vue/src/composables/topic/use-topic/useTopic.ts
index 5f5d8ff6a1..1e54cb3cf1 100644
--- a/hermes-console-vue/src/composables/topic/use-topic/useTopic.ts
+++ b/hermes-console-vue/src/composables/topic/use-topic/useTopic.ts
@@ -1,13 +1,16 @@
 import {
+  removeTopic as deleteTopic,
   fetchOfflineClientsSource as getOfflineClientsSource,
   fetchTopic as getTopic,
   fetchTopicMessagesPreview as getTopicMessagesPreview,
   fetchTopicMetrics as getTopicMetrics,
-  fetchTopicOwner as getTopicOwner,
+  fetchOwner as getTopicOwner,
   fetchTopicSubscriptionDetails as getTopicSubscriptionDetails,
   fetchTopicSubscriptions as getTopicSubscriptions,
 } from '@/api/hermes-client';
 import { ref } from 'vue';
+import { useGlobalI18n } from '@/i18n';
+import { useNotificationsStore } from '@/store/app-notifications/useAppNotifications';
 import type {
   MessagePreview,
   TopicMetrics,
@@ -29,6 +32,7 @@ export interface UseTopic {
   error: Ref<UseTopicErrors>;
   fetchTopic: () => Promise<void>;
   fetchOfflineClientsSource: () => Promise<void>;
+  removeTopic: () => Promise<boolean>;
 }
 
 export interface UseTopicErrors {
@@ -41,6 +45,8 @@ export interface UseTopicErrors {
 }
 
 export function useTopic(topicName: string): UseTopic {
+  const notificationStore = useNotificationsStore();
+
   const topic = ref<TopicWithSchema>();
   const owner = ref<Owner>();
   const messages = ref<MessagePreview[]>();
@@ -142,6 +148,28 @@ export function useTopic(topicName: string): UseTopic {
     }
   };
 
+  const removeTopic = async (): Promise<boolean> => {
+    try {
+      await deleteTopic(topicName);
+      notificationStore.dispatchNotification({
+        text: useGlobalI18n().t('notifications.topic.delete.success', {
+          topicName,
+        }),
+        type: 'success',
+      });
+      return true;
+    } catch (e) {
+      notificationStore.dispatchNotification({
+        title: useGlobalI18n().t('notifications.topic.delete.failure', {
+          topicName,
+        }),
+        text: (e as Error).message,
+        type: 'error',
+      });
+      return false;
+    }
+  };
+
   return {
     topic,
     owner,
@@ -153,5 +181,6 @@ export function useTopic(topicName: string): UseTopic {
     error,
     fetchTopic,
     fetchOfflineClientsSource,
+    removeTopic,
   };
 }
diff --git a/hermes-console-vue/src/utils/jwt-utils.ts b/hermes-console-vue/src/dummy/jwt-tokens.ts
similarity index 80%
rename from hermes-console-vue/src/utils/jwt-utils.ts
rename to hermes-console-vue/src/dummy/jwt-tokens.ts
index b5d85b5f79..4c9b3e166f 100644
--- a/hermes-console-vue/src/utils/jwt-utils.ts
+++ b/hermes-console-vue/src/dummy/jwt-tokens.ts
@@ -1,4 +1,4 @@
-export const validToken: string =
+export const dummyValidToken: string =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxOTk2MjM5MDIyfQ.3CP-EemSMKu8O2cZNJCAT4PUCiolDcHIx3Du7EpR8EY';
-export const expiredToken: string =
+export const dummyExpiredToken: string =
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiZXhwIjoxOTYyMzkwMjJ9.dqPw8DoRNgDoV68oprIwJG6546VccGfnoPgyMOGT8yQ';
diff --git a/hermes-console-vue/src/dummy/store.ts b/hermes-console-vue/src/dummy/store.ts
index b6a9347881..3c4c940f6a 100644
--- a/hermes-console-vue/src/dummy/store.ts
+++ b/hermes-console-vue/src/dummy/store.ts
@@ -3,6 +3,7 @@ import { dummyAppConfig } from '@/dummy/app-config';
 import type { AppConfigStoreState } from '@/store/app-config/types';
 import type { AuthStoreState } from '@/store/auth/types';
 import type { ConsistencyStoreState } from '@/store/consistency/types';
+import type { NotificationsState } from '@/store/app-notifications/types';
 
 export const appConfigStoreState: AppConfigStoreState = {
   appConfig: dummyAppConfig,
@@ -12,6 +13,10 @@ export const appConfigStoreState: AppConfigStoreState = {
   },
 };
 
+export const notificationsStoreState: NotificationsState = {
+  notifications: [],
+};
+
 export const authStoreState: AuthStoreState = {
   accessToken: '',
   codeVerifier: '',
diff --git a/hermes-console-vue/src/dummy/subscription.ts b/hermes-console-vue/src/dummy/subscription.ts
index d571e0660a..ab3317fda9 100644
--- a/hermes-console-vue/src/dummy/subscription.ts
+++ b/hermes-console-vue/src/dummy/subscription.ts
@@ -34,7 +34,7 @@ export const dummySubscription: Subscription = {
   trackingMode: 'trackingOff',
   owner: {
     source: 'Service Catalog',
-    id: '42',
+    id: '41',
   },
   monitoringDetails: {
     severity: Severity.NON_IMPORTANT,
diff --git a/hermes-console-vue/src/dummy/topic.ts b/hermes-console-vue/src/dummy/topic.ts
index f3d87ed02b..94d820fc23 100644
--- a/hermes-console-vue/src/dummy/topic.ts
+++ b/hermes-console-vue/src/dummy/topic.ts
@@ -53,7 +53,7 @@ export const dummyTopic: TopicWithSchema = {
   modifiedAt: 1636451113.517,
 };
 
-export const dummyTopicOwner: Owner = {
+export const dummyOwner: Owner = {
   id: '41',
   name: 'your-super-service',
   url: 'https://google.pl?q=your-super-service',
diff --git a/hermes-console-vue/src/i18n/en-US.ts b/hermes-console-vue/src/i18n/en-US.ts
index b2e2f6ffac..aa77e58654 100644
--- a/hermes-console-vue/src/i18n/en-US.ts
+++ b/hermes-console-vue/src/i18n/en-US.ts
@@ -13,6 +13,11 @@ const en_US = {
     signIn: 'Sign in',
     logout: 'Logout',
   },
+  confirmationDialog: {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    confirmText: "Type 'prod' to confirm action.",
+  },
   consistency: {
     connectionError: {
       title: 'Connection error',
@@ -58,6 +63,12 @@ const en_US = {
       },
     },
     inconsistentTopics: {
+      confirmationDialog: {
+        remove: {
+          title: 'Confirm topic deletion',
+          text: 'Are you sure you want to delete topic {topicToDelete}',
+        },
+      },
       noTopics: 'No inconsistent topics found',
       appliedFilter: '(applied filter: “{filter}”)',
       heading: 'Topics existing on kafka cluster but not present in hermes',
@@ -143,9 +154,15 @@ const en_US = {
     trackingEnabled: 'Tracking Enabled',
   },
   readiness: {
+    confirmationDialog: {
+      switch: {
+        title: 'Confirm readiness switch',
+        text: 'Are you sure you want to {switchAction} datacenter {dcToSwitch}?',
+      },
+    },
     title: 'Datacenters Readiness',
-    turnOn: 'Turn on',
-    turnOff: 'Turn off',
+    turnOn: 'turn on',
+    turnOff: 'turn off',
     index: '#',
     datacenter: 'Datacenter',
     isReady: 'Is ready',
@@ -161,9 +178,16 @@ const en_US = {
   },
   groups: {
     actions: {
+      remove: 'Remove',
       create: 'New Group',
       search: 'search…',
     },
+    confirmationDialog: {
+      remove: {
+        title: 'Confirm group deletion',
+        text: 'Are you sure you want to delete group {groupId}',
+      },
+    },
     connectionError: {
       title: 'Connection error',
       text: 'Could not fetch topic groups',
@@ -202,12 +226,19 @@ const en_US = {
     heading: 'Groups',
   },
   groupTopics: {
+    title: 'Group',
     groupTopicsBreadcrumbs: {
       home: 'home',
       groups: 'groups',
     },
   },
   topicView: {
+    confirmationDialog: {
+      remove: {
+        title: 'Confirm topic deletion',
+        text: 'Are you sure you want to delete topic {topicName}',
+      },
+    },
     header: {
       topic: 'TOPIC',
       owner: 'OWNER:',
@@ -288,6 +319,20 @@ const en_US = {
     },
   },
   subscription: {
+    confirmationDialog: {
+      remove: {
+        title: 'Confirm subscription deletion',
+        text: 'Are you sure you want to delete subscription {subscriptionId}',
+      },
+      suspend: {
+        title: 'Confirm subscription suspension',
+        text: 'Are you sure you want to suspend subscription {subscriptionId}',
+      },
+      activate: {
+        title: 'Confirm subscription activation',
+        text: 'Are you sure you want to activate subscription {subscriptionId}',
+      },
+    },
     connectionError: {
       title: 'Connection error',
       text: 'Could not fetch {subscriptionId} subscription details',
@@ -461,7 +506,7 @@ const en_US = {
     },
     subscriptionMetadata: {
       subscription: 'Subscription',
-      owners: 'Owners',
+      owners: 'OWNER:',
       unauthorizedTooltip: 'Sign in to edit the subscription',
       actions: {
         diagnostics: 'Diagnostics',
@@ -522,6 +567,50 @@ const en_US = {
         failure: 'Failed to move offsets for subscription {subscriptionName}',
       },
     },
+    readiness: {
+      switch: {
+        success: 'Successfully switched datacenter {datacenter} readiness',
+        failure: "Couldn't switch datacenter {datacenter} readiness",
+      },
+    },
+    roles: {
+      fetch: {
+        failure:
+          'Fetching user roles failed. Some options might not be visible.',
+      },
+    },
+    group: {
+      delete: {
+        success: 'Group {groupId} successfully deleted',
+        failure: "Couldn't delete group {groupId}",
+      },
+    },
+    topic: {
+      delete: {
+        success: 'Topic {topicName} successfully deleted',
+        failure: "Couldn't delete topic {topicName}",
+      },
+    },
+    inconsistentTopic: {
+      delete: {
+        success: 'Topic {topic} successfully deleted',
+        failure: "Couldn't delete topic {topic}",
+      },
+    },
+    subscription: {
+      delete: {
+        success: 'Subscription {subscriptionName} successfully deleted',
+        failure: "Couldn't delete subscription {subscriptionName}",
+      },
+      suspend: {
+        success: 'Subscription {subscriptionName} successfully suspended',
+        failure: "Couldn't suspend subscription {subscriptionName}",
+      },
+      activate: {
+        success: 'Subscription {subscriptionName} successfully activated',
+        failure: "Couldn't activate subscription {subscriptionName}",
+      },
+    },
   },
 };
 
diff --git a/hermes-console-vue/src/main.ts b/hermes-console-vue/src/main.ts
index 4b5db0086f..ab1307eeee 100644
--- a/hermes-console-vue/src/main.ts
+++ b/hermes-console-vue/src/main.ts
@@ -7,15 +7,9 @@ import { createPinia } from 'pinia';
 import { createVuetify } from 'vuetify';
 import { i18n } from '@/i18n';
 import App from './App.vue';
-import axios from 'axios';
 import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
 import router from './router';
 
-if (import.meta.env.DEV) {
-  axios.defaults.baseURL = 'http://localhost:3000';
-}
-axios.defaults.timeout = 5000;
-
 const vuetify = createVuetify({
   theme: {
     themes: {
diff --git a/hermes-console-vue/src/mocks/handlers.ts b/hermes-console-vue/src/mocks/handlers.ts
index 2fa2ab335c..2ba6c9f02d 100644
--- a/hermes-console-vue/src/mocks/handlers.ts
+++ b/hermes-console-vue/src/mocks/handlers.ts
@@ -1,14 +1,18 @@
 import {
-  dummySubscription,
-  dummyTopicSubscriptionsList,
-  secondDummySubscription,
-} from '@/dummy/subscription';
-import {
+  dummyOwner,
   dummyTopic,
   dummyTopicMessagesPreview,
   dummyTopicMetrics,
-  dummyTopicOwner,
 } from '@/dummy/topic';
+import {
+  dummySubscription,
+  dummySubscriptionHealth,
+  dummySubscriptionMetrics,
+  dummyTopicSubscriptionsList,
+  dummyUndeliveredMessage,
+  dummyUndeliveredMessages,
+  secondDummySubscription,
+} from '@/dummy/subscription';
 import { rest } from 'msw';
 import type { AccessTokenResponse } from '@/api/access-token-response';
 import type { ConstraintsConfig } from '@/api/constraints';
@@ -23,8 +27,11 @@ import type {
 } from '@/api/topic';
 import type { Owner } from '@/api/owner';
 import type { Role } from '@/api/role';
+import type { SentMessageTrace } from '@/api/subscription-undelivered';
 import type { Stats } from '@/api/stats';
 import type { Subscription } from '@/api/subscription';
+import type { SubscriptionHealth } from '@/api/subscription-health';
+import type { SubscriptionMetrics } from '@/api/subscription-metrics';
 
 const url = 'http://localhost:3000';
 
@@ -48,27 +55,23 @@ export const fetchTopicErrorHandler = ({
     return res(ctx.status(errorCode), ctx.json(undefined));
   });
 
-export const fetchTopicOwnerHandler = ({
-  topicOwner = dummyTopicOwner,
-}: {
-  topicOwner?: Owner;
-}) =>
+export const fetchOwnerHandler = ({ owner = dummyOwner }: { owner?: Owner }) =>
   rest.get(
-    `${url}/owners/sources/Service%20Catalog/${topicOwner.id}`,
+    `${url}/owners/sources/Service%20Catalog/${owner.id}`,
     (req, res, ctx) => {
-      return res(ctx.status(200), ctx.json(topicOwner));
+      return res(ctx.status(200), ctx.json(owner));
     },
   );
 
-export const fetchTopicOwnerErrorHandler = ({
-  topicOwner,
+export const fetchOwnerErrorHandler = ({
+  owner,
   errorCode = 500,
 }: {
-  topicOwner: string;
+  owner: string;
   errorCode?: number;
 }) =>
   rest.get(
-    `${url}/owners/sources/Service%20Catalog/${topicOwner}`,
+    `${url}/owners/sources/Service%20Catalog/${owner}`,
     (req, res, ctx) => {
       return res(ctx.status(errorCode), ctx.json(undefined));
     },
@@ -170,7 +173,7 @@ export const fetchTopicSubscriptionDetailsErrorHandler = ({
 
 export const successfulTopicHandlers = [
   fetchTopicHandler({}),
-  fetchTopicOwnerHandler({}),
+  fetchOwnerHandler({}),
   fetchTopicMessagesPreviewHandler({ topicName: dummyTopic.name }),
   fetchTopicMetricsHandler({ topicName: dummyTopic.name }),
   fetchTopicSubscriptionsHandler({ topicName: dummyTopic.name }),
@@ -180,6 +183,169 @@ export const successfulTopicHandlers = [
   }),
 ];
 
+export const fetchSubscriptionHandler = ({
+  subscription = dummySubscription,
+}: {
+  subscription?: Subscription;
+}) =>
+  rest.get(
+    `${url}/topics/${subscription.topicName}/subscriptions/${subscription.name}`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(subscription));
+    },
+  );
+
+export const fetchSubscriptionMetricsHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  subscriptionMetrics = dummySubscriptionMetrics,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  subscriptionMetrics?: SubscriptionMetrics;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/metrics`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(subscriptionMetrics));
+    },
+  );
+
+export const fetchSubscriptionHealthHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  subscriptionHealth = dummySubscriptionHealth,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  subscriptionHealth?: SubscriptionHealth;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/health`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(subscriptionHealth));
+    },
+  );
+
+export const fetchSubscriptionUndeliveredMessagesHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  subscriptionUndeliveredMessages = dummyUndeliveredMessages,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  subscriptionUndeliveredMessages?: SentMessageTrace[];
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/undelivered`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(subscriptionUndeliveredMessages));
+    },
+  );
+
+export const fetchSubscriptionLastUndeliveredMessageHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  subscriptionLastUndeliveredMessage = dummyUndeliveredMessage,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  subscriptionLastUndeliveredMessage?: SentMessageTrace;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/undelivered/last`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(subscriptionLastUndeliveredMessage));
+    },
+  );
+
+export const fetchSubscriptionErrorHandler = ({
+  subscription = dummySubscription,
+  errorCode = 500,
+}: {
+  subscription?: Subscription;
+  errorCode?: number;
+}) =>
+  rest.get(
+    `${url}/topics/${subscription.topicName}/subscriptions/${subscription.name}`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const fetchSubscriptionMetricsErrorHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  errorCode = 500,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  errorCode?: number;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/metrics`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const fetchSubscriptionHealthErrorHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  errorCode = 500,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  errorCode?: number;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/health`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const fetchSubscriptionUndeliveredMessagesErrorHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  errorCode = 500,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  errorCode?: number;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/undelivered`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const fetchSubscriptionLastUndeliveredMessageErrorHandler = ({
+  topicName = dummySubscription.topicName,
+  subscriptionName = dummySubscription.name,
+  errorCode = 500,
+}: {
+  topicName?: string;
+  subscriptionName?: string;
+  errorCode?: number;
+}) =>
+  rest.get(
+    `${url}/topics/${topicName}/subscriptions/${subscriptionName}/undelivered/last`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const successfulSubscriptionHandlers = [
+  fetchSubscriptionHandler({}),
+  fetchOwnerHandler({}),
+  fetchSubscriptionMetricsHandler({}),
+  fetchSubscriptionHealthHandler({}),
+  fetchSubscriptionUndeliveredMessagesHandler({}),
+  fetchSubscriptionLastUndeliveredMessageHandler({}),
+];
+
 export const fetchConstraintsHandler = ({
   constraints,
 }: {
@@ -419,6 +585,132 @@ export const fetchGroupInconsistenciesErrorHandler = ({
     return res(ctx.status(errorCode), ctx.json(undefined));
   });
 
+export const removeGroupHandler = ({ group }: { group: string }) =>
+  rest.delete(`/groups/${group}`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(undefined));
+  });
+
+export const removeGroupErrorHandler = ({
+  group,
+  errorCode = 500,
+}: {
+  group: string;
+  errorCode: number;
+}) =>
+  rest.delete(`/groups/${group}`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
+export const removeTopicHandler = ({ topic }: { topic: string }) =>
+  rest.delete(`/topics/${topic}`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(undefined));
+  });
+
+export const removeTopicErrorHandler = ({
+  topic,
+  errorCode = 500,
+}: {
+  topic: string;
+  errorCode: number;
+}) =>
+  rest.delete(`/topics/${topic}`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
+export const removeInconsistentTopicHandler = () =>
+  rest.delete(`/consistency/inconsistencies/topics`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(undefined));
+  });
+
+export const removeInconsistentTopicErrorHandler = ({
+  errorCode = 500,
+}: {
+  errorCode: number;
+}) =>
+  rest.delete(`/consistency/inconsistencies/topics`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
+export const removeSubscriptionHandler = ({
+  topic,
+  subscription,
+}: {
+  topic: string;
+  subscription: string;
+}) =>
+  rest.delete(
+    `/topics/${topic}/subscriptions/${subscription}`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(undefined));
+    },
+  );
+
+export const removeSubscriptionErrorHandler = ({
+  topic,
+  subscription,
+  errorCode = 500,
+}: {
+  topic: string;
+  subscription: string;
+  errorCode: number;
+}) =>
+  rest.delete(
+    `/topics/${topic}/subscriptions/${subscription}`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const subscriptionStateHandler = ({
+  topic,
+  subscription,
+}: {
+  topic: string;
+  subscription: string;
+}) =>
+  rest.put(
+    `/topics/${topic}/subscriptions/${subscription}/state`,
+    (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json(undefined));
+    },
+  );
+
+export const subscriptionStateErrorHandler = ({
+  topic,
+  subscription,
+  errorCode = 500,
+}: {
+  topic: string;
+  subscription: string;
+  errorCode: number;
+}) =>
+  rest.put(
+    `/topics/${topic}/subscriptions/${subscription}/state`,
+    (req, res, ctx) => {
+      return res(ctx.status(errorCode), ctx.json(undefined));
+    },
+  );
+
+export const switchReadinessHandler = ({
+  datacenter,
+}: {
+  datacenter: string;
+}) =>
+  rest.post(`/readiness/datacenters/${datacenter}`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json(undefined));
+  });
+
+export const switchReadinessErrorHandler = ({
+  datacenter,
+  errorCode,
+}: {
+  datacenter: string;
+  errorCode: number;
+}) =>
+  rest.post(`/readiness/datacenters/${datacenter}`, (req, res, ctx) => {
+    return res(ctx.status(errorCode), ctx.json(undefined));
+  });
+
 export const moveSubscriptionOffsetsHandler = ({
   topicName,
   subscriptionName,
diff --git a/hermes-console-vue/src/store/app-notifications/useAppNotifications.ts b/hermes-console-vue/src/store/app-notifications/useAppNotifications.ts
index 0457818805..6599cb47a8 100644
--- a/hermes-console-vue/src/store/app-notifications/useAppNotifications.ts
+++ b/hermes-console-vue/src/store/app-notifications/useAppNotifications.ts
@@ -28,4 +28,5 @@ export const useNotificationsStore = defineStore('notifications', {
       );
     },
   },
+  persist: true,
 });
diff --git a/hermes-console-vue/src/store/auth/useAuthStore.spec.ts b/hermes-console-vue/src/store/auth/useAuthStore.spec.ts
index 0844b0bcf2..28d599d53e 100644
--- a/hermes-console-vue/src/store/auth/useAuthStore.spec.ts
+++ b/hermes-console-vue/src/store/auth/useAuthStore.spec.ts
@@ -1,11 +1,11 @@
 import { createPinia, setActivePinia } from 'pinia';
 import { dummyAppConfig } from '@/dummy/app-config';
+import { dummyValidToken } from '@/dummy/jwt-tokens';
 import { expect } from 'vitest';
 import { fetchTokenHandler } from '@/mocks/handlers';
 import { setupServer } from 'msw/node';
 import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
 import { useAuthStore } from '@/store/auth/useAuthStore';
-import { validToken } from '@/utils/jwt-utils';
 
 describe('useGroups', () => {
   const server = setupServer();
@@ -47,7 +47,7 @@ describe('useGroups', () => {
   it('should exchange code for token', async () => {
     //given
     server.use(
-      fetchTokenHandler({ accessToken: { access_token: validToken } }),
+      fetchTokenHandler({ accessToken: { access_token: dummyValidToken } }),
     );
     server.listen();
     const configStore = useAppConfigStore();
@@ -58,7 +58,7 @@ describe('useGroups', () => {
     await authStore.exchangeCodeForTokenWithPKCE('codeXYZ');
 
     // then
-    expect(authStore.accessToken).toBe(validToken);
+    expect(authStore.accessToken).toBe(dummyValidToken);
     expect(authStore.codeVerifier).toBeNull();
     expect(authStore.isUserAuthorized).toBeTruthy();
   });
diff --git a/hermes-console-vue/src/store/auth/useAuthStore.ts b/hermes-console-vue/src/store/auth/useAuthStore.ts
index 43fa7da20f..eed5c9af22 100644
--- a/hermes-console-vue/src/store/auth/useAuthStore.ts
+++ b/hermes-console-vue/src/store/auth/useAuthStore.ts
@@ -2,7 +2,7 @@ import { encode as base64encode } from 'base64-arraybuffer';
 import { defineStore } from 'pinia';
 import { fetchToken } from '@/api/hermes-client';
 import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
-import axios from 'axios';
+import axios from '@/utils/axios/axios-instance';
 import decode from 'jwt-decode';
 import qs from 'query-string';
 import type { AuthStoreState } from '@/store/auth/types';
diff --git a/hermes-console-vue/src/utils/axios/axios-instance.ts b/hermes-console-vue/src/utils/axios/axios-instance.ts
new file mode 100644
index 0000000000..c7598568b0
--- /dev/null
+++ b/hermes-console-vue/src/utils/axios/axios-instance.ts
@@ -0,0 +1,10 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: import.meta.env.DEV
+    ? 'http://localhost:3000'
+    : window.location.origin,
+  timeout: 1000 * 30, //30s
+});
+
+export default instance;
diff --git a/hermes-console-vue/src/utils/axios-utils.ts b/hermes-console-vue/src/utils/axios/axios-utils.ts
similarity index 100%
rename from hermes-console-vue/src/utils/axios-utils.ts
rename to hermes-console-vue/src/utils/axios/axios-utils.ts
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 c65a1b478e..08b4a208f2 100644
--- a/hermes-console-vue/src/views/admin/consistency/ConsistencyView.spec.ts
+++ b/hermes-console-vue/src/views/admin/consistency/ConsistencyView.spec.ts
@@ -1,6 +1,11 @@
-import { consistencyStoreState } from '@/dummy/store';
+import {
+  consistencyStoreState,
+  createTestingPiniaWithState,
+} from '@/dummy/store';
 import { createTestingPinia } from '@pinia/testing';
 import { dummyInconsistentTopics } from '@/dummy/inconsistentTopics';
+import { expect } from 'vitest';
+import { fireEvent } from '@testing-library/vue';
 import { ref } from 'vue';
 import { render } from '@/utils/test-utils';
 import { useInconsistentTopics } from '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics';
@@ -17,6 +22,7 @@ const useInconsistentTopicsStub: UseInconsistentTopics = {
     fetchInconsistentTopics: null,
   }),
   loading: ref(false),
+  removeInconsistentTopic: () => Promise.resolve(true),
 };
 
 describe('ConsistencyView', () => {
@@ -196,4 +202,31 @@ describe('ConsistencyView', () => {
       queryByText('consistency.connectionError.text'),
     ).not.toBeInTheDocument();
   });
+
+  it('should show confirmation dialog on remove button click', async () => {
+    // given
+    vi.mocked(useInconsistentTopics).mockReturnValueOnce(
+      useInconsistentTopicsStub,
+    );
+
+    // when
+    const { getAllByText, getByText } = render(ConsistencyView, {
+      testPinia: createTestingPiniaWithState(),
+    });
+    await fireEvent.click(
+      getAllByText('consistency.inconsistentTopics.actions.delete')[0],
+    );
+
+    // then
+    expect(
+      getByText(
+        'consistency.inconsistentTopics.confirmationDialog.remove.title',
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        'consistency.inconsistentTopics.confirmationDialog.remove.text',
+      ),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue b/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue
index ab9c927559..360ddcdaf8 100644
--- a/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue
+++ b/hermes-console-vue/src/views/admin/consistency/ConsistencyView.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
   import { ref } from 'vue';
   import { useConsistencyStore } from '@/store/consistency/useConsistencyStore';
+  import { useDialog } from '@/composables/dialog/use-dialog/useDialog';
   import { useI18n } from 'vue-i18n';
   import { useInconsistentTopics } from '@/composables/inconsistent-topics/use-inconsistent-topics/useInconsistentTopics';
+  import { useRouter } from 'vue-router';
+  import ConfirmationDialog from '@/components/confirmation-dialog/ConfirmationDialog.vue';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import InconsistentGroupsListing from '@/views/admin/consistency/inconsistent-groups-listing/InconsistentGroupsListing.vue';
   import InconsistentTopicsListing from '@/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue';
@@ -12,7 +15,10 @@
   const topicFilter = ref<string>();
   const groupFilter = ref<string>();
 
-  const { topics, loading, error } = useInconsistentTopics();
+  const { topics, loading, error, removeInconsistentTopic } =
+    useInconsistentTopics();
+
+  const router = useRouter();
 
   const consistencyStore = useConsistencyStore();
 
@@ -29,9 +35,49 @@
       title: t('consistency.breadcrumbs.title'),
     },
   ];
+
+  const topicToDelete = ref();
+
+  const {
+    isDialogOpened: isRemoveDialogOpened,
+    actionButtonEnabled: removeActionButtonEnabled,
+    openDialog: openRemoveDialog,
+    closeDialog: closeRemoveDialog,
+    enableActionButton: enableRemoveActionButton,
+    disableActionButton: disableRemoveActionButton,
+  } = useDialog();
+
+  async function deleteInconsistentTopic() {
+    disableRemoveActionButton();
+    const isTopicRemoved = await removeInconsistentTopic(topicToDelete.value);
+    enableRemoveActionButton();
+    closeRemoveDialog();
+    if (isTopicRemoved) {
+      router.go(0);
+    }
+  }
+
+  function openTopicRemoveDialog(topic: string) {
+    topicToDelete.value = topic;
+    openRemoveDialog();
+  }
 </script>
 
 <template>
+  <confirmation-dialog
+    v-model="isRemoveDialogOpened"
+    :actionButtonEnabled="removeActionButtonEnabled"
+    :title="
+      $t('consistency.inconsistentTopics.confirmationDialog.remove.title')
+    "
+    :text="
+      t('consistency.inconsistentTopics.confirmationDialog.remove.text', {
+        topicToDelete,
+      })
+    "
+    @action="deleteInconsistentTopic"
+    @cancel="closeRemoveDialog"
+  />
   <v-container>
     <v-row dense>
       <v-col md="12">
@@ -113,6 +159,7 @@
           v-if="topics"
           :inconsistentTopics="topics"
           :filter="topicFilter"
+          @remove="openTopicRemoveDialog"
         />
       </v-col>
     </v-row>
diff --git a/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue b/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue
index 584c7842c8..73ccfaf4fc 100644
--- a/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue
+++ b/hermes-console-vue/src/views/admin/consistency/inconsistent-topics-listing/InconsistentTopicsListing.vue
@@ -13,6 +13,10 @@
       (topic) => !props.filter || topic.includes(props.filter),
     );
   });
+
+  const emit = defineEmits<{
+    remove: [topic: string];
+  }>();
 </script>
 
 <template>
@@ -34,7 +38,12 @@
             {{ topic }}
           </td>
           <td class="text-right">
-            <v-btn variant="text" prepend-icon="mdi-delete" color="red">
+            <v-btn
+              variant="text"
+              prepend-icon="mdi-delete"
+              color="red"
+              @click="emit('remove', topic)"
+            >
               {{ $t('consistency.inconsistentTopics.actions.delete') }}
             </v-btn>
           </td>
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 315b339bd8..89959acb82 100644
--- a/hermes-console-vue/src/views/admin/readiness/ReadinessView.spec.ts
+++ b/hermes-console-vue/src/views/admin/readiness/ReadinessView.spec.ts
@@ -1,5 +1,8 @@
 import { computed, ref } from 'vue';
+import { createTestingPiniaWithState } from '@/dummy/store';
 import { dummyDatacentersReadiness } from '@/dummy/readiness';
+import { expect } from 'vitest';
+import { fireEvent } from '@testing-library/vue';
 import { render } from '@/utils/test-utils';
 import { useReadiness } from '@/composables/readiness/use-readiness/useReadiness';
 import ReadinessView from '@/views/admin/readiness/ReadinessView.vue';
@@ -13,6 +16,7 @@ const useReadinessStub: UseReadiness = {
     fetchReadiness: null,
   }),
   loading: ref(false),
+  switchReadinessState: () => Promise.resolve(true),
 };
 
 describe('ReadinessView', () => {
@@ -92,4 +96,23 @@ describe('ReadinessView', () => {
       queryByText('readiness.connectionError.title'),
     ).not.toBeInTheDocument();
   });
+
+  it('should show confirmation dialog on switch button click', async () => {
+    // given
+    vi.mocked(useReadiness).mockReturnValueOnce(useReadinessStub);
+
+    // when
+    const { getAllByText, getByText } = render(ReadinessView, {
+      testPinia: createTestingPiniaWithState(),
+    });
+    await fireEvent.click(getAllByText('readiness.turnOn')[0]);
+
+    // then
+    expect(
+      getByText('readiness.confirmationDialog.switch.title'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('readiness.confirmationDialog.switch.text'),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue b/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue
index 0b127b0e78..5d2550c499 100644
--- a/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue
+++ b/hermes-console-vue/src/views/admin/readiness/ReadinessView.vue
@@ -1,12 +1,19 @@
 <script setup lang="ts">
+  import { ref } from 'vue';
+  import { useDialog } from '@/composables/dialog/use-dialog/useDialog';
   import { useI18n } from 'vue-i18n';
   import { useReadiness } from '@/composables/readiness/use-readiness/useReadiness';
+  import { useRouter } from 'vue-router';
+  import ConfirmationDialog from '@/components/confirmation-dialog/ConfirmationDialog.vue';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
 
   const { t } = useI18n();
 
-  const { datacentersReadiness, loading, error } = useReadiness();
+  const router = useRouter();
+
+  const { datacentersReadiness, loading, error, switchReadinessState } =
+    useReadiness();
 
   const breadcrumbsItems = [
     {
@@ -17,9 +24,55 @@
       title: t('readiness.breadcrumbs.title'),
     },
   ];
+
+  const dcToSwitch = ref();
+  const readinessState = ref();
+
+  const {
+    isDialogOpened: isSwitchDialogOpened,
+    actionButtonEnabled: actionSwitchButtonEnabled,
+    openDialog: openSwitchDialog,
+    closeDialog: closeSwitchDialog,
+    enableActionButton: enableSwitchActionButton,
+    disableActionButton: disableSwitchActionButton,
+  } = useDialog();
+
+  async function switchReadiness() {
+    disableSwitchActionButton();
+    const isReadinessChanged = await switchReadinessState(
+      dcToSwitch.value,
+      !readinessState.value,
+    );
+    enableSwitchActionButton();
+    closeSwitchDialog();
+    if (isReadinessChanged) {
+      router.go(0);
+    }
+  }
+
+  function openSwitchReadinessDialog(datacenter: string, isReady: boolean) {
+    dcToSwitch.value = datacenter;
+    readinessState.value = isReady;
+    openSwitchDialog();
+  }
 </script>
 
 <template>
+  <confirmation-dialog
+    v-model="isSwitchDialogOpened"
+    :actionButtonEnabled="actionSwitchButtonEnabled"
+    :title="$t('readiness.confirmationDialog.switch.title')"
+    :text="
+      t('readiness.confirmationDialog.switch.text', {
+        dcToSwitch: dcToSwitch,
+        switchAction: readinessState
+          ? t('readiness.turnOff')
+          : t('readiness.turnOn'),
+      })
+    "
+    @action="switchReadiness"
+    @cancel="closeSwitchDialog"
+  />
   <v-container fill-height fluid class="mx-auto">
     <v-row dense>
       <v-col md="12">
@@ -64,6 +117,9 @@
                     prepend-icon="mdi-console-line"
                     color="green"
                     block
+                    @click="
+                      openSwitchReadinessDialog(item.datacenter, item.isReady)
+                    "
                   >
                     {{ $t('readiness.turnOn') }}</v-btn
                   >
@@ -73,6 +129,9 @@
                     prepend-icon="mdi-console-line"
                     color="red"
                     block
+                    @click="
+                      openSwitchReadinessDialog(item.datacenter, item.isReady)
+                    "
                   >
                     {{ $t('readiness.turnOff') }}</v-btn
                   >
diff --git a/hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts b/hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts
index b4683a114c..bb9e10186e 100644
--- a/hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts
+++ b/hermes-console-vue/src/views/group-topics/GroupTopicsView.spec.ts
@@ -1,11 +1,17 @@
+import { createTestingPiniaWithState } from '@/dummy/store';
 import { dummyGroups } from '@/dummy/groups';
+import { fireEvent } from '@testing-library/vue';
 import { ref } from 'vue';
 import { render } from '@/utils/test-utils';
+import { Role } from '@/api/role';
 import { useGroups } from '@/composables/groups/use-groups/useGroups';
+import { useRoles } from '@/composables/roles/use-roles/useRoles';
 import GroupTopicsView from '@/views/group-topics/GroupTopicsView.vue';
 import type { UseGroups } from '@/composables/groups/use-groups/useGroups';
+import type { UseRoles } from '@/composables/roles/use-roles/useRoles';
 
 vi.mock('@/composables/groups/use-groups/useGroups');
+vi.mock('@/composables/roles/use-roles/useRoles');
 
 const useGroupsStub: UseGroups = {
   groups: ref(dummyGroups),
@@ -14,12 +20,22 @@ const useGroupsStub: UseGroups = {
     fetchTopicNames: null,
     fetchGroupNames: null,
   }),
+  removeGroup: () => Promise.resolve(true),
+};
+
+const useRolesStub: UseRoles = {
+  roles: ref([Role.SUBSCRIPTION_OWNER, Role.ADMIN]),
+  loading: ref(false),
+  error: ref({
+    fetchRoles: null,
+  }),
 };
 
 describe('GroupTopicsView', () => {
   it('should render if data was successfully fetched', () => {
     // given
     vi.mocked(useGroups).mockReturnValueOnce(useGroupsStub);
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
 
     // when
     const { getByText } = render(GroupTopicsView);
@@ -35,6 +51,7 @@ describe('GroupTopicsView', () => {
       ...useGroupsStub,
       loading: ref(true),
     });
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
 
     // when
     const { queryByTestId } = render(GroupTopicsView);
@@ -50,6 +67,7 @@ describe('GroupTopicsView', () => {
       ...useGroupsStub,
       loading: ref(false),
     });
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
 
     // when
     const { queryByTestId } = render(GroupTopicsView);
@@ -66,6 +84,7 @@ describe('GroupTopicsView', () => {
       loading: ref(false),
       error: ref({ fetchTopicNames: new Error(), fetchGroupNames: null }),
     });
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
 
     // when
     const { queryByText } = render(GroupTopicsView);
@@ -83,6 +102,7 @@ describe('GroupTopicsView', () => {
       loading: ref(false),
       error: ref({ fetchTopicNames: null, fetchGroupNames: null }),
     });
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
 
     // when
     const { queryByText } = render(GroupTopicsView);
@@ -91,4 +111,24 @@ describe('GroupTopicsView', () => {
     expect(vi.mocked(useGroups)).toHaveBeenCalledOnce();
     expect(queryByText('groups.connectionError.title')).not.toBeInTheDocument();
   });
+
+  it('should show confirmation dialog on remove button click', async () => {
+    // given
+    vi.mocked(useGroups).mockReturnValueOnce(useGroupsStub);
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
+
+    // when
+    const { getByText } = render(GroupTopicsView, {
+      testPinia: createTestingPiniaWithState(),
+    });
+    await fireEvent.click(getByText('groups.actions.remove'));
+
+    // then
+    expect(
+      getByText('groups.confirmationDialog.remove.title'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('groups.confirmationDialog.remove.text'),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue b/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
index 66f1633b98..0b55826215 100644
--- a/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
+++ b/hermes-console-vue/src/views/group-topics/GroupTopicsView.vue
@@ -1,26 +1,51 @@
 <script setup lang="ts">
   import { computed } from 'vue';
+  import { isAdmin } from '@/utils/roles-util';
   import { ref } from 'vue';
+  import { useDialog } from '@/composables/dialog/use-dialog/useDialog';
   import { useGroups } from '@/composables/groups/use-groups/useGroups';
   import { useI18n } from 'vue-i18n';
-  import { useRoute } from 'vue-router';
+  import { useRoles } from '@/composables/roles/use-roles/useRoles';
+  import { useRouter } from 'vue-router';
+  import ConfirmationDialog from '@/components/confirmation-dialog/ConfirmationDialog.vue';
   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 router = useRouter();
+  const params = router.currentRoute.value.params as Record<string, string>;
   const { groupId } = params;
   const { t } = useI18n();
 
-  const { groups, loading, error } = useGroups();
+  const { groups, loading, error, removeGroup } = useGroups();
 
   const filter = ref<string>();
 
+  const roles = useRoles(null, null).roles;
+
   const group = computed(() => {
     return (groups.value || [])?.find((i) => i.name === groupId);
   });
 
+  const {
+    isDialogOpened: isRemoveDialogOpened,
+    actionButtonEnabled: removeActionButtonEnabled,
+    openDialog: openRemoveDialog,
+    closeDialog: closeRemoveDialog,
+    enableActionButton: enableRemoveActionButton,
+    disableActionButton: disableRemoveActionButton,
+  } = useDialog();
+
+  async function deleteGroup(groupId: string) {
+    disableRemoveActionButton();
+    const isGroupRemoved = await removeGroup(groupId);
+    enableRemoveActionButton();
+    closeRemoveDialog();
+    if (isGroupRemoved) {
+      router.push({ path: `/ui/groups` });
+    }
+  }
+
   const breadcrumbsItems = [
     {
       title: t('subscription.subscriptionBreadcrumbs.home'),
@@ -38,6 +63,14 @@
 </script>
 
 <template>
+  <confirmation-dialog
+    v-model="isRemoveDialogOpened"
+    :actionButtonEnabled="removeActionButtonEnabled"
+    :title="$t('groups.confirmationDialog.remove.title')"
+    :text="t('groups.confirmationDialog.remove.text', { groupId })"
+    @action="deleteGroup(groupId)"
+    @cancel="closeRemoveDialog"
+  />
   <v-container>
     <v-row dense>
       <v-col md="12">
@@ -52,14 +85,25 @@
       </v-col>
     </v-row>
     <v-row dense>
-      <v-col md="12">
-        <v-card density="compact">
-          <v-card-item>
-            <p class="text-overline">Group</p>
+      <v-col>
+        <v-card density="compact" class="d-flex flex-row justify-space-between">
+          <v-card-text>
+            <p class="text-overline">{{ $t('groupTopics.title') }}</p>
             <p class="text-h4 font-weight-bold mb-2">
               {{ groupId }}
             </p>
-          </v-card-item>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn
+              v-if="isAdmin(roles)"
+              :disabled="group?.topics.length !== 0"
+              color="red"
+              prepend-icon="mdi-delete"
+              @click="openRemoveDialog"
+            >
+              {{ $t('groups.actions.remove') }}
+            </v-btn>
+          </v-card-actions>
         </v-card>
       </v-col>
     </v-row>
diff --git a/hermes-console-vue/src/views/groups/GroupsView.spec.ts b/hermes-console-vue/src/views/groups/GroupsView.spec.ts
index 2fed90f130..aae000f9d4 100644
--- a/hermes-console-vue/src/views/groups/GroupsView.spec.ts
+++ b/hermes-console-vue/src/views/groups/GroupsView.spec.ts
@@ -15,6 +15,7 @@ const useGroupsStub: UseGroups = {
     fetchTopicNames: null,
     fetchGroupNames: null,
   }),
+  removeGroup: () => Promise.resolve(true),
 };
 
 describe('GroupsView', () => {
diff --git a/hermes-console-vue/src/views/redirect/RedirectView.spec.ts b/hermes-console-vue/src/views/redirect/RedirectView.spec.ts
index 9566d98732..34cd40e399 100644
--- a/hermes-console-vue/src/views/redirect/RedirectView.spec.ts
+++ b/hermes-console-vue/src/views/redirect/RedirectView.spec.ts
@@ -1,12 +1,12 @@
 import { appConfigStoreState } from '@/dummy/store';
 import { createTestingPinia } from '@pinia/testing';
+import { dummyValidToken } from '@/dummy/jwt-tokens';
 import { expect } from 'vitest';
 import { fetchTokenHandler } from '@/mocks/handlers';
 import { render } from '@/utils/test-utils';
 import { setActivePinia } from 'pinia';
 import { setupServer } from 'msw/node';
 import { useAuthStore } from '@/store/auth/useAuthStore';
-import { validToken } from '@/utils/jwt-utils';
 import RedirectView from '@/views/redirect/RedirectView.vue';
 import router from '@/router';
 
@@ -24,7 +24,7 @@ describe('RedirectView', () => {
   it('should push to state', async () => {
     // given
     server.use(
-      fetchTokenHandler({ accessToken: { access_token: validToken } }),
+      fetchTokenHandler({ accessToken: { access_token: dummyValidToken } }),
     );
     server.listen();
     const authStore = useAuthStore();
diff --git a/hermes-console-vue/src/views/stats/StatsView.spec.ts b/hermes-console-vue/src/views/stats/StatsView.spec.ts
index 89af6ea65a..4dfcda1c24 100644
--- a/hermes-console-vue/src/views/stats/StatsView.spec.ts
+++ b/hermes-console-vue/src/views/stats/StatsView.spec.ts
@@ -1,9 +1,9 @@
 import { computed, ref } from 'vue';
 import { render } from '@/utils/test-utils';
-import { useStats } from '@/composables/use-stats/useStats';
+import { useStats } from '@/composables/stats/use-stats/useStats';
 import StatsView from '@/views/stats/StatsView.vue';
 
-vi.mock('@/composables/use-stats/useStats');
+vi.mock('@/composables/stats/use-stats/useStats');
 
 const useStatsStub: ReturnType<typeof useStats> = {
   error: ref({ fetchError: null }),
diff --git a/hermes-console-vue/src/views/stats/StatsView.vue b/hermes-console-vue/src/views/stats/StatsView.vue
index f067a82c34..e92bbc289d 100644
--- a/hermes-console-vue/src/views/stats/StatsView.vue
+++ b/hermes-console-vue/src/views/stats/StatsView.vue
@@ -1,7 +1,7 @@
 <script async setup lang="ts">
   import { formatNumber } from '@/utils/number-formatter/number-formatter';
   import { useI18n } from 'vue-i18n';
-  import { useStats } from '@/composables/use-stats/useStats';
+  import { useStats } from '@/composables/stats/use-stats/useStats';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
 
diff --git a/hermes-console-vue/src/views/subscription/SubscriptionView.spec.ts b/hermes-console-vue/src/views/subscription/SubscriptionView.spec.ts
index 47cf6b9a33..bd1d5bf70d 100644
--- a/hermes-console-vue/src/views/subscription/SubscriptionView.spec.ts
+++ b/hermes-console-vue/src/views/subscription/SubscriptionView.spec.ts
@@ -1,5 +1,7 @@
 import { beforeEach } from 'vitest';
 import { computed, ref } from 'vue';
+import { createTestingPiniaWithState } from '@/dummy/store';
+import { dummyOwner } from '@/dummy/topic';
 import {
   dummySubscription,
   dummySubscriptionHealth,
@@ -7,8 +9,10 @@ import {
   dummyUndeliveredMessage,
   dummyUndeliveredMessages,
 } from '@/dummy/subscription';
+import { fireEvent } from '@testing-library/vue';
 import { render } from '@/utils/test-utils';
 import { Role } from '@/api/role';
+import { State } from '@/api/subscription';
 import { useRoles } from '@/composables/roles/use-roles/useRoles';
 import { useSubscription } from '@/composables/subscription/use-subscription/useSubscription';
 import router from '@/router';
@@ -19,12 +23,23 @@ vi.mock('@/composables/subscription/use-subscription/useSubscription');
 
 const useSubscriptionStub: ReturnType<typeof useSubscription> = {
   subscription: ref(dummySubscription),
+  owner: ref(dummyOwner),
   subscriptionMetrics: ref(dummySubscriptionMetrics),
   subscriptionHealth: ref(dummySubscriptionHealth),
   subscriptionUndeliveredMessages: ref(dummyUndeliveredMessages),
   subscriptionLastUndeliveredMessage: ref(dummyUndeliveredMessage),
-  error: ref(false),
+  error: ref({
+    fetchSubscription: null,
+    fetchOwner: null,
+    fetchSubscriptionMetrics: null,
+    fetchSubscriptionHealth: null,
+    fetchSubscriptionUndeliveredMessages: null,
+    fetchSubscriptionLastUndeliveredMessage: null,
+  }),
   loading: computed(() => false),
+  removeSubscription: () => Promise.resolve(true),
+  suspendSubscription: () => Promise.resolve(true),
+  activateSubscription: () => Promise.resolve(true),
 };
 
 vi.mock('@/composables/roles/use-roles/useRoles');
@@ -154,7 +169,14 @@ describe('SubscriptionView', () => {
     vi.mocked(useSubscription).mockReturnValueOnce({
       ...useSubscriptionStub,
       loading: computed(() => false),
-      error: ref(true),
+      error: ref({
+        fetchSubscription: new Error('Sample error'),
+        fetchOwner: null,
+        fetchSubscriptionMetrics: null,
+        fetchSubscriptionHealth: null,
+        fetchSubscriptionUndeliveredMessages: null,
+        fetchSubscriptionLastUndeliveredMessage: null,
+      }),
     });
 
     // when
@@ -171,7 +193,6 @@ describe('SubscriptionView', () => {
     vi.mocked(useSubscription).mockReturnValueOnce({
       ...useSubscriptionStub,
       loading: computed(() => false),
-      error: ref(false),
     });
 
     // when
@@ -183,4 +204,76 @@ describe('SubscriptionView', () => {
       queryByText('subscription.connectionError.title'),
     ).not.toBeInTheDocument();
   });
+
+  it('should show confirmation dialog on remove button click', async () => {
+    // given
+    vi.mocked(useSubscription).mockReturnValueOnce(useSubscriptionStub);
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
+
+    // when
+    const { getByText } = render(SubscriptionView, {
+      testPinia: createTestingPiniaWithState(),
+    });
+    await fireEvent.click(
+      getByText('subscription.subscriptionMetadata.actions.remove'),
+    );
+
+    // then
+    expect(
+      getByText('subscription.confirmationDialog.remove.title'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('subscription.confirmationDialog.remove.text'),
+    ).toBeInTheDocument();
+  });
+
+  it('should show confirmation dialog on suspend button click', async () => {
+    // given
+    vi.mocked(useSubscription).mockReturnValueOnce(useSubscriptionStub);
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
+
+    // when
+    const { getByText } = render(SubscriptionView, {
+      testPinia: createTestingPiniaWithState(),
+    });
+    await fireEvent.click(
+      getByText('subscription.subscriptionMetadata.actions.suspend'),
+    );
+
+    // then
+    expect(
+      getByText('subscription.confirmationDialog.suspend.title'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('subscription.confirmationDialog.suspend.text'),
+    ).toBeInTheDocument();
+  });
+
+  it('should show confirmation dialog on activate button click', async () => {
+    // given
+    vi.mocked(useSubscription).mockReturnValueOnce({
+      ...useSubscriptionStub,
+      subscription: ref({
+        ...dummySubscription,
+        state: ref(State.SUSPENDED),
+      }),
+    });
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
+
+    // when
+    const { getByText } = render(SubscriptionView, {
+      testPinia: createTestingPiniaWithState(),
+    });
+    await fireEvent.click(
+      getByText('subscription.subscriptionMetadata.actions.activate'),
+    );
+
+    // then
+    expect(
+      getByText('subscription.confirmationDialog.activate.title'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('subscription.confirmationDialog.activate.text'),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/hermes-console-vue/src/views/subscription/SubscriptionView.vue b/hermes-console-vue/src/views/subscription/SubscriptionView.vue
index 51600be7f4..a4acc50bb8 100644
--- a/hermes-console-vue/src/views/subscription/SubscriptionView.vue
+++ b/hermes-console-vue/src/views/subscription/SubscriptionView.vue
@@ -1,9 +1,11 @@
 <script setup lang="ts">
   import { isSubscriptionOwnerOrAdmin } from '@/utils/roles-util';
+  import { useDialog } from '@/composables/dialog/use-dialog/useDialog';
   import { useI18n } from 'vue-i18n';
   import { useRoles } from '@/composables/roles/use-roles/useRoles';
-  import { useRoute } from 'vue-router';
+  import { useRouter } from 'vue-router';
   import { useSubscription } from '@/composables/subscription/use-subscription/useSubscription';
+  import ConfirmationDialog from '@/components/confirmation-dialog/ConfirmationDialog.vue';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import FiltersCard from '@/views/subscription/filters-card/FiltersCard.vue';
   import HeadersCard from '@/views/subscription/headers-card/HeadersCard.vue';
@@ -18,25 +20,85 @@
   import SubscriptionMetadata from '@/views/subscription/subscription-metadata/SubscriptionMetadata.vue';
   import UndeliveredMessagesCard from '@/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue';
 
-  const route = useRoute();
-  const { groupId, subscriptionId, topicId } = route.params as Record<
-    string,
-    string
-  >;
+  const router = useRouter();
+  const { groupId, subscriptionId, topicId } = router.currentRoute.value
+    .params as Record<string, string>;
 
   const { t } = useI18n();
 
   const {
     subscription,
+    owner,
     subscriptionMetrics,
     subscriptionHealth,
     subscriptionUndeliveredMessages,
     subscriptionLastUndeliveredMessage,
     error,
     loading,
+    removeSubscription,
+    suspendSubscription,
+    activateSubscription,
   } = useSubscription(topicId, subscriptionId);
 
   const roles = useRoles(topicId, subscriptionId)?.roles;
+
+  const {
+    isDialogOpened: isRemoveDialogOpened,
+    actionButtonEnabled: removeActionButtonEnabled,
+    openDialog: openRemoveDialog,
+    closeDialog: closeRemoveDialog,
+    enableActionButton: enableRemoveActionButton,
+    disableActionButton: disableRemoveActionButton,
+  } = useDialog();
+
+  async function deleteSubscription() {
+    disableRemoveActionButton();
+    const isSubscriptionRemoved = await removeSubscription();
+    enableRemoveActionButton();
+    closeRemoveDialog();
+    if (isSubscriptionRemoved) {
+      router.push({ path: `/ui/groups/${groupId}/topics/${topicId}` });
+    }
+  }
+
+  const {
+    isDialogOpened: isSuspendDialogOpened,
+    actionButtonEnabled: actionSuspendButtonEnabled,
+    openDialog: openSuspendDialog,
+    closeDialog: closeSuspendDialog,
+    enableActionButton: enableSuspendActionButton,
+    disableActionButton: disableSuspendActionButton,
+  } = useDialog();
+
+  async function suspend() {
+    disableSuspendActionButton();
+    const isSubscriptionSuspended = await suspendSubscription();
+    enableSuspendActionButton();
+    closeSuspendDialog();
+    if (isSubscriptionSuspended) {
+      router.go(0);
+    }
+  }
+
+  const {
+    isDialogOpened: isActivateDialogOpened,
+    actionButtonEnabled: actionActivateButtonEnabled,
+    openDialog: openActivateDialog,
+    closeDialog: closeActivateDialog,
+    enableActionButton: enableActivateActionButton,
+    disableActionButton: disableActivateActionButton,
+  } = useDialog();
+
+  async function activate() {
+    disableActivateActionButton();
+    const isSubscriptionActivated = await activateSubscription();
+    enableActivateActionButton();
+    closeActivateDialog();
+    if (isSubscriptionActivated) {
+      router.go(0);
+    }
+  }
+
   const breadcrumbsItems = [
     {
       title: t('subscription.subscriptionBreadcrumbs.home'),
@@ -61,13 +123,41 @@
 </script>
 
 <template>
+  <confirmation-dialog
+    v-model="isRemoveDialogOpened"
+    :actionButtonEnabled="removeActionButtonEnabled"
+    :title="$t('subscription.confirmationDialog.remove.title')"
+    :text="t('subscription.confirmationDialog.remove.text', { subscriptionId })"
+    @action="deleteSubscription"
+    @cancel="closeRemoveDialog"
+  />
+  <confirmation-dialog
+    v-model="isSuspendDialogOpened"
+    :actionButtonEnabled="actionSuspendButtonEnabled"
+    :title="$t('subscription.confirmationDialog.suspend.title')"
+    :text="
+      t('subscription.confirmationDialog.suspend.text', { subscriptionId })
+    "
+    @action="suspend"
+    @cancel="closeSuspendDialog"
+  />
+  <confirmation-dialog
+    v-model="isActivateDialogOpened"
+    :actionButtonEnabled="actionActivateButtonEnabled"
+    :title="$t('subscription.confirmationDialog.activate.title')"
+    :text="
+      t('subscription.confirmationDialog.activate.text', { subscriptionId })
+    "
+    @action="activate"
+    @cancel="closeActivateDialog"
+  />
   <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"
+          v-if="error.fetchSubscription"
           :title="$t('subscription.connectionError.title')"
           :text="t('subscription.connectionError.text', { subscriptionId })"
           type="error"
@@ -75,7 +165,7 @@
       </v-col>
     </v-row>
 
-    <template v-if="!loading && !error">
+    <template v-if="!loading && !error.fetchSubscription">
       <v-row dense>
         <v-col md="12">
           <health-problems-alerts
@@ -83,9 +173,13 @@
             :problems="subscriptionHealth?.problems"
           />
           <subscription-metadata
-            v-if="subscription"
+            v-if="subscription && owner"
             :subscription="subscription"
+            :owner="owner"
             :roles="roles"
+            @remove="openRemoveDialog"
+            @suspend="openSuspendDialog"
+            @activate="openActivateDialog"
           />
         </v-col>
       </v-row>
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 51858330bf..7f2fb46a70 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,4 +1,5 @@
 import { beforeEach } from 'vitest';
+import { dummyOwner } from '@/dummy/topic';
 import { dummySubscription } from '@/dummy/subscription';
 import { expect } from 'vitest';
 import { render } from '@/utils/test-utils';
@@ -25,6 +26,7 @@ describe('SubscriptionMetadata', () => {
         endpoint: 'service://subscription-name/dummy',
         description: 'some description',
       },
+      owner: dummyOwner,
       roles: [Role.SUBSCRIPTION_OWNER],
     };
 
@@ -50,6 +52,7 @@ describe('SubscriptionMetadata', () => {
           source: 'some source',
         },
       },
+      owner: dummyOwner,
       roles: [Role.SUBSCRIPTION_OWNER],
     };
 
@@ -58,7 +61,7 @@ describe('SubscriptionMetadata', () => {
 
     // then
     expect(
-      getByText('subscription.subscriptionMetadata.owners (some source)'),
+      getByText('subscription.subscriptionMetadata.owners your-super-service'),
     ).toBeVisible();
   });
 
@@ -72,6 +75,7 @@ describe('SubscriptionMetadata', () => {
           source: 'some source',
         },
       },
+      owner: dummyOwner,
       roles: [Role.ADMIN],
     };
 
@@ -94,6 +98,7 @@ describe('SubscriptionMetadata', () => {
           source: 'some source',
         },
       },
+      owner: dummyOwner,
       roles: [],
     };
 
@@ -116,6 +121,7 @@ describe('SubscriptionMetadata', () => {
           source: 'some source',
         },
       },
+      owner: dummyOwner,
       roles: [],
     };
 
@@ -152,6 +158,7 @@ describe('SubscriptionMetadata', () => {
         ...dummySubscription,
         state: State.SUSPENDED,
       },
+      owner: dummyOwner,
       roles: [Role.SUBSCRIPTION_OWNER],
     };
 
@@ -174,6 +181,7 @@ describe('SubscriptionMetadata', () => {
         ...dummySubscription,
         state: State.ACTIVE,
       },
+      owner: dummyOwner,
       roles: [Role.SUBSCRIPTION_OWNER],
     };
 
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 94204bdaf6..0213b3dd4c 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 { isAdmin, isSubscriptionOwnerOrAdmin } from '@/utils/roles-util';
+  import { Owner } from '@/api/owner';
   import { Role } from '@/api/role';
   import { State } from '@/api/subscription';
   import { useRoute } from 'vue-router';
@@ -8,10 +9,17 @@
 
   const props = defineProps<{
     subscription: Subscription;
+    owner: Owner;
     roles: Role[] | undefined;
   }>();
 
   const route = useRoute();
+
+  const emit = defineEmits<{
+    remove: [];
+    suspend: [];
+    activate: [];
+  }>();
 </script>
 
 <template>
@@ -42,10 +50,15 @@
 
     <v-card-actions class="d-flex subscription-header__actions">
       <div class="d-flex flex-row">
-        <v-btn prepend-icon="mdi-account-supervisor">
-          {{ $t('subscription.subscriptionMetadata.owners') }} ({{
-            props.subscription.owner.source
-          }})
+        <v-btn
+          class="text-none"
+          prepend-icon="mdi-account-supervisor"
+          :href="props.owner.url"
+          target="_blank"
+          color="blue"
+        >
+          {{ $t('subscription.subscriptionMetadata.owners') }}
+          {{ props.owner.name }}
         </v-btn>
       </div>
       <div class="d-flex flex-row">
@@ -66,6 +79,7 @@
           :disabled="!isSubscriptionOwnerOrAdmin(roles)"
           color="orange"
           prepend-icon="mdi-publish-off"
+          @click="emit('suspend')"
         >
           {{ $t('subscription.subscriptionMetadata.actions.suspend') }}
         </v-btn>
@@ -74,6 +88,7 @@
           :disabled="!isSubscriptionOwnerOrAdmin(roles)"
           color="green"
           prepend-icon="mdi-publish"
+          @click="emit('activate')"
         >
           {{ $t('subscription.subscriptionMetadata.actions.activate') }}
         </v-btn>
@@ -93,6 +108,7 @@
           :disabled="!isSubscriptionOwnerOrAdmin(roles)"
           color="red"
           prepend-icon="mdi-delete"
+          @click="emit('remove')"
         >
           {{ $t('subscription.subscriptionMetadata.actions.remove') }}
         </v-btn>
diff --git a/hermes-console-vue/src/views/topic/TopicView.spec.ts b/hermes-console-vue/src/views/topic/TopicView.spec.ts
index 1eb20e092b..0e4bd41369 100644
--- a/hermes-console-vue/src/views/topic/TopicView.spec.ts
+++ b/hermes-console-vue/src/views/topic/TopicView.spec.ts
@@ -4,16 +4,17 @@ import { createTestingPiniaWithState } from '@/dummy/store';
 import { dummyAppConfig } from '@/dummy/app-config';
 import {
   dummyOfflineClientsSource,
+  dummyOwner,
   dummyTopic,
   dummyTopicMessagesPreview,
   dummyTopicMetrics,
-  dummyTopicOwner,
 } from '@/dummy/topic';
 import { dummyRoles } from '@/dummy/roles';
 import {
   dummySubscription,
   secondDummySubscription,
 } from '@/dummy/subscription';
+import { fireEvent } from '@testing-library/vue';
 import { ref } from 'vue';
 import { render } from '@/utils/test-utils';
 import { useRoles } from '@/composables/roles/use-roles/useRoles';
@@ -36,7 +37,7 @@ const useRolesStub: UseRoles = {
 
 const useTopicMock: UseTopic = {
   topic: ref(dummyTopic),
-  owner: ref(dummyTopicOwner),
+  owner: ref(dummyOwner),
   messages: ref(dummyTopicMessagesPreview),
   metrics: ref(dummyTopicMetrics),
   subscriptions: ref([dummySubscription, secondDummySubscription]),
@@ -52,6 +53,7 @@ const useTopicMock: UseTopic = {
   }),
   fetchTopic: () => Promise.resolve(),
   fetchOfflineClientsSource: () => Promise.resolve(),
+  removeTopic: () => Promise.resolve(true),
 };
 
 describe('TopicView', () => {
@@ -293,4 +295,24 @@ describe('TopicView', () => {
     // then
     expect(queryByTestId('loading-spinner')).not.toBeInTheDocument();
   });
+
+  it('should show confirmation dialog on remove button click', async () => {
+    // given
+    vi.mocked(useTopic).mockReturnValueOnce(useTopicMock);
+    vi.mocked(useRoles).mockReturnValueOnce(useRolesStub);
+
+    // when
+    const { getByText } = render(TopicView, {
+      testPinia: createTestingPiniaWithState(),
+    });
+    await fireEvent.click(getByText('topicView.header.actions.remove'));
+
+    // then
+    expect(
+      getByText('topicView.confirmationDialog.remove.title'),
+    ).toBeInTheDocument();
+    expect(
+      getByText('topicView.confirmationDialog.remove.text'),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/hermes-console-vue/src/views/topic/TopicView.vue b/hermes-console-vue/src/views/topic/TopicView.vue
index 9d16fa2f97..3833d032f4 100644
--- a/hermes-console-vue/src/views/topic/TopicView.vue
+++ b/hermes-console-vue/src/views/topic/TopicView.vue
@@ -1,10 +1,12 @@
 <script async setup lang="ts">
   import { isTopicOwnerOrAdmin } from '@/utils/roles-util';
   import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
+  import { useDialog } from '@/composables/dialog/use-dialog/useDialog';
   import { useI18n } from 'vue-i18n';
   import { useRoles } from '@/composables/roles/use-roles/useRoles';
-  import { useRoute } from 'vue-router';
+  import { useRouter } from 'vue-router';
   import { useTopic } from '@/composables/topic/use-topic/useTopic';
+  import ConfirmationDialog from '@/components/confirmation-dialog/ConfirmationDialog.vue';
   import ConsoleAlert from '@/components/console-alert/ConsoleAlert.vue';
   import LoadingSpinner from '@/components/loading-spinner/LoadingSpinner.vue';
   import MessagesPreview from '@/views/topic/messages-preview/MessagesPreview.vue';
@@ -15,11 +17,14 @@
   import SubscriptionsList from '@/views/topic/subscriptions-list/SubscriptionsList.vue';
   import TopicHeader from '@/views/topic/topic-header/TopicHeader.vue';
 
-  const { t } = useI18n();
+  const router = useRouter();
 
-  const route = useRoute();
+  const { t } = useI18n();
 
-  const { groupId, topicName } = route.params as Record<string, string>;
+  const { groupId, topicName } = router.currentRoute.value.params as Record<
+    string,
+    string
+  >;
 
   const {
     topic,
@@ -32,6 +37,7 @@
     offlineClientsSource,
     fetchTopic,
     fetchOfflineClientsSource,
+    removeTopic,
   } = useTopic(topicName);
   fetchTopic();
 
@@ -58,9 +64,36 @@
     fetchOfflineClientsSource();
   }
   const roles = useRoles(topicName, null)?.roles;
+
+  const {
+    isDialogOpened: isRemoveDialogOpened,
+    actionButtonEnabled: removeActionButtonEnabled,
+    openDialog: openRemoveDialog,
+    closeDialog: closeRemoveDialog,
+    enableActionButton: enableRemoveActionButton,
+    disableActionButton: disableRemoveActionButton,
+  } = useDialog();
+
+  async function deleteTopic() {
+    disableRemoveActionButton();
+    const isTopicRemoved = await removeTopic();
+    enableRemoveActionButton();
+    closeRemoveDialog();
+    if (isTopicRemoved) {
+      router.push({ path: `/ui/groups/${groupId}` });
+    }
+  }
 </script>
 
 <template>
+  <confirmation-dialog
+    v-model="isRemoveDialogOpened"
+    :actionButtonEnabled="removeActionButtonEnabled"
+    :title="$t('topicView.confirmationDialog.remove.title')"
+    :text="t('topicView.confirmationDialog.remove.text', { topicName })"
+    @action="deleteTopic"
+    @cancel="closeRemoveDialog"
+  />
   <v-container class="d-flex flex-column topic-view__container">
     <div class="d-flex justify-space-between align-center">
       <v-breadcrumbs :items="breadcrumbsItems" density="compact" />
@@ -79,6 +112,7 @@
       :topic="topic"
       :owner="owner"
       :roles="roles"
+      @remove="openRemoveDialog"
     />
 
     <div class="topic-view__upper_panel">
diff --git a/hermes-console-vue/src/views/topic/topic-header/TopicHeader.spec.ts b/hermes-console-vue/src/views/topic/topic-header/TopicHeader.spec.ts
index 39f95dc274..45dc7a5f55 100644
--- a/hermes-console-vue/src/views/topic/topic-header/TopicHeader.spec.ts
+++ b/hermes-console-vue/src/views/topic/topic-header/TopicHeader.spec.ts
@@ -5,8 +5,8 @@ import {
 import { createTestingPinia } from '@pinia/testing';
 import { describe, expect } from 'vitest';
 import { dummyAppConfig } from '@/dummy/app-config';
+import { dummyOwner, dummyTopic } from '@/dummy/topic';
 import { dummyRoles } from '@/dummy/roles';
-import { dummyTopic, dummyTopicOwner } from '@/dummy/topic';
 import { render } from '@/utils/test-utils';
 import { Role } from '@/api/role';
 import TopicHeader from '@/views/topic/topic-header/TopicHeader.vue';
@@ -14,7 +14,7 @@ import TopicHeader from '@/views/topic/topic-header/TopicHeader.vue';
 describe('TopicHeader', () => {
   const props = {
     topic: dummyTopic,
-    owner: dummyTopicOwner,
+    owner: dummyOwner,
     roles: dummyRoles,
   };
 
@@ -29,7 +29,7 @@ describe('TopicHeader', () => {
     expect(getByText('topicView.header.topic')).toBeVisible();
     expect(getByText(dummyTopic.name)).toBeVisible();
     expect(
-      getByText(`topicView.header.owner ${dummyTopicOwner.name}`),
+      getByText(`topicView.header.owner ${dummyOwner.name}`),
     ).toBeVisible();
     expect(getByText(dummyTopic.description)).toBeVisible();
   });
@@ -45,7 +45,7 @@ describe('TopicHeader', () => {
       // when
       const testProps = {
         topic: dummyTopic,
-        owner: dummyTopicOwner,
+        owner: dummyOwner,
         roles: roles,
       };
       const { getByText } = render(TopicHeader, {
@@ -158,7 +158,7 @@ describe('TopicHeader', () => {
             },
           },
         },
-        owner: dummyTopicOwner,
+        owner: dummyOwner,
         roles: dummyRoles,
       };
       const { queryByText } = render(TopicHeader, {
diff --git a/hermes-console-vue/src/views/topic/topic-header/TopicHeader.vue b/hermes-console-vue/src/views/topic/topic-header/TopicHeader.vue
index b3bc746c4b..12a68e37f7 100644
--- a/hermes-console-vue/src/views/topic/topic-header/TopicHeader.vue
+++ b/hermes-console-vue/src/views/topic/topic-header/TopicHeader.vue
@@ -12,6 +12,10 @@
   }>();
 
   const configStore = useAppConfigStore();
+
+  const emit = defineEmits<{
+    remove: [];
+  }>();
 </script>
 
 <template>
@@ -49,7 +53,7 @@
       <div>
         <v-btn
           :disabled="
-            configStore.appConfig.topic.readOnlyModeEnabled ||
+            configStore.loadedConfig.topic.readOnlyModeEnabled ||
             !isTopicOwnerOrAdmin(roles)
           "
           prepend-icon="mdi-pencil"
@@ -62,7 +66,7 @@
         </v-btn>
         <v-btn
           v-if="
-            configStore.appConfig.topic.offlineRetransmissionEnabled &&
+            configStore.loadedConfig.topic.offlineRetransmissionEnabled &&
             topic.offlineStorage.enabled &&
             isTopicOwnerOrAdmin(roles)
           "
@@ -72,6 +76,7 @@
         <v-btn
           color="red"
           prepend-icon="mdi-delete"
+          @click="emit('remove')"
           :disabled="!isTopicOwnerOrAdmin(roles)"
           >{{ $t('topicView.header.actions.remove') }}
         </v-btn>