diff --git a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx
index 20aec6974d395b..3da25cb4cf0d8d 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx
@@ -90,7 +90,7 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
 
   return (
     <EuiPageBody>
-      <EuiPageContent>
+      <EuiPageContent color="transparent">
         <EuiTitle size="m">
           <EuiFlexGroup>
             <EuiFlexItem>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
index 1bbffc850ee185..cad4dabbe8275d 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.test.tsx
@@ -12,8 +12,14 @@ import { mountWithIntl, nextTick } from '@kbn/test/jest';
 import { act } from '@testing-library/react';
 import { AlertDetails } from './alert_details';
 import { Alert, ActionType, AlertTypeModel, AlertType } from '../../../../types';
-import { EuiTitle, EuiBadge, EuiFlexItem, EuiSwitch, EuiButtonEmpty, EuiText } from '@elastic/eui';
-import { ViewInApp } from './view_in_app';
+import {
+  EuiBadge,
+  EuiFlexItem,
+  EuiSwitch,
+  EuiButtonEmpty,
+  EuiText,
+  EuiPageHeaderProps,
+} from '@elastic/eui';
 import {
   ActionGroup,
   AlertExecutionStatusErrorReasons,
@@ -75,13 +81,7 @@ describe('alert_details', () => {
     expect(
       shallow(
         <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
-      ).containsMatchingElement(
-        <EuiTitle size="m">
-          <h1>
-            <span>{alert.name}</span>
-          </h1>
-        </EuiTitle>
-      )
+      ).find('EuiPageHeader')
     ).toBeTruthy();
   });
 
@@ -103,7 +103,7 @@ describe('alert_details', () => {
     expect(
       shallow(
         <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
-      ).containsMatchingElement(<EuiBadge>{alertType.name}</EuiBadge>)
+      ).find(<EuiBadge>{alertType.name}</EuiBadge>)
     ).toBeTruthy();
   });
 
@@ -290,7 +290,7 @@ describe('alert_details', () => {
       expect(
         shallow(
           <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
-        ).containsMatchingElement(<ViewInApp alert={alert} />)
+        ).find('ViewInApp')
       ).toBeTruthy();
     });
 
@@ -309,16 +309,29 @@ describe('alert_details', () => {
         minimumLicenseRequired: 'basic',
         enabledInLicense: true,
       };
-
-      expect(
-        shallow(
-          <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
-        )
-          .find(EuiButtonEmpty)
-          .find('[data-test-subj="openEditAlertFlyoutButton"]')
-          .first()
-          .exists()
-      ).toBeTruthy();
+      const pageHeaderProps = shallow(
+        <AlertDetails alert={alert} alertType={alertType} actionTypes={[]} {...mockAlertApis} />
+      )
+        .find('EuiPageHeader')
+        .props() as EuiPageHeaderProps;
+      const rightSideItems = pageHeaderProps.rightSideItems;
+      expect(!!rightSideItems && rightSideItems[2]!).toMatchInlineSnapshot(`
+      <React.Fragment>
+        <EuiButtonEmpty
+          data-test-subj="openEditAlertFlyoutButton"
+          disabled={false}
+          iconType="pencil"
+          name="edit"
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Edit"
+            id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
+            values={Object {}}
+          />
+        </EuiButtonEmpty>
+      </React.Fragment>
+    `);
     });
   });
 });
