diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/circle.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/circle.test.tsx
new file mode 100644
index 0000000000000..e29bb2ac6e92e
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/circle.test.tsx
@@ -0,0 +1,114 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act } from 'react-dom/test-utils';
+import { setup, SetupResult, getProcessorValue } from './processor.helpers';
+
+const CIRCLE_TYPE = 'circle';
+
+describe('Processor: Circle', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+    testBed.component.update();
+    const {
+      actions: { addProcessor, addProcessorType },
+    } = testBed;
+    // Open the processor flyout
+    addProcessor();
+
+    // Add type (the other fields are not visible until a type is selected)
+    await addProcessorType(CIRCLE_TYPE);
+  });
+
+  test('prevents form submission if required fields are not provided', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Click submit button with only the type defined
+    await saveNewProcessor();
+
+    // Expect form error as "field" and "shape_type" are required parameters
+    expect(form.getErrorsMessages()).toEqual([
+      'A field value is required.',
+      'A shape type value is required.',
+    ]);
+  });
+
+  test('saves with required parameter values', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', 'field_1');
+    // Save the field
+    form.setSelectValue('shapeSelectorField', 'shape');
+    // Set the error distance
+    form.setInputValue('errorDistanceField.input', '10');
+
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, CIRCLE_TYPE);
+
+    expect(processors[0].circle).toEqual({
+      field: 'field_1',
+      error_distance: 10,
+      shape_type: 'shape',
+    });
+  });
+
+  test('allows optional parameters to be set', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', 'field_1');
+    // Select the shape
+    form.setSelectValue('shapeSelectorField', 'geo_shape');
+    // Add "target_field" value
+    form.setInputValue('targetField.input', 'target_field');
+
+    form.setInputValue('errorDistanceField.input', '10');
+
+    // Save the field with new changes
+    await saveNewProcessor();
+
+    const processors = getProcessorValue(onUpdate, CIRCLE_TYPE);
+    expect(processors[0].circle).toEqual({
+      field: 'field_1',
+      error_distance: 10,
+      shape_type: 'geo_shape',
+      target_field: 'target_field',
+    });
+  });
+});
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
index c00f09b2d2b06..15e8c323b1308 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
@@ -151,6 +151,8 @@ type TestSubject =
   | 'keepOriginalField.input'
   | 'removeIfSuccessfulField.input'
   | 'targetFieldsField.input'
