diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
index 3860831169e09adb63e32fb265ac0159482ba041..38b861a430a8f6f36679aceca4f10407f390ab95 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -36,9 +36,6 @@ export const i18n = {
   },
 };
 
-const bodyTrClass =
-  'gl-border-1 gl-border-t-solid gl-border-b-solid gl-border-gray-100 gl-hover-cursor-pointer gl-hover-bg-blue-50 gl-hover-border-blue-200';
-
 export default {
   i18n,
   typeSet,
@@ -85,20 +82,23 @@ export default {
     {
       key: 'active',
       label: __('Status'),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'name',
       label: s__('AlertsIntegrations|Integration Name'),
+      tdClass: 'gl-vertical-align-middle!',
     },
     {
       key: 'type',
       label: __('Type'),
+      tdClass: 'gl-vertical-align-middle!',
       formatter: (value) => (value === typeSet.prometheus ? capitalize(value) : value),
     },
     {
       key: 'actions',
-      thClass: `gl-text-center`,
-      tdClass: `gl-text-center`,
+      thClass: 'gl-text-right',
+      tdClass: 'gl-text-right gl-vertical-align-middle!',
       label: __('Actions'),
     },
   ],
@@ -127,12 +127,6 @@ export default {
     this.observer.observe(this.$el);
   },
   methods: {
-    tbodyTrClass(item) {
-      return {
-        [bodyTrClass]: this.integrations?.length,
-        'gl-bg-blue-50': (item !== null && item.id) === this.currentIntegration?.id,
-      };
-    },
     trackPageViews() {
       const { category, action } = trackAlertIntegrationsViewsOptions;
       Tracking.event(category, action);
@@ -160,7 +154,6 @@ export default {
       :fields="$options.fields"
       :busy="loading"
       stacked="md"
-      :tbody-tr-class="tbodyTrClass"
       show-empty
     >
       <template #cell(active)="{ item }">
@@ -187,7 +180,7 @@ export default {
       </template>
 
       <template #cell(actions)="{ item }">
-        <gl-button-group class="gl-ml-3">
+        <gl-button-group class="gl-ml-3 gl-mt-n2 gl-mb-n2">
           <gl-button
             icon="settings"
             :aria-label="$options.i18n.editIntegration"
@@ -204,17 +197,14 @@ export default {
       </template>
 
       <template #table-busy>
-        <gl-loading-icon size="lg" color="dark" class="mt-3" />
+        <gl-loading-icon size="sm" />
       </template>
 
       <template #empty>
-        <div
-          class="gl-border-t-solid gl-border-b-solid gl-border-1 gl-border gl-border-gray-100 mt-n3 gl-px-5"
-        >
-          <p class="gl-text-gray-400 gl-py-3 gl-my-3">{{ $options.i18n.emptyState }}</p>
-        </div>
+        <p class="gl-new-card-empty gl-text-center gl-mb-0">{{ $options.i18n.emptyState }}</p>
       </template>
     </gl-table>
+
     <gl-modal
       modal-id="deleteIntegration"
       :title="$options.i18n.deleteIntegration"
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
index f831208d9f84f90d4f88b0851f2400224406cf81..56740e436ca9e535261d1c38867e55499657a91c 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_form.vue
@@ -387,306 +387,309 @@ export default {
 </script>
 
 <template>
-  <gl-form class="gl-mt-6" @submit.prevent="submit" @reset.prevent="reset">
-    <gl-tabs v-model="activeTabIndex">
-      <gl-tab :title="$options.i18n.integrationTabs.configureDetails" class="gl-mt-3">
-        <gl-form-group
-          v-if="isCreating"
-          id="integration-type"
-          :label="
-            getLabelWithStepNumber(
-              $options.integrationSteps.selectType,
-              $options.i18n.integrationFormSteps.selectType.label,
-            )
-          "
-          label-for="integration-type"
-        >
-          <gl-form-select
-            v-model="integrationForm.type"
-            :disabled="isSelectDisabled"
-            class="gl-max-w-full"
-            data-qa-selector="integration_type_dropdown"
-            :options="integrationTypesOptions"
-          />
-
-          <alert-settings-form-help-block
-            v-if="!canAddIntegration"
-            disabled="true"
-            class="gl-display-inline-block gl-my-4"
-            :message="$options.i18n.integrationFormSteps.selectType.enterprise"
-            :link="pricingLink"
-            data-testid="multi-integrations-not-supported"
-          />
-        </gl-form-group>
-        <div class="gl-mt-3">
+  <div class="gl-new-card-add-form gl-py-0 gl-m-3">
+    <gl-form @submit.prevent="submit" @reset.prevent="reset">
+      <gl-tabs v-model="activeTabIndex">
+        <gl-tab :title="$options.i18n.integrationTabs.configureDetails" class="gl-mt-3">
           <gl-form-group
-            v-if="isHttp"
+            v-if="isCreating"
+            id="integration-type"
             :label="
               getLabelWithStepNumber(
-                $options.integrationSteps.nameIntegration,
-                $options.i18n.integrationFormSteps.nameIntegration.label,
+                $options.integrationSteps.selectType,
+                $options.i18n.integrationFormSteps.selectType.label,
               )
             "
-            label-for="name-integration"
-            :invalid-feedback="$options.i18n.integrationFormSteps.nameIntegration.error"
-            :state="validationState.name"
+            label-for="integration-type"
           >
-            <gl-form-input
-              id="name-integration"
-              ref="integrationName"
-              v-model="integrationForm.name"
-              type="text"
-              :placeholder="$options.i18n.integrationFormSteps.nameIntegration.placeholder"
-              data-qa-selector="integration_name_field"
-              @input="validateName"
+            <gl-form-select
+              v-model="integrationForm.type"
+              :disabled="isSelectDisabled"
+              class="gl-max-w-full"
+              data-qa-selector="integration_type_dropdown"
+              :options="integrationTypesOptions"
+              autofocus
             />
-          </gl-form-group>
 
-          <gl-form-group
-            v-if="!isNone"
-            :label="
-              getLabelWithStepNumber(
-                isHttp
-                  ? $options.integrationSteps.enableHttpIntegration
-                  : $options.integrationSteps.enablePrometheusIntegration,
-                $options.i18n.integrationFormSteps.enableIntegration.label,
-              )
-            "
-          >
-            <span>{{ $options.i18n.integrationFormSteps.enableIntegration.help }}</span>
-
-            <gl-toggle
-              id="enable-integration"
-              v-model="integrationForm.active"
-              :is-loading="loading"
-              :label="$options.i18n.integrationFormSteps.nameIntegration.activeToggle"
-              data-qa-selector="active_toggle_container"
-              class="gl-mt-4 gl-font-weight-normal"
+            <alert-settings-form-help-block
+              v-if="!canAddIntegration"
+              disabled="true"
+              class="gl-display-inline-block gl-my-4"
+              :message="$options.i18n.integrationFormSteps.selectType.enterprise"
+              :link="pricingLink"
+              data-testid="multi-integrations-not-supported"
             />
           </gl-form-group>
-          <template v-if="showMappingBuilder">
+          <div class="gl-mt-3">
             <gl-form-group
-              data-testid="sample-payload-section"
+              v-if="isHttp"
               :label="
                 getLabelWithStepNumber(
-                  $options.integrationSteps.customizeMapping,
-                  $options.i18n.integrationFormSteps.mapFields.label,
+                  $options.integrationSteps.nameIntegration,
+                  $options.i18n.integrationFormSteps.nameIntegration.label,
                 )
               "
-              label-for="sample-payload"
-              class="gl-mb-0!"
-              :invalid-feedback="samplePayload.error"
+              label-for="name-integration"
+              :invalid-feedback="$options.i18n.integrationFormSteps.nameIntegration.error"
+              :state="validationState.name"
             >
-              <span>{{ $options.i18n.integrationFormSteps.mapFields.help }}</span>
-
-              <gl-form-textarea
-                id="sample-payload"
-                v-model="samplePayload.json"
-                :disabled="canEditPayload"
-                :state="isSampePayloadValid"
-                :placeholder="$options.i18n.integrationFormSteps.mapFields.placeholder"
-                class="gl-my-3"
-                :debounce="$options.JSON_VALIDATE_DELAY"
-                rows="6"
-                max-rows="10"
-                @input="validateJson"
+              <gl-form-input
+                id="name-integration"
+                ref="integrationName"
+                v-model="integrationForm.name"
+                type="text"
+                :placeholder="$options.i18n.integrationFormSteps.nameIntegration.placeholder"
+                data-qa-selector="integration_name_field"
+                @input="validateName"
               />
             </gl-form-group>
 
+            <gl-form-group
+              v-if="!isNone"
+              :label="
+                getLabelWithStepNumber(
+                  isHttp
+                    ? $options.integrationSteps.enableHttpIntegration
+                    : $options.integrationSteps.enablePrometheusIntegration,
+                  $options.i18n.integrationFormSteps.enableIntegration.label,
+                )
+              "
+            >
+              <span>{{ $options.i18n.integrationFormSteps.enableIntegration.help }}</span>
+
+              <gl-toggle
+                id="enable-integration"
+                v-model="integrationForm.active"
+                :is-loading="loading"
+                :label="$options.i18n.integrationFormSteps.nameIntegration.activeToggle"
+                data-qa-selector="active_toggle_container"
+                class="gl-mt-4 gl-font-weight-normal"
+              />
+            </gl-form-group>
+            <template v-if="showMappingBuilder">
+              <gl-form-group
+                data-testid="sample-payload-section"
+                :label="
+                  getLabelWithStepNumber(
+                    $options.integrationSteps.customizeMapping,
+                    $options.i18n.integrationFormSteps.mapFields.label,
+                  )
+                "
+                label-for="sample-payload"
+                class="gl-mb-0!"
+                :invalid-feedback="samplePayload.error"
+              >
+                <span>{{ $options.i18n.integrationFormSteps.mapFields.help }}</span>
+
+                <gl-form-textarea
+                  id="sample-payload"
+                  v-model="samplePayload.json"
+                  :disabled="canEditPayload"
+                  :state="isSampePayloadValid"
+                  :placeholder="$options.i18n.integrationFormSteps.mapFields.placeholder"
+                  class="gl-my-3"
+                  :debounce="$options.JSON_VALIDATE_DELAY"
+                  rows="6"
+                  max-rows="10"
+                  @input="validateJson"
+                />
+              </gl-form-group>
+
+              <gl-button
+                v-if="canEditPayload"
+                v-gl-modal.resetPayloadModal
+                data-testid="payload-action-btn"
+                :disabled="!integrationForm.active"
+                class="gl-mt-3"
+              >
+                {{ $options.i18n.integrationFormSteps.mapFields.editPayload }}
+              </gl-button>
+
+              <gl-button
+                v-else
+                data-testid="payload-action-btn"
+                :class="{ 'gl-mt-3': samplePayload.error }"
+                :disabled="!canParseSamplePayload"
+                :loading="samplePayload.loading"
+                @click="parseSamplePayload"
+              >
+                {{ $options.i18n.integrationFormSteps.mapFields.parsePayload }}
+              </gl-button>
+              <gl-modal
+                modal-id="resetPayloadModal"
+                :title="$options.i18n.integrationFormSteps.mapFields.resetHeader"
+                :ok-title="$options.i18n.integrationFormSteps.mapFields.resetOk"
+                ok-variant="danger"
+                @ok="resetPayloadAndMappingConfirmed = true"
+              >
+                {{ $options.i18n.integrationFormSteps.mapFields.resetBody }}
+              </gl-modal>
+
+              <div class="gl-mt-5">
+                <span>{{ $options.i18n.integrationFormSteps.mapFields.mapIntro }}</span>
+                <mapping-builder
+                  :parsed-payload="parsedPayload"
+                  :saved-mapping="mapping"
+                  :alert-fields="alertFields"
+                  @onMappingUpdate="updateMapping"
+                />
+              </div>
+            </template>
+          </div>
+          <div class="gl-display-flex gl-justify-content-start gl-py-3">
             <gl-button
-              v-if="canEditPayload"
-              v-gl-modal.resetPayloadModal
-              data-testid="payload-action-btn"
-              :disabled="!integrationForm.active"
-              class="gl-mt-3"
+              :disabled="!canSubmitForm"
+              variant="confirm"
+              class="js-no-auto-disable"
+              data-testid="integration-form-submit"
+              @click="submit(false)"
             >
-              {{ $options.i18n.integrationFormSteps.mapFields.editPayload }}
+              {{ $options.i18n.saveIntegration }}
             </gl-button>
 
             <gl-button
-              v-else
-              data-testid="payload-action-btn"
-              :class="{ 'gl-mt-3': samplePayload.error }"
-              :disabled="!canParseSamplePayload"
-              :loading="samplePayload.loading"
-              @click="parseSamplePayload"
+              :disabled="!canSubmitForm"
+              variant="confirm"
+              category="secondary"
+              class="gl-ml-3 js-no-auto-disable"
+              data-qa-selector="save_and_create_alert_button"
+              @click="submit(true)"
             >
-              {{ $options.i18n.integrationFormSteps.mapFields.parsePayload }}
+              {{ $options.i18n.saveAndTestIntegration }}
             </gl-button>
-            <gl-modal
-              modal-id="resetPayloadModal"
-              :title="$options.i18n.integrationFormSteps.mapFields.resetHeader"
-              :ok-title="$options.i18n.integrationFormSteps.mapFields.resetOk"
-              ok-variant="danger"
-              @ok="resetPayloadAndMappingConfirmed = true"
-            >
-              {{ $options.i18n.integrationFormSteps.mapFields.resetBody }}
-            </gl-modal>
-
-            <div class="gl-mt-5">
-              <span>{{ $options.i18n.integrationFormSteps.mapFields.mapIntro }}</span>
-              <mapping-builder
-                :parsed-payload="parsedPayload"
-                :saved-mapping="mapping"
-                :alert-fields="alertFields"
-                @onMappingUpdate="updateMapping"
-              />
-            </div>
-          </template>
-        </div>
-        <div class="gl-display-flex gl-justify-content-start gl-py-3">
-          <gl-button
-            :disabled="!canSubmitForm"
-            variant="confirm"
-            class="js-no-auto-disable"
-            data-testid="integration-form-submit"
-            @click="submit(false)"
-          >
-            {{ $options.i18n.saveIntegration }}
-          </gl-button>
-
-          <gl-button
-            :disabled="!canSubmitForm"
-            variant="confirm"
-            category="secondary"
-            class="gl-ml-3 js-no-auto-disable"
-            data-qa-selector="save_and_create_alert_button"
-            @click="submit(true)"
-          >
-            {{ $options.i18n.saveAndTestIntegration }}
-          </gl-button>
-
-          <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">{{
-            $options.i18n.cancelAndClose
-          }}</gl-button>
-        </div>
-      </gl-tab>
-
-      <gl-tab
-        :title="$options.i18n.integrationTabs.viewCredentials"
-        :disabled="isCreating"
-        class="gl-mt-3"
-      >
-        <alert-settings-form-help-block
-          :message="viewCredentialsHelpMsg"
-          :link="$options.incidentManagementDocsLink"
-        />
-
-        <gl-form-group id="integration-webhook">
-          <div class="gl-my-4">
-            <span class="gl-font-weight-bold">
-              {{ $options.i18n.integrationFormSteps.setupCredentials.webhookUrl }}
-            </span>
-
-            <gl-form-input-group id="url" readonly :value="integrationForm.url">
-              <template #append>
-                <clipboard-button
-                  :text="integrationForm.url || ''"
-                  :title="$options.i18n.copy"
-                  class="gl-m-0!"
-                />
-              </template>
-            </gl-form-input-group>
-          </div>
-
-          <div class="gl-my-4">
-            <span class="gl-font-weight-bold">
-              {{ $options.i18n.integrationFormSteps.setupCredentials.authorizationKey }}
-            </span>
 
-            <gl-form-input-group
-              id="authorization-key"
-              class="gl-mb-3"
-              readonly
-              :value="integrationForm.token"
-            >
-              <template #append>
-                <clipboard-button
-                  :text="integrationForm.token || ''"
-                  :title="$options.i18n.copy"
-                  class="gl-m-0!"
-                />
-              </template>
-            </gl-form-input-group>
+            <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">{{
+              $options.i18n.cancelAndClose
+            }}</gl-button>
           </div>
-        </gl-form-group>
-
-        <div class="gl-display-flex gl-justify-content-start gl-py-3">
-          <gl-button v-gl-modal.authKeyModal variant="danger">
-            {{ $options.i18n.integrationFormSteps.setupCredentials.reset }}
-          </gl-button>
-
-          <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">
-            {{ $options.i18n.cancelAndClose }}
-          </gl-button>
-        </div>
-
-        <gl-modal
-          modal-id="authKeyModal"
-          :title="$options.i18n.integrationFormSteps.setupCredentials.reset"
-          :ok-title="$options.i18n.integrationFormSteps.setupCredentials.reset"
-          ok-variant="danger"
-          @ok="resetAuthKey"
+        </gl-tab>
+
+        <gl-tab
+          :title="$options.i18n.integrationTabs.viewCredentials"
+          :disabled="isCreating"
+          class="gl-mt-3"
         >
-          {{ $options.i18n.integrationFormSteps.restKeyInfo.label }}
-        </gl-modal>
-      </gl-tab>
-
-      <gl-tab
-        :title="$options.i18n.integrationTabs.sendTestAlert"
-        :disabled="isCreating"
-        class="gl-mt-3"
-      >
-        <gl-form-group id="test-integration" :invalid-feedback="testPayload.error">
           <alert-settings-form-help-block
-            :message="$options.i18n.integrationFormSteps.testPayload.help"
-            :link="alertsUsageUrl"
+            :message="viewCredentialsHelpMsg"
+            :link="$options.incidentManagementDocsLink"
           />
 
-          <gl-form-textarea
-            id="test-payload"
-            v-model="testPayload.json"
-            :state="isTestPayloadValid"
-            :placeholder="$options.i18n.integrationFormSteps.testPayload.placeholder"
-            class="gl-my-3"
-            :debounce="$options.JSON_VALIDATE_DELAY"
-            rows="6"
-            max-rows="10"
-            data-qa-selector="test_payload_field"
-            @input="validateJson(false)"
-          />
-        </gl-form-group>
-        <div class="gl-display-flex gl-justify-content-start gl-py-3">
-          <gl-button
-            v-gl-modal="testAlertModal"
-            :disabled="!isTestPayloadValid"
-            :loading="loading"
-            data-testid="send-test-alert"
-            variant="confirm"
-            class="js-no-auto-disable"
-            data-qa-selector="send_test_alert_button"
-            @click="isFormDirty ? null : sendTestAlert()"
+          <gl-form-group id="integration-webhook">
+            <div class="gl-my-4">
+              <span class="gl-font-weight-bold">
+                {{ $options.i18n.integrationFormSteps.setupCredentials.webhookUrl }}
+              </span>
+
+              <gl-form-input-group id="url" readonly :value="integrationForm.url">
+                <template #append>
+                  <clipboard-button
+                    :text="integrationForm.url || ''"
+                    :title="$options.i18n.copy"
+                    class="gl-m-0!"
+                  />
+                </template>
+              </gl-form-input-group>
+            </div>
+
+            <div class="gl-my-4">
+              <span class="gl-font-weight-bold">
+                {{ $options.i18n.integrationFormSteps.setupCredentials.authorizationKey }}
+              </span>
+
+              <gl-form-input-group
+                id="authorization-key"
+                class="gl-mb-3"
+                readonly
+                :value="integrationForm.token"
+              >
+                <template #append>
+                  <clipboard-button
+                    :text="integrationForm.token || ''"
+                    :title="$options.i18n.copy"
+                    class="gl-m-0!"
+                  />
+                </template>
+              </gl-form-input-group>
+            </div>
+          </gl-form-group>
+
+          <div class="gl-display-flex gl-justify-content-start gl-py-3">
+            <gl-button v-gl-modal.authKeyModal variant="danger">
+              {{ $options.i18n.integrationFormSteps.setupCredentials.reset }}
+            </gl-button>
+
+            <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">
+              {{ $options.i18n.cancelAndClose }}
+            </gl-button>
+          </div>
+
+          <gl-modal
+            modal-id="authKeyModal"
+            :title="$options.i18n.integrationFormSteps.setupCredentials.reset"
+            :ok-title="$options.i18n.integrationFormSteps.setupCredentials.reset"
+            ok-variant="danger"
+            @ok="resetAuthKey"
           >
-            {{ $options.i18n.send }}
-          </gl-button>
-
-          <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">
-            {{ $options.i18n.cancelAndClose }}
-          </gl-button>
-        </div>
-
-        <gl-modal
-          :modal-id="$options.testAlertModalId"
-          :title="$options.i18n.integrationFormSteps.testPayload.modalTitle"
-          :action-primary="$options.primaryProps"
-          :action-secondary="$options.secondaryProps"
-          :action-cancel="$options.cancelProps"
-          @primary="saveAndSendTestAlert"
-          @secondary="sendTestAlert"
+            {{ $options.i18n.integrationFormSteps.restKeyInfo.label }}
+          </gl-modal>
+        </gl-tab>
+
+        <gl-tab
+          :title="$options.i18n.integrationTabs.sendTestAlert"
+          :disabled="isCreating"
+          class="gl-mt-3"
         >
-          {{ $options.i18n.integrationFormSteps.testPayload.modalBody }}
-        </gl-modal>
-      </gl-tab>
-    </gl-tabs>
-  </gl-form>
+          <gl-form-group id="test-integration" :invalid-feedback="testPayload.error">
+            <alert-settings-form-help-block
+              :message="$options.i18n.integrationFormSteps.testPayload.help"
+              :link="alertsUsageUrl"
+            />
+
+            <gl-form-textarea
+              id="test-payload"
+              v-model="testPayload.json"
+              :state="isTestPayloadValid"
+              :placeholder="$options.i18n.integrationFormSteps.testPayload.placeholder"
+              class="gl-my-3"
+              :debounce="$options.JSON_VALIDATE_DELAY"
+              rows="6"
+              max-rows="10"
+              data-qa-selector="test_payload_field"
+              @input="validateJson(false)"
+            />
+          </gl-form-group>
+          <div class="gl-display-flex gl-justify-content-start gl-py-3">
+            <gl-button
+              v-gl-modal="testAlertModal"
+              :disabled="!isTestPayloadValid"
+              :loading="loading"
+              data-testid="send-test-alert"
+              variant="confirm"
+              class="js-no-auto-disable"
+              data-qa-selector="send_test_alert_button"
+              @click="isFormDirty ? null : sendTestAlert()"
+            >
+              {{ $options.i18n.send }}
+            </gl-button>
+
+            <gl-button type="reset" class="gl-ml-3 js-no-auto-disable">
+              {{ $options.i18n.cancelAndClose }}
+            </gl-button>
+          </div>
+
+          <gl-modal
+            :modal-id="$options.testAlertModalId"
+            :title="$options.i18n.integrationFormSteps.testPayload.modalTitle"
+            :action-primary="$options.primaryProps"
+            :action-secondary="$options.secondaryProps"
+            :action-cancel="$options.cancelProps"
+            @primary="saveAndSendTestAlert"
+            @secondary="sendTestAlert"
+          >
+            {{ $options.i18n.integrationFormSteps.testPayload.modalBody }}
+          </gl-modal>
+        </gl-tab>
+      </gl-tabs>
+    </gl-form>
+  </div>
 </template>
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index bc9fe9543bd8da0158bc17b8bcee335ba2fdee9f..e4fc37f97604f06b71e6174e4b0df40d5d10d7b4 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlAlert, GlTabs, GlTab } from '@gitlab/ui';
+import { GlAlert, GlButton, GlCard, GlTabs, GlTab, GlIcon } from '@gitlab/ui';
 import createHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/create_http_integration.mutation.graphql';
 import updateHttpIntegrationMutation from 'ee_else_ce/alerts_settings/graphql/mutations/update_http_integration.mutation.graphql';
 import { createAlert, VARIANT_SUCCESS } from '~/alert';
@@ -43,8 +43,10 @@ export default {
     AlertSettingsForm,
     GlAlert,
     GlButton,
+    GlCard,
     GlTabs,
     GlTab,
+    GlIcon,
   },
   inject: {
     projectPath: {
@@ -364,36 +366,55 @@ export default {
         {{ $options.i18n.integrationCreated.successMsg }}
       </gl-alert>
 
-      <integrations-list
-        :integrations="integrations"
-        :loading="loading"
-        @edit-integration="editIntegration"
-        @delete-integration="deleteIntegration"
-      />
-      <gl-button
-        v-if="canAddIntegration && !formVisible"
-        category="secondary"
-        variant="confirm"
-        data-testid="add-integration-btn"
-        data-qa-selector="add_integration_button"
-        class="gl-mt-3"
-        @click="setFormVisibility(true)"
+      <gl-card
+        class="gl-new-card gl-mt-2"
+        header-class="gl-new-card-header"
+        body-class="gl-new-card-body gl-px-0 gl-overflow-hidden"
       >
-        {{ $options.i18n.addNewIntegration }}
-      </gl-button>
-      <alert-settings-form
-        v-if="formVisible"
-        :loading="isUpdating"
-        :can-add-integration="canAddIntegration"
-        :alert-fields="alertFields"
-        :tab-index="tabIndex"
-        @create-new-integration="createNewIntegration"
-        @update-integration="updateIntegration"
-        @reset-token="resetToken"
-        @clear-current-integration="clearCurrentIntegration"
-        @test-alert-payload="testAlertPayload"
-        @save-and-test-alert-payload="saveAndTestAlertPayload"
-      />
+        <template #header>
+          <div class="gl-new-card-title-wrapper">
+            <h5 class="gl-new-card-title">
+              {{ $options.i18n.card.title }}
+              <span class="gl-new-card-count">
+                <gl-icon name="warning" class="gl-mr-2" />
+                {{ integrations.length }}
+              </span>
+            </h5>
+          </div>
+          <div class="gl-new-card-actions">
+            <gl-button
+              v-if="canAddIntegration && !formVisible"
+              size="small"
+              data-testid="add-integration-btn"
+              data-qa-selector="add_integration_button"
+              @click="setFormVisibility(true)"
+            >
+              {{ $options.i18n.addNewIntegration }}
+            </gl-button>
+          </div>
+        </template>
+
+        <alert-settings-form
+          v-if="formVisible"
+          :loading="isUpdating"
+          :can-add-integration="canAddIntegration"
+          :alert-fields="alertFields"
+          :tab-index="tabIndex"
+          @create-new-integration="createNewIntegration"
+          @update-integration="updateIntegration"
+          @reset-token="resetToken"
+          @clear-current-integration="clearCurrentIntegration"
+          @test-alert-payload="testAlertPayload"
+          @save-and-test-alert-payload="saveAndTestAlertPayload"
+        />
+
+        <integrations-list
+          :integrations="integrations"
+          :loading="loading"
+          @edit-integration="editIntegration"
+          @delete-integration="deleteIntegration"
+        />
+      </gl-card>
     </gl-tab>
     <gl-tab :title="$options.i18n.settingsTabs.integrationSettings">
       <alerts-form class="gl-pt-3" />
diff --git a/app/assets/javascripts/alerts_settings/constants.js b/app/assets/javascripts/alerts_settings/constants.js
index 218b09cb1b6ed73003d3fe97d0dfcce4574318ad..a5f18fda542a5de6d20d6a06ef80ee08e794d51c 100644
--- a/app/assets/javascripts/alerts_settings/constants.js
+++ b/app/assets/javascripts/alerts_settings/constants.js
@@ -1,6 +1,9 @@
 import { s__, __ } from '~/locale';
 
 export const i18n = {
+  card: {
+    title: s__('AlertSettings|Active alerts'),
+  },
   integrationTabs: {
     configureDetails: s__('AlertSettings|Configure details'),
     viewCredentials: s__('AlertSettings|View credentials'),
diff --git a/app/assets/stylesheets/page_bundles/incident_management_list.scss b/app/assets/stylesheets/page_bundles/incident_management_list.scss
index 30a75103c303ccfb32adf54f7ec5bc5877f47bc6..312d5c2b10c860e8a6d08271114320c53cbbcfb1 100644
--- a/app/assets/stylesheets/page_bundles/incident_management_list.scss
+++ b/app/assets/stylesheets/page_bundles/incident_management_list.scss
@@ -5,120 +5,6 @@
     background-color: var(--green-50, $green-50);
   }
 
-  // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
-  table {
-    color: var(--gray-500, $gray-500);
-
-    tbody {
-      tr:not(.b-table-busy-slot):not(.b-table-empty-row) {
-        &:hover {
-          @include gl-border-t-double;
-
-          td {
-            @include gl-border-b-initial;
-          }
-        }
-      }
-    }
-
-    tr {
-      &:focus {
-        @include gl-outline-none;
-      }
-
-      td,
-      th {
-        @include gl-py-5;
-        @include gl-outline-none;
-        @include gl-relative;
-      }
-
-      th {
-        @include gl-bg-transparent;
-        @include gl-font-weight-bold;
-        color: var(--gray-400, $gray-400);
-
-
-        &[aria-sort='none']:hover {
-          background-image: url('data:image/svg+xml, %3csvg   xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e   %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071   L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375,   10.6834 4.292875,10.2929 C4.683375,9.90237   5.316575,9.90237 5.707075,10.2929 L6.999975,   11.5858 L6.999975,2 C6.999975,1.44771   7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771   8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395   ,9.90237 11.316555,9.90237 11.707085,10.2929   C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e   %3c/svg%3e');
-        }
-      }
-    }
-
-    @include media-breakpoint-up(md) {
-      tr {
-        &:last-child {
-          td {
-            @include gl-border-0;
-          }
-        }
-      }
-
-      .sortable-cell {
-        padding-left: calc(0.75rem + 0.65em);
-      }
-    }
-  }
-
-  @include media-breakpoint-down(sm) {
-    table {
-      tr {
-        @include gl-border-t-0;
-
-        .table-col {
-          min-height: 68px;
-        }
-
-        &:hover {
-          background-color: var(--white, $white);
-          @include gl-border-none;
-        }
-
-        th,
-        td {
-          @include gl-pt-6;
-        }
-      }
-
-      &.alert-management-table {
-        .table-col {
-          &:last-child {
-            background-color: var(--gray-10, $gray-10);
-
-            &::before {
-              content: none !important;
-            }
-
-            div:not(.dropdown-title) {
-              width: 100% !important;
-              padding: 0 !important;
-            }
-          }
-        }
-      }
-
-      .b-table-empty-row {
-        td {
-          @include gl-border-b-0;
-
-          div {
-            text-align: unset !important;
-          }
-        }
-      }
-
-      .b-table-busy-slot {
-        td {
-          @include gl-border-b-0;
-
-          div {
-            text-align: center !important;
-          }
-        }
-      }
-    }
-  }
-
   .gl-tabs-nav {
     @include gl-border-b-0;
 
@@ -142,12 +28,4 @@
       @include gl-w-full;
     }
   }
-
-  .integration-list {
-    .b-table-empty-row {
-      td {
-        @include gl-px-0;
-      }
-    }
-  }
 }
diff --git a/app/views/projects/settings/operations/_alert_management.html.haml b/app/views/projects/settings/operations/_alert_management.html.haml
index 7433e81c11cde7ba4e5c849d458ea9bba4fb16db..5ba9276c116797657ec327c9c297bc9d236bdd07 100644
--- a/app/views/projects/settings/operations/_alert_management.html.haml
+++ b/app/views/projects/settings/operations/_alert_management.html.haml
@@ -9,7 +9,7 @@
       = _('Alerts')
     = render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle' }) do
       = _('Expand')
-    %p
+    %p.gl-text-secondary.gl-mb-0
       = _('Display alerts from all configured monitoring tools.')
       = link_to _('Learn more.'), help_page_path('operations/incident_management/integrations.md'), target: '_blank', rel: 'noopener noreferrer'
   .settings-content
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 42a0a1e45972f23b9e67d529d989a843afd37686..cfc963fc3d8892018968d86887cbdb92fcee799f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4451,6 +4451,9 @@ msgstr ""
 msgid "AlertSettings|A webhook URL and authorization key is generated for the integration. After you save the integration, both are visible under the “View credentials” tab."
 msgstr ""
 
+msgid "AlertSettings|Active alerts"
+msgstr ""
+
 msgid "AlertSettings|Add new integration"
 msgstr ""
 
diff --git a/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
index 76d0c12e43442e7b514f9d3c16fae55d69dea578..0453bf0b0f8edc9ab77c1a725c8d7ee1736247a4 100644
--- a/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
+++ b/spec/frontend/alerts_settings/components/alerts_integrations_list_spec.js
@@ -47,7 +47,6 @@ describe('AlertIntegrationsList', () => {
   });
 
   const findTableComponent = () => wrapper.findComponent(GlTable);
-  const findTableComponentRows = () => wrapper.findComponent(GlTable).findAll('table tbody tr');
   const finsStatusCell = () => wrapper.findAll('[data-testid="integration-activated-status"]');
 
   it('renders a table', () => {
@@ -63,11 +62,6 @@ describe('AlertIntegrationsList', () => {
     expect(findTableComponent().findAllComponents(GlButton).length).toBe(4);
   });
 
-  it('renders an highlighted row when a current integration is selected to edit', () => {
-    mountComponent({ data: { currentIntegration: { id: '1' } } });
-    expect(findTableComponentRows().at(0).classes()).toContain('gl-bg-blue-50');
-  });
-
   describe('integration status', () => {
     it('enabled', () => {
       const cell = finsStatusCell().at(0);