diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx
index f591c1e4e0768b..8d3baf8c2981b4 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/email.tsx
@@ -417,15 +417,6 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
   ));
   return (
     <Fragment>
-      <EuiText>
-        <EuiTextColor color="subdued">
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
-            defaultMessage="Compose Message:"
-          />
-        </EuiTextColor>
-      </EuiText>
-      <EuiSpacer size="m" />
       <EuiFormRow
         fullWidth
         error={errors.to}
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx
index 267a7edc0a2f28..000c81c1150f49 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/server_log.tsx
@@ -98,15 +98,6 @@ export const ServerLogParamsFields: React.FunctionComponent<ActionParamsProps<
   ));
   return (
     <Fragment>
-      <EuiText>
-        <EuiTextColor color="subdued">
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
-            defaultMessage="Compose Message:"
-          />
-        </EuiTextColor>
-      </EuiText>
-      <EuiSpacer size="m" />
       <EuiFormRow
         id="loggingLevel"
         fullWidth
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx
index 8bf8a6735c4b8c..683b7b4e99766e 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_action_types/slack.tsx
@@ -169,15 +169,6 @@ const SlackParamsFields: React.FunctionComponent<ActionParamsProps<SlackActionPa
   ));
   return (
     <Fragment>
-      <EuiText>
-        <EuiTextColor color="subdued">
-          <FormattedMessage
-            id="xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.composeMessageTitle"
-            defaultMessage="Compose Message:"
-          />
-        </EuiTextColor>
-      </EuiText>
-      <EuiSpacer size="m" />
       <EuiFormRow
         id="slackMessage"
         fullWidth
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
index 9ba79bba8fef6d..f91c3cf9a77084 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/components/builtin_alert_types/threshold/visualization.tsx
@@ -280,17 +280,18 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({ alert }
           </Chart>
         ) : (
           <EuiCallOut
+            size="s"
             title={
               <FormattedMessage
                 id="xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.noDataTitle"
-                defaultMessage="No data"
+                defaultMessage="No data matches that query"
               />
             }
             color="warning"
           >
             <FormattedMessage
               id="xpack.triggersActionsUI.sections.alertAdd.thresholdPreviewChart.dataDoesNotExistTextMessage"
-              defaultMessage="Your index and condition did not return any data."
+              defaultMessage="Check your time range and filters to make sure they are correct"
             />
           </EuiCallOut>
         )}
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss
new file mode 100644
index 00000000000000..f8fa882cd617da
--- /dev/null
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/_index.scss
@@ -0,0 +1,3 @@
+.actConnectorModal {
+  z-index: 9000;
+}
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx
index 07ea7a1045fe4c..2ce282e946a389 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/action_connector_form/connector_add_modal.tsx
@@ -89,7 +89,7 @@ export const ConnectorAddModal = ({
       });
 
   return (
-    <EuiOverlayMask>
+    <EuiOverlayMask className="actConnectorModal">
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx
index d4d51fc0d8c108..a991acdf8faec0 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alert_add/alert_add.tsx
@@ -15,6 +15,7 @@ import {
   EuiButtonEmpty,
   EuiButton,
   EuiFlyoutBody,
+  EuiPortal,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useAlertsContext } from '../../context/alerts_context';
@@ -114,56 +115,64 @@ export const AlertAdd = () => {
   }
 
   return (
-    <EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutAlertAddTitle" size="m" maxWidth={620}>
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="s" data-test-subj="addAlertFlyoutTitle">
-          <h3 id="flyoutTitle">
-            <FormattedMessage
-              defaultMessage="Create Alert"
-              id="xpack.triggersActionsUI.sections.alertAdd.flyoutTitle"
-            />
-          </h3>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <AlertForm alert={alert} dispatch={dispatch} errors={errors} serverError={serverError} />
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty data-test-subj="cancelSaveAlertButton" onClick={closeFlyout}>
-              {i18n.translate('xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel', {
-                defaultMessage: 'Cancel',
-              })}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              color="secondary"
-              data-test-subj="saveAlertButton"
-              type="submit"
-              iconType="check"
-              isDisabled={hasErrors || hasActionErrors}
-              isLoading={isSaving}
-              onClick={async () => {
-                setIsSaving(true);
-                const savedAlert = await onSaveAlert();
-                setIsSaving(false);
-                if (savedAlert) {
-                  closeFlyout();
-                  reloadAlerts();
-                }
-              }}
-            >
+    <EuiPortal>
+      <EuiFlyout
+        onClose={closeFlyout}
+        aria-labelledby="flyoutAlertAddTitle"
+        size="m"
+        maxWidth={620}
+        ownFocus
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="s" data-test-subj="addAlertFlyoutTitle">
+            <h3 id="flyoutTitle">
               <FormattedMessage
-                id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
-                defaultMessage="Save"
+                defaultMessage="Create Alert"
+                id="xpack.triggersActionsUI.sections.alertAdd.flyoutTitle"
               />
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
+            </h3>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <AlertForm alert={alert} dispatch={dispatch} errors={errors} serverError={serverError} />
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty data-test-subj="cancelSaveAlertButton" onClick={closeFlyout}>
+                {i18n.translate('xpack.triggersActionsUI.sections.alertAdd.cancelButtonLabel', {
+                  defaultMessage: 'Cancel',
+                })}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                fill
+                color="secondary"
+                data-test-subj="saveAlertButton"
+                type="submit"
+                iconType="check"
+                isDisabled={hasErrors || hasActionErrors}
+                isLoading={isSaving}
+                onClick={async () => {
+                  setIsSaving(true);
+                  const savedAlert = await onSaveAlert();
+                  setIsSaving(false);
+                  if (savedAlert) {
+                    closeFlyout();
+                    reloadAlerts();
+                  }
+                }}
+              >
+                <FormattedMessage
+                  id="xpack.triggersActionsUI.sections.alertAdd.saveButtonLabel"
+                  defaultMessage="Save"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </EuiPortal>
   );
 };
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx
index 32e9532462c2a2..0fcf987ba32739 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx
+++ b/x-pack/legacy/plugins/triggers_actions_ui/np_ready/public/application/sections/alerts_list/components/alerts_list.tsx
@@ -6,7 +6,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Fragment } from 'react';
 import {
   EuiBasicTable,
   EuiButton,
@@ -15,6 +15,8 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiSpacer,
+  EuiEmptyPrompt,
+  EuiTitle,
 } from '@elastic/eui';
 
 import { AlertsContextProvider } from '../../../context/alerts_context';