+  | 'shapeSelectorField'
+  | 'errorDistanceField.input'
   | 'separatorValueField.input'
   | 'quoteValueField.input'
   | 'emptyValueField.input'
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx
index acb480df6d35f..74a7f37d841ae 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/circle.tsx
@@ -97,6 +97,7 @@ export const Circle: FunctionComponent = () => {
       />
 
       <UseField
+        data-test-subj="errorDistanceField"
         config={fieldsConfig.error_distance}
         component={NumericField}
         path="fields.error_distance"
@@ -105,6 +106,7 @@ export const Circle: FunctionComponent = () => {
       <UseField
         componentProps={{
           euiFieldProps: {
+            'data-test-subj': 'shapeSelectorField',
             options: [
               {
                 value: 'shape',
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 23cb3bdb3f5d3..a3b04253a14c3 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -24311,8 +24311,6 @@
     "xpack.watcher.sections.watchEdit.json.titlePanel.editWatchTitle": "{watchName}を編集",
     "xpack.watcher.sections.watchEdit.loadingWatchDescription": "ウォッチの読み込み中…",
     "xpack.watcher.sections.watchEdit.loadingWatchVisualizationDescription": "ウォッチビジュアライゼーションを読み込み中…",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText": "ウォッチ'{watchName}'はシステムウォッチであるため、編集できません。{watchStatusLink}",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText": "このウォッチは編集できません。",
     "xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle": "ウォッチステータスを表示します。",
     "xpack.watcher.sections.watchEdit.simulate.form.actionModesFieldLabel": "アクションモード",
     "xpack.watcher.sections.watchEdit.simulate.form.actionOverridesDescription": "ウォッチでアクションを実行またはスキップすることができるようにします。{actionsLink}",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index f32ad11c53a70..67bcf727bca6d 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -24681,8 +24681,6 @@
     "xpack.watcher.sections.watchEdit.json.titlePanel.editWatchTitle": "编辑 {watchName}",
     "xpack.watcher.sections.watchEdit.loadingWatchDescription": "正在加载监视……",
     "xpack.watcher.sections.watchEdit.loadingWatchVisualizationDescription": "正在加载监视可视化……",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText": "监视“{watchName}”为系统监视，无法编辑。{watchStatusLink}",
-    "xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText": "此监视无法编辑。",
     "xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle": "查看监视状态。",
     "xpack.watcher.sections.watchEdit.simulate.form.actionModesFieldLabel": "操作模式",
     "xpack.watcher.sections.watchEdit.simulate.form.actionOverridesDescription": "允许监视执行或跳过操作。{actionsLink}",
diff --git a/x-pack/plugins/watcher/public/application/app.tsx b/x-pack/plugins/watcher/public/application/app.tsx
index 6c233a44830b5..98d10bce3b6b2 100644
--- a/x-pack/plugins/watcher/public/application/app.tsx
+++ b/x-pack/plugins/watcher/public/application/app.tsx
@@ -17,7 +17,7 @@ import {
 
 import { Router, Switch, Route, Redirect, withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { EuiCallOut, EuiLink } from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -62,24 +62,30 @@ export const App = (deps: AppDeps) => {
 
   if (!valid) {
     return (
-      <EuiCallOut
-        title={
-          <FormattedMessage
-            id="xpack.watcher.app.licenseErrorTitle"
-            defaultMessage="License error"
-          />
-        }
-        color="danger"
-        iconType="help"
-      >
-        {message}{' '}
-        <EuiLink href={deps.getUrlForApp('management', { path: 'stack/license_management/home' })}>
-          <FormattedMessage
-            id="xpack.watcher.app.licenseErrorLinkText"
-            defaultMessage="Manage your license."
-          />
-        </EuiLink>
-      </EuiCallOut>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <EuiEmptyPrompt
+          iconType="alert"
+          title={
+            <h1>
+              <FormattedMessage
+                id="xpack.watcher.app.licenseErrorTitle"
+                defaultMessage="License error"
+              />
+            </h1>
+          }
+          body={<p>{message}</p>}
+          actions={[
+            <EuiLink
+              href={deps.getUrlForApp('management', { path: 'stack/license_management/home' })}
+            >
+              <FormattedMessage
+                id="xpack.watcher.app.licenseErrorLinkText"
+                defaultMessage="Manage your license"
+              />
+            </EuiLink>,
+          ]}
+        />
+      </EuiPageContent>
     );
   }
   return (
diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx
index ca05d390518f2..321b5c0e5e11b 100644
--- a/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx
+++ b/x-pack/plugins/watcher/public/application/components/page_error/page_error.tsx
@@ -25,7 +25,7 @@ export function getPageErrorCode(errorOrErrors: any) {
   }
 }
 
-export function PageError({ errorCode, id }: { errorCode?: any; id?: any }) {
+export function PageError({ errorCode, id }: { errorCode?: number; id?: string }) {
   switch (errorCode) {
     case 404:
       return <PageErrorNotExist id={id} />;
diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx
index c2e93c7f06600..56dc5c7dc22b5 100644
--- a/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx
+++ b/x-pack/plugins/watcher/public/application/components/page_error/page_error_forbidden.tsx
@@ -13,8 +13,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 export function PageErrorForbidden() {
   return (
     <EuiEmptyPrompt
-      iconType="securityApp"
-      iconColor={undefined}
+      iconType="alert"
       title={
         <h1>
           <FormattedMessage
diff --git a/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx b/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx
index b50ffb299cffc..0f8fd799e0dd6 100644
--- a/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx
+++ b/x-pack/plugins/watcher/public/application/components/page_error/page_error_not_exist.tsx
@@ -10,11 +10,10 @@ import React from 'react';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function PageErrorNotExist({ id }: { id: any }) {
+export function PageErrorNotExist({ id }: { id?: string }) {
   return (
     <EuiEmptyPrompt
-      iconType="search"
-      iconColor="primary"
+      iconType="alert"
       title={
         <h1>
           <FormattedMessage
@@ -25,11 +24,18 @@ export function PageErrorNotExist({ id }: { id: any }) {
       }
       body={
         <p>
-          <FormattedMessage
-            id="xpack.watcher.pageErrorNotExist.description"
-            defaultMessage="A watch with ID '{id}' could not be found."
-            values={{ id }}
-          />
+          {id ? (
+            <FormattedMessage
+              id="xpack.watcher.pageErrorNotExist.description"
+              defaultMessage="A watch with ID '{id}' could not be found."
+              values={{ id }}
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.watcher.pageErrorNotExist.noWatchIdDescription"
+              defaultMessage="A watch could not be found."
+            />
+          )}
         </p>
       }
     />
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx
index 8b5827fbd0fe0..80931c3f60c05 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/json_watch_edit/json_watch_edit.tsx
@@ -7,15 +7,7 @@
 
 import React, { useContext, useState } from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent,
-  EuiSpacer,
-  EuiTab,
-  EuiTabs,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiSpacer, EuiPageContentBody } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ExecuteDetails } from '../../../../models/execute_details';
 import { getActionType } from '../../../../../../common/lib/get_action_type';
@@ -96,36 +88,31 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   const hasExecuteWatchErrors = !!Object.keys(executeWatchErrors).find(
     (errorKey) => executeWatchErrors[errorKey].length >= 1
   );
+
   return (
-    <EuiPageContent>
-      <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1 data-test-subj="pageTitle">{pageTitle}</h1>
-          </EuiTitle>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiTabs>
-        {WATCH_TABS.map((tab, index) => (
-          <EuiTab
-            onClick={() => {
-              setSelectedTab(tab.id);
-              setExecuteDetails(
-                new ExecuteDetails({
-                  ...executeDetails,
-                  actionModes: getActionModes(watchActions),
-                })
-              );
-            }}
-            isSelected={tab.id === selectedTab}
-            key={index}
-            data-test-subj="tab"
-          >
-            {tab.name}
-          </EuiTab>
-        ))}
-      </EuiTabs>
+    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+      <EuiPageHeader
+        pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
+        bottomBorder
+        tabs={WATCH_TABS.map((tab, index) => ({
+          onClick: () => {
+            setSelectedTab(tab.id);
+            setExecuteDetails(
+              new ExecuteDetails({
+                ...executeDetails,
+                actionModes: getActionModes(watchActions),
+              })
+            );
+          },
+          isSelected: tab.id === selectedTab,
+          key: index,
+          'data-test-subj': 'tab',
+          label: tab.name,
+        }))}
+      />
+
       <EuiSpacer size="l" />
+
       {selectedTab === WATCH_SIMULATE_TAB && (
         <JsonWatchEditSimulate
           executeDetails={executeDetails}
@@ -135,7 +122,8 @@ export const JsonWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
           watchActions={watchActions}
         />
       )}
+
       {selectedTab === WATCH_EDIT_TAB && <JsonWatchEditForm />}
-    </EuiPageContent>
+    </EuiPageContentBody>
   );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx
index 930c11340ce5e..b00e4dc310e27 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/monitoring_watch_edit/monitoring_watch_edit.tsx
@@ -7,16 +7,7 @@
 
 import React, { useContext } from 'react';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPageContent,
-  EuiSpacer,
-  EuiTitle,
-  EuiCallOut,
-  EuiText,
-  EuiLink,
-} from '@elastic/eui';
+import { EuiPageContent, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { WatchContext } from '../../watch_context';
 import { useAppContext } from '../../../../app_context';
@@ -27,46 +18,31 @@ export const MonitoringWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   const { watch } = useContext(WatchContext);
   const { history } = useAppContext();
 
-  const systemWatchTitle = (
-    <FormattedMessage
-      id="xpack.watcher.sections.watchEdit.monitoring.edit.calloutTitleText"
-      defaultMessage="This watch cannot be edited."
-    />
-  );
-
   const systemWatchMessage = (
     <FormattedMessage
       id="xpack.watcher.sections.watchEdit.monitoring.edit.calloutDescriptionText"
-      defaultMessage="Watch '{watchName}' is a system watch and cannot be edited. {watchStatusLink}"
+      defaultMessage="Watch '{watchName}' is a system watch and cannot be edited."
       values={{
         watchName: watch.name,
-        watchStatusLink: (
-          <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
-            <FormattedMessage
-              id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
-              defaultMessage="View watch status."
-            />
-          </EuiLink>
-        ),
       }}
     />
   );
 
   return (
-    <EuiPageContent>
-      <EuiFlexGroup>
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1>{pageTitle}</h1>
-          </EuiTitle>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer size="s" />
-      <EuiCallOut title={systemWatchTitle} iconType="pin">
-        <EuiText>
-          <p>{systemWatchMessage}</p>
-        </EuiText>
-      </EuiCallOut>
+    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiEmptyPrompt
+        iconType=""
+        title={<h1>{pageTitle}</h1>}
+        body={<p>{systemWatchMessage}</p>}
+        actions={[
+          <EuiLink {...reactRouterNavigate(history, `/watches/watch/${watch.id}/status`)}>
+            <FormattedMessage
+              id="xpack.watcher.sections.watchEdit.monitoring.header.watchLinkTitle"
+              defaultMessage="View watch status"
+            />
+          </EuiLink>,
+        ]}
+      />
     </EuiPageContent>
   );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
index 2f89a3bc2be64..6587974363a80 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
@@ -18,13 +18,14 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiPageContent,
   EuiPopover,
   EuiPopoverTitle,
   EuiSelect,
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiPageHeader,
+  EuiPageContentBody,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -236,19 +237,15 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
   };
 
   return (
-    <EuiPageContent>
-      <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexEnd">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
-            <h1 data-test-subj="pageTitle">{pageTitle}</h1>
-          </EuiTitle>
-          <EuiSpacer size="s" />
-          <EuiText size="s" color="subdued">
-            {watch.titleDescription}
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiSpacer />
+    <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+      <EuiPageHeader
+        pageTitle={<span data-test-subj="pageTitle">{pageTitle}</span>}
+        description={watch.titleDescription}
+        bottomBorder
+      />
+
+      <EuiSpacer size="l" />
+
       <EuiForm data-test-subj="thresholdWatchForm">
         {serverError && (
           <Fragment>
@@ -957,6 +954,6 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
           close={() => setIsRequestVisible(false)}
         />
       ) : null}
-    </EuiPageContent>
+    </EuiPageContentBody>
   );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx
index 525ae077df655..fa3c7e374f7b5 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_edit/components/watch_edit.tsx
@@ -10,19 +10,20 @@ import { isEqual } from 'lodash';
 
 import { EuiPageContent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
 import { FormattedMessage } from '@kbn/i18n/react';
-import { Watch } from '../../../models/watch';
+
 import { WATCH_TYPES } from '../../../../../common/constants';
 import { BaseWatch } from '../../../../../common/types/watch_types';
-import { getPageErrorCode, PageError, SectionLoading, SectionError } from '../../../components';
+import { getPageErrorCode, PageError, SectionLoading } from '../../../components';
 import { loadWatch } from '../../../lib/api';
 import { listBreadcrumb, editBreadcrumb, createBreadcrumb } from '../../../lib/breadcrumbs';
+import { useAppContext } from '../../../app_context';
+import { Watch } from '../../../models/watch';
+import { PageError as GenericPageError } from '../../../shared_imports';
+import { WatchContext } from '../watch_context';
 import { JsonWatchEdit } from './json_watch_edit';
 import { ThresholdWatchEdit } from './threshold_watch_edit';
 import { MonitoringWatchEdit } from './monitoring_watch_edit';
-import { WatchContext } from '../watch_context';
-import { useAppContext } from '../../../app_context';
 
 const getTitle = (watch: BaseWatch) => {
   if (watch.isNew) {
@@ -115,7 +116,7 @@ export const WatchEdit = ({
           const loadedWatch = await loadWatch(id);
           dispatch({ command: 'setWatch', payload: loadedWatch });
         } catch (error) {
-          dispatch({ command: 'setError', payload: error });
+          dispatch({ command: 'setError', payload: error.body });
         }
       } else if (type) {
         const WatchType = Watch.getWatchTypes()[type];
@@ -135,36 +136,34 @@ export const WatchEdit = ({
   const errorCode = getPageErrorCode(loadError);
   if (errorCode) {
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
         <PageError errorCode={errorCode} id={id} />
       </EuiPageContent>
     );
-  }
-
-  if (loadError) {
+  } else if (loadError) {
     return (
-      <EuiPageContent>
-        <SectionError
-          title={
-            <FormattedMessage
-              id="xpack.watcher.sections.watchEdit.errorTitle"
-              defaultMessage="Error loading watch"
-            />
-          }
-          error={loadError}
-        />
-      </EuiPageContent>
+      <GenericPageError
+        title={
+          <FormattedMessage
+            id="xpack.watcher.sections.watchEdit.errorTitle"
+            defaultMessage="Error loading watch"
+          />
+        }
+        error={loadError}
+      />
     );
   }
 
   if (!watch) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchEdit.loadingWatchDescription"
-          defaultMessage="Loading watch…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchEdit.loadingWatchDescription"
+            defaultMessage="Loading watch…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx b/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
index 0e89871063507..31accef0b6369 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_list/components/watch_list.tsx
@@ -11,25 +11,25 @@ import {
   CriteriaWithPagination,
   EuiButton,
   EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiInMemoryTable,
   EuiLink,
   EuiPageContent,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiToolTip,
   EuiEmptyPrompt,
   EuiButtonIcon,
   EuiPopover,
   EuiContextMenuPanel,
   EuiContextMenuItem,
+  EuiPageHeader,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Moment } from 'moment';
 
+import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
+
 import { REFRESH_INTERVALS, PAGINATION, WATCH_TYPES } from '../../../../../common/constants';
 import { listBreadcrumb } from '../../../lib/breadcrumbs';
 import {
@@ -37,15 +37,13 @@ import {
   PageError,
   DeleteWatchesModal,
   WatchStatus,
-  SectionError,
   SectionLoading,
   Error,
 } from '../../../components';
 import { useLoadWatches } from '../../../lib/api';
 import { goToCreateThresholdAlert, goToCreateAdvancedWatch } from '../../../lib/navigation';
 import { useAppContext } from '../../../app_context';
-
-import { reactRouterNavigate } from '../../../../../../../../src/plugins/kibana_react/public';
+import { PageError as GenericPageError } from '../../../shared_imports';
 
 export const WatchList = () => {
   // hooks
@@ -173,21 +171,36 @@ export const WatchList = () => {
 
   if (isWatchesLoading) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchList.loadingWatchesDescription"
-          defaultMessage="Loading watches…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchList.loadingWatchesDescription"
+            defaultMessage="Loading watches…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
-  if (getPageErrorCode(error)) {
+  const errorCode = getPageErrorCode(error);
+  if (errorCode) {
     return (
-      <EuiPageContent>
-        <PageError />
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <PageError errorCode={errorCode} />
       </EuiPageContent>
     );
+  } else if (error) {
+    return (
+      <GenericPageError
+        title={
+          <FormattedMessage
+            id="xpack.watcher.sections.watchList.errorTitle"
+            defaultMessage="Error loading watches"
+          />
+        }
+        error={(error as unknown) as Error}
+      />
+    );
   }
 
   if (availableWatches && availableWatches.length === 0) {
@@ -206,7 +219,7 @@ export const WatchList = () => {
     );
 
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
         <EuiEmptyPrompt
           iconType="managementApp"
           title={
@@ -227,19 +240,7 @@ export const WatchList = () => {
 
   let content;
 
-  if (error) {
-    content = (
-      <SectionError
-        title={
-          <FormattedMessage
-            id="xpack.watcher.sections.watchList.errorTitle"
-            defaultMessage="Error loading watches"
-          />
-        }
-        error={(error as unknown) as Error}
-      />
-    );
-  } else if (availableWatches) {
+  if (availableWatches) {
     const columns = [
       {
         field: 'id',
@@ -463,56 +464,46 @@ export const WatchList = () => {
     );
   }
 
-  if (content) {
-    return (
-      <EuiPageContent>
-        <DeleteWatchesModal
-          callback={(deleted?: string[]) => {
-            if (deleted) {
-              setDeletedWatches([...deletedWatches, ...watchesToDelete]);
-            }
-            setWatchesToDelete([]);
-          }}
-          watchesToDelete={watchesToDelete}
-        />
-
-        <EuiTitle size="l">
-          <EuiFlexGroup alignItems="center">
-            <EuiFlexItem grow={true}>
-              <h1 data-test-subj="appTitle">
-                <FormattedMessage
-                  id="xpack.watcher.sections.watchList.header"
-                  defaultMessage="Watcher"
-                />
-              </h1>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                href={watcherGettingStartedUrl}
-                target="_blank"
-                iconType="help"
-                data-test-subj="documentationLink"
-              >
-                <FormattedMessage
-                  id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
-                  defaultMessage="Watcher docs"
-                />
-              </EuiButtonEmpty>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiTitle>
-
-        <EuiSpacer size="s" />
-
-        <EuiText color="subdued">
-          <p>{watcherDescriptionText}</p>
-        </EuiText>
+  return (
+    <>
+      <EuiPageHeader
+        pageTitle={
+          <span data-test-subj="appTitle">
+            <FormattedMessage
+              id="xpack.watcher.sections.watchList.header"
+              defaultMessage="Watcher"
+            />
+          </span>
+        }
+        bottomBorder
+        rightSideItems={[
+          <EuiButtonEmpty
+            href={watcherGettingStartedUrl}
+            target="_blank"
+            iconType="help"
+            data-test-subj="documentationLink"
+          >
+            <FormattedMessage
+              id="xpack.watcher.sections.watchList.watcherGettingStartedDocsLinkText"
+              defaultMessage="Watcher docs"
+            />
+          </EuiButtonEmpty>,
+        ]}
+        description={watcherDescriptionText}
+      />
+      <DeleteWatchesModal
+        callback={(deleted?: string[]) => {
+          if (deleted) {
+            setDeletedWatches([...deletedWatches, ...watchesToDelete]);
+          }
+          setWatchesToDelete([]);
+        }}
+        watchesToDelete={watchesToDelete}
+      />
 
-        <EuiSpacer size="xl" />
+      <EuiSpacer size="l" />
 
-        {content}
-      </EuiPageContent>
-    );
-  }
-  return null;
+      {content}
+    </>
+  );
 };
diff --git a/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx b/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx
index 1e3548620339a..73400b9ccaaa7 100644
--- a/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx
+++ b/x-pack/plugins/watcher/public/application/sections/watch_status/components/watch_status.tsx
@@ -9,14 +9,10 @@ import React, { useEffect, useState } from 'react';
 import {
   EuiPageContent,
   EuiSpacer,
-  EuiTabs,
-  EuiTab,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiTitle,
   EuiToolTip,
   EuiBadge,
   EuiButtonEmpty,
+  EuiPageHeader,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -88,18 +84,20 @@ export const WatchStatus = ({
 
   if (isWatchDetailLoading) {
     return (
-      <SectionLoading>
-        <FormattedMessage
-          id="xpack.watcher.sections.watchStatus.loadingWatchDetailsDescription"
-          defaultMessage="Loading watch details…"
-        />
-      </SectionLoading>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+        <SectionLoading>
+          <FormattedMessage
+            id="xpack.watcher.sections.watchStatus.loadingWatchDetailsDescription"
+            defaultMessage="Loading watch details…"
+          />
+        </SectionLoading>
+      </EuiPageContent>
     );
   }
 
   if (errorCode) {
     return (
-      <EuiPageContent>
+      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
         <PageError errorCode={errorCode} id={id} />
       </EuiPageContent>
     );
@@ -156,20 +154,11 @@ export const WatchStatus = ({
 
     return (
       <WatchDetailsContext.Provider value={{ watchDetailError, watchDetail, isWatchDetailLoading }}>
-        <EuiPageContent>
-          <DeleteWatchesModal
-            callback={(deleted?: string[]) => {
-              if (deleted) {
-                goToWatchList();
-              }
-              setWatchesToDelete([]);
-            }}
-            watchesToDelete={watchesToDelete}
-          />
-          <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiTitle size="m">
-                <h1 data-test-subj="pageTitle">
+        <>
+          <EuiPageHeader
+            pageTitle={
+              <>
+                <span data-test-subj="pageTitle">
                   <FormattedMessage
                     id="xpack.watcher.sections.watchDetail.header"
                     defaultMessage="Current status for '{watch}'"
@@ -177,40 +166,41 @@ export const WatchStatus = ({
                       watch: watchName ? watchName : watchId,
                     }}
                   />
-                </h1>
-              </EuiTitle>
-            </EuiFlexItem>
-            {isSystemWatch ? (
-              <EuiFlexItem grow={false}>
-                <EuiToolTip
-                  content={
-                    <FormattedMessage
-                      id="xpack.watcher.sections.watchDetail.headerBadgeToolipText"
-                      defaultMessage="You cannot deactivate or delete a system watch."
-                    />
-                  }
-                >
-                  <EuiBadge color="hollow">
-                    <FormattedMessage
-                      id="xpack.watcher.sections.watchDetail.headerBadgeText"
-                      defaultMessage="System watch"
-                    />
-                  </EuiBadge>
-                </EuiToolTip>
-              </EuiFlexItem>
-            ) : (
-              <EuiFlexItem>
-                <EuiFlexGroup justifyContent="flexEnd">
-                  <EuiFlexItem grow={false}>
+                </span>
+                {isSystemWatch && (
+                  <>
+                    {' '}
+                    <EuiToolTip
+                      content={
+                        <FormattedMessage
+                          id="xpack.watcher.sections.watchDetail.headerBadgeToolipText"
+                          defaultMessage="You cannot deactivate or delete a system watch."
+                        />
+                      }
+                    >
+                      <EuiBadge color="hollow">
+                        <FormattedMessage
+                          id="xpack.watcher.sections.watchDetail.headerBadgeText"
+                          defaultMessage="System watch"
+                        />
+                      </EuiBadge>
+                    </EuiToolTip>
+                  </>
+                )}
+              </>
+            }
+            bottomBorder
+            rightSideItems={
+              isSystemWatch
+                ? []
+                : [
                     <EuiButtonEmpty
                       data-test-subj="toggleWatchActivationButton"
                       onClick={() => toggleWatchActivation()}
                       isLoading={isTogglingActivation}
                     >
                       {activationButtonText}
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
+                    </EuiButtonEmpty>,
                     <EuiButtonEmpty
                       data-test-subj="deleteWatchButton"
                       onClick={() => {
@@ -223,30 +213,34 @@ export const WatchStatus = ({
                         id="xpack.watcher.sections.watchHistory.deleteWatchButtonLabel"
                         defaultMessage="Delete"
                       />
-                    </EuiButtonEmpty>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-          <EuiSpacer size="s" />
-          <EuiTabs>
-            {WATCH_STATUS_TABS.map((tab, index) => (
-              <EuiTab
-                onClick={() => {
-                  setSelectedTab(tab.id);
-                }}
-                isSelected={tab.id === selectedTab}
-                key={index}
-                data-test-subj="tab"
-              >
-                {tab.name}
-              </EuiTab>
-            ))}
-          </EuiTabs>
+                    </EuiButtonEmpty>,
+                  ]
+            }
+            tabs={WATCH_STATUS_TABS.map((tab, index) => ({
+              onClick: () => {
+                setSelectedTab(tab.id);
+              },
+              isSelected: tab.id === selectedTab,
+              key: index,
+              'data-test-subj': 'tab',
+              label: tab.name,
+            }))}
+          />
+
           <EuiSpacer size="l" />
+
           {selectedTab === WATCH_ACTIONS_TAB ? <WatchDetail /> : <WatchHistory />}
-        </EuiPageContent>
+
+          <DeleteWatchesModal
+            callback={(deleted?: string[]) => {
+              if (deleted) {
+                goToWatchList();
+              }
+              setWatchesToDelete([]);
+            }}
+            watchesToDelete={watchesToDelete}
+          />
+        </>
       </WatchDetailsContext.Provider>
     );
   }
diff --git a/x-pack/plugins/watcher/public/application/shared_imports.ts b/x-pack/plugins/watcher/public/application/shared_imports.ts
index e3eb11eda77b3..44bef3b0c4f5f 100644
--- a/x-pack/plugins/watcher/public/application/shared_imports.ts
+++ b/x-pack/plugins/watcher/public/application/shared_imports.ts
@@ -12,4 +12,5 @@ export {
   sendRequest,
   useRequest,
   XJson,
+  PageError,
 } from '../../../../../src/plugins/es_ui_shared/public';
diff --git a/yarn.lock b/yarn.lock
index 68d27e955aa12..61c5305821a05 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20304,9 +20304,9 @@ normalize-url@^3.0.0:
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
 normalize-url@^4.1.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
-  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.1.tgz#0dd90cf1288ee1d1313b87081c9a5932ee48518a"
+  integrity sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==
 
 now-and-later@^2.0.0:
   version "2.0.0"