diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23b0e04119..4f6d300b19 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- UI Updates for the integrations page ([#2310](https://github.com/grafana/oncall/pull/2310))
+
 ## v1.2.46 (2023-06-22)
 
 ### Added
diff --git a/grafana-plugin/integration-tests/utils/integrations.ts b/grafana-plugin/integration-tests/utils/integrations.ts
index 8e54eaa1da..c903f3adb5 100644
--- a/grafana-plugin/integration-tests/utils/integrations.ts
+++ b/grafana-plugin/integration-tests/utils/integrations.ts
@@ -1,5 +1,5 @@
 import { Page } from '@playwright/test';
-import { clickButton, fillInInput, selectDropdownValue } from './forms';
+import { clickButton } from './forms';
 import { goToOnCallPage } from './navigation';
 
 const CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR = 'div[data-testid="create-integration-modal"]';
@@ -9,7 +9,7 @@ export const openCreateIntegrationModal = async (page: Page): Promise<void> => {
   await goToOnCallPage(page, 'integrations');
 
   // open the create integration modal
-  (await page.waitForSelector('text=New integration to receive alerts')).click();
+  (await page.waitForSelector('text=New integration')).click();
 
   // wait for it to pop up
   await page.waitForSelector(CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR);
@@ -18,32 +18,34 @@ export const openCreateIntegrationModal = async (page: Page): Promise<void> => {
 export const createIntegrationAndSendDemoAlert = async (
   page: Page,
   integrationName: string,
-  escalationChainName: string
+  _escalationChainName: string
 ): Promise<void> => {
   await openCreateIntegrationModal(page);
 
   // create a webhook integration
   (await page.waitForSelector(`${CREATE_INTEGRATION_MODAL_TEST_ID_SELECTOR} >> text=Webhook`)).click();
 
-  // wait for the integrations settings modal to open up... and then close it
-  await clickButton({ page, buttonText: 'Open Escalations Settings' });
+  // fill in the required inputs
+  (await page.waitForSelector('input[name="verbal_name"]', { state: 'attached' })).fill(integrationName);
+  (await page.waitForSelector('textarea[name="description_short"]', { state: 'attached' })).fill("Here goes your integration description");
 
-  // update the integration name
-  await (await page.waitForSelector('div[data-testid="integration-header"] >> h4 >> button')).click();
-  await fillInInput(page, 'div[data-testid="edit-integration-name-modal"] >> input', integrationName);
-  await clickButton({ page, buttonText: 'Update' });
+  const grafanaUpdateBtn = page.getByTestId("update-integration-button");
+  await grafanaUpdateBtn.click();
 
-  const integrationSettingsElement = page.getByTestId('integration-settings');
+  /*
+   * TODO: This is slightly more complicated now, change this in next iteration */
+  // const integrationSettingsElement = page.getByTestId('integration-settings');
 
-  // assign the escalation chain to the integration
-  await selectDropdownValue({
-    page,
-    selectType: 'grafanaSelect',
-    placeholderText: 'Select Escalation Chain',
-    value: escalationChainName,
-    startingLocator: integrationSettingsElement,
-  });
+  // // assign the escalation chain to the integration
+  // await selectDropdownValue({
+  //   page,
+  //   selectType: 'grafanaSelect',
+  //   placeholderText: 'Select Escalation Chain',
+  //   value: escalationChainName,
+  //   startingLocator: integrationSettingsElement,
+  // });
 
   // send demo alert
   await clickButton({ page, buttonText: 'Send demo alert', dataTestId: 'send-demo-alert' });
+  await clickButton({ page, buttonText: 'Send Alert', dataTestId: "submit-send-alert" })
 };
diff --git a/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts b/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
index 8c65c6fb5b..1fc1ff932a 100644
--- a/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
+++ b/grafana-plugin/src/components/AlertTemplates/CommonAlertTemplatesForm.config.ts
@@ -1,4 +1,4 @@
-import { TemplateOptions } from 'pages/integration_2/Integration2.config';
+import { TemplateOptions } from 'pages/integration/Integration.config';
 
 export interface Template {
   name: string;
diff --git a/grafana-plugin/src/components/GForm/GForm.tsx b/grafana-plugin/src/components/GForm/GForm.tsx
index 4990c28244..a7e6b1454f 100644
--- a/grafana-plugin/src/components/GForm/GForm.tsx
+++ b/grafana-plugin/src/components/GForm/GForm.tsx
@@ -151,9 +151,11 @@ class GForm extends React.Component<GFormProps, {}> {
           return (
             <>
               {openFields.map(renderField)}
-              <Collapse isOpen={false} label="Notification settings" className={cx('collapse')}>
-                {collapsedfields.map(renderField)}
-              </Collapse>
+              {collapsedfields.length > 0 && (
+                <Collapse isOpen={false} label="Notification settings" className={cx('collapse')}>
+                  {collapsedfields.map(renderField)}
+                </Collapse>
+              )}
             </>
           );
         }}
diff --git a/grafana-plugin/src/containers/AlertRules/AlertRules.helpers.ts b/grafana-plugin/src/containers/AlertRules/AlertRules.helpers.ts
deleted file mode 100644
index c6220d480c..0000000000
--- a/grafana-plugin/src/containers/AlertRules/AlertRules.helpers.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { toArray } from 'react-emoji-render';
-
-export const parseEmojis = (value: any) => {
-  const emojisArray = toArray(value);
-
-  // toArray outputs React elements for emojis and strings for other
-  const newValue = emojisArray.reduce((previous, current) => {
-    if (typeof current === 'string') {
-      return previous + current;
-    }
-    //@ts-ignore
-    return previous + current.props.children;
-  }, '');
-
-  return newValue;
-};
diff --git a/grafana-plugin/src/containers/AlertRules/AlertRules.module.css b/grafana-plugin/src/containers/AlertRules/AlertRules.module.css
deleted file mode 100644
index 317ae25bfa..0000000000
--- a/grafana-plugin/src/containers/AlertRules/AlertRules.module.css
+++ /dev/null
@@ -1,144 +0,0 @@
-.root {
-  display: flex;
-  gap: 24px;
-  flex-direction: column;
-}
-
-.route {
-  margin-bottom: 10px;
-}
-
-.route-content {
-  margin-left: 16px;
-}
-
-.route-header {
-  margin-bottom: 10px;
-}
-
-.verbal-name {
-  font-weight: 500;
-}
-
-.headerBlock {
-  background-color: var(--secondary-background);
-}
-
-.title {
-  font-size: 16px;
-}
-
-.root .timeline {
-  margin-left: 20px;
-}
-
-.root .steps {
-  margin: 10px 0 0 0;
-}
-
-.root .select {
-  flex-shrink: 0;
-  min-width: 100px;
-}
-
-.create-channel-filter {
-  margin-left: 40px;
-  margin-top: 10px;
-}
-
-.channel-filter-header {
-  display: flex;
-  flex-wrap: wrap-reverse;
-}
-
-.channel-filter-header-left,
-.channel-filter-header-right {
-  flex-grow: 1;
-  margin-bottom: 16px;
-}
-
-.channel-filter-header-right {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.channel-filter-header-title {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  column-gap: 4px;
-  row-gap: 8px;
-}
-
-.root .channel mark {
-  padding: 2px 5px;
-}
-
-.channel_disabled {
-  text-decoration: line-through;
-}
-
-.alertRulesActions {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 24px;
-}
-
-.alertRulesContent {
-  flex-shrink: 0;
-  overflow: auto;
-  max-height: 65vh;
-}
-
-.slackLink {
-  font-size: 12px;
-}
-
-.buttons {
-  display: flex;
-  align-items: baseline;
-}
-
-.buttons > * {
-  margin-left: 8px;
-}
-
-.slack-channel-step {
-  border-radius: 2px;
-  background: var(--secondary-background);
-  padding: 2px 2px 2px 12px;
-  flex-wrap: wrap;
-}
-
-.icons-container {
-  align-self: center;
-}
-
-.slack-channel-switch {
-  margin-left: -8px;
-}
-
-.description-style a {
-  color: var(--primary-text-link);
-}
-
-.integration__heading-text {
-  display: flex;
-  gap: 8px;
-}
-
-.integration__heading-container {
-  display: flex;
-  flex-wrap: wrap-reverse;
-}
-
-.integration__heading-container-left,
-.integration__heading-container-right {
-  flex-grow: 1;
-  margin-bottom: 12px;
-}
-
-.integration__heading-container-right {
-  display: flex;
-  justify-content: flex-end;
-}
diff --git a/grafana-plugin/src/containers/AlertRules/AlertRules.tsx b/grafana-plugin/src/containers/AlertRules/AlertRules.tsx
deleted file mode 100644
index 4bb4a088ab..0000000000
--- a/grafana-plugin/src/containers/AlertRules/AlertRules.tsx
+++ /dev/null
@@ -1,922 +0,0 @@
-import React, { SyntheticEvent } from 'react';
-
-import { SelectableValue } from '@grafana/data';
-import {
-  Alert,
-  Button,
-  ConfirmModal,
-  Field,
-  HorizontalGroup,
-  Icon,
-  IconButton,
-  Input,
-  LoadingPlaceholder,
-  Modal,
-  Tooltip,
-  VerticalGroup,
-} from '@grafana/ui';
-import cn from 'classnames/bind';
-import { observer } from 'mobx-react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Emoji from 'react-emoji-render';
-
-import Collapse from 'components/Collapse/Collapse';
-import Block from 'components/GBlock/Block';
-import PluginLink from 'components/PluginLink/PluginLink';
-import SourceCode from 'components/SourceCode/SourceCode';
-import Text from 'components/Text/Text';
-import WithConfirm from 'components/WithConfirm/WithConfirm';
-import { parseEmojis } from 'containers/AlertRules/AlertRules.helpers';
-import { ChatOpsConnectors } from 'containers/AlertRules/parts';
-import ChannelFilterForm from 'containers/ChannelFilterForm/ChannelFilterForm';
-import EscalationChainForm, { EscalationChainFormMode } from 'containers/EscalationChainForm/EscalationChainForm';
-import EscalationChainSteps from 'containers/EscalationChainSteps/EscalationChainSteps';
-import GSelect from 'containers/GSelect/GSelect';
-import { IntegrationSettingsTab } from 'containers/IntegrationSettings/IntegrationSettings.types';
-import TeamName from 'containers/TeamName/TeamName';
-import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { AlertReceiveChannel, MaintenanceMode } from 'models/alert_receive_channel/alert_receive_channel.types';
-import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
-import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
-import { EscalationPolicyOption } from 'models/escalation_policy/escalation_policy.types';
-import { MaintenanceType } from 'models/maintenance/maintenance.types';
-import { AppFeature } from 'state/features';
-import { WithStoreProps } from 'state/types';
-import { withMobXProviderContext } from 'state/withStore';
-import { openNotification } from 'utils';
-import { isUserActionAllowed, UserActions } from 'utils/authorization';
-import sanitize from 'utils/sanitize';
-
-import styles from './AlertRules.module.css';
-const cx = cn.bind(styles);
-
-interface AlertRulesProps extends WithStoreProps {
-  alertReceiveChannelId: AlertReceiveChannel['id'];
-  onDelete: (id: AlertReceiveChannel['id']) => void;
-  onEditAlertReceiveChannelTemplates: () => void;
-  onShowSettings: (tab?: IntegrationSettingsTab) => void;
-}
-
-interface AlertRulesState {
-  alertReceiveChannelIdToEditTemplates?: AlertReceiveChannel['id'];
-  alertReceiveChannelIdToCreateChannelFilter?: AlertReceiveChannel['id'];
-  channelFilterToEdit?: ChannelFilter;
-  expandedRoutes: Array<AlertReceiveChannel['id']>;
-  settingsVisible?: boolean;
-  routeToDelete?: ChannelFilter['id'];
-  escalationChainIdToCopy?: EscalationChain['id'];
-  channelFilterIdToCopyEscalationChain?: ChannelFilter['id'];
-  editIntegrationName?: string;
-}
-
-const Notification: React.FC = () => (
-  <div>
-    Demo alert was generated. Find it on the
-    <PluginLink query={{ page: 'alert-groups' }}> "Alert Groups" </PluginLink>
-    page and make sure it didn't freak out your colleagues 😉
-  </div>
-);
-
-@observer
-class AlertRules extends React.Component<AlertRulesProps, AlertRulesState> {
-  state: AlertRulesState = {
-    expandedRoutes: [],
-  };
-
-  newAlertReceiveChannelName?: string;
-
-  componentDidMount() {
-    if (this.props.alertReceiveChannelId) {
-      this.update();
-    }
-  }
-
-  componentDidUpdate(prevProps: Readonly<AlertRulesProps>, _prevState: Readonly<AlertRulesState>, _snapshot?: any) {
-    if (this.props.alertReceiveChannelId && prevProps.alertReceiveChannelId !== this.props.alertReceiveChannelId) {
-      if (prevProps.alertReceiveChannelId) {
-        this.setState({
-          expandedRoutes: [],
-          channelFilterToEdit: undefined,
-          channelFilterIdToCopyEscalationChain: undefined,
-          alertReceiveChannelIdToCreateChannelFilter: undefined,
-          alertReceiveChannelIdToEditTemplates: undefined,
-          editIntegrationName: undefined,
-        });
-      }
-
-      this.update();
-    }
-  }
-
-  async update() {
-    const { store, alertReceiveChannelId } = this.props;
-    const { alertReceiveChannelStore, telegramChannelStore } = store;
-
-    store.alertReceiveChannelStore.updateItem(alertReceiveChannelId);
-
-    await store.alertReceiveChannelStore.updateChannelFilters(alertReceiveChannelId);
-    await store.escalationChainStore.updateItems();
-    await telegramChannelStore.updateTelegramChannels();
-
-    const channelFilterIds = store.alertReceiveChannelStore.channelFilterIds[alertReceiveChannelId];
-
-    store.alertReceiveChannelStore.updateCustomButtons(alertReceiveChannelId);
-
-    const expandedRoutes: Array<ChannelFilter['id']> = [];
-    channelFilterIds
-      .filter((channelFilterId: ChannelFilter['id']) => {
-        const channelFilter = alertReceiveChannelStore.channelFilters[channelFilterId];
-
-        return channelFilter.is_default;
-      })
-      .forEach((channelFilterId: ChannelFilter['id']) => {
-        const channelFilter = alertReceiveChannelStore.channelFilters[channelFilterId];
-        store.escalationPolicyStore.updateEscalationPolicies(channelFilter.escalation_chain);
-
-        expandedRoutes.push(channelFilterId);
-      });
-
-    this.setState({ expandedRoutes });
-  }
-
-  render() {
-    const {
-      alertReceiveChannelIdToCreateChannelFilter,
-      routeToDelete,
-      escalationChainIdToCopy,
-      channelFilterIdToCopyEscalationChain,
-      editIntegrationName,
-    } = this.state;
-    const { store, alertReceiveChannelId, onShowSettings } = this.props;
-    const { alertReceiveChannelStore } = store;
-
-    const alertReceiveChannel = alertReceiveChannelStore.items[alertReceiveChannelId];
-
-    if (!alertReceiveChannel) {
-      return <LoadingPlaceholder text="Loading..." />;
-    }
-
-    const isIntegrationNameempty = editIntegrationName === '';
-    const maintenanceMode = alertReceiveChannel.maintenance_mode;
-    return (
-      <>
-        <div className={cx('root')} data-testid="integration-settings">
-          <Block className={cx('headerBlock')}>
-            <div className={cx('integration__heading-container')} data-testid="integration-header">
-              <div className={cx('integration__heading-container-left')}>
-                <Text.Title level={4}>
-                  <div className={cx('integration__heading-text')}>
-                    <div className={cx('verbal-name')}>{parseEmojis(alertReceiveChannel?.verbal_name || '')}</div>
-                    <Tooltip placement="top" content="Edit name">
-                      <IconButton
-                        name="pen"
-                        onClick={this.getChangeIntegrationNameHandler(parseEmojis(alertReceiveChannel?.verbal_name))}
-                      />
-                    </Tooltip>
-                  </div>
-                </Text.Title>
-              </div>
-
-              <div className={cx('integration__heading-container-right')}>
-                <div className={cx('buttons')}>
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => {
-                      onShowSettings(IntegrationSettingsTab.HowToConnect);
-                    }}
-                  >
-                    How to connect
-                  </Button>
-                  <WithPermissionControlTooltip userAction={UserActions.IntegrationsTest}>
-                    <Button
-                      variant="secondary"
-                      size="sm"
-                      onClick={this.getSendDemoAlertClickHandler(alertReceiveChannel.id)}
-                      data-testid="send-demo-alert"
-                    >
-                      Send demo alert
-                    </Button>
-                  </WithPermissionControlTooltip>
-                  <div className={cx('icons-container')}>
-                    {maintenanceMode === MaintenanceMode.Debug || maintenanceMode === MaintenanceMode.Maintenance ? (
-                      <Tooltip placement="top" content="Stop maintenance mode">
-                        <Button
-                          className="grey-button"
-                          disabled={!isUserActionAllowed(UserActions.MaintenanceWrite)}
-                          fill="text"
-                          icon="square-shape"
-                          onClick={this.handleStopMaintenance}
-                        />
-                      </Tooltip>
-                    ) : (
-                      <PluginLink
-                        query={{
-                          page: 'maintenance',
-                          maintenance_type: MaintenanceType.alert_receive_channel,
-                          alert_receive_channel: alertReceiveChannel.id,
-                        }}
-                        disabled={!isUserActionAllowed(UserActions.MaintenanceWrite)}
-                      >
-                        <WithPermissionControlTooltip userAction={UserActions.MaintenanceWrite}>
-                          <IconButton
-                            name="pause"
-                            size="sm"
-                            tooltip="Setup maintenance mode"
-                            tooltipPlacement="top"
-                            disabled={!isUserActionAllowed(UserActions.MaintenanceWrite)}
-                          />
-                        </WithPermissionControlTooltip>
-                      </PluginLink>
-                    )}
-                    <IconButton
-                      name="cog"
-                      size="sm"
-                      tooltip="Settings"
-                      tooltipPlacement="top"
-                      onClick={() => {
-                        onShowSettings();
-                      }}
-                    />
-                    <WithPermissionControlTooltip userAction={UserActions.EscalationChainsWrite}>
-                      <WithConfirm
-                        title="Delete integration?"
-                        body={
-                          <>
-                            Are you sure you want to delete <Emoji text={alertReceiveChannel.verbal_name} />{' '}
-                            integration?
-                          </>
-                        }
-                      >
-                        <IconButton
-                          size="sm"
-                          tooltip="Delete"
-                          tooltipPlacement="top"
-                          onClick={this.handleDeleteAlertReceiveChannel}
-                          name="trash-alt"
-                        />
-                      </WithConfirm>
-                    </WithPermissionControlTooltip>
-                  </div>
-                </div>
-              </div>
-
-              {editIntegrationName !== undefined && (
-                <Modal
-                  isOpen
-                  title="Edit integration name"
-                  onDismiss={() => this.setState({ editIntegrationName: undefined })}
-                >
-                  <div className={cx('root')} data-testid="edit-integration-name-modal">
-                    <Field invalid={isIntegrationNameempty}>
-                      <Input
-                        autoFocus
-                        value={editIntegrationName}
-                        onChange={(e: any) => this.setState({ editIntegrationName: e.target.value })}
-                      />
-                    </Field>
-                    <HorizontalGroup>
-                      <Button
-                        variant="primary"
-                        onClick={this.handleChangeAlertReceiveChannelName}
-                        disabled={isIntegrationNameempty}
-                      >
-                        Update
-                      </Button>
-                      <Button variant="secondary" onClick={() => this.setState({ editIntegrationName: undefined })}>
-                        Cancel
-                      </Button>
-                    </HorizontalGroup>
-                  </div>
-                </Modal>
-              )}
-            </div>
-          </Block>
-
-          {alertReceiveChannel.description && (
-            <div className={cx('description-style')}>
-              <Alert
-                style={{ marginBottom: '0' }}
-                // @ts-ignore
-                title={<div dangerouslySetInnerHTML={{ __html: sanitize(alertReceiveChannel.description) }}></div>}
-                severity="info"
-              />
-            </div>
-          )}
-          <div className={cx('alertRulesContent')}>
-            <div className={cx('alertRulesActions')}>
-              <Button
-                onClick={() => {
-                  onShowSettings(IntegrationSettingsTab.Templates);
-                }}
-                variant="secondary"
-              >
-                Change alert template and grouping
-              </Button>
-              {!alertReceiveChannelIdToCreateChannelFilter && (
-                <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                  <Button
-                    icon="plus"
-                    className={cx('add-new-chain-button', 'TEST-add-new-chain-button')}
-                    variant="primary"
-                    onClick={this.getCreateChannelFilterClickHandler(alertReceiveChannelId)}
-                  >
-                    Add Route
-                  </Button>
-                </WithPermissionControlTooltip>
-              )}
-            </div>
-            {alertReceiveChannelIdToCreateChannelFilter && (
-              <ChannelFilterForm
-                id="new"
-                alertReceiveChannelId={alertReceiveChannelIdToCreateChannelFilter}
-                onHide={() => {
-                  this.setState({
-                    alertReceiveChannelIdToCreateChannelFilter: undefined,
-                  });
-                }}
-                onUpdate={this.handleCreateChannelFilter}
-              />
-            )}
-            {routeToDelete && (
-              <ConfirmModal
-                isOpen
-                title="Delete route?"
-                body="Are you sure you want to delete this route?"
-                confirmText="Delete"
-                icon="exclamation-triangle"
-                onConfirm={this.handleDeleteRoute}
-                onDismiss={() => this.setState({ routeToDelete: undefined })}
-              />
-            )}
-            {channelFilterIdToCopyEscalationChain && (
-              <EscalationChainForm
-                mode={escalationChainIdToCopy ? EscalationChainFormMode.Copy : EscalationChainFormMode.Create}
-                escalationChainId={escalationChainIdToCopy}
-                onHide={() => {
-                  this.setState({
-                    escalationChainIdToCopy: undefined,
-                    channelFilterIdToCopyEscalationChain: undefined,
-                  });
-                }}
-                onUpdate={this.handleEscalationChainCreate}
-              />
-            )}
-            {this.renderRoutes(alertReceiveChannelId)}
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  getDeleteRouteClickHandler = (routeId: ChannelFilter['id']) => {
-    return (event: SyntheticEvent) => {
-      event.stopPropagation();
-      this.setState({ routeToDelete: routeId });
-    };
-  };
-
-  handleDeleteRoute = async () => {
-    const { routeToDelete } = this.state;
-    const { store } = this.props;
-
-    this.setState({ routeToDelete: undefined });
-
-    const { alertReceiveChannelStore } = store;
-
-    await alertReceiveChannelStore.deleteChannelFilter(routeToDelete);
-
-    this.update();
-  };
-
-  handleEscalationChainCreate = async (id: EscalationChain['id']) => {
-    const { store } = this.props;
-    const { alertReceiveChannelStore } = store;
-    const { channelFilterIdToCopyEscalationChain } = this.state;
-
-    await alertReceiveChannelStore
-      .saveChannelFilter(channelFilterIdToCopyEscalationChain, { escalation_chain: id })
-      .then(() => {
-        store.escalationPolicyStore.updateEscalationPolicies(id);
-      });
-
-    store.escalationChainStore.updateItems();
-  };
-
-  handleDeleteAlertReceiveChannel = () => {
-    const { alertReceiveChannelId, onDelete } = this.props;
-    onDelete(alertReceiveChannelId);
-  };
-
-  handleStopMaintenance = () => {
-    const { store, alertReceiveChannelId } = this.props;
-    const { maintenanceStore, alertReceiveChannelStore } = store;
-
-    maintenanceStore.stopMaintenanceMode(MaintenanceType.alert_receive_channel, alertReceiveChannelId).then(() => {
-      alertReceiveChannelStore.updateItem(alertReceiveChannelId);
-    });
-  };
-
-  getChangeIntegrationNameHandler = (name: string) => {
-    return () => {
-      this.newAlertReceiveChannelName = name;
-      this.setState({ editIntegrationName: name });
-    };
-  };
-
-  handleChangeAlertReceiveChannelName = () => {
-    const { store, alertReceiveChannelId } = this.props;
-    const { editIntegrationName } = this.state;
-
-    store.alertReceiveChannelStore
-      .saveAlertReceiveChannel(alertReceiveChannelId, { verbal_name: editIntegrationName })
-      .then(() => {
-        store.alertReceiveChannelStore.updateItem(alertReceiveChannelId);
-      });
-    this.setState({ editIntegrationName: undefined });
-    this.update();
-  };
-
-  handleCreateChannelFilter = (id: ChannelFilter['id']) => {
-    const { store } = this.props;
-    const { alertReceiveChannelIdToCreateChannelFilter, expandedRoutes } = this.state;
-
-    if (!expandedRoutes.includes(id)) {
-      this.setState({
-        expandedRoutes: [...expandedRoutes, id],
-      });
-    }
-
-    store.alertReceiveChannelStore.updateChannelFilters(alertReceiveChannelIdToCreateChannelFilter).then(() => {
-      const channelFilter = store.alertReceiveChannelStore.channelFilters[id];
-
-      store.escalationPolicyStore.updateEscalationPolicies(channelFilter.escalation_chain);
-    });
-  };
-
-  getCreateChannelFilterClickHandler = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
-    return () => {
-      this.setState({
-        alertReceiveChannelIdToCreateChannelFilter: alertReceiveChannelId,
-      });
-    };
-  };
-
-  renderRoutes = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
-    const { expandedRoutes, channelFilterToEdit } = this.state;
-    const { store } = this.props;
-
-    const channelFilterIds = store.alertReceiveChannelStore.channelFilterIds[alertReceiveChannelId];
-
-    if (!channelFilterIds) {
-      return <LoadingPlaceholder text="Loading..." />;
-    }
-
-    return (
-      <div>
-        {channelFilterIds.map((channelFilterId: ChannelFilter['id']) => {
-          const channelFilter = store.alertReceiveChannelStore.channelFilters[channelFilterId];
-
-          if (channelFilterId === channelFilterToEdit?.id) {
-            return (
-              <ChannelFilterForm
-                key={channelFilterId}
-                className={cx('route')}
-                id={channelFilterToEdit.id}
-                alertReceiveChannelId={channelFilterToEdit.alert_receive_channel}
-                data={channelFilterToEdit}
-                onHide={() => {
-                  this.setState({
-                    channelFilterToEdit: undefined,
-                  });
-                }}
-                onUpdate={() => {
-                  store.alertReceiveChannelStore.updateChannelFilters(channelFilterToEdit.alert_receive_channel);
-                }}
-              />
-            );
-          }
-
-          const escalationChain = store.escalationChainStore.items[channelFilter.escalation_chain];
-
-          let warningAboutModifyingEscalationChain = null;
-          const otherRoutes = escalationChain?.number_of_routes - 1;
-          const otherIntegrations = escalationChain?.number_of_integrations - 1;
-
-          if (otherRoutes > 0 || otherIntegrations > 0) {
-            warningAboutModifyingEscalationChain = (
-              <>
-                Modifying this will affect{' '}
-                {otherRoutes > 0 && (
-                  <Text strong>
-                    {otherRoutes} other route{otherRoutes === 1 ? '' : 's'}
-                  </Text>
-                )}
-                {otherRoutes > 0 && otherIntegrations > 0 && ' and '}
-                {otherIntegrations > 0 && (
-                  <Text strong>
-                    {otherIntegrations} other integration{otherIntegrations === 1 ? '' : 's'}
-                  </Text>
-                )}
-                .{' '}
-              </>
-            );
-          }
-
-          return (
-            <Collapse
-              key={channelFilterId}
-              collapsible
-              className={cx('route')}
-              label={this.renderChannelFilterTitle(alertReceiveChannelId, channelFilterId)}
-              isOpen={expandedRoutes.includes(channelFilterId)}
-              onToggle={this.getChannelFilterToggleHandler(channelFilterId)}
-            >
-              <div className={cx('route-content')}>
-                {escalationChain ? (
-                  <>
-                    <div className={cx('route-header')}>
-                      <Text>
-                        <Text strong>
-                          <PluginLink query={{ page: 'escalations', id: escalationChain.id }}>
-                            {escalationChain?.name}
-                          </PluginLink>
-                        </Text>{' '}
-                        escalation chain
-                      </Text>
-                      <br />
-                      <Text size="small" type="secondary">
-                        {warningAboutModifyingEscalationChain}
-                        You can{' '}
-                        <WithPermissionControlTooltip userAction={UserActions.EscalationChainsWrite}>
-                          <Button
-                            fill="text"
-                            size="sm"
-                            onClick={() => {
-                              this.setState({
-                                channelFilterIdToCopyEscalationChain: channelFilterId,
-                                escalationChainIdToCopy: escalationChain.id,
-                              });
-                            }}
-                          >
-                            Make a copy
-                          </Button>
-                        </WithPermissionControlTooltip>{' '}
-                        of the current chain or{' '}
-                        <WithPermissionControlTooltip userAction={UserActions.EscalationChainsWrite}>
-                          <Button
-                            fill="text"
-                            size="sm"
-                            onClick={() => {
-                              this.setState({
-                                channelFilterIdToCopyEscalationChain: channelFilterId,
-                              });
-                            }}
-                          >
-                            Create a new chain
-                          </Button>
-                        </WithPermissionControlTooltip>
-                      </Text>
-                    </div>
-                    {this._renderEscalationPolicies(channelFilter.id)}
-                  </>
-                ) : (
-                  <Text type="secondary">
-                    Select Escalation Chain ↑ or
-                    <Button
-                      fill="text"
-                      size="sm"
-                      onClick={() => {
-                        this.setState({
-                          channelFilterIdToCopyEscalationChain: channelFilterId,
-                        });
-                      }}
-                    >
-                      Create a new one
-                    </Button>{' '}
-                  </Text>
-                )}
-              </div>
-            </Collapse>
-          );
-        })}
-      </div>
-    );
-  };
-
-  getChannelFilterToggleHandler = (channelFilterId: ChannelFilter['id']) => {
-    return (isOpen: boolean) => {
-      const { expandedRoutes } = this.state;
-
-      if (!isOpen && expandedRoutes.includes(channelFilterId)) {
-        const index = expandedRoutes.indexOf(channelFilterId);
-        const newExpandedRoutes = [...expandedRoutes];
-        newExpandedRoutes.splice(index, 1);
-        this.setState({ expandedRoutes: newExpandedRoutes });
-      } else if (isOpen && !expandedRoutes.includes(channelFilterId)) {
-        this.setState({ expandedRoutes: [...expandedRoutes, channelFilterId] });
-      }
-    };
-  };
-
-  renderChannelFilterButtons = (channelFilterId: ChannelFilter['id'], index: number) => {
-    const { store, alertReceiveChannelId } = this.props;
-
-    const { alertReceiveChannelStore } = store;
-
-    const channelFilterIds = alertReceiveChannelStore.channelFilterIds[alertReceiveChannelId];
-
-    const channelFilter = alertReceiveChannelStore.channelFilters[channelFilterId];
-
-    return (
-      <HorizontalGroup spacing="xs">
-        {Boolean(index > 0 && !channelFilter.is_default) && (
-          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-            <IconButton
-              size="sm"
-              name="arrow-up"
-              onClick={(e) => {
-                e.stopPropagation();
-                alertReceiveChannelStore.moveChannelFilterToPosition(alertReceiveChannelId, index, index - 1);
-              }}
-              tooltip="Move up"
-              tooltipPlacement="top"
-            />
-          </WithPermissionControlTooltip>
-        )}
-
-        {Boolean(index < channelFilterIds.length - 2 && !channelFilter.is_default) && (
-          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-            <IconButton
-              size="sm"
-              name="arrow-down"
-              onClick={(e) => {
-                e.stopPropagation();
-                alertReceiveChannelStore.moveChannelFilterToPosition(alertReceiveChannelId, index, index + 1);
-              }}
-              tooltip="Move down"
-              tooltipPlacement="top"
-            />
-          </WithPermissionControlTooltip>
-        )}
-        {!channelFilter.is_default && (
-          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-            <IconButton
-              size="md"
-              name="trash-alt"
-              onClick={this.getDeleteRouteClickHandler(channelFilter.id)}
-              tooltip="Delete"
-              tooltipPlacement="top"
-            />
-          </WithPermissionControlTooltip>
-        )}
-        {!channelFilter.is_default && (
-          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-            <IconButton
-              size="md"
-              name="pen"
-              onClick={(event) => {
-                event.stopPropagation();
-                this.setState({
-                  channelFilterToEdit: channelFilter,
-                });
-              }}
-              tooltip="Edit"
-              tooltipPlacement="top"
-            />
-          </WithPermissionControlTooltip>
-        )}
-        {store.hasFeature(AppFeature.Webhooks2) && (
-          <CopyToClipboard text={channelFilter.id}>
-            <IconButton
-              variant="primary"
-              tooltip={
-                <div>
-                  ID {channelFilter.id}
-                  <br />
-                  (click to copy ID to clipboard)
-                </div>
-              }
-              tooltipPlacement="top"
-              name="info-circle"
-            />
-          </CopyToClipboard>
-        )}
-        <WithPermissionControlTooltip userAction={UserActions.IntegrationsTest}>
-          <Button variant="secondary" size="sm" onClick={this.getSendDemoAlertToParticularRoute(channelFilterId)}>
-            Send demo alert
-          </Button>
-        </WithPermissionControlTooltip>
-      </HorizontalGroup>
-    );
-  };
-
-  renderChannelFilterTitle = (
-    alertReceiveChannelId: AlertReceiveChannel['id'],
-    channelFilterId: ChannelFilter['id']
-  ) => {
-    const { store } = this.props;
-    const channelFilterIds = store.alertReceiveChannelStore.channelFilterIds[alertReceiveChannelId];
-    const channelFilter = store.alertReceiveChannelStore.channelFilters[channelFilterId];
-
-    const index = channelFilterIds.indexOf(channelFilterId);
-    return (
-      <>
-        <div className={cx('channel-filter-header')}>
-          <div className={cx('channel-filter-header-left')}>
-            <div className={cx('channel-filter-header-title')}>
-              {channelFilter.is_default ? (
-                <>
-                  {channelFilterIds.length > 1 && <Text keyboard>ELSE</Text>}
-                  <Text>route to escalation chain:</Text>
-                  <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                    <GSelect
-                      showSearch
-                      modelName="escalationChainStore"
-                      displayField="name"
-                      placeholder="Select Escalation Chain"
-                      className={cx('select', 'control', 'no-trigger-collapse-please')}
-                      value={channelFilter.escalation_chain}
-                      onChange={this.getEscalationChainChangeHandler(channelFilterId)}
-                      showWarningIfEmptyValue={true}
-                      width={'auto'}
-                      icon={'list-ul'}
-                      getOptionLabel={(item: SelectableValue) => {
-                        return (
-                          <>
-                            <Text>{item.label} </Text>
-                            <TeamName
-                              team={store.grafanaTeamStore.items[store.escalationChainStore.items[item.value].team]}
-                              size="small"
-                            />
-                          </>
-                        );
-                      }}
-                    />
-                  </WithPermissionControlTooltip>
-                </>
-              ) : (
-                <>
-                  <Text keyboard>{index === 0 ? 'IF' : 'ELSE IF'}</Text>
-                  {channelFilter.filtering_term_type === 0 ? (
-                    <>
-                      <Tooltip content={'Recommend you to switch from regular expressions to jinja2 templates'}>
-                        <Text>regular expression</Text>
-                      </Tooltip>
-                      <Tooltip content={'We recommend to switch to jinja2 based routes'}>
-                        <Icon
-                          name="exclamation-circle"
-                          style={{
-                            color: '#FF5286',
-                          }}
-                        />
-                      </Tooltip>
-                    </>
-                  ) : (
-                    <Text>jinja2 expression</Text>
-                  )}
-                  <Text>is</Text>
-                  <Text keyboard>{'True'}</Text>
-                  <Text>{'for new Alert Group:'}</Text>
-                </>
-              )}
-            </div>
-          </div>
-          <div className={cx('channel-filter-header-right')}>
-            <div onClick={(e) => e.stopPropagation()}>{this.renderChannelFilterButtons(channelFilterId, index)}</div>
-          </div>
-        </div>
-        {!channelFilter.is_default && (
-          <VerticalGroup>
-            <HorizontalGroup>
-              {!channelFilter.is_default && (
-                <>
-                  {channelFilter.filtering_term_type === 0 ? (
-                    <SourceCode showCopyToClipboard={false}>
-                      {'payload =~ "' + channelFilter.filtering_term + '"'}
-                    </SourceCode>
-                  ) : (
-                    <SourceCode showCopyToClipboard={false}>{channelFilter.filtering_term}</SourceCode>
-                  )}
-                </>
-              )}
-            </HorizontalGroup>
-            <HorizontalGroup>
-              <Text>{'route to escalation chain: '}</Text>
-              <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                <div onClick={(e) => e.stopPropagation()}>
-                  <GSelect
-                    showSearch
-                    modelName="escalationChainStore"
-                    displayField="name"
-                    placeholder="Select Escalation Chain"
-                    className={cx('select', 'control', 'no-trigger-collapse-please')}
-                    value={channelFilter.escalation_chain}
-                    onChange={this.getEscalationChainChangeHandler(channelFilterId)}
-                    showWarningIfEmptyValue={true}
-                    width={'auto'}
-                    icon={'list-ul'}
-                    getOptionLabel={(item: SelectableValue) => {
-                      return (
-                        <>
-                          <Text>{item.label} </Text>
-                          <TeamName
-                            team={store.grafanaTeamStore.items[store.escalationChainStore.items[item.value].team]}
-                            size="small"
-                          />
-                        </>
-                      );
-                    }}
-                  />
-                </div>
-              </WithPermissionControlTooltip>
-            </HorizontalGroup>
-          </VerticalGroup>
-        )}
-      </>
-    );
-  };
-
-  getEscalationChainChangeHandler = (channelFilterId: ChannelFilter['id']) => {
-    const { store } = this.props;
-    return (value: EscalationChain['id']) => {
-      store.alertReceiveChannelStore
-        .saveChannelFilter(channelFilterId, {
-          escalation_chain: value,
-        })
-        .then(() => {
-          store.escalationChainStore.updateItems(); // to update number_of_integrations and number_of_routes
-          store.escalationPolicyStore.updateEscalationPolicies(value);
-        });
-    };
-  };
-
-  getEditChannelFilterClickHandler = (channelFilter: ChannelFilter) => {
-    return (event: MouseEvent) => {
-      event.stopPropagation();
-      this.setState({
-        channelFilterToEdit: channelFilter,
-      });
-    };
-  };
-
-  _renderEscalationPolicies = (channelFilterId: ChannelFilter['id']) => {
-    const { store } = this.props;
-    const channelFilter = store.alertReceiveChannelStore.channelFilters[channelFilterId];
-    const escalationChainId = channelFilter.escalation_chain;
-
-    return (
-      <EscalationChainSteps
-        addonBefore={<ChatOpsConnectors channelFilterId={channelFilterId} />}
-        id={escalationChainId}
-      />
-    );
-  };
-
-  getCreateEscalationPolicyClickHandler = (escalationChainId: EscalationChain['id']) => {
-    const { store } = this.props;
-    const { escalationPolicyStore } = store;
-
-    return async (option: EscalationPolicyOption) => {
-      await escalationPolicyStore.createEscalationPolicy(escalationChainId, {
-        step: option.value,
-      });
-
-      escalationPolicyStore.updateEscalationPolicies(escalationChainId);
-    };
-  };
-
-  getEscalationPoliciesSortEndHandler = (escalationChainId: EscalationChain['id']) => {
-    const { store } = this.props;
-    const { escalationPolicyStore } = store;
-
-    return ({ oldIndex, newIndex }: any) => {
-      escalationPolicyStore.moveEscalationPolicyToPosition(oldIndex, newIndex, escalationChainId);
-    };
-  };
-
-  getSendDemoAlertClickHandler = (id: AlertReceiveChannel['id']) => {
-    const {
-      store: { alertReceiveChannelStore },
-    } = this.props;
-    return () => {
-      alertReceiveChannelStore.sendDemoAlert(id).then(() => {
-        alertReceiveChannelStore.updateCounters();
-        openNotification(<Notification />);
-      });
-    };
-  };
-
-  getSendDemoAlertToParticularRoute = (id: ChannelFilter['id']) => {
-    const {
-      store: { alertReceiveChannelStore },
-    } = this.props;
-    return () => {
-      alertReceiveChannelStore.sendDemoAlertToParticularRoute(id).then(() => {
-        openNotification(<Notification />);
-      });
-    };
-  };
-}
-
-export default withMobXProviderContext(AlertRules);
diff --git a/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx
index af06e384b7..f249bccf6e 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay.tsx
@@ -12,8 +12,8 @@ import styles from 'containers/IntegrationContainers/CollapsedIntegrationRouteDi
 import { RouteButtonsDisplay } from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { ChannelFilter } from 'models/channel_filter';
-import CommonIntegrationHelper from 'pages/integration_2/CommonIntegration2.helper';
-import IntegrationHelper from 'pages/integration_2/Integration2.helper';
+import CommonIntegrationHelper from 'pages/integration/CommonIntegration.helper';
+import IntegrationHelper from 'pages/integration/Integration.helper';
 import { useStore } from 'state/useStore';
 import { openNotification } from 'utils';
 
diff --git a/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx
index 889d78ac72..ebb86236a3 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay.tsx
@@ -33,9 +33,9 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_
 import { AlertTemplatesDTO } from 'models/alert_templates';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
 import { EscalationChain } from 'models/escalation_chain/escalation_chain.types';
-import CommonIntegrationHelper from 'pages/integration_2/CommonIntegration2.helper';
-import IntegrationHelper from 'pages/integration_2/Integration2.helper';
-import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2Common.config';
+import CommonIntegrationHelper from 'pages/integration/CommonIntegration.helper';
+import IntegrationHelper from 'pages/integration/Integration.helper';
+import { MONACO_INPUT_HEIGHT_SMALL, MONACO_OPTIONS } from 'pages/integration/IntegrationCommon.config';
 import { useStore } from 'state/useStore';
 import { openNotification } from 'utils';
 import { UserActions } from 'utils/authorization';
diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationCommonTemplatesList.config.ts b/grafana-plugin/src/containers/IntegrationContainers/IntegrationCommonTemplatesList.config.ts
index 1cadbe6896..16667ede8d 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/IntegrationCommonTemplatesList.config.ts
+++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationCommonTemplatesList.config.ts
@@ -1,10 +1,9 @@
-import { MONACO_INPUT_HEIGHT_SMALL, MONACO_INPUT_HEIGHT_TALL } from 'pages/integration_2/Integration2Common.config';
+import { MONACO_INPUT_HEIGHT_SMALL, MONACO_INPUT_HEIGHT_TALL } from 'pages/integration/IntegrationCommon.config';
 
 interface TemplateToRender {
   name: string;
   label: string;
   height: string;
-  type: 'plain' | 'html' | 'image' | 'boolean';
   labelTooltip?: string;
 }
 
@@ -23,7 +22,6 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         labelTooltip:
           'The Grouping Template is applied to every incoming alert payload after the Routing Template. It can be based on time, or alert content, or both. If the resulting grouping key matches an existing non-resolved alert group, the alert will be grouped accordingly. Otherwise, a new alert group will be created',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'plain',
       },
       {
         name: 'resolve_condition_template',
@@ -31,7 +29,6 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         labelTooltip:
           'If Autoresolution Template is True, the alert will resolve its group as "resolved by source". If the group is already resolved, the alert will be added to that group',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'boolean',
       },
     ],
   },
@@ -42,19 +39,16 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         name: 'web_title_template',
         label: 'Title',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'html',
       },
       {
         name: 'web_message_template',
         label: 'Message',
         height: MONACO_INPUT_HEIGHT_TALL,
-        type: 'html',
       },
       {
         name: 'web_image_url_template',
         label: 'Image',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'image',
       },
     ],
   },
