From 4704934c9a009830a79086d178217f9f09a97753 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Tue, 23 Jul 2024 10:45:38 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components (#1010)

* Use EuiSmallButton

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonIcon

Signed-off-by: Miki <miki@amazon.com>

* Use EuiSmallButtonEmpty

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedFormRow

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedField*

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedSelect and EuiCompressedSuperSelect

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedCheckbox and EuiCompressedCheckboxGroup

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedRadio and EuiCompressedRadioGroup

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedSwitch

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedEuiTextArea

Signed-off-by: Miki <miki@amazon.com>

* Use EuiCompressedComboBox

Signed-off-by: Miki <miki@amazon.com>

* Undo unnecessary EuiSmallButton* uses

Signed-off-by: Miki <miki@amazon.com>

* Introduce `compressed` FrequencyPicker` and `DateRangePicker`

Also:
* Clean up some code

Signed-off-by: Miki <miki@amazon.com>

* Update snapshots and fix errors

Also:
* Clean up some code

Signed-off-by: Miki <miki@amazon.com>

---------

Signed-off-by: Miki <miki@amazon.com>

(cherry picked from commit cc8b95964616f23642ca88fc0564cb2fa3840eaf)
Signed-off-by: Miki <miki@amazon.com>
---
 .../Comments/AlertCommentsFlyout.tsx          |   34 +-
 public/components/Comments/CommentEditor.tsx  |   26 +-
 .../components/Comments/ShowAlertComments.tsx |   12 +-
 .../AddAlertingMonitor/AddAlertingMonitor.tsx |   10 +-
 .../AssociateExisting/AssociateExisting.js    |    4 +-
 .../CreateNew/CreateNew.tsx                   |    4 +-
 .../__snapshots__/CreateNew.test.js.snap      |    2 +-
 .../AssociatedMonitors/AssociatedMonitors.tsx |    6 +-
 .../AssociatedMonitors/ConfirmUnlinkModal.js  |   12 +-
 .../AssociatedMonitors.test.js.snap           |    4 +-
 .../EnhancedAccordion/EnhancedAccordion.js    |   10 +-
 .../EnhancedAccordion.test.js.snap            |    2 +-
 .../__snapshots__/flyouts.test.js.snap        |    2 +-
 .../Flyout/flyouts/alertsDashboard.js         |    4 +-
 .../AlertsDashboardFlyoutComponent.js         |   14 +-
 ...lertsDashboardFlyoutComponent.test.js.snap |    4 +-
 .../components/Flyout/flyouts/dataSources.js  |   10 +-
 .../FormikCheckbox/FormikCheckbox.js          |    4 +-
 .../__snapshots__/FormikCheckbox.test.js.snap |    6 +-
 .../FormikCodeEditor.test.js.snap             |    2 +-
 .../FormikComboBox/FormikComboBox.js          |    4 +-
 .../FormikFieldNumber/FormikFieldNumber.js    |    4 +-
 .../FormikFieldNumber.test.js.snap            |    4 +-
 .../FormikFieldPassword.js                    |    4 +-
 .../FormikFieldPassword.test.js.snap          |    4 +-
 .../FormikFieldRadio/FormikFieldRadio.js      |    4 +-
 .../FormikFieldText/FormikFieldText.js        |    4 +-
 .../FormikFieldText.test.js.snap              |    4 +-
 .../FormikFormRow/FormikFormRow.js            |    6 +-
 .../__snapshots__/FormikFormRow.test.js.snap  |    2 +-
 .../FormControls/FormikSelect/FormikSelect.js |    4 +-
 .../__snapshots__/FormikSelect.test.js.snap   |    4 +-
 .../FormControls/FormikSwitch/FormikSwitch.js |    4 +-
 .../__snapshots__/FormikSwitch.test.js.snap   |   11 +-
 .../FormikTextArea/FormikTextArea.js          |    4 +-
 .../__snapshots__/FormikTextArea.test.js.snap |    4 +-
 .../EmptyFeaturesMessage.js                   |   10 +-
 .../AssociateMonitors.test.js.snap            |    2 +-
 .../components/MonitorsList.js                |   12 +-
 .../__snapshots__/MonitorsEditor.test.js.snap |    2 +-
 .../__snapshots__/MonitorsList.test.js.snap   |   16 +-
 .../ClusterMetricsMonitor.js                  |   17 +-
 .../ClusterMetricsMonitor.test.js.snap        |   10 +-
 .../DocumentLevelQuery.js                     |   12 +-
 .../DocumentLevelQueryTag.js                  |   10 +-
 .../ExtractionQuery/ExtractionQuery.js        |    6 +-
 .../ExtractionQuery.test.js.snap              |    4 +-
 .../MonitorDefinition.test.js.snap            |    6 +-
 .../MonitorExpressions.test.js.snap           |   10 +-
 .../expressions/GroupByPopover.js             |   10 +-
 .../expressions/MetricPopover.js              |   16 +-
 .../__snapshots__/ForExpression.test.js.snap  |   10 +-
 .../__snapshots__/MonitorState.test.js.snap   |    4 +-
 .../MonitorTimeField.test.js.snap             |    8 +-
 .../components/MonitorType/MonitorType.js     |   10 +-
 .../QueryPerformance/QueryPerformance.js      |   10 +-
 .../components/Schedule/Frequencies/Daily.js  |   61 +-
 .../Schedule/Frequencies/FrequencyPicker.js   |    2 +-
 .../Schedule/Frequencies/Monthly.js           |    4 +-
 .../components/Schedule/Frequencies/Weekly.js |   10 +-
 .../__snapshots__/Frequencies.test.js.snap    |   44 +-
 .../AnomalyDetector.test.js.snap              |   30 +-
 .../containers/CreateMonitor/CreateMonitor.js |   10 +-
 .../containers/DefineMonitor/DefineMonitor.js |    6 +-
 .../__snapshots__/DefineMonitor.test.js.snap  |    4 +-
 .../__snapshots__/MonitorIndex.test.js.snap   |   30 +-
 .../WorkflowDetails.test.js.snap              |   20 +-
 .../CreateTrigger/components/Action/Action.js |   22 +-
 .../Action/__snapshots__/Action.test.js.snap  |   88 +-
 .../components/Action/actions/Message.js      |   37 +-
 .../__snapshots__/Message.test.js.snap        |   28 +-
 .../ActionEmptyPrompt/ActionEmptyPrompt.js    |    6 +-
 .../ActionEmptyPrompt.test.js.snap            |    4 +-
 .../AddActionButton/AddActionButton.js        |    6 +-
 .../BucketLevelTriggerExpression.js           |   36 +-
 .../BucketLevelTriggerExpression.test.js.snap |    4 +-
 .../BucketLevelTriggerQuery.js                |   10 +-
 .../ExpressionBuilder.js                      |    6 +-
 .../CompositeTriggerCondition.test.js.snap    |    4 +-
 .../ExpressionBuilder.test.js.snap            |    2 +-
 .../ExpressionEditor.test.js.snap             |    2 +-
 .../TriggerExpressions/TriggerExpressions.js  |   27 +-
 .../TriggerExpressions.test.js.snap           |    6 +-
 .../components/TriggerQuery/TriggerQuery.js   |   14 +-
 .../__snapshots__/TriggerQuery.test.js.snap   |    6 +-
 .../ConfigureTriggers/ConfigureTriggers.js    |    4 +-
 .../CreateTrigger/CreateTrigger.js            |   10 +-
 .../NotificationConfigDialog.js               |    8 +-
 .../TriggerNotifications.js                   |    4 +-
 .../TriggerNotificationsContent.js            |   10 +-
 .../DefineCompositeLevelTrigger.test.js.snap  |   18 +-
 .../TriggerNotifications.test.js.snap         |    2 +-
 .../TriggerNotificationsContent.test.js.snap  |   20 +-
 .../DocumentLevelTriggerExpression.js         |   10 +-
 .../AnomalyDetectorTrigger.test.js.snap       |    2 +-
 .../AcknowledgeAlertsModal.js                 |   14 +-
 .../ChainedAlertDetailsFlyout.tsx             |   10 +-
 .../DashboardControls/DashboardControls.js    |   18 +-
 .../DashboardControls.test.js.snap            |   12 +-
 .../DashboardEmptyPrompt.js                   |    8 +-
 .../DashboardEmptyPrompt.test.js.snap         |    2 +-
 .../FindingsDashboard/FindingFlyout.js        |    4 +-
 .../pages/Dashboard/containers/Dashboard.js   |   18 +-
 .../Dashboard/containers/FindingsDashboard.js |    4 +-
 .../__snapshots__/Dashboard.test.js.snap      | 1577 ++++++++++-------
 .../DestinationsActions.js                    |    6 +-
 .../DestinationsActions.test.js.snap          |    2 +-
 .../DestinationsControls.js                   |   12 +-
 .../DestinationsControls.test.js.snap         |    8 +-
 .../EmptyDestinations/EmptyDestinations.js    |    6 +-
 .../EmptyDestinations.test.js.snap            |    2 +-
 .../FullPageNotificationsInfoCallOut.js       |   10 +-
 ...lPageNotificationsInfoCallOut.test.js.snap |    4 +-
 .../NotificationsInfoCallOut.js               |    8 +-
 .../NotificationsInfoCallOut.test.js.snap     |    4 +-
 .../createDestinations/Email/EmailGroup.js    |    2 +-
 .../createDestinations/Email/Sender.js        |    2 +-
 .../CreateDestination/CreateDestination.js    |    6 +-
 .../EmailRecipients/EmailRecipients.js        |    6 +-
 .../EmailSender/EmailSender.js                |    6 +-
 .../ManageEmailGroups/ManageEmailGroups.js    |    4 +-
 .../ManageSenders/ManageSenders.js            |    6 +-
 .../DestinationsList.test.js.snap             |  279 +--
 .../EmptyHistory/EmptyHistory.js              |    6 +-
 .../__snapshots__/EmptyHistory.test.js.snap   |    2 +-
 .../containers/MonitorDetails.js              |   18 +-
 .../MonitorHistory/DateRangePicker.js         |    5 +
 .../MonitorHistory/MonitorHistory.js          |    1 +
 .../MonitorActions/MonitorActions.js          |   18 +-
 .../__snapshots__/MonitorActions.test.js.snap |    6 +-
 .../MonitorControls/MonitorControls.js        |   12 +-
 .../MonitorEmptyPrompt/MonitorEmptyPrompt.js  |   10 +-
 .../MonitorEmptyPrompt.test.js.snap           |    2 +-
 133 files changed, 1739 insertions(+), 1426 deletions(-)

diff --git a/public/components/Comments/AlertCommentsFlyout.tsx b/public/components/Comments/AlertCommentsFlyout.tsx
index f112c4c49..d7e677cf4 100644
--- a/public/components/Comments/AlertCommentsFlyout.tsx
+++ b/public/components/Comments/AlertCommentsFlyout.tsx
@@ -5,17 +5,17 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { Comment } from "../../models/Comments";
-import { 
-  EuiFlyout, 
-  EuiFlyoutHeader, 
-  EuiFlyoutBody, 
-  EuiCommentList, 
-  EuiText, 
-  EuiButtonIcon, 
-  EuiContextMenuItem, 
+import {
+  EuiFlyout,
+  EuiFlyoutHeader,
+  EuiFlyoutBody,
+  EuiCommentList,
+  EuiText,
+  EuiButtonIcon,
+  EuiContextMenuItem,
   EuiContextMenuPanel,
-  EuiPopover, 
-  EuiTitle, 
+  EuiPopover,
+  EuiTitle,
   EuiSpacer,
   EuiCallOut,
   EuiLink
@@ -77,7 +77,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
 
   const createComment = async () => {
     setCreatePending(true);
-    await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({ 
+    await httpClient.post(`../api/alerting/comments/${alertId}`, { body: JSON.stringify({
       content: draftCommentContent
     })});
 
@@ -150,7 +150,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         onCancel={() => onEditCancel(comment, idx)}
       />
     );
-  
+
     const customActions = comment.state === 'readonly' && (
       <EuiPopover
         button={
@@ -186,7 +186,7 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         />
       </EuiPopover>
     );
-  
+
     return {
       username: comment.user || 'Unknown',
       event: `${comment.last_updated_time ? 'edited' : 'added'} comment on`,
@@ -204,12 +204,12 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        <EuiCallOut 
+        <EuiCallOut
           iconType='iInCircle'
           title='Experimental'>
-          <span>The feature is experimental and should not be used in a production environment. 
+          <span>The feature is experimental and should not be used in a production environment.
             The posted comments will be impacted if the feature is deactivated.
-            For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink> 
+            For more information see <EuiLink href="https://opensearch.org/docs/latest/observing-your-data/alerting/index/" target="_blank">Documentation.</EuiLink>
             To leave feedback, visit <EuiLink href="https://github.com/opensearch-project/OpenSearch-Dashboards/issues/6999" target="_blank">github.com</EuiLink>.
           </span>
         </EuiCallOut>
@@ -236,4 +236,4 @@ export const AlertCommentsFlyout: React.FC<AlertCommentsFlyoutProps> = ({ alertI
       </EuiFlyoutBody>
     </EuiFlyout>
   )
-}
\ No newline at end of file
+}
diff --git a/public/components/Comments/CommentEditor.tsx b/public/components/Comments/CommentEditor.tsx
index 1b6a00e05..0684f29ab 100644
--- a/public/components/Comments/CommentEditor.tsx
+++ b/public/components/Comments/CommentEditor.tsx
@@ -4,10 +4,10 @@
 */
 
 import React from "react";
-import { 
-  EuiFlexGroup, 
-  EuiFlexItem, 
-  EuiButton 
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSmallButton
 } from "@elastic/eui";
 
 export interface CommentEditorProps {
@@ -19,13 +19,13 @@ export interface CommentEditorProps {
   onContentChange: React.ChangeEventHandler<HTMLTextAreaElement>;
 }
 
-export const CommentEditor: React.FC<CommentEditorProps> = ({ 
-  isLoading, 
+export const CommentEditor: React.FC<CommentEditorProps> = ({
+  isLoading,
   draftCommentContent,
   saveDisabled,
-  onSave, 
+  onSave,
   onCancel,
-  onContentChange, 
+  onContentChange,
 }) => (
   <EuiFlexGroup gutterSize="s" direction="column" >
     <EuiFlexItem>
@@ -35,17 +35,17 @@ export const CommentEditor: React.FC<CommentEditorProps> = ({
       <EuiFlexGroup gutterSize="s">
         {onCancel && (
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={onCancel}>
+            <EuiSmallButton onClick={onCancel}>
               Cancel
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         )}
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
+          <EuiSmallButton onClick={onSave} color="primary" isLoading={isLoading} disabled={saveDisabled} fill>
             Save
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexItem>
   </EuiFlexGroup>
-)
\ No newline at end of file
+)
diff --git a/public/components/Comments/ShowAlertComments.tsx b/public/components/Comments/ShowAlertComments.tsx
index 7b2b55dc1..340b6f471 100644
--- a/public/components/Comments/ShowAlertComments.tsx
+++ b/public/components/Comments/ShowAlertComments.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useEffect, useState } from "react";
 import { Comment } from "../../models/Comments";
-import { EuiButtonIcon, EuiToolTip } from "@elastic/eui";
+import { EuiSmallButtonIcon, EuiToolTip } from "@elastic/eui";
 import { AlertCommentsFlyout } from "./AlertCommentsFlyout";
 
 export interface ShowAlertCommentsProps {
@@ -15,19 +15,19 @@ export interface ShowAlertCommentsProps {
 
 export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, httpClient }) => {
   const [commentsFlyout, setCommentsFlyout] = useState<React.ReactNode | null>(null);
-  
-  const showCommentsFlyout = useCallback(() => { 
+
+  const showCommentsFlyout = useCallback(() => {
     setCommentsFlyout(<AlertCommentsFlyout
       alertId={alert.id}
       httpClient={httpClient}
-      closeFlyout={() => setCommentsFlyout(null)} 
+      closeFlyout={() => setCommentsFlyout(null)}
     />);
   }, [setCommentsFlyout]);
 
   return (
     <>
       <EuiToolTip content={'Show comments'}>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           aria-label={'Show comments'}
           data-test-subj={`show-comments-icon`}
           iconType={'editorComment'}
@@ -37,4 +37,4 @@ export const ShowAlertComments: React.FC<ShowAlertCommentsProps> = ({ alert, htt
       {commentsFlyout}
     </>
   )
-}
\ No newline at end of file
+}
diff --git a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.tsx b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.tsx
index d8e4f734f..8d3341b3f 100644
--- a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.tsx
+++ b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AddAlertingMonitor.tsx
@@ -12,8 +12,8 @@ import {
   EuiFlyoutFooter,
   EuiTitle,
   EuiSpacer,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFormFieldset,
   EuiCheckableCard,
   EuiText
@@ -225,17 +225,17 @@ function AddAlertingMonitor({
               <EuiFlyoutFooter>
                 <EuiFlexGroup justifyContent="spaceBetween">
                   <EuiFlexItem grow={false}>
-                    <EuiButtonEmpty onClick={closeFlyout}>Cancel</EuiButtonEmpty>
+                    <EuiSmallButtonEmpty onClick={closeFlyout}>Cancel</EuiSmallButtonEmpty>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiSmallButton
                       onClick={() => onSubmit({ handleSubmit, validateForm })}
                       fill
                       isLoading={isLoading}
                       disabled={!isAssociateAllowed}
                     >
                       {flyoutMode === 'existing' ? 'Associate' : 'Create'} monitor
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlyoutFooter>
diff --git a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/AssociateExisting.js b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/AssociateExisting.js
index b05c2cf14..1fa3b2dcd 100644
--- a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/AssociateExisting.js
+++ b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/AssociateExisting/AssociateExisting.js
@@ -9,7 +9,7 @@ import {
   EuiSpacer,
   EuiIcon,
   EuiText,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiLoadingSpinner,
   EuiLink,
   EuiFlexGroup,
@@ -94,7 +94,7 @@ function AssociateExisting({ monitors, selectedMonitorId, setSelectedMonitorId }
       <EuiSpacer size="m" />
       {!monitors && <EuiLoadingSpinner size="l" />}
       {monitors && (
-        <EuiComboBox
+        <EuiCompressedComboBox
           id="associate-existing__select"
           options={options}
           selectedOptions={selectedOptions}
diff --git a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.tsx b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.tsx
index 5c5f01438..1932e1e17 100644
--- a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.tsx
+++ b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/CreateNew.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useMemo, useState } from 'react';
-import { EuiCallOut, EuiIcon, EuiSpacer, EuiSwitch, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiCallOut, EuiIcon, EuiSpacer, EuiCompressedSwitch, EuiText, EuiTitle } from '@elastic/eui';
 import _ from 'lodash';
 import { FieldArray } from 'formik';
 import { EmbeddableRenderer, ErrorEmbeddable } from '../../../../../../../src/plugins/embeddable/public';
@@ -123,7 +123,7 @@ function CreateNew({ embeddable, flyoutMode, formikProps, history, setFlyout, de
             {title}
           </h4>
         </EuiTitle>
-        <EuiSwitch
+        <EuiCompressedSwitch
           label="Show visualization"
           checked={isShowVis}
           onChange={() => setIsShowVis(!isShowVis)}
diff --git a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap
index 9488e4705..4e68c404a 100644
--- a/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap
+++ b/public/components/FeatureAnywhereContextMenu/AddAlertingMonitor/CreateNew/__snapshots__/CreateNew.test.js.snap
@@ -36,7 +36,7 @@ exports[`CreateNew renders 1`] = `
         />
       </h4>
     </EuiTitle>
-    <EuiSwitch
+    <EuiCompressedSwitch
       checked={false}
       label="Show visualization"
       onChange={[Function]}
diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/AssociatedMonitors.tsx b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/AssociatedMonitors.tsx
index 08c064726..4381d45c5 100644
--- a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/AssociatedMonitors.tsx
+++ b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/AssociatedMonitors.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useState } from 'react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -125,9 +125,9 @@ const AssociatedMonitors = ({ embeddable, closeFlyout, setFlyoutMode, monitors,
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton iconType="link" isDisabled={!isAssociateAllowed} fill onClick={() => setFlyoutMode('existing')}>
+            <EuiSmallButton iconType="link" isDisabled={!isAssociateAllowed} fill onClick={() => setFlyoutMode('existing')}>
               Associate a monitor
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer size="l" />
diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/ConfirmUnlinkModal.js b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/ConfirmUnlinkModal.js
index 63ed4af5f..7ecc36e77 100644
--- a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/ConfirmUnlinkModal.js
+++ b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/ConfirmUnlinkModal.js
@@ -5,8 +5,8 @@
 
 import React, { useState } from 'react';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -35,11 +35,11 @@ export const ConfirmUnlinkDetectorModal = (props) => {
         </EuiModalBody>
         <EuiModalFooter>
           {isLoading ? null : (
-            <EuiButtonEmpty data-test-subj="cancelButton" onClick={props.onHide}>
+            <EuiSmallButtonEmpty data-test-subj="cancelButton" onClick={props.onHide}>
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           )}
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="confirmButton"
             color="primary"
             fill
@@ -50,7 +50,7 @@ export const ConfirmUnlinkDetectorModal = (props) => {
             }}
           >
             {'Remove association'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/__snapshots__/AssociatedMonitors.test.js.snap b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/__snapshots__/AssociatedMonitors.test.js.snap
index d32070857..4ce977175 100644
--- a/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/__snapshots__/AssociatedMonitors.test.js.snap
+++ b/public/components/FeatureAnywhereContextMenu/AssociatedMonitors/__snapshots__/AssociatedMonitors.test.js.snap
@@ -33,14 +33,14 @@ exports[`AssociatedMonitors renders 1`] = `
       <EuiFlexItem
         grow={false}
       >
-        <EuiButton
+        <EuiSmallButton
           fill={true}
           iconType="link"
           isDisabled={true}
           onClick={[Function]}
         >
           Associate a monitor
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer
diff --git a/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.js b/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.js
index 5cfa6c1f5..5833b0118 100644
--- a/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.js
+++ b/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/EnhancedAccordion.js
@@ -7,8 +7,8 @@ import React from 'react';
 import {
   EuiTitle,
   EuiSpacer,
-  EuiButtonIcon,
-  EuiButtonEmpty,
+  EuiSmallButtonIcon,
+  EuiSmallButtonEmpty,
   EuiAccordion,
   EuiPanel,
 } from '@elastic/eui';
@@ -27,7 +27,7 @@ const EnhancedAccordion = ({
 }) => (
   <div className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder euiPanel--flexGrowZero euiSplitPanel euiSplitPanel--row euiCheckableCard">
     <div className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner">
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         color="text"
         onClick={onToggle}
         iconType="arrowRight"
@@ -72,13 +72,13 @@ const EnhancedAccordion = ({
         </EuiAccordion>
       )}
       {isButton && (
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           onClick={onToggle}
           iconType={iconType}
           className="enhanced-accordion__button"
         >
           Add trigger
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       )}
     </div>
   </div>
diff --git a/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/__snapshots__/EnhancedAccordion.test.js.snap b/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/__snapshots__/EnhancedAccordion.test.js.snap
index 73335a69b..324631833 100644
--- a/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/__snapshots__/EnhancedAccordion.test.js.snap
+++ b/public/components/FeatureAnywhereContextMenu/EnhancedAccordion/__snapshots__/EnhancedAccordion.test.js.snap
@@ -7,7 +7,7 @@ exports[`EnhancedAccordion renders 1`] = `
   <div
     className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero euiSplitPanel__inner"
   >
-    <EuiButtonIcon
+    <EuiSmallButtonIcon
       aria-label="Expand"
       className="enhanced-accordion__arrow  "
       color="text"
diff --git a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
index d3b149913..ff5ca1bc8 100644
--- a/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
+++ b/public/components/Flyout/flyouts/__snapshots__/flyouts.test.js.snap
@@ -34,7 +34,7 @@ Object {
     <EuiFlexItem
       grow={false}
     >
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         data-test-subj="alertsDashboardFlyout_closeButton_undefined"
         display="empty"
         iconSize="m"
diff --git a/public/components/Flyout/flyouts/alertsDashboard.js b/public/components/Flyout/flyouts/alertsDashboard.js
index db99eb150..26ac0c5fc 100644
--- a/public/components/Flyout/flyouts/alertsDashboard.js
+++ b/public/components/Flyout/flyouts/alertsDashboard.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiButtonIcon, EuiTitle, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiSmallButtonIcon, EuiTitle, EuiFlexItem } from '@elastic/eui';
 import AlertsDashboardFlyoutComponent from './components/AlertsDashboardFlyoutComponent';
 
 const alertsDashboard = (payload) => {
@@ -29,7 +29,7 @@ const alertsDashboard = (payload) => {
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             data-test-subj={`alertsDashboardFlyout_closeButton_${trigger_name}`}
             iconType="cross"
             display="empty"
diff --git a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
index 77611e439..bd82b436e 100644
--- a/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
+++ b/public/components/Flyout/flyouts/components/AlertsDashboardFlyoutComponent.js
@@ -7,7 +7,7 @@ import React, { Component } from 'react';
 import _ from 'lodash';
 import {
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -18,7 +18,7 @@ import {
   EuiTabs,
   EuiText,
   EuiToolTip,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
 } from '@elastic/eui';
 import { getTime } from '../../../../pages/MonitorDetails/components/MonitorOverview/utils/getOverviewStats';
 import { PLUGIN_NAME } from '../../../../../utils/constants';
@@ -368,7 +368,7 @@ export default class AlertsDashboardFlyoutComponent extends Component {
               {
                 render: (alert) => (
                   <EuiToolTip content={'View details'}>
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label={'View details'}
                       data-test-subj={`view-details-icon`}
                       iconType={'inspect'}
@@ -419,22 +419,22 @@ export default class AlertsDashboardFlyoutComponent extends Component {
 
     const actions = () => {
       const actions = [
-        <EuiButton
+        <EuiSmallButton
           onClick={this.acknowledgeAlerts}
           disabled={selectedItems.length <= 0}
           data-test-subj={'flyoutAcknowledgeAlertsButton'}
         >
           Acknowledge
-        </EuiButton>,
+        </EuiSmallButton>,
       ];
       if (!_.isEmpty(detectorId)) {
         actions.unshift(
-          <EuiButton
+          <EuiSmallButton
             href={`${OPENSEARCH_DASHBOARDS_AD_PLUGIN}#/detectors/${detectorId}`}
             target="_blank"
           >
             View detector <EuiIcon type="popout" />
-          </EuiButton>
+          </EuiSmallButton>
         );
       }
       return actions;
diff --git a/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap b/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
index 95cfb576a..539f38a99 100644
--- a/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
+++ b/public/components/Flyout/flyouts/components/__snapshots__/AlertsDashboardFlyoutComponent.test.js.snap
@@ -177,13 +177,13 @@ exports[`AlertsDashboardFlyoutComponent renders 1`] = `
   <ContentPanel
     actions={
       Array [
-        <EuiButton
+        <EuiSmallButton
           data-test-subj="flyoutAcknowledgeAlertsButton"
           disabled={true}
           onClick={[Function]}
         >
           Acknowledge
-        </EuiButton>,
+        </EuiSmallButton>,
       ]
     }
     bodyStyles={
diff --git a/public/components/Flyout/flyouts/dataSources.js b/public/components/Flyout/flyouts/dataSources.js
index 424687506..d3e97ae29 100644
--- a/public/components/Flyout/flyouts/dataSources.js
+++ b/public/components/Flyout/flyouts/dataSources.js
@@ -4,7 +4,13 @@
  */
 
 import React from 'react';
-import { EuiBasicTable, EuiFlexGroup, EuiButtonIcon, EuiTitle, EuiFlexItem } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiFlexGroup,
+  EuiSmallButtonIcon,
+  EuiTitle,
+  EuiFlexItem,
+} from '@elastic/eui';
 import { MONITOR_TYPE } from '../../../utils/constants';
 
 export const DATA_SOURCES_FLYOUT_TYPE = 'dataSources';
@@ -76,7 +82,7 @@ const dataSources = ({
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             data-test-subj={'dataSourcesFlyout_closeButton'}
             iconType={'cross'}
             display={'empty'}
diff --git a/public/components/FormControls/FormikCheckbox/FormikCheckbox.js b/public/components/FormControls/FormikCheckbox/FormikCheckbox.js
index b107e1206..c0b1bbde9 100644
--- a/public/components/FormControls/FormikCheckbox/FormikCheckbox.js
+++ b/public/components/FormControls/FormikCheckbox/FormikCheckbox.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiCheckbox } from '@elastic/eui';
+import { EuiCompressedCheckbox } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -33,7 +33,7 @@ const FormikCheckbox = ({
 );
 
 const FieldCheckbox = ({ name, field: { value, ...rest }, inputProps }) => (
-  <EuiCheckbox name={name} id={name} checked={value} {...inputProps} {...rest} />
+  <EuiCompressedCheckbox name={name} id={name} checked={value} {...inputProps} {...rest} />
 );
 
 FormikCheckbox.propTypes = {
diff --git a/public/components/FormControls/FormikCheckbox/__snapshots__/FormikCheckbox.test.js.snap b/public/components/FormControls/FormikCheckbox/__snapshots__/FormikCheckbox.test.js.snap
index a48e1f71d..656cf8241 100644
--- a/public/components/FormControls/FormikCheckbox/__snapshots__/FormikCheckbox.test.js.snap
+++ b/public/components/FormControls/FormikCheckbox/__snapshots__/FormikCheckbox.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormikCheckbox render 1`] = `
 <div
-  class="euiCheckbox euiCheckbox--noLabel"
+  class="euiCheckbox euiCheckbox--noLabel euiCheckbox--compressed"
 >
   <input
     class="euiCheckbox__input"
@@ -18,14 +18,14 @@ exports[`FormikCheckbox render 1`] = `
 
 exports[`FormikCheckbox render formRow 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="testing-form-row-row"
 >
   <div
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiCheckbox euiCheckbox--noLabel"
+      class="euiCheckbox euiCheckbox--noLabel euiCheckbox--compressed"
     >
       <input
         class="euiCheckbox__input"
diff --git a/public/components/FormControls/FormikCodeEditor/__snapshots__/FormikCodeEditor.test.js.snap b/public/components/FormControls/FormikCodeEditor/__snapshots__/FormikCodeEditor.test.js.snap
index 9c737bd95..37701701b 100644
--- a/public/components/FormControls/FormikCodeEditor/__snapshots__/FormikCodeEditor.test.js.snap
+++ b/public/components/FormControls/FormikCodeEditor/__snapshots__/FormikCodeEditor.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormikCodeEditor render formRow 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="testing-form-row-row"
 >
   <div
diff --git a/public/components/FormControls/FormikComboBox/FormikComboBox.js b/public/components/FormControls/FormikComboBox/FormikComboBox.js
index 61e569775..4fe0cd316 100644
--- a/public/components/FormControls/FormikComboBox/FormikComboBox.js
+++ b/public/components/FormControls/FormikComboBox/FormikComboBox.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiComboBox } from '@elastic/eui';
+import { EuiCompressedComboBox } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -38,7 +38,7 @@ const ComboBox = ({
   field,
   inputProps: { onBlur, onChange, onCreateOption, ...rest },
 }) => (
-  <EuiComboBox
+  <EuiCompressedComboBox
     name={name}
     id={name}
     onChange={
diff --git a/public/components/FormControls/FormikFieldNumber/FormikFieldNumber.js b/public/components/FormControls/FormikFieldNumber/FormikFieldNumber.js
index fa64c722a..44a2c3b01 100644
--- a/public/components/FormControls/FormikFieldNumber/FormikFieldNumber.js
+++ b/public/components/FormControls/FormikFieldNumber/FormikFieldNumber.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFieldNumber } from '@elastic/eui';
+import { EuiCompressedFieldNumber } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -33,7 +33,7 @@ const FormikFieldNumber = ({
 );
 
 const FieldNumber = ({ name, form, field, inputProps: { onChange, isInvalid, ...rest } }) => (
-  <EuiFieldNumber
+  <EuiCompressedFieldNumber
     {...field}
     {...rest}
     onChange={(e) =>
diff --git a/public/components/FormControls/FormikFieldNumber/__snapshots__/FormikFieldNumber.test.js.snap b/public/components/FormControls/FormikFieldNumber/__snapshots__/FormikFieldNumber.test.js.snap
index 94e93e189..bdb723abe 100644
--- a/public/components/FormControls/FormikFieldNumber/__snapshots__/FormikFieldNumber.test.js.snap
+++ b/public/components/FormControls/FormikFieldNumber/__snapshots__/FormikFieldNumber.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`FormikFieldNumber renders 1`] = `
 <div
-  class="euiFormControlLayout"
+  class="euiFormControlLayout euiFormControlLayout--compressed"
 >
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
     <input
-      class="euiFieldNumber"
+      class="euiFieldNumber euiFieldNumber--compressed"
       name="testing"
       type="number"
     />
diff --git a/public/components/FormControls/FormikFieldPassword/FormikFieldPassword.js b/public/components/FormControls/FormikFieldPassword/FormikFieldPassword.js
index 9f25f2eb1..bd5f79f82 100644
--- a/public/components/FormControls/FormikFieldPassword/FormikFieldPassword.js
+++ b/public/components/FormControls/FormikFieldPassword/FormikFieldPassword.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFieldPassword } from '@elastic/eui';
+import { EuiCompressedFieldPassword } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -38,7 +38,7 @@ const FieldPassword = ({
   field,
   inputProps: { onChange, isInvalid, onFocus, ...rest },
 }) => (
-  <EuiFieldPassword
+  <EuiCompressedFieldPassword
     {...field}
     {...rest}
     onChange={(e) =>
diff --git a/public/components/FormControls/FormikFieldPassword/__snapshots__/FormikFieldPassword.test.js.snap b/public/components/FormControls/FormikFieldPassword/__snapshots__/FormikFieldPassword.test.js.snap
index 1a14c7612..aaa527916 100644
--- a/public/components/FormControls/FormikFieldPassword/__snapshots__/FormikFieldPassword.test.js.snap
+++ b/public/components/FormControls/FormikFieldPassword/__snapshots__/FormikFieldPassword.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`FormikFieldPassword renders 1`] = `
 <div
-  class="euiFormControlLayout"
+  class="euiFormControlLayout euiFormControlLayout--compressed"
 >
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
     <input
-      class="euiFieldPassword"
+      class="euiFieldPassword euiFieldPassword--compressed"
       name="testing"
       spellcheck="false"
       type="password"
diff --git a/public/components/FormControls/FormikFieldRadio/FormikFieldRadio.js b/public/components/FormControls/FormikFieldRadio/FormikFieldRadio.js
index 30936cd30..331bd8011 100644
--- a/public/components/FormControls/FormikFieldRadio/FormikFieldRadio.js
+++ b/public/components/FormControls/FormikFieldRadio/FormikFieldRadio.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiRadio } from '@elastic/eui';
+import { EuiCompressedRadio } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -33,7 +33,7 @@ const FormikFieldRadio = ({
 );
 
 const FieldRadio = ({ name, form, field, inputProps: { onChange, ...rest } }) => (
-  <EuiRadio
+  <EuiCompressedRadio
     {...field}
     {...rest}
     onChange={(e) =>
diff --git a/public/components/FormControls/FormikFieldText/FormikFieldText.js b/public/components/FormControls/FormikFieldText/FormikFieldText.js
index 32a2fb5f4..0ef96ce97 100644
--- a/public/components/FormControls/FormikFieldText/FormikFieldText.js
+++ b/public/components/FormControls/FormikFieldText/FormikFieldText.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFieldText } from '@elastic/eui';
+import { EuiCompressedFieldText } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -38,7 +38,7 @@ const FieldText = ({
   field,
   inputProps: { onChange, isInvalid, onFocus, ...rest },
 }) => (
-  <EuiFieldText
+  <EuiCompressedFieldText
     {...field}
     {...rest}
     onChange={(e) =>
diff --git a/public/components/FormControls/FormikFieldText/__snapshots__/FormikFieldText.test.js.snap b/public/components/FormControls/FormikFieldText/__snapshots__/FormikFieldText.test.js.snap
index 26362cffe..c9266c991 100644
--- a/public/components/FormControls/FormikFieldText/__snapshots__/FormikFieldText.test.js.snap
+++ b/public/components/FormControls/FormikFieldText/__snapshots__/FormikFieldText.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`FormikFieldText renders 1`] = `
 <div
-  class="euiFormControlLayout"
+  class="euiFormControlLayout euiFormControlLayout--compressed"
 >
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
     <input
-      class="euiFieldText"
+      class="euiFieldText euiFieldText--compressed"
       name="testing"
       type="text"
     />
diff --git a/public/components/FormControls/FormikFormRow/FormikFormRow.js b/public/components/FormControls/FormikFormRow/FormikFormRow.js
index 9de0b7a3a..df4a3fd54 100644
--- a/public/components/FormControls/FormikFormRow/FormikFormRow.js
+++ b/public/components/FormControls/FormikFormRow/FormikFormRow.js
@@ -5,17 +5,17 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFormRow } from '@elastic/eui';
+import { EuiCompressedFormRow } from '@elastic/eui';
 
 const FormikFormRow = ({ children, form, name, rowProps: { isInvalid, error, ...rest } }) => (
-  <EuiFormRow
+  <EuiCompressedFormRow
     id={`${name}-form-row`}
     isInvalid={typeof isInvalid === 'function' ? isInvalid(name, form) : isInvalid}
     error={typeof error === 'function' ? error(name, form) : error}
     {...rest}
   >
     {children}
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 );
 
 FormikFormRow.propTypes = {
diff --git a/public/components/FormControls/FormikFormRow/__snapshots__/FormikFormRow.test.js.snap b/public/components/FormControls/FormikFormRow/__snapshots__/FormikFormRow.test.js.snap
index eda3bc493..91b357a93 100644
--- a/public/components/FormControls/FormikFormRow/__snapshots__/FormikFormRow.test.js.snap
+++ b/public/components/FormControls/FormikFormRow/__snapshots__/FormikFormRow.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormikFormRow renders 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="testing-form-row-row"
 >
   <div
diff --git a/public/components/FormControls/FormikSelect/FormikSelect.js b/public/components/FormControls/FormikSelect/FormikSelect.js
index 218fce5a1..683a3476d 100644
--- a/public/components/FormControls/FormikSelect/FormikSelect.js
+++ b/public/components/FormControls/FormikSelect/FormikSelect.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiSelect } from '@elastic/eui';
+import { EuiCompressedSelect } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -46,7 +46,7 @@ const FieldSelect = ({
   inputProps: { onChange, isInvalid, ...rest },
   selectedOption,
 }) => (
-  <EuiSelect
+  <EuiCompressedSelect
     name={name}
     id={name}
     {...rest}
diff --git a/public/components/FormControls/FormikSelect/__snapshots__/FormikSelect.test.js.snap b/public/components/FormControls/FormikSelect/__snapshots__/FormikSelect.test.js.snap
index 64e27c890..14667efbd 100644
--- a/public/components/FormControls/FormikSelect/__snapshots__/FormikSelect.test.js.snap
+++ b/public/components/FormControls/FormikSelect/__snapshots__/FormikSelect.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`FormikSelect renders 1`] = `
 <div
-  class="euiFormControlLayout"
+  class="euiFormControlLayout euiFormControlLayout--compressed"
 >
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
     <select
-      class="euiSelect"
+      class="euiSelect euiSelect--compressed"
       id="testing"
       name="testing"
     >
diff --git a/public/components/FormControls/FormikSwitch/FormikSwitch.js b/public/components/FormControls/FormikSwitch/FormikSwitch.js
index 25538905b..ea9531b29 100644
--- a/public/components/FormControls/FormikSwitch/FormikSwitch.js
+++ b/public/components/FormControls/FormikSwitch/FormikSwitch.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiSwitch } from '@elastic/eui';
+import { EuiCompressedSwitch } from '@elastic/eui';
 
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
@@ -33,7 +33,7 @@ const FormikSwitch = ({
 );
 
 const FieldSwitch = ({ name, field: { value, ...rest }, inputProps }) => (
-  <EuiSwitch name={name} id={name} checked={value} {...inputProps} {...rest} />
+  <EuiCompressedSwitch name={name} id={name} checked={value} {...inputProps} {...rest} />
 );
 
 FormikSwitch.propTypes = {
diff --git a/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap b/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap
index 147f87549..989233815 100644
--- a/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap
+++ b/public/components/FormControls/FormikSwitch/__snapshots__/FormikSwitch.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`FormikSwitch renders 1`] = `
 <div
-  class="euiSwitch"
+  class="euiSwitch euiSwitch--compressed"
 >
   <button
     aria-checked="false"
@@ -21,14 +21,7 @@ exports[`FormikSwitch renders 1`] = `
       />
       <span
         class="euiSwitch__track"
-      >
-        <div>
-          EuiIconMock
-        </div>
-        <div>
-          EuiIconMock
-        </div>
-      </span>
+      />
     </span>
   </button>
   <span
diff --git a/public/components/FormControls/FormikTextArea/FormikTextArea.js b/public/components/FormControls/FormikTextArea/FormikTextArea.js
index 109312971..b6c0d3f52 100644
--- a/public/components/FormControls/FormikTextArea/FormikTextArea.js
+++ b/public/components/FormControls/FormikTextArea/FormikTextArea.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiTextArea } from '@elastic/eui';
+import { EuiCompressedTextArea } from '@elastic/eui';
 import FormikInputWrapper from '../FormikInputWrapper';
 import FormikFormRow from '../FormikFormRow';
 
@@ -32,7 +32,7 @@ const FormikTextArea = ({
 );
 
 const TextArea = ({ name, form, field, inputProps: { isInvalid, ...rest } }) => (
-  <EuiTextArea
+  <EuiCompressedTextArea
     isInvalid={typeof isInvalid === 'function' ? isInvalid(name, form) : isInvalid}
     {...field}
     {...rest}
diff --git a/public/components/FormControls/FormikTextArea/__snapshots__/FormikTextArea.test.js.snap b/public/components/FormControls/FormikTextArea/__snapshots__/FormikTextArea.test.js.snap
index 3e258d3cb..7388302b9 100644
--- a/public/components/FormControls/FormikTextArea/__snapshots__/FormikTextArea.test.js.snap
+++ b/public/components/FormControls/FormikTextArea/__snapshots__/FormikTextArea.test.js.snap
@@ -2,8 +2,8 @@
 
 exports[`FormikTextArea renders 1`] = `
 <textarea
-  class="euiTextArea euiTextArea--resizeVertical"
+  class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
   name="testing"
-  rows="6"
+  rows="3"
 />
 `;
diff --git a/public/pages/CreateMonitor/components/AnomalyDetectors/EmptyFeaturesMessage/EmptyFeaturesMessage.js b/public/pages/CreateMonitor/components/AnomalyDetectors/EmptyFeaturesMessage/EmptyFeaturesMessage.js
index 4b3e9d910..c665f60e7 100644
--- a/public/pages/CreateMonitor/components/AnomalyDetectors/EmptyFeaturesMessage/EmptyFeaturesMessage.js
+++ b/public/pages/CreateMonitor/components/AnomalyDetectors/EmptyFeaturesMessage/EmptyFeaturesMessage.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiEmptyPrompt, EuiButton, EuiText, EuiLoadingContent } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiSmallButton, EuiText, EuiLoadingContent } from '@elastic/eui';
 import {
   OPENSEARCH_DASHBOARDS_AD_PLUGIN,
   PREVIEW_ERROR_TYPE,
@@ -35,23 +35,23 @@ const ActionUI = ({ errorType, detectorId }) => {
   switch (errorType) {
     case PREVIEW_ERROR_TYPE.NO_FEATURE:
       return (
-        <EuiButton
+        <EuiSmallButton
           data-test-subj="createButton"
           href={`${OPENSEARCH_DASHBOARDS_AD_PLUGIN}#/detectors/${detectorId}/features`}
           target="_blank"
         >
           Add Feature
-        </EuiButton>
+        </EuiSmallButton>
       );
     case PREVIEW_ERROR_TYPE.NO_ENABLED_FEATURES:
       return (
-        <EuiButton
+        <EuiSmallButton
           data-test-subj="editButton"
           href={`${OPENSEARCH_DASHBOARDS_AD_PLUGIN}#/detectors/${detectorId}/features`}
           target="_blank"
         >
           Enable Feature
-        </EuiButton>
+        </EuiSmallButton>
       );
     default:
       console.log('We only deal with feature related error type in this page: ' + errorType);
diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/__snapshots__/AssociateMonitors.test.js.snap b/public/pages/CreateMonitor/components/AssociateMonitors/__snapshots__/AssociateMonitors.test.js.snap
index 4abc447e1..29d9228ba 100644
--- a/public/pages/CreateMonitor/components/AssociateMonitors/__snapshots__/AssociateMonitors.test.js.snap
+++ b/public/pages/CreateMonitor/components/AssociateMonitors/__snapshots__/AssociateMonitors.test.js.snap
@@ -36,7 +36,7 @@ Array [
     class="euiSpacer euiSpacer--m"
   />,
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     id="associatedMonitorsEditor-form-row-row"
   >
     <div
diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsList.js b/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsList.js
index 7664ffccc..9a6bf5a5d 100644
--- a/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsList.js
+++ b/public/pages/CreateMonitor/components/AssociateMonitors/components/MonitorsList.js
@@ -6,8 +6,8 @@
 import React, { Fragment, useState, useEffect, useCallback } from 'react';
 import * as _ from 'lodash';
 import {
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -246,7 +246,7 @@ const MonitorsList = ({ values, httpClient }) => {
                     }}
                   >
                     <EuiToolTip content={'View monitor'}>
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label={'View monitor'}
                         iconType={'inspect'}
                         color="text"
@@ -270,7 +270,7 @@ const MonitorsList = ({ values, httpClient }) => {
                     }}
                   >
                     <EuiToolTip content={'Remove monitor'}>
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label={'Delete selection'}
                         iconType={'trash'}
                         color="danger"
@@ -282,12 +282,12 @@ const MonitorsList = ({ values, httpClient }) => {
               </EuiFlexGroup>
             ))}
             <EuiSpacer size={'m'} />
-            <EuiButton
+            <EuiSmallButton
               onClick={() => onAddMonitor()}
               disabled={fields.length >= 10 || fields.length >= options.length}
             >
               Add another monitor
-            </EuiButton>
+            </EuiSmallButton>
             <EuiText color={'subdued'} size={'xs'}>
               You can add up to {10 - fields.length} more monitors.
             </EuiText>
diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsEditor.test.js.snap b/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsEditor.test.js.snap
index 4726f7a90..a75108537 100644
--- a/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsEditor.test.js.snap
+++ b/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsEditor.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`MonitorsEditor renders 1`] = `
 <div
-  class="euiFormRow euiFormRow--fullWidth"
+  class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
   id="associatedMonitorsEditor-form-row-row"
 >
   <div
diff --git a/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsList.test.js.snap b/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsList.test.js.snap
index e75098251..4ce12954f 100644
--- a/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsList.test.js.snap
+++ b/public/pages/CreateMonitor/components/AssociateMonitors/components/__snapshots__/MonitorsList.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`MonitorsList renders 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="associatedMonitorsList-form-row-row"
 >
   <div
@@ -28,19 +28,19 @@ exports[`MonitorsList renders 1`] = `
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox euiComboBox--fullWidth"
+          class="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
           data-test-subj="monitors_list_0"
           name="associatedMonitorsList_0"
           role="combobox"
         >
           <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
@@ -95,19 +95,19 @@ exports[`MonitorsList renders 1`] = `
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox euiComboBox--fullWidth"
+          class="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
           data-test-subj="monitors_list_1"
           name="associatedMonitorsList_1"
           role="combobox"
         >
           <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
@@ -156,7 +156,7 @@ exports[`MonitorsList renders 1`] = `
       class="euiSpacer euiSpacer--m"
     />
     <button
-      class="euiButton euiButton--primary euiButton-isDisabled"
+      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
       disabled=""
       type="button"
     >
diff --git a/public/pages/CreateMonitor/components/ClusterMetricsMonitor/ClusterMetricsMonitor.js b/public/pages/CreateMonitor/components/ClusterMetricsMonitor/ClusterMetricsMonitor.js
index 4389309f9..aa60bed7c 100644
--- a/public/pages/CreateMonitor/components/ClusterMetricsMonitor/ClusterMetricsMonitor.js
+++ b/public/pages/CreateMonitor/components/ClusterMetricsMonitor/ClusterMetricsMonitor.js
@@ -6,12 +6,13 @@
 import React, { useState } from 'react';
 import _ from 'lodash';
 import {
+  EuiSmallButton,
   EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiModal,
   EuiModalBody,
@@ -72,17 +73,17 @@ const renderModal = (closeModal, prevApiType, selectedApiType, form) => {
         <EuiModalFooter>
           <EuiFlexGroup justifyContent={'flexEnd'}>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
+              <EuiSmallButtonEmpty
                 fullWidth={false}
                 onClick={onKeep}
                 data-test-subj={'clusterMetricsClearTriggersModalKeepButton'}
               >
                 Keep
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
 
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 color={'danger'}
                 fill={true}
                 fullWidth={false}
@@ -90,7 +91,7 @@ const renderModal = (closeModal, prevApiType, selectedApiType, form) => {
                 data-test-subj={'clusterMetricsClearTriggersModalClearButton'}
               >
                 Clear
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiModalFooter>
@@ -275,7 +276,7 @@ const ClusterMetricsMonitor = ({
 
       <EuiSpacer size={'l'} />
 
-      <EuiFormRow label={'Response'} fullWidth={true}>
+      <EuiCompressedFormRow label={'Response'} fullWidth={true}>
         <EuiCodeEditor
           mode={'json'}
           theme={isDarkMode ? 'sense-dark' : 'github'}
@@ -285,7 +286,7 @@ const ClusterMetricsMonitor = ({
           readOnly
           data-test-subj={'clusterMetricsRunResponseBox'}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </div>
   );
 };
diff --git a/public/pages/CreateMonitor/components/ClusterMetricsMonitor/__snapshots__/ClusterMetricsMonitor.test.js.snap b/public/pages/CreateMonitor/components/ClusterMetricsMonitor/__snapshots__/ClusterMetricsMonitor.test.js.snap
index 016ead360..6f32684bd 100644
--- a/public/pages/CreateMonitor/components/ClusterMetricsMonitor/__snapshots__/ClusterMetricsMonitor.test.js.snap
+++ b/public/pages/CreateMonitor/components/ClusterMetricsMonitor/__snapshots__/ClusterMetricsMonitor.test.js.snap
@@ -6,7 +6,7 @@ exports[`ClusterMetricsMonitor renders 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="uri.api_type-form-row-row"
   >
     <div
@@ -59,19 +59,19 @@ exports[`ClusterMetricsMonitor renders 1`] = `
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         data-test-subj="clusterMetricsApiTypeComboBox"
         name="uri.api_type"
         role="combobox"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
@@ -139,7 +139,7 @@ exports[`ClusterMetricsMonitor renders 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     id="generated-id-row"
   >
     <div
diff --git a/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQuery.js b/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQuery.js
index a3a31bd16..630e6265f 100644
--- a/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQuery.js
+++ b/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQuery.js
@@ -5,7 +5,13 @@
 
 import React, { Component } from 'react';
 import { connect } from 'formik';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
+import {
+  EuiSmallButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiSpacer,
+} from '@elastic/eui';
 import {
   FormikComboBox,
   FormikFieldNumber,
@@ -84,13 +90,13 @@ class DocumentLevelQuery extends Component {
 
           {queryIndex > 0 && (
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 color={'danger'}
                 onClick={() => queriesArrayHelpers.remove(queryIndex)}
                 data-test-subj={`documentLevelQuery_removeQueryButton${queryIndex}`}
               >
                 Remove query
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
diff --git a/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQueryTag.js b/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQueryTag.js
index b20e83fe2..42495f58a 100644
--- a/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQueryTag.js
+++ b/public/pages/CreateMonitor/components/DocumentLevelMonitorQueries/DocumentLevelQueryTag.js
@@ -8,8 +8,8 @@ import _ from 'lodash';
 import { connect } from 'formik';
 import {
   EuiBadge,
-  EuiButtonEmpty,
-  EuiButton,
+  EuiSmallButtonEmpty,
+  EuiSmallButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPopover,
@@ -79,12 +79,12 @@ class DocumentLevelQueryTag extends Component {
         <EuiSpacer size={'l'} />
         <EuiFlexGroup alignItems={'center'} justifyContent={'flexEnd'}>
           <EuiFlexItem>
-            <EuiButtonEmpty onClick={this.closePopover}>Cancel</EuiButtonEmpty>
+            <EuiSmallButtonEmpty onClick={this.closePopover}>Cancel</EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiButton fill onClick={this.closePopover}>
+            <EuiSmallButton fill onClick={this.closePopover}>
               Save
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/CreateMonitor/components/ExtractionQuery/ExtractionQuery.js b/public/pages/CreateMonitor/components/ExtractionQuery/ExtractionQuery.js
index 361a797d8..e784cd835 100644
--- a/public/pages/CreateMonitor/components/ExtractionQuery/ExtractionQuery.js
+++ b/public/pages/CreateMonitor/components/ExtractionQuery/ExtractionQuery.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiCodeEditor, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+import { EuiCodeEditor, EuiFlexGroup, EuiFlexItem, EuiCompressedFormRow } from '@elastic/eui';
 import 'brace/mode/json';
 import 'brace/mode/plain_text';
 import 'brace/snippets/javascript';
@@ -42,7 +42,7 @@ const ExtractionQuery = ({ isDarkMode, response }) => (
       />
     </EuiFlexItem>
     <EuiFlexItem>
-      <EuiFormRow label="Extraction query response" fullWidth>
+      <EuiCompressedFormRow label="Extraction query response" fullWidth>
         <EuiCodeEditor
           mode="json"
           theme={isDarkMode ? 'sense-dark' : 'github'}
@@ -51,7 +51,7 @@ const ExtractionQuery = ({ isDarkMode, response }) => (
           value={response}
           readOnly
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </EuiFlexItem>
   </EuiFlexGroup>
 );
diff --git a/public/pages/CreateMonitor/components/ExtractionQuery/__snapshots__/ExtractionQuery.test.js.snap b/public/pages/CreateMonitor/components/ExtractionQuery/__snapshots__/ExtractionQuery.test.js.snap
index f103f8843..ed3bc0be2 100644
--- a/public/pages/CreateMonitor/components/ExtractionQuery/__snapshots__/ExtractionQuery.test.js.snap
+++ b/public/pages/CreateMonitor/components/ExtractionQuery/__snapshots__/ExtractionQuery.test.js.snap
@@ -8,7 +8,7 @@ exports[`ExtractionQuery renders 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormRow euiFormRow--fullWidth"
+      class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="query-form-row-row"
     >
       <div
@@ -58,7 +58,7 @@ exports[`ExtractionQuery renders 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormRow euiFormRow--fullWidth"
+      class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="generated-id-row"
     >
       <div
diff --git a/public/pages/CreateMonitor/components/MonitorDefinition/__snapshots__/MonitorDefinition.test.js.snap b/public/pages/CreateMonitor/components/MonitorDefinition/__snapshots__/MonitorDefinition.test.js.snap
index c30d92122..2073b7ea6 100644
--- a/public/pages/CreateMonitor/components/MonitorDefinition/__snapshots__/MonitorDefinition.test.js.snap
+++ b/public/pages/CreateMonitor/components/MonitorDefinition/__snapshots__/MonitorDefinition.test.js.snap
@@ -3,7 +3,7 @@
 exports[`MonitorDefinition renders 1`] = `
 <div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="searchType-form-row-row"
     style="padding-left:10px"
   >
@@ -21,13 +21,13 @@ exports[`MonitorDefinition renders 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <select
-            class="euiSelect"
+            class="euiSelect euiSelect--compressed"
             id="searchType"
             name="searchType"
           >
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap b/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap
index a7bdca539..a13ae43d9 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/__snapshots__/MonitorExpressions.test.js.snap
@@ -110,20 +110,20 @@ exports[`MonitorExpressions renders 1`] = `
         style="width:150px"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="bucketValue-form-row-row"
         >
           <div
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldNumber"
+                  class="euiFieldNumber euiFieldNumber--compressed"
                   min="1"
                   name="bucketValue"
                   type="number"
@@ -139,13 +139,13 @@ exports[`MonitorExpressions renders 1`] = `
         style="width:150px"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <select
-              class="euiSelect"
+              class="euiSelect euiSelect--compressed"
               id="bucketUnitOfTime"
               name="bucketUnitOfTime"
             >
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/GroupByPopover.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/GroupByPopover.js
index 3c8df45eb..afa72bd09 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/GroupByPopover.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/GroupByPopover.js
@@ -7,8 +7,8 @@ import React from 'react';
 
 import {
   EuiText,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -74,12 +74,12 @@ export default function GroupByPopover(
           <EuiSpacer size="l" />
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={closePopover}>Cancel</EuiButtonEmpty>
+              <EuiSmallButtonEmpty onClick={closePopover}>Cancel</EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton fill onClick={closePopover}>
+              <EuiSmallButton fill onClick={closePopover}>
                 Save
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/MetricPopover.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/MetricPopover.js
index 64bb108b7..eefe879bf 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/MetricPopover.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/MetricPopover.js
@@ -5,7 +5,13 @@
 
 import React from 'react';
 
-import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import {
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+} from '@elastic/eui';
 
 import { AGGREGATION_TYPES, EXPRESSION_STYLE, POPOVER_STYLE } from './utils/constants';
 import { FormikComboBox, FormikSelect } from '../../../../../components/FormControls';
@@ -86,23 +92,23 @@ export default function MetricPopover(
 
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem>
-              <EuiButtonEmpty
+              <EuiSmallButtonEmpty
                 onClick={() => {
                   closePopover();
                 }}
               >
                 Cancel
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiButton
+              <EuiSmallButton
                 fill
                 onClick={() => {
                   closePopover();
                 }}
               >
                 Save
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/__snapshots__/ForExpression.test.js.snap b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/__snapshots__/ForExpression.test.js.snap
index d4ade7d01..b40047b26 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/__snapshots__/ForExpression.test.js.snap
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/__snapshots__/ForExpression.test.js.snap
@@ -28,20 +28,20 @@ exports[`ForExpression renders 1`] = `
       style="width:150px"
     >
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="bucketValue-form-row-row"
       >
         <div
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <input
-                class="euiFieldNumber"
+                class="euiFieldNumber euiFieldNumber--compressed"
                 min="1"
                 name="bucketValue"
                 type="number"
@@ -57,13 +57,13 @@ exports[`ForExpression renders 1`] = `
       style="width:150px"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <select
-            class="euiSelect"
+            class="euiSelect euiSelect--compressed"
             id="bucketUnitOfTime"
             name="bucketUnitOfTime"
           >
diff --git a/public/pages/CreateMonitor/components/MonitorState/__snapshots__/MonitorState.test.js.snap b/public/pages/CreateMonitor/components/MonitorState/__snapshots__/MonitorState.test.js.snap
index 051cc6ffd..5640de41b 100644
--- a/public/pages/CreateMonitor/components/MonitorState/__snapshots__/MonitorState.test.js.snap
+++ b/public/pages/CreateMonitor/components/MonitorState/__snapshots__/MonitorState.test.js.snap
@@ -23,7 +23,7 @@ Array [
     class="euiSpacer euiSpacer--s"
   />,
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="disabled-form-row-row"
     style="padding-left:10px"
   >
@@ -31,7 +31,7 @@ Array [
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiCheckbox"
+        class="euiCheckbox euiCheckbox--compressed"
       >
         <input
           class="euiCheckbox__input"
diff --git a/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap b/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap
index bb7e8d93a..c386f7017 100644
--- a/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap
+++ b/public/pages/CreateMonitor/components/MonitorTimeField/__snapshots__/MonitorTimeField.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`MonitorTimeField renders 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="timeField-form-row-row"
   style="padding-left:10px"
 >
@@ -23,19 +23,19 @@ exports[`MonitorTimeField renders 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="euiComboBox"
+      class="euiComboBox euiComboBox--compressed"
       data-test-subj="timeFieldComboBox"
       name="timeField"
       role="combobox"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
             data-test-subj="comboBoxInput"
             tabindex="-1"
           >
diff --git a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
index 3e7a5656b..988791531 100644
--- a/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
+++ b/public/pages/CreateMonitor/components/MonitorType/MonitorType.js
@@ -4,15 +4,7 @@
  */
 
 import React from 'react';
-import {
-  EuiFlexGrid,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormLabel,
-  EuiFormRow,
-  EuiSpacer,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGrid, EuiFlexItem, EuiFormLabel, EuiSpacer, EuiText } from '@elastic/eui';
 import FormikCheckableCard from '../../../../components/FormControls/FormikCheckableCard';
 import { MONITOR_TYPE, SEARCH_TYPE } from '../../../../utils/constants';
 import { FORMIK_INITIAL_TRIGGER_VALUES } from '../../../CreateTrigger/containers/CreateTrigger/utils/constants';
diff --git a/public/pages/CreateMonitor/components/QueryPerformance/QueryPerformance.js b/public/pages/CreateMonitor/components/QueryPerformance/QueryPerformance.js
index 5d43f2d7d..7f8724de7 100644
--- a/public/pages/CreateMonitor/components/QueryPerformance/QueryPerformance.js
+++ b/public/pages/CreateMonitor/components/QueryPerformance/QueryPerformance.js
@@ -6,7 +6,7 @@
 import React, { Fragment } from 'react';
 import _ from 'lodash';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
@@ -81,13 +81,13 @@ export const getPerformanceModal = ({ edit, onClose, onSubmit, values }) => {
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton fill={false} onClick={onSubmit}>
+        <EuiSmallButton fill={false} onClick={onSubmit}>
           {edit ? 'Update' : 'Create'} anyway
-        </EuiButton>
+        </EuiSmallButton>
 
-        <EuiButton fill={true} onClick={onClose}>
+        <EuiSmallButton fill={true} onClick={onClose}>
           Reconfigure
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
index 33d69a99b..23d451d03 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
@@ -9,34 +9,37 @@ import moment from 'moment';
 import { EuiFormRow, EuiDatePicker, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import TimezoneComboBox from './TimezoneComboBox';
 
-const Daily = () => (
-  <EuiFlexGroup direction="column" style={{ marginTop: '5px' }}>
-    <EuiFlexItem style={{ marginTop: '0px' }}>
-      <Field name="daily">
-        {({
-          field: { value, onChange, onBlur, ...rest },
-          form: { touched, errors, setFieldValue },
-        }) => (
-          <EuiFormRow label="Around" style={{ marginTop: '0px' }}>
-            <EuiDatePicker
-              showTimeSelect
-              showTimeSelectOnly
-              selected={moment().hours(value).minutes(0)}
-              onChange={(date) => {
-                setFieldValue('daily', date.hours());
-              }}
-              dateFormat="hh:mm A"
-              timeIntervals={60}
-              {...rest}
-            />
-          </EuiFormRow>
-        )}
-      </Field>
-    </EuiFlexItem>
-    <EuiFlexItem style={{ marginTop: '0px' }}>
-      <TimezoneComboBox />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+const Daily = ({ compressed }) => {
+  return (
+    <EuiFlexGroup direction="column" style={{ marginTop: '5px' }}>
+      <EuiFlexItem style={{ marginTop: '0px' }}>
+        <Field name="daily">
+          {({
+            field: { value, onChange, onBlur, className, ...rest },
+            form: { touched, errors, setFieldValue },
+          }) => (
+            <EuiFormRow label="Around" style={{ marginTop: '0px' }} compressed={compressed}>
+              <EuiDatePicker
+                showTimeSelect
+                showTimeSelectOnly
+                selected={moment().hours(value).minutes(0)}
+                onChange={(date) => {
+                  setFieldValue('daily', date.hours());
+                }}
+                dateFormat="hh:mm A"
+                timeIntervals={60}
+                className={compressed ? 'euiFieldText--compressed' : ''}
+                {...rest}
+              />
+            </EuiFormRow>
+          )}
+        </Field>
+      </EuiFlexItem>
+      <EuiFlexItem style={{ marginTop: '0px' }}>
+        <TimezoneComboBox />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
 
 export default Daily;
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
index fab615a39..f9285e8b9 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/FrequencyPicker.js
@@ -23,7 +23,7 @@ const components = {
 const FrequencyPicker = (props) => {
   const type = props.formik.values.frequency;
   const Component = components[type];
-  return <Component />;
+  return <Component compressed />;
 };
 
 export default connect(FrequencyPicker);
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
index 89c6c9ea4..0364b8588 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Monthly.js
@@ -10,7 +10,7 @@ import { FormikFieldNumber, FormikSelect } from '../../../../../components/FormC
 import { isInvalid, hasError, validateMonthlyDay } from '../../../../../utils/validate';
 import { monthlyTypes } from './utils/constants';
 
-const Monthly = () => (
+const Monthly = ({ compressed }) => (
   <Fragment>
     <EuiFlexGroup alignItems="flexStart">
       <EuiFlexItem>
@@ -45,7 +45,7 @@ const Monthly = () => (
       </EuiFlexItem>
     </EuiFlexGroup>
     <EuiSpacer size="xs" />
-    <Daily />
+    <Daily compressed={compressed} />
   </Fragment>
 );
 
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
index fc71aa5a6..911e6d3d0 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
@@ -6,7 +6,7 @@
 import React, { Fragment } from 'react';
 import { Field } from 'formik';
 import _ from 'lodash';
-import { EuiFormRow, EuiFlexGroup, EuiFlexItem, EuiCheckbox } from '@elastic/eui';
+import { EuiCompressedFormRow, EuiFlexGroup, EuiFlexItem, EuiCheckbox } from '@elastic/eui';
 import Daily from './Daily';
 
 const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
@@ -31,11 +31,11 @@ const validate = (value) => {
   if (!booleans.some((bool) => bool)) return 'Must select at least one weekday';
 };
 
-const Weekly = () => (
+const Weekly = ({ compressed }) => (
   <Fragment>
     <Field name="weekly" validate={validate}>
       {({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Run every"
           isInvalid={touched.weekly && !!errors.weekly}
           error={errors.weekly}
@@ -44,10 +44,10 @@ const Weekly = () => (
           <EuiFlexGroup alignItems="center">
             {days.map((day) => checkboxFlexItem(day, value[day], setFieldValue, setFieldTouched))}
           </EuiFlexGroup>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
     </Field>
-    <Daily />
+    <Daily compressed={compressed} />
   </Fragment>
 );
 
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/__snapshots__/Frequencies.test.js.snap b/public/pages/CreateMonitor/components/Schedule/Frequencies/__snapshots__/Frequencies.test.js.snap
index 9ac8cbad9..37edf9613 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/__snapshots__/Frequencies.test.js.snap
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/__snapshots__/Frequencies.test.js.snap
@@ -10,7 +10,7 @@ exports[`Frequencies renders CustomCron 1`] = `
     style="margin-top:0px"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="cronExpression-form-row-row"
       style="margin-top:0px"
     >
@@ -29,10 +29,10 @@ exports[`Frequencies renders CustomCron 1`] = `
         class="euiFormRow__fieldWrapper"
       >
         <textarea
-          class="euiTextArea euiTextArea--resizeVertical"
+          class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
           data-test-subj="customCron_cronExpression_field"
           name="cronExpression"
-          rows="6"
+          rows="3"
         >
           0 */1 * * *
         </textarea>
@@ -71,7 +71,7 @@ exports[`Frequencies renders CustomCron 1`] = `
     style="margin-top:0px"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="timezone-form-row-row"
       style="margin-top:0px"
     >
@@ -81,19 +81,19 @@ exports[`Frequencies renders CustomCron 1`] = `
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox"
+          class="euiComboBox euiComboBox--compressed"
           data-test-subj="timezoneComboBox"
           name="timezone"
           role="combobox"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
@@ -144,7 +144,7 @@ exports[`Frequencies renders CustomCron 1`] = `
 
 exports[`Frequencies renders Frequency 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="frequency-form-row-row"
 >
   <div
@@ -162,13 +162,13 @@ exports[`Frequencies renders Frequency 1`] = `
     class="euiFormRow__fieldWrapper"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayout euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <select
-          class="euiSelect"
+          class="euiSelect euiSelect--compressed"
           data-test-subj="frequency_field"
           id="frequency"
           name="frequency"
@@ -225,7 +225,7 @@ exports[`Frequencies renders FrequencyPicker 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="period.interval-form-row-row"
     >
       <div
@@ -243,13 +243,13 @@ exports[`Frequencies renders FrequencyPicker 1`] = `
         class="euiFormRow__fieldWrapper"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              class="euiFieldNumber euiFieldNumber--withIcon"
+              class="euiFieldNumber euiFieldNumber--withIcon euiFieldNumber--compressed"
               data-test-subj="interval_interval_field"
               min="1"
               name="period.interval"
@@ -276,20 +276,20 @@ exports[`Frequencies renders FrequencyPicker 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormRow euiFormRow--hasEmptyLabelSpace"
+      class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
       id="period.unit-form-row-row"
     >
       <div
         class="euiFormRow__fieldWrapper"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <select
-              class="euiSelect"
+              class="euiSelect euiSelect--compressed"
               data-test-subj="interval_unit_field"
               id="period.unit"
               name="period.unit"
@@ -338,7 +338,7 @@ exports[`Frequencies renders Interval 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="period.interval-form-row-row"
     >
       <div
@@ -356,13 +356,13 @@ exports[`Frequencies renders Interval 1`] = `
         class="euiFormRow__fieldWrapper"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              class="euiFieldNumber euiFieldNumber--withIcon"
+              class="euiFieldNumber euiFieldNumber--withIcon euiFieldNumber--compressed"
               data-test-subj="interval_interval_field"
               min="1"
               name="period.interval"
@@ -389,20 +389,20 @@ exports[`Frequencies renders Interval 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormRow euiFormRow--hasEmptyLabelSpace"
+      class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
       id="period.unit-form-row-row"
     >
       <div
         class="euiFormRow__fieldWrapper"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <select
-              class="euiSelect"
+              class="euiSelect euiSelect--compressed"
               data-test-subj="interval_unit_field"
               id="period.unit"
               name="period.unit"
diff --git a/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap b/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
index 18c958869..44a801bde 100644
--- a/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
+++ b/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
@@ -385,9 +385,9 @@ exports[`AnomalyDetectors renders 1`] = `
                 }
               }
             >
-              <EuiFormRow
+              <EuiCompressedFormRow
                 describedByIds={Array []}
-                display="row"
+                display="rowCompressed"
                 fullWidth={false}
                 hasChildLabel={true}
                 hasEmptyLabelSpace={false}
@@ -397,7 +397,7 @@ exports[`AnomalyDetectors renders 1`] = `
                 labelType="label"
               >
                 <div
-                  className="euiFormRow"
+                  className="euiFormRow euiFormRow--compressed"
                   id="detectorId-form-row-row"
                 >
                   <div
@@ -628,9 +628,9 @@ exports[`AnomalyDetectors renders 1`] = `
                       onBlur={[Function]}
                       onFocus={[Function]}
                     >
-                      <EuiComboBox
+                      <EuiCompressedComboBox
                         async={false}
-                        compressed={false}
+                        compressed={true}
                         fullWidth={false}
                         id="detectorId"
                         isClearable={false}
@@ -650,14 +650,14 @@ exports[`AnomalyDetectors renders 1`] = `
                         <div
                           aria-expanded={false}
                           aria-haspopup="listbox"
-                          className="euiComboBox"
+                          className="euiComboBox euiComboBox--compressed"
                           name="detectorId"
                           onKeyDown={[Function]}
                           role="combobox"
                         >
                           <EuiComboBoxInput
                             autoSizeInputRef={[Function]}
-                            compressed={false}
+                            compressed={true}
                             fullWidth={false}
                             hasSelectedOptions={false}
                             id="detectorId"
@@ -684,7 +684,7 @@ exports[`AnomalyDetectors renders 1`] = `
                             value=""
                           >
                             <EuiFormControlLayout
-                              compressed={false}
+                              compressed={true}
                               fullWidth={false}
                               icon={
                                 Object {
@@ -699,13 +699,13 @@ exports[`AnomalyDetectors renders 1`] = `
                               }
                             >
                               <div
-                                className="euiFormControlLayout"
+                                className="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   className="euiFormControlLayout__childrenWrapper"
                                 >
                                   <div
-                                    className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                    className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                     data-test-subj="comboBoxInput"
                                     onClick={[Function]}
                                     tabIndex={-1}
@@ -776,7 +776,7 @@ exports[`AnomalyDetectors renders 1`] = `
                                     </AutosizeInput>
                                   </div>
                                   <EuiFormControlLayoutIcons
-                                    compressed={false}
+                                    compressed={true}
                                     icon={
                                       Object {
                                         "aria-label": "Open list of options",
@@ -797,7 +797,7 @@ exports[`AnomalyDetectors renders 1`] = `
                                         data-test-subj="comboBoxToggleListButton"
                                         iconRef={[Function]}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <button
@@ -810,7 +810,7 @@ exports[`AnomalyDetectors renders 1`] = `
                                           <EuiIcon
                                             aria-hidden="true"
                                             className="euiFormControlLayoutCustomIcon__icon"
-                                            size="m"
+                                            size="s"
                                             type="arrowDown"
                                           >
                                             <div>
@@ -826,11 +826,11 @@ exports[`AnomalyDetectors renders 1`] = `
                             </EuiFormControlLayout>
                           </EuiComboBoxInput>
                         </div>
-                      </EuiComboBox>
+                      </EuiCompressedComboBox>
                     </ComboBox>
                   </div>
                 </div>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </FormikFormRow>
           </Field>
         </FormikInputWrapper>
diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
index 3e084be50..cd5ce2bb7 100644
--- a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
+++ b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -7,8 +7,8 @@ import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
 import { FieldArray, Formik } from 'formik';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -261,12 +261,12 @@ export default class CreateMonitor extends Component {
                     <EuiSpacer />
                     <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                       <EuiFlexItem grow={false}>
-                        <EuiButtonEmpty onClick={this.onCancel}>Cancel</EuiButtonEmpty>
+                        <EuiSmallButtonEmpty onClick={this.onCancel}>Cancel</EuiSmallButtonEmpty>
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
-                        <EuiButton fill onClick={handleSubmit} isLoading={isSubmitting}>
+                        <EuiSmallButton fill onClick={handleSubmit} isLoading={isSubmitting}>
                           {edit ? 'Update' : 'Create'}
-                        </EuiButton>
+                        </EuiSmallButton>
                       </EuiFlexItem>
                     </EuiFlexGroup>
                   </Fragment>
diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js b/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js
index 00c25ba5e..b0284aae5 100644
--- a/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js
+++ b/public/pages/CreateMonitor/containers/DefineMonitor/DefineMonitor.js
@@ -9,7 +9,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import {
   EuiSpacer,
-  EuiButton,
+  EuiSmallButton,
   EuiCallOut,
   EuiAccordion,
   EuiLoadingSpinner,
@@ -541,9 +541,9 @@ class DefineMonitor extends Component {
     }
     return {
       actions: [
-        <EuiButton disabled={runIsDisabled} onClick={this.onRunQuery}>
+        <EuiSmallButton disabled={runIsDisabled} onClick={this.onRunQuery}>
           Run
-        </EuiButton>,
+        </EuiSmallButton>,
       ],
       content: (
         <React.Fragment>
diff --git a/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap b/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap
index b91cb4fd3..f4339f1e4 100644
--- a/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap
+++ b/public/pages/CreateMonitor/containers/DefineMonitor/__snapshots__/DefineMonitor.test.js.snap
@@ -131,12 +131,12 @@ exports[`DefineMonitor should show warning in case of Ad monitor and plugin is n
   <ContentPanel
     actions={
       Array [
-        <EuiButton
+        <EuiSmallButton
           disabled={true}
           onClick={[Function]}
         >
           Run
-        </EuiButton>,
+        </EuiSmallButton>,
       ]
     }
     bodyStyles={
diff --git a/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap b/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
index 5c818aa44..b934215ad 100644
--- a/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
+++ b/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
@@ -328,9 +328,9 @@ exports[`MonitorIndex renders 1`] = `
               }
             }
           >
-            <EuiFormRow
+            <EuiCompressedFormRow
               describedByIds={Array []}
-              display="row"
+              display="rowCompressed"
               fullWidth={false}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
@@ -346,7 +346,7 @@ exports[`MonitorIndex renders 1`] = `
               }
             >
               <div
-                className="euiFormRow"
+                className="euiFormRow euiFormRow--compressed"
                 id="index-form-row-row"
                 style={
                   Object {
@@ -596,9 +596,9 @@ exports[`MonitorIndex renders 1`] = `
                     onBlur={[Function]}
                     onFocus={[Function]}
                   >
-                    <EuiComboBox
+                    <EuiCompressedComboBox
                       async={true}
-                      compressed={false}
+                      compressed={true}
                       data-test-subj="indicesComboBox"
                       delimiter=","
                       fullWidth={false}
@@ -631,7 +631,7 @@ exports[`MonitorIndex renders 1`] = `
                       <div
                         aria-expanded={false}
                         aria-haspopup="listbox"
-                        className="euiComboBox"
+                        className="euiComboBox euiComboBox--compressed"
                         data-test-subj="indicesComboBox"
                         name="index"
                         onKeyDown={[Function]}
@@ -639,7 +639,7 @@ exports[`MonitorIndex renders 1`] = `
                       >
                         <EuiComboBoxInput
                           autoSizeInputRef={[Function]}
-                          compressed={false}
+                          compressed={true}
                           fullWidth={false}
                           hasSelectedOptions={false}
                           id="index"
@@ -664,7 +664,7 @@ exports[`MonitorIndex renders 1`] = `
                           value=""
                         >
                           <EuiFormControlLayout
-                            compressed={false}
+                            compressed={true}
                             fullWidth={false}
                             icon={
                               Object {
@@ -680,13 +680,13 @@ exports[`MonitorIndex renders 1`] = `
                             isLoading={true}
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 className="euiFormControlLayout__childrenWrapper"
                               >
                                 <div
-                                  className="euiComboBox__inputWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                                   data-test-subj="comboBoxInput"
                                   onClick={[Function]}
                                   tabIndex={-1}
@@ -757,7 +757,7 @@ exports[`MonitorIndex renders 1`] = `
                                   </AutosizeInput>
                                 </div>
                                 <EuiFormControlLayoutIcons
-                                  compressed={false}
+                                  compressed={true}
                                   icon={
                                     Object {
                                       "aria-label": "Open list of options",
@@ -786,7 +786,7 @@ exports[`MonitorIndex renders 1`] = `
                                       data-test-subj="comboBoxToggleListButton"
                                       iconRef={[Function]}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                       type="arrowDown"
                                     >
                                       <button
@@ -799,7 +799,7 @@ exports[`MonitorIndex renders 1`] = `
                                         <EuiIcon
                                           aria-hidden="true"
                                           className="euiFormControlLayoutCustomIcon__icon"
-                                          size="m"
+                                          size="s"
                                           type="arrowDown"
                                         >
                                           <div>
@@ -815,7 +815,7 @@ exports[`MonitorIndex renders 1`] = `
                           </EuiFormControlLayout>
                         </EuiComboBoxInput>
                       </div>
-                    </EuiComboBox>
+                    </EuiCompressedComboBox>
                   </ComboBox>
                   <EuiFormHelpText
                     className="euiFormRow__text"
@@ -831,7 +831,7 @@ exports[`MonitorIndex renders 1`] = `
                   </EuiFormHelpText>
                 </div>
               </div>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </FormikFormRow>
         </Field>
       </FormikInputWrapper>
diff --git a/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap b/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap
index d2ec7d59b..65b8caa32 100644
--- a/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap
+++ b/public/pages/CreateMonitor/containers/WorkflowDetails/__snapshots__/WorkflowDetails.test.js.snap
@@ -62,7 +62,7 @@ exports[`WorkflowDetails renders 1`] = `
     >
       <div>
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="frequency-form-row-row"
         >
           <div
@@ -80,13 +80,13 @@ exports[`WorkflowDetails renders 1`] = `
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <select
-                  class="euiSelect"
+                  class="euiSelect euiSelect--compressed"
                   data-test-subj="frequency_field"
                   id="frequency"
                   name="frequency"
@@ -143,7 +143,7 @@ exports[`WorkflowDetails renders 1`] = `
             class="euiFlexItem"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="period.interval-form-row-row"
             >
               <div
@@ -161,13 +161,13 @@ exports[`WorkflowDetails renders 1`] = `
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <input
-                      class="euiFieldNumber euiFieldNumber--withIcon"
+                      class="euiFieldNumber euiFieldNumber--withIcon euiFieldNumber--compressed"
                       data-test-subj="interval_interval_field"
                       min="1"
                       name="period.interval"
@@ -194,20 +194,20 @@ exports[`WorkflowDetails renders 1`] = `
             class="euiFlexItem"
           >
             <div
-              class="euiFormRow euiFormRow--hasEmptyLabelSpace"
+              class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
               id="period.unit-form-row-row"
             >
               <div
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <select
-                      class="euiSelect"
+                      class="euiSelect euiSelect--compressed"
                       data-test-subj="interval_unit_field"
                       id="period.unit"
                       name="period.unit"
@@ -285,7 +285,7 @@ exports[`WorkflowDetails renders 1`] = `
       class="euiSpacer euiSpacer--m"
     />
     <div
-      class="euiFormRow euiFormRow--fullWidth"
+      class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="associatedMonitorsEditor-form-row-row"
     >
       <div
diff --git a/public/pages/CreateTrigger/components/Action/Action.js b/public/pages/CreateTrigger/components/Action/Action.js
index 3354910a6..051f1b4f2 100644
--- a/public/pages/CreateTrigger/components/Action/Action.js
+++ b/public/pages/CreateTrigger/components/Action/Action.js
@@ -7,6 +7,7 @@ import React, { useState, useMemo } from 'react';
 import _ from 'lodash';
 import {
   EuiAccordion,
+  EuiSmallButton,
   EuiButton,
   EuiHorizontalRule,
   EuiPanel,
@@ -14,8 +15,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
-  EuiButtonIcon,
-  EuiButtonEmpty,
+  EuiSmallButtonIcon,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -55,7 +56,10 @@ const Action = ({
 }) => {
   const [backupValues, setBackupValues] = useState();
   const [isConfigureOpen, setIsConfigureOpen] = useState(false);
-  const ManageButton = useMemo(() => (flyoutMode ? EuiButtonEmpty : EuiButton), [flyoutMode]);
+  const ManageButton = useMemo(
+    () => (flyoutMode ? EuiSmallButtonEmpty : EuiSmallButton),
+    [flyoutMode]
+  );
   const Accordion = useMemo(() => (flyoutMode ? MinimalAccordion : EuiAccordion), [flyoutMode]);
   const [loadingDestinations, setLoadingDestinations] = useState(false);
   const selectedDestination = flattenedDestinations.filter(
@@ -193,7 +197,7 @@ const Action = ({
                 id: name,
                 title: name,
                 extraAction: (
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     iconType="trash"
                     color="text"
                     aria-label={`Delete Notification`}
@@ -264,9 +268,9 @@ const Action = ({
             )}
             {flyoutMode && !isInitialLoading && (
               <>
-                <EuiButtonEmpty iconType="pencil" iconSide="left" onClick={onConfigureOpen}>
+                <EuiSmallButtonEmpty iconType="pencil" iconSide="left" onClick={onConfigureOpen}>
                   Configure notification
-                </EuiButtonEmpty>
+                </EuiSmallButtonEmpty>
                 {isConfigureOpen && (
                   <EuiModal onClose={onConfigureCancel}>
                     <EuiModalHeader>
@@ -286,10 +290,10 @@ const Action = ({
                       />
                     </EuiModalBody>
                     <EuiModalFooter>
-                      <EuiButton onClick={onConfigureCancel}>Cancel</EuiButton>
-                      <EuiButton onClick={onConfigureUpdate} fill>
+                      <EuiSmallButton onClick={onConfigureCancel}>Cancel</EuiSmallButton>
+                      <EuiSmallButton onClick={onConfigureUpdate} fill>
                         Update
-                      </EuiButton>
+                      </EuiSmallButton>
                     </EuiModalFooter>
                   </EuiModal>
                 )}
diff --git a/public/pages/CreateTrigger/components/Action/__snapshots__/Action.test.js.snap b/public/pages/CreateTrigger/components/Action/__snapshots__/Action.test.js.snap
index df6bbbfeb..764374735 100644
--- a/public/pages/CreateTrigger/components/Action/__snapshots__/Action.test.js.snap
+++ b/public/pages/CreateTrigger/components/Action/__snapshots__/Action.test.js.snap
@@ -71,7 +71,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
               style="padding-left:20px;padding-right:20px;padding-top:10px"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 id="testPathactions.0.name-form-row-row"
               >
                 <div
@@ -89,13 +89,13 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         name="testPathactions.0.name"
                         placeholder="Enter action name"
                         type="text"
@@ -122,7 +122,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                     style="max-width:400px"
                   >
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="testPathactions.0.destination_id-form-row-row"
                     >
                       <div
@@ -142,18 +142,18 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                         <div
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          class="euiComboBox"
+                          class="euiComboBox euiComboBox--compressed"
                           name="testPathactions.0.destination_id"
                           role="combobox"
                         >
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 tabindex="-1"
                               >
@@ -206,7 +206,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                       class="euiSpacer euiSpacer--l"
                     />
                     <button
-                      class="euiButton euiButton--primary"
+                      class="euiButton euiButton--primary euiButton--small"
                       type="button"
                     >
                       <span
@@ -230,7 +230,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
               </div>
               <div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="testPathactions.0.subject_template.source-form-row-row"
                   style="max-width:100%"
                 >
@@ -249,13 +249,13 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText euiFieldText--fullWidth"
+                          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
                           name="testPathactions.0.subject_template.source"
                           placeholder="Enter a subject"
                           type="text"
@@ -265,7 +265,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="testPathactions.0.message_template.source-form-row-row"
                   style="max-width:100%"
                 >
@@ -318,15 +318,15 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                     class="euiFormRow__fieldWrapper"
                   >
                     <textarea
-                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth euiTextArea--compressed"
                       name="testPathactions.0.message_template.source"
                       placeholder="Can use mustache templates"
-                      rows="6"
+                      rows="3"
                     />
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                   style="max-width:100%"
                 >
@@ -341,7 +341,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                         class="euiFlexItem"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -417,7 +417,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                   />
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                   style="padding-bottom:10px;max-width:100%"
                 >
@@ -443,7 +443,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                         style="margin-bottom:0px"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -471,7 +471,7 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                           style="margin-right:0px"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="generated-id-row"
                           >
                             <div
@@ -488,20 +488,20 @@ exports[`Action renders with Notifications plugin installed 1`] = `
                               class="euiFormRow__fieldWrapper"
                             >
                               <div
-                                class="euiFormRow"
+                                class="euiFormRow euiFormRow--compressed"
                                 id="testPathactions.0.throttle.value-form-row-row"
                               >
                                 <div
                                   class="euiFormRow__fieldWrapper"
                                 >
                                   <div
-                                    class="euiFormControlLayout euiFormControlLayout--group"
+                                    class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                   >
                                     <div
                                       class="euiFormControlLayout__childrenWrapper"
                                     >
                                       <input
-                                        class="euiFieldNumber euiFieldText euiFieldNumber--inGroup"
+                                        class="euiFieldNumber euiFieldText euiFieldNumber--compressed euiFieldNumber--inGroup"
                                         disabled=""
                                         max="1440"
                                         min="1"
@@ -613,7 +613,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
               style="padding-left:20px;padding-right:20px;padding-top:10px"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 id="testPathactions.0.name-form-row-row"
               >
                 <div
@@ -631,13 +631,13 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         name="testPathactions.0.name"
                         placeholder="Enter action name"
                         type="text"
@@ -664,7 +664,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                     style="max-width:400px"
                   >
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="testPathactions.0.destination_id-form-row-row"
                     >
                       <div
@@ -684,18 +684,18 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                         <div
                           aria-expanded="false"
                           aria-haspopup="listbox"
-                          class="euiComboBox euiComboBox-isDisabled"
+                          class="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
                           name="testPathactions.0.destination_id"
                           role="combobox"
                         >
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 tabindex="-1"
                               >
@@ -750,7 +750,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                       class="euiSpacer euiSpacer--l"
                     />
                     <button
-                      class="euiButton euiButton--primary euiButton-isDisabled"
+                      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                       disabled=""
                       type="button"
                     >
@@ -825,7 +825,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
               </div>
               <div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="testPathactions.0.subject_template.source-form-row-row"
                   style="max-width:100%"
                 >
@@ -844,13 +844,13 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText euiFieldText--fullWidth"
+                          class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
                           name="testPathactions.0.subject_template.source"
                           placeholder="Enter a subject"
                           type="text"
@@ -860,7 +860,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="testPathactions.0.message_template.source-form-row-row"
                   style="max-width:100%"
                 >
@@ -913,15 +913,15 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                     class="euiFormRow__fieldWrapper"
                   >
                     <textarea
-                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth euiTextArea--compressed"
                       name="testPathactions.0.message_template.source"
                       placeholder="Can use mustache templates"
-                      rows="6"
+                      rows="3"
                     />
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                   style="max-width:100%"
                 >
@@ -936,7 +936,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                         class="euiFlexItem"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -1012,7 +1012,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                   />
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                   style="padding-bottom:10px;max-width:100%"
                 >
@@ -1038,7 +1038,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                         style="margin-bottom:0px"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -1066,7 +1066,7 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                           style="margin-right:0px"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="generated-id-row"
                           >
                             <div
@@ -1083,20 +1083,20 @@ exports[`Action renders without Notifications plugin installed 1`] = `
                               class="euiFormRow__fieldWrapper"
                             >
                               <div
-                                class="euiFormRow"
+                                class="euiFormRow euiFormRow--compressed"
                                 id="testPathactions.0.throttle.value-form-row-row"
                               >
                                 <div
                                   class="euiFormRow__fieldWrapper"
                                 >
                                   <div
-                                    class="euiFormControlLayout euiFormControlLayout--group"
+                                    class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                   >
                                     <div
                                       class="euiFormControlLayout__childrenWrapper"
                                     >
                                       <input
-                                        class="euiFieldNumber euiFieldText euiFieldNumber--inGroup"
+                                        class="euiFieldNumber euiFieldText euiFieldNumber--compressed euiFieldNumber--inGroup"
                                         disabled=""
                                         max="1440"
                                         min="1"
diff --git a/public/pages/CreateTrigger/components/Action/actions/Message.js b/public/pages/CreateTrigger/components/Action/actions/Message.js
index a5456d291..d4a9e18fe 100644
--- a/public/pages/CreateTrigger/components/Action/actions/Message.js
+++ b/public/pages/CreateTrigger/components/Action/actions/Message.js
@@ -7,14 +7,14 @@ import React, { useState } from 'react';
 import _ from 'lodash';
 import Mustache from 'mustache';
 import {
-  EuiCheckbox,
+  EuiCompressedCheckbox,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiSpacer,
   EuiText,
-  EuiTextArea,
+  EuiCompressedTextArea,
 } from '@elastic/eui';
 
 import {
@@ -97,7 +97,7 @@ const renderSendTestMessageButton = (
   return (
     <EuiFlexGroup justifyContent="spaceBetween" alignItems="flexStart">
       <EuiFlexItem>
-        <EuiCheckbox
+        <EuiCompressedCheckbox
           id={`${fieldPath}actions.${index}`}
           label={'Preview message'}
           checked={displayPreview}
@@ -258,7 +258,7 @@ export default function Message(
         }}
       />
 
-      <EuiFormRow style={{ maxWidth: '100%' }}>
+      <EuiCompressedFormRow style={{ maxWidth: '100%' }}>
         {renderSendTestMessageButton(
           index,
           sendTestMessage,
@@ -267,18 +267,18 @@ export default function Message(
           onDisplayPreviewChange,
           fieldPath
         )}
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       {displayPreview ? (
-        <EuiFormRow label="Message preview" style={{ maxWidth: '100%' }}>
-          <EuiTextArea
+        <EuiCompressedFormRow label="Message preview" style={{ maxWidth: '100%' }}>
+          <EuiCompressedTextArea
             placeholder="Preview of mustache template"
             fullWidth
             value={preview}
             readOnly
             className="read-only-text-area"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       ) : null}
 
       <EuiSpacer size="m" />
@@ -290,7 +290,7 @@ export default function Message(
       <EuiSpacer size="m" />
 
       {editableActionExecutionPolicy ? (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label={<span style={{ color: '#343741' }}>Perform action</span>}
           style={{ maxWidth: '100%' }}
         >
@@ -324,7 +324,7 @@ export default function Message(
 
             {actionExecutionScopeId === NOTIFY_OPTIONS_VALUES.PER_ALERT &&
             displayActionableAlertsOptions ? (
-              <EuiFormRow style={{ maxWidth: '100%' }}>
+              <EuiCompressedFormRow style={{ maxWidth: '100%' }}>
                 <EuiFlexGroup
                   alignItems="center"
                   style={{
@@ -358,10 +358,10 @@ export default function Message(
                     }}
                   />
                 </EuiFlexGroup>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             ) : null}
           </EuiFlexGroup>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       ) : (
         <div>
           <OverviewStat header={'Perform action'} value={'Per monitor execution'} />
@@ -370,7 +370,10 @@ export default function Message(
       )}
 
       {displayThrottlingSettings ? (
-        <EuiFormRow label={'Throttling'} style={{ paddingBottom: '10px', maxWidth: '100%' }}>
+        <EuiCompressedFormRow
+          label={'Throttling'}
+          style={{ paddingBottom: '10px', maxWidth: '100%' }}
+        >
           <EuiFlexGroup direction="column">
             <EuiFlexItem grow={false} style={{ marginBottom: '0px' }}>
               <FormikCheckbox
@@ -383,7 +386,7 @@ export default function Message(
               style={{ margin: '0px', display: _.get(action, `throttle_enabled`) ? '' : 'none' }}
             >
               <EuiFlexItem grow={false} style={{ marginRight: '0px' }}>
-                <EuiFormRow label="Throttle actions to only trigger every">
+                <EuiCompressedFormRow label="Throttle actions to only trigger every">
                   <FormikFieldNumber
                     name={`${actionPath}.throttle.value`}
                     fieldProps={{ validate: validateActionThrottle(action) }}
@@ -411,11 +414,11 @@ export default function Message(
                       disabled: !_.get(action, `throttle_enabled`) ? 'disabled' : '',
                     }}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexGroup>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       ) : null}
     </div>
   );
diff --git a/public/pages/CreateTrigger/components/Action/actions/__snapshots__/Message.test.js.snap b/public/pages/CreateTrigger/components/Action/actions/__snapshots__/Message.test.js.snap
index 2d689a0b2..e09ae474c 100644
--- a/public/pages/CreateTrigger/components/Action/actions/__snapshots__/Message.test.js.snap
+++ b/public/pages/CreateTrigger/components/Action/actions/__snapshots__/Message.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Message renders 1`] = `
 <div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="undefinedactions.0.subject_template.source-form-row-row"
     style="max-width:100%"
   >
@@ -22,13 +22,13 @@ exports[`Message renders 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            class="euiFieldText euiFieldText--fullWidth"
+            class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
             name="undefinedactions.0.subject_template.source"
             placeholder="Enter a subject"
             type="text"
@@ -38,7 +38,7 @@ exports[`Message renders 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="undefinedactions.0.message_template.source-form-row-row"
     style="max-width:100%"
   >
@@ -91,15 +91,15 @@ exports[`Message renders 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <textarea
-        class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth"
+        class="euiTextArea euiTextArea--resizeVertical euiTextArea--fullWidth euiTextArea--compressed"
         name="undefinedactions.0.message_template.source"
         placeholder="Can use mustache templates"
-        rows="6"
+        rows="3"
       />
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="generated-id-row"
     style="max-width:100%"
   >
@@ -114,7 +114,7 @@ exports[`Message renders 1`] = `
           class="euiFlexItem"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               class="euiCheckbox__input"
@@ -190,7 +190,7 @@ exports[`Message renders 1`] = `
     />
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="generated-id-row"
     style="padding-bottom:10px;max-width:100%"
   >
@@ -216,7 +216,7 @@ exports[`Message renders 1`] = `
           style="margin-bottom:0px"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               class="euiCheckbox__input"
@@ -244,7 +244,7 @@ exports[`Message renders 1`] = `
             style="margin-right:0px"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="generated-id-row"
             >
               <div
@@ -261,20 +261,20 @@ exports[`Message renders 1`] = `
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="undefinedactions.0.throttle.value-form-row-row"
                 >
                   <div
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout euiFormControlLayout--group"
+                      class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldNumber euiFieldText euiFieldNumber--inGroup"
+                          class="euiFieldNumber euiFieldText euiFieldNumber--compressed euiFieldNumber--inGroup"
                           disabled=""
                           max="1440"
                           min="1"
diff --git a/public/pages/CreateTrigger/components/ActionEmptyPrompt/ActionEmptyPrompt.js b/public/pages/CreateTrigger/components/ActionEmptyPrompt/ActionEmptyPrompt.js
index 3a6095c4b..e24e5fd40 100644
--- a/public/pages/CreateTrigger/components/ActionEmptyPrompt/ActionEmptyPrompt.js
+++ b/public/pages/CreateTrigger/components/ActionEmptyPrompt/ActionEmptyPrompt.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import AddActionButton from '../AddActionButton';
 import { getManageChannelsUrl } from '../../../../utils/helpers';
 
@@ -33,7 +33,7 @@ const ActionEmptyPrompt = ({
         hasDestinations ? (
           <AddActionButton {...{ arrayHelpers, flyoutMode, onPostAdd, numActions }} />
         ) : (
-          <EuiButton
+          <EuiSmallButton
             fill
             disabled={!hasNotificationPlugin}
             iconType="popout"
@@ -41,7 +41,7 @@ const ActionEmptyPrompt = ({
             onClick={() => window.open(getManageChannelsUrl())}
           >
             Manage channels
-          </EuiButton>
+          </EuiSmallButton>
         )
       }
     />
diff --git a/public/pages/CreateTrigger/components/ActionEmptyPrompt/__snapshots__/ActionEmptyPrompt.test.js.snap b/public/pages/CreateTrigger/components/ActionEmptyPrompt/__snapshots__/ActionEmptyPrompt.test.js.snap
index e1837acae..2e8fb543c 100644
--- a/public/pages/CreateTrigger/components/ActionEmptyPrompt/__snapshots__/ActionEmptyPrompt.test.js.snap
+++ b/public/pages/CreateTrigger/components/ActionEmptyPrompt/__snapshots__/ActionEmptyPrompt.test.js.snap
@@ -3,7 +3,7 @@
 exports[`ActionEmptyPrompt renders 1`] = `
 <EuiEmptyPrompt
   actions={
-    <EuiButton
+    <EuiSmallButton
       disabled={true}
       fill={true}
       iconSide="right"
@@ -11,7 +11,7 @@ exports[`ActionEmptyPrompt renders 1`] = `
       onClick={[Function]}
     >
       Manage channels
-    </EuiButton>
+    </EuiSmallButton>
   }
   body={
     <EuiText
diff --git a/public/pages/CreateTrigger/components/AddActionButton/AddActionButton.js b/public/pages/CreateTrigger/components/AddActionButton/AddActionButton.js
index a96a411ca..d06fa4f80 100644
--- a/public/pages/CreateTrigger/components/AddActionButton/AddActionButton.js
+++ b/public/pages/CreateTrigger/components/AddActionButton/AddActionButton.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import _ from 'lodash';
-import { EuiButton, EuiButtonEmpty, EuiPanel } from '@elastic/eui';
+import { EuiButton, EuiSmallButtonEmpty, EuiPanel } from '@elastic/eui';
 import { getInitialActionValues } from './utils';
 import { MONITOR_TYPE } from '../../../../utils/constants';
 import './styles.scss';
@@ -34,13 +34,13 @@ const AddActionButton = ({
 
   return flyoutMode ? (
     <EuiPanel paddingSize="none">
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={onClick}
         iconType="plusInCircle"
         className="add-action-button__flyout-button"
       >
         Add notification
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     </EuiPanel>
   ) : (
     <EuiButton fill={false} size={'s'} onClick={onClick}>
diff --git a/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/BucketLevelTriggerExpression.js b/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/BucketLevelTriggerExpression.js
index 1186c93fb..5b0568c62 100644
--- a/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/BucketLevelTriggerExpression.js
+++ b/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/BucketLevelTriggerExpression.js
@@ -6,12 +6,12 @@
 import React, { Component } from 'react';
 import { Field } from 'formik';
 import {
-  EuiButton,
-  EuiFieldNumber,
+  EuiSmallButton,
+  EuiCompressedFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
 } from '@elastic/eui';
 import { AND_OR_CONDITION_OPTIONS, THRESHOLD_ENUM_OPTIONS } from '../../utils/constants';
 
@@ -54,12 +54,12 @@ class BucketLevelTriggerExpression extends Component {
           <EuiFlexItem grow={false} style={{ width: `${AND_OR_FIELD_WIDTH}px` }}>
             <Field name={andOrConditionFieldName}>
               {({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
-                <EuiFormRow
+                <EuiCompressedFormRow
                   isInvalid={touched.andOrCondition && !!errors.andOrCondition}
                   error={errors.andOrCondition}
                 >
-                  <EuiSelect options={AND_OR_CONDITION_OPTIONS} {...rest} />
-                </EuiFormRow>
+                  <EuiCompressedSelect options={AND_OR_CONDITION_OPTIONS} {...rest} />
+                </EuiCompressedFormRow>
               )}
             </Field>
           </EuiFlexItem>
@@ -75,14 +75,14 @@ class BucketLevelTriggerExpression extends Component {
         >
           <Field name={queryMetricFieldName} fullWidth={true}>
             {({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
-              <EuiFormRow
+              <EuiCompressedFormRow
                 fullWidth={true}
                 label={isFirstCondition ? 'Metric' : null}
                 isInvalid={touched.queryMetric && !!errors.queryMetric}
                 error={errors.queryMetric}
               >
-                <EuiSelect fullWidth={true} options={queryMetrics} {...rest} />
-              </EuiFormRow>
+                <EuiCompressedSelect fullWidth={true} options={queryMetrics} {...rest} />
+              </EuiCompressedFormRow>
             )}
           </Field>
         </EuiFlexItem>
@@ -90,14 +90,14 @@ class BucketLevelTriggerExpression extends Component {
         <EuiFlexItem grow={false} style={{ width: `${THRESHOLD_FIELD_WIDTH}px` }}>
           <Field name={enumFieldName} fullWidth={true}>
             {({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
-              <EuiFormRow
+              <EuiCompressedFormRow
                 fullWidth={true}
                 label={isFirstCondition ? 'Threshold' : null}
                 isInvalid={touched.thresholdEnum && !!errors.thresholdEnum}
                 error={errors.thresholdEnum}
               >
-                <EuiSelect options={THRESHOLD_ENUM_OPTIONS} {...rest} />
-              </EuiFormRow>
+                <EuiCompressedSelect options={THRESHOLD_ENUM_OPTIONS} {...rest} />
+              </EuiCompressedFormRow>
             )}
           </Field>
         </EuiFlexItem>
@@ -105,26 +105,26 @@ class BucketLevelTriggerExpression extends Component {
         <EuiFlexItem grow={false} style={{ width: `${VALUE_FIELD_WIDTH}px` }}>
           <Field name={valueFieldName}>
             {({ field, form: { touched, errors } }) => (
-              <EuiFormRow
+              <EuiCompressedFormRow
                 label={isFirstCondition ? 'Value' : null}
                 isInvalid={touched.thresholdValue && !!errors.thresholdValue}
                 error={errors.thresholdValue}
               >
-                <EuiFieldNumber {...field} />
-              </EuiFormRow>
+                <EuiCompressedFieldNumber {...field} />
+              </EuiCompressedFormRow>
             )}
           </Field>
         </EuiFlexItem>
         {!isFirstCondition ? (
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               color={'danger'}
               onClick={() => {
                 arrayHelpers.remove(index);
               }}
             >
               Remove condition
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         ) : null}
       </EuiFlexGroup>
diff --git a/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/__snapshots__/BucketLevelTriggerExpression.test.js.snap b/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/__snapshots__/BucketLevelTriggerExpression.test.js.snap
index 070802868..cdf082d5e 100644
--- a/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/__snapshots__/BucketLevelTriggerExpression.test.js.snap
+++ b/public/pages/CreateTrigger/components/BucketLevelTriggerExpression/__snapshots__/BucketLevelTriggerExpression.test.js.snap
@@ -68,12 +68,12 @@ exports[`BucketLevelTriggerExpression renders 1`] = `
   <EuiFlexItem
     grow={false}
   >
-    <EuiButton
+    <EuiSmallButton
       color="danger"
       onClick={[Function]}
     >
       Remove condition
-    </EuiButton>
+    </EuiSmallButton>
   </EuiFlexItem>
 </EuiFlexGroup>
 `;
diff --git a/public/pages/CreateTrigger/components/BucketLevelTriggerQuery/BucketLevelTriggerQuery.js b/public/pages/CreateTrigger/components/BucketLevelTriggerQuery/BucketLevelTriggerQuery.js
index bfc7545b7..a5f4c0aca 100644
--- a/public/pages/CreateTrigger/components/BucketLevelTriggerQuery/BucketLevelTriggerQuery.js
+++ b/public/pages/CreateTrigger/components/BucketLevelTriggerQuery/BucketLevelTriggerQuery.js
@@ -11,7 +11,7 @@ import {
   EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiText,
 } from '@elastic/eui';
@@ -72,7 +72,7 @@ const BucketLevelTriggerQuery = ({
                   field: { value },
                   form: { errors, touched, setFieldValue, setFieldTouched },
                 }) => (
-                  <EuiFormRow
+                  <EuiCompressedFormRow
                     label={
                       <EuiFlexGroup alignItems={'flexEnd'} gutterSize={'s'}>
                         <EuiFlexItem grow={false}>
@@ -109,13 +109,13 @@ const BucketLevelTriggerQuery = ({
                       onBlur={() => setFieldTouched(fieldName, true)}
                       value={value}
                     />
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 )}
               </Field>
             </EuiFlexItem>
 
             <EuiFlexItem grow={1} style={{ paddingTop: '6px' }}>
-              <EuiFormRow
+              <EuiCompressedFormRow
                 fullWidth={true}
                 label={
                   <EuiText size={'xs'}>
@@ -132,7 +132,7 @@ const BucketLevelTriggerQuery = ({
                   value={getExecuteMessage(executeResponse)}
                   readOnly
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
diff --git a/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionBuilder.js b/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionBuilder.js
index 6671b5ef6..2d11e322d 100644
--- a/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionBuilder.js
+++ b/public/pages/CreateTrigger/components/CompositeTriggerCondition/ExpressionBuilder.js
@@ -4,7 +4,7 @@ import {
   EuiFlexGroup,
   EuiPopover,
   EuiComboBox,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiExpression,
   EuiToolTip,
   EuiSelect,
@@ -241,7 +241,7 @@ const ExpressionBuilder = ({
       {!hideDeleteButton && (
         <EuiFlexItem grow={false}>
           <EuiToolTip content={'Remove monitor'}>
-            <EuiButtonIcon
+            <EuiSmallButtonIcon
               data-test-subj={`selection-exp-field-item-remove-${triggerIndex}-${idx}`}
               onClick={() => onRemoveExpression(form, idx)}
               iconType={'trash'}
@@ -340,7 +340,7 @@ const ExpressionBuilder = ({
             {options.length > usedExpressions.length && (
               <EuiFlexItem grow={false} key={`selection_add`}>
                 <EuiToolTip content={'Add another monitor'}>
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     onClick={() => {
                       const expressions = _.cloneDeep(usedExpressions);
                       expressions.push({
diff --git a/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/CompositeTriggerCondition.test.js.snap b/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/CompositeTriggerCondition.test.js.snap
index a6d6ba2f9..9a4b74e1d 100644
--- a/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/CompositeTriggerCondition.test.js.snap
+++ b/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/CompositeTriggerCondition.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`CompositeTriggerCondition renders 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="triggerConditionFieldsContainer_undefined-form-row-row"
   style="max-width:inherit"
 >
@@ -28,7 +28,7 @@ exports[`CompositeTriggerCondition renders 1`] = `
         class="euiFlexItem"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="pathtriggerCondition_undefined_code-form-row-row"
         >
           <div
diff --git a/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionBuilder.test.js.snap b/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionBuilder.test.js.snap
index 71961f70a..b397a3500 100644
--- a/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionBuilder.test.js.snap
+++ b/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionBuilder.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`ExpressionBuilder renders 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="pathtriggerCondition_value-form-row-row"
   style="max-width:inherit"
 >
diff --git a/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionEditor.test.js.snap b/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionEditor.test.js.snap
index 27e0077d5..ae5b16a8d 100644
--- a/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionEditor.test.js.snap
+++ b/public/pages/CreateTrigger/components/CompositeTriggerCondition/__snapshots__/ExpressionEditor.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`ExpressionEditor renders 1`] = `
 <div
-  class="euiFormRow euiFormRow--fullWidth"
+  class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
   id="pathtriggerCondition_undefined_code-form-row-row"
 >
   <div
diff --git a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
index 4a73a5cd5..35a187b01 100644
--- a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
+++ b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
@@ -5,7 +5,13 @@
 
 import React, { Component } from 'react';
 import { Field } from 'formik';
-import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
+import {
+  EuiCompressedFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
+} from '@elastic/eui';
 import { THRESHOLD_ENUM_OPTIONS } from '../../utils/constants';
 
 export const Expressions = { THRESHOLD: 'THRESHOLD' };
@@ -18,21 +24,24 @@ class TriggerExpressions extends Component {
   render() {
     const { label, keyFieldName, valueFieldName, flyoutMode } = this.props;
     return (
-      <EuiFormRow label={label} style={flyoutMode ? { maxWidth: '100%' } : { width: '390px' }}>
+      <EuiCompressedFormRow
+        label={label}
+        style={flyoutMode ? { maxWidth: '100%' } : { width: '390px' }}
+      >
         <EuiFlexGroup alignItems={'flexStart'} gutterSize={'m'}>
           <EuiFlexItem grow={1}>
             <Field name={keyFieldName}>
               {({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
-                <EuiFormRow
+                <EuiCompressedFormRow
                   isInvalid={touched.thresholdEnum && !!errors.thresholdEnum}
                   error={errors.thresholdEnum}
                 >
-                  <EuiSelect
+                  <EuiCompressedSelect
                     options={THRESHOLD_ENUM_OPTIONS}
                     data-test-subj={`${keyFieldName}_conditionEnumField`}
                     {...rest}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               )}
             </Field>
           </EuiFlexItem>
@@ -40,20 +49,20 @@ class TriggerExpressions extends Component {
           <EuiFlexItem grow={1}>
             <Field name={valueFieldName}>
               {({ field, form: { touched, errors } }) => (
-                <EuiFormRow
+                <EuiCompressedFormRow
                   isInvalid={touched.thresholdValue && !!errors.thresholdValue}
                   error={errors.thresholdValue}
                 >
-                  <EuiFieldNumber
+                  <EuiCompressedFieldNumber
                     data-test-subj={`${valueFieldName}_conditionValueField`}
                     {...field}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               )}
             </Field>
           </EuiFlexItem>
         </EuiFlexGroup>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   }
 }
diff --git a/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap b/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap
index 445297f3b..b36b70c41 100644
--- a/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap
+++ b/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TriggerExpressions renders 1`] = `
-<EuiFormRow
+<EuiCompressedFormRow
   describedByIds={Array []}
-  display="row"
+  display="rowCompressed"
   fullWidth={false}
   hasChildLabel={true}
   hasEmptyLabelSpace={false}
@@ -33,5 +33,5 @@ exports[`TriggerExpressions renders 1`] = `
       </Field>
     </EuiFlexItem>
   </EuiFlexGroup>
-</EuiFormRow>
+</EuiCompressedFormRow>
 `;
diff --git a/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js b/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js
index 0733eb1f0..47320ec35 100644
--- a/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js
+++ b/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js
@@ -11,7 +11,7 @@ import {
   EuiCodeEditor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiSpacer,
   EuiText,
@@ -67,7 +67,7 @@ const TriggerQuery = ({
                 {isAd ? (
                   <div>
                     <EuiSpacer size={'s'} />
-                    <EuiFormRow label="Response" fullWidth={true}>
+                    <EuiCompressedFormRow label="Response" fullWidth={true}>
                       <EuiCodeEditor
                         grow={true}
                         mode="json"
@@ -77,7 +77,7 @@ const TriggerQuery = ({
                         value={error || formattedResponse}
                         readOnly
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                     <EuiSpacer size={'l'} />
                   </div>
                 ) : null}
@@ -87,7 +87,7 @@ const TriggerQuery = ({
                     field: { value },
                     form: { errors, touched, setFieldValue, setFieldTouched },
                   }) => (
-                    <EuiFormRow
+                    <EuiCompressedFormRow
                       label={
                         <EuiFlexGroup alignItems={'flexEnd'} gutterSize={'s'}>
                           <EuiFlexItem grow={false}>
@@ -125,14 +125,14 @@ const TriggerQuery = ({
                         value={value}
                         data-test-subj={'triggerQueryCodeEditor'}
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   )}
                 </Field>
               </div>
             </EuiFlexItem>
 
             <EuiFlexItem grow={1} style={{ marginBottom: '0px', paddingTop: '6px' }}>
-              <EuiFormRow
+              <EuiCompressedFormRow
                 fullWidth={true}
                 label={
                   <EuiText size={'xs'}>
@@ -149,7 +149,7 @@ const TriggerQuery = ({
                   value={getExecuteMessage(executeResponse)}
                   readOnly
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
diff --git a/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap b/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap
index 4f3710f0d..392e5dae7 100644
--- a/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap
+++ b/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap
@@ -42,9 +42,9 @@ exports[`TriggerQuery renders 1`] = `
             }
           }
         >
-          <EuiFormRow
+          <EuiCompressedFormRow
             describedByIds={Array []}
-            display="row"
+            display="rowCompressed"
             fullWidth={true}
             hasChildLabel={true}
             hasEmptyLabelSpace={false}
@@ -69,7 +69,7 @@ exports[`TriggerQuery renders 1`] = `
               value="No response"
               width="100%"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexItem>
diff --git a/public/pages/CreateTrigger/containers/ConfigureTriggers/ConfigureTriggers.js b/public/pages/CreateTrigger/containers/ConfigureTriggers/ConfigureTriggers.js
index f662836b3..199063e76 100644
--- a/public/pages/CreateTrigger/containers/ConfigureTriggers/ConfigureTriggers.js
+++ b/public/pages/CreateTrigger/containers/ConfigureTriggers/ConfigureTriggers.js
@@ -10,7 +10,7 @@ import {
   EuiBadge,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
 } from '@elastic/eui';
 import ContentPanel from '../../../../components/ContentPanel';
 import _ from 'lodash';
@@ -411,7 +411,7 @@ class ConfigureTriggers extends React.Component {
                   </EuiFlexGroup>
                 ),
                 extraAction: (
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     iconType="trash"
                     color="text"
                     aria-label={`Delete ${trigger.name}`}
diff --git a/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger/CreateTrigger.js b/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger/CreateTrigger.js
index 2b3d9e1ba..e8c019095 100644
--- a/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger/CreateTrigger.js
+++ b/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger/CreateTrigger.js
@@ -8,8 +8,8 @@ import _ from 'lodash';
 import moment from 'moment-timezone';
 import { Formik, FieldArray } from 'formik';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
@@ -372,12 +372,12 @@ export default class CreateTrigger extends Component {
               <EuiSpacer />
               <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                 <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty onClick={onCloseTrigger}>Cancel</EuiButtonEmpty>
+                  <EuiSmallButtonEmpty onClick={onCloseTrigger}>Cancel</EuiSmallButtonEmpty>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiButton onClick={handleSubmit} isLoading={isSubmitting} fill>
+                  <EuiSmallButton onClick={handleSubmit} isLoading={isSubmitting} fill>
                     {edit ? 'Update' : 'Create'}
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiFlexItem>
               </EuiFlexGroup>
               <SubmitErrorHandler
diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/NotificationConfigDialog.js b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/NotificationConfigDialog.js
index c61f52dfa..8b754d115 100644
--- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/NotificationConfigDialog.js
+++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/NotificationConfigDialog.js
@@ -5,7 +5,7 @@
 
 import React, { useEffect, useState } from 'react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiSpacer,
   EuiModal,
   EuiModalBody,
@@ -132,10 +132,10 @@ const NotificationConfigDialog = ({
         />
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButton onClick={() => clearConfig()}>Cancel</EuiButton>
-        <EuiButton onClick={() => closeModal()} fill>
+        <EuiSmallButton onClick={() => clearConfig()}>Cancel</EuiSmallButton>
+        <EuiSmallButton onClick={() => closeModal()} fill>
           Update
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotifications.js b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotifications.js
index 39ef4e654..f9be27be1 100644
--- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotifications.js
+++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotifications.js
@@ -6,7 +6,7 @@
 import React, { Fragment, useState, useEffect } from 'react';
 import {
   EuiSpacer,
-  EuiButton,
+  EuiSmallButton,
   EuiText,
   EuiAccordion,
   EuiHorizontalRule,
@@ -144,7 +144,7 @@ const TriggerNotifications = ({
           ))
         : null}
       {actions.length ? <EuiHorizontalRule margin={'s'} /> : null}
-      <EuiButton onClick={() => onAddNotification()}>Add notification</EuiButton>
+      <EuiSmallButton onClick={() => onAddNotification()}>Add notification</EuiSmallButton>
     </Fragment>
   );
 };
diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotificationsContent.js b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotificationsContent.js
index afa7cfa0c..b824382cb 100644
--- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotificationsContent.js
+++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/TriggerNotificationsContent.js
@@ -4,7 +4,7 @@
  */
 
 import React, { Fragment, useState, useEffect } from 'react';
-import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
+import { EuiPanel, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty, EuiSpacer } from '@elastic/eui';
 import { FormikComboBox } from '../../../../components/FormControls';
 import NotificationConfigDialog from './NotificationConfigDialog';
 import _ from 'lodash';
@@ -94,22 +94,22 @@ const TriggerNotificationsContent = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false} style={{ paddingLeft: 0, marginLeft: 0 }}>
-            <EuiButtonEmpty
+            <EuiSmallButtonEmpty
               iconType={'popout'}
               style={{ marginTop: '22px' }}
               disabled={!hasNotifications}
               onClick={() => window.open(getManageChannelsUrl())}
             >
               Manage channels
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
         </EuiFlexGroup>
         {selected.length ? (
           <Fragment>
             <EuiSpacer size={'xs'} />
-            <EuiButtonEmpty iconType={'pencil'} onClick={() => showConfig()}>
+            <EuiSmallButtonEmpty iconType={'pencil'} onClick={() => showConfig()}>
               Configure notification
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </Fragment>
         ) : null}
       </EuiPanel>
diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap
index 9f2be81ab..f7c1788e0 100644
--- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap
+++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/DefineCompositeLevelTrigger.test.js.snap
@@ -70,7 +70,7 @@ exports[`DefineCompositeLevelTrigger renders 1`] = `
             class="euiSpacer euiSpacer--m"
           />
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="triggerDefinitions[undefined].name-form-row-row"
             style="padding-left:0"
           >
@@ -93,13 +93,13 @@ exports[`DefineCompositeLevelTrigger renders 1`] = `
               class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
-                    class="euiFieldText"
+                    class="euiFieldText euiFieldText--compressed"
                     data-test-subj="composite-trigger-name"
                     name="triggerDefinitions[undefined].name"
                     type="text"
@@ -113,7 +113,7 @@ exports[`DefineCompositeLevelTrigger renders 1`] = `
             class="euiSpacer euiSpacer--l"
           />
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="triggerConditionFieldsContainer_undefined-form-row-row"
             style="max-width:inherit"
           >
@@ -154,7 +154,7 @@ exports[`DefineCompositeLevelTrigger renders 1`] = `
                   class="euiFlexItem"
                 >
                   <div
-                    class="euiFormRow euiFormRow--fullWidth"
+                    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                     id="triggerDefinitions_undefined__triggerConditions_undefined_code-form-row-row"
                   >
                     <div
@@ -211,7 +211,7 @@ exports[`DefineCompositeLevelTrigger renders 1`] = `
             Alert severity
           </h4>
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="triggerDefinitions[undefined].severity-form-row-row"
             style="padding-left:10px;margin-top:0px"
           >
@@ -230,13 +230,13 @@ exports[`DefineCompositeLevelTrigger renders 1`] = `
               class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <select
-                    class="euiSelect"
+                    class="euiSelect euiSelect--compressed"
                     id="triggerDefinitions[undefined].severity"
                     name="triggerDefinitions[undefined].severity"
                   >
@@ -293,7 +293,7 @@ exports[`DefineCompositeLevelTrigger renders 1`] = `
             class="euiSpacer euiSpacer--m"
           />
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             type="button"
           >
             <span
diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotifications.test.js.snap b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotifications.test.js.snap
index c15871e64..5c80d6953 100644
--- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotifications.test.js.snap
+++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotifications.test.js.snap
@@ -11,7 +11,7 @@ Array [
     class="euiSpacer euiSpacer--m"
   />,
   <button
-    class="euiButton euiButton--primary"
+    class="euiButton euiButton--primary euiButton--small"
     type="button"
   >
     <span
diff --git a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotificationsContent.test.js.snap b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotificationsContent.test.js.snap
index 4c60be493..5f9aed71a 100644
--- a/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotificationsContent.test.js.snap
+++ b/public/pages/CreateTrigger/containers/DefineCompositeLevelTrigger/__snapshots__/TriggerNotificationsContent.test.js.snap
@@ -12,7 +12,7 @@ exports[`TriggerNotificationsContent renders with notifications 1`] = `
       style="max-width:400px"
     >
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="channel_name_undefined_0-form-row-row"
       >
         <div
@@ -31,18 +31,18 @@ exports[`TriggerNotificationsContent renders with notifications 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             name="channel_name_undefined_0"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
@@ -93,7 +93,7 @@ exports[`TriggerNotificationsContent renders with notifications 1`] = `
       style="padding-left:0;margin-left:0"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         style="margin-top:22px"
         type="button"
       >
@@ -127,7 +127,7 @@ exports[`TriggerNotificationsContent renders without notifications 1`] = `
       style="max-width:400px"
     >
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="channel_name_undefined_0-form-row-row"
       >
         <div
@@ -146,18 +146,18 @@ exports[`TriggerNotificationsContent renders without notifications 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             name="channel_name_undefined_0"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
@@ -208,7 +208,7 @@ exports[`TriggerNotificationsContent renders without notifications 1`] = `
       style="padding-left:0;margin-left:0"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty-isDisabled"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty-isDisabled"
         disabled=""
         style="margin-top:22px"
         type="button"
diff --git a/public/pages/CreateTrigger/containers/DefineDocumentLevelTrigger/DocumentLevelTriggerExpression.js b/public/pages/CreateTrigger/containers/DefineDocumentLevelTrigger/DocumentLevelTriggerExpression.js
index 43b63de9f..474ffcdd2 100644
--- a/public/pages/CreateTrigger/containers/DefineDocumentLevelTrigger/DocumentLevelTriggerExpression.js
+++ b/public/pages/CreateTrigger/containers/DefineDocumentLevelTrigger/DocumentLevelTriggerExpression.js
@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import _ from 'lodash';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+import { EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiCompressedFormRow } from '@elastic/eui';
 import { FormikComboBox, FormikSelect } from '../../../../components/FormControls';
 import { AND_OR_CONDITION_OPTIONS } from '../../utils/constants';
 import { hasError, isInvalid, required } from '../../../../utils/validate';
@@ -87,15 +87,15 @@ class DocumentLevelTriggerExpression extends Component {
         {/* Do not display this button for the first condition */}
         {!isFirstCondition && (
           <EuiFlexItem grow={false}>
-            <EuiFormRow hasEmptyLabelSpace={true}>
-              <EuiButton
+            <EuiCompressedFormRow hasEmptyLabelSpace={true}>
+              <EuiSmallButton
                 color={'danger'}
                 onClick={() => arrayHelpers.remove(index)}
                 data-test-subj={`documentLevelTriggerExpression_removeConditionButton_${formFieldName}`}
               >
                 Remove condition
-              </EuiButton>
-            </EuiFormRow>
+              </EuiSmallButton>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         )}
       </EuiFlexGroup>
diff --git a/public/pages/CreateTrigger/containers/DefineTrigger/__snapshots__/AnomalyDetectorTrigger.test.js.snap b/public/pages/CreateTrigger/containers/DefineTrigger/__snapshots__/AnomalyDetectorTrigger.test.js.snap
index 7f598c380..760fccfb0 100644
--- a/public/pages/CreateTrigger/containers/DefineTrigger/__snapshots__/AnomalyDetectorTrigger.test.js.snap
+++ b/public/pages/CreateTrigger/containers/DefineTrigger/__snapshots__/AnomalyDetectorTrigger.test.js.snap
@@ -64,7 +64,7 @@ exports[`AnomalyDetectorTrigger renders no feature 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="createButton"
             href="anomaly-detection-dashboards#/detectors/tempId/features"
             rel="noopener noreferrer"
diff --git a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js
index 83b283208..a839d9c13 100644
--- a/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js
+++ b/public/pages/Dashboard/components/AcknowledgeAlertsModal/AcknowledgeAlertsModal.js
@@ -9,7 +9,7 @@ import queryString from 'query-string';
 import PropTypes from 'prop-types';
 import {
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -240,22 +240,22 @@ export default class AcknowledgeAlertsModal extends Component {
     const actions = () => {
       const { selectedItems } = this.state;
       const actions = [
-        <EuiButton
+        <EuiSmallButton
           onClick={this.acknowledgeAlerts}
           disabled={!selectedItems.length}
           data-test-subj={'alertsDashboardModal_acknowledgeAlertsButton'}
         >
           Acknowledge
-        </EuiButton>,
+        </EuiSmallButton>,
       ];
       if (!_.isEmpty(detectorId)) {
         actions.unshift(
-          <EuiButton
+          <EuiSmallButton
             href={`${OPENSEARCH_DASHBOARDS_AD_PLUGIN}#/detectors/${detectorId}`}
             target="_blank"
           >
             View detector <EuiIcon type="popout" />
-          </EuiButton>
+          </EuiSmallButton>
         );
       }
       return actions;
@@ -414,13 +414,13 @@ export default class AcknowledgeAlertsModal extends Component {
             </EuiFlexGroup>
           </EuiModalBody>
           <EuiModalFooter>
-            <EuiButton
+            <EuiSmallButton
               onClick={onClose}
               fill
               data-test-subj={`alertsDashboardModal_closeButton_${triggerName}`}
             >
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
diff --git a/public/pages/Dashboard/components/ChainedAlertDetailsFlyout/ChainedAlertDetailsFlyout.tsx b/public/pages/Dashboard/components/ChainedAlertDetailsFlyout/ChainedAlertDetailsFlyout.tsx
index 130bb886b..880696325 100644
--- a/public/pages/Dashboard/components/ChainedAlertDetailsFlyout/ChainedAlertDetailsFlyout.tsx
+++ b/public/pages/Dashboard/components/ChainedAlertDetailsFlyout/ChainedAlertDetailsFlyout.tsx
@@ -8,7 +8,7 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlyout,
   EuiFlyoutHeader,
   EuiFlyoutBody,
@@ -20,8 +20,8 @@ export const ChainedAlertDetailsFlyout = ({ closeFlyout, alert, httpClient }) =>
   const [associatedAlerts, setAssociatedAlerts] = useState([]);
 
   useEffect(() => {
-    httpClient.get('../api/alerting/workflows/alerts', { 
-      query: { 
+    httpClient.get('../api/alerting/workflows/alerts', {
+      query: {
         workflowIds: alert.workflow_id,
         getAssociatedAlerts: true,
         sortString: 'start_time',
@@ -63,7 +63,7 @@ export const ChainedAlertDetailsFlyout = ({ closeFlyout, alert, httpClient }) =>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButtonIcon
+            <EuiSmallButtonIcon
               iconType="cross"
               display="empty"
               iconSize="m"
@@ -77,4 +77,4 @@ export const ChainedAlertDetailsFlyout = ({ closeFlyout, alert, httpClient }) =>
       </EuiFlyoutBody>
     </EuiFlyout>
   )
-}
\ No newline at end of file
+}
diff --git a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js
index dd861bd04..8065852e6 100644
--- a/public/pages/Dashboard/components/DashboardControls/DashboardControls.js
+++ b/public/pages/Dashboard/components/DashboardControls/DashboardControls.js
@@ -5,7 +5,13 @@
 
 import React from 'react';
 import _ from 'lodash';
-import { EuiFieldSearch, EuiFlexGroup, EuiSelect, EuiFlexItem, EuiPagination } from '@elastic/eui';
+import {
+  EuiCompressedFieldSearch,
+  EuiFlexGroup,
+  EuiCompressedSelect,
+  EuiFlexItem,
+  EuiPagination,
+} from '@elastic/eui';
 import { ALERT_STATE, MONITOR_TYPE } from '../../../../utils/constants';
 
 const severityOptions = [
@@ -51,7 +57,7 @@ const DashboardControls = ({
   return (
     <EuiFlexGroup style={{ padding: '0px 5px' }}>
       <EuiFlexItem>
-        <EuiFieldSearch
+        <EuiCompressedFieldSearch
           fullWidth={true}
           placeholder="Search"
           onChange={onSearchChange}
@@ -61,12 +67,16 @@ const DashboardControls = ({
 
       {isAlertsFlyout ? null : (
         <EuiFlexItem grow={false}>
-          <EuiSelect options={severityOptions} value={severity} onChange={onSeverityChange} />
+          <EuiCompressedSelect
+            options={severityOptions}
+            value={severity}
+            onChange={onSeverityChange}
+          />
         </EuiFlexItem>
       )}
 
       <EuiFlexItem grow={false}>
-        <EuiSelect
+        <EuiCompressedSelect
           options={supportedStateOptions}
           value={state}
           onChange={onStateChange}
diff --git a/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap b/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap
index fb94a8bd7..ad6ed0219 100644
--- a/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap
+++ b/public/pages/Dashboard/components/DashboardControls/__snapshots__/DashboardControls.test.js.snap
@@ -9,13 +9,13 @@ exports[`DashboardControls renders 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
           placeholder="Search"
           type="search"
           value=""
@@ -38,13 +38,13 @@ exports[`DashboardControls renders 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayout euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <select
-          class="euiSelect"
+          class="euiSelect euiSelect--compressed"
         >
           <option
             selected=""
@@ -96,13 +96,13 @@ exports[`DashboardControls renders 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayout euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <select
-          class="euiSelect"
+          class="euiSelect euiSelect--compressed"
           data-test-subj="dashboardAlertStateFilter"
         >
           <option
diff --git a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
index 66b992646..ac506fe9e 100644
--- a/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
+++ b/public/pages/Dashboard/components/DashboardEmptyPrompt/DashboardEmptyPrompt.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiButton, EuiButtonEmpty, EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiSmallButtonEmpty, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../utils/constants';
 import { PLUGIN_NAME } from '../../../../../utils/constants';
@@ -18,12 +18,12 @@ const editTriggerConditionsText =
   'There are no existing alerts. Adjust trigger conditions to start alerting. Once an alarm is triggered, the state will show in this table.';
 
 const createMonitorButton = (
-  <EuiButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}>
+  <EuiSmallButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}>
     Create monitor
-  </EuiButton>
+  </EuiSmallButton>
 );
 const editMonitorButton = (onCreateTrigger) => (
-  <EuiButtonEmpty onClick={onCreateTrigger}>Edit monitor</EuiButtonEmpty>
+  <EuiSmallButtonEmpty onClick={onCreateTrigger}>Edit monitor</EuiSmallButtonEmpty>
 );
 
 const DashboardEmptyPrompt = ({ onCreateTrigger, isModal = false }) => {
diff --git a/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap b/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap
index 6d91e80be..059702e8e 100644
--- a/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap
+++ b/public/pages/Dashboard/components/DashboardEmptyPrompt/__snapshots__/DashboardEmptyPrompt.test.js.snap
@@ -24,7 +24,7 @@ exports[`DashboardEmptyPrompt renders 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <a
-    class="euiButton euiButton--primary euiButton--fill"
+    class="euiButton euiButton--primary euiButton--small euiButton--fill"
     href="alerting#/create-monitor"
     rel="noreferrer"
   >
diff --git a/public/pages/Dashboard/components/FindingsDashboard/FindingFlyout.js b/public/pages/Dashboard/components/FindingsDashboard/FindingFlyout.js
index 6d3f18252..befe9e993 100644
--- a/public/pages/Dashboard/components/FindingsDashboard/FindingFlyout.js
+++ b/public/pages/Dashboard/components/FindingsDashboard/FindingFlyout.js
@@ -17,7 +17,7 @@ import {
   EuiText,
   EuiTitle,
   EuiFlexGroup,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
 } from '@elastic/eui';
 import { getFindings } from './findingsUtils';
 import { DEFAULT_GET_FINDINGS_PARAMS } from '../../../../../server/services/FindingService';
@@ -113,7 +113,7 @@ export default class FindingFlyout extends Component {
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 iconType="cross"
                 display="empty"
                 iconSize="m"
diff --git a/public/pages/Dashboard/containers/Dashboard.js b/public/pages/Dashboard/containers/Dashboard.js
index a9738c206..ba7abafd4 100644
--- a/public/pages/Dashboard/containers/Dashboard.js
+++ b/public/pages/Dashboard/containers/Dashboard.js
@@ -8,11 +8,11 @@ import _ from 'lodash';
 import queryString from 'query-string';
 import {
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiHorizontalRule,
   EuiIcon,
   EuiToolTip,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
 } from '@elastic/eui';
 import ContentPanel from '../../../components/ContentPanel';
 import DashboardEmptyPrompt from '../components/DashboardEmptyPrompt';
@@ -411,7 +411,7 @@ export default class Dashboard extends Component {
               {
                 render: (alert) => (
                   <EuiToolTip content={'View details'}>
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label={'View details'}
                       data-test-subj={`view-details-icon`}
                       iconType={'inspect'}
@@ -476,19 +476,19 @@ export default class Dashboard extends Component {
     const actions = () => {
       // The acknowledge button is disabled when viewing by per alerts, and no item selected or per trigger view and item selected is not 1.
       const actions = [
-        <EuiButton
+        <EuiSmallButton
           onClick={perAlertView ? this.acknowledgeAlert : this.openModal}
           disabled={perAlertView ? !selectedItems.length : selectedItems.length !== 1}
           data-test-subj={'acknowledgeAlertsButton'}
         >
           Acknowledge
-        </EuiButton>,
+        </EuiSmallButton>,
       ];
 
       if (!perAlertView) {
         const alert = selectedItems[0];
         actions.unshift(
-          <EuiButton
+          <EuiSmallButton
             onClick={() => {
               this.openFlyout({
                 ...alert,
@@ -506,18 +506,18 @@ export default class Dashboard extends Component {
             disabled={selectedItems.length !== 1}
           >
             View alert details
-          </EuiButton>
+          </EuiSmallButton>
         );
       }
 
       if (detectorIds.length) {
         actions.unshift(
-          <EuiButton
+          <EuiSmallButton
             href={`${OPENSEARCH_DASHBOARDS_AD_PLUGIN}#/detectors/${detectorIds[0]}`}
             target="_blank"
           >
             View detector <EuiIcon type="popout" />
-          </EuiButton>
+          </EuiSmallButton>
         );
       }
       return actions;
diff --git a/public/pages/Dashboard/containers/FindingsDashboard.js b/public/pages/Dashboard/containers/FindingsDashboard.js
index 6443601e3..61414901b 100644
--- a/public/pages/Dashboard/containers/FindingsDashboard.js
+++ b/public/pages/Dashboard/containers/FindingsDashboard.js
@@ -9,7 +9,7 @@ import queryString from 'query-string';
 import {
   EuiBasicTable,
   EuiEmptyPrompt,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -208,7 +208,7 @@ export default class FindingsDashboard extends Component {
         {!isPreview && (
           <EuiFlexGroup style={{ padding: '0px 5px' }}>
             <EuiFlexItem>
-              <EuiFieldSearch
+              <EuiCompressedFieldSearch
                 fullWidth={true}
                 placeholder={'Search for a document ID'}
                 onChange={(selection) => {
diff --git a/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap b/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap
index 0ab6091c0..7dcbd7846 100644
--- a/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap
+++ b/public/pages/Dashboard/containers/__snapshots__/Dashboard.test.js.snap
@@ -94,13 +94,13 @@ exports[`Dashboard renders in flyout 1`] = `
   <ContentPanel
     actions={
       Array [
-        <EuiButton
+        <EuiSmallButton
           data-test-subj="acknowledgeAlertsButton"
           disabled={true}
           onClick={[Function]}
         >
           Acknowledge
-        </EuiButton>,
+        </EuiSmallButton>,
       ]
     }
     bodyStyles={
@@ -181,54 +181,62 @@ exports[`Dashboard renders in flyout 1`] = `
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiButton
+                        <EuiSmallButton
                           data-test-subj="acknowledgeAlertsButton"
                           disabled={true}
                           onClick={[Function]}
                         >
-                          <EuiButtonDisplay
-                            baseClassName="euiButton"
+                          <EuiButton
                             data-test-subj="acknowledgeAlertsButton"
                             disabled={true}
-                            element="button"
-                            isDisabled={true}
                             onClick={[Function]}
-                            type="button"
+                            size="s"
                           >
-                            <button
-                              className="euiButton euiButton--primary euiButton-isDisabled"
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
                               data-test-subj="acknowledgeAlertsButton"
                               disabled={true}
+                              element="button"
+                              isDisabled={true}
                               onClick={[Function]}
-                              style={
-                                Object {
-                                  "minWidth": undefined,
-                                }
-                              }
+                              size="s"
                               type="button"
                             >
-                              <EuiButtonContent
-                                className="euiButton__content"
-                                iconSide="left"
-                                textProps={
+                              <button
+                                className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                                data-test-subj="acknowledgeAlertsButton"
+                                disabled={true}
+                                onClick={[Function]}
+                                style={
                                   Object {
-                                    "className": "euiButton__text",
+                                    "minWidth": undefined,
                                   }
                                 }
+                                type="button"
                               >
-                                <span
-                                  className="euiButtonContent euiButton__content"
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
                                 >
                                   <span
-                                    className="euiButton__text"
+                                    className="euiButtonContent euiButton__content"
                                   >
-                                    Acknowledge
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Acknowledge
+                                    </span>
                                   </span>
-                                </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonDisplay>
-                        </EuiButton>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </EuiSmallButton>
                       </div>
                     </EuiFlexItem>
                   </div>
@@ -310,8 +318,8 @@ exports[`Dashboard renders in flyout 1`] = `
                   <div
                     className="euiFlexItem"
                   >
-                    <EuiFieldSearch
-                      compressed={false}
+                    <EuiCompressedFieldSearch
+                      compressed={true}
                       fullWidth={true}
                       incremental={false}
                       isClearable={true}
@@ -321,20 +329,20 @@ exports[`Dashboard renders in flyout 1`] = `
                       value=""
                     >
                       <EuiFormControlLayout
-                        compressed={false}
+                        compressed={true}
                         fullWidth={true}
                         icon="search"
                         isLoading={false}
                       >
                         <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
                           <div
                             className="euiFormControlLayout__childrenWrapper"
                           >
                             <EuiValidatableControl>
                               <input
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                                 onChange={[Function]}
                                 onKeyUp={[Function]}
                                 placeholder="Search"
@@ -343,7 +351,7 @@ exports[`Dashboard renders in flyout 1`] = `
                               />
                             </EuiValidatableControl>
                             <EuiFormControlLayoutIcons
-                              compressed={false}
+                              compressed={true}
                               icon="search"
                               isLoading={false}
                             >
@@ -351,7 +359,7 @@ exports[`Dashboard renders in flyout 1`] = `
                                 className="euiFormControlLayoutIcons"
                               >
                                 <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                                  size="s"
                                   type="search"
                                 >
                                   <span
@@ -360,7 +368,7 @@ exports[`Dashboard renders in flyout 1`] = `
                                     <EuiIcon
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                      size="s"
                                       type="search"
                                     >
                                       <div>
@@ -374,7 +382,7 @@ exports[`Dashboard renders in flyout 1`] = `
                           </div>
                         </div>
                       </EuiFormControlLayout>
-                    </EuiFieldSearch>
+                    </EuiCompressedFieldSearch>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -383,7 +391,7 @@ exports[`Dashboard renders in flyout 1`] = `
                   <div
                     className="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <EuiSelect
+                    <EuiCompressedSelect
                       data-test-subj="dashboardAlertStateFilter"
                       onChange={[Function]}
                       options={
@@ -416,107 +424,142 @@ exports[`Dashboard renders in flyout 1`] = `
                       }
                       value="ALL"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        compressed={true}
+                        data-test-subj="dashboardAlertStateFilter"
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All alerts",
+                              "value": "ALL",
+                            },
+                            Object {
+                              "text": "Active",
+                              "value": "ACTIVE",
+                            },
+                            Object {
+                              "text": "Acknowledged",
+                              "value": "ACKNOWLEDGED",
+                            },
+                            Object {
+                              "text": "Completed",
+                              "value": "COMPLETED",
+                            },
+                            Object {
+                              "text": "Error",
+                              "value": "ERROR",
+                            },
+                            Object {
+                              "text": "Deleted",
+                              "value": "DELETED",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={true}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                data-test-subj="dashboardAlertStateFilter"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect euiSelect--compressed"
+                                  data-test-subj="dashboardAlertStateFilter"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All alerts
-                                </option>
-                                <option
-                                  key="1"
-                                  value="ACTIVE"
-                                >
-                                  Active
-                                </option>
-                                <option
-                                  key="2"
-                                  value="ACKNOWLEDGED"
-                                >
-                                  Acknowledged
-                                </option>
-                                <option
-                                  key="3"
-                                  value="COMPLETED"
-                                >
-                                  Completed
-                                </option>
-                                <option
-                                  key="4"
-                                  value="ERROR"
-                                >
-                                  Error
-                                </option>
-                                <option
-                                  key="5"
-                                  value="DELETED"
-                                >
-                                  Deleted
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All alerts
+                                  </option>
+                                  <option
+                                    key="1"
+                                    value="ACTIVE"
+                                  >
+                                    Active
+                                  </option>
+                                  <option
+                                    key="2"
+                                    value="ACKNOWLEDGED"
+                                  >
+                                    Acknowledged
+                                  </option>
+                                  <option
+                                    key="3"
+                                    value="COMPLETED"
+                                  >
+                                    Completed
+                                  </option>
+                                  <option
+                                    key="4"
+                                    value="ERROR"
+                                  >
+                                    Error
+                                  </option>
+                                  <option
+                                    key="5"
+                                    value="DELETED"
+                                  >
+                                    Deleted
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={true}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="s"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="s"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </EuiCompressedSelect>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -1453,12 +1496,12 @@ exports[`Dashboard renders in flyout 1`] = `
                                     <DashboardEmptyPrompt>
                                       <EuiEmptyPrompt
                                         actions={
-                                          <EuiButton
+                                          <EuiSmallButton
                                             fill={true}
                                             href="alerting#/create-monitor"
                                           >
                                             Create monitor
-                                          </EuiButton>
+                                          </EuiSmallButton>
                                         }
                                         body={
                                           <EuiText
@@ -1515,51 +1558,58 @@ exports[`Dashboard renders in flyout 1`] = `
                                               className="euiSpacer euiSpacer--l"
                                             />
                                           </EuiSpacer>
-                                          <EuiButton
+                                          <EuiSmallButton
                                             fill={true}
                                             href="alerting#/create-monitor"
                                           >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
-                                              element="a"
+                                            <EuiButton
                                               fill={true}
                                               href="alerting#/create-monitor"
-                                              isDisabled={false}
-                                              rel="noreferrer"
+                                              size="s"
                                             >
-                                              <a
-                                                className="euiButton euiButton--primary euiButton--fill"
-                                                disabled={false}
+                                              <EuiButtonDisplay
+                                                baseClassName="euiButton"
+                                                element="a"
+                                                fill={true}
                                                 href="alerting#/create-monitor"
+                                                isDisabled={false}
                                                 rel="noreferrer"
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
+                                                size="s"
                                               >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="left"
-                                                  textProps={
+                                                <a
+                                                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                                  disabled={false}
+                                                  href="alerting#/create-monitor"
+                                                  rel="noreferrer"
+                                                  style={
                                                     Object {
-                                                      "className": "euiButton__text",
+                                                      "minWidth": undefined,
                                                     }
                                                   }
                                                 >
-                                                  <span
-                                                    className="euiButtonContent euiButton__content"
+                                                  <EuiButtonContent
+                                                    className="euiButton__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButton__text",
+                                                      }
+                                                    }
                                                   >
                                                     <span
-                                                      className="euiButton__text"
+                                                      className="euiButtonContent euiButton__content"
                                                     >
-                                                      Create monitor
+                                                      <span
+                                                        className="euiButton__text"
+                                                      >
+                                                        Create monitor
+                                                      </span>
                                                     </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </a>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
+                                                  </EuiButtonContent>
+                                                </a>
+                                              </EuiButtonDisplay>
+                                            </EuiButton>
+                                          </EuiSmallButton>
                                         </div>
                                       </EuiEmptyPrompt>
                                     </DashboardEmptyPrompt>
@@ -1636,19 +1686,19 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
   <ContentPanel
     actions={
       Array [
-        <EuiButton
+        <EuiSmallButton
           disabled={true}
           onClick={[Function]}
         >
           View alert details
-        </EuiButton>,
-        <EuiButton
+        </EuiSmallButton>,
+        <EuiSmallButton
           data-test-subj="acknowledgeAlertsButton"
           disabled={true}
           onClick={[Function]}
         >
           Acknowledge
-        </EuiButton>,
+        </EuiSmallButton>,
       ]
     }
     bodyStyles={
@@ -1729,51 +1779,58 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiButton
+                        <EuiSmallButton
                           disabled={true}
                           onClick={[Function]}
                         >
-                          <EuiButtonDisplay
-                            baseClassName="euiButton"
+                          <EuiButton
                             disabled={true}
-                            element="button"
-                            isDisabled={true}
                             onClick={[Function]}
-                            type="button"
+                            size="s"
                           >
-                            <button
-                              className="euiButton euiButton--primary euiButton-isDisabled"
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
                               disabled={true}
+                              element="button"
+                              isDisabled={true}
                               onClick={[Function]}
-                              style={
-                                Object {
-                                  "minWidth": undefined,
-                                }
-                              }
+                              size="s"
                               type="button"
                             >
-                              <EuiButtonContent
-                                className="euiButton__content"
-                                iconSide="left"
-                                textProps={
+                              <button
+                                className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                                disabled={true}
+                                onClick={[Function]}
+                                style={
                                   Object {
-                                    "className": "euiButton__text",
+                                    "minWidth": undefined,
                                   }
                                 }
+                                type="button"
                               >
-                                <span
-                                  className="euiButtonContent euiButton__content"
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
                                 >
                                   <span
-                                    className="euiButton__text"
+                                    className="euiButtonContent euiButton__content"
                                   >
-                                    View alert details
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      View alert details
+                                    </span>
                                   </span>
-                                </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonDisplay>
-                        </EuiButton>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </EuiSmallButton>
                       </div>
                     </EuiFlexItem>
                     <EuiFlexItem
@@ -1782,54 +1839,62 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiButton
+                        <EuiSmallButton
                           data-test-subj="acknowledgeAlertsButton"
                           disabled={true}
                           onClick={[Function]}
                         >
-                          <EuiButtonDisplay
-                            baseClassName="euiButton"
+                          <EuiButton
                             data-test-subj="acknowledgeAlertsButton"
                             disabled={true}
-                            element="button"
-                            isDisabled={true}
                             onClick={[Function]}
-                            type="button"
+                            size="s"
                           >
-                            <button
-                              className="euiButton euiButton--primary euiButton-isDisabled"
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
                               data-test-subj="acknowledgeAlertsButton"
                               disabled={true}
+                              element="button"
+                              isDisabled={true}
                               onClick={[Function]}
-                              style={
-                                Object {
-                                  "minWidth": undefined,
-                                }
-                              }
+                              size="s"
                               type="button"
                             >
-                              <EuiButtonContent
-                                className="euiButton__content"
-                                iconSide="left"
-                                textProps={
+                              <button
+                                className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                                data-test-subj="acknowledgeAlertsButton"
+                                disabled={true}
+                                onClick={[Function]}
+                                style={
                                   Object {
-                                    "className": "euiButton__text",
+                                    "minWidth": undefined,
                                   }
                                 }
+                                type="button"
                               >
-                                <span
-                                  className="euiButtonContent euiButton__content"
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
                                 >
                                   <span
-                                    className="euiButton__text"
+                                    className="euiButtonContent euiButton__content"
                                   >
-                                    Acknowledge
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Acknowledge
+                                    </span>
                                   </span>
-                                </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonDisplay>
-                        </EuiButton>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </EuiSmallButton>
                       </div>
                     </EuiFlexItem>
                   </div>
@@ -1911,8 +1976,8 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                   <div
                     className="euiFlexItem"
                   >
-                    <EuiFieldSearch
-                      compressed={false}
+                    <EuiCompressedFieldSearch
+                      compressed={true}
                       fullWidth={true}
                       incremental={false}
                       isClearable={true}
@@ -1922,20 +1987,20 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                       value=""
                     >
                       <EuiFormControlLayout
-                        compressed={false}
+                        compressed={true}
                         fullWidth={true}
                         icon="search"
                         isLoading={false}
                       >
                         <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
                           <div
                             className="euiFormControlLayout__childrenWrapper"
                           >
                             <EuiValidatableControl>
                               <input
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                                 onChange={[Function]}
                                 onKeyUp={[Function]}
                                 placeholder="Search"
@@ -1944,7 +2009,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                               />
                             </EuiValidatableControl>
                             <EuiFormControlLayoutIcons
-                              compressed={false}
+                              compressed={true}
                               icon="search"
                               isLoading={false}
                             >
@@ -1952,7 +2017,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                                 className="euiFormControlLayoutIcons"
                               >
                                 <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                                  size="s"
                                   type="search"
                                 >
                                   <span
@@ -1961,7 +2026,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                                     <EuiIcon
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                      size="s"
                                       type="search"
                                     >
                                       <div>
@@ -1975,7 +2040,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                           </div>
                         </div>
                       </EuiFormControlLayout>
-                    </EuiFieldSearch>
+                    </EuiCompressedFieldSearch>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -1984,7 +2049,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                   <div
                     className="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <EuiSelect
+                    <EuiCompressedSelect
                       onChange={[Function]}
                       options={
                         Array [
@@ -2016,106 +2081,140 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                       }
                       value="ALL"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        compressed={true}
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All severity levels",
+                              "value": "ALL",
+                            },
+                            Object {
+                              "text": "1 (Highest)",
+                              "value": "1",
+                            },
+                            Object {
+                              "text": "2 (High)",
+                              "value": "2",
+                            },
+                            Object {
+                              "text": "3 (Medium)",
+                              "value": "3",
+                            },
+                            Object {
+                              "text": "4 (Low)",
+                              "value": "4",
+                            },
+                            Object {
+                              "text": "5 (Lowest)",
+                              "value": "5",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={true}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect euiSelect--compressed"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All severity levels
-                                </option>
-                                <option
-                                  key="1"
-                                  value="1"
-                                >
-                                  1 (Highest)
-                                </option>
-                                <option
-                                  key="2"
-                                  value="2"
-                                >
-                                  2 (High)
-                                </option>
-                                <option
-                                  key="3"
-                                  value="3"
-                                >
-                                  3 (Medium)
-                                </option>
-                                <option
-                                  key="4"
-                                  value="4"
-                                >
-                                  4 (Low)
-                                </option>
-                                <option
-                                  key="5"
-                                  value="5"
-                                >
-                                  5 (Lowest)
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All severity levels
+                                  </option>
+                                  <option
+                                    key="1"
+                                    value="1"
+                                  >
+                                    1 (Highest)
+                                  </option>
+                                  <option
+                                    key="2"
+                                    value="2"
+                                  >
+                                    2 (High)
+                                  </option>
+                                  <option
+                                    key="3"
+                                    value="3"
+                                  >
+                                    3 (Medium)
+                                  </option>
+                                  <option
+                                    key="4"
+                                    value="4"
+                                  >
+                                    4 (Low)
+                                  </option>
+                                  <option
+                                    key="5"
+                                    value="5"
+                                  >
+                                    5 (Lowest)
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={true}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="s"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="s"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </EuiCompressedSelect>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -2124,7 +2223,7 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                   <div
                     className="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <EuiSelect
+                    <EuiCompressedSelect
                       data-test-subj="dashboardAlertStateFilter"
                       onChange={[Function]}
                       options={
@@ -2157,107 +2256,142 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                       }
                       value="ALL"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        compressed={true}
+                        data-test-subj="dashboardAlertStateFilter"
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All alerts",
+                              "value": "ALL",
+                            },
+                            Object {
+                              "text": "Active",
+                              "value": "ACTIVE",
+                            },
+                            Object {
+                              "text": "Acknowledged",
+                              "value": "ACKNOWLEDGED",
+                            },
+                            Object {
+                              "text": "Completed",
+                              "value": "COMPLETED",
+                            },
+                            Object {
+                              "text": "Error",
+                              "value": "ERROR",
+                            },
+                            Object {
+                              "text": "Deleted",
+                              "value": "DELETED",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={true}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                data-test-subj="dashboardAlertStateFilter"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect euiSelect--compressed"
+                                  data-test-subj="dashboardAlertStateFilter"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All alerts
-                                </option>
-                                <option
-                                  key="1"
-                                  value="ACTIVE"
-                                >
-                                  Active
-                                </option>
-                                <option
-                                  key="2"
-                                  value="ACKNOWLEDGED"
-                                >
-                                  Acknowledged
-                                </option>
-                                <option
-                                  key="3"
-                                  value="COMPLETED"
-                                >
-                                  Completed
-                                </option>
-                                <option
-                                  key="4"
-                                  value="ERROR"
-                                >
-                                  Error
-                                </option>
-                                <option
-                                  key="5"
-                                  value="DELETED"
-                                >
-                                  Deleted
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All alerts
+                                  </option>
+                                  <option
+                                    key="1"
+                                    value="ACTIVE"
+                                  >
+                                    Active
+                                  </option>
+                                  <option
+                                    key="2"
+                                    value="ACKNOWLEDGED"
+                                  >
+                                    Acknowledged
+                                  </option>
+                                  <option
+                                    key="3"
+                                    value="COMPLETED"
+                                  >
+                                    Completed
+                                  </option>
+                                  <option
+                                    key="4"
+                                    value="ERROR"
+                                  >
+                                    Error
+                                  </option>
+                                  <option
+                                    key="5"
+                                    value="DELETED"
+                                  >
+                                    Deleted
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={true}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="s"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="s"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </EuiCompressedSelect>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -3413,12 +3547,12 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                                     <DashboardEmptyPrompt>
                                       <EuiEmptyPrompt
                                         actions={
-                                          <EuiButton
+                                          <EuiSmallButton
                                             fill={true}
                                             href="alerting#/create-monitor"
                                           >
                                             Create monitor
-                                          </EuiButton>
+                                          </EuiSmallButton>
                                         }
                                         body={
                                           <EuiText
@@ -3475,51 +3609,58 @@ exports[`Dashboard renders with alert by triggers view 1`] = `
                                               className="euiSpacer euiSpacer--l"
                                             />
                                           </EuiSpacer>
-                                          <EuiButton
+                                          <EuiSmallButton
                                             fill={true}
                                             href="alerting#/create-monitor"
                                           >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
-                                              element="a"
+                                            <EuiButton
                                               fill={true}
                                               href="alerting#/create-monitor"
-                                              isDisabled={false}
-                                              rel="noreferrer"
+                                              size="s"
                                             >
-                                              <a
-                                                className="euiButton euiButton--primary euiButton--fill"
-                                                disabled={false}
+                                              <EuiButtonDisplay
+                                                baseClassName="euiButton"
+                                                element="a"
+                                                fill={true}
                                                 href="alerting#/create-monitor"
+                                                isDisabled={false}
                                                 rel="noreferrer"
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
+                                                size="s"
                                               >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="left"
-                                                  textProps={
+                                                <a
+                                                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                                  disabled={false}
+                                                  href="alerting#/create-monitor"
+                                                  rel="noreferrer"
+                                                  style={
                                                     Object {
-                                                      "className": "euiButton__text",
+                                                      "minWidth": undefined,
                                                     }
                                                   }
                                                 >
-                                                  <span
-                                                    className="euiButtonContent euiButton__content"
+                                                  <EuiButtonContent
+                                                    className="euiButton__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButton__text",
+                                                      }
+                                                    }
                                                   >
                                                     <span
-                                                      className="euiButton__text"
+                                                      className="euiButtonContent euiButton__content"
                                                     >
-                                                      Create monitor
+                                                      <span
+                                                        className="euiButton__text"
+                                                      >
+                                                        Create monitor
+                                                      </span>
                                                     </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </a>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
+                                                  </EuiButtonContent>
+                                                </a>
+                                              </EuiButtonDisplay>
+                                            </EuiButton>
+                                          </EuiSmallButton>
                                         </div>
                                       </EuiEmptyPrompt>
                                     </DashboardEmptyPrompt>
@@ -3596,13 +3737,13 @@ exports[`Dashboard renders with per alert view 1`] = `
   <ContentPanel
     actions={
       Array [
-        <EuiButton
+        <EuiSmallButton
           data-test-subj="acknowledgeAlertsButton"
           disabled={true}
           onClick={[Function]}
         >
           Acknowledge
-        </EuiButton>,
+        </EuiSmallButton>,
       ]
     }
     bodyStyles={
@@ -3683,54 +3824,62 @@ exports[`Dashboard renders with per alert view 1`] = `
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiButton
+                        <EuiSmallButton
                           data-test-subj="acknowledgeAlertsButton"
                           disabled={true}
                           onClick={[Function]}
                         >
-                          <EuiButtonDisplay
-                            baseClassName="euiButton"
+                          <EuiButton
                             data-test-subj="acknowledgeAlertsButton"
                             disabled={true}
-                            element="button"
-                            isDisabled={true}
                             onClick={[Function]}
-                            type="button"
+                            size="s"
                           >
-                            <button
-                              className="euiButton euiButton--primary euiButton-isDisabled"
+                            <EuiButtonDisplay
+                              baseClassName="euiButton"
                               data-test-subj="acknowledgeAlertsButton"
                               disabled={true}
+                              element="button"
+                              isDisabled={true}
                               onClick={[Function]}
-                              style={
-                                Object {
-                                  "minWidth": undefined,
-                                }
-                              }
+                              size="s"
                               type="button"
                             >
-                              <EuiButtonContent
-                                className="euiButton__content"
-                                iconSide="left"
-                                textProps={
+                              <button
+                                className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                                data-test-subj="acknowledgeAlertsButton"
+                                disabled={true}
+                                onClick={[Function]}
+                                style={
                                   Object {
-                                    "className": "euiButton__text",
+                                    "minWidth": undefined,
                                   }
                                 }
+                                type="button"
                               >
-                                <span
-                                  className="euiButtonContent euiButton__content"
+                                <EuiButtonContent
+                                  className="euiButton__content"
+                                  iconSide="left"
+                                  textProps={
+                                    Object {
+                                      "className": "euiButton__text",
+                                    }
+                                  }
                                 >
                                   <span
-                                    className="euiButton__text"
+                                    className="euiButtonContent euiButton__content"
                                   >
-                                    Acknowledge
+                                    <span
+                                      className="euiButton__text"
+                                    >
+                                      Acknowledge
+                                    </span>
                                   </span>
-                                </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonDisplay>
-                        </EuiButton>
+                                </EuiButtonContent>
+                              </button>
+                            </EuiButtonDisplay>
+                          </EuiButton>
+                        </EuiSmallButton>
                       </div>
                     </EuiFlexItem>
                   </div>
@@ -3812,8 +3961,8 @@ exports[`Dashboard renders with per alert view 1`] = `
                   <div
                     className="euiFlexItem"
                   >
-                    <EuiFieldSearch
-                      compressed={false}
+                    <EuiCompressedFieldSearch
+                      compressed={true}
                       fullWidth={true}
                       incremental={false}
                       isClearable={true}
@@ -3823,20 +3972,20 @@ exports[`Dashboard renders with per alert view 1`] = `
                       value=""
                     >
                       <EuiFormControlLayout
-                        compressed={false}
+                        compressed={true}
                         fullWidth={true}
                         icon="search"
                         isLoading={false}
                       >
                         <div
-                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                          className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                         >
                           <div
                             className="euiFormControlLayout__childrenWrapper"
                           >
                             <EuiValidatableControl>
                               <input
-                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                                 onChange={[Function]}
                                 onKeyUp={[Function]}
                                 placeholder="Search"
@@ -3845,7 +3994,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                               />
                             </EuiValidatableControl>
                             <EuiFormControlLayoutIcons
-                              compressed={false}
+                              compressed={true}
                               icon="search"
                               isLoading={false}
                             >
@@ -3853,7 +4002,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                                 className="euiFormControlLayoutIcons"
                               >
                                 <EuiFormControlLayoutCustomIcon
-                                  size="m"
+                                  size="s"
                                   type="search"
                                 >
                                   <span
@@ -3862,7 +4011,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                                     <EuiIcon
                                       aria-hidden="true"
                                       className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                      size="s"
                                       type="search"
                                     >
                                       <div>
@@ -3876,7 +4025,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                           </div>
                         </div>
                       </EuiFormControlLayout>
-                    </EuiFieldSearch>
+                    </EuiCompressedFieldSearch>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -3885,7 +4034,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                   <div
                     className="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <EuiSelect
+                    <EuiCompressedSelect
                       onChange={[Function]}
                       options={
                         Array [
@@ -3917,106 +4066,140 @@ exports[`Dashboard renders with per alert view 1`] = `
                       }
                       value="ALL"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        compressed={true}
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All severity levels",
+                              "value": "ALL",
+                            },
+                            Object {
+                              "text": "1 (Highest)",
+                              "value": "1",
+                            },
+                            Object {
+                              "text": "2 (High)",
+                              "value": "2",
+                            },
+                            Object {
+                              "text": "3 (Medium)",
+                              "value": "3",
+                            },
+                            Object {
+                              "text": "4 (Low)",
+                              "value": "4",
+                            },
+                            Object {
+                              "text": "5 (Lowest)",
+                              "value": "5",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={true}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect euiSelect--compressed"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All severity levels
-                                </option>
-                                <option
-                                  key="1"
-                                  value="1"
-                                >
-                                  1 (Highest)
-                                </option>
-                                <option
-                                  key="2"
-                                  value="2"
-                                >
-                                  2 (High)
-                                </option>
-                                <option
-                                  key="3"
-                                  value="3"
-                                >
-                                  3 (Medium)
-                                </option>
-                                <option
-                                  key="4"
-                                  value="4"
-                                >
-                                  4 (Low)
-                                </option>
-                                <option
-                                  key="5"
-                                  value="5"
-                                >
-                                  5 (Lowest)
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All severity levels
+                                  </option>
+                                  <option
+                                    key="1"
+                                    value="1"
+                                  >
+                                    1 (Highest)
+                                  </option>
+                                  <option
+                                    key="2"
+                                    value="2"
+                                  >
+                                    2 (High)
+                                  </option>
+                                  <option
+                                    key="3"
+                                    value="3"
+                                  >
+                                    3 (Medium)
+                                  </option>
+                                  <option
+                                    key="4"
+                                    value="4"
+                                  >
+                                    4 (Low)
+                                  </option>
+                                  <option
+                                    key="5"
+                                    value="5"
+                                  >
+                                    5 (Lowest)
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={true}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="s"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="s"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </EuiCompressedSelect>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -4025,7 +4208,7 @@ exports[`Dashboard renders with per alert view 1`] = `
                   <div
                     className="euiFlexItem euiFlexItem--flexGrowZero"
                   >
-                    <EuiSelect
+                    <EuiCompressedSelect
                       data-test-subj="dashboardAlertStateFilter"
                       onChange={[Function]}
                       options={
@@ -4058,107 +4241,142 @@ exports[`Dashboard renders with per alert view 1`] = `
                       }
                       value="ALL"
                     >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      <EuiSelect
+                        compressed={true}
+                        data-test-subj="dashboardAlertStateFilter"
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "All alerts",
+                              "value": "ALL",
+                            },
+                            Object {
+                              "text": "Active",
+                              "value": "ACTIVE",
+                            },
+                            Object {
+                              "text": "Acknowledged",
+                              "value": "ACKNOWLEDGED",
+                            },
+                            Object {
+                              "text": "Completed",
+                              "value": "COMPLETED",
+                            },
+                            Object {
+                              "text": "Error",
+                              "value": "ERROR",
+                            },
+                            Object {
+                              "text": "Deleted",
+                              "value": "DELETED",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="ALL"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiFormControlLayout
+                          compressed={true}
+                          fullWidth={false}
+                          icon={
+                            Object {
+                              "side": "right",
+                              "type": "arrowDown",
+                            }
+                          }
+                          isLoading={false}
                         >
                           <div
-                            className="euiFormControlLayout__childrenWrapper"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
-                            <EuiValidatableControl>
-                              <select
-                                className="euiSelect"
-                                data-test-subj="dashboardAlertStateFilter"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="ALL"
-                              >
-                                <option
-                                  key="0"
+                            <div
+                              className="euiFormControlLayout__childrenWrapper"
+                            >
+                              <EuiValidatableControl>
+                                <select
+                                  className="euiSelect euiSelect--compressed"
+                                  data-test-subj="dashboardAlertStateFilter"
+                                  onChange={[Function]}
+                                  onMouseUp={[Function]}
                                   value="ALL"
                                 >
-                                  All alerts
-                                </option>
-                                <option
-                                  key="1"
-                                  value="ACTIVE"
-                                >
-                                  Active
-                                </option>
-                                <option
-                                  key="2"
-                                  value="ACKNOWLEDGED"
-                                >
-                                  Acknowledged
-                                </option>
-                                <option
-                                  key="3"
-                                  value="COMPLETED"
-                                >
-                                  Completed
-                                </option>
-                                <option
-                                  key="4"
-                                  value="ERROR"
-                                >
-                                  Error
-                                </option>
-                                <option
-                                  key="5"
-                                  value="DELETED"
-                                >
-                                  Deleted
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
+                                  <option
+                                    key="0"
+                                    value="ALL"
+                                  >
+                                    All alerts
+                                  </option>
+                                  <option
+                                    key="1"
+                                    value="ACTIVE"
+                                  >
+                                    Active
+                                  </option>
+                                  <option
+                                    key="2"
+                                    value="ACKNOWLEDGED"
+                                  >
+                                    Acknowledged
+                                  </option>
+                                  <option
+                                    key="3"
+                                    value="COMPLETED"
+                                  >
+                                    Completed
+                                  </option>
+                                  <option
+                                    key="4"
+                                    value="ERROR"
+                                  >
+                                    Error
+                                  </option>
+                                  <option
+                                    key="5"
+                                    value="DELETED"
+                                  >
+                                    Deleted
+                                  </option>
+                                </select>
+                              </EuiValidatableControl>
+                              <EuiFormControlLayoutIcons
+                                compressed={true}
+                                icon={
+                                  Object {
+                                    "side": "right",
+                                    "type": "arrowDown",
+                                  }
                                 }
-                              }
-                              isLoading={false}
-                            >
-                              <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                isLoading={false}
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <div
+                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <EuiFormControlLayoutCustomIcon
+                                    size="s"
+                                    type="arrowDown"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
-                                      type="arrowDown"
+                                    <span
+                                      className="euiFormControlLayoutCustomIcon"
                                     >
-                                      <div>
-                                        EuiIconMock
-                                      </div>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
-                              </div>
-                            </EuiFormControlLayoutIcons>
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiFormControlLayoutCustomIcon__icon"
+                                        size="s"
+                                        type="arrowDown"
+                                      >
+                                        <div>
+                                          EuiIconMock
+                                        </div>
+                                      </EuiIcon>
+                                    </span>
+                                  </EuiFormControlLayoutCustomIcon>
+                                </div>
+                              </EuiFormControlLayoutIcons>
+                            </div>
                           </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
+                        </EuiFormControlLayout>
+                      </EuiSelect>
+                    </EuiCompressedSelect>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
@@ -5095,12 +5313,12 @@ exports[`Dashboard renders with per alert view 1`] = `
                                     <DashboardEmptyPrompt>
                                       <EuiEmptyPrompt
                                         actions={
-                                          <EuiButton
+                                          <EuiSmallButton
                                             fill={true}
                                             href="alerting#/create-monitor"
                                           >
                                             Create monitor
-                                          </EuiButton>
+                                          </EuiSmallButton>
                                         }
                                         body={
                                           <EuiText
@@ -5157,51 +5375,58 @@ exports[`Dashboard renders with per alert view 1`] = `
                                               className="euiSpacer euiSpacer--l"
                                             />
                                           </EuiSpacer>
-                                          <EuiButton
+                                          <EuiSmallButton
                                             fill={true}
                                             href="alerting#/create-monitor"
                                           >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
-                                              element="a"
+                                            <EuiButton
                                               fill={true}
                                               href="alerting#/create-monitor"
-                                              isDisabled={false}
-                                              rel="noreferrer"
+                                              size="s"
                                             >
-                                              <a
-                                                className="euiButton euiButton--primary euiButton--fill"
-                                                disabled={false}
+                                              <EuiButtonDisplay
+                                                baseClassName="euiButton"
+                                                element="a"
+                                                fill={true}
                                                 href="alerting#/create-monitor"
+                                                isDisabled={false}
                                                 rel="noreferrer"
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
+                                                size="s"
                                               >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="left"
-                                                  textProps={
+                                                <a
+                                                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                                  disabled={false}
+                                                  href="alerting#/create-monitor"
+                                                  rel="noreferrer"
+                                                  style={
                                                     Object {
-                                                      "className": "euiButton__text",
+                                                      "minWidth": undefined,
                                                     }
                                                   }
                                                 >
-                                                  <span
-                                                    className="euiButtonContent euiButton__content"
+                                                  <EuiButtonContent
+                                                    className="euiButton__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButton__text",
+                                                      }
+                                                    }
                                                   >
                                                     <span
-                                                      className="euiButton__text"
+                                                      className="euiButtonContent euiButton__content"
                                                     >
-                                                      Create monitor
+                                                      <span
+                                                        className="euiButton__text"
+                                                      >
+                                                        Create monitor
+                                                      </span>
                                                     </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </a>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
+                                                  </EuiButtonContent>
+                                                </a>
+                                              </EuiButtonDisplay>
+                                            </EuiButton>
+                                          </EuiSmallButton>
                                         </div>
                                       </EuiEmptyPrompt>
                                     </DashboardEmptyPrompt>
diff --git a/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js b/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js
index e026a2708..172c8c4d0 100644
--- a/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js
+++ b/public/pages/Destinations/components/DestinationsList/DestinationsActions/DestinationsActions.js
@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiFlexGroup,
@@ -62,9 +62,9 @@ export default class DestinationsActions extends Component {
             <EuiPopover
               id="destinationActionsPopover"
               button={
-                <EuiButton onClick={this.onClickActions} iconType="arrowDown" iconSide="right">
+                <EuiSmallButton onClick={this.onClickActions} iconType="arrowDown" iconSide="right">
                   Actions
-                </EuiButton>
+                </EuiSmallButton>
               }
               isOpen={isActionsOpen}
               closePopover={this.onCloseActions}
diff --git a/public/pages/Destinations/components/DestinationsList/DestinationsActions/__snapshots__/DestinationsActions.test.js.snap b/public/pages/Destinations/components/DestinationsList/DestinationsActions/__snapshots__/DestinationsActions.test.js.snap
index f3065c1b2..b7a2c6288 100644
--- a/public/pages/Destinations/components/DestinationsList/DestinationsActions/__snapshots__/DestinationsActions.test.js.snap
+++ b/public/pages/Destinations/components/DestinationsList/DestinationsActions/__snapshots__/DestinationsActions.test.js.snap
@@ -15,7 +15,7 @@ exports[`<DestinationsActions /> should render DestinationsActions 1`] = `
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
diff --git a/public/pages/Destinations/components/DestinationsList/DestinationsControls/DestinationsControls.js b/public/pages/Destinations/components/DestinationsList/DestinationsControls/DestinationsControls.js
index bf01d95cc..fa3be0550 100644
--- a/public/pages/Destinations/components/DestinationsList/DestinationsControls/DestinationsControls.js
+++ b/public/pages/Destinations/components/DestinationsList/DestinationsControls/DestinationsControls.js
@@ -5,7 +5,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiPagination, EuiSelect } from '@elastic/eui';
+import {
+  EuiCompressedFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPagination,
+  EuiCompressedSelect,
+} from '@elastic/eui';
 import { DESTINATION_OPTIONS } from '../../../utils/constants';
 
 const filterTypes = [{ value: 'ALL', text: 'All type' }, ...DESTINATION_OPTIONS];
@@ -41,7 +47,7 @@ const DestinationsControls = ({
   return (
     <EuiFlexGroup style={{ padding: '0px 5px' }}>
       <EuiFlexItem>
-        <EuiFieldSearch
+        <EuiCompressedFieldSearch
           fullWidth={true}
           value={search}
           placeholder="Search"
@@ -49,7 +55,7 @@ const DestinationsControls = ({
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiSelect options={filterTypes} value={type} onChange={onTypeChange} />
+        <EuiCompressedSelect options={filterTypes} value={type} onChange={onTypeChange} />
       </EuiFlexItem>
       <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
         <EuiPagination pageCount={pageCount} activePage={activePage} onPageClick={onPageClick} />
diff --git a/public/pages/Destinations/components/DestinationsList/DestinationsControls/__snapshots__/DestinationsControls.test.js.snap b/public/pages/Destinations/components/DestinationsList/DestinationsControls/__snapshots__/DestinationsControls.test.js.snap
index 9750f8718..334869835 100644
--- a/public/pages/Destinations/components/DestinationsList/DestinationsControls/__snapshots__/DestinationsControls.test.js.snap
+++ b/public/pages/Destinations/components/DestinationsList/DestinationsControls/__snapshots__/DestinationsControls.test.js.snap
@@ -9,13 +9,13 @@ exports[`<DestinationsControls /> should render DestinationsControls 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
           placeholder="Search"
           type="search"
           value=""
@@ -38,13 +38,13 @@ exports[`<DestinationsControls /> should render DestinationsControls 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayout euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <select
-          class="euiSelect"
+          class="euiSelect euiSelect--compressed"
         >
           <option
             selected=""
diff --git a/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js b/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js
index 89a3e82dc..5da9906d9 100644
--- a/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js
+++ b/public/pages/Destinations/components/DestinationsList/EmptyDestinations/EmptyDestinations.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiLink, EuiText } from '@elastic/eui';
 import { getManageChannelsUrl } from '../../../../../utils/helpers';
 
 const filterText = (hasNotificationPlugin) =>
@@ -30,9 +30,9 @@ const filterText = (hasNotificationPlugin) =>
 const emptyText = <p>There are no existing destinations.</p>;
 
 const resetFiltersButton = (resetFilters) => (
-  <EuiButton fill onClick={resetFilters}>
+  <EuiSmallButton fill onClick={resetFilters}>
     Reset filters
-  </EuiButton>
+  </EuiSmallButton>
 );
 
 const propTypes = {
diff --git a/public/pages/Destinations/components/DestinationsList/EmptyDestinations/__snapshots__/EmptyDestinations.test.js.snap b/public/pages/Destinations/components/DestinationsList/EmptyDestinations/__snapshots__/EmptyDestinations.test.js.snap
index fc8f47a84..97d0d9d4d 100644
--- a/public/pages/Destinations/components/DestinationsList/EmptyDestinations/__snapshots__/EmptyDestinations.test.js.snap
+++ b/public/pages/Destinations/components/DestinationsList/EmptyDestinations/__snapshots__/EmptyDestinations.test.js.snap
@@ -47,7 +47,7 @@ exports[`<EmptyDestinations /> should render no results for filter criteria 1`]
     class="euiSpacer euiSpacer--l"
   />
   <button
-    class="euiButton euiButton--primary euiButton--fill"
+    class="euiButton euiButton--primary euiButton--small euiButton--fill"
     type="button"
   >
     <span
diff --git a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js
index 12386ea54..eb77b5464 100644
--- a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js
+++ b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/FullPageNotificationsInfoCallOut.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiButton, EuiEmptyPrompt, EuiLink, EuiPanel, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiLink, EuiPanel, EuiText } from '@elastic/eui';
 import { NOTIFICATIONS_LEARN_MORE_HREF } from '../../utils/constants';
 import { getManageChannelsUrl } from '../../../../utils/helpers';
 
@@ -16,7 +16,7 @@ const noNotificationsText = (
   </EuiText>
 );
 const noNotificationsButton = (
-  <EuiButton
+  <EuiSmallButton
     external
     fill
     href={NOTIFICATIONS_LEARN_MORE_HREF}
@@ -25,7 +25,7 @@ const noNotificationsButton = (
     iconType={'popout'}
   >
     View install instructions
-  </EuiButton>
+  </EuiSmallButton>
 );
 
 const hasNotificationsTitle = 'Destinations have become channels in Notifications';
@@ -43,9 +43,9 @@ const hasNotificationsText = (
 
 const FullPageNotificationsInfoCallOut = ({ hasNotificationPlugin }) => {
   const hasNotificationsButton = (
-    <EuiButton fill href={getManageChannelsUrl()}>
+    <EuiSmallButton fill href={getManageChannelsUrl()}>
       View in Notifications
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   return (
diff --git a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap
index 286e0b17f..718d1d44b 100644
--- a/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap
+++ b/public/pages/Destinations/components/FullPageNotificationsInfoCallOut/__snapshots__/FullPageNotificationsInfoCallOut.test.js.snap
@@ -65,7 +65,7 @@ exports[`FullPageNotificationsInfoCallOut renders when Notifications plugin is i
       class="euiSpacer euiSpacer--l"
     />
     <a
-      class="euiButton euiButton--primary euiButton--fill"
+      class="euiButton euiButton--primary euiButton--small euiButton--fill"
       href="/app/notifications-dashboards#/channels"
       rel="noreferrer"
     >
@@ -115,7 +115,7 @@ exports[`FullPageNotificationsInfoCallOut renders when Notifications plugin is n
       class="euiSpacer euiSpacer--l"
     />
     <a
-      class="euiButton euiButton--primary euiButton--fill"
+      class="euiButton euiButton--primary euiButton--small euiButton--fill"
       href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
       rel="noopener noreferrer"
       target="_blank"
diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
index bfe9df8e7..4de380ec0 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/NotificationsInfoCallOut.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiCallOut, EuiButton, EuiLink, EuiSpacer } from '@elastic/eui';
+import { EuiCallOut, EuiSmallButton, EuiLink, EuiSpacer } from '@elastic/eui';
 import { NOTIFICATIONS_LEARN_MORE_HREF } from '../../utils/constants';
 import { getManageChannelsUrl } from '../../../../utils/helpers';
 
@@ -21,7 +21,7 @@ const noNotificationsBodyText = (
   </>
 );
 const noNotificationsButton = (
-  <EuiButton
+  <EuiSmallButton
     external
     href={NOTIFICATIONS_LEARN_MORE_HREF}
     iconSide={'right'}
@@ -29,7 +29,7 @@ const noNotificationsButton = (
     target={'_blank'}
   >
     View install instructions
-  </EuiButton>
+  </EuiSmallButton>
 );
 
 const hasNotificationsTitle = 'Destinations have become channels in Notifications.';
@@ -45,7 +45,7 @@ const hasNotificationsBodyText = (
 
 const NotificationsInfoCallOut = ({ hasNotificationPlugin }) => {
   const hasNotificationsButton = (
-    <EuiButton href={getManageChannelsUrl()}>View in Notifications</EuiButton>
+    <EuiSmallButton href={getManageChannelsUrl()}>View in Notifications</EuiSmallButton>
   );
 
   return (
diff --git a/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap b/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
index c4f250a0f..ad7099424 100644
--- a/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
+++ b/public/pages/Destinations/components/NotificationsInfoCallOut/__snapshots__/NotificationsInfoCallOut.test.js.snap
@@ -58,7 +58,7 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is installed
           class="euiSpacer euiSpacer--l"
         />
         <a
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           href="/app/notifications-dashboards#/channels"
           rel="noreferrer"
         >
@@ -114,7 +114,7 @@ exports[`NotificationsInfoCallOut renders when Notifications plugin is not insta
           class="euiSpacer euiSpacer--l"
         />
         <a
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
           rel="noopener noreferrer"
           target="_blank"
diff --git a/public/pages/Destinations/components/createDestinations/Email/EmailGroup.js b/public/pages/Destinations/components/createDestinations/Email/EmailGroup.js
index 6455f4818..e64dd12c6 100644
--- a/public/pages/Destinations/components/createDestinations/Email/EmailGroup.js
+++ b/public/pages/Destinations/components/createDestinations/Email/EmailGroup.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiAccordion, EuiButton } from '@elastic/eui';
+import { EuiAccordion, EuiSmallButton } from '@elastic/eui';
 import { FormikComboBox, FormikFieldText } from '../../../../../components/FormControls';
 import { isInvalid, hasError } from '../../../../../utils/validate';
 import { validateEmailGroupEmails, validateEmailGroupName } from './utils/validate';
diff --git a/public/pages/Destinations/components/createDestinations/Email/Sender.js b/public/pages/Destinations/components/createDestinations/Email/Sender.js
index 74767221d..60e8ad9a8 100644
--- a/public/pages/Destinations/components/createDestinations/Email/Sender.js
+++ b/public/pages/Destinations/components/createDestinations/Email/Sender.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiAccordion, EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiAccordion, EuiSmallButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import {
   FormikFieldText,
   FormikFieldNumber,
diff --git a/public/pages/Destinations/containers/CreateDestination/CreateDestination.js b/public/pages/Destinations/containers/CreateDestination/CreateDestination.js
index 4644aafb2..8813364c4 100644
--- a/public/pages/Destinations/containers/CreateDestination/CreateDestination.js
+++ b/public/pages/Destinations/containers/CreateDestination/CreateDestination.js
@@ -12,8 +12,8 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
 } from '@elastic/eui';
 import ContentPanel from '../../../../components/ContentPanel';
 import { hasError, isInvalid, required } from '../../../../utils/validate';
@@ -250,7 +250,7 @@ class CreateDestination extends React.Component {
               <EuiSpacer />
               <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                 <EuiFlexItem grow={false}>
-                  <EuiButtonEmpty onClick={this.handleCancel}>Close</EuiButtonEmpty>
+                  <EuiSmallButtonEmpty onClick={this.handleCancel}>Close</EuiSmallButtonEmpty>
                 </EuiFlexItem>
               </EuiFlexGroup>
               <SubmitErrorHandler
diff --git a/public/pages/Destinations/containers/CreateDestination/EmailRecipients/EmailRecipients.js b/public/pages/Destinations/containers/CreateDestination/EmailRecipients/EmailRecipients.js
index 1c09538ca..3da6e5c4a 100644
--- a/public/pages/Destinations/containers/CreateDestination/EmailRecipients/EmailRecipients.js
+++ b/public/pages/Destinations/containers/CreateDestination/EmailRecipients/EmailRecipients.js
@@ -5,7 +5,7 @@
 
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui';
 
 import { FormikComboBox } from '../../../../../components/FormControls';
 import { isInvalid, hasError } from '../../../../../utils/validate';
@@ -138,9 +138,9 @@ export default class EmailRecipients extends React.Component {
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton style={{ marginTop: 22 }} onClick={this.onClickManageEmailGroups}>
+            <EuiSmallButton style={{ marginTop: 22 }} onClick={this.onClickManageEmailGroups}>
               Manage email groups
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
 
diff --git a/public/pages/Destinations/containers/CreateDestination/EmailSender/EmailSender.js b/public/pages/Destinations/containers/CreateDestination/EmailSender/EmailSender.js
index ef89fd9d8..9933184d2 100644
--- a/public/pages/Destinations/containers/CreateDestination/EmailSender/EmailSender.js
+++ b/public/pages/Destinations/containers/CreateDestination/EmailSender/EmailSender.js
@@ -5,7 +5,7 @@
 
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSmallButton } from '@elastic/eui';
 
 import { FormikComboBox } from '../../../../../components/FormControls';
 import { validateEmailSender } from './utils/validate';
@@ -116,9 +116,9 @@ export default class EmailSender extends React.Component {
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton style={{ marginTop: 22 }} onClick={this.onClickManageSenders}>
+            <EuiSmallButton style={{ marginTop: 22 }} onClick={this.onClickManageSenders}>
               Manage senders
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
 
diff --git a/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js b/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js
index 9f73e161a..fb7ad6fb7 100644
--- a/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js
+++ b/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js
@@ -7,7 +7,7 @@ import React from 'react';
 import _ from 'lodash';
 import { Formik, FieldArray } from 'formik';
 import {
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -294,7 +294,7 @@ export default class ManageEmailGroups extends React.Component {
                   <EuiModalFooter>
                     <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                       <EuiFlexItem grow={false}>
-                        <EuiButtonEmpty onClick={onClickCancel}>Close</EuiButtonEmpty>
+                        <EuiSmallButtonEmpty onClick={onClickCancel}>Close</EuiSmallButtonEmpty>
                       </EuiFlexItem>
                     </EuiFlexGroup>
                   </EuiModalFooter>
diff --git a/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js b/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js
index dc2e3390a..092d0fa69 100644
--- a/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js
+++ b/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js
@@ -7,8 +7,8 @@ import React from 'react';
 import _ from 'lodash';
 import { Formik, FieldArray } from 'formik';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -283,7 +283,7 @@ export default class ManageSenders extends React.Component {
                   <EuiModalFooter>
                     <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                       <EuiFlexItem grow={false}>
-                        <EuiButtonEmpty onClick={onClickCancel}>Close</EuiButtonEmpty>
+                        <EuiSmallButtonEmpty onClick={onClickCancel}>Close</EuiSmallButtonEmpty>
                       </EuiFlexItem>
                     </EuiFlexGroup>
                   </EuiModalFooter>
diff --git a/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap b/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
index 57f722ef9..2c94d5542 100644
--- a/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
+++ b/public/pages/Destinations/containers/DestinationsList/__snapshots__/DestinationsList.test.js.snap
@@ -56,7 +56,7 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
       >
         <EuiEmptyPrompt
           actions={
-            <EuiButton
+            <EuiSmallButton
               external={true}
               fill={true}
               href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
@@ -65,7 +65,7 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
               target="_blank"
             >
               View install instructions
-            </EuiButton>
+            </EuiSmallButton>
           }
           body={
             <EuiText>
@@ -125,7 +125,7 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
                 className="euiSpacer euiSpacer--l"
               />
             </EuiSpacer>
-            <EuiButton
+            <EuiSmallButton
               external={true}
               fill={true}
               href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
@@ -133,64 +133,75 @@ exports[`DestinationsList renders when Notification plugin is installed 1`] = `
               iconType="popout"
               target="_blank"
             >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                element="a"
+              <EuiButton
                 external={true}
                 fill={true}
                 href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
                 iconSide="right"
                 iconType="popout"
-                isDisabled={false}
-                rel="noopener noreferrer"
+                size="s"
                 target="_blank"
               >
-                <a
-                  className="euiButton euiButton--primary euiButton--fill"
-                  disabled={false}
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  element="a"
                   external={true}
+                  fill={true}
                   href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                  iconSide="right"
+                  iconType="popout"
+                  isDisabled={false}
                   rel="noopener noreferrer"
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
+                  size="s"
                   target="_blank"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="right"
-                    iconType="popout"
-                    textProps={
+                  <a
+                    className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                    disabled={false}
+                    external={true}
+                    href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                    rel="noopener noreferrer"
+                    style={
                       Object {
-                        "className": "euiButton__text",
+                        "minWidth": undefined,
                       }
                     }
+                    target="_blank"
                   >
-                    <span
-                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="right"
+                      iconType="popout"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="popout"
-                      >
-                        <div>
-                          EuiIconMock
-                        </div>
-                      </EuiIcon>
                       <span
-                        className="euiButton__text"
+                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                       >
-                        View install instructions
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="popout"
+                        >
+                          <div>
+                            EuiIconMock
+                          </div>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          View install instructions
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </a>
-              </EuiButtonDisplay>
-            </EuiButton>
+                    </EuiButtonContent>
+                  </a>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </EuiSmallButton>
           </div>
         </EuiEmptyPrompt>
       </div>
@@ -255,7 +266,7 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
       >
         <EuiEmptyPrompt
           actions={
-            <EuiButton
+            <EuiSmallButton
               external={true}
               fill={true}
               href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
@@ -264,7 +275,7 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
               target="_blank"
             >
               View install instructions
-            </EuiButton>
+            </EuiSmallButton>
           }
           body={
             <EuiText>
@@ -324,7 +335,7 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
                 className="euiSpacer euiSpacer--l"
               />
             </EuiSpacer>
-            <EuiButton
+            <EuiSmallButton
               external={true}
               fill={true}
               href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
@@ -332,64 +343,75 @@ exports[`DestinationsList renders when Notification plugin is not installed 1`]
               iconType="popout"
               target="_blank"
             >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                element="a"
+              <EuiButton
                 external={true}
                 fill={true}
                 href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
                 iconSide="right"
                 iconType="popout"
-                isDisabled={false}
-                rel="noopener noreferrer"
+                size="s"
                 target="_blank"
               >
-                <a
-                  className="euiButton euiButton--primary euiButton--fill"
-                  disabled={false}
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  element="a"
                   external={true}
+                  fill={true}
                   href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                  iconSide="right"
+                  iconType="popout"
+                  isDisabled={false}
                   rel="noopener noreferrer"
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
+                  size="s"
                   target="_blank"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="right"
-                    iconType="popout"
-                    textProps={
+                  <a
+                    className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                    disabled={false}
+                    external={true}
+                    href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                    rel="noopener noreferrer"
+                    style={
                       Object {
-                        "className": "euiButton__text",
+                        "minWidth": undefined,
                       }
                     }
+                    target="_blank"
                   >
-                    <span
-                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="right"
+                      iconType="popout"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="popout"
-                      >
-                        <div>
-                          EuiIconMock
-                        </div>
-                      </EuiIcon>
                       <span
-                        className="euiButton__text"
+                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                       >
-                        View install instructions
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="popout"
+                        >
+                          <div>
+                            EuiIconMock
+                          </div>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          View install instructions
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </a>
-              </EuiButtonDisplay>
-            </EuiButton>
+                    </EuiButtonContent>
+                  </a>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </EuiSmallButton>
           </div>
         </EuiEmptyPrompt>
       </div>
@@ -454,7 +476,7 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
       >
         <EuiEmptyPrompt
           actions={
-            <EuiButton
+            <EuiSmallButton
               external={true}
               fill={true}
               href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
@@ -463,7 +485,7 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
               target="_blank"
             >
               View install instructions
-            </EuiButton>
+            </EuiSmallButton>
           }
           body={
             <EuiText>
@@ -523,7 +545,7 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
                 className="euiSpacer euiSpacer--l"
               />
             </EuiSpacer>
-            <EuiButton
+            <EuiSmallButton
               external={true}
               fill={true}
               href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
@@ -531,64 +553,75 @@ exports[`DestinationsList renders when email is disallowed 1`] = `
               iconType="popout"
               target="_blank"
             >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                element="a"
+              <EuiButton
                 external={true}
                 fill={true}
                 href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
                 iconSide="right"
                 iconType="popout"
-                isDisabled={false}
-                rel="noopener noreferrer"
+                size="s"
                 target="_blank"
               >
-                <a
-                  className="euiButton euiButton--primary euiButton--fill"
-                  disabled={false}
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  element="a"
                   external={true}
+                  fill={true}
                   href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                  iconSide="right"
+                  iconType="popout"
+                  isDisabled={false}
                   rel="noopener noreferrer"
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
+                  size="s"
                   target="_blank"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="right"
-                    iconType="popout"
-                    textProps={
+                  <a
+                    className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                    disabled={false}
+                    external={true}
+                    href="https://opensearch.org/docs/monitoring-plugins/alerting/monitors/#questions-about-destinations"
+                    rel="noopener noreferrer"
+                    style={
                       Object {
-                        "className": "euiButton__text",
+                        "minWidth": undefined,
                       }
                     }
+                    target="_blank"
                   >
-                    <span
-                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="right"
+                      iconType="popout"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="popout"
-                      >
-                        <div>
-                          EuiIconMock
-                        </div>
-                      </EuiIcon>
                       <span
-                        className="euiButton__text"
+                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                       >
-                        View install instructions
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="popout"
+                        >
+                          <div>
+                            EuiIconMock
+                          </div>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          View install instructions
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </a>
-              </EuiButtonDisplay>
-            </EuiButton>
+                    </EuiButtonContent>
+                  </a>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </EuiSmallButton>
           </div>
         </EuiEmptyPrompt>
       </div>
diff --git a/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/EmptyHistory.js b/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/EmptyHistory.js
index 7efd9053f..6bf29f36a 100644
--- a/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/EmptyHistory.js
+++ b/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/EmptyHistory.js
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 const EmptyHistory = ({ onShowTrigger }) => (
   <EuiEmptyPrompt
@@ -19,9 +19,9 @@ const EmptyHistory = ({ onShowTrigger }) => (
       </EuiText>
     }
     actions={
-      <EuiButton fill onClick={onShowTrigger}>
+      <EuiSmallButton fill onClick={onShowTrigger}>
         Edit monitor
-      </EuiButton>
+      </EuiSmallButton>
     }
   />
 );
diff --git a/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/__snapshots__/EmptyHistory.test.js.snap b/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/__snapshots__/EmptyHistory.test.js.snap
index 7dd8c4e52..6295f44f0 100644
--- a/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/__snapshots__/EmptyHistory.test.js.snap
+++ b/public/pages/MonitorDetails/components/MonitorHistory/EmptyHistory/__snapshots__/EmptyHistory.test.js.snap
@@ -24,7 +24,7 @@ exports[`<EmptyHistory/> renders 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <button
-    class="euiButton euiButton--primary euiButton--fill"
+    class="euiButton euiButton--primary euiButton--small euiButton--fill"
     type="button"
   >
     <span
diff --git a/public/pages/MonitorDetails/containers/MonitorDetails.js b/public/pages/MonitorDetails/containers/MonitorDetails.js
index c534ea420..d2d6bdf5a 100644
--- a/public/pages/MonitorDetails/containers/MonitorDetails.js
+++ b/public/pages/MonitorDetails/containers/MonitorDetails.js
@@ -7,8 +7,8 @@ import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
 import queryString from 'query-string';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiCodeBlock,
   EuiFlexGroup,
@@ -496,23 +496,23 @@ export default class MonitorDetails extends Component {
             )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={editMonitor}>Edit</EuiButton>
+            <EuiSmallButton onClick={editMonitor}>Edit</EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               isLoading={updating}
               onClick={() => this.updateMonitor({ enabled: !monitor.enabled })}
             >
               {monitor.enabled ? 'Disable' : 'Enable'}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.showJsonModal}>Export as JSON</EuiButton>
+            <EuiSmallButton onClick={this.showJsonModal}>Export as JSON</EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.onDeleteClick} color="danger">
+            <EuiSmallButton onClick={this.onDeleteClick} color="danger">
               Delete
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiSpacer />
@@ -583,7 +583,7 @@ export default class MonitorDetails extends Component {
               </EuiModalBody>
 
               <EuiModalFooter>
-                <EuiButtonEmpty onClick={this.closeJsonModal}>Close</EuiButtonEmpty>
+                <EuiSmallButtonEmpty onClick={this.closeJsonModal}>Close</EuiSmallButtonEmpty>
               </EuiModalFooter>
             </EuiModal>
           </EuiOverlayMask>
diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js b/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js
index 39358b8c9..630d352e3 100644
--- a/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js
+++ b/public/pages/MonitorDetails/containers/MonitorHistory/DateRangePicker.js
@@ -91,8 +91,11 @@ class DateRangePicker extends React.PureComponent {
       };
     });
   };
+
   render() {
     const { rangeStartDateTime, rangeEndDateTime } = this.state;
+    const { compressed } = this.props;
+
     return (
       <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
         <EuiFlexItem grow={false} style={{ padding: '0 10px' }}>
@@ -109,6 +112,7 @@ class DateRangePicker extends React.PureComponent {
                 showTimeSelect
                 popperClassName="euiRangePicker--popper"
                 shouldCloseOnSelect
+                className={compressed ? 'euiFieldText--compressed' : ''}
                 {...rangeStartDateTime}
               />
             }
@@ -123,6 +127,7 @@ class DateRangePicker extends React.PureComponent {
                 showTimeSelect
                 popperClassName="euiRangePicker--popper"
                 shouldCloseOnSelect
+                className={compressed ? 'euiFieldText--compressed' : ''}
                 {...rangeEndDateTime}
               />
             }
diff --git a/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js b/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js
index 2145ca08e..f713df1f0 100644
--- a/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js
+++ b/public/pages/MonitorDetails/containers/MonitorHistory/MonitorHistory.js
@@ -323,6 +323,7 @@ class MonitorHistory extends PureComponent {
             initialStartTime={this.initialStartTime}
             initialEndTime={this.initialEndTime}
             onRangeChange={this.handleRangeChange}
+            compressed
           />,
         ]}
       >
diff --git a/public/pages/Monitors/components/MonitorActions/MonitorActions.js b/public/pages/Monitors/components/MonitorActions/MonitorActions.js
index 6ce6d91d3..2f8c5b284 100644
--- a/public/pages/Monitors/components/MonitorActions/MonitorActions.js
+++ b/public/pages/Monitors/components/MonitorActions/MonitorActions.js
@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiFlexGroup,
@@ -89,14 +89,14 @@ export default class MonitorActions extends Component {
           <EuiPopover
             id="actionsPopover"
             button={
-              <EuiButton
+              <EuiSmallButton
                 onClick={this.onClickActions}
                 iconType="arrowDown"
                 iconSide="right"
                 data-test-subj="actionsButton"
               >
                 Actions
-              </EuiButton>
+              </EuiSmallButton>
             }
             isOpen={isActionsOpen}
             closePopover={this.onCloseActions}
@@ -107,18 +107,22 @@ export default class MonitorActions extends Component {
           </EuiPopover>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton disabled={isEditDisabled} onClick={onClickEdit} data-test-subj="editButton">
+          <EuiSmallButton
+            disabled={isEditDisabled}
+            onClick={onClickEdit}
+            data-test-subj="editButton"
+          >
             Edit
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}
             data-test-subj="createButton"
           >
             Create monitor
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
diff --git a/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap b/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap
index 2b6b0796b..503c10aeb 100644
--- a/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap
+++ b/public/pages/Monitors/components/MonitorActions/__snapshots__/MonitorActions.test.js.snap
@@ -15,7 +15,7 @@ exports[`MonitorActions renders 1`] = `
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           data-test-subj="actionsButton"
           type="button"
         >
@@ -39,7 +39,7 @@ exports[`MonitorActions renders 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <button
-      class="euiButton euiButton--primary euiButton-isDisabled"
+      class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
       data-test-subj="editButton"
       disabled=""
       type="button"
@@ -59,7 +59,7 @@ exports[`MonitorActions renders 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <a
-      class="euiButton euiButton--primary euiButton--fill"
+      class="euiButton euiButton--primary euiButton--small euiButton--fill"
       data-test-subj="createButton"
       href="alerting#/create-monitor"
       rel="noreferrer"
diff --git a/public/pages/Monitors/components/MonitorControls/MonitorControls.js b/public/pages/Monitors/components/MonitorControls/MonitorControls.js
index c13e9acfb..7b1c7ea1f 100644
--- a/public/pages/Monitors/components/MonitorControls/MonitorControls.js
+++ b/public/pages/Monitors/components/MonitorControls/MonitorControls.js
@@ -4,7 +4,13 @@
  */
 
 import React from 'react';
-import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiPagination, EuiSelect } from '@elastic/eui';
+import {
+  EuiCompressedFieldSearch,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPagination,
+  EuiCompressedSelect,
+} from '@elastic/eui';
 
 const MONITOR_STATES = {
   ALL: 'all',
@@ -29,7 +35,7 @@ const MonitorControls = ({
 }) => (
   <EuiFlexGroup style={{ padding: '0px 5px' }}>
     <EuiFlexItem>
-      <EuiFieldSearch
+      <EuiCompressedFieldSearch
         fullWidth={true}
         value={search}
         placeholder="Search"
@@ -37,7 +43,7 @@ const MonitorControls = ({
       />
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiSelect options={states} value={state} onChange={onStateChange} />
+      <EuiCompressedSelect options={states} value={state} onChange={onStateChange} />
     </EuiFlexItem>
     <EuiFlexItem grow={false} style={{ justifyContent: 'center' }}>
       <EuiPagination pageCount={pageCount} activePage={activePage} onPageClick={onPageClick} />
diff --git a/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js b/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js
index 0bed60ccc..f227f5229 100644
--- a/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js
+++ b/public/pages/Monitors/components/MonitorEmptyPrompt/MonitorEmptyPrompt.js
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
 import { APP_PATH } from '../../../../utils/constants';
 import { PLUGIN_NAME } from '../../../../../utils/constants';
@@ -15,14 +15,14 @@ const emptyMonitorText =
   'There are no existing monitors. Create a monitor to add triggers and actions.';
 const loadingText = 'Loading monitors...';
 const createMonitorButton = (
-  <EuiButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}>
+  <EuiSmallButton fill href={`${PLUGIN_NAME}#${APP_PATH.CREATE_MONITOR}`}>
     Create monitor
-  </EuiButton>
+  </EuiSmallButton>
 );
 const resetFiltersButton = (resetFilters) => (
-  <EuiButton fill onClick={resetFilters}>
+  <EuiSmallButton fill onClick={resetFilters}>
     Reset Filters
-  </EuiButton>
+  </EuiSmallButton>
 );
 
 const getMessagePrompt = ({ filterIsApplied, loading }) => {
diff --git a/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap b/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap
index a1eaffaf2..bf4e38330 100644
--- a/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap
+++ b/public/pages/Monitors/components/MonitorEmptyPrompt/__snapshots__/MonitorEmptyPrompt.test.js.snap
@@ -24,7 +24,7 @@ exports[`MonitorEmptyPrompt renders 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <a
-    class="euiButton euiButton--primary euiButton--fill"
+    class="euiButton euiButton--primary euiButton--small euiButton--fill"
     href="alerting#/create-monitor"
     rel="noreferrer"
   >