diff --git a/kafka-ui-react-app/.eslintrc.json b/kafka-ui-react-app/.eslintrc.json
index 561abef8505..c5614f1f6d2 100644
--- a/kafka-ui-react-app/.eslintrc.json
+++ b/kafka-ui-react-app/.eslintrc.json
@@ -35,8 +35,12 @@
     "@typescript-eslint/no-explicit-any": "error",
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "import/no-cycle": "error",
-    "import/order": ["error", {"groups": ["builtin", "external", "parent", "sibling", "index"]}],
-    "import/no-relative-parent-imports": "error"
+    "import/order": ["error", {
+      "groups": ["builtin", "external", "parent", "sibling", "index"],
+      "newlines-between": "always"
+    }],
+    "import/no-relative-parent-imports": "error",
+    "no-debugger": "warn"
   },
   "overrides": [
     {
diff --git a/kafka-ui-react-app/src/components/App.tsx b/kafka-ui-react-app/src/components/App.tsx
index e659f11986c..b7978b3dec7 100644
--- a/kafka-ui-react-app/src/components/App.tsx
+++ b/kafka-ui-react-app/src/components/App.tsx
@@ -1,16 +1,16 @@
-import './App.scss';
 import React from 'react';
 import cx from 'classnames';
 import { Cluster } from 'generated-sources';
 import { Switch, Route, useLocation } from 'react-router-dom';
 import { GIT_TAG, GIT_COMMIT } from 'lib/constants';
 import { Alerts } from 'redux/interfaces';
-import Nav from './Nav/Nav';
-import PageLoader from './common/PageLoader/PageLoader';
-import Dashboard from './Dashboard/Dashboard';
-import ClusterPage from './Cluster/Cluster';
-import Version from './Version/Version';
-import Alert from './Alert/Alert';
+import Nav from 'components/Nav/Nav';
+import PageLoader from 'components/common/PageLoader/PageLoader';
+import Dashboard from 'components/Dashboard/Dashboard';
+import ClusterPage from 'components/Cluster/Cluster';
+import Version from 'components/Version/Version';
+import Alert from 'components/Alert/Alert';
+import 'components/App.scss';
 
 export interface AppProps {
   isClusterListFetched?: boolean;
diff --git a/kafka-ui-react-app/src/components/AppContainer.tsx b/kafka-ui-react-app/src/components/AppContainer.tsx
index 6712b1b93ce..f32dab55a4d 100644
--- a/kafka-ui-react-app/src/components/AppContainer.tsx
+++ b/kafka-ui-react-app/src/components/AppContainer.tsx
@@ -6,7 +6,7 @@ import {
 } from 'redux/reducers/clusters/selectors';
 import { getAlerts } from 'redux/reducers/alerts/selectors';
 import { RootState } from 'redux/interfaces';
-import App from './App';
+import App from 'components/App';
 
 const mapStateToProps = (state: RootState) => ({
   isClusterListFetched: getIsClusterListFetched(state),
diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts b/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts
index f515c75273d..9dad90a0abf 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersContainer.ts
@@ -13,7 +13,7 @@ import {
   getUnderReplicatedPartitionCount,
   getDiskUsage,
 } from 'redux/reducers/brokers/selectors';
-import Brokers from './Brokers';
+import Brokers from 'components/Brokers/Brokers';
 
 const mapStateToProps = (state: RootState) => ({
   isFetched: getIsBrokerListFetched(state),
diff --git a/kafka-ui-react-app/src/components/Connect/Connect.tsx b/kafka-ui-react-app/src/components/Connect/Connect.tsx
index b6a941d6183..c3d2d50b554 100644
--- a/kafka-ui-react-app/src/components/Connect/Connect.tsx
+++ b/kafka-ui-react-app/src/components/Connect/Connect.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 import { clusterConnectorsPath } from 'lib/paths';
-import ListContainer from './List/ListContainer';
+import ListContainer from 'components/Connect/List/ListContainer';
 
 const Connect: React.FC = () => (
   <Switch>
diff --git a/kafka-ui-react-app/src/components/Connect/List/List.tsx b/kafka-ui-react-app/src/components/Connect/List/List.tsx
index db84c4772dd..09f513a5b67 100644
--- a/kafka-ui-react-app/src/components/Connect/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Connect/List/List.tsx
@@ -7,7 +7,7 @@ import ClusterContext from 'components/contexts/ClusterContext';
 import Indicator from 'components/common/Dashboard/Indicator';
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import ListItem from './ListItem';
+import ListItem from 'components/Connect/List/ListItem';
 
 export interface ListProps {
   areConnectsFetching: boolean;
diff --git a/kafka-ui-react-app/src/components/Connect/List/ListContainer.ts b/kafka-ui-react-app/src/components/Connect/List/ListContainer.ts
index c8f0d979869..d7b8e979ac9 100644
--- a/kafka-ui-react-app/src/components/Connect/List/ListContainer.ts
+++ b/kafka-ui-react-app/src/components/Connect/List/ListContainer.ts
@@ -10,7 +10,7 @@ import {
   getAreConnectsFetching,
   getAreConnectorsFetching,
 } from 'redux/reducers/connect/selectors';
-import List from './List';
+import List from 'components/Connect/List/List';
 
 const mapStateToProps = (state: RootState) => ({
   areConnectsFetching: getAreConnectsFetching(state),
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/ConsumersGroupsContainer.ts b/kafka-ui-react-app/src/components/ConsumerGroups/ConsumersGroupsContainer.ts
index d9fb44aefc6..5b247e64c0e 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/ConsumersGroupsContainer.ts
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/ConsumersGroupsContainer.ts
@@ -3,6 +3,7 @@ import { fetchConsumerGroupsList } from 'redux/actions';
 import { RootState, ClusterName } from 'redux/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
 import { getIsConsumerGroupsListFetched } from 'redux/reducers/consumerGroups/selectors';
+
 import ConsumerGroups from './ConsumerGroups';
 
 interface RouteProps {
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
index b6ab8ce01e9..f32ad6e6785 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
@@ -8,8 +8,8 @@ import {
   ConsumerGroupDetails,
   ConsumerTopicPartitionDetail,
 } from 'generated-sources';
-
 import PageLoader from 'components/common/PageLoader/PageLoader';
+
 import ListItem from './ListItem';
 
 interface Props extends ConsumerGroup, ConsumerGroupDetails {
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/DetailsContainer.ts b/kafka-ui-react-app/src/components/ConsumerGroups/Details/DetailsContainer.ts
index 97beb58b40e..6bfd2422cf2 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/DetailsContainer.ts
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/Details/DetailsContainer.ts
@@ -7,6 +7,7 @@ import {
 } from 'redux/reducers/consumerGroups/selectors';
 import { ConsumerGroupID } from 'redux/interfaces/consumerGroup';
 import { fetchConsumerGroupDetails } from 'redux/actions/thunks';
+
 import Details from './Details';
 
 interface RouteProps {
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
index 258811264e9..3d1b6a25a49 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { ClusterName } from 'redux/interfaces';
 import { ConsumerGroup } from 'generated-sources';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+
 import ListItem from './ListItem';
 
 interface Props {
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List/ListContainer.ts b/kafka-ui-react-app/src/components/ConsumerGroups/List/ListContainer.ts
index 31fa8fae010..7c044b0ba1b 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/List/ListContainer.ts
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/ListContainer.ts
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { ClusterName, RootState } from 'redux/interfaces';
 import { getConsumerGroupsList } from 'redux/reducers/consumerGroups/selectors';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+
 import List from './List';
 
 interface RouteProps {
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
index 48f5a58a848..e57d68a5808 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { chunk } from 'lodash';
 import { v4 } from 'uuid';
-
 import MetricsWrapper from 'components/common/Dashboard/MetricsWrapper';
 import Indicator from 'components/common/Dashboard/Indicator';
 import { Cluster } from 'generated-sources';
+
 import ClusterWidget from './ClusterWidget';
 
 interface Props {
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidgetContainer.ts b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidgetContainer.ts
index 17ec6147ce9..176d792dd30 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidgetContainer.ts
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidgetContainer.ts
@@ -5,6 +5,7 @@ import {
   getOfflineClusters,
 } from 'redux/reducers/clusters/selectors';
 import { RootState } from 'redux/interfaces';
+
 import ClustersWidget from './ClustersWidget';
 
 const mapStateToProps = (state: RootState) => ({
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClusterWidget.spec.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClusterWidget.spec.tsx
index bc374c3f6fe..6e3cab5ecdc 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClusterWidget.spec.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClusterWidget.spec.tsx
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import { ServerStatus } from 'generated-sources';
 import { clusterBrokersPath, clusterTopicsPath } from 'lib/paths';
 import ClusterWidget from 'components/Dashboard/ClustersWidget/ClusterWidget';
+
 import { offlineCluster, onlineCluster } from './fixtures';
 
 describe('ClusterWidget', () => {
diff --git a/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx b/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx
index e5d89b8c833..2c894c7d093 100644
--- a/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/Dashboard.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+
 import ClustersWidgetContainer from './ClustersWidget/ClustersWidgetContainer';
 
 const Dashboard: React.FC = () => (
diff --git a/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx b/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx
index 642f2b163c8..752efa5047e 100644
--- a/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx
+++ b/kafka-ui-react-app/src/components/Nav/ClusterMenu.tsx
@@ -8,6 +8,7 @@ import {
   clusterSchemasPath,
   clusterConnectorsPath,
 } from 'lib/paths';
+
 import DefaultClusterIcon from './DefaultClusterIcon';
 import ClusterStatusIcon from './ClusterStatusIcon';
 
diff --git a/kafka-ui-react-app/src/components/Nav/Nav.tsx b/kafka-ui-react-app/src/components/Nav/Nav.tsx
index 3b4c123ad59..23a9e444675 100644
--- a/kafka-ui-react-app/src/components/Nav/Nav.tsx
+++ b/kafka-ui-react-app/src/components/Nav/Nav.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { NavLink } from 'react-router-dom';
 import cx from 'classnames';
 import { Cluster } from 'generated-sources';
+
 import ClusterMenu from './ClusterMenu';
 
 interface Props {
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
index b785dcc1773..d2ba74faf2e 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
+import { useHistory } from 'react-router';
 import { SchemaSubject } from 'generated-sources';
 import { ClusterName, SchemaName } from 'redux/interfaces';
 import { clusterSchemasPath } from 'lib/paths';
-import ClusterContext from 'components/contexts/ClusterContext';
-import { useHistory } from 'react-router';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
+import ClusterContext from 'components/contexts/ClusterContext';
+import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
 import PageLoader from 'components/common/PageLoader/PageLoader';
+
 import SchemaVersion from './SchemaVersion';
 import LatestVersionItem from './LatestVersionItem';
 
@@ -32,15 +34,20 @@ const Details: React.FC<DetailsProps> = ({
   isFetched,
 }) => {
   const { isReadOnly } = React.useContext(ClusterContext);
+  const [
+    isDeleteSchemaConfirmationVisible,
+    setDeleteSchemaConfirmationVisible,
+  ] = React.useState(false);
+
   React.useEffect(() => {
     fetchSchemaVersions(clusterName, subject);
   }, [fetchSchemaVersions, clusterName]);
 
   const history = useHistory();
-  const onDelete = async () => {
-    await deleteSchema(clusterName, subject);
+  const onDelete = React.useCallback(() => {
+    deleteSchema(clusterName, subject);
     history.push(clusterSchemasPath(clusterName));
-  };
+  }, [deleteSchema, clusterName, subject]);
 
   return (
     <div className="section">
@@ -84,10 +91,17 @@ const Details: React.FC<DetailsProps> = ({
                     className="button is-danger is-small level-item"
                     type="button"
                     title="in development"
-                    onClick={onDelete}
+                    onClick={() => setDeleteSchemaConfirmationVisible(true)}
                   >
                     Remove
                   </button>
+                  <ConfirmationModal
+                    isOpen={isDeleteSchemaConfirmationVisible}
+                    onCancel={() => setDeleteSchemaConfirmationVisible(false)}
+                    onConfirm={onDelete}
+                  >
+                    Are you sure want to remove <b>{subject}</b> schema?
+                  </ConfirmationModal>
                 </div>
               )}
             </div>
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts b/kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts
index 16d20b274dc..d8126884174 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts
+++ b/kafka-ui-react-app/src/components/Schemas/Details/DetailsContainer.ts
@@ -7,6 +7,7 @@ import {
   getSortedSchemaVersions,
 } from 'redux/reducers/schemas/selectors';
 import { fetchSchemaVersions, deleteSchema } from 'redux/actions';
+
 import Details from './Details';
 
 interface RouteProps {
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
index f78c2b40eb1..1413237a130 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/__test__/Details.spec.tsx
@@ -1,16 +1,22 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { shallow, mount } from 'enzyme';
+import { shallow, mount, ReactWrapper } from 'enzyme';
 import configureStore from 'redux/store/configureStore';
 import { StaticRouter } from 'react-router';
 import ClusterContext from 'components/contexts/ClusterContext';
 import DetailsContainer from 'components/Schemas/Details/DetailsContainer';
 import Details, { DetailsProps } from 'components/Schemas/Details/Details';
+
 import { schema, versions } from './fixtures';
 
 const clusterName = 'testCluster';
 const fetchSchemaVersionsMock = jest.fn();
 
+jest.mock(
+  'components/common/ConfirmationModal/ConfirmationModal',
+  () => 'mock-ConfirmationModal'
+);
+
 describe('Details', () => {
   describe('Container', () => {
     const store = configureStore();
@@ -92,29 +98,53 @@ describe('Details', () => {
       });
 
       describe('when schema has versions', () => {
-        const wrapper = shallow(setupWrapper({ versions }));
-
         it('renders table heading with SchemaVersion', () => {
+          const wrapper = shallow(setupWrapper({ versions }));
           expect(wrapper.exists('LatestVersionItem')).toBeTruthy();
           expect(wrapper.exists('button')).toBeTruthy();
           expect(wrapper.exists('thead')).toBeTruthy();
           expect(wrapper.find('SchemaVersion').length).toEqual(2);
         });
 
-        it('calls deleteSchema on button click', () => {
-          const mockDelete = jest.fn();
-          const component = mount(
-            <StaticRouter>
-              {setupWrapper({ versions, deleteSchema: mockDelete })}
-            </StaticRouter>
-          );
-          component.find('button').at(1).simulate('click');
-          expect(mockDelete).toHaveBeenCalledTimes(1);
-        });
-
         it('matches snapshot', () => {
           expect(shallow(setupWrapper({ versions }))).toMatchSnapshot();
         });
+
+        describe('confirmation', () => {
+          let wrapper: ReactWrapper;
+          let confirmationModal: ReactWrapper;
+          const mockDelete = jest.fn();
+
+          const findConfirmationModal = () =>
+            wrapper.find('mock-ConfirmationModal');
+
+          beforeEach(() => {
+            wrapper = mount(
+              <StaticRouter>
+                {setupWrapper({ versions, deleteSchema: mockDelete })}
+              </StaticRouter>
+            );
+            confirmationModal = findConfirmationModal();
+          });
+
+          it('calls deleteSchema after confirmation', () => {
+            expect(confirmationModal.prop('isOpen')).toBeFalsy();
+            wrapper.find('button').at(1).simulate('click');
+            expect(findConfirmationModal().prop('isOpen')).toBeTruthy();
+            // @ts-expect-error lack of typing of enzyme#invoke
+            confirmationModal.invoke('onConfirm')();
+            expect(mockDelete).toHaveBeenCalledTimes(1);
+          });
+
+          it('calls deleteSchema after confirmation', () => {
+            expect(confirmationModal.prop('isOpen')).toBeFalsy();
+            wrapper.find('button').at(1).simulate('click');
+            expect(findConfirmationModal().prop('isOpen')).toBeTruthy();
+            // @ts-expect-error lack of typing of enzyme#invoke
+            wrapper.find('mock-ConfirmationModal').invoke('onCancel')();
+            expect(findConfirmationModal().prop('isOpen')).toBeFalsy();
+          });
+        });
       });
 
       describe('when the readonly flag is set', () => {
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx
index 9b42c0f2d7c..7b45d0fff0a 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import LatestVersionItem from 'components/Schemas/Details/LatestVersionItem';
+
 import { schema } from './fixtures';
 
 describe('LatestVersionItem', () => {
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx
index 547a0945e39..4e817692e62 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import SchemaVersion from 'components/Schemas/Details/SchemaVersion';
+
 import { versions } from './fixtures';
 
 describe('SchemaVersion', () => {
diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
index a7e02e6df24..ef119b69215 100644
--- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
+++ b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/Details.spec.tsx.snap
@@ -67,6 +67,17 @@ exports[`Details View Initial state matches snapshot 1`] = `
         >
           Remove
         </button>
+        <mock-ConfirmationModal
+          isOpen={false}
+          onCancel={[Function]}
+          onConfirm={[Function]}
+        >
+          Are you sure want to remove 
+          <b>
+            test
+          </b>
+           schema?
+        </mock-ConfirmationModal>
       </div>
     </div>
     <LatestVersionItem
@@ -202,6 +213,17 @@ exports[`Details View when page with schema versions loaded when schema has vers
         >
           Remove
         </button>
+        <mock-ConfirmationModal
+          isOpen={false}
+          onCancel={[Function]}
+          onConfirm={[Function]}
+        >
+          Are you sure want to remove 
+          <b>
+            test
+          </b>
+           schema?
+        </mock-ConfirmationModal>
       </div>
     </div>
     <LatestVersionItem
@@ -340,6 +362,17 @@ exports[`Details View when page with schema versions loaded when versions are em
         >
           Remove
         </button>
+        <mock-ConfirmationModal
+          isOpen={false}
+          onCancel={[Function]}
+          onConfirm={[Function]}
+        >
+          Are you sure want to remove 
+          <b>
+            test
+          </b>
+           schema?
+        </mock-ConfirmationModal>
       </div>
     </div>
     <LatestVersionItem
diff --git a/kafka-ui-react-app/src/components/Schemas/List/List.tsx b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
index 587fe69d0ff..9516e8c3b47 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
@@ -6,6 +6,7 @@ import { ClusterName } from 'redux/interfaces';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import ClusterContext from 'components/contexts/ClusterContext';
+
 import ListItem from './ListItem';
 
 export interface ListProps {
diff --git a/kafka-ui-react-app/src/components/Schemas/List/ListContainer.tsx b/kafka-ui-react-app/src/components/Schemas/List/ListContainer.tsx
index 9bd7c4fd6b7..8cbcebd5cb1 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/ListContainer.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/ListContainer.tsx
@@ -5,6 +5,7 @@ import {
   getIsSchemaListFetching,
   getSchemaList,
 } from 'redux/reducers/schemas/selectors';
+
 import List from './List';
 
 const mapStateToProps = (state: RootState) => ({
diff --git a/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx b/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx
index 678b0281d35..0fbc6188f77 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/__test__/List.spec.tsx
@@ -6,6 +6,7 @@ import configureStore from 'redux/store/configureStore';
 import ClusterContext from 'components/contexts/ClusterContext';
 import ListContainer from 'components/Schemas/List/ListContainer';
 import List, { ListProps } from 'components/Schemas/List/List';
+
 import { schemas } from './fixtures';
 
 describe('List', () => {
diff --git a/kafka-ui-react-app/src/components/Schemas/List/__test__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/Schemas/List/__test__/ListItem.spec.tsx
index 7b6227e4fee..1a7eafca9f9 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/__test__/ListItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/__test__/ListItem.spec.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { BrowserRouter as Router } from 'react-router-dom';
 import ListItem from 'components/Schemas/List/ListItem';
+
 import { schemas } from './fixtures';
 
 describe('ListItem', () => {
diff --git a/kafka-ui-react-app/src/components/Schemas/New/NewContainer.ts b/kafka-ui-react-app/src/components/Schemas/New/NewContainer.ts
index 267ff08270f..0c00a485bd1 100644
--- a/kafka-ui-react-app/src/components/Schemas/New/NewContainer.ts
+++ b/kafka-ui-react-app/src/components/Schemas/New/NewContainer.ts
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { RootState } from 'redux/interfaces';
 import { createSchema } from 'redux/actions';
 import { getSchemaCreated } from 'redux/reducers/schemas/selectors';
+
 import New from './New';
 
 const mapStateToProps = (state: RootState) => ({
diff --git a/kafka-ui-react-app/src/components/Schemas/Schemas.tsx b/kafka-ui-react-app/src/components/Schemas/Schemas.tsx
index 56653af1579..3cb1b0ce34d 100644
--- a/kafka-ui-react-app/src/components/Schemas/Schemas.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/Schemas.tsx
@@ -5,6 +5,7 @@ import {
   clusterSchemaPath,
   clusterSchemasPath,
 } from 'lib/paths';
+
 import ListContainer from './List/ListContainer';
 import DetailsContainer from './Details/DetailsContainer';
 import NewContainer from './New/NewContainer';
diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx
index b7d0f304837..5dbb6fa186e 100644
--- a/kafka-ui-react-app/src/components/Topics/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx
@@ -12,6 +12,7 @@ import { FetchTopicsListParams } from 'redux/actions';
 import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import Pagination from 'components/common/Pagination/Pagination';
+
 import ListItem from './ListItem';
 
 interface Props {
diff --git a/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts b/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts
index 18f1df98aae..972deb23d3b 100644
--- a/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts
+++ b/kafka-ui-react-app/src/components/Topics/List/ListContainer.ts
@@ -7,6 +7,7 @@ import {
   getAreTopicsFetching,
   getTopicListTotalPages,
 } from 'redux/reducers/topics/selectors';
+
 import List from './List';
 
 const mapStateToProps = (state: RootState) => ({
diff --git a/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx b/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
index 82097ddb94a..77c1e985faf 100644
--- a/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
@@ -8,6 +8,7 @@ import {
 } from 'redux/interfaces';
 import DropdownItem from 'components/common/Dropdown/DropdownItem';
 import Dropdown from 'components/common/Dropdown/Dropdown';
+import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
 
 export interface ListItemProps {
   topic: TopicWithDetailedInfo;
@@ -20,6 +21,11 @@ const ListItem: React.FC<ListItemProps> = ({
   deleteTopic,
   clusterName,
 }) => {
+  const [
+    isDeleteTopicConfirmationVisible,
+    setDeleteTopicConfirmationVisible,
+  ] = React.useState(false);
+
   const outOfSyncReplicas = React.useMemo(() => {
     if (partitions === undefined || partitions.length === 0) {
       return 0;
@@ -54,19 +60,30 @@ const ListItem: React.FC<ListItemProps> = ({
           {internal ? 'Internal' : 'External'}
         </div>
       </td>
-      <td className="has-text-right">
-        <Dropdown
-          label={
-            <span className="icon">
-              <i className="fas fa-cog" />
-            </span>
-          }
-          right
+      <td>
+        <div className="has-text-right">
+          <Dropdown
+            label={
+              <span className="icon">
+                <i className="fas fa-cog" />
+              </span>
+            }
+            right
+          >
+            <DropdownItem
+              onClick={() => setDeleteTopicConfirmationVisible(true)}
+            >
+              <span className="has-text-danger">Remove Topic</span>
+            </DropdownItem>
+          </Dropdown>
+        </div>
+        <ConfirmationModal
+          isOpen={isDeleteTopicConfirmationVisible}
+          onCancel={() => setDeleteTopicConfirmationVisible(false)}
+          onConfirm={deleteTopicHandler}
         >
-          <DropdownItem onClick={deleteTopicHandler}>
-            <span className="has-text-danger">Remove Topic</span>
-          </DropdownItem>
-        </Dropdown>
+          Are you sure want to remove <b>{name}</b> topic?
+        </ConfirmationModal>
       </td>
     </tr>
   );
diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/ListItem.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/ListItem.spec.tsx
index 3b7b613f91e..7527bc0425e 100644
--- a/kafka-ui-react-app/src/components/Topics/List/__tests__/ListItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/ListItem.spec.tsx
@@ -10,6 +10,11 @@ import ListItem, { ListItemProps } from 'components/Topics/List/ListItem';
 const mockDelete = jest.fn();
 const clusterName = 'local';
 
+jest.mock(
+  'components/common/ConfirmationModal/ConfirmationModal',
+  () => 'mock-ConfirmationModal'
+);
+
 describe('ListItem', () => {
   const setupComponent = (props: Partial<ListItemProps> = {}) => (
     <ListItem
@@ -22,11 +27,25 @@ describe('ListItem', () => {
 
   it('triggers the deleteTopic when clicked on the delete button', () => {
     const wrapper = shallow(setupComponent());
-    wrapper.find('DropdownItem').simulate('click');
+    expect(wrapper.find('mock-ConfirmationModal').prop('isOpen')).toBeFalsy();
+    wrapper.find('DropdownItem').last().simulate('click');
+    const modal = wrapper.find('mock-ConfirmationModal');
+    expect(modal.prop('isOpen')).toBeTruthy();
+    modal.simulate('confirm');
     expect(mockDelete).toBeCalledTimes(1);
     expect(mockDelete).toBeCalledWith(clusterName, internalTopicPayload.name);
   });
 
+  it('closes ConfirmationModal when clicked on the cancel button', () => {
+    const wrapper = shallow(setupComponent());
+    expect(wrapper.find('mock-ConfirmationModal').prop('isOpen')).toBeFalsy();
+    wrapper.find('DropdownItem').last().simulate('click');
+    expect(wrapper.find('mock-ConfirmationModal').prop('isOpen')).toBeTruthy();
+    wrapper.find('mock-ConfirmationModal').simulate('cancel');
+    expect(mockDelete).toBeCalledTimes(0);
+    expect(wrapper.find('mock-ConfirmationModal').prop('isOpen')).toBeFalsy();
+  });
+
   it('renders correct tags for internal topic', () => {
     const wrapper = mount(
       <StaticRouter>
@@ -50,4 +69,20 @@ describe('ListItem', () => {
 
     expect(wrapper.find('.tag.is-primary').text()).toEqual('External');
   });
+
+  it('renders correct out of sync replicas number', () => {
+    const wrapper = mount(
+      <StaticRouter>
+        <table>
+          <tbody>
+            {setupComponent({
+              topic: { ...externalTopicPayload, partitions: undefined },
+            })}
+          </tbody>
+        </table>
+      </StaticRouter>
+    );
+
+    expect(wrapper.find('td').at(2).text()).toEqual('0');
+  });
 });
diff --git a/kafka-ui-react-app/src/components/Topics/New/New.tsx b/kafka-ui-react-app/src/components/Topics/New/New.tsx
index cfb634e1f3b..d52074f13a4 100644
--- a/kafka-ui-react-app/src/components/Topics/New/New.tsx
+++ b/kafka-ui-react-app/src/components/Topics/New/New.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { ClusterName, TopicName, TopicFormDataRaw } from 'redux/interfaces';
 import { useForm, FormProvider } from 'react-hook-form';
-
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
 import { clusterTopicsPath } from 'lib/paths';
 import TopicForm from 'components/Topics/shared/Form/TopicForm';
diff --git a/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts b/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts
index 406cbfe24fb..20102cafba5 100644
--- a/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts
+++ b/kafka-ui-react-app/src/components/Topics/New/NewContainer.ts
@@ -11,6 +11,7 @@ import { createTopic, createTopicAction } from 'redux/actions';
 import { getTopicCreated } from 'redux/reducers/topics/selectors';
 import { clusterTopicPath } from 'lib/paths';
 import { ThunkDispatch } from 'redux-thunk';
+
 import New from './New';
 
 interface RouteProps {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
index 099c255ba42..46c7649f004 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx
@@ -1,14 +1,17 @@
 import React from 'react';
 import { ClusterName, TopicName } from 'redux/interfaces';
 import { Topic, TopicDetails } from 'generated-sources';
-import { NavLink, Switch, Route, Link } from 'react-router-dom';
+import { NavLink, Switch, Route, Link, useHistory } from 'react-router-dom';
 import {
   clusterTopicSettingsPath,
   clusterTopicPath,
   clusterTopicMessagesPath,
-  clusterTopicsTopicEditPath,
+  clusterTopicsPath,
+  clusterTopicEditPath,
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
+import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
+
 import OverviewContainer from './Overview/OverviewContainer';
 import MessagesContainer from './Messages/MessagesContainer';
 import SettingsContainer from './Settings/SettingsContainer';
@@ -16,10 +19,20 @@ import SettingsContainer from './Settings/SettingsContainer';
 interface Props extends Topic, TopicDetails {
   clusterName: ClusterName;
   topicName: TopicName;
+  deleteTopic: (clusterName: ClusterName, topicName: TopicName) => void;
 }
 
-const Details: React.FC<Props> = ({ clusterName, topicName }) => {
+const Details: React.FC<Props> = ({ clusterName, topicName, deleteTopic }) => {
+  const history = useHistory();
   const { isReadOnly } = React.useContext(ClusterContext);
+  const [
+    isDeleteTopicConfirmationVisible,
+    setDeleteTopicConfirmationVisible,
+  ] = React.useState(false);
+  const deleteTopicHandler = React.useCallback(() => {
+    deleteTopic(clusterName, topicName);
+    history.push(clusterTopicsPath(clusterName));
+  }, [clusterName, topicName]);
 
   return (
     <div className="box">
@@ -51,14 +64,34 @@ const Details: React.FC<Props> = ({ clusterName, topicName }) => {
           </NavLink>
         </div>
         <div className="navbar-end">
-          {!isReadOnly && (
-            <Link
-              to={clusterTopicsTopicEditPath(clusterName, topicName)}
-              className="button"
-            >
-              Edit settings
-            </Link>
-          )}
+          <div className="buttons">
+            {!isReadOnly && (
+              <>
+                <button
+                  className="button is-danger"
+                  type="button"
+                  onClick={() => setDeleteTopicConfirmationVisible(true)}
+                >
+                  Delete Topic
+                </button>
+
+                <Link
+                  to={clusterTopicEditPath(clusterName, topicName)}
+                  className="button"
+                >
+                  Edit settings
+                </Link>
+
+                <ConfirmationModal
+                  isOpen={isDeleteTopicConfirmationVisible}
+                  onCancel={() => setDeleteTopicConfirmationVisible(false)}
+                  onConfirm={deleteTopicHandler}
+                >
+                  Are you sure want to remove <b>{topicName}</b> topic?
+                </ConfirmationModal>
+              </>
+            )}
+          </div>
         </div>
       </nav>
       <br />
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts
index f62a34f9879..5a08d3428a6 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/DetailsContainer.ts
@@ -1,6 +1,8 @@
 import { connect } from 'react-redux';
 import { ClusterName, RootState, TopicName } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { deleteTopic } from 'redux/actions';
+
 import Details from './Details';
 
 interface RouteProps {
@@ -22,4 +24,10 @@ const mapStateToProps = (
   topicName,
 });
 
-export default withRouter(connect(mapStateToProps)(Details));
+const mapDispatchToProps = {
+  deleteTopic,
+};
+
+export default withRouter(
+  connect(mapStateToProps, mapDispatchToProps)(Details)
+);
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Messages.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Messages.tsx
index 0ca083ed775..fd0d4499f86 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Messages.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Messages.tsx
@@ -1,6 +1,7 @@
 import 'react-datepicker/dist/react-datepicker.css';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { groupBy, map, concat, maxBy } from 'lodash';
+import DatePicker from 'react-datepicker';
 import MultiSelect from 'react-multi-select-component';
 import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 import { useDebouncedCallback } from 'use-debounce';
@@ -11,7 +12,7 @@ import {
 } from 'redux/interfaces';
 import { TopicMessage, Partition, SeekType } from 'generated-sources';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import DatePicker from 'react-datepicker';
+
 import MessagesTable from './MessagesTable';
 
 export interface Props {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
index 477c3d32bf4..8fe394b6367 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { TopicMessage } from 'generated-sources';
 import CustomParamButton from 'components/Topics/shared/Form/CustomParams/CustomParamButton';
+
 import MessageItem from './MessageItem';
 
 export interface MessagesTableProp {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx
index cea622ac0e6..f08876c8479 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessageItem.spec.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import MessageItem from 'components/Topics/Topic/Details/Messages/MessageItem';
+
 import { messages } from './fixtures';
 
 jest.mock('date-fns', () => ({
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx
index 691f069e231..0627b773a95 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx
@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import MessagesTable, {
   MessagesTableProp,
 } from 'components/Topics/Topic/Details/Messages/MessagesTable';
+
 import { messages } from './fixtures';
 
 jest.mock('date-fns', () => ({
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/OverviewContainer.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/OverviewContainer.ts
index 45abc2aaf4f..c3e42c9f2dd 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/OverviewContainer.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/OverviewContainer.ts
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { RootState, TopicName, ClusterName } from 'redux/interfaces';
 import { getTopicByName } from 'redux/reducers/topics/selectors';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+
 import Overview from './Overview';
 
 interface RouteProps {
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/SettingsContainer.ts b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/SettingsContainer.ts
index af2c9a244be..0d4fa4dbe12 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/SettingsContainer.ts
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/SettingsContainer.ts
@@ -6,6 +6,7 @@ import {
   getTopicConfig,
   getTopicConfigFetched,
 } from 'redux/reducers/topics/selectors';
+
 import Settings from './Settings';
 
 interface RouteProps {
@@ -30,8 +31,7 @@ const mapStateToProps = (
 });
 
 const mapDispatchToProps = {
-  fetchTopicConfig: (clusterName: ClusterName, topicName: TopicName) =>
-    fetchTopicConfig(clusterName, topicName),
+  fetchTopicConfig,
 };
 
 export default withRouter(
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx b/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
index 55cee070d72..d0a33cab032 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/TopicContainer.tsx
@@ -2,6 +2,7 @@ import { connect } from 'react-redux';
 import { RootState } from 'redux/interfaces';
 import { fetchTopicDetails } from 'redux/actions';
 import { getIsTopicDetailsFetching } from 'redux/reducers/topics/selectors';
+
 import Topic from './Topic';
 
 const mapStateToProps = (state: RootState) => ({
diff --git a/kafka-ui-react-app/src/components/Topics/Topics.tsx b/kafka-ui-react-app/src/components/Topics/Topics.tsx
index 8990bf96b59..6a78e22ee51 100644
--- a/kafka-ui-react-app/src/components/Topics/Topics.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topics.tsx
@@ -5,6 +5,7 @@ import {
   clusterTopicPath,
   clusterTopicsPath,
 } from 'lib/paths';
+
 import ListContainer from './List/ListContainer';
 import TopicContainer from './Topic/TopicContainer';
 import NewContainer from './New/NewContainer';
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx
index a6909024a97..41f48a6dc5f 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamAction.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import CustomParamButton from './CustomParamButton';
 
 interface Props {
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx
index 2be0fd1783e..31965e372b1 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamSelect.tsx
@@ -3,6 +3,7 @@ import { useFormContext } from 'react-hook-form';
 import { TopicConfigValue } from 'redux/interfaces';
 import { ErrorMessage } from '@hookform/error-message';
 import { TOPIC_CUSTOM_PARAMS } from 'lib/constants';
+
 import { INDEX_PREFIX } from './CustomParams';
 
 export interface CustomParamSelectProps {
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx
index 1a1080a1278..570d0154f40 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParams.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { omit, reject, reduce, remove } from 'lodash';
 import { v4 } from 'uuid';
-
 import {
   TopicFormCustomParams,
   TopicConfigByName,
   TopicConfigParams,
 } from 'redux/interfaces';
+
 import CustomParamButton from './CustomParamButton';
 import CustomParamField from './CustomParamField';
 
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx
index d2f017e7737..4d5065e6731 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/CustomParams/CustomParamsContainer.tsx
@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import { RootState, TopicConfigByName } from 'redux/interfaces';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
+
 import CustomParams from './CustomParams';
 
 interface OwnProps extends RouteComponentProps {
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx
index 86d89cd3abc..84100f39f70 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import prettyMilliseconds from 'pretty-ms';
 import { useFormContext } from 'react-hook-form';
 import { ErrorMessage } from '@hookform/error-message';
-
 import { MILLISECONDS_IN_WEEK, MILLISECONDS_IN_SECOND } from 'lib/constants';
+
 import TimeToRetainBtns from './TimeToRetainBtns';
 
 interface Props {
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx
index f75d08791dc..afd974b151b 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { MILLISECONDS_IN_DAY } from 'lib/constants';
+
 import TimeToRetainBtn from './TimeToRetainBtn';
 
 interface Props {
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
index 0bf9f5caf15..ddcc0c79c39 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.tsx
@@ -3,6 +3,7 @@ import { useFormContext } from 'react-hook-form';
 import { TOPIC_NAME_VALIDATION_PATTERN, BYTES_IN_GB } from 'lib/constants';
 import { TopicName, TopicConfigByName } from 'redux/interfaces';
 import { ErrorMessage } from '@hookform/error-message';
+
 import CustomParamsContainer from './CustomParams/CustomParamsContainer';
 import TimeToRetain from './TimeToRetain';
 
diff --git a/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx b/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx
index 8e8705b7da2..4ee54ec584a 100644
--- a/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx
+++ b/kafka-ui-react-app/src/components/common/JSONViewer/JSONViewer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import JSONTree from 'react-json-tree';
-import theme from './themes/google';
+import theme from 'components/common/JSONViewer/themes/google';
 
 interface JSONViewerProps {
   data: Record<string, string>;
diff --git a/kafka-ui-react-app/src/components/common/Pagination/Pagination.tsx b/kafka-ui-react-app/src/components/common/Pagination/Pagination.tsx
index e2d80c4af8f..7307561088f 100644
--- a/kafka-ui-react-app/src/components/common/Pagination/Pagination.tsx
+++ b/kafka-ui-react-app/src/components/common/Pagination/Pagination.tsx
@@ -3,7 +3,7 @@ import usePagination from 'lib/hooks/usePagination';
 import { range } from 'lodash';
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PageControl from './PageControl';
+import PageControl from 'components/common/Pagination/PageControl';
 
 export interface PaginationProps {
   totalPages: number;
diff --git a/kafka-ui-react-app/src/index.tsx b/kafka-ui-react-app/src/index.tsx
index ac83617660e..2a82087ef5e 100644
--- a/kafka-ui-react-app/src/index.tsx
+++ b/kafka-ui-react-app/src/index.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import './theme/index.scss';
-import AppContainer from './components/AppContainer';
-import * as serviceWorker from './serviceWorker';
-import configureStore from './redux/store/configureStore';
+import * as serviceWorker from 'serviceWorker';
+import configureStore from 'redux/store/configureStore';
+import AppContainer from 'components/AppContainer';
+import 'theme/index.scss';
 
 const store = configureStore();
 
diff --git a/kafka-ui-react-app/src/lib/__tests__/paths.spec.ts b/kafka-ui-react-app/src/lib/__test__/paths.spec.ts
similarity index 94%
rename from kafka-ui-react-app/src/lib/__tests__/paths.spec.ts
rename to kafka-ui-react-app/src/lib/__test__/paths.spec.ts
index 70a2fe99f02..366e2d92e79 100644
--- a/kafka-ui-react-app/src/lib/__tests__/paths.spec.ts
+++ b/kafka-ui-react-app/src/lib/__test__/paths.spec.ts
@@ -61,12 +61,11 @@ describe('Paths', () => {
       '/ui/clusters/local/topics/topic123/messages'
     );
   });
-  it('clusterTopicsTopicEditPath', () => {
-    expect(paths.clusterTopicsTopicEditPath('local', 'topic123')).toEqual(
+  it('clusterTopicEditPath', () => {
+    expect(paths.clusterTopicEditPath('local', 'topic123')).toEqual(
       '/ui/clusters/local/topics/topic123/edit'
     );
   });
-
   it('clusterConnectorsPath', () => {
     expect(paths.clusterConnectorsPath('local')).toEqual(
       '/ui/clusters/local/connectors'
diff --git a/kafka-ui-react-app/src/lib/paths.ts b/kafka-ui-react-app/src/lib/paths.ts
index e05e880612c..6a06a3b514e 100644
--- a/kafka-ui-react-app/src/lib/paths.ts
+++ b/kafka-ui-react-app/src/lib/paths.ts
@@ -1,4 +1,5 @@
 import { ClusterName, SchemaName, TopicName } from 'redux/interfaces';
+
 import { GIT_REPO_LINK } from './constants';
 
 export const gitCommitPath = (commit: string) =>
@@ -41,7 +42,7 @@ export const clusterTopicMessagesPath = (
   clusterName: ClusterName,
   topicName: TopicName
 ) => `${clusterTopicsPath(clusterName)}/${topicName}/messages`;
-export const clusterTopicsTopicEditPath = (
+export const clusterTopicEditPath = (
   clusterName: ClusterName,
   topicName: TopicName
 ) => `${clusterTopicsPath(clusterName)}/${topicName}/edit`;
diff --git a/kafka-ui-react-app/src/redux/actions/thunks/brokers.ts b/kafka-ui-react-app/src/redux/actions/thunks/brokers.ts
index b8be5f2001e..f698f45c29d 100644
--- a/kafka-ui-react-app/src/redux/actions/thunks/brokers.ts
+++ b/kafka-ui-react-app/src/redux/actions/thunks/brokers.ts
@@ -1,6 +1,5 @@
 import { BrokersApi, Configuration } from 'generated-sources';
 import { PromiseThunkResult, ClusterName, BrokerId } from 'redux/interfaces';
-
 import { BASE_PARAMS } from 'lib/constants';
 import * as actions from 'redux/actions/actions';
 
diff --git a/kafka-ui-react-app/src/redux/actions/thunks/clusters.ts b/kafka-ui-react-app/src/redux/actions/thunks/clusters.ts
index 26cd0778c35..8d7f2030e76 100644
--- a/kafka-ui-react-app/src/redux/actions/thunks/clusters.ts
+++ b/kafka-ui-react-app/src/redux/actions/thunks/clusters.ts
@@ -1,6 +1,5 @@
 import { ClustersApi, Configuration, Cluster } from 'generated-sources';
 import { PromiseThunkResult, ClusterName } from 'redux/interfaces';
-
 import { BASE_PARAMS } from 'lib/constants';
 import * as actions from 'redux/actions/actions';
 
diff --git a/kafka-ui-react-app/src/redux/actions/thunks/consumerGroups.ts b/kafka-ui-react-app/src/redux/actions/thunks/consumerGroups.ts
index 97f1d799e47..4a5445cb3b6 100644
--- a/kafka-ui-react-app/src/redux/actions/thunks/consumerGroups.ts
+++ b/kafka-ui-react-app/src/redux/actions/thunks/consumerGroups.ts
@@ -4,7 +4,6 @@ import {
   PromiseThunkResult,
   ClusterName,
 } from 'redux/interfaces';
-
 import { BASE_PARAMS } from 'lib/constants';
 import * as actions from 'redux/actions/actions';
 
diff --git a/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts b/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts
index 323a6f0e4ca..ccc7e1034cd 100644
--- a/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts
+++ b/kafka-ui-react-app/src/redux/actions/thunks/schemas.ts
@@ -10,7 +10,6 @@ import {
   SchemaName,
   FailurePayload,
 } from 'redux/interfaces';
-
 import { BASE_PARAMS } from 'lib/constants';
 import * as actions from 'redux/actions';
 import { getResponse } from 'lib/errorHandling';
diff --git a/kafka-ui-react-app/src/redux/interfaces/index.ts b/kafka-ui-react-app/src/redux/interfaces/index.ts
index 8427d3cc3fd..5a1623149fe 100644
--- a/kafka-ui-react-app/src/redux/interfaces/index.ts
+++ b/kafka-ui-react-app/src/redux/interfaces/index.ts
@@ -1,6 +1,7 @@
 import { ActionType } from 'typesafe-actions';
 import { ThunkAction } from 'redux-thunk';
 import * as actions from 'redux/actions/actions';
+
 import { TopicsState } from './topic';
 import { ClusterState } from './cluster';
 import { BrokersState } from './broker';
diff --git a/kafka-ui-react-app/src/redux/reducers/alerts/__test__/reducer.spec.ts b/kafka-ui-react-app/src/redux/reducers/alerts/__test__/reducer.spec.ts
index 434bb542ce6..d6ec7d5bbf6 100644
--- a/kafka-ui-react-app/src/redux/reducers/alerts/__test__/reducer.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/alerts/__test__/reducer.spec.ts
@@ -1,5 +1,6 @@
 import { dismissAlert, createTopicAction } from 'redux/actions';
 import reducer from 'redux/reducers/alerts/reducer';
+
 import { failurePayload1, failurePayload2 } from './fixtures';
 
 jest.mock('lodash', () => ({
diff --git a/kafka-ui-react-app/src/redux/reducers/alerts/__test__/selectors.spec.ts b/kafka-ui-react-app/src/redux/reducers/alerts/__test__/selectors.spec.ts
index bd71aa8fbc0..343abe3cca1 100644
--- a/kafka-ui-react-app/src/redux/reducers/alerts/__test__/selectors.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/alerts/__test__/selectors.spec.ts
@@ -1,6 +1,7 @@
 import configureStore from 'redux/store/configureStore';
 import { createTopicAction } from 'redux/actions';
 import * as selectors from 'redux/reducers/alerts/selectors';
+
 import { failurePayload1, failurePayload2 } from './fixtures';
 
 const store = configureStore();
diff --git a/kafka-ui-react-app/src/redux/reducers/alerts/reducer.ts b/kafka-ui-react-app/src/redux/reducers/alerts/reducer.ts
index a92006adc36..5e75f1023b7 100644
--- a/kafka-ui-react-app/src/redux/reducers/alerts/reducer.ts
+++ b/kafka-ui-react-app/src/redux/reducers/alerts/reducer.ts
@@ -1,6 +1,7 @@
 import { getType } from 'typesafe-actions';
 import { dismissAlert } from 'redux/actions';
 import { Action, AlertsState } from 'redux/interfaces';
+
 import { addError, removeAlert } from './utils';
 
 export const initialState: AlertsState = {};
diff --git a/kafka-ui-react-app/src/redux/reducers/clusters/__test__/reducer.spec.ts b/kafka-ui-react-app/src/redux/reducers/clusters/__test__/reducer.spec.ts
index 3c942e03966..d8bbc747a25 100644
--- a/kafka-ui-react-app/src/redux/reducers/clusters/__test__/reducer.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/clusters/__test__/reducer.spec.ts
@@ -1,5 +1,6 @@
 import { fetchClusterListAction } from 'redux/actions';
 import reducer from 'redux/reducers/clusters/reducer';
+
 import { clustersPayload } from './fixtures';
 
 describe('Clusters reducer', () => {
diff --git a/kafka-ui-react-app/src/redux/reducers/clusters/__test__/selectors.spec.ts b/kafka-ui-react-app/src/redux/reducers/clusters/__test__/selectors.spec.ts
index 93597f8fe5a..5bb16230cad 100644
--- a/kafka-ui-react-app/src/redux/reducers/clusters/__test__/selectors.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/clusters/__test__/selectors.spec.ts
@@ -1,6 +1,7 @@
 import { fetchClusterListAction } from 'redux/actions';
 import configureStore from 'redux/store/configureStore';
 import * as selectors from 'redux/reducers/clusters/selectors';
+
 import {
   clustersPayload,
   offlineClusterPayload,
diff --git a/kafka-ui-react-app/src/redux/reducers/index.ts b/kafka-ui-react-app/src/redux/reducers/index.ts
index 005a0e680ad..7e3851b77be 100644
--- a/kafka-ui-react-app/src/redux/reducers/index.ts
+++ b/kafka-ui-react-app/src/redux/reducers/index.ts
@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 import { RootState } from 'redux/interfaces';
+
 import topics from './topics/reducer';
 import clusters from './clusters/reducer';
 import brokers from './brokers/reducer';
diff --git a/kafka-ui-react-app/src/redux/reducers/schemas/__test__/reducer.spec.ts b/kafka-ui-react-app/src/redux/reducers/schemas/__test__/reducer.spec.ts
index 29f74051a44..1aa2602c37e 100644
--- a/kafka-ui-react-app/src/redux/reducers/schemas/__test__/reducer.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/schemas/__test__/reducer.spec.ts
@@ -6,6 +6,7 @@ import {
   fetchSchemaVersionsAction,
 } from 'redux/actions';
 import reducer from 'redux/reducers/schemas/reducer';
+
 import {
   clusterSchemasPayload,
   initialState,
diff --git a/kafka-ui-react-app/src/redux/reducers/schemas/__test__/selectors.spec.ts b/kafka-ui-react-app/src/redux/reducers/schemas/__test__/selectors.spec.ts
index 0e06c484db2..1108ae6d556 100644
--- a/kafka-ui-react-app/src/redux/reducers/schemas/__test__/selectors.spec.ts
+++ b/kafka-ui-react-app/src/redux/reducers/schemas/__test__/selectors.spec.ts
@@ -5,6 +5,7 @@ import {
 } from 'redux/actions';
 import configureStore from 'redux/store/configureStore';
 import * as selectors from 'redux/reducers/schemas/selectors';
+
 import {
   clusterSchemasPayload,
   clusterSchemasPayloadWithNewSchema,