diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a5a3c15..88b44a4b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Remove explicit uWSGI and Django request size limits by @vadimkerr ([#3878](https://github.com/grafana/oncall/pull/3878))
 - Migrate webhooks integration_filter to use a m2m field instead ([#3946](https://github.com/grafana/oncall/pull/3946))
 - Updated Faro package version ([#3970](https://github.com/grafana/oncall/pull/3970))
+- Integration form migration to react-hook-form ([#3979](https://github.com/grafana/oncall/pull/3979))
 
 ### Fixed
 
diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json
index 47ea7e64..5668be8b 100644
--- a/grafana-plugin/package.json
+++ b/grafana-plugin/package.json
@@ -154,6 +154,7 @@
     "react-dom": "18.2.0",
     "react-draggable": "^4.4.5",
     "react-emoji-render": "^1.2.4",
+    "react-hook-form": "^7.50.1",
     "react-modal": "^3.15.1",
     "react-responsive": "^8.1.0",
     "react-router-dom": "5.3.3",
diff --git a/grafana-plugin/src/components/HowTheIntegrationWorks/HowTheIntegrationWorks.tsx b/grafana-plugin/src/components/HowTheIntegrationWorks/HowTheIntegrationWorks.tsx
new file mode 100644
index 00000000..d2f8d5dc
--- /dev/null
+++ b/grafana-plugin/src/components/HowTheIntegrationWorks/HowTheIntegrationWorks.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+import { Collapse } from 'components/Collapse/Collapse';
+import { Text } from 'components/Text/Text';
+import { ApiSchemas } from 'network/oncall-api/api.types';
+
+export const HowTheIntegrationWorks: React.FC<{
+  selectedOption: ApiSchemas['AlertReceiveChannelIntegrationOptions'];
+}> = ({ selectedOption }) => {
+  const styles = useStyles2(getStyles);
+
+  if (!selectedOption) {
+    return null;
+  }
+
+  return (
+    <Collapse
+      headerWithBackground
+      className={styles.collapse}
+      isOpen={false}
+      label={<Text type="link">How the integration works</Text>}
+      contentClassName={styles.collapsableContent}
+    >
+      <Text type="secondary">
+        The integration will generate the following:
+        <ul className={styles.integrationInfoList}>
+          <li className={styles.integrationInfoItem}>Unique URL endpoint for receiving alerts </li>
+          <li className={styles.integrationInfoItem}>
+            Templates to interpret alerts, tailored for {selectedOption.display_name}{' '}
+          </li>
+          <li className={styles.integrationInfoItem}>{selectedOption.display_name} contact point </li>
+          <li className={styles.integrationInfoItem}>{selectedOption.display_name} notification</li>
+        </ul>
+        What you'll need to do next:
+        <ul className={styles.integrationInfoList}>
+          <li className={styles.integrationInfoItem}>
+            Finish connecting Monitoring system using Unique URL that will be provided on the next step{' '}
+          </li>
+          <li className={styles.integrationInfoItem}>
+            Set up routes that are based on alert content, such as severity, region, and service{' '}
+          </li>
+          <li className={styles.integrationInfoItem}>Connect escalation chains to the routes</li>
+          <li className={styles.integrationInfoItem}>
+            Review templates and personalize according to your requirements
+          </li>
+        </ul>
+      </Text>
+    </Collapse>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    collapse: css({
+      width: '100%',
+      marginBottom: '24px',
+      ' svg': {
+        color: theme.colors.primary.text,
+      },
+    }),
+    integrationInfoList: css({
+      listStylePosition: 'inside',
+      margin: '16px 0',
+    }),
+    integrationInfoItem: css({
+      marginLeft: '16px',
+    }),
+    collapsableContent: css({
+      width: '100%',
+      backgroundColor: theme.colors.background.secondary,
+      fontSize: 'small',
+    }),
+  };
+};
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.helpers.ts b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.helpers.ts
index 5db6b598..20ae6d81 100644
--- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.helpers.ts
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.helpers.ts
@@ -1,10 +1,11 @@
 import { ApiSchemas } from 'network/oncall-api/api.types';
 
-export function prepareForEdit(item: ApiSchemas['AlertReceiveChannel']) {
+export function prepareForEdit(item: ApiSchemas['AlertReceiveChannel']): Partial<ApiSchemas['AlertReceiveChannel']> {
   return {
     verbal_name: item.verbal_name,
     description_short: item.description_short,
     team: item.team,
     labels: item.labels,
+    integration: item.integration,
   };
 }
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss
index 34e3b26a..43a5cf2f 100644
--- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.module.scss
@@ -1,80 +1,7 @@
-.content {
-  margin: 4px 4px 50px 4px;
-  padding-bottom: 24px;
-}
-
-.cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 24px;
-  overflow: auto;
-  scroll-snap-type: y mandatory;
+.form {
   width: 100%;
 }
 
-.cards_centered {
-  justify-content: center;
-  align-items: center;
-}
-
-.card {
-  width: 48%;
-  height: 88px;
-  scroll-snap-align: start;
-  scroll-snap-stop: normal;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  cursor: pointer;
-  position: relative;
-  gap: 20px;
-}
-
-.card_featured {
-  width: 100%;
-  height: 106px;
-}
-
-.title {
-  margin: 10px 0 10px 0;
-  max-width: 500px;
-}
-
-.footer {
-  display: block;
-  margin-top: 10px;
-}
-
-.search-integration {
-  width: 100%;
-  margin-bottom: 24px;
-}
-
-.collapse {
-  width: 100%;
-  margin-bottom: 24px;
-}
-
-.collapse svg {
-  color: var(--primary-text-link) !important;
-}
-
-.collapsable-content {
-  width: 100%;
-  background-color: var(--background-secondary);
-  font-size: small;
-}
-
-.integration-info-list {
-  list-style-position: inside;
-  margin: 16px 0;
-}
-
-.integration-info-item {
-  margin-left: 16px;
-}
-
 .extra-fields {
   padding: 12px;
   margin-bottom: 24px;
@@ -97,6 +24,40 @@
   margin-bottom: -15px;
 }
 
-.labels {
-  margin-bottom: 20px;
+.textarea:hover {
+  // TODO: change this to fetch from emotion instead
+}
+
+.collapse {
+  width: 100%;
+  margin-bottom: 24px;
+}
+
+.collapse svg {
+  color: var(--primary-text-link) !important;
+}
+
+.integration-info-list {
+  list-style-position: inside;
+  margin: 16px 0;
+}
+
+.integration-info-item {
+  margin-left: 16px;
+}
+
+.servicenow-heading {
+  margin-bottom: 16px;
+}
+
+.webhook-test {
+  margin-bottom: 16px;
+}
+
+.webhook-switch {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 24px;
 }
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.styles.ts b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.styles.ts
new file mode 100644
index 00000000..23ae5123
--- /dev/null
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.styles.ts
@@ -0,0 +1,64 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getIntegrationFormStyles = (theme: GrafanaTheme2) => {
+  return {
+    form: css`
+      width: 100%;
+    `,
+
+    extraFields: css`
+      padding: 12px;
+      margin-bottom: 24px;
+      border: var(--border-weak);
+      border-radius: var(--border-radius);
+    `,
+
+    extraFieldsRadio: css`
+      margin-bottom: 12px;
+    `,
+
+    extraFieldsIcon: css`
+      margin-top: -4px;
+    `,
+
+    selectorsContainer: css`
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      margin-bottom: -15px;
+    `,
+
+    collapse: css`
+      width: 100%;
+      margin-bottom: 24px;
+
+      svg {
+        color: ${theme.colors.primary.text} !important;
+      }
+    `,
+
+    serviceNowHeading: css`
+      margin-bottom: 16px;
+    `,
+
+    webhookTest: css`
+      margin-bottom: 16px;
+    `,
+
+    webhookSwitch: css`
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 24px;
+    `,
+
+    labels: css`
+      margin-bottom: 20px;
+    `,
+
+    // TODO: figure out grafana bug on border
+    textarea: css``,
+  };
+};
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx
index a67b73d2..9f1d8b82 100644
--- a/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationForm.tsx
@@ -1,512 +1,632 @@
-import React, { useState, ChangeEvent, useEffect, useReducer, useRef, useMemo } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
 import {
-  Drawer,
-  VerticalGroup,
-  HorizontalGroup,
-  Input,
-  Tag,
-  EmptySearchResult,
   Button,
+  Field,
+  HorizontalGroup,
+  Icon,
+  Input,
+  Label,
   RadioButtonGroup,
   Select,
-  Icon,
-  Field,
+  Switch,
+  TextArea,
+  Tooltip,
+  VerticalGroup,
+  useStyles2,
 } from '@grafana/ui';
-import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
+import { Controller, useForm, useFormContext, FormProvider } from 'react-hook-form';
 import { useHistory } from 'react-router-dom';
 
-import { Collapse } from 'components/Collapse/Collapse';
-import { Block } from 'components/GBlock/Block';
-import { GForm, CustomFieldSectionRendererProps } from 'components/GForm/GForm';
-import { IntegrationLogo } from 'components/IntegrationLogo/IntegrationLogo';
+import { HowTheIntegrationWorks } from 'components/HowTheIntegrationWorks/HowTheIntegrationWorks';
 import { PluginLink } from 'components/PluginLink/PluginLink';
+import { RenderConditionally } from 'components/RenderConditionally/RenderConditionally';
 import { Text } from 'components/Text/Text';
+import { GSelect } from 'containers/GSelect/GSelect';
 import { Labels } from 'containers/Labels/Labels';
 import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip';
 import { AlertReceiveChannelHelper } from 'models/alert_receive_channel/alert_receive_channel.helpers';
+import { GrafanaTeam } from 'models/grafana_team/grafana_team.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
-import { IntegrationHelper } from 'pages/integration/Integration.helper';
+import { IntegrationHelper, getIsBidirectionalIntegration } from 'pages/integration/Integration.helper';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
 import { UserActions } from 'utils/authorization/authorization';
-import { PLUGIN_ROOT } from 'utils/consts';
-import { openErrorNotification } from 'utils/utils';
+import { PLUGIN_ROOT, URL_REGEX, generateAssignToTeamInputDescription } from 'utils/consts';
 
-import { getForm } from './IntegrationForm.config';
 import { prepareForEdit } from './IntegrationForm.helpers';
-import styles from './IntegrationForm.module.scss';
+import { getIntegrationFormStyles } from './IntegrationForm.styles';
 
-const cx = cn.bind(styles);
+enum FormFieldKeys {
+  Name = 'verbal_name',
+  Description = 'description_short',
+  Team = 'team',
+  AlertManager = 'alert_manager',
+  ContactPoint = 'contact_point',
+  IsExisting = 'is_existing',
+  Alerting = 'alerting',
+  Integration = 'integration',
+
+  ServiceNowUrl = 'servicenow_url',
+  AuthUsername = 'auth_username',
+  AuthPassword = 'auth_password',
+  DefaultWebhooks = 'default_webhooks',
+}
+
+interface FormFields {
+  [FormFieldKeys.Name]: string;
+  [FormFieldKeys.Description]: string;
+  [FormFieldKeys.Team]: string;
+  [FormFieldKeys.IsExisting]: boolean;
+  [FormFieldKeys.AlertManager]: string;
+  [FormFieldKeys.ContactPoint]: string;
+  [FormFieldKeys.Alerting]: string;
+  [FormFieldKeys.ServiceNowUrl]: string;
+  [FormFieldKeys.AuthUsername]: string;
+  [FormFieldKeys.AuthPassword]: string;
+  [FormFieldKeys.Integration]: string;
+  [FormFieldKeys.DefaultWebhooks]: boolean;
+}
 
 interface IntegrationFormProps {
   id: ApiSchemas['AlertReceiveChannel']['id'] | 'new';
   isTableView?: boolean;
-  onHide: () => void;
-  onSubmit: () => Promise<void>;
+  selectedIntegration: ApiSchemas['AlertReceiveChannelIntegrationOptions'];
+  onBackClick: () => void;
   navigateToAlertGroupLabels: (id: ApiSchemas['AlertReceiveChannel']['id']) => void;
+  onSubmit: () => Promise<void>;
+  onHide: () => void;
 }
 
-export const IntegrationForm = observer((props: IntegrationFormProps) => {
-  const store = useStore();
-  const history = useHistory();
+const RADIO_OPTIONS = [
+  {
+    label: 'Connect existing Contact point',
+    value: 'existing',
+  },
+  {
+    label: 'Create a new one',
+    value: 'new',
+  },
+];
 
-  const labelsRef = useRef(null);
+export const IntegrationForm = observer(
+  ({
+    id,
+    isTableView,
+    navigateToAlertGroupLabels,
+    selectedIntegration,
+    onSubmit,
+    onHide,
+    onBackClick,
+  }: IntegrationFormProps) => {
+    const store = useStore();
+    const history = useHistory();
+    const styles = useStyles2(getIntegrationFormStyles);
+    const isNew = id === 'new';
+    const { userStore, grafanaTeamStore, alertReceiveChannelStore } = store;
 
-  const { id, onHide, onSubmit, isTableView = true, navigateToAlertGroupLabels } = props;
-  const {
-    alertReceiveChannelStore,
-    userStore: { currentUser: user },
-    grafanaTeamStore,
-  } = store;
-
-  const [filterValue, setFilterValue] = useState('');
-  const [showNewIntegrationForm, setShowNewIntegrationForm] = useState(false);
-  const [selectedOption, setSelectedOption] = useState<ApiSchemas['AlertReceiveChannelIntegrationOptions']>(undefined);
-  const [showIntegrarionsListDrawer, setShowIntegrarionsListDrawer] = useState(id === 'new');
-  const [allContactPoints, setAllContactPoints] = useState([]);
-  const [errors, setErrors] = useState<Record<string, any>>();
-
-  const form = useMemo(() => getForm(grafanaTeamStore), [grafanaTeamStore]);
-
-  useEffect(() => {
-    (async function () {
-      setAllContactPoints(await AlertReceiveChannelHelper.getGrafanaAlertingContactPoints());
-    })();
-  }, []);
-
-  const data =
-    id === 'new'
-      ? { integration: selectedOption?.value, team: user?.current_team, labels: [] }
+    const data = isNew
+      ? { integration: selectedIntegration?.value, team: userStore.currentUser?.current_team, labels: [] }
       : prepareForEdit(alertReceiveChannelStore.items[id]);
 
-  const { alertReceiveChannelOptions } = alertReceiveChannelStore;
+    const { integration } = data;
 
-  const options = alertReceiveChannelOptions
-    ? alertReceiveChannelOptions.filter((option: ApiSchemas['AlertReceiveChannelIntegrationOptions']) => {
-        if (option.value === 'grafana_alerting' && !window.grafanaBootData.settings.unifiedAlertingEnabled) {
-          return false;
-        }
+    const formMethods = useForm<FormFields>({
+      defaultValues: isNew
+        ? {
+            // these are the default values for creating an integration
+            [FormFieldKeys.Integration]: integration,
+            [FormFieldKeys.DefaultWebhooks]: true,
+          }
+        : {
+            // existing values from existing integration (edit-mode)
+            ...data,
+          },
+      mode: 'onChange',
+    });
+    const {
+      control,
+      handleSubmit,
+      formState: { errors },
+    } = formMethods;
 
-        // don't allow creating direct paging integrations
-        if (option.value === 'direct_paging') {
-          return false;
-        }
+    const [
+      {
+        isExistingContactPoint,
+        dataSources,
+        contactPoints,
+        selectedAlertManagerOption,
+        selectedContactPointOption,
+        allContactPoints,
+      },
+      setState,
+    ] = useReducer(
+      (state: GrafanaContactPointState, newState: Partial<GrafanaContactPointState>) => ({
+        ...state,
+        ...newState,
+      }),
+      {
+        isExistingContactPoint: true,
+        selectedAlertManagerOption: undefined,
+        selectedContactPointOption: undefined,
+        dataSources: [],
+        contactPoints: [],
+        allContactPoints: [],
+      }
+    );
 
-        return (
-          option.display_name.toLowerCase().includes(filterValue.toLowerCase()) &&
-          !option.value.toLowerCase().startsWith('legacy_')
-        );
-      })
-    : [];
+    useEffect(() => {
+      (async function () {
+        setState({
+          allContactPoints: await AlertReceiveChannelHelper.getGrafanaAlertingContactPoints(),
+        });
+      })();
+    }, []);
 
-  const extraGFormProps: { customFieldSectionRenderer?: React.FC<CustomFieldSectionRendererProps> } = {};
+    const labelsRef = useRef(null);
 
-  if (selectedOption && IntegrationHelper.isSpecificIntegration(selectedOption.value, 'grafana_alerting')) {
-    extraGFormProps.customFieldSectionRenderer = CustomFieldSectionRenderer;
-  }
+    const [labelsErrors, setLabelErrors] = useState([]);
+    const isServiceNow = getIsBidirectionalIntegration(data as Partial<ApiSchemas['AlertReceiveChannel']>);
+    const isGrafanaAlerting = IntegrationHelper.isSpecificIntegration(integration, 'grafana_alerting');
 
-  return (
-    <>
-      {showIntegrarionsListDrawer && (
-        <Drawer scrollableContent title="New Integration" onClose={onHide} closeOnMaskClick={false} width="640px">
-          <div className={cx('content')}>
-            <VerticalGroup>
-              <Text type="secondary">
-                Integration receives alerts on an unique API URL, interprets them using set of templates tailored for
-                monitoring system and starts escalations.
-              </Text>
+    return (
+      <FormProvider {...formMethods}>
+        <form onSubmit={handleSubmit(onFormSubmit)} className={styles.form}>
+          <Controller
+            name={FormFieldKeys.Name}
+            control={control}
+            rules={{ required: 'Name is required' }}
+            render={({ field }) => (
+              <Field
+                key={'Name'}
+                label={'Integration Name'}
+                invalid={!!errors[FormFieldKeys.Name]}
+                error={errors[FormFieldKeys.Name]?.message}
+              >
+                <Input {...field} placeholder={'Integration Name'} />
+              </Field>
+            )}
+          />
 
-              <div className={cx('search-integration')}>
-                <Input
-                  autoFocus
-                  value={filterValue}
-                  placeholder="Search integrations ..."
-                  onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.currentTarget.value)}
+          <Controller
+            name={FormFieldKeys.Description}
+            control={control}
+            rules={{ required: 'Description is required' }}
+            render={({ field }) => (
+              <Field
+                key={'Description'}
+                label={'Integration Description'}
+                invalid={!!errors[FormFieldKeys.Description]}
+                error={errors[FormFieldKeys.Description]?.message}
+              >
+                <TextArea {...field} className={styles.textarea} placeholder={'Integration Description'} />
+              </Field>
+            )}
+          />
+
+          <Controller
+            name={FormFieldKeys.Team}
+            control={control}
+            render={({ field }) => (
+              <Field
+                key="Team"
+                label={
+                  <Label>
+                    <span>Assign to team</span>&nbsp;
+                    <Tooltip content={generateAssignToTeamInputDescription('Integrations')} placement="right">
+                      <Icon name="info-circle" />
+                    </Tooltip>
+                  </Label>
+                }
+                invalid={!!errors[FormFieldKeys.Team]}
+                error={errors[FormFieldKeys.Team]?.message}
+              >
+                <GSelect<GrafanaTeam>
+                  placeholder="Assign to team"
+                  {...field}
+                  {...{
+                    items: grafanaTeamStore.items,
+                    fetchItemsFn: grafanaTeamStore.updateItems,
+                    fetchItemFn: grafanaTeamStore.fetchItemById,
+                    getSearchResult: grafanaTeamStore.getSearchResult,
+                    displayField: 'name',
+                    valueField: 'id',
+                    showSearch: true,
+                    allowClear: true,
+                  }}
+                  onChange={(value) => {
+                    field.onChange(value);
+                  }}
                 />
-              </div>
+              </Field>
+            )}
+          />
 
-              <IntegrationBlocks options={options} onBlockClick={onBlockClick} />
-            </VerticalGroup>
-          </div>
-        </Drawer>
-      )}
-      {(showNewIntegrationForm || !showIntegrarionsListDrawer) && (
-        <Drawer scrollableContent title={getTitle()} onClose={onHide} closeOnMaskClick={false} width="640px">
-          <div className={cx('content')}>
-            <VerticalGroup>
-              <GForm form={form} data={data} onSubmit={handleSubmit} {...extraGFormProps} />
+          <RenderConditionally shouldRender={isGrafanaAlerting && isNew}>
+            <GrafanaContactPoint
+              radioOptions={RADIO_OPTIONS}
+              isExistingContactPoint={isExistingContactPoint}
+              dataSources={dataSources}
+              contactPoints={contactPoints}
+              selectedAlertManagerOption={selectedAlertManagerOption}
+              selectedContactPointOption={selectedContactPointOption}
+              allContactPoints={allContactPoints}
+              setState={setState}
+            />
+          </RenderConditionally>
 
-              {store.hasFeature(AppFeature.Labels) && (
-                <div className={cx('labels')}>
-                  <Labels
-                    ref={labelsRef}
-                    errors={errors?.labels}
-                    value={data.labels}
-                    description={
-                      <>
-                        Labels{id === 'new' ? ' will be ' : ' '}applied to the integration and inherited by alert
-                        groups.
-                        <br />
-                        You can modify behaviour in{' '}
-                        {id === 'new' ? (
-                          'Alert group labeling'
-                        ) : (
-                          <PluginLink onClick={() => navigateToAlertGroupLabels(id)}>Alert group labeling</PluginLink>
-                        )}{' '}
-                        drawer.
-                      </>
-                    }
-                  />
+          {store.hasFeature(AppFeature.Labels) && (
+            <div className={styles.labels}>
+              <Labels
+                ref={labelsRef}
+                errors={labelsErrors}
+                value={data.labels}
+                description={
+                  <>
+                    Labels{id === 'new' ? ' will be ' : ' '}applied to the integration and inherited by alert groups.
+                    <br />
+                    You can modify behaviour in{' '}
+                    {id === 'new' ? (
+                      'Alert group labeling'
+                    ) : (
+                      <PluginLink onClick={() => navigateToAlertGroupLabels(id)}>Alert group labeling</PluginLink>
+                    )}{' '}
+                    drawer.
+                  </>
+                }
+              />
+            </div>
+          )}
+
+          {isTableView && <HowTheIntegrationWorks selectedOption={selectedIntegration} />}
+
+          <RenderConditionally shouldRender={isServiceNow}>
+            <div className={styles.serviceNowHeading}>
+              <Text type="primary">ServiceNow configuration</Text>
+            </div>
+
+            <Controller
+              name={FormFieldKeys.ServiceNowUrl}
+              control={control}
+              rules={{ required: 'Instance URL is required', validate: validateURL }}
+              render={({ field }) => (
+                <Field
+                  key={'InstanceURL'}
+                  label={'Instance URL'}
+                  invalid={!!errors[FormFieldKeys.ServiceNowUrl]}
+                  error={errors[FormFieldKeys.ServiceNowUrl]?.message}
+                >
+                  <Input {...field} />
+                </Field>
+              )}
+            />
+
+            <Controller
+              name={FormFieldKeys.AuthUsername}
+              control={control}
+              rules={{ required: 'Username is required' }}
+              render={({ field }) => (
+                <Field
+                  key={'AuthUsername'}
+                  label={'Username'}
+                  invalid={!!errors[FormFieldKeys.AuthUsername]}
+                  error={errors[FormFieldKeys.AuthUsername]?.message}
+                >
+                  <Input {...field} />
+                </Field>
+              )}
+            />
+
+            <Controller
+              name={FormFieldKeys.AuthPassword}
+              control={control}
+              rules={{ required: 'Password is required' }}
+              render={({ field }) => (
+                <Field
+                  key={'AuthPassword'}
+                  label={'Password'}
+                  invalid={!!errors[FormFieldKeys.AuthPassword]}
+                  error={errors[FormFieldKeys.AuthPassword]?.message as string}
+                >
+                  <Input {...field} type="password" />
+                </Field>
+              )}
+            />
+
+            <Button className={styles.webhookTest} variant="secondary" onClick={onWebhookTestClick}>
+              Test
+            </Button>
+
+            <Controller
+              name={FormFieldKeys.DefaultWebhooks}
+              control={control}
+              render={({ field }) => (
+                <div className={styles.webhookSwitch}>
+                  <Switch value={field.value} onChange={field.onChange} />
+                  <Text type="primary"> Create default outgoing webhook events</Text>
                 </div>
               )}
+            />
+          </RenderConditionally>
 
-              {isTableView && <HowTheIntegrationWorks selectedOption={selectedOption} />}
+          <div>
+            <HorizontalGroup justify="flex-end">
+              {id === 'new' ? (
+                <Button variant="secondary" onClick={onBackClick}>
+                  Back
+                </Button>
+              ) : (
+                <Button variant="secondary" onClick={onHide}>
+                  Cancel
+                </Button>
+              )}
 
-              <HorizontalGroup justify="flex-end">
-                {id === 'new' ? (
-                  <Button
-                    variant="secondary"
-                    onClick={() => {
-                      setShowNewIntegrationForm(false);
-                      setShowIntegrarionsListDrawer(true);
-                    }}
-                  >
-                    Back
-                  </Button>
-                ) : (
-                  <Button variant="secondary" onClick={onHide}>
-                    Cancel
-                  </Button>
-                )}
-
-                <WithPermissionControlTooltip userAction={UserActions.SchedulesWrite}>
-                  <Button form={form.name} type="submit" data-testid="update-integration-button">
-                    {id === 'new' ? 'Create' : 'Update'} Integration
-                  </Button>
-                </WithPermissionControlTooltip>
-              </HorizontalGroup>
-            </VerticalGroup>
+              <WithPermissionControlTooltip userAction={UserActions.IntegrationsWrite}>
+                <Button type="submit" data-testid="update-integration-button">
+                  {id === 'new' ? 'Create' : 'Update'} Integration
+                </Button>
+              </WithPermissionControlTooltip>
+            </HorizontalGroup>
           </div>
-        </Drawer>
-      )}
-    </>
-  );
+        </form>
+      </FormProvider>
+    );
 
-  async function handleSubmit(data): Promise<void> {
-    const { alert_manager, contact_point, is_existing: isExisting } = data;
+    function validateURL(urlFieldValue: string): string | boolean {
+      const regex = new RegExp(URL_REGEX, 'i');
 
-    const labels = labelsRef.current?.getValue();
-
-    data = { ...data, labels };
-
-    const matchingAlertManager = allContactPoints.find((cp) => cp.uid === alert_manager);
-    const hasContactPointInput = alert_manager && contact_point;
-
-    if (
-      !isExisting &&
-      hasContactPointInput &&
-      matchingAlertManager?.contact_points.find((cp) => cp === contact_point)
-    ) {
-      openErrorNotification('A contact point already exists for this data source');
-      return;
+      return !regex.test(urlFieldValue) ? 'Instance URL is invalid' : true;
     }
 
-    const isCreate = id === 'new';
+    async function onWebhookTestClick(): Promise<void> {}
 
-    try {
-      if (isCreate) {
-        await createNewIntegration();
-      } else {
-        await alertReceiveChannelStore.update({ id, data, skipErrorHandling: true });
-      }
-    } catch (error) {
-      setErrors(error);
-      return;
-    }
+    async function onFormSubmit(formData): Promise<void> {
+      const labels = labelsRef.current?.getValue();
+      const data = { ...formData, labels };
+      const isCreate = id === 'new';
 
-    await onSubmit();
-    onHide();
+      try {
+        if (isCreate) {
+          await createNewIntegration();
+        } else {
+          await alertReceiveChannelStore.update({ id, data, skipErrorHandling: true });
+        }
+      } catch (error) {
+        if (error.labels) {
+          setLabelErrors(error.labels);
+        }
 
-    async function createNewIntegration(): Promise<void | ApiSchemas['AlertReceiveChannel']> {
-      const response = await alertReceiveChannelStore.create({ data, skipErrorHandling: true });
-      const pushHistory = (id) => history.push(`${PLUGIN_ROOT}/integrations/${id}`);
-      if (!response) {
         return;
       }
 
-      if (!IntegrationHelper.isSpecificIntegration(selectedOption.value, 'grafana_alerting')) {
+      await onSubmit();
+      onHide();
+
+      async function createNewIntegration(): Promise<void | ApiSchemas['AlertReceiveChannel']> {
+        const response = await alertReceiveChannelStore.create({ data, skipErrorHandling: true });
+        const pushHistory = (id: ApiSchemas['AlertReceiveChannel']['id']) =>
+          history.push(`${PLUGIN_ROOT}/integrations/${id}`);
+        if (!response) {
+          return;
+        }
+
+        if (!IntegrationHelper.isSpecificIntegration(selectedIntegration.value, 'grafana_alerting')) {
+          pushHistory(response.id);
+        }
+
+        await (data.is_existing
+          ? AlertReceiveChannelHelper.connectContactPoint
+          : AlertReceiveChannelHelper.createContactPoint)(response.id, data.alert_manager, data.contact_point);
+
         pushHistory(response.id);
-        return;
       }
-
-      await (data.is_existing
-        ? AlertReceiveChannelHelper.connectContactPoint
-        : AlertReceiveChannelHelper.createContactPoint)(response.id, data.alert_manager, data.contact_point);
-
-      pushHistory(response.id);
     }
   }
+);
 
-  function onBlockClick(option: ApiSchemas['AlertReceiveChannelIntegrationOptions']) {
-    setSelectedOption(option);
-    setShowNewIntegrationForm(true);
-    setShowIntegrarionsListDrawer(false);
-  }
+interface ContactPoint {
+  name: string;
+  uid: string;
+  contact_points: string[];
+}
 
-  function getTitle(): string {
-    if (!isTableView) {
-      return 'Integration Settings';
-    }
-
-    return id === 'new' ? `New ${selectedOption?.display_name} integration` : `Edit integration`;
-  }
-});
-
-interface CustomFieldSectionRendererState {
+interface GrafanaContactPointState {
   isExistingContactPoint: boolean;
   selectedAlertManagerOption: string;
   selectedContactPointOption: string;
 
   dataSources: Array<{ label: string; value: string }>;
   contactPoints: Array<{ label: string; value: string }>;
-  allContactPoints: Array<{ name: string; uid: string; contact_points: string[] }>;
+  allContactPoints: ContactPoint[];
 }
 
-const CustomFieldSectionRenderer: React.FC<CustomFieldSectionRendererProps> = ({
-  control: _control,
-  formItem: _formItem,
-  errors,
-  register,
-  setValue,
-}) => {
-  const radioOptions = [
-    {
-      label: 'Connect existing Contact point',
-      value: 'existing',
-    },
-    {
-      label: 'Create a new one',
-      value: 'new',
-    },
-  ];
+interface GrafanaContactPointProps {
+  isExistingContactPoint: any;
+  dataSources: any;
+  contactPoints: any;
+  selectedAlertManagerOption: string;
+  selectedContactPointOption: string;
+  allContactPoints: ContactPoint[];
+  radioOptions: Array<{
+    label: string;
+    value: string;
+  }>;
 
-  const [
-    {
-      isExistingContactPoint,
-      dataSources,
-      contactPoints,
-      selectedAlertManagerOption,
-      selectedContactPointOption,
-      allContactPoints,
-    },
+  setState: React.Dispatch<Partial<GrafanaContactPointState>>;
+}
+
+const GrafanaContactPoint = observer(
+  ({
+    allContactPoints,
+    radioOptions,
+    contactPoints,
+    selectedContactPointOption,
+    selectedAlertManagerOption,
+    isExistingContactPoint,
+    dataSources,
     setState,
-  ] = useReducer(
-    (state: CustomFieldSectionRendererState, newState: Partial<CustomFieldSectionRendererState>) => ({
-      ...state,
-      ...newState,
-    }),
-    {
-      isExistingContactPoint: true,
-      selectedAlertManagerOption: undefined,
-      selectedContactPointOption: undefined,
-      dataSources: [],
-      contactPoints: [],
-      allContactPoints: [],
-    }
-  );
+  }: GrafanaContactPointProps) => {
+    const {
+      control,
+      getValues,
+      setValue,
+      formState: { errors },
+    } = useFormContext<FormFields>();
 
-  useEffect(() => {
-    (async function () {
-      const response = await AlertReceiveChannelHelper.getGrafanaAlertingContactPoints();
-      setState({
-        allContactPoints: response,
-        dataSources: response.map((res) => ({ label: res.name, value: res.uid })),
-        contactPoints: [],
-      });
-    })();
+    useEffect(() => {
+      (async function () {
+        const response = await AlertReceiveChannelHelper.getGrafanaAlertingContactPoints();
 
-    setValue('is_existing', true);
-  }, []);
+        setState({
+          allContactPoints: response,
+          dataSources: response.map((res) => ({ label: res.name, value: res.uid })),
+          contactPoints: [],
+        });
+      })();
 
-  return (
-    <div className={cx('extra-fields')}>
-      <VerticalGroup spacing="md">
-        <HorizontalGroup spacing="xs" align="center">
-          <Text type="primary" size="small">
-            Grafana Alerting Contact point
-          </Text>
-          <Icon name="info-circle" />
-        </HorizontalGroup>
+      setValue(FormFieldKeys.IsExisting, true);
+    }, []);
 
-        <div className={cx('extra-fields__radio')}>
-          <RadioButtonGroup
-            options={radioOptions}
-            value={isExistingContactPoint ? 'existing' : 'new'}
-            onChange={(radioValue) => {
-              setState({
-                isExistingContactPoint: radioValue === 'existing',
-                contactPoints: [],
-                selectedAlertManagerOption: null,
-                selectedContactPointOption: null,
-              });
+    const styles = useStyles2(getIntegrationFormStyles);
 
-              setValue('is_existing', radioValue === 'existing');
-              setValue('alert_manager', undefined);
-              setValue('contact_point', undefined);
-            }}
-          />
-        </div>
+    return (
+      <div className={styles.extraFields}>
+        <VerticalGroup spacing="md">
+          <HorizontalGroup spacing="xs" align="center">
+            <Text type="primary" size="small">
+              Grafana Alerting Contact point
+            </Text>
+            <Icon name="info-circle" />
+          </HorizontalGroup>
 
-        <div className={cx('selectors-container')}>
-          <Field invalid={!!errors['alert_manager']} error={'Alert Manager is required'}>
-            <Select
-              {...register('alert_manager', { required: true })}
-              options={dataSources}
-              onChange={onAlertManagerChange}
-              value={selectedAlertManagerOption}
-              placeholder="Select Alert Manager"
+          <div className={styles.extraFieldsRadio}>
+            <Controller
+              name={FormFieldKeys.IsExisting}
+              control={control}
+              render={({ field }) => (
+                <RadioButtonGroup
+                  {...field}
+                  options={radioOptions}
+                  value={isExistingContactPoint ? 'existing' : 'new'}
+                  onChange={(radioValue) => {
+                    setState({
+                      isExistingContactPoint: radioValue === 'existing',
+                      contactPoints: [],
+                      selectedAlertManagerOption: null,
+                      selectedContactPointOption: null,
+                    });
+
+                    setValue(FormFieldKeys.IsExisting, radioValue === 'existing');
+                    setValue(FormFieldKeys.AlertManager, undefined);
+                    setValue(FormFieldKeys.ContactPoint, undefined);
+                  }}
+                />
+              )}
             />
-          </Field>
+          </div>
 
-          <Field invalid={!!errors['contact_point']} error={'Contact Point is required'}>
-            {isExistingContactPoint ? (
-              <Select
-                {...register('contact_point', { required: true })}
-                options={contactPoints}
-                onChange={onContactPointChange}
-                value={selectedContactPointOption}
-                placeholder="Select Contact Point"
-              />
-            ) : (
-              <Input
-                value={selectedContactPointOption}
-                placeholder="Choose Contact Point"
-                onChange={({ target }) => {
-                  const value = (target as HTMLInputElement).value;
-                  setState({ selectedContactPointOption: value });
-                  setValue('contact_point', value);
-                }}
-              />
-            )}
-          </Field>
-        </div>
-      </VerticalGroup>
-    </div>
-  );
+          <div className={styles.selectorsContainer}>
+            <Controller
+              name={FormFieldKeys.AlertManager}
+              control={control}
+              rules={{ required: 'Alert Manager is required' }}
+              render={({ field }) => (
+                <Field
+                  key={'AlertManager'}
+                  invalid={!!errors[FormFieldKeys.AlertManager]}
+                  error={errors[FormFieldKeys.AlertManager]?.message}
+                >
+                  <Select
+                    {...field}
+                    options={dataSources}
+                    onChange={onAlertManagerChange}
+                    value={selectedAlertManagerOption}
+                    placeholder="Select Alert Manager"
+                  />
+                </Field>
+              )}
+            />
 
-  function onAlertManagerChange(option: SelectableValue<string>) {
-    const contactPointsForCurrentOption = allContactPoints
-      .find((opt) => opt.uid === option.value)
-      .contact_points?.map((cp) => ({ value: cp, label: cp }));
+            <Controller
+              name={FormFieldKeys.ContactPoint}
+              control={control}
+              rules={{ required: 'Contact Point is required', validate: contactPointValidator }}
+              render={({ field }) => (
+                <Field
+                  key={FormFieldKeys.ContactPoint}
+                  invalid={!!errors[FormFieldKeys.ContactPoint]}
+                  error={errors[FormFieldKeys.ContactPoint]?.message}
+                >
+                  {isExistingContactPoint ? (
+                    <Select
+                      {...field}
+                      options={contactPoints}
+                      onChange={onContactPointChange}
+                      value={selectedContactPointOption}
+                      placeholder="Select Contact Point"
+                    />
+                  ) : (
+                    <Input
+                      value={selectedContactPointOption}
+                      placeholder="Choose Contact Point"
+                      onChange={({ currentTarget }) => {
+                        const { value } = currentTarget;
+                        setState({ selectedContactPointOption: value });
+                        setValue(FormFieldKeys.ContactPoint, value, { shouldValidate: true });
+                      }}
+                    />
+                  )}
+                </Field>
+              )}
+            />
+          </div>
+        </VerticalGroup>
+      </div>
+    );
 
-    const newState: Partial<CustomFieldSectionRendererState> = {
-      selectedAlertManagerOption: option.value,
-      contactPoints: contactPointsForCurrentOption,
-    };
+    function contactPointValidator(contactPointInputValue: string) {
+      const alertManager = getValues(FormFieldKeys.AlertManager);
+      const isExisting = getValues(FormFieldKeys.IsExisting);
 
-    if (isExistingContactPoint) {
-      newState.selectedContactPointOption = null;
-      setValue('contact_point', undefined);
+      const matchingAlertManager = allContactPoints.find((cp) => cp.uid === alertManager);
+      const hasContactPointInput = alertManager && contactPointInputValue;
+
+      if (
+        !isExisting &&
+        hasContactPointInput &&
+        matchingAlertManager?.contact_points.find((cp) => cp === contactPointInputValue)
+      ) {
+        return 'A contact point already exists for this data source';
+      }
+
+      return true;
     }
 
-    setState(newState);
+    function onAlertManagerChange(option: SelectableValue<string>) {
+      // filter contact points for current alert manager
+      const contactPointsForCurrentOption = allContactPoints
+        .find((opt) => opt.uid === option.value)
+        .contact_points?.map((cp) => ({ value: cp, label: cp }));
 
-    setValue('alert_manager', option.value);
+      const newState: Partial<GrafanaContactPointState> = {
+        selectedAlertManagerOption: option.value,
+        contactPoints: contactPointsForCurrentOption,
+      };
+
+      if (isExistingContactPoint) {
+        newState.selectedContactPointOption = null;
+        setValue(FormFieldKeys.ContactPoint, undefined);
+      }
+
+      setState(newState);
+      setValue(FormFieldKeys.AlertManager, option.value, { shouldValidate: true });
+    }
+
+    function onContactPointChange(option: SelectableValue<string>) {
+      setState({ selectedContactPointOption: option.value });
+      setValue(FormFieldKeys.ContactPoint, option.value, { shouldValidate: true });
+    }
   }
-
-  function onContactPointChange(option: SelectableValue<string>) {
-    setState({ selectedContactPointOption: option.value });
-    setValue('contact_point', option.value);
-  }
-};
-
-const HowTheIntegrationWorks: React.FC<{ selectedOption: ApiSchemas['AlertReceiveChannelIntegrationOptions'] }> = ({
-  selectedOption,
-}) => {
-  if (!selectedOption) {
-    return null;
-  }
-
-  return (
-    <Collapse
-      headerWithBackground
-      className={cx('collapse')}
-      isOpen={false}
-      label={<Text type="link">How the integration works</Text>}
-      contentClassName={cx('collapsable-content')}
-    >
-      <Text type="secondary">
-        The integration will generate the following:
-        <ul className={cx('integration-info-list')}>
-          <li className={cx('integration-info-item')}>Unique URL endpoint for receiving alerts </li>
-          <li className={cx('integration-info-item')}>
-            Templates to interpret alerts, tailored for {selectedOption.display_name}{' '}
-          </li>
-          <li className={cx('integration-info-item')}>{selectedOption.display_name} contact point </li>
-          <li className={cx('integration-info-item')}>{selectedOption.display_name} notification</li>
-        </ul>
-        What you'll need to do next:
-        <ul className={cx('integration-info-list')}>
-          <li className={cx('integration-info-item')}>
-            Finish connecting Monitoring system using Unique URL that will be provided on the next step{' '}
-          </li>
-          <li className={cx('integration-info-item')}>
-            Set up routes that are based on alert content, such as severity, region, and service{' '}
-          </li>
-          <li className={cx('integration-info-item')}>Connect escalation chains to the routes</li>
-          <li className={cx('integration-info-item')}>
-            Review templates and personalize according to your requirements
-          </li>
-        </ul>
-      </Text>
-    </Collapse>
-  );
-};
-
-const IntegrationBlocks: React.FC<{
-  options: Array<ApiSchemas['AlertReceiveChannelIntegrationOptions']>;
-  onBlockClick: (option: ApiSchemas['AlertReceiveChannelIntegrationOptions']) => void;
-}> = ({ options, onBlockClick }) => {
-  return (
-    <div className={cx('cards')} data-testid="create-integration-modal">
-      {options.length ? (
-        options.map((alertReceiveChannelChoice) => {
-          return (
-            <Block
-              bordered
-              hover
-              shadowed
-              onClick={() => onBlockClick(alertReceiveChannelChoice)}
-              key={alertReceiveChannelChoice.value}
-              className={cx('card', { card_featured: alertReceiveChannelChoice.featured })}
-            >
-              <div className={cx('card-bg')}>
-                <IntegrationLogo integration={alertReceiveChannelChoice} scale={0.2} />
-              </div>
-              <div className={cx('title')}>
-                <VerticalGroup spacing={alertReceiveChannelChoice.featured ? 'xs' : 'none'}>
-                  <HorizontalGroup>
-                    <Text strong data-testid="integration-display-name">
-                      {alertReceiveChannelChoice.display_name}
-                    </Text>
-                    {alertReceiveChannelChoice.featured && alertReceiveChannelChoice.featured_tag_name && (
-                      <Tag name={alertReceiveChannelChoice.featured_tag_name} colorIndex={5} />
-                    )}
-                  </HorizontalGroup>
-                  <Text type="secondary" size="small">
-                    {alertReceiveChannelChoice.short_description}
-                  </Text>
-                </VerticalGroup>
-              </div>
-            </Block>
-          );
-        })
-      ) : (
-        <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
-      )}
-    </div>
-  );
-};
+);
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationFormContainer.module.scss b/grafana-plugin/src/containers/IntegrationForm/IntegrationFormContainer.module.scss
new file mode 100644
index 00000000..9a358979
--- /dev/null
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationFormContainer.module.scss
@@ -0,0 +1,74 @@
+.content {
+  margin: 4px 4px 50px 4px;
+  padding-bottom: 24px;
+}
+
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  overflow: auto;
+  scroll-snap-type: y mandatory;
+  width: 100%;
+}
+
+.cards_centered {
+  justify-content: center;
+  align-items: center;
+}
+
+.card {
+  width: 48%;
+  height: 88px;
+  scroll-snap-align: start;
+  scroll-snap-stop: normal;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+  position: relative;
+  gap: 20px;
+}
+
+.card_featured {
+  width: 100%;
+  height: 106px;
+}
+
+.title {
+  margin: 10px 0 10px 0;
+  max-width: 500px;
+}
+
+.footer {
+  display: block;
+  margin-top: 10px;
+}
+
+.search-integration {
+  width: 100%;
+  margin-bottom: 24px;
+}
+
+.extra-fields {
+  padding: 12px;
+  margin-bottom: 24px;
+  border: var(--border-weak);
+  border-radius: var(--border-radius);
+
+  &__radio {
+    margin-bottom: 12px;
+  }
+
+  &__icon {
+    margin-top: -4px;
+  }
+}
+
+.selectors-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: -15px;
+}
diff --git a/grafana-plugin/src/containers/IntegrationForm/IntegrationFormContainer.tsx b/grafana-plugin/src/containers/IntegrationForm/IntegrationFormContainer.tsx
new file mode 100644
index 00000000..8167bf32
--- /dev/null
+++ b/grafana-plugin/src/containers/IntegrationForm/IntegrationFormContainer.tsx
@@ -0,0 +1,164 @@
+import React, { useState, ChangeEvent } from 'react';
+
+import { Drawer, VerticalGroup, HorizontalGroup, Input, Tag, EmptySearchResult } from '@grafana/ui';
+import cn from 'classnames/bind';
+import { observer } from 'mobx-react';
+
+import { Block } from 'components/GBlock/Block';
+import { IntegrationLogo } from 'components/IntegrationLogo/IntegrationLogo';
+import { Text } from 'components/Text/Text';
+import { ApiSchemas } from 'network/oncall-api/api.types';
+import { useStore } from 'state/useStore';
+
+import { IntegrationForm } from './IntegrationForm';
+import styles from './IntegrationFormContainer.module.scss';
+
+const cx = cn.bind(styles);
+
+interface IntegrationFormContainerProps {
+  id: ApiSchemas['AlertReceiveChannel']['id'] | 'new';
+  isTableView?: boolean;
+  onHide: () => void;
+  onSubmit: () => Promise<void>;
+  navigateToAlertGroupLabels: (id: ApiSchemas['AlertReceiveChannel']['id']) => void;
+}
+
+export const IntegrationFormContainer = observer((props: IntegrationFormContainerProps) => {
+  const store = useStore();
+
+  const { id, onHide, onSubmit, isTableView = true, navigateToAlertGroupLabels } = props;
+  const { alertReceiveChannelStore } = store;
+
+  const [filterValue, setFilterValue] = useState('');
+  const [showNewIntegrationForm, setShowNewIntegrationForm] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<ApiSchemas['AlertReceiveChannelIntegrationOptions']>(undefined);
+  const [showIntegrarionsListDrawer, setShowIntegrarionsListDrawer] = useState(id === 'new');
+
+  const { alertReceiveChannelOptions } = alertReceiveChannelStore;
+
+  const options = alertReceiveChannelOptions
+    ? alertReceiveChannelOptions.filter((option: ApiSchemas['AlertReceiveChannelIntegrationOptions']) => {
+        if (option.value === 'grafana_alerting' && !window.grafanaBootData.settings.unifiedAlertingEnabled) {
+          return false;
+        }
+
+        // don't allow creating direct paging integrations
+        if (option.value === 'direct_paging') {
+          return false;
+        }
+
+        return (
+          option.display_name.toLowerCase().includes(filterValue.toLowerCase()) &&
+          !option.value.toLowerCase().startsWith('legacy_')
+        );
+      })
+    : [];
+
+  return (
+    <>
+      {showIntegrarionsListDrawer && (
+        <Drawer scrollableContent title="New Integration" onClose={onHide} closeOnMaskClick={false} width="640px">
+          <div className={cx('content')}>
+            <VerticalGroup>
+              <Text type="secondary">
+                Integration receives alerts on an unique API URL, interprets them using set of templates tailored for
+                monitoring system and starts escalations.
+              </Text>
+
+              <div className={cx('search-integration')}>
+                <Input
+                  autoFocus
+                  value={filterValue}
+                  placeholder="Search integrations ..."
+                  onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterValue(e.currentTarget.value)}
+                />
+              </div>
+
+              <IntegrationBlocks options={options} onBlockClick={onBlockClick} />
+            </VerticalGroup>
+          </div>
+        </Drawer>
+      )}
+      {(showNewIntegrationForm || !showIntegrarionsListDrawer) && (
+        <Drawer scrollableContent title={getTitle()} onClose={onHide} closeOnMaskClick={false} width="640px">
+          <div className={cx('content')}>
+            <VerticalGroup>
+              <IntegrationForm
+                id={id}
+                onBackClick={onBackClick}
+                navigateToAlertGroupLabels={navigateToAlertGroupLabels}
+                selectedIntegration={selectedOption}
+                onSubmit={onSubmit}
+                onHide={onHide}
+              />
+            </VerticalGroup>
+          </div>
+        </Drawer>
+      )}
+    </>
+  );
+
+  function onBackClick(): void {
+    setShowNewIntegrationForm(false);
+    setShowIntegrarionsListDrawer(true);
+  }
+
+  function onBlockClick(option: ApiSchemas['AlertReceiveChannelIntegrationOptions']): void {
+    setSelectedOption(option);
+    setShowNewIntegrationForm(true);
+    setShowIntegrarionsListDrawer(false);
+  }
+
+  function getTitle(): string {
+    if (!isTableView) {
+      return 'Integration Settings';
+    }
+
+    return id === 'new' ? `New ${selectedOption?.display_name} integration` : `Edit integration`;
+  }
+});
+
+const IntegrationBlocks: React.FC<{
+  options: Array<ApiSchemas['AlertReceiveChannelIntegrationOptions']>;
+  onBlockClick: (option: ApiSchemas['AlertReceiveChannelIntegrationOptions']) => void;
+}> = ({ options, onBlockClick }) => {
+  return (
+    <div className={cx('cards')} data-testid="create-integration-modal">
+      {options.length ? (
+        options.map((alertReceiveChannelChoice) => {
+          return (
+            <Block
+              bordered
+              hover
+              shadowed
+              onClick={() => onBlockClick(alertReceiveChannelChoice)}
+              key={alertReceiveChannelChoice.value}
+              className={cx('card', { card_featured: alertReceiveChannelChoice.featured })}
+            >
+              <div className={cx('card-bg')}>
+                <IntegrationLogo integration={alertReceiveChannelChoice} scale={0.2} />
+              </div>
+              <div className={cx('title')}>
+                <VerticalGroup spacing={alertReceiveChannelChoice.featured ? 'xs' : 'none'}>
+                  <HorizontalGroup>
+                    <Text strong data-testid="integration-display-name">
+                      {alertReceiveChannelChoice.display_name}
+                    </Text>
+                    {alertReceiveChannelChoice.featured && alertReceiveChannelChoice.featured_tag_name && (
+                      <Tag name={alertReceiveChannelChoice.featured_tag_name} colorIndex={5} />
+                    )}
+                  </HorizontalGroup>
+                  <Text type="secondary" size="small">
+                    {alertReceiveChannelChoice.short_description}
+                  </Text>
+                </VerticalGroup>
+              </div>
+            </Block>
+          );
+        })
+      ) : (
+        <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>
+      )}
+    </div>
+  );
+};
diff --git a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
index 5b3da1c8..428c10bf 100644
--- a/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
+++ b/grafana-plugin/src/containers/PluginConfigPage/PluginConfigPage.tsx
@@ -218,10 +218,12 @@ export const PluginConfigPage: FC<OnCallPluginConfigPageProps> = ({
     );
     content =
       licenseType === GRAFANA_LICENSE_OSS ? (
-        <HorizontalGroup>
-          {pluginLink}
-          <RemoveConfigButton />
-        </HorizontalGroup>
+        <div>
+          <HorizontalGroup>
+            {pluginLink}
+            <RemoveConfigButton />
+          </HorizontalGroup>
+        </div>
       ) : (
         <VerticalGroup>
           <Label>This is a cloud managed configuration.</Label>
diff --git a/grafana-plugin/src/pages/integration/Integration.helper.ts b/grafana-plugin/src/pages/integration/Integration.helper.ts
index c54cc247..f44e92e9 100644
--- a/grafana-plugin/src/pages/integration/Integration.helper.ts
+++ b/grafana-plugin/src/pages/integration/Integration.helper.ts
@@ -121,5 +121,5 @@ export const IntegrationHelper = {
   },
 };
 
-export const getIsBidirectionalIntegration = ({ integration }: ApiSchemas['AlertReceiveChannel']) =>
+export const getIsBidirectionalIntegration = ({ integration }: Partial<ApiSchemas['AlertReceiveChannel']>) =>
   integration === ('servicenow' as ApiSchemas['AlertReceiveChannel']['integration']); // TODO: add service now in backend schema as valid value and remove casting
diff --git a/grafana-plugin/src/pages/integration/Integration.tsx b/grafana-plugin/src/pages/integration/Integration.tsx
index 65e19d0d..e368b20e 100644
--- a/grafana-plugin/src/pages/integration/Integration.tsx
+++ b/grafana-plugin/src/pages/integration/Integration.tsx
@@ -44,7 +44,7 @@ import { CollapsedIntegrationRouteDisplay } from 'containers/IntegrationContaine
 import { ExpandedIntegrationRouteDisplay } from 'containers/IntegrationContainers/ExpandedIntegrationRouteDisplay/ExpandedIntegrationRouteDisplay';
 import { IntegrationHeartbeatForm } from 'containers/IntegrationContainers/IntegrationHeartbeatForm/IntegrationHeartbeatForm';
 import { IntegrationTemplateList } from 'containers/IntegrationContainers/IntegrationTemplatesList';
-import { IntegrationForm } from 'containers/IntegrationForm/IntegrationForm';
+import { IntegrationFormContainer } from 'containers/IntegrationForm/IntegrationFormContainer';
 import { IntegrationLabelsForm } from 'containers/IntegrationLabelsForm/IntegrationLabelsForm';
 import { IntegrationTemplate } from 'containers/IntegrationTemplate/IntegrationTemplate';
 import { MaintenanceForm } from 'containers/MaintenanceForm/MaintenanceForm';
@@ -863,7 +863,7 @@ const IntegrationActions: React.FC<IntegrationActionsProps> = ({
       )}
 
       {isIntegrationSettingsOpen && (
-        <IntegrationForm
+        <IntegrationFormContainer
           isTableView={false}
           onHide={() => setIsIntegrationSettingsOpen(false)}
           onSubmit={async () => {
diff --git a/grafana-plugin/src/pages/integrations/Integrations.tsx b/grafana-plugin/src/pages/integrations/Integrations.tsx
index a26720b1..88f9aa5e 100644
--- a/grafana-plugin/src/pages/integrations/Integrations.tsx
+++ b/grafana-plugin/src/pages/integrations/Integrations.tsx
@@ -34,7 +34,7 @@ import { Text } from 'components/Text/Text';
 import { TextEllipsisTooltip } from 'components/TextEllipsisTooltip/TextEllipsisTooltip';
 import { TooltipBadge } from 'components/TooltipBadge/TooltipBadge';
 import { WithContextMenu } from 'components/WithContextMenu/WithContextMenu';
-import { IntegrationForm } from 'containers/IntegrationForm/IntegrationForm';
+import { IntegrationFormContainer } from 'containers/IntegrationForm/IntegrationFormContainer';
 import { IntegrationLabelsForm } from 'containers/IntegrationLabelsForm/IntegrationLabelsForm';
 import { RemoteFilters } from 'containers/RemoteFilters/RemoteFilters';
 import { TeamName } from 'containers/TeamName/TeamName';
@@ -289,7 +289,7 @@ class _IntegrationsPage extends React.Component<IntegrationsProps, IntegrationsS
         </div>
 
         {alertReceiveChannelId && (
-          <IntegrationForm
+          <IntegrationFormContainer
             onHide={() => {
               this.setState({ alertReceiveChannelId: undefined });
             }}
diff --git a/grafana-plugin/src/utils/consts.ts b/grafana-plugin/src/utils/consts.ts
index 761db53f..b4fe7caf 100644
--- a/grafana-plugin/src/utils/consts.ts
+++ b/grafana-plugin/src/utils/consts.ts
@@ -76,3 +76,5 @@ export const TEXT_ELLIPSIS_CLASS = 'overflow-child';
 
 export const INCIDENT_HORIZONTAL_SCROLLING_STORAGE = 'isIncidentalTableHorizontalScrolling';
 export const IRM_TAB = 'IRM';
+
+export const URL_REGEX = /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/;
diff --git a/grafana-plugin/yarn.lock b/grafana-plugin/yarn.lock
index d6e30175..624a4393 100644
--- a/grafana-plugin/yarn.lock
+++ b/grafana-plugin/yarn.lock
@@ -10791,6 +10791,11 @@ react-hook-form@7.5.3:
   resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.5.3.tgz#9a624fa14ec153b154891c5ebddae02ec5c2e40f"
   integrity sha512-5T0mfJ4kCPKljd7t3Rgp7lML4Y2+kaZIeMdN6Zo/J7gBQ+WkrDBHOftdOtz4X+7/eqHGak5yL5evNpYdA9abVA==
 
+react-hook-form@^7.50.1:
+  version "7.50.1"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.50.1.tgz#f6aeb17a863327e5a0252de8b35b4fc8990377ed"
+  integrity sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==
+
 react-i18next@^12.0.0:
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-12.0.0.tgz#634015a2c035779c5736ae4c2e5c34c1659753b1"