@@ -228,10 +230,47 @@ export const AlertsList: React.FunctionComponent = () => {
     );
   }
 
-  return (
-    <section data-test-subj="alertsList">
-      <EuiSpacer size="m" />
-      <EuiFlexGroup>
+  const emptyPrompt = (
+    <EuiEmptyPrompt
+      iconType="watchesApp"
+      data-test-subj="createFirstConnectorEmptyPrompt"
+      title={
+        <h2>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.alertsList.emptyTitle"
+            defaultMessage="Create your first alert"
+          />
+        </h2>
+      }
+      body={
+        <p>
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.alertsList.emptyDesc"
+            defaultMessage="Recieve an alert through email, slack or other connectors when a certain trigger is hit"
+          />
+        </p>
+      }
+      actions={
+        <EuiButton
+          data-test-subj="createFirstActionButton"
+          key="create-action"
+          fill
+          iconType="plusInCircle"
+          iconSide="left"
+          onClick={() => setAlertFlyoutVisibility(true)}
+        >
+          <FormattedMessage
+            id="xpack.triggersActionsUI.sections.alertsList.emptyButton"
+            defaultMessage="Create alert"
+          />
+        </EuiButton>
+      }
+    />
+  );
+
+  const table = (
+    <Fragment>
+      <EuiFlexGroup gutterSize="s">
         {selectedIds.length > 0 && canDelete && (
           <EuiFlexItem grow={false}>
             <BulkActionPopover
@@ -260,12 +299,12 @@ export const AlertsList: React.FunctionComponent = () => {
             }}
             placeholder={i18n.translate(
               'xpack.triggersActionsUI.sections.alertsList.searchPlaceholderTitle',
-              { defaultMessage: 'Search...' }
+              { defaultMessage: 'Search' }
             )}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup>
+          <EuiFlexGroup gutterSize="s">
             {toolsRight.map((tool, index: number) => (
               <EuiFlexItem key={index} grow={false}>
                 {tool}
@@ -314,6 +353,15 @@ export const AlertsList: React.FunctionComponent = () => {
           setPage(changedPage);
         }}
       />
+    </Fragment>
+  );
+
+  return (
+    <section data-test-subj="alertsList">
+      <EuiSpacer size="m" />
+      {convertAlertsToTableItems(alertsState.data, alertTypesState.data).length !== 0 && table}
+      {convertAlertsToTableItems(alertsState.data, alertTypesState.data).length === 0 &&
+        emptyPrompt}
       <AlertsContextProvider
         value={{
           addFlyoutVisible: alertFlyoutVisible,
diff --git a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
index 6faad81630b2be..810176a57f9e38 100644
--- a/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
+++ b/x-pack/legacy/plugins/triggers_actions_ui/public/index.scss
@@ -3,3 +3,6 @@
 
 // Styling within the app
 @import '../np_ready/public/application/sections/actions_connectors_list/components/index';
+
+@import '../np_ready/public/application/sections/action_connector_form/index';
+