@@ -768,20 +781,34 @@ describe('edit button', () => {
       enabledInLicense: true,
     };
 
-    expect(
-      shallow(
-        <AlertDetails
-          alert={alert}
-          alertType={alertType}
-          actionTypes={actionTypes}
-          {...mockAlertApis}
+    const pageHeaderProps = shallow(
+      <AlertDetails
+        alert={alert}
+        alertType={alertType}
+        actionTypes={actionTypes}
+        {...mockAlertApis}
+      />
+    )
+      .find('EuiPageHeader')
+      .props() as EuiPageHeaderProps;
+    const rightSideItems = pageHeaderProps.rightSideItems;
+    expect(!!rightSideItems && rightSideItems[2]!).toMatchInlineSnapshot(`
+    <React.Fragment>
+      <EuiButtonEmpty
+        data-test-subj="openEditAlertFlyoutButton"
+        disabled={false}
+        iconType="pencil"
+        name="edit"
+        onClick={[Function]}
+      >
+        <FormattedMessage
+          defaultMessage="Edit"
+          id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
+          values={Object {}}
         />
-      )
-        .find(EuiButtonEmpty)
-        .find('[name="edit"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
+      </EuiButtonEmpty>
+    </React.Fragment>
+  `);
   });
 
   it('should not render an edit button when alert editable but actions arent', () => {
@@ -851,20 +878,34 @@ describe('edit button', () => {
       enabledInLicense: true,
     };
 
-    expect(
-      shallow(
-        <AlertDetails
-          alert={alert}
-          alertType={alertType}
-          actionTypes={actionTypes}
-          {...mockAlertApis}
+    const pageHeaderProps = shallow(
+      <AlertDetails
+        alert={alert}
+        alertType={alertType}
+        actionTypes={actionTypes}
+        {...mockAlertApis}
+      />
+    )
+      .find('EuiPageHeader')
+      .props() as EuiPageHeaderProps;
+    const rightSideItems = pageHeaderProps.rightSideItems;
+    expect(!!rightSideItems && rightSideItems[2]!).toMatchInlineSnapshot(`
+    <React.Fragment>
+      <EuiButtonEmpty
+        data-test-subj="openEditAlertFlyoutButton"
+        disabled={false}
+        iconType="pencil"
+        name="edit"
+        onClick={[Function]}
+      >
+        <FormattedMessage
+          defaultMessage="Edit"
+          id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
+          values={Object {}}
         />
-      )
-        .find(EuiButtonEmpty)
-        .find('[name="edit"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
+      </EuiButtonEmpty>
+    </React.Fragment>
+  `);
   });
 });
 
@@ -885,7 +926,7 @@ describe('refresh button', () => {
     };
 
     const requestRefresh = jest.fn();
-    const refreshButton = shallow(
+    const wrapper = mountWithIntl(
       <AlertDetails
         alert={alert}
         alertType={alertType}
@@ -893,10 +934,9 @@ describe('refresh button', () => {
         {...mockAlertApis}
         requestRefresh={requestRefresh}
       />
-    )
-      .find('[data-test-subj="refreshAlertsButton"]')
-      .first();
+    );
 
+    const refreshButton = wrapper.find('[data-test-subj="refreshAlertsButton"]').first();
     expect(refreshButton.exists()).toBeTruthy();
 
     refreshButton.simulate('click');
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
index ba6c77a4403f1d..3e411913520adc 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
@@ -12,14 +12,11 @@ import { useHistory } from 'react-router-dom';
 import {
   EuiPageBody,
   EuiPageContent,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiTitle,
+  EuiPageHeader,
   EuiText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiBadge,
-  EuiPage,
   EuiPageContentBody,
   EuiSwitch,
   EuiCallOut,
@@ -45,7 +42,7 @@ import { alertsErrorReasonTranslationsMapping } from '../../alerts_list/translat
 import { useKibana } from '../../../../common/lib/kibana';
 import { alertReducer } from '../../alert_form/alert_reducer';
 
-type AlertDetailsProps = {
+export type AlertDetailsProps = {
   alert: Alert;
   alertType: AlertType;
   actionTypes: ActionType[];
@@ -120,249 +117,245 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
     }
   };
 
+  const rightPageHeaderButtons = hasEditButton
+    ? [
+        <>
+          <EuiButtonEmpty
+            data-test-subj="openEditAlertFlyoutButton"
+            iconType="pencil"
+            onClick={() => setEditFlyoutVisibility(true)}
+            name="edit"
+            disabled={!alertType.enabledInLicense}
+          >
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
+              defaultMessage="Edit"
+            />
+          </EuiButtonEmpty>
+          {editFlyoutVisible && (
+            <AlertEdit
+              initialAlert={alert}
+              onClose={() => {
+                setInitialAlert(alert);
+                setEditFlyoutVisibility(false);
+              }}
+              actionTypeRegistry={actionTypeRegistry}
+              alertTypeRegistry={alertTypeRegistry}
+              onSave={setAlert}
+            />
+          )}
+        </>,
+      ]
+    : [];
+
   return (
-    <EuiPage>
-      <EuiPageBody>
-        <EuiPageContent>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="m">
-                <h1>
-                  <span data-test-subj="alertDetailsTitle">{alert.name}</span>
-                </h1>
-              </EuiTitle>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup responsive={false} gutterSize="xs">
-                {hasEditButton ? (
-                  <EuiFlexItem grow={false}>
-                    <>
-                      {' '}
-                      <EuiButtonEmpty
-                        data-test-subj="openEditAlertFlyoutButton"
-                        iconType="pencil"
-                        onClick={() => setEditFlyoutVisibility(true)}
-                        name="edit"
-                        disabled={!alertType.enabledInLicense}
-                      >
-                        <FormattedMessage
-                          id="xpack.triggersActionsUI.sections.alertDetails.editAlertButtonLabel"
-                          defaultMessage="Edit"
-                        />
-                      </EuiButtonEmpty>
-                      {editFlyoutVisible && (
-                        <AlertEdit
-                          initialAlert={alert}
-                          onClose={() => {
-                            setInitialAlert(alert);
-                            setEditFlyoutVisibility(false);
-                          }}
-                          actionTypeRegistry={actionTypeRegistry}
-                          alertTypeRegistry={alertTypeRegistry}
-                          onSave={setAlert}
-                        />
-                      )}
-                    </>
-                  </EuiFlexItem>
-                ) : null}
+    <EuiPageBody>
+      <EuiPageContent color="transparent">
+        <EuiPageHeader
+          data-test-subj="alertDetailsTitle"
+          bottomBorder
+          pageTitle={
+            <FormattedMessage
+              id="xpack.triggersActionsUI.sections.alertDetails.alertDetailsTitle"
+              defaultMessage="{alertName}"
+              values={{ alertName: alert.name }}
+            />
+          }
+          rightSideItems={[
+            <ViewInApp alert={alert} />,
+            <EuiButtonEmpty
+              data-test-subj="refreshAlertsButton"
+              iconType="refresh"
+              onClick={requestRefresh}
+              name="refresh"
+              color="primary"
+            >
+              <FormattedMessage
+                id="xpack.triggersActionsUI.sections.alertsList.refreshAlertsButtonLabel"
+                defaultMessage="Refresh"
+              />
+            </EuiButtonEmpty>,
+            ...rightPageHeaderButtons,
+          ]}
+        />
+        <EuiSpacer size="l" />
+        <EuiPageContentBody>
+          <EuiFlexGroup wrap responsive={false} gutterSize="m">
+            <EuiFlexItem grow={false}>
+              <EuiText size="s">
+                <p>
+                  <FormattedMessage
+                    id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle"
+                    defaultMessage="Type"
+                  />
+                </p>
+              </EuiText>
+              <EuiSpacer size="xs" />
+              <EuiBadge data-test-subj="alertTypeLabel">{alertType.name}</EuiBadge>
+            </EuiFlexItem>
+            <EuiFlexItem grow={1}>
+              {uniqueActions && uniqueActions.length ? (
+                <>
+                  <EuiText size="s">
+                    <p>
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTex"
+                        defaultMessage="Actions"
+                      />
+                    </p>
+                  </EuiText>
+                  <EuiSpacer size="xs" />
+                  <EuiFlexGroup wrap gutterSize="s">
+                    {uniqueActions.map((action, index) => (
+                      <EuiFlexItem key={index} grow={false}>
+                        <EuiBadge color="hollow" data-test-subj="actionTypeLabel">
+                          {actionTypesByTypeId[action].name ?? action}
+                        </EuiBadge>
+                      </EuiFlexItem>
+                    ))}
+                  </EuiFlexGroup>
+                </>
+              ) : null}
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiSpacer />
+              <EuiFlexGroup justifyContent="flexEnd" wrap responsive={false} gutterSize="m">
                 <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty
-                    data-test-subj="refreshAlertsButton"
-                    iconType="refresh"
-                    onClick={requestRefresh}
-                    name="refresh"
-                    color="primary"
-                  >
-                    <FormattedMessage
-                      id="xpack.triggersActionsUI.sections.alertsList.refreshAlertsButtonLabel"
-                      defaultMessage="Refresh"
-                    />
-                  </EuiButtonEmpty>
+                  <EuiSwitch
+                    name="disable"
+                    disabled={!canSaveAlert || !alertType.enabledInLicense}
+                    checked={!isEnabled}
+                    data-test-subj="disableSwitch"
+                    onChange={async () => {
+                      if (isEnabled) {
+                        setIsEnabled(false);
+                        await disableAlert(alert);
+                        // Reset dismiss if previously clicked
+                        setDissmissAlertErrors(false);
+                      } else {
+                        setIsEnabled(true);
+                        await enableAlert(alert);
+                      }
+                      requestRefresh();
+                    }}
+                    label={
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle"
+                        defaultMessage="Disable"
+                      />
+                    }
+                  />
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <ViewInApp alert={alert} />
+                  <EuiSwitch
+                    name="mute"
+                    checked={isMuted}
+                    disabled={!canSaveAlert || !isEnabled || !alertType.enabledInLicense}
+                    data-test-subj="muteSwitch"
+                    onChange={async () => {
+                      if (isMuted) {
+                        setIsMuted(false);
+                        await unmuteAlert(alert);
+                      } else {
+                        setIsMuted(true);
+                        await muteAlert(alert);
+                      }
+                      requestRefresh();
+                    }}
+                    label={
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle"
+                        defaultMessage="Mute"
+                      />
+                    }
+                  />
                 </EuiFlexItem>
               </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
-          <EuiPageContentBody>
-            <EuiFlexGroup wrap responsive={false} gutterSize="m">
-              <EuiFlexItem grow={false}>
-                <EuiText size="s">
-                  <p>
-                    <FormattedMessage
-                      id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.alertTypeTitle"
-                      defaultMessage="Type"
-                    />
-                  </p>
-                </EuiText>
-                <EuiSpacer size="xs" />
-                <EuiBadge data-test-subj="alertTypeLabel">{alertType.name}</EuiBadge>
-              </EuiFlexItem>
-              <EuiFlexItem grow={1}>
-                {uniqueActions && uniqueActions.length ? (
-                  <>
-                    <EuiText size="s">
-                      <p>
-                        <FormattedMessage
-                          id="xpack.triggersActionsUI.sections.alertsList.alertsListTable.columns.actionsTex"
-                          defaultMessage="Actions"
-                        />
-                      </p>
-                    </EuiText>
-                    <EuiSpacer size="xs" />
-                    <EuiFlexGroup wrap gutterSize="s">
-                      {uniqueActions.map((action, index) => (
-                        <EuiFlexItem key={index} grow={false}>
-                          <EuiBadge color="hollow" data-test-subj="actionTypeLabel">
-                            {actionTypesByTypeId[action].name ?? action}
-                          </EuiBadge>
-                        </EuiFlexItem>
-                      ))}
-                    </EuiFlexGroup>
-                  </>
-                ) : null}
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiSpacer />
-                <EuiFlexGroup justifyContent="flexEnd" wrap responsive={false} gutterSize="m">
-                  <EuiFlexItem grow={false}>
-                    <EuiSwitch
-                      name="disable"
-                      disabled={!canSaveAlert || !alertType.enabledInLicense}
-                      checked={!isEnabled}
-                      data-test-subj="disableSwitch"
-                      onChange={async () => {
-                        if (isEnabled) {
-                          setIsEnabled(false);
-                          await disableAlert(alert);
-                          // Reset dismiss if previously clicked
-                          setDissmissAlertErrors(false);
-                        } else {
-                          setIsEnabled(true);
-                          await enableAlert(alert);
-                        }
-                        requestRefresh();
-                      }}
-                      label={
-                        <FormattedMessage
-                          id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.disableTitle"
-                          defaultMessage="Disable"
-                        />
-                      }
-                    />
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiSwitch
-                      name="mute"
-                      checked={isMuted}
-                      disabled={!canSaveAlert || !isEnabled || !alertType.enabledInLicense}
-                      data-test-subj="muteSwitch"
-                      onChange={async () => {
-                        if (isMuted) {
-                          setIsMuted(false);
-                          await unmuteAlert(alert);
-                        } else {
-                          setIsMuted(true);
-                          await muteAlert(alert);
-                        }
-                        requestRefresh();
-                      }}
-                      label={
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          {alert.enabled && !dissmissAlertErrors && alert.executionStatus.status === 'error' ? (
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <EuiCallOut
+                  color="danger"
+                  data-test-subj="alertErrorBanner"
+                  size="s"
+                  title={getAlertStatusErrorReasonText()}
+                  iconType="alert"
+                >
+                  <EuiText size="s" color="danger" data-test-subj="alertErrorMessageText">
+                    {alert.executionStatus.error?.message}
+                  </EuiText>
+                  <EuiSpacer size="s" />
+                  <EuiFlexGroup gutterSize="s" wrap={true}>
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        data-test-subj="dismiss-execution-error"
+                        color="danger"
+                        onClick={() => setDissmissAlertErrors(true)}
+                      >
                         <FormattedMessage
-                          id="xpack.triggersActionsUI.sections.alertDetails.collapsedItemActons.muteTitle"
-                          defaultMessage="Mute"
+                          id="xpack.triggersActionsUI.sections.alertDetails.dismissButtonTitle"
+                          defaultMessage="Dismiss"
                         />
-                      }
-                    />
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            {alert.enabled && !dissmissAlertErrors && alert.executionStatus.status === 'error' ? (
-              <EuiFlexGroup>
-                <EuiFlexItem>
-                  <EuiCallOut
-                    color="danger"
-                    data-test-subj="alertErrorBanner"
-                    size="s"
-                    title={getAlertStatusErrorReasonText()}
-                    iconType="alert"
-                  >
-                    <EuiText size="s" color="danger" data-test-subj="alertErrorMessageText">
-                      {alert.executionStatus.error?.message}
-                    </EuiText>
-                    <EuiSpacer size="s" />
-                    <EuiFlexGroup gutterSize="s" wrap={true}>
+                      </EuiButton>
+                    </EuiFlexItem>
+                    {alert.executionStatus.error?.reason ===
+                      AlertExecutionStatusErrorReasons.License && (
                       <EuiFlexItem grow={false}>
-                        <EuiButton
-                          data-test-subj="dismiss-execution-error"
+                        <EuiButtonEmpty
+                          href={`${http.basePath.get()}/app/management/stack/license_management`}
                           color="danger"
-                          onClick={() => setDissmissAlertErrors(true)}
+                          target="_blank"
                         >
                           <FormattedMessage
-                            id="xpack.triggersActionsUI.sections.alertDetails.dismissButtonTitle"
-                            defaultMessage="Dismiss"
+                            id="xpack.triggersActionsUI.sections.alertDetails.manageLicensePlanBannerLinkTitle"
+                            defaultMessage="Manage license"
                           />
-                        </EuiButton>
+                        </EuiButtonEmpty>
                       </EuiFlexItem>
-                      {alert.executionStatus.error?.reason ===
-                        AlertExecutionStatusErrorReasons.License && (
-                        <EuiFlexItem grow={false}>
-                          <EuiButtonEmpty
-                            href={`${http.basePath.get()}/app/management/stack/license_management`}
-                            color="danger"
-                            target="_blank"
-                          >
-                            <FormattedMessage
-                              id="xpack.triggersActionsUI.sections.alertDetails.manageLicensePlanBannerLinkTitle"
-                              defaultMessage="Manage license"
-                            />
-                          </EuiButtonEmpty>
-                        </EuiFlexItem>
-                      )}
-                    </EuiFlexGroup>
-                  </EuiCallOut>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            ) : null}
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                {alert.enabled ? (
-                  <AlertInstancesRouteWithApi
-                    requestRefresh={requestRefresh}
-                    alert={alert}
-                    alertType={alertType}
-                    readOnly={!canSaveAlert}
-                  />
-                ) : (
-                  <>
-                    <EuiSpacer />
-                    <EuiCallOut
-                      title={i18n.translate(
-                        'xpack.triggersActionsUI.sections.alertDetails.alerts.disabledRuleTitle',
-                        {
-                          defaultMessage: 'Disabled Rule',
-                        }
-                      )}
-                      color="warning"
-                      iconType="help"
-                    >
-                      <p>
-                        <FormattedMessage
-                          id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.disabledRule"
-                          defaultMessage="This rule is disabled and cannot be displayed. Toggle Disable ↑ to activate it."
-                        />
-                      </p>
-                    </EuiCallOut>
-                  </>
-                )}
+                    )}
+                  </EuiFlexGroup>
+                </EuiCallOut>
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiPageContentBody>
-        </EuiPageContent>
-      </EuiPageBody>
-    </EuiPage>
+          ) : null}
+          <EuiFlexGroup>
+            <EuiFlexItem>
+              {alert.enabled ? (
+                <AlertInstancesRouteWithApi
+                  requestRefresh={requestRefresh}
+                  alert={alert}
+                  alertType={alertType}
+                  readOnly={!canSaveAlert}
+                />
+              ) : (
+                <>
+                  <EuiSpacer />
+                  <EuiCallOut
+                    title={i18n.translate(
+                      'xpack.triggersActionsUI.sections.alertDetails.alerts.disabledRuleTitle',
+                      {
+                        defaultMessage: 'Disabled Rule',
+                      }
+                    )}
+                    color="warning"
+                    iconType="help"
+                  >
+                    <p>
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.alertDetails.alertInstances.disabledRule"
+                        defaultMessage="This rule is disabled and cannot be displayed. Toggle Disable ↑ to activate it."
+                      />
+                    </p>
+                  </EuiCallOut>
+                </>
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
   );
 };
 
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
index 34e08ad257f849..8cf92f77d939c7 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
@@ -136,7 +136,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       it('renders the alert details', async () => {
         const headingText = await pageObjects.alertDetailsUI.getHeadingText();
-        expect(headingText).to.be(`test-alert-${testRunUuid}`);
+        expect(headingText.includes(`test-alert-${testRunUuid}`)).to.be(true);
 
         const alertType = await pageObjects.alertDetailsUI.getAlertType();
         expect(alertType).to.be(`Always Firing`);
@@ -279,7 +279,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         expect(toastTitle).to.eql(`Updated '${updatedAlertName}'`);
 
         const headingText = await pageObjects.alertDetailsUI.getHeadingText();
-        expect(headingText).to.be(updatedAlertName);
+        expect(headingText.includes(updatedAlertName)).to.be(true);
       });
 
       it('should reset alert when canceling an edit', async () => {