@@ -65,13 +59,11 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         name: 'acknowledge_condition_template',
         label: 'Auto acknowledge',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'boolean',
       },
       {
         name: 'source_link_template',
         label: 'Source link',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'plain',
       },
     ],
   },
@@ -82,13 +74,11 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         name: 'phone_call_title_template',
         label: 'Phone Call',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'plain',
       },
       {
         name: 'sms_title_template',
         label: 'SMS',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'plain',
       },
     ],
   },
@@ -99,19 +89,16 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         name: 'slack_title_template',
         label: 'Title',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'plain',
       },
       {
         name: 'slack_message_template',
         label: 'Message',
         height: MONACO_INPUT_HEIGHT_TALL,
-        type: 'plain',
       },
       {
         name: 'slack_image_url_template',
         label: 'Image',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'image',
       },
     ],
   },
@@ -122,19 +109,16 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         name: 'telegram_title_template',
         label: 'Title',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'plain',
       },
       {
         name: 'telegram_message_template',
         label: 'Message',
         height: MONACO_INPUT_HEIGHT_TALL,
-        type: 'plain',
       },
       {
         name: 'telegram_image_url_template',
         label: 'Image',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'image',
       },
     ],
   },
@@ -145,9 +129,8 @@ export const commonTemplatesToRender: TemplateBlock[] = [
         name: 'email_title_template',
         label: 'Title',
         height: MONACO_INPUT_HEIGHT_SMALL,
-        type: 'plain',
       },
-      { name: 'email_message_template', label: 'Message', height: MONACO_INPUT_HEIGHT_TALL, type: 'plain' },
+      { name: 'email_message_template', label: 'Message', height: MONACO_INPUT_HEIGHT_TALL },
     ],
   },
 ];
diff --git a/grafana-plugin/src/containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm.tsx b/grafana-plugin/src/containers/IntegrationContainers/IntegrationHearbeatForm/IntegrationHeartbeatForm.tsx
similarity index 93%
rename from grafana-plugin/src/containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm.tsx
rename to grafana-plugin/src/containers/IntegrationContainers/IntegrationHearbeatForm/IntegrationHeartbeatForm.tsx
index c0faf12ca8..94a29df96c 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationHearbeatForm/IntegrationHeartbeatForm.tsx
@@ -16,12 +16,12 @@ import { UserActions } from 'utils/authorization';
 
 const cx = cn.bind({});
 
-interface Integration2HearbeatFormProps {
+interface IntegrationHearbeatFormProps {
   alertReceveChannelId: AlertReceiveChannel['id'];
   onClose?: () => void;
 }
 
-const Integration2HearbeatForm = observer(({ alertReceveChannelId, onClose }: Integration2HearbeatFormProps) => {
+const IntegrationHearbeatForm = observer(({ alertReceveChannelId, onClose }: IntegrationHearbeatFormProps) => {
   const [interval, setInterval] = useState<number>(undefined);
 
   const { heartbeatStore, alertReceiveChannelStore } = useStore();
@@ -112,6 +112,6 @@ const Integration2HearbeatForm = observer(({ alertReceveChannelId, onClose }: In
   }
 });
 
-export default withMobXProviderContext(Integration2HearbeatForm) as ({
+export default withMobXProviderContext(IntegrationHearbeatForm) as ({
   alertReceveChannelId,
-}: Integration2HearbeatFormProps) => JSX.Element;
+}: IntegrationHearbeatFormProps) => JSX.Element;
diff --git a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
index f3e16ccd02..43d35e8e16 100644
--- a/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
+++ b/grafana-plugin/src/containers/IntegrationContainers/IntegrationTemplatesList.tsx
@@ -10,9 +10,9 @@ import Text from 'components/Text/Text';
 import { templatesToRender } from 'containers/IntegrationContainers/IntegrationTemplatesList.config';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { AlertTemplatesDTO } from 'models/alert_templates';
-import IntegrationHelper from 'pages/integration_2/Integration2.helper';
-import styles from 'pages/integration_2/Integration2.module.scss';
-import { MONACO_INPUT_HEIGHT_TALL, MONACO_OPTIONS } from 'pages/integration_2/Integration2Common.config';
+import IntegrationHelper from 'pages/integration/Integration.helper';
+import styles from 'pages/integration/Integration.module.scss';
+import { MONACO_INPUT_HEIGHT_TALL, MONACO_OPTIONS } from 'pages/integration/IntegrationCommon.config';
 import { useStore } from 'state/useStore';
 import { openErrorNotification, openNotification } from 'utils';
 
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.config.ts b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.ts
similarity index 100%
rename from grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.config.ts
rename to grafana-plugin/src/containers/IntegrationForm/IntegrationForm.config.ts
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.helpers.ts b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.helpers.ts
similarity index 100%
rename from grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.helpers.ts
rename to grafana-plugin/src/containers/IntegrationForm/IntegrationForm.helpers.ts
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.module.css b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.css
similarity index 100%
rename from grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.module.css
rename to grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.css
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx
similarity index 95%
rename from grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx
rename to grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx
index 0b658b18cc..d550d6c946 100644
--- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm2.tsx
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx
@@ -20,10 +20,10 @@ import { openErrorNotification } from 'utils';
 import { UserActions } from 'utils/authorization';
 import { PLUGIN_ROOT } from 'utils/consts';
 
-import { form } from './IntegrationForm2.config';
-import { prepareForEdit } from './IntegrationForm2.helpers';
+import { form } from './IntegrationForm.config';
+import { prepareForEdit } from './IntegrationForm.helpers';
 
-import styles from './IntegrationForm2.module.css';
+import styles from './IntegrationForm.module.css';
 
 const cx = cn.bind(styles);
 
@@ -34,7 +34,7 @@ interface IntegrationFormProps {
   onUpdate: () => void;
 }
 
-const IntegrationForm2 = observer((props: IntegrationFormProps) => {
+const IntegrationForm = observer((props: IntegrationFormProps) => {
   const { id, onHide, onUpdate, isTableView = true } = props;
 
   const store = useStore();
@@ -60,7 +60,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
         ? alertReceiveChannelStore
             .create(data)
             .then((response) => {
-              history.push(`${PLUGIN_ROOT}/integrations_2/${response.id}`);
+              history.push(`${PLUGIN_ROOT}/integrations/${response.id}`);
             })
             .catch(() => {
               openErrorNotification('Something went wrong, please try again later.');
@@ -210,7 +210,7 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
                 )}
 
                 <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
-                  <Button form={form.name} type="submit">
+                  <Button form={form.name} type="submit" data-testid="update-integration-button">
                     {id === 'new' ? 'Create' : 'Update'} Integration
                   </Button>
                 </WithPermissionControlTooltip>
@@ -230,4 +230,4 @@ const IntegrationForm2 = observer((props: IntegrationFormProps) => {
   }
 });
 
-export default IntegrationForm2;
+export default IntegrationForm;
diff --git a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.module.css b/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.module.css
deleted file mode 100644
index 865fbed683..0000000000
--- a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.root {
-  display: block;
-}
-
-.title {
-  padding: 24px;
-  display: flex;
-  gap: 10px;
-  align-items: flex-start;
-}
-
-.title-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  margin-top: 10px;
-}
-
-.content ul {
-  list-style-type: none;
-}
-
-.content ol {
-  list-style-type: none;
-}
-
-.settings-header-buttons {
-  right: 0;
-  position: absolute;
-}
diff --git a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx b/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx
deleted file mode 100644
index aa6d7ec878..0000000000
--- a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { Drawer, Tab, TabContent, TabsBar, Button, VerticalGroup, Input } from '@grafana/ui';
-import cn from 'classnames/bind';
-import { observer } from 'mobx-react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Emoji from 'react-emoji-render';
-
-import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
-import Text from 'components/Text/Text';
-import AlertTemplatesFormContainer from 'containers/AlertTemplatesFormContainer/AlertTemplatesFormContainer';
-import HeartbeatForm from 'containers/HeartbeatModal/HeartbeatForm';
-import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
-import { Alert } from 'models/alertgroup/alertgroup.types';
-import { useStore } from 'state/useStore';
-import { openNotification } from 'utils';
-import LocationHelper from 'utils/LocationHelper';
-
-import { IntegrationSettingsTab } from './IntegrationSettings.types';
-import Autoresolve from './parts/Autoresolve';
-
-import styles from 'containers/IntegrationSettings/IntegrationSettings.module.css';
-
-const cx = cn.bind(styles);
-
-interface IntegrationSettingsProps {
-  id: AlertReceiveChannel['id'];
-  alertGroupId?: Alert['pk'];
-  startTab?: IntegrationSettingsTab;
-  onHide: () => void;
-  onUpdate?: () => void;
-  onUpdateTemplates?: () => void;
-}
-
-const IntegrationSettings = observer((props: IntegrationSettingsProps) => {
-  const { id, onHide, onUpdate, onUpdateTemplates, startTab, alertGroupId } = props;
-  const [activeTab, setActiveTab] = useState<IntegrationSettingsTab>(startTab || IntegrationSettingsTab.Templates);
-  const [selectedTemplate, setSelectedTemplate] = useState<string>('');
-
-  const store = useStore();
-
-  const { alertReceiveChannelStore } = store;
-
-  const alertReceiveChannel = alertReceiveChannelStore.items[id];
-
-  const getTabClickHandler = useCallback((tab: IntegrationSettingsTab) => {
-    return () => {
-      setActiveTab(tab);
-      LocationHelper.update({ tab }, 'partial');
-    };
-  }, []);
-
-  useEffect(() => {
-    alertReceiveChannelStore.updateItem(id);
-  }, []);
-
-  const integration = alertReceiveChannelStore.getIntegration(alertReceiveChannel);
-
-  const [expanded, _setExpanded] = useState(false);
-
-  const handleSwitchToTemplate = (templateName: string) => {
-    setActiveTab(IntegrationSettingsTab.Templates);
-    setSelectedTemplate(templateName);
-  };
-
-  return (
-    <Drawer
-      scrollableContent
-      expandable
-      title={
-        <div className={cx('title')}>
-          {integration && <IntegrationLogo integration={integration} scale={0.2} />}
-          <div className={cx('title-column')}>
-            {alertReceiveChannel && (
-              <Text.Title level={4}>
-                <Emoji text={alertReceiveChannel.verbal_name} /> settings
-              </Text.Title>
-            )}
-            {integration && <Text type="secondary">Type: {integration.display_name}</Text>}
-          </div>
-        </div>
-      }
-      width={expanded ? '100%' : '70%'}
-      onClose={onHide}
-      closeOnMaskClick={false}
-    >
-      <TabsBar>
-        <Tab
-          active={activeTab === IntegrationSettingsTab.HowToConnect}
-          label="How to connect"
-          key={IntegrationSettingsTab.HowToConnect}
-          onChangeTab={getTabClickHandler(IntegrationSettingsTab.HowToConnect)}
-        />
-        <Tab
-          active={activeTab === IntegrationSettingsTab.Templates}
-          label="Alert Templates"
-          key={IntegrationSettingsTab.Templates}
-          onChangeTab={getTabClickHandler(IntegrationSettingsTab.Templates)}
-        />
-        {alertReceiveChannel?.is_available_for_integration_heartbeat && (
-          <Tab
-            active={activeTab === IntegrationSettingsTab.Heartbeat}
-            label="Heartbeat"
-            key={IntegrationSettingsTab.Heartbeat}
-            onChangeTab={getTabClickHandler(IntegrationSettingsTab.Heartbeat)}
-          />
-        )}
-        <Tab
-          active={activeTab === IntegrationSettingsTab.Autoresolve}
-          label="Settings"
-          key={IntegrationSettingsTab.Autoresolve}
-          onChangeTab={getTabClickHandler(IntegrationSettingsTab.Autoresolve)}
-        />
-      </TabsBar>
-      <TabContent className={cx('content')}>
-        {activeTab === IntegrationSettingsTab.Templates && (
-          <AlertTemplatesFormContainer
-            alertReceiveChannelId={id}
-            alertGroupId={alertGroupId}
-            onUpdate={onUpdate}
-            onHide={onHide}
-            onUpdateTemplates={onUpdateTemplates}
-            selectedTemplateName={selectedTemplate}
-          />
-        )}
-        {activeTab === IntegrationSettingsTab.Heartbeat && (
-          <div className="container">
-            <HeartbeatForm alertReceveChannelId={id} onUpdate={onUpdate} />
-          </div>
-        )}
-        {activeTab === IntegrationSettingsTab.Autoresolve && (
-          <Autoresolve
-            alertReceiveChannelId={id}
-            onSwitchToTemplate={handleSwitchToTemplate}
-            alertGroupId={alertGroupId}
-          />
-        )}
-        {activeTab === IntegrationSettingsTab.HowToConnect && (
-          <div className="container">
-            <VerticalGroup>
-              {alertReceiveChannel.integration_url && (
-                <div>
-                  <h4>This is the unique webhook URL for the integration:</h4>
-                  <div style={{ width: '70%' }}>
-                    <Input
-                      value={alertReceiveChannel.integration_url}
-                      addonAfter={
-                        <CopyToClipboard
-                          text={alertReceiveChannel.integration_url}
-                          onCopy={() => {
-                            openNotification('Unique webhook URL copied');
-                          }}
-                        >
-                          <Button icon="copy" variant="primary" />
-                        </CopyToClipboard>
-                      }
-                    />
-                  </div>
-                </div>
-              )}
-              <div dangerouslySetInnerHTML={{ __html: alertReceiveChannel?.instructions }} />
-              <Button variant="primary" onClick={onHide}>
-                Open Escalations Settings
-              </Button>
-            </VerticalGroup>
-          </div>
-        )}
-      </TabContent>
-    </Drawer>
-  );
-});
-
-export default IntegrationSettings;
diff --git a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.types.ts b/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.types.ts
deleted file mode 100644
index edd380851f..0000000000
--- a/grafana-plugin/src/containers/IntegrationSettings/IntegrationSettings.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum IntegrationSettingsTab {
-  Templates = 'Templates',
-  Heartbeat = 'Heartbeat',
-  Autoresolve = 'Autoresolve',
-  LiveLogs = 'LiveLogs',
-  HowToConnect = 'HowToConnect',
-}
diff --git a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.module.css b/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.module.css
deleted file mode 100644
index 0614492ed1..0000000000
--- a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.border-container {
-  margin-bottom: 32px;
-  padding-bottom: 32px;
-  border-bottom: var(--border);
-}
-
-.root ul {
-  margin-left: 24px;
-}
-
-.settings-label {
-  display: grid;
-}
-
-.team-select {
-  width: 520px;
-}
-
-.team-select-actionbuttons {
-  margin-top: 24px;
-}
-
-.confirmation-buttons {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
-.confirmation-buttons .save-team-button {
-  margin-left: 8px;
-}
-
-.autoresolve-block {
-  height: 32px;
-  padding: 4px 8px;
-  margin-top: 8px;
-  min-width: 500px;
-  width: 620px;
-}
-
-.autoresolve-div {
-  display: flex;
-  align-items: baseline;
-}
-
-.warning-icon-color {
-  color: var(--warning-text-color);
-}
diff --git a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx b/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx
deleted file mode 100644
index 6b4e8c8382..0000000000
--- a/grafana-plugin/src/containers/IntegrationSettings/parts/Autoresolve.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import React, { useCallback, useState, useEffect } from 'react';
-
-import { Alert, Button, Icon, Label, Modal, Select } from '@grafana/ui';
-import cn from 'classnames/bind';
-import { get } from 'lodash-es';
-
-import Block from 'components/GBlock/Block';
-import Text from 'components/Text/Text';
-import GSelect from 'containers/GSelect/GSelect';
-import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
-import { Alert as AlertType } from 'models/alertgroup/alertgroup.types';
-import { Team } from 'models/team/team.types';
-import { useStore } from 'state/useStore';
-import { openErrorNotification, openNotification } from 'utils';
-import LocationHelper from 'utils/LocationHelper';
-import { UserActions } from 'utils/authorization';
-
-import styles from 'containers/IntegrationSettings/parts/Autoresolve.module.css';
-
-const cx = cn.bind(styles);
-
-interface AutoresolveProps {
-  alertReceiveChannelId: AlertReceiveChannel['id'];
-  alertGroupId?: AlertType['pk'];
-  onSwitchToTemplate?: (templateName: string) => void;
-}
-
-const Autoresolve = ({ alertReceiveChannelId, onSwitchToTemplate, alertGroupId }: AutoresolveProps) => {
-  const store = useStore();
-  const { alertReceiveChannelStore, grafanaTeamStore, userStore } = store;
-
-  const currentTeam = userStore.currentUser?.current_team;
-
-  const alertReceiveChannel = alertReceiveChannelStore.items[alertReceiveChannelId];
-
-  const [teamId, setTeamId] = useState<Team['pk']>(alertReceiveChannel.team);
-  const [showSaveConfirmationModal, setShowSaveConfirmationModal] = useState<boolean>(false);
-  const [autoresolveChanged, setAutoresolveChanged] = useState<boolean>(false);
-  const [autoresolveValue, setAutoresolveValue] = useState<boolean>(alertReceiveChannel?.allow_source_based_resolving);
-  const [showErrorOnTeamSelect, setShowErrorOnTeamSelect] = useState<boolean>(false);
-  const [autoresolveSelected, setAutoresolveSelected] = useState<boolean>(
-    alertReceiveChannel?.allow_source_based_resolving
-  );
-  const [autoresolveConditionInvalid, setAutoresolveConditionInvalid] = useState<boolean>(false);
-
-  useEffect(() => {
-    store.alertReceiveChannelStore.updateItem(alertReceiveChannelId);
-    store.alertReceiveChannelStore.updateTemplates(alertReceiveChannelId, alertGroupId);
-  }, [alertGroupId, alertReceiveChannelId, store]);
-
-  useEffect(() => {
-    const autoresolveCondition = get(
-      store.alertReceiveChannelStore.templates[alertReceiveChannelId],
-      'resolve_condition_template'
-    );
-    if (autoresolveCondition === 'invalid template') {
-      setAutoresolveConditionInvalid(true);
-    }
-  }, [store.alertReceiveChannelStore.templates[alertReceiveChannelId]]);
-
-  const handleAutoresolveSelected = useCallback(
-    (autoresolveSelectedOption) => {
-      setAutoresolveChanged(true);
-      setAutoresolveValue(autoresolveSelectedOption?.value);
-      if (autoresolveSelectedOption?.value === 'true') {
-        setAutoresolveSelected(true);
-      }
-      if (autoresolveSelectedOption?.value === 'false') {
-        setAutoresolveSelected(false);
-      }
-    },
-    [autoresolveChanged]
-  );
-
-  const handleChangeTeam = useCallback(
-    (value: Team['pk']) => {
-      setTeamId(value);
-    },
-    [teamId]
-  );
-
-  const handleSaveTeam = () => {
-    store.alertReceiveChannelStore
-      .changeTeam(alertReceiveChannelId, teamId)
-      .then(async () => {
-        await alertReceiveChannelStore.updateItems();
-        setShowSaveConfirmationModal(false);
-        openNotification(
-          `Integration moved from ${grafanaTeamStore.items[currentTeam]?.name} to ${grafanaTeamStore.items[teamId]?.name}`
-        );
-        if (alertReceiveChannelId === store.selectedAlertReceiveChannel) {
-          const searchResult = alertReceiveChannelStore.getSearchResult();
-
-          store.selectedAlertReceiveChannel = searchResult && searchResult[0] && searchResult[0].id;
-        }
-      })
-      .catch((error) => {
-        openErrorNotification(get(error, 'response.data.detail'));
-        setShowSaveConfirmationModal(false);
-        setShowErrorOnTeamSelect(true);
-      });
-  };
-
-  const handleSaveClick = () => {
-    if (teamId !== currentTeam) {
-      setShowSaveConfirmationModal(true);
-    }
-    if (autoresolveChanged) {
-      store.alertReceiveChannelStore.saveAlertReceiveChannel(alertReceiveChannelId, {
-        allow_source_based_resolving: autoresolveValue,
-      });
-    }
-  };
-
-  const handleGoToTemplateSettingsCllick = () => {
-    LocationHelper.update({ tab: 'Templates' }, 'partial');
-    onSwitchToTemplate('resolve_condition_template');
-  };
-
-  return (
-    <>
-      <Block>
-        <div className={cx('border-container')}>
-          <Label>
-            <div className={cx('settings-label')}>
-              OnCall team
-              <Text type="secondary">
-                {'Assigning to the teams allows you to filter Integrations and configure their visibility.'}
-                {'Go to OnCall -> Settings -> Team and Access Settings for more details'}
-              </Text>
-            </div>
-          </Label>
-          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-            <GSelect
-              modelName="grafanaTeamStore"
-              displayField="name"
-              valueField="id"
-              showSearch
-              allowClear
-              placeholder="Select a team"
-              className={cx('team-select')}
-              onChange={handleChangeTeam}
-              value={teamId}
-              showError={showErrorOnTeamSelect}
-            />
-          </WithPermissionControlTooltip>
-        </div>
-        <div className={cx('border-container')}>
-          <Label>
-            <div className={cx('settings-label')}>
-              Autoresolve
-              <Text type="secondary">How should this integration resolve alert groups?</Text>
-            </div>
-          </Label>
-          <div className={cx('team-select')}>
-            <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-              <Select
-                className={cx('team-select')}
-                //@ts-ignore
-                onChange={handleAutoresolveSelected}
-                placeholder="Choose autoresolve policy"
-                defaultValue={{ value: 'true', label: 'Automatically resolve' }}
-                value={autoresolveValue.toString()}
-                options={[
-                  { value: 'true', label: 'Resolve automatically' },
-                  { value: 'false', label: 'Resolve manually' },
-                ]}
-              />
-            </WithPermissionControlTooltip>
-          </div>
-          {autoresolveSelected && (
-            <>
-              <Block shadowed bordered className={cx('autoresolve-block')}>
-                <div className={cx('autoresolve-div')}>
-                  <Text type="secondary" size="small">
-                    <Icon name="info-circle" /> Alert group will be automatically resolved when it matches{' '}
-                  </Text>
-                  <Button fill="text" size="sm" onClick={handleGoToTemplateSettingsCllick}>
-                    autoresolve condition
-                  </Button>
-                </div>
-              </Block>
-              {autoresolveConditionInvalid && (
-                <Block shadowed bordered className={cx('autoresolve-block')}>
-                  <div>
-                    <Text type="secondary" size="small">
-                      <Icon name="exclamation-triangle" className={cx('warning-icon-color')} /> Autoresolving condition
-                      template is invalid, please{' '}
-                    </Text>
-                    <Button fill="text" size="sm" onClick={handleGoToTemplateSettingsCllick}>
-                      Edit it
-                    </Button>
-                  </div>
-                </Block>
-              )}
-            </>
-          )}
-        </div>
-        <div className={cx('team-select-actionbuttons')}>
-          <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-            <Button variant="primary" onClick={handleSaveClick}>
-              Save changes
-            </Button>
-          </WithPermissionControlTooltip>
-        </div>
-      </Block>
-      {showSaveConfirmationModal && (
-        <Modal
-          isOpen
-          title="Are you sure you want to move this integration to another team?"
-          onDismiss={() => setShowSaveConfirmationModal(false)}
-        >
-          <div className={cx('root')}>
-            <Alert title="When changing assigned team for the integration" severity="info">
-              <ul>
-                <li>Alert Groups will move to the new team</li>
-                <li>Escalation Chains will remain assigned to their teams</li>
-              </ul>
-            </Alert>
-            <div className={cx('confirmation-buttons')}>
-              <Button variant="primary" onClick={handleSaveTeam} className={cx('save-team-button')}>
-                Save now
-              </Button>
-              <Button variant="secondary" onClick={() => setShowSaveConfirmationModal(false)}>
-                Cancel
-              </Button>
-            </div>
-          </div>
-        </Modal>
-      )}
-    </>
-  );
-};
-
-export default Autoresolve;
diff --git a/grafana-plugin/src/containers/IntegrationSettings/parts/LiveLogs.tsx b/grafana-plugin/src/containers/IntegrationSettings/parts/LiveLogs.tsx
deleted file mode 100644
index 259107babf..0000000000
--- a/grafana-plugin/src/containers/IntegrationSettings/parts/LiveLogs.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-
-import { Button, EmptySearchResult, LoadingPlaceholder } from '@grafana/ui';
-
-import SourceCode from 'components/SourceCode/SourceCode';
-import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
-import { useStore } from 'state/useStore';
-
-interface LiveLogsProps {
-  alertReceiveChannelId: AlertReceiveChannel['id'];
-}
-
-const LiveLogs = ({ alertReceiveChannelId }: LiveLogsProps) => {
-  const store = useStore();
-  const { alertReceiveChannelStore } = store;
-
-  const [logs, setLogs] = useState<string[]>();
-
-  const updateLiveLogs = useCallback(() => {
-    setLogs(undefined);
-    alertReceiveChannelStore.getAccessLogs(alertReceiveChannelId).then(setLogs);
-  }, [alertReceiveChannelId, alertReceiveChannelStore]);
-
-  useEffect(updateLiveLogs, []);
-
-  if (!logs) {
-    return <LoadingPlaceholder text="Loading..." />;
-  }
-
-  return (
-    <div>
-      {logs.length ? (
-        <SourceCode>{JSON.stringify(logs, null, 2)}</SourceCode>
-      ) : (
-        <EmptySearchResult>Could not find logs</EmptySearchResult>
-      )}
-      <Button variant="secondary" icon="sync" onClick={updateLiveLogs} key="back">
-        Refresh
-      </Button>
-    </div>
-  );
-};
-
-export default LiveLogs;
diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss
index 1b8a6bde10..1cc769680b 100644
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.module.scss
@@ -57,7 +57,8 @@
 }
 
 .result {
-  padding: 0 16px;
+  padding: 0;
+  padding-left: 16px;
   padding-bottom: 60px;
 }
 
diff --git a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
index 880eb40d87..97f3112e1a 100644
--- a/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
+++ b/grafana-plugin/src/containers/IntegrationTemplate/IntegrationTemplate.tsx
@@ -22,7 +22,7 @@ import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_
 import { AlertTemplatesDTO } from 'models/alert_templates';
 import { Alert } from 'models/alertgroup/alertgroup.types';
 import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
-import { TemplateOptions } from 'pages/integration_2/Integration2.config';
+import { TemplateOptions } from 'pages/integration/Integration.config';
 import { waitForElement } from 'utils/DOM';
 import LocationHelper from 'utils/LocationHelper';
 import { UserActions } from 'utils/authorization';
diff --git a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
index f108811678..30aedff575 100644
--- a/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
+++ b/grafana-plugin/src/containers/TemplatesAlertGroupsList/TemplatesAlertGroupsList.tsx
@@ -10,7 +10,7 @@ import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
 import { AlertReceiveChannel } from 'models/alert_receive_channel/alert_receive_channel.types';
 import { AlertTemplatesDTO } from 'models/alert_templates';
 import { Alert } from 'models/alertgroup/alertgroup.types';
-import { MONACO_PAYLOAD_OPTIONS } from 'pages/integration_2/Integration2Common.config';
+import { MONACO_PAYLOAD_OPTIONS } from 'pages/integration/IntegrationCommon.config';
 import { useStore } from 'state/useStore';
 
 import styles from './TemplatesAlertGroupsList.module.css';
diff --git a/grafana-plugin/src/pages/incident/Incident.tsx b/grafana-plugin/src/pages/incident/Incident.tsx
index f5ee0ee353..223bf8a9bb 100644
--- a/grafana-plugin/src/pages/incident/Incident.tsx
+++ b/grafana-plugin/src/pages/incident/Incident.tsx
@@ -37,8 +37,6 @@ import Text from 'components/Text/Text';
 import AttachIncidentForm from 'containers/AttachIncidentForm/AttachIncidentForm';
 import EscalationVariants from 'containers/EscalationVariants/EscalationVariants';
 import { prepareForEdit, prepareForUpdate } from 'containers/EscalationVariants/EscalationVariants.helpers';
-// import IntegrationSettings from 'containers/IntegrationSettings/IntegrationSettings';
-import { IntegrationSettingsTab } from 'containers/IntegrationSettings/IntegrationSettings.types';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import {
   Alert as AlertType,
@@ -177,22 +175,6 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
                   </div>
                 </div>
                 {showIntegrationSettings && (
-                  // <IntegrationSettings
-                  //   alertGroupId={incident.pk}
-                  //   onUpdate={() => {
-                  //     alertReceiveChannelStore.updateItem(incident.alert_receive_channel.id);
-                  //   }}
-                  //   onUpdateTemplates={() => {
-                  //     store.alertGroupStore.getAlert(id);
-                  //   }}
-                  //   startTab={IntegrationSettingsTab.Templates}
-                  //   id={incident.alert_receive_channel.id}
-                  //   onHide={() =>
-                  //     this.setState({
-                  //       showIntegrationSettings: undefined,
-                  //     })
-                  //   }
-                  // />
                   <Modal
                     isOpen
                     title="Edit template"
@@ -208,7 +190,7 @@ class IncidentPage extends React.Component<IncidentPageProps, IncidentPageState>
                         query={{
                           page: 'integrations',
                           id: incident.alert_receive_channel.id,
-                          tab: IntegrationSettingsTab.Templates,
+                          // tab: IntegrationSettingsTab.Templates,
                         }}
                       >
                         Integrations
diff --git a/grafana-plugin/src/pages/index.tsx b/grafana-plugin/src/pages/index.tsx
index 74de0259f3..9ada4824d9 100644
--- a/grafana-plugin/src/pages/index.tsx
+++ b/grafana-plugin/src/pages/index.tsx
@@ -45,19 +45,10 @@ export const pages: { [id: string]: PageDefinition } = [
   {
     icon: 'plug',
     id: 'integrations',
-    path: getPath('integrations'),
-    hideFromBreadcrumbs: true,
     text: 'Integrations',
-    action: UserActions.IntegrationsRead,
-  },
-  {
-    icon: 'plug',
-    id: 'integrations_2',
-    text: 'Integrations 2',
-    path: getPath('integrations_2'),
+    path: getPath('integrations'),
     hideTitle: true,
     hideFromBreadcrumbs: true,
-    hideFromTabs: true,
     action: UserActions.IntegrationsRead,
   },
   {
@@ -188,9 +179,8 @@ export const ROUTES = {
   'alert-groups': ['alert-groups'],
   'alert-group': ['alert-groups/:id'],
   users: ['users', 'users/:id'],
-  integrations: ['integrations', 'integrations/:id'],
-  integrations_2: ['integrations_2'],
-  integration_2: ['integrations_2/:id'],
+  integrations: ['integrations'],
+  integration: ['integrations/:id'],
   escalations: ['escalations', 'escalations/:id'],
   schedules: ['schedules'],
   schedule: ['schedules/:id'],
diff --git a/grafana-plugin/src/pages/integration_2/CommonIntegration2.helper.ts b/grafana-plugin/src/pages/integration/CommonIntegration.helper.ts
similarity index 100%
rename from grafana-plugin/src/pages/integration_2/CommonIntegration2.helper.ts
rename to grafana-plugin/src/pages/integration/CommonIntegration.helper.ts
diff --git a/grafana-plugin/src/pages/integration_2/Integration2.config.ts b/grafana-plugin/src/pages/integration/Integration.config.ts
similarity index 89%
rename from grafana-plugin/src/pages/integration_2/Integration2.config.ts
rename to grafana-plugin/src/pages/integration/Integration.config.ts
index 2df534022f..3496702363 100644
--- a/grafana-plugin/src/pages/integration_2/Integration2.config.ts
+++ b/grafana-plugin/src/pages/integration/Integration.config.ts
@@ -3,7 +3,7 @@
   Any change to this file needs to be done in the oncall-private also
 */
 
-import { BASE_INTEGRATION_TEMPLATES_LIST, BaseTemplateOptions } from './Integration2Common.config';
+import { BASE_INTEGRATION_TEMPLATES_LIST, BaseTemplateOptions } from './IntegrationCommon.config';
 
 export const TemplateOptions = {
   ...BaseTemplateOptions,
diff --git a/grafana-plugin/src/pages/integration_2/Integration2.helper.ts b/grafana-plugin/src/pages/integration/Integration.helper.ts
similarity index 99%
rename from grafana-plugin/src/pages/integration_2/Integration2.helper.ts
rename to grafana-plugin/src/pages/integration/Integration.helper.ts
index 8209b34d8a..9bc612667d 100644
--- a/grafana-plugin/src/pages/integration_2/Integration2.helper.ts
+++ b/grafana-plugin/src/pages/integration/Integration.helper.ts
@@ -11,7 +11,7 @@ import { ChannelFilter } from 'models/channel_filter/channel_filter.types';
 import { RootStore } from 'state';
 import { AppFeature } from 'state/features';
 
-import { MAX_CHARACTERS_COUNT, TEXTAREA_ROWS_COUNT } from './Integration2Common.config';
+import { MAX_CHARACTERS_COUNT, TEXTAREA_ROWS_COUNT } from './IntegrationCommon.config';
 
 const IntegrationHelper = {
   getFilteredTemplate: (template: string, isTextArea: boolean): string => {
diff --git a/grafana-plugin/src/pages/integration_2/Integration2.module.scss b/grafana-plugin/src/pages/integration/Integration.module.scss
similarity index 95%
rename from grafana-plugin/src/pages/integration_2/Integration2.module.scss
rename to grafana-plugin/src/pages/integration/Integration.module.scss
index f32cf5d523..c44ca1b8b0 100644
--- a/grafana-plugin/src/pages/integration_2/Integration2.module.scss
+++ b/grafana-plugin/src/pages/integration/Integration.module.scss
@@ -2,10 +2,6 @@ $FLEX-GAP: 4px;
 $LARGE-MARGIN: 24px;
 
 .integration {
-  &__heading-container {
-    margin-bottom: calc($LARGE-MARGIN - 12px);
-  }
-
   &__subheading-container {
     margin-bottom: $LARGE-MARGIN;
   }
@@ -14,10 +10,6 @@ $LARGE-MARGIN: 24px;
     width: 100%;
   }
 
-  &__name {
-    margin-bottom: 0;
-  }
-
   &__heading-container {
     display: flex;
     gap: $FLEX-GAP;
@@ -44,8 +36,8 @@ $LARGE-MARGIN: 24px;
   }
 
   &__description {
+    padding-top: 12px;
     display: block;
-    margin-bottom: 32px;;
   }
 
   &__counter {
@@ -187,6 +179,7 @@ $LARGE-MARGIN: 24px;
 }
 
 .no-wrap {
+  padding-top: 24px;
   white-space: nowrap;
 }
 
diff --git a/grafana-plugin/src/pages/integration_2/Integration2.tsx b/grafana-plugin/src/pages/integration/Integration.tsx
similarity index 96%
rename from grafana-plugin/src/pages/integration_2/Integration2.tsx
rename to grafana-plugin/src/pages/integration/Integration.tsx
index abde4c6b70..5cfb41c1a5 100644
--- a/grafana-plugin/src/pages/integration_2/Integration2.tsx
+++ b/grafana-plugin/src/pages/integration/Integration.tsx
@@ -42,9 +42,9 @@ import { WithContextMenu } from 'components/WithContextMenu/WithContextMenu';
 import EditRegexpRouteTemplateModal from 'containers/EditRegexpRouteTemplateModal/EditRegexpRouteTemplateModal';
 import CollapsedIntegrationRouteDisplay from 'containers/IntegrationContainers/CollapsedIntegrationRouteDisplay/CollapsedIntegrationRouteDisplay';
 import ExpandedIntegrationRouteDisplay from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay';
-import Integration2HeartbeatForm from 'containers/IntegrationContainers/Integration2HearbeatForm/Integration2HeartbeatForm';
+import IntegrationHeartbeatForm from 'containers/IntegrationContainers/IntegrationHearbeatForm/IntegrationHeartbeatForm';
 import IntegrationTemplateList from 'containers/IntegrationContainers/IntegrationTemplatesList';
-import IntegrationForm2 from 'containers/IntegrationForm/IntegrationForm2';
+import IntegrationForm from 'containers/IntegrationForm/IntegrationForm';
 import IntegrationTemplate from 'containers/IntegrationTemplate/IntegrationTemplate';
 import MaintenanceForm from 'containers/MaintenanceForm/MaintenanceForm';
 import TeamName from 'containers/TeamName/TeamName';
@@ -58,10 +58,9 @@ import {
 import { AlertTemplatesDTO } from 'models/alert_templates';
 import { ChannelFilter } from 'models/channel_filter';
 import { MaintenanceType } from 'models/maintenance/maintenance.types';
-import { INTEGRATION_TEMPLATES_LIST } from 'pages/integration_2/Integration2.config';
-import IntegrationHelper from 'pages/integration_2/Integration2.helper';
-import styles from 'pages/integration_2/Integration2.module.scss';
-import { AppFeature } from 'state/features';
+import { INTEGRATION_TEMPLATES_LIST } from 'pages/integration/Integration.config';
+import IntegrationHelper from 'pages/integration/Integration.helper';
+import styles from 'pages/integration/Integration.module.scss';
 import { PageProps, SelectOption, WithStoreProps } from 'state/types';
 import { useStore } from 'state/useStore';
 import { withMobXProviderContext } from 'state/withStore';
@@ -72,13 +71,13 @@ import { UserActions } from 'utils/authorization';
 import { PLUGIN_ROOT } from 'utils/consts';
 import sanitize from 'utils/sanitize';
 
-import { MONACO_PAYLOAD_OPTIONS } from './Integration2Common.config';
+import { MONACO_PAYLOAD_OPTIONS } from './IntegrationCommon.config';
 
 const cx = cn.bind(styles);
 
-interface Integration2Props extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}
+interface IntegrationProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}
 
-interface Integration2State extends PageBaseState {
+interface IntegrationState extends PageBaseState {
   isDemoModalOpen: boolean;
   isEditTemplateModalOpen: boolean;
   selectedTemplate: TemplateForEdit;
@@ -94,8 +93,8 @@ const ACTIONS_LIST_BORDER = 2;
 const NEW_ROUTE_DEFAULT = '';
 
 @observer
-class Integration2 extends React.Component<Integration2Props, Integration2State> {
-  constructor(props: Integration2Props) {
+class Integration extends React.Component<IntegrationProps, IntegrationState> {
+  constructor(props: IntegrationProps) {
     super(props);
 
     this.state = {
@@ -120,15 +119,9 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
     } = this.props;
 
     const {
-      store,
-      store: { alertReceiveChannelStore, telegramChannelStore },
+      store: { alertReceiveChannelStore },
     } = this.props;
 
-    if (store.hasFeature(AppFeature.Telegram)) {
-      // workaround until we get the whole telegram data in response
-      telegramChannelStore.updateItems();
-    }
-
     if (query?.template) {
       this.openEditTemplateModal(query.template, query.routeId && query.routeId);
     }
@@ -200,7 +193,7 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
             )}
 
             <div className={cx('integration__heading-container')}>
-              <PluginLink query={{ page: 'integrations_2', p }}>
+              <PluginLink query={{ page: 'integrations', p }}>
                 <IconButton name="arrow-left" size="xl" />
               </PluginLink>
               <h1 className={cx('integration__name')}>
@@ -573,7 +566,7 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
       history,
     } = this.props;
 
-    alertReceiveChannelStore.deleteAlertReceiveChannel(id).then(() => history.push(`${PLUGIN_ROOT}/integrations_2/`));
+    alertReceiveChannelStore.deleteAlertReceiveChannel(id).then(() => history.push(`${PLUGIN_ROOT}/integrations/`));
   };
 
   async loadIntegration() {
@@ -603,7 +596,7 @@ class Integration2 extends React.Component<Integration2Props, Integration2State>
     await Promise.all(promises).catch(() => {
       if (!alertReceiveChannelStore.items[id]) {
         // failed fetching the integration (most likely it's not existent)
-        history.push(`${PLUGIN_ROOT}/integrations_2`);
+        history.push(`${PLUGIN_ROOT}/integrations`);
       }
     });
   }
@@ -690,7 +683,7 @@ const IntegrationSendDemoPayloadModal: React.FC<IntegrationSendDemoPayloadModalP
           <CopyToClipboard text={getCurlText()} onCopy={() => openNotification('CURL copied!')}>
             <Button variant={'secondary'}>Copy as CURL</Button>
           </CopyToClipboard>
-          <Button variant={'primary'} onClick={sendDemoAlert}>
+          <Button variant={'primary'} onClick={sendDemoAlert} data-testid="submit-send-alert">
             Send Alert
           </Button>
         </HorizontalGroup>
@@ -782,7 +775,7 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
       )}
 
       {isIntegrationSettingsOpen && (
-        <IntegrationForm2
+        <IntegrationForm
           isTableView={false}
           onHide={() => setIsIntegrationSettingsOpen(false)}
           onUpdate={() => alertReceiveChannelStore.updateItem(alertReceiveChannel['id'])}
@@ -791,7 +784,7 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
       )}
 
       {isHearbeatFormOpen && (
-        <Integration2HeartbeatForm
+        <IntegrationHeartbeatForm
           alertReceveChannelId={alertReceiveChannel['id']}
           onClose={() => setIsHearbeatFormOpen(false)}
         />
@@ -942,7 +935,7 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
   function deleteIntegration() {
     alertReceiveChannelStore
       .deleteAlertReceiveChannel(alertReceiveChannel.id)
-      .then(() => history.push(`${PLUGIN_ROOT}/integrations_2`));
+      .then(() => history.push(`${PLUGIN_ROOT}/integrations`));
   }
 
   function openIntegrationSettings() {
@@ -1148,4 +1141,4 @@ const IntegrationHeader: React.FC<IntegrationHeaderProps> = ({
   }
 };
 
-export default withRouter(withMobXProviderContext(Integration2));
+export default withRouter(withMobXProviderContext(Integration));
diff --git a/grafana-plugin/src/pages/integration_2/Integration2Common.config.ts b/grafana-plugin/src/pages/integration/IntegrationCommon.config.ts
similarity index 100%
rename from grafana-plugin/src/pages/integration_2/Integration2Common.config.ts
rename to grafana-plugin/src/pages/integration/IntegrationCommon.config.ts
diff --git a/grafana-plugin/src/pages/integrations/Integrations.module.css b/grafana-plugin/src/pages/integrations/Integrations.module.css
deleted file mode 100644
index 1ce1c988da..0000000000
--- a/grafana-plugin/src/pages/integrations/Integrations.module.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.filters {
-  margin-bottom: 20px;
-}
-
-.integrations {
-  width: 100%;
-  min-width: 720px;
-  display: flex;
-  align-items: flex-start;
-  border: var(--border);
-  border-radius: 2px;
-}
-
-.no-integrations {
-  width: 100%;
-  padding: 50px 0;
-}
-
-.alert-receive-channels-list {
-  width: 300px;
-  flex-shrink: 0;
-  overflow: auto;
-  max-height: 70vh;
-}
-
-.alert-rules {
-  margin: 16px;
-  flex-grow: 1;
-}
-
-.newIntegrationButton {
-  margin: 16px;
-  width: calc(100% - 32px);
-}
-
-.integrationsList {
-  border-right: var(--border);
-}
diff --git a/grafana-plugin/src/pages/integrations_2/Integrations2.module.scss b/grafana-plugin/src/pages/integrations/Integrations.module.scss
similarity index 93%
rename from grafana-plugin/src/pages/integrations_2/Integrations2.module.scss
rename to grafana-plugin/src/pages/integrations/Integrations.module.scss
index 7274e16f25..421466499c 100644
--- a/grafana-plugin/src/pages/integrations_2/Integrations2.module.scss
+++ b/grafana-plugin/src/pages/integrations/Integrations.module.scss
@@ -42,6 +42,6 @@
   flex-direction: row;
 
   &:hover {
-    background: var(--gray-9);
+    background: var(--cards-background);
   }
-}
+}
\ No newline at end of file
diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx
index 769a07ab77..5a691838fe 100644
--- a/grafana-plugin/src/pages/integrations/Integrations.tsx
+++ b/grafana-plugin/src/pages/integrations/Integrations.tsx
@@ -1,49 +1,62 @@
 import React from 'react';
 
-import { Button, LoadingPlaceholder, VerticalGroup } from '@grafana/ui';
+import { HorizontalGroup, Button, VerticalGroup, Icon, ConfirmModal } from '@grafana/ui';
 import cn from 'classnames/bind';
+import { debounce } from 'lodash-es';
 import { observer } from 'mobx-react';
-import qs from 'query-string';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import Emoji from 'react-emoji-render';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import GList from 'components/GList/GList';
+import GTable from 'components/GTable/GTable';
+import HamburgerMenu from 'components/HamburgerMenu/HamburgerMenu';
+import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
 import { Filters } from 'components/IntegrationsFilters/IntegrationsFilters';
-import PageErrorHandlingWrapper, { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
+import { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
 import {
   getWrongTeamResponseInfo,
   initErrorDataState,
 } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers';
+import PluginLink from 'components/PluginLink/PluginLink';
 import Text from 'components/Text/Text';
-import Tutorial from 'components/Tutorial/Tutorial';
-import { TutorialStep } from 'components/Tutorial/Tutorial.types';
-import AlertReceiveChannelCard from 'containers/AlertReceiveChannelCard/AlertReceiveChannelCard';
-import AlertRules from 'containers/AlertRules/AlertRules';
-import CreateAlertReceiveChannelContainer from 'containers/CreateAlertReceiveChannelContainer/CreateAlertReceiveChannelContainer';
-import IntegrationSettings from 'containers/IntegrationSettings/IntegrationSettings';
-import { IntegrationSettingsTab } from 'containers/IntegrationSettings/IntegrationSettings.types';
+import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
+import { WithContextMenu } from 'components/WithContextMenu/WithContextMenu';
+import IntegrationForm from 'containers/IntegrationForm/IntegrationForm';
 import RemoteFilters from 'containers/RemoteFilters/RemoteFilters';
+import TeamName from 'containers/TeamName/TeamName';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import {
-  AlertReceiveChannel,
-  AlertReceiveChannelOption,
-} from 'models/alert_receive_channel/alert_receive_channel.types';
-import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
+import { HeartIcon, HeartRedIcon } from 'icons';
+import { AlertReceiveChannel, MaintenanceMode } from 'models/alert_receive_channel/alert_receive_channel.types';
+import IntegrationHelper from 'pages/integration/Integration.helper';
 import { PageProps, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
+import { openNotification } from 'utils';
 import LocationHelper from 'utils/LocationHelper';
 import { UserActions } from 'utils/authorization';
-import { PLUGIN_ROOT } from 'utils/consts';
 
-import styles from './Integrations.module.css';
+import styles from './Integrations.module.scss';
 
 const cx = cn.bind(styles);
+const FILTERS_DEBOUNCE_MS = 500;
+const ITEMS_PER_PAGE = 15;
+const MAX_LINE_LENGTH = 40;
+const ACTIONS_LIST_WIDTH = 200;
+const ACTIONS_LIST_BORDER = 2;
 
 interface IntegrationsState extends PageBaseState {
   integrationsFilters: Filters;
-  showCreateIntegrationModal: boolean;
-  alertReceiveChannelToShowSettings?: AlertReceiveChannel['id'];
-  integrationSettingsTab?: IntegrationSettingsTab;
-  extraAlertReceiveChannels?: AlertReceiveChannel[];
+  alertReceiveChannelId?: AlertReceiveChannel['id'] | 'new';
+  page: number;
+  confirmationModal: {
+    isOpen: boolean;
+    title: any;
+    dismissText: string;
+    confirmText: string;
+    body?: React.ReactNode;
+    description?: string;
+    confirmationText?: string;
+    onConfirm: () => void;
+  };
 }
 
 interface IntegrationsProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}
@@ -52,365 +65,424 @@ interface IntegrationsProps extends WithStoreProps, PageProps, RouteComponentPro
 class Integrations extends React.Component<IntegrationsProps, IntegrationsState> {
   state: IntegrationsState = {
     integrationsFilters: { searchTerm: '' },
-    showCreateIntegrationModal: false,
     errorData: initErrorDataState(),
+    page: 1,
+    confirmationModal: undefined,
   };
 
-  private alertReceiveChanneltoPoll: { [key: string]: number } = {};
-  private alertReceiveChannelTimerId: ReturnType<typeof setTimeout>;
+  async componentDidMount() {
+    const {
+      query: { p },
+    } = this.props;
 
-  componentWillUnmount() {
-    clearInterval(this.alertReceiveChannelTimerId);
+    this.setState({ page: p ? Number(p) : 1 }, this.update);
+
+    this.parseQueryParams();
   }
 
-  componentDidUpdate(prevProps: Readonly<IntegrationsProps>): void {
+  componentDidUpdate(prevProps: IntegrationsProps) {
     if (prevProps.match.params.id !== this.props.match.params.id) {
       this.parseQueryParams();
     }
   }
 
-  setSelectedAlertReceiveChannel = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
-    const { store } = this.props;
-    store.selectedAlertReceiveChannel = alertReceiveChannelId;
-  };
-
   parseQueryParams = async () => {
-    this.setState({ errorData: initErrorDataState() }); // reset wrong team error to false on query parse // reset wrong team error to false
+    this.setState((_prevState) => ({
+      errorData: initErrorDataState(),
+      alertReceiveChannelId: undefined,
+    })); // reset state on query parse
 
     const {
       store,
-      query,
       match: {
         params: { id },
       },
     } = this.props;
-    const { alertReceiveChannelStore } = store;
 
-    let selectedAlertReceiveChannel = undefined;
+    if (!id) {
+      return;
+    }
+
+    let alertReceiveChannel: AlertReceiveChannel | void = undefined;
+    const isNewAlertReceiveChannel = id === 'new';
 
-    if (id) {
-      let alertReceiveChannel = await alertReceiveChannelStore
+    if (!isNewAlertReceiveChannel) {
+      alertReceiveChannel = await store.alertReceiveChannelStore
         .loadItem(id, true)
         .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }));
-
-      if (!alertReceiveChannel) {
-        return;
-      }
-
-      alertReceiveChannel = alertReceiveChannelStore.items[id];
-      if (alertReceiveChannel) {
-        selectedAlertReceiveChannel = alertReceiveChannel.id;
-      }
-
-      if (query.tab) {
-        this.setState({ integrationSettingsTab: query.tab });
-        this.setState({ alertReceiveChannelToShowSettings: id });
-      }
     }
 
-    if (selectedAlertReceiveChannel) {
-      this.enrichAlertReceiveChannelsAndSelect(selectedAlertReceiveChannel);
-    } else {
-      store.selectedAlertReceiveChannel = undefined;
+    if (alertReceiveChannel || isNewAlertReceiveChannel) {
+      this.setState({ alertReceiveChannelId: id });
     }
   };
 
-  render() {
-    const {
-      store,
-      match: {
-        params: { id },
-      },
-      query,
-    } = this.props;
-    const {
-      alertReceiveChannelToShowSettings,
-      integrationSettingsTab,
-      showCreateIntegrationModal,
-      errorData,
-      extraAlertReceiveChannels,
-    } = this.state;
+  update = () => {
+    const { store } = this.props;
+    const { page, integrationsFilters } = this.state;
+    LocationHelper.update({ p: page }, 'partial');
 
-    const { alertReceiveChannelStore, selectedAlertReceiveChannel } = store;
+    return store.alertReceiveChannelStore.updatePaginatedItems(integrationsFilters, page);
+  };
 
-    const searchResult = alertReceiveChannelStore.getSearchResult();
+  render() {
+    const { store, query } = this.props;
+    const { alertReceiveChannelId, page, confirmationModal } = this.state;
+    const { grafanaTeamStore, alertReceiveChannelStore, heartbeatStore } = store;
+
+    const { count, results } = alertReceiveChannelStore.getPaginatedSearchResult();
+
+    const columns = [
+      {
+        width: '35%',
+        title: 'Name',
+        key: 'name',
+        render: this.renderName,
+      },
 
-    let data = searchResult;
-    if (extraAlertReceiveChannels && extraAlertReceiveChannels.length) {
-      data = [...extraAlertReceiveChannels, ...searchResult];
-    }
+      {
+        width: '15%',
+        title: 'Status',
+        key: 'status',
+        render: (item: AlertReceiveChannel) => this.renderIntegrationStatus(item, alertReceiveChannelStore),
+      },
+      {
+        width: '20%',
+        title: 'Type',
+        key: 'datasource',
+        render: (item: AlertReceiveChannel) => this.renderDatasource(item, alertReceiveChannelStore),
+      },
+      {
+        width: '10%',
+        title: 'Maintenance',
+        key: 'maintenance',
+        render: (item: AlertReceiveChannel) => this.renderMaintenance(item),
+      },
+      {
+        width: '5%',
+        title: 'Heartbeat',
+        key: 'heartbeat',
+        render: (item: AlertReceiveChannel) => this.renderHeartbeat(item, alertReceiveChannelStore, heartbeatStore),
+      },
+      {
+        width: '15%',
+        title: 'Team',
+        render: (item: AlertReceiveChannel) => this.renderTeam(item, grafanaTeamStore.items),
+      },
+      {
+        width: '50px',
+        key: 'buttons',
+        render: (item: AlertReceiveChannel) => this.renderButtons(item),
+        className: cx('buttons'),
+      },
+    ];
 
     return (
-      <PageErrorHandlingWrapper
-        errorData={errorData}
-        objectName="integration"
-        pageName="integrations"
-        itemNotFoundMessage={`Integration with id=${id} is not found. Please select integration from the list.`}
-      >
-        {() => (
-          <>
-            <div className={cx('root')}>
-              <div className={cx('filters')}>
-                <RemoteFilters
-                  query={query}
-                  page="integrations"
-                  grafanaTeamStore={store.grafanaTeamStore}
-                  onChange={this.handleIntegrationsFiltersChange}
-                />
-              </div>
-              {data?.length ? (
-                <div className={cx('integrations')}>
-                  <div className={cx('integrationsList')}>
-                    <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                      <Button
-                        onClick={() => {
-                          this.setState({ showCreateIntegrationModal: true });
-                        }}
-                        icon="plus"
-                        className={cx('newIntegrationButton')}
-                      >
-                        New integration to receive alerts
-                      </Button>
-                    </WithPermissionControlTooltip>
-                    <div className={cx('alert-receive-channels-list')}>
-                      <GList
-                        autoScroll
-                        selectedId={selectedAlertReceiveChannel}
-                        items={data}
-                        itemKey="id"
-                        onSelect={this.handleAlertReceiveChannelSelect}
-                      >
-                        {(item) => (
-                          <AlertReceiveChannelCard
-                            id={item.id}
-                            onShowHeartbeatModal={() => {
-                              this.setState({
-                                alertReceiveChannelToShowSettings: item.id,
-                                integrationSettingsTab: IntegrationSettingsTab.Heartbeat,
-                              });
-                            }}
-                          />
-                        )}
-                      </GList>
-                    </div>
-                  </div>
-                  <div className={cx('alert-rules', 'alertRulesBorder')}>
-                    <AlertRules
-                      alertReceiveChannelId={store.selectedAlertReceiveChannel}
-                      onDelete={this.handleDeleteAlertReceiveChannel}
-                      onShowSettings={(integrationSettingsTab?: IntegrationSettingsTab) => {
-                        this.setState({
-                          alertReceiveChannelToShowSettings: store.selectedAlertReceiveChannel,
-                          integrationSettingsTab,
-                        });
-
-                        LocationHelper.update({ tab: integrationSettingsTab }, 'partial');
-                      }}
-                    />
-                  </div>
-                </div>
-              ) : data ? (
-                <Tutorial
-                  step={TutorialStep.Integrations}
-                  title={
-                    <VerticalGroup align="center" spacing="lg">
-                      <Text type="secondary">No integrations found. Review your filter and team settings.</Text>
-                      <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                        <Button
-                          icon="plus"
-                          variant="primary"
-                          size="lg"
-                          onClick={() => {
-                            this.setState({ showCreateIntegrationModal: true });
-                          }}
-                        >
-                          New integration to receive alerts
-                        </Button>
-                      </WithPermissionControlTooltip>
-                    </VerticalGroup>
-                  }
-                />
-              ) : (
-                <LoadingPlaceholder text="Loading..." />
-              )}
-            </div>
-            {alertReceiveChannelToShowSettings && (
-              <IntegrationSettings
-                onUpdate={() => {
-                  alertReceiveChannelStore.updateItem(alertReceiveChannelToShowSettings);
-                }}
-                startTab={integrationSettingsTab}
-                id={alertReceiveChannelToShowSettings}
-                onHide={() => {
-                  this.setState({
-                    alertReceiveChannelToShowSettings: undefined,
-                    integrationSettingsTab: undefined,
-                  });
-                  LocationHelper.update({ tab: undefined }, 'partial');
-                }}
-              />
-            )}
-            {showCreateIntegrationModal && (
-              <CreateAlertReceiveChannelContainer
-                onHide={() => {
-                  this.setState({ showCreateIntegrationModal: false });
-                }}
-                onCreate={this.handleCreateNewAlertReceiveChannel}
-              />
-            )}
-          </>
+      <>
+        <div className={cx('root')}>
+          <div className={cx('title')}>
+            <HorizontalGroup justify="space-between">
+              <VerticalGroup>
+                <Text.Title level={3}>Integrations</Text.Title>
+                <Text type="secondary">
+                  Receive alerts, group and interpret using templates and route to escalations
+                </Text>
+              </VerticalGroup>
+              <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
+                <Button
+                  onClick={() => {
+                    this.setState({ alertReceiveChannelId: 'new' });
+                  }}
+                  icon="plus"
+                  className={cx('newIntegrationButton')}
+                >
+                  New integration
+                </Button>
+              </WithPermissionControlTooltip>
+            </HorizontalGroup>
+          </div>
+          <div>
+            <RemoteFilters
+              query={query}
+              page="integrations"
+              grafanaTeamStore={store.grafanaTeamStore}
+              onChange={this.handleIntegrationsFiltersChange}
+            />
+            <GTable
+              emptyText={this.renderNotFound()}
+              rowKey="id"
+              data={results}
+              columns={columns}
+              className={cx('integrations-table')}
+              rowClassName={cx('integrations-table-row')}
+              pagination={{
+                page,
+                total: Math.ceil((count || 0) / ITEMS_PER_PAGE),
+                onChange: this.handleChangePage,
+              }}
+            />
+          </div>
+        </div>
+        {alertReceiveChannelId && (
+          <IntegrationForm
+            onHide={() => {
+              this.setState({ alertReceiveChannelId: undefined });
+            }}
+            onUpdate={this.update}
+            id={alertReceiveChannelId}
+          />
+        )}
+
+        {confirmationModal && (
+          <ConfirmModal
+            isOpen={confirmationModal.isOpen}
+            title={confirmationModal.title}
+            confirmText={confirmationModal.confirmText}
+            dismissText="Cancel"
+            body={confirmationModal.body}
+            description={confirmationModal.description}
+            confirmationText={confirmationModal.confirmationText}
+            onConfirm={confirmationModal.onConfirm}
+            onDismiss={() =>
+              this.setState({
+                confirmationModal: undefined,
+              })
+            }
+          />
         )}
-      </PageErrorHandlingWrapper>
+      </>
     );
   }
 
-  handleCreateNewAlertReceiveChannel = (option: AlertReceiveChannelOption, team: GrafanaTeam['id']) => {
-    const { store, history } = this.props;
-
-    store.alertReceiveChannelStore
-      .create({ integration: option.value, team })
-      .then(async (alertReceiveChannel: AlertReceiveChannel) => {
-        await this.applyFilters();
+  handleChangePage = (page: number) => {
+    this.setState({ page }, this.update);
+  };
 
-        const query = { ...qs.parse(window.location.search), tab: IntegrationSettingsTab.HowToConnect };
+  renderNotFound() {
+    return (
+      <div className={cx('loader')}>
+        <Text type="secondary">Not found</Text>
+      </div>
+    );
+  }
 
-        history.push(`${PLUGIN_ROOT}/integrations/${alertReceiveChannel.id}?${qs.stringify(query)}`);
+  renderName = (item: AlertReceiveChannel) => {
+    const {
+      query: { p },
+    } = this.props;
 
-        const integration = store.alertReceiveChannelStore.getIntegration(alertReceiveChannel);
-        if (integration?.display_name === 'Grafana Alerting') {
-          this.alertReceiveChanneltoPoll = { ...this.alertReceiveChanneltoPoll, [alertReceiveChannel.id]: 200 };
-          if (!this.alertReceiveChannelTimerId) {
-            this.alertReceiveChannelTimerId = setInterval(this.checkTimerTick, 3000);
-          }
-        }
-      });
+    return (
+      <PluginLink query={{ page: 'integrations', id: item.id, p }}>
+        <Text type="link" size="medium">
+          <Emoji
+            className={cx('title')}
+            text={
+              item.verbal_name?.length > MAX_LINE_LENGTH
+                ? item.verbal_name?.substring(0, MAX_LINE_LENGTH) + '...'
+                : item.verbal_name
+            }
+          />
+        </Text>
+      </PluginLink>
+    );
   };
 
-  checkTimerTick = () => {
-    const { store } = this.props;
+  renderDatasource(item: AlertReceiveChannel, alertReceiveChannelStore) {
+    const alertReceiveChannel = alertReceiveChannelStore.items[item.id];
+    const integration = alertReceiveChannelStore.getIntegration(alertReceiveChannel);
+    return (
+      <HorizontalGroup spacing="xs">
+        <IntegrationLogo scale={0.08} integration={integration} />
+        <Text type="secondary">{integration?.display_name}</Text>
+      </HorizontalGroup>
+    );
+  }
 
-    if (store.selectedAlertReceiveChannel in this.alertReceiveChanneltoPoll) {
-      let counter = this.alertReceiveChanneltoPoll[store.selectedAlertReceiveChannel];
-      if (counter > 0) {
-        store.alertReceiveChannelStore.updateItem(store.selectedAlertReceiveChannel);
-        this.alertReceiveChanneltoPoll[store.selectedAlertReceiveChannel]--;
-      } else {
-        delete this.alertReceiveChanneltoPoll[store.selectedAlertReceiveChannel];
-      }
-    }
-  };
+  renderIntegrationStatus(item: AlertReceiveChannel, alertReceiveChannelStore) {
+    const alertReceiveChannelCounter = alertReceiveChannelStore.counters[item.id];
+    let routesCounter = item.routes_count;
+    let connectedEscalationsChainsCount = item.connected_escalations_chains_count;
 
-  handleDeleteAlertReceiveChannel = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
-    const { store, history } = this.props;
-    const { extraAlertReceiveChannels } = this.state;
-    const { alertReceiveChanneltoPoll } = this;
+    return (
+      <HorizontalGroup spacing="xs">
+        {alertReceiveChannelCounter && (
+          <PluginLink query={{ page: 'incidents', integration: item.id }} className={cx('alertsInfoText')}>
+            <TooltipBadge
+              borderType="primary"
+              text={alertReceiveChannelCounter?.alerts_count + '/' + alertReceiveChannelCounter?.alert_groups_count}
+              tooltipTitle=""
+              tooltipContent={
+                alertReceiveChannelCounter?.alerts_count +
+                ' alert' +
+                (alertReceiveChannelCounter?.alerts_count === 1 ? '' : 's') +
+                ' in ' +
+                alertReceiveChannelCounter?.alert_groups_count +
+                ' alert group' +
+                (alertReceiveChannelCounter?.alert_groups_count === 1 ? '' : 's')
+              }
+            />
+          </PluginLink>
+        )}
+        {routesCounter && (
+          <TooltipBadge
+            borderType="success"
+            icon="link"
+            text={`${connectedEscalationsChainsCount}/${routesCounter}`}
+            tooltipContent={undefined}
+            tooltipTitle={
+              connectedEscalationsChainsCount +
+              ' connected escalation chain' +
+              (connectedEscalationsChainsCount === 1 ? '' : 's') +
+              ' in ' +
+              routesCounter +
+              ' route' +
+              (routesCounter === 1 ? '' : 's')
+            }
+          />
+        )}
+      </HorizontalGroup>
+    );
+  }
 
-    const { alertReceiveChannelStore } = store;
+  renderHeartbeat(item: AlertReceiveChannel, alertReceiveChannelStore, heartbeatStore) {
+    const alertReceiveChannel = alertReceiveChannelStore.items[item.id];
+
+    const heartbeatId = alertReceiveChannelStore.alertReceiveChannelToHeartbeat[alertReceiveChannel.id];
+    const heartbeat = heartbeatStore.items[heartbeatId];
+
+    const heartbeatStatus = Boolean(heartbeat?.status);
+    return (
+      <div>
+        {alertReceiveChannel.is_available_for_integration_heartbeat && heartbeat?.last_heartbeat_time_verbal && (
+          <TooltipBadge
+            text={undefined}
+            className={cx('heartbeat-badge')}
+            borderType={heartbeatStatus ? 'success' : 'danger'}
+            customIcon={heartbeatStatus ? <HeartIcon /> : <HeartRedIcon />}
+            tooltipTitle={`Last heartbeat: ${heartbeat?.last_heartbeat_time_verbal}`}
+            tooltipContent={undefined}
+          />
+        )}
+      </div>
+    );
+  }
 
-    if (alertReceiveChanneltoPoll[alertReceiveChannelId]) {
-      delete alertReceiveChanneltoPoll[alertReceiveChannelId];
+  renderMaintenance(item: AlertReceiveChannel) {
+    const maintenanceMode = item.maintenance_mode;
+
+    if (maintenanceMode === MaintenanceMode.Debug || maintenanceMode === MaintenanceMode.Maintenance) {
+      return (
+        <div className={cx('u-flex')}>
+          <TooltipBadge
+            borderType="primary"
+            icon="pause"
+            text={IntegrationHelper.getMaintenanceText(item.maintenance_till)}
+            tooltipTitle={IntegrationHelper.getMaintenanceText(item.maintenance_till, maintenanceMode)}
+            tooltipContent={undefined}
+          />
+        </div>
+      );
     }
 
-    alertReceiveChannelStore
-      .deleteAlertReceiveChannel(alertReceiveChannelId)
-      .then(this.applyFilters)
-      .then(() => {
-        if (alertReceiveChannelId === store.selectedAlertReceiveChannel) {
-          if (extraAlertReceiveChannels) {
-            const newExtraAlertReceiveChannels = extraAlertReceiveChannels.filter(
-              (alertReceiveChannel) => alertReceiveChannel.id !== alertReceiveChannelId
-            );
-
-            this.setState({ extraAlertReceiveChannels: newExtraAlertReceiveChannels });
-          }
-
-          const searchResult = alertReceiveChannelStore.getSearchResult();
-
-          const index = searchResult.findIndex(
-            (alertReceiveChannel: AlertReceiveChannel) => alertReceiveChannel.id === store.selectedAlertReceiveChannel
-          );
-          const newSelected = searchResult[index - 1] || searchResult[0];
-
-          history.push(`${PLUGIN_ROOT}/integrations/${newSelected?.id || ''}${window.location.search}`);
-        }
-      });
-  };
+    return null;
+  }
 
-  applyFilters = () => {
-    const { store } = this.props;
-    const { alertReceiveChannelStore } = store;
-    const { integrationsFilters } = this.state;
+  renderTeam(item: AlertReceiveChannel, teams: any) {
+    return <TeamName team={teams[item.team]} />;
+  }
 
-    return alertReceiveChannelStore.updateItems(integrationsFilters);
+  renderButtons = (item: AlertReceiveChannel) => {
+    return (
+      <WithContextMenu
+        renderMenuItems={() => (
+          <div className={cx('integrations-actionsList')}>
+            <WithPermissionControlTooltip key="edit" userAction={UserActions.IntegrationsWrite}>
+              <div className={cx('integrations-actionItem')} onClick={() => this.onIntegrationEditClick(item.id)}>
+                <Text type="primary">Integration settings</Text>
+              </div>
+            </WithPermissionControlTooltip>
+
+            <CopyToClipboard text={item.id} onCopy={() => openNotification('Integration ID is copied')}>
+              <div className={cx('integrations-actionItem')}>
+                <HorizontalGroup spacing={'xs'}>
+                  <Icon name="copy" />
+
+                  <Text type="primary">UID: {item.id}</Text>
+                </HorizontalGroup>
+              </div>
+            </CopyToClipboard>
+
+            <div className="thin-line-break" />
+
+            <WithPermissionControlTooltip key="delete" userAction={UserActions.IntegrationsWrite}>
+              <div className={cx('integrations-actionItem')}>
+                <div
+                  onClick={() => {
+                    this.setState({
+                      confirmationModal: {
+                        isOpen: true,
+                        confirmText: 'Delete',
+                        dismissText: 'Cancel',
+                        onConfirm: () => this.handleDeleteAlertReceiveChannel(item.id),
+                        title: 'Delete integration',
+                        body: (
+                          <Text type="primary">
+                            Are you sure you want to delete <Emoji text={item.verbal_name} /> integration?
+                          </Text>
+                        ),
+                      },
+                    });
+                  }}
+                  style={{ width: '100%' }}
+                >
+                  <Text type="danger">
+                    <HorizontalGroup spacing={'xs'}>
+                      <Icon name="trash-alt" />
+                      <span>Delete Integration</span>
+                    </HorizontalGroup>
+                  </Text>
+                </div>
+              </div>
+            </WithPermissionControlTooltip>
+          </div>
+        )}
+      >
+        {({ openMenu }) => (
+          <HamburgerMenu openMenu={openMenu} listBorder={ACTIONS_LIST_BORDER} listWidth={ACTIONS_LIST_WIDTH} />
+        )}
+      </WithContextMenu>
+    );
   };
 
-  autoSelectAlertReceiveChannel = () => {
-    const { store, history } = this.props;
-    const { alertReceiveChannelStore } = store;
-    const searchResult = alertReceiveChannelStore.getSearchResult();
-
-    if (
-      !searchResult.some(
-        (alertReceiveChannel: AlertReceiveChannel) => alertReceiveChannel.id === store.selectedAlertReceiveChannel
-      )
-    ) {
-      const id = searchResult[0]?.id;
-      history.push(`${PLUGIN_ROOT}/integrations/${id || ''}${window.location.search}`);
-    }
+  onIntegrationEditClick = (id: AlertReceiveChannel['id']) => {
+    this.setState({ alertReceiveChannelId: id });
   };
 
-  handleIntegrationsFiltersChange = (integrationsFilters: Filters, isOnMount: boolean) => {
-    const {
-      match: {
-        params: { id },
-      },
-    } = this.props;
+  handleDeleteAlertReceiveChannel = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
+    const { store } = this.props;
 
-    this.setState({ integrationsFilters, extraAlertReceiveChannels: undefined }, () => {
-      this.applyFilters().then(() => {
-        if (isOnMount && id) {
-          this.parseQueryParams();
-        } else {
-          this.autoSelectAlertReceiveChannel();
-        }
-      });
-    });
-  };
+    const { alertReceiveChannelStore } = store;
 
-  handleAlertReceiveChannelSelect = (id: AlertReceiveChannel['id']) => {
-    const { history } = this.props;
+    alertReceiveChannelStore.deleteAlertReceiveChannel(alertReceiveChannelId).then(this.applyFilters);
+    this.setState({ confirmationModal: undefined });
+  };
 
-    history.push(`${PLUGIN_ROOT}/integrations/${id}${window.location.search}`);
+  handleIntegrationsFiltersChange = (integrationsFilters: Filters) => {
+    this.setState({ integrationsFilters }, () => this.debouncedUpdateIntegrations());
   };
 
-  enrichAlertReceiveChannelsAndSelect = async (id: AlertReceiveChannel['id']) => {
+  applyFilters = () => {
     const { store } = this.props;
-    const { extraAlertReceiveChannels } = this.state;
     const { alertReceiveChannelStore } = store;
+    const { integrationsFilters } = this.state;
 
-    const searchResult = alertReceiveChannelStore.getSearchResult();
-    if (
-      !searchResult.some((alertReceiveChannel) => alertReceiveChannel.id === id) &&
-      (!extraAlertReceiveChannels ||
-        (extraAlertReceiveChannels &&
-          !extraAlertReceiveChannels.some((alertReceiveChannel) => alertReceiveChannel.id === id)))
-    ) {
-      let alertReceiveChannel = await alertReceiveChannelStore
-        .loadItem(id, true)
-        .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }));
-
-      if (alertReceiveChannel) {
-        this.setState(
-          { extraAlertReceiveChannels: [...(this.state.extraAlertReceiveChannels || []), alertReceiveChannel] },
-          () => {
-            this.setSelectedAlertReceiveChannel(id);
-          }
-        );
-      }
-    } else {
-      this.setSelectedAlertReceiveChannel(id);
-    }
+    return alertReceiveChannelStore.updatePaginatedItems(integrationsFilters).then(() => {
+      this.setState({ page: 1 });
+      LocationHelper.update({ p: 1 }, 'partial');
+    });
   };
+
+  debouncedUpdateIntegrations = debounce(this.applyFilters, FILTERS_DEBOUNCE_MS);
 }
 
 export default withRouter(withMobXProviderContext(Integrations));
diff --git a/grafana-plugin/src/pages/integrations_2/Integrations2.tsx b/grafana-plugin/src/pages/integrations_2/Integrations2.tsx
deleted file mode 100644
index f26c035a0c..0000000000
--- a/grafana-plugin/src/pages/integrations_2/Integrations2.tsx
+++ /dev/null
@@ -1,488 +0,0 @@
-import React from 'react';
-
-import { HorizontalGroup, Button, VerticalGroup, Icon, ConfirmModal } from '@grafana/ui';
-import cn from 'classnames/bind';
-import { debounce } from 'lodash-es';
-import { observer } from 'mobx-react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import Emoji from 'react-emoji-render';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-
-import GTable from 'components/GTable/GTable';
-import HamburgerMenu from 'components/HamburgerMenu/HamburgerMenu';
-import IntegrationLogo from 'components/IntegrationLogo/IntegrationLogo';
-import { Filters } from 'components/IntegrationsFilters/IntegrationsFilters';
-import { PageBaseState } from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper';
-import {
-  getWrongTeamResponseInfo,
-  initErrorDataState,
-} from 'components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.helpers';
-import PluginLink from 'components/PluginLink/PluginLink';
-import Text from 'components/Text/Text';
-import TooltipBadge from 'components/TooltipBadge/TooltipBadge';
-import { WithContextMenu } from 'components/WithContextMenu/WithContextMenu';
-import IntegrationForm2 from 'containers/IntegrationForm/IntegrationForm2';
-import RemoteFilters from 'containers/RemoteFilters/RemoteFilters';
-import TeamName from 'containers/TeamName/TeamName';
-import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
-import { HeartIcon, HeartRedIcon } from 'icons';
-import { AlertReceiveChannel, MaintenanceMode } from 'models/alert_receive_channel/alert_receive_channel.types';
-import IntegrationHelper from 'pages/integration_2/Integration2.helper';
-import { PageProps, WithStoreProps } from 'state/types';
-import { withMobXProviderContext } from 'state/withStore';
-import { openNotification } from 'utils';
-import LocationHelper from 'utils/LocationHelper';
-import { UserActions } from 'utils/authorization';
-
-import styles from './Integrations2.module.scss';
-
-const cx = cn.bind(styles);
-const FILTERS_DEBOUNCE_MS = 500;
-const ITEMS_PER_PAGE = 15;
-const MAX_LINE_LENGTH = 40;
-const ACTIONS_LIST_WIDTH = 200;
-const ACTIONS_LIST_BORDER = 2;
-
-interface IntegrationsState extends PageBaseState {
-  integrationsFilters: Filters;
-  alertReceiveChannelId?: AlertReceiveChannel['id'] | 'new';
-  page: number;
-  confirmationModal: {
-    isOpen: boolean;
-    title: any;
-    dismissText: string;
-    confirmText: string;
-    body?: React.ReactNode;
-    description?: string;
-    confirmationText?: string;
-    onConfirm: () => void;
-  };
-}
-
-interface IntegrationsProps extends WithStoreProps, PageProps, RouteComponentProps<{ id: string }> {}
-
-@observer
-class Integrations extends React.Component<IntegrationsProps, IntegrationsState> {
-  state: IntegrationsState = {
-    integrationsFilters: { searchTerm: '' },
-    errorData: initErrorDataState(),
-    page: 1,
-    confirmationModal: undefined,
-  };
-
-  async componentDidMount() {
-    const {
-      query: { p },
-    } = this.props;
-
-    this.setState({ page: p ? Number(p) : 1 }, this.update);
-
-    this.parseQueryParams();
-  }
-
-  componentDidUpdate(prevProps: IntegrationsProps) {
-    if (prevProps.match.params.id !== this.props.match.params.id) {
-      this.parseQueryParams();
-    }
-  }
-
-  parseQueryParams = async () => {
-    this.setState((_prevState) => ({
-      errorData: initErrorDataState(),
-      alertReceiveChannelId: undefined,
-    })); // reset state on query parse
-
-    const {
-      store,
-      match: {
-        params: { id },
-      },
-    } = this.props;
-
-    if (!id) {
-      return;
-    }
-
-    let alertReceiveChannel: AlertReceiveChannel | void = undefined;
-    const isNewAlertReceiveChannel = id === 'new';
-
-    if (!isNewAlertReceiveChannel) {
-      alertReceiveChannel = await store.alertReceiveChannelStore
-        .loadItem(id, true)
-        .catch((error) => this.setState({ errorData: { ...getWrongTeamResponseInfo(error) } }));
-    }
-
-    if (alertReceiveChannel || isNewAlertReceiveChannel) {
-      this.setState({ alertReceiveChannelId: id });
-    }
-  };
-
-  update = () => {
-    const { store } = this.props;
-    const { page, integrationsFilters } = this.state;
-    LocationHelper.update({ p: page }, 'partial');
-
-    return store.alertReceiveChannelStore.updatePaginatedItems(integrationsFilters, page);
-  };
-
-  render() {
-    const { store, query } = this.props;
-    const { alertReceiveChannelId, page, confirmationModal } = this.state;
-    const { grafanaTeamStore, alertReceiveChannelStore, heartbeatStore } = store;
-
-    const { count, results } = alertReceiveChannelStore.getPaginatedSearchResult();
-
-    const columns = [
-      {
-        width: '35%',
-        title: 'Name',
-        key: 'name',
-        render: this.renderName,
-      },
-
-      {
-        width: '15%',
-        title: 'Status',
-        key: 'status',
-        render: (item: AlertReceiveChannel) => this.renderIntegrationStatus(item, alertReceiveChannelStore),
-      },
-      {
-        width: '20%',
-        title: 'Type',
-        key: 'datasource',
-        render: (item: AlertReceiveChannel) => this.renderDatasource(item, alertReceiveChannelStore),
-      },
-      {
-        width: '10%',
-        title: 'Maintenance',
-        key: 'maintenance',
-        render: (item: AlertReceiveChannel) => this.renderMaintenance(item),
-      },
-      {
-        width: '5%',
-        title: 'Heartbeat',
-        key: 'heartbeat',
-        render: (item: AlertReceiveChannel) => this.renderHeartbeat(item, alertReceiveChannelStore, heartbeatStore),
-      },
-      {
-        width: '15%',
-        title: 'Team',
-        render: (item: AlertReceiveChannel) => this.renderTeam(item, grafanaTeamStore.items),
-      },
-      {
-        width: '50px',
-        key: 'buttons',
-        render: (item: AlertReceiveChannel) => this.renderButtons(item),
-        className: cx('buttons'),
-      },
-    ];
-
-    return (
-      <>
-        <div className={cx('root')}>
-          <div className={cx('title')}>
-            <HorizontalGroup justify="space-between">
-              <VerticalGroup>
-                <Text.Title level={3}>Integrations 2</Text.Title>
-                <Text type="secondary">
-                  Receive alerts, group and interpret using templates and route to escalations
-                </Text>
-              </VerticalGroup>
-              <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
-                <Button
-                  onClick={() => {
-                    this.setState({ alertReceiveChannelId: 'new' });
-                  }}
-                  icon="plus"
-                  className={cx('newIntegrationButton')}
-                >
-                  New integration
-                </Button>
-              </WithPermissionControlTooltip>
-            </HorizontalGroup>
-          </div>
-          <div>
-            <RemoteFilters
-              query={query}
-              page="integrations"
-              grafanaTeamStore={store.grafanaTeamStore}
-              onChange={this.handleIntegrationsFiltersChange}
-            />
-            <GTable
-              emptyText={this.renderNotFound()}
-              rowKey="id"
-              data={results}
-              columns={columns}
-              className={cx('integrations-table')}
-              rowClassName={cx('integrations-table-row')}
-              pagination={{
-                page,
-                total: Math.ceil((count || 0) / ITEMS_PER_PAGE),
-                onChange: this.handleChangePage,
-              }}
-            />
-          </div>
-        </div>
-        {alertReceiveChannelId && (
-          <IntegrationForm2
-            onHide={() => {
-              this.setState({ alertReceiveChannelId: undefined });
-            }}
-            onUpdate={this.update}
-            id={alertReceiveChannelId}
-          />
-        )}
-
-        {confirmationModal && (
-          <ConfirmModal
-            isOpen={confirmationModal.isOpen}
-            title={confirmationModal.title}
-            confirmText={confirmationModal.confirmText}
-            dismissText="Cancel"
-            body={confirmationModal.body}
-            description={confirmationModal.description}
-            confirmationText={confirmationModal.confirmationText}
-            onConfirm={confirmationModal.onConfirm}
-            onDismiss={() =>
-              this.setState({
-                confirmationModal: undefined,
-              })
-            }
-          />
-        )}
-      </>
-    );
-  }
-
-  handleChangePage = (page: number) => {
-    this.setState({ page }, this.update);
-  };
-
-  renderNotFound() {
-    return (
-      <div className={cx('loader')}>
-        <Text type="secondary">Not found</Text>
-      </div>
-    );
-  }
-
-  renderName = (item: AlertReceiveChannel) => {
-    const {
-      query: { p },
-    } = this.props;
-
-    return (
-      <PluginLink query={{ page: 'integrations_2', id: item.id, p }}>
-        <Text type="link" size="medium">
-          <Emoji
-            className={cx('title')}
-            text={
-              item.verbal_name?.length > MAX_LINE_LENGTH
-                ? item.verbal_name?.substring(0, MAX_LINE_LENGTH) + '...'
-                : item.verbal_name
-            }
-          />
-        </Text>
-      </PluginLink>
-    );
-  };
-
-  renderDatasource(item: AlertReceiveChannel, alertReceiveChannelStore) {
-    const alertReceiveChannel = alertReceiveChannelStore.items[item.id];
-    const integration = alertReceiveChannelStore.getIntegration(alertReceiveChannel);
-    return (
-      <HorizontalGroup spacing="xs">
-        <IntegrationLogo scale={0.08} integration={integration} />
-        <Text type="secondary">{integration?.display_name}</Text>
-      </HorizontalGroup>
-    );
-  }
-
-  renderIntegrationStatus(item: AlertReceiveChannel, alertReceiveChannelStore) {
-    const alertReceiveChannelCounter = alertReceiveChannelStore.counters[item.id];
-    let routesCounter = item.routes_count;
-    let connectedEscalationsChainsCount = item.connected_escalations_chains_count;
-
-    return (
-      <HorizontalGroup spacing="xs">
-        {alertReceiveChannelCounter && (
-          <PluginLink query={{ page: 'incidents', integration: item.id }} className={cx('alertsInfoText')}>
-            <TooltipBadge
-              borderType="primary"
-              text={alertReceiveChannelCounter?.alerts_count + '/' + alertReceiveChannelCounter?.alert_groups_count}
-              tooltipTitle=""
-              tooltipContent={
-                alertReceiveChannelCounter?.alerts_count +
-                ' alert' +
-                (alertReceiveChannelCounter?.alerts_count === 1 ? '' : 's') +
-                ' in ' +
-                alertReceiveChannelCounter?.alert_groups_count +
-                ' alert group' +
-                (alertReceiveChannelCounter?.alert_groups_count === 1 ? '' : 's')
-              }
-            />
-          </PluginLink>
-        )}
-        {routesCounter && (
-          <TooltipBadge
-            borderType="success"
-            icon="link"
-            text={`${connectedEscalationsChainsCount}/${routesCounter}`}
-            tooltipContent={undefined}
-            tooltipTitle={
-              connectedEscalationsChainsCount +
-              ' connected escalation chain' +
-              (connectedEscalationsChainsCount === 1 ? '' : 's') +
-              ' in ' +
-              routesCounter +
-              ' route' +
-              (routesCounter === 1 ? '' : 's')
-            }
-          />
-        )}
-      </HorizontalGroup>
-    );
-  }
-
-  renderHeartbeat(item: AlertReceiveChannel, alertReceiveChannelStore, heartbeatStore) {
-    const alertReceiveChannel = alertReceiveChannelStore.items[item.id];
-
-    const heartbeatId = alertReceiveChannelStore.alertReceiveChannelToHeartbeat[alertReceiveChannel.id];
-    const heartbeat = heartbeatStore.items[heartbeatId];
-
-    const heartbeatStatus = Boolean(heartbeat?.status);
-    return (
-      <div>
-        {alertReceiveChannel.is_available_for_integration_heartbeat && heartbeat?.last_heartbeat_time_verbal && (
-          <TooltipBadge
-            text={undefined}
-            className={cx('heartbeat-badge')}
-            borderType={heartbeatStatus ? 'success' : 'danger'}
-            customIcon={heartbeatStatus ? <HeartIcon /> : <HeartRedIcon />}
-            tooltipTitle={`Last heartbeat: ${heartbeat?.last_heartbeat_time_verbal}`}
-            tooltipContent={undefined}
-          />
-        )}
-      </div>
-    );
-  }
-
-  renderMaintenance(item: AlertReceiveChannel) {
-    const maintenanceMode = item.maintenance_mode;
-
-    if (maintenanceMode === MaintenanceMode.Debug || maintenanceMode === MaintenanceMode.Maintenance) {
-      return (
-        <div className={cx('u-flex')}>
-          <TooltipBadge
-            borderType="primary"
-            icon="pause"
-            text={IntegrationHelper.getMaintenanceText(item.maintenance_till)}
-            tooltipTitle={IntegrationHelper.getMaintenanceText(item.maintenance_till, maintenanceMode)}
-            tooltipContent={undefined}
-          />
-        </div>
-      );
-    }
-
-    return null;
-  }
-
-  renderTeam(item: AlertReceiveChannel, teams: any) {
-    return <TeamName team={teams[item.team]} />;
-  }
-
-  renderButtons = (item: AlertReceiveChannel) => {
-    return (
-      <WithContextMenu
-        renderMenuItems={() => (
-          <div className={cx('integrations-actionsList')}>
-            <WithPermissionControlTooltip key="edit" userAction={UserActions.IntegrationsWrite}>
-              <div className={cx('integrations-actionItem')} onClick={() => this.onIntegrationEditClick(item.id)}>
-                <Text type="primary">Integration settings</Text>
-              </div>
-            </WithPermissionControlTooltip>
-
-            <CopyToClipboard text={item.id} onCopy={() => openNotification('Integration ID is copied')}>
-              <div className={cx('integrations-actionItem')}>
-                <HorizontalGroup spacing={'xs'}>
-                  <Icon name="copy" />
-
-                  <Text type="primary">UID: {item.id}</Text>
-                </HorizontalGroup>
-              </div>
-            </CopyToClipboard>
-
-            <div className="thin-line-break" />
-
-            <WithPermissionControlTooltip key="delete" userAction={UserActions.IntegrationsWrite}>
-              <div className={cx('integrations-actionItem')}>
-                <div
-                  onClick={() => {
-                    this.setState({
-                      confirmationModal: {
-                        isOpen: true,
-                        confirmText: 'Delete',
-                        dismissText: 'Cancel',
-                        onConfirm: () => this.handleDeleteAlertReceiveChannel(item.id),
-                        title: 'Delete integration',
-                        body: (
-                          <Text type="primary">
-                            Are you sure you want to delete <Emoji text={item.verbal_name} /> integration?
-                          </Text>
-                        ),
-                      },
-                    });
-                  }}
-                  style={{ width: '100%' }}
-                >
-                  <Text type="danger">
-                    <HorizontalGroup spacing={'xs'}>
-                      <Icon name="trash-alt" />
-                      <span>Delete Integration</span>
-                    </HorizontalGroup>
-                  </Text>
-                </div>
-              </div>
-            </WithPermissionControlTooltip>
-          </div>
-        )}
-      >
-        {({ openMenu }) => (
-          <HamburgerMenu openMenu={openMenu} listBorder={ACTIONS_LIST_BORDER} listWidth={ACTIONS_LIST_WIDTH} />
-        )}
-      </WithContextMenu>
-    );
-  };
-
-  onIntegrationEditClick = (id: AlertReceiveChannel['id']) => {
-    this.setState({ alertReceiveChannelId: id });
-  };
-
-  handleDeleteAlertReceiveChannel = (alertReceiveChannelId: AlertReceiveChannel['id']) => {
-    const { store } = this.props;
-
-    const { alertReceiveChannelStore } = store;
-
-    alertReceiveChannelStore.deleteAlertReceiveChannel(alertReceiveChannelId).then(this.applyFilters);
-    this.setState({ confirmationModal: undefined });
-  };
-
-  handleIntegrationsFiltersChange = (integrationsFilters: Filters) => {
-    this.setState({ integrationsFilters }, () => this.debouncedUpdateIntegrations());
-  };
-
-  applyFilters = () => {
-    const { store } = this.props;
-    const { alertReceiveChannelStore } = store;
-    const { integrationsFilters } = this.state;
-
-    return alertReceiveChannelStore.updatePaginatedItems(integrationsFilters).then(() => {
-      this.setState({ page: 1 });
-      LocationHelper.update({ p: 1 }, 'partial');
-    });
-  };
-
-  debouncedUpdateIntegrations = debounce(this.applyFilters, FILTERS_DEBOUNCE_MS);
-}
-
-export default withRouter(withMobXProviderContext(Integrations));
diff --git a/grafana-plugin/src/pages/routes.tsx b/grafana-plugin/src/pages/routes.tsx
index 27e00e5551..7969957794 100644
--- a/grafana-plugin/src/pages/routes.tsx
+++ b/grafana-plugin/src/pages/routes.tsx
@@ -1,7 +1,6 @@
 import EscalationsChainsPage from 'pages/escalation-chains/EscalationChains';
 import IncidentPage from 'pages/incident/Incident';
 import IncidentsPage from 'pages/incidents/Incidents';
-import IntegrationsPage from 'pages/integrations/Integrations';
 import MaintenancePage from 'pages/maintenance/Maintenance';
 import OrganizationLogPage from 'pages/organization-logs/OrganizationLog';
 import OutgoingWebhooks from 'pages/outgoing_webhooks/OutgoingWebhooks';
@@ -14,7 +13,7 @@ import CloudPage from 'pages/settings/tabs/Cloud/CloudPage';
 import LiveSettingsPage from 'pages/settings/tabs/LiveSettings/LiveSettingsPage';
 import UsersPage from 'pages/users/Users';
 
-import IntegrationsPage2 from './integrations_2/Integrations2';
+import IntegrationsPage2 from './integrations/Integrations';
 
 export interface NavRoute {
   id: string;
@@ -34,13 +33,9 @@ export const routes: { [id: string]: NavRoute } = [
     component: UsersPage,
     id: 'users',
   },
-  {
-    component: IntegrationsPage,
-    id: 'integrations',
-  },
   {
     component: IntegrationsPage2,
-    id: 'integrations_2',
+    id: 'integrations',
   },
   {
     component: EscalationsChainsPage,
diff --git a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
index 72572c1f1e..0980b4fc00 100644
--- a/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
+++ b/grafana-plugin/src/plugin/GrafanaPluginRootPage.tsx
@@ -24,9 +24,8 @@ import NoMatch from 'pages/NoMatch';
 import EscalationChains from 'pages/escalation-chains/EscalationChains';
 import Incident from 'pages/incident/Incident';
 import Incidents from 'pages/incidents/Incidents';
-import Integration2 from 'pages/integration_2/Integration2';
+import Integration from 'pages/integration/Integration';
 import Integrations from 'pages/integrations/Integrations';
-import Integrations2 from 'pages/integrations_2/Integrations2';
 import Maintenance from 'pages/maintenance/Maintenance';
 import OrganizationLogPage from 'pages/organization-logs/OrganizationLog';
 import OutgoingWebhooks from 'pages/outgoing_webhooks/OutgoingWebhooks';
@@ -153,11 +152,8 @@ export const Root = observer((props: AppRootProps) => {
             <Route path={getRoutesForPage('integrations')} exact>
               <Integrations query={query} />
             </Route>
-            <Route path={getRoutesForPage('integrations_2')} exact>
-              <Integrations2 query={query} />
-            </Route>
-            <Route path={getRoutesForPage('integration_2')} exact>
-              <Integration2 query={query} />
+            <Route path={getRoutesForPage('integration')} exact>
+              <Integration query={query} />
             </Route>
             <Route path={getRoutesForPage('escalations')} exact>
               <EscalationChains query={query} />