From 6b7c91f9ee31aafa1b8b3dbe80078a1e32b5c117 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 21 Aug 2024 08:34:24 +0000
Subject: [PATCH]  Use smaller and compressed varients of buttons and form
 components (#1103)

* 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>

* Use EuiSmallFilterButton

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

* Use EuiCompressedSuperDatePicker

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

* Update snapshots

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

* Fix bad `useNewUX` applications

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

* Fix tests

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

* Update tests and snapshots post-conflict resolution

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

* fix: e2e test

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>

---------

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
(cherry picked from commit 7077166c7ce2130ad34d9e29a1fc30fa49213c1d)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../aliases.js                                |  2 +-
 .../components/ErrorToastContentForJob.tsx    |  6 +-
 .../__snapshots__/components.test.tsx.snap    |  2 +-
 .../AdvancedSettings.test.tsx.snap            |  2 +-
 .../__snapshots__/AliasSelect.test.tsx.snap   | 12 +--
 .../ChannelNotification.tsx                   | 14 ++--
 .../ChannelNotification.test.tsx.snap         | 10 +--
 .../ComboBoxWithoutWarning/index.tsx          |  4 +-
 .../ConfirmationModal/ConfirmationModal.tsx   | 12 +--
 .../ConfirmationModal.test.tsx.snap           |  4 +-
 .../ContentPanel/ContentPanelActions.tsx      | 10 +--
 .../ContentPanelActions.test.tsx.snap         |  2 +-
 .../CreatePolicyModal/CreatePolicyModal.tsx   | 30 ++++----
 .../CreatePolicyModal.test.tsx.snap           | 24 +++---
 .../__snapshots__/CustomFormRow.test.tsx.snap |  2 +-
 public/components/CustomFormRow/index.tsx     |  8 +-
 public/components/DeleteModal/DeleteModal.tsx | 16 ++--
 .../__snapshots__/DeleteModal.test.tsx.snap   |  8 +-
 .../__snapshots__/FilterGroup.test.tsx.snap   |  8 +-
 public/components/FilterGroup/index.tsx       |  5 +-
 .../__snapshots__/FormGenerator.test.tsx.snap | 16 ++--
 .../built_in_components/index.tsx             | 26 ++++---
 public/components/IndexDetail/IndexDetail.tsx | 16 ++--
 .../__snapshots__/IndexDetail.test.tsx.snap   | 16 ++--
 .../components/IndexMapping/IndexMapping.tsx  | 26 ++++---
 .../__snapshots__/IndexMapping.test.tsx.snap  |  4 +-
 .../JSONDiffEditor/JSONDiffEditor.tsx         |  6 +-
 .../JSONDiffEditor/JSONTextArea.tsx           |  6 +-
 public/components/JSONEditor/JSONEditor.tsx   |  6 +-
 public/components/JSONModal/JSONModal.tsx     |  6 +-
 .../__snapshots__/JSONModal.test.tsx.snap     |  2 +-
 .../LegacyNotification/LegacyNotification.tsx |  8 +-
 .../LegacyNotification.test.tsx.snap          |  2 +-
 public/components/Modal/Modal.tsx             | 16 ++--
 .../MonacoJSONEditor/MonacoJSONEditor.tsx     |  6 +-
 public/components/PolicyModal/PolicyModal.tsx | 20 ++---
 .../__snapshots__/PolicyModal.test.tsx.snap   |  8 +-
 .../__snapshots__/RemoteSelect.test.tsx.snap  | 12 +--
 public/components/RemoteSelect/index.tsx      |  4 +-
 .../SwitchableEditor/SwitchableEditor.tsx     |  4 +-
 .../SwitchableEditor.test.tsx.snap            | 18 ++---
 .../UnsavedChangesBottomBar.tsx               |  4 +-
 .../UnsavedChangesBottomBar.test.tsx.snap     |  2 +-
 .../__snapshots__/ChannelSelect.test.tsx.snap | 12 +--
 .../ClearCacheModal/ClearCacheModal.tsx       | 12 +--
 .../ClearCacheModal.test.tsx.snap             |  4 +-
 .../ErrorNotification.test.tsx.snap           | 12 +--
 .../FlushIndexModal/FlushIndexModal.tsx       | 12 +--
 .../FlushIndexModal.test.tsx.snap             | 20 ++---
 .../__snapshots__/IndexForm.test.tsx.snap     | 44 +++++------
 .../NotificationConfig/NotificationConfig.tsx |  6 +-
 .../NotificationConfig.test.tsx.snap          | 22 +++---
 public/containers/RefreshAction/index.tsx     | 10 +--
 .../IndexControls/IndexControls.tsx           | 14 ++--
 .../__snapshots__/IndexControls.test.tsx.snap | 14 ++--
 .../__snapshots__/AliasActions.test.tsx.snap  | 28 +++----
 .../Aliases/containers/AliasActions/index.tsx |  6 +-
 .../Aliases/containers/Aliases/Aliases.tsx    | 24 +++---
 .../__snapshots__/Aliases.test.tsx.snap       | 18 ++---
 .../__snapshots__/CreateAlias.test.tsx.snap   | 18 ++---
 .../Aliases/containers/CreateAlias/index.tsx  | 10 +--
 .../DeleteAliasModal/DeleteAliasModal.tsx     | 14 ++--
 .../DeleteAliasModal.test.tsx.snap            |  8 +-
 .../ChangeManagedIndices.tsx                  | 14 ++--
 .../ChangeManagedIndices.test.tsx.snap        |  4 +-
 .../components/NewPolicy/NewPolicy.tsx        | 25 +++++--
 .../__snapshots__/NewPolicy.test.tsx.snap     | 12 +--
 .../containers/ChangePolicy/ChangePolicy.tsx  | 10 +--
 .../__snapshots__/ChangePolicy.test.tsx.snap  | 20 ++---
 .../IndexControls/IndexControls.tsx           |  5 +-
 .../__snapshots__/IndexControls.test.tsx.snap |  8 +-
 .../AssociatedTemplatesModal.tsx              |  8 +-
 .../AssociatedTemplatesModal.test.tsx.snap    |  2 +-
 .../ComposableTemplates.tsx                   | 31 ++++----
 .../ComposableTemplates.test.tsx.snap         | 12 +--
 .../ComposableTemplatesActions.test.tsx.snap  |  4 +-
 .../ComposableTemplatesActions/index.tsx      | 11 ++-
 .../DeleteComposableTemplatesModal.tsx        | 23 ++++--
 ...leteComposableTemplatesModal.test.tsx.snap |  4 +-
 .../components/TemplateType/TemplateType.tsx  |  6 +-
 .../CreateComposableTemplate.test.tsx.snap    | 35 ++++-----
 .../TemplateDetail/TemplateDetail.tsx         | 20 ++---
 .../TemplateDetail.test.tsx.snap              | 45 +++++------
 .../TemplateMappings/TemplateMappings.tsx     | 10 +--
 .../CreateDataStream.test.tsx.snap            | 18 ++---
 .../DataStreamDetail/DataStreamDetail.tsx     | 18 ++---
 .../DataStreamDetail.test.tsx.snap            | 18 ++---
 .../TemplateMappings/TemplateMappings.tsx     | 10 +--
 .../containers/IndexForm/index.tsx            | 16 ++--
 .../DefineTemplate.test.tsx.snap              | 52 ++++++-------
 .../components/TemplateType/TemplateType.tsx  |  6 +-
 .../ComposableTemplate/ComposableTemplate.tsx | 14 ++--
 .../CreateIndexTemplate.test.tsx.snap         | 12 +--
 .../TemplateDetail/TemplateDetail.tsx         | 23 +++---
 .../TemplateDetail.test.tsx.snap              | 70 +++++++++---------
 .../TemplateMappings/TemplateMappings.tsx     | 10 +--
 .../ConfigurePolicy/ConfigurePolicy.tsx       | 14 +++-
 .../ConfigurePolicy.test.tsx.snap             |  6 +-
 .../components/DefinePolicy/DefinePolicy.tsx  | 10 +--
 .../__mocks__/DefinePolicyMock.tsx            | 20 +++--
 .../__snapshots__/DefinePolicy.test.tsx.snap  |  4 +-
 .../containers/CreatePolicy/CreatePolicy.tsx  | 19 ++---
 .../__snapshots__/CreatePolicy.test.tsx.snap  | 36 ++++-----
 .../AdvancedAggregation.tsx                   | 34 ++++-----
 .../ConfigureRollup/ConfigureRollup.tsx       | 18 +++--
 .../MetricsCalculation/MetricsCalculation.tsx | 54 +++++++-------
 .../RollupIndices/RollupIndices.tsx           | 16 ++--
 .../components/Schedule/Schedule.tsx          | 74 +++++++++++--------
 .../TimeAggregations/TimeAggregation.tsx      | 59 ++++++++-------
 .../CreateRollupForm/CreateRollupForm.tsx     | 18 ++---
 .../CreateRollupForm.test.tsx.snap            | 28 +++----
 .../components/CronSchedule/CronSchedule.tsx  | 33 +++++----
 .../components/Notification/Notification.tsx  | 14 ++--
 .../SnapshotAdvancedSettings.tsx              |  8 +-
 .../SnapshotIndicesRepoInput.tsx              | 18 ++---
 .../CreateSnapshotPolicy.tsx                  | 72 ++++++++++--------
 .../ConfigureTransform/ConfigureTransform.tsx | 17 +++--
 .../IndexFilterPopover/IndexFilterPopover.tsx | 38 +++++-----
 .../EditTransformPanel/EditTransformPanel.tsx | 25 +++++--
 .../PreviewOptions/PreviewOptions.tsx         |  4 +-
 .../components/Schedule/Schedule.tsx          | 29 ++++++--
 .../TransformIndices/TransformIndices.tsx     | 16 ++--
 .../DateHistogramPanel/DateHistogramPanel.tsx | 14 ++--
 .../DateHistogramPanel.test.tsx.snap          | 20 ++---
 .../Panels/HistogramPanel/HistogramPanel.tsx  | 24 ++++--
 .../PercentilePanel/PercentilePanel.tsx       | 16 ++--
 .../ScriptedMetricsPanel.tsx                  | 14 ++--
 .../TransformOptions/TransformOptions.tsx     |  4 +-
 .../CreateTransformForm.tsx                   | 18 ++---
 .../CreateTransformForm.test.tsx.snap         | 28 +++----
 .../IndexControls/IndexControls.tsx           |  5 +-
 .../__snapshots__/IndexControls.test.tsx.snap |  6 +-
 .../containers/DataStreams/DataStreams.tsx    | 17 ++---
 .../__snapshots__/DataStreams.test.tsx.snap   | 12 +--
 .../DataStreamsActions.test.tsx.snap          | 22 +++---
 .../containers/DataStreamsActions/index.tsx   |  8 +-
 .../DeleteDataStreamsModal.test.tsx.snap      |  8 +-
 .../EditRollup/containers/EditRollup.tsx      | 10 +--
 .../__snapshots__/EditRollup.test.tsx.snap    | 48 ++++++------
 .../ForceMergeAdvancedOptions.test.tsx.snap   | 28 +++----
 .../__snapshots__/IndexSelect.test.tsx.snap   | 12 +--
 .../components/SwitchNumber/index.tsx         |  4 +-
 .../container/ForceMerge/ForceMerge.tsx       | 16 ++--
 .../__snapshots__/ForceMerge.test.tsx.snap    | 16 ++--
 .../containers/IndexDetail/IndexDetail.tsx    |  6 +-
 .../ApplyPolicyModal/ApplyPolicyModal.tsx     | 30 ++++----
 .../ApplyPolicyModal.test.tsx.snap            | 12 +--
 .../CloseIndexModal/CloseIndexModal.tsx       | 16 ++--
 .../CloseIndexModal.test.tsx.snap             |  8 +-
 .../DeleteIndexModal/DeleteIndexModal.tsx     | 14 ++--
 .../DeleteIndexModal.test.tsx.snap            |  8 +-
 .../IndexControls/IndexControls.tsx           |  7 +-
 .../__snapshots__/IndexControls.test.tsx.snap | 14 +---
 .../IndexEmptyPrompt/IndexEmptyPrompt.tsx     |  8 +-
 .../OpenIndexModal/OpenIndexModal.tsx         | 12 +--
 .../OpenIndexModal.test.tsx.snap              |  4 +-
 .../__snapshots__/Indices.test.tsx.snap       | 13 ++--
 .../IndicesActions.test.tsx.snap              | 44 +++++------
 .../containers/IndicesActions/index.tsx       |  6 +-
 .../components/InfoModal/InfoModal.tsx        |  6 +-
 .../__snapshots__/InfoModal.test.tsx.snap     |  2 +-
 .../ManagedIndexControls.tsx                  |  7 +-
 .../ManagedIndexControls.test.tsx.snap        | 14 +---
 .../ManagedIndexEmptyPrompt.tsx               | 10 +--
 .../ManagedIndexEmptyPrompt.test.tsx.snap     |  2 +-
 .../components/RetryModal/RetryModal.tsx      | 26 +++----
 .../__snapshots__/RetryModal.test.tsx.snap    | 14 ++--
 .../RolloverAliasModal/RolloverAliasModal.tsx | 27 ++++---
 .../RolloverAliasModal.test.tsx.snap          | 10 +--
 .../ManagedIndices/ManagedIndices.tsx         | 15 ++--
 .../ManagedIndices.test.tsx.snap              | 17 ++---
 .../Notifications/Notifications.tsx           |  6 +-
 .../__snapshots__/Notifications.test.tsx.snap | 40 +++++-----
 .../PolicyControls/PolicyControls.tsx         |  4 +-
 .../PolicyControls.test.tsx.snap              |  6 +-
 .../PolicyEmptyPrompt/PolicyEmptyPrompt.tsx   | 10 +--
 .../PolicyEmptyPrompt.test.tsx.snap           |  2 +-
 .../Policies/containers/Policies/Policies.tsx |  7 +-
 .../__snapshots__/Policies.test.tsx.snap      | 10 +--
 .../components/DeleteModal/DeleteModal.tsx    | 13 +++-
 .../__snapshots__/DeleteModal.test.tsx.snap   |  6 +-
 .../PolicyDetails/PolicyDetails.tsx           | 14 ++--
 .../CreateIndexFlyout.test.tsx.snap           | 48 ++++++------
 .../__snapshots__/IndexSelect.test.tsx.snap   | 16 ++--
 .../ReindexAdvancedOptions.tsx                | 22 ++++--
 .../ReindexAdvancedOptions.test.tsx.snap      | 60 +++++++--------
 .../Reindex/container/Reindex/Reindex.tsx     | 24 +++---
 .../__snapshots__/Reindex.test.tsx.snap       | 34 ++++-----
 .../CreateRepositoryFlyout.tsx                | 26 +++----
 .../components/DeleteModal/DeleteModal.tsx    | 13 +++-
 .../containers/Repositories/Repositories.tsx  | 18 ++---
 .../Rollover/containers/Rollover/Rollover.tsx | 18 ++---
 .../__snapshots__/Rollover.test.tsx.snap      | 16 ++--
 .../RollupDetails/RollupDetails.tsx           | 20 ++---
 .../components/DeleteModal/DeleteModal.tsx    | 13 +++-
 .../RollupEmptyPrompt/RollupEmptyPrompt.tsx   | 10 +--
 .../Rollups/containers/Rollups/Rollups.tsx    | 30 ++++----
 .../__snapshots__/Rollups.test.tsx.snap       | 14 ++--
 .../container/ShrinkIndex/ShrinkIndex.tsx     | 26 +++----
 .../__snapshots__/ShrinkIndex.test.tsx.snap   | 40 +++++-----
 .../SnapshotPolicies/SnapshotPolicies.tsx     | 23 +++---
 .../components/InfoModal/InfoModal.tsx        |  6 +-
 .../SnapshotPolicyDetails.tsx                 | 12 +--
 .../AddPrefixInput/AddPrefixInput.tsx         |  8 +-
 .../AddPrefixInput.test.tsx.snap              |  6 +-
 .../CreateSnapshotFlyout.tsx                  | 10 +--
 .../components/ErrorModal/ErrorModal.tsx      | 20 +++--
 .../IndexSettingsInput/IndexSettingsInput.tsx | 15 ++--
 .../components/RenameInput/RenameInput.tsx    | 30 +++++---
 .../__snapshots__/RenameInput.test.tsx.snap   | 12 +--
 .../RestoreActivitiesPanel.tsx                |  6 +-
 .../RestoreSnapshotFlyout.tsx                 |  4 +-
 .../SnapshotFlyout/SnapshotFlyout.tsx         |  4 +-
 .../SnapshotIndicesInput.tsx                  | 10 +--
 .../SnapshotIndicesInput.test.tsx.snap        |  8 +-
 .../SnapshotRenameOptions.tsx                 |  8 +-
 .../SnapshotRenameOptions.test.tsx.snap       |  6 +-
 .../SnapshotRestoreAdvancedOptions.tsx        | 41 +++++-----
 .../SnapshotRestoreOption.tsx                 |  6 +-
 .../SnapshotRestoreOption.test.tsx.snap       |  4 +-
 .../containers/Snapshots/Snapshots.tsx        | 22 +++---
 public/pages/Snapshots/helper.tsx             | 40 +++++-----
 .../SplitIndexForm/SplitIndexForm.tsx         | 10 +--
 .../container/SplitIndex/SplitIndex.tsx       | 14 ++--
 .../__snapshots__/SplitIndex.test.tsx.snap    |  2 +-
 .../components/DeleteTemplate/index.tsx       |  4 +-
 .../IndexControls/IndexControls.tsx           | 12 ++-
 .../__snapshots__/IndexControls.test.tsx.snap |  6 +-
 .../AssociatedComponentsModal.tsx             | 13 +++-
 .../AssociatedComponentsModal.test.tsx.snap   |  2 +-
 .../DeleteTemplateModal.test.tsx.snap         |  8 +-
 .../containers/Templates/Templates.tsx        | 24 +++---
 .../__snapshots__/Templates.test.tsx.snap     | 12 +--
 .../TemplatesActions.test.tsx.snap            |  4 +-
 .../containers/TemplatesActions/index.tsx     |  6 +-
 .../ConfigureTransform/Configure.tsx          | 18 +++--
 .../components/DeleteModal/DeleteModal.tsx    | 13 +++-
 .../components/ErrorModal/ErrorModal.tsx      |  6 +-
 .../components/Schedule/Schedule.tsx          | 10 +--
 .../TransformEmptyPrompt.tsx                  | 14 ++--
 .../containers/Transforms/EditTransform.tsx   | 15 ++--
 .../Transforms/TransformDetails.tsx           | 25 ++++---
 .../containers/Transforms/Transforms.tsx      | 26 +++----
 .../__snapshots__/EditTransform.test.tsx.snap | 32 ++++----
 .../__snapshots__/Transforms.test.tsx.snap    | 14 ++--
 .../pages/Transforms/utils/metadataHelper.tsx | 34 ++++++---
 .../ChannelNotification.tsx                   | 20 +++--
 .../DraggableItem/DraggableItem.tsx           |  6 +-
 .../__snapshots__/DraggableItem.test.tsx.snap |  4 +-
 .../components/FlyoutFooter/FlyoutFooter.tsx  | 16 ++--
 .../__snapshots__/FlyoutFooter.test.tsx.snap  |  4 +-
 .../components/ISMTemplate/ISMTemplate.tsx    | 27 ++++---
 .../__snapshots__/ISMTemplate.test.tsx.snap   | 16 ++--
 .../components/ISMTemplates/ISMTemplates.tsx  |  7 +-
 .../__snapshots__/ISMTemplates.test.tsx.snap  |  2 +-
 .../LegacyNotification/LegacyNotification.tsx |  8 +-
 .../LegacyNotification.test.tsx.snap          |  2 +-
 .../components/PolicyInfo/PolicyInfo.tsx      | 12 +--
 .../__snapshots__/PolicyInfo.test.tsx.snap    |  8 +-
 .../components/States/State.tsx               |  6 +-
 .../components/States/States.tsx              | 21 ++----
 .../States/__snapshots__/State.test.tsx.snap  |  4 +-
 .../States/__snapshots__/States.test.tsx.snap | 12 +--
 .../TimeoutRetrySettings.tsx                  | 35 +++++----
 .../TimeoutRetrySettings.test.tsx.snap        | 24 +++---
 .../components/Transition/Transition.tsx      | 53 +++++++------
 .../AliasUIAction/AliasUIActionComponent.tsx  | 18 ++---
 .../__snapshots__/AliasUIAction.test.tsx.snap | 64 +++++++---------
 .../UIActions/AllocationUIAction.tsx          |  6 +-
 .../UIActions/ForceMergeUIAction.tsx          |  8 +-
 .../UIActions/IndexPriorityUIAction.tsx       |  8 +-
 .../UIActions/ReplicaCountUIAction.tsx        |  8 +-
 .../components/UIActions/RolloverUIAction.tsx | 26 +++----
 .../components/UIActions/RollupUIAction.tsx   |  6 +-
 .../components/UIActions/ShrinkUIAction.tsx   | 34 ++++-----
 .../components/UIActions/SnapshotUIAction.tsx | 14 ++--
 .../containers/CreateAction/CreateAction.tsx  |  9 +--
 .../__snapshots__/CreateAction.test.tsx.snap  | 54 +++++++-------
 .../containers/CreateState/Actions.tsx        | 10 +--
 .../containers/CreateState/CreateState.tsx    | 39 +++++-----
 .../containers/CreateState/Transitions.tsx    | 10 +--
 .../CreateTransition/CreateTransition.tsx     | 19 +++--
 .../CreateTransition.test.tsx.snap            | 20 ++---
 .../ErrorNotification.test.tsx.snap           | 12 +--
 .../VisualCreatePolicy/VisualCreatePolicy.tsx | 10 +--
 public/temporary/EuiRefreshPicker.tsx         |  4 +-
 286 files changed, 2324 insertions(+), 2218 deletions(-)

diff --git a/cypress/integration/plugins/index-management-dashboards-plugin/aliases.js b/cypress/integration/plugins/index-management-dashboards-plugin/aliases.js
index 29bcf6476..4e23e1fea 100644
--- a/cypress/integration/plugins/index-management-dashboards-plugin/aliases.js
+++ b/cypress/integration/plugins/index-management-dashboards-plugin/aliases.js
@@ -60,7 +60,7 @@ describe("Aliases", () => {
   describe("can create a alias with wildcard and specific name", () => {
     it("successfully", () => {
       cy.get('[data-test-subj="Create aliasButton"]').click();
-      cy.get('[data-test-subj="form-name-alias"]').type(CREATE_ALIAS);
+      cy.get('[data-test-subj="form-name-alias"] input').type(CREATE_ALIAS);
       cy.get('[data-test-subj="form-name-indexArray"] [data-test-subj="comboBoxSearchInput"]').type(
         `${EDIT_INDEX}{enter}${SAMPLE_INDEX_PREFIX}-*{enter}`
       );
diff --git a/public/JobHandler/components/ErrorToastContentForJob.tsx b/public/JobHandler/components/ErrorToastContentForJob.tsx
index 586fde083..76bb962c9 100644
--- a/public/JobHandler/components/ErrorToastContentForJob.tsx
+++ b/public/JobHandler/components/ErrorToastContentForJob.tsx
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { EuiButton, EuiSpacer, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiSpacer, EuiText } from "@elastic/eui";
 import React from "react";
 import { Modal } from "../../components/Modal";
 
@@ -14,7 +14,7 @@ export const ErrorToastContentForJob = (props: { shortError?: React.ReactChild;
       {fullError ? (
         <>
           <EuiSpacer />
-          <EuiButton
+          <EuiSmallButton
             onClick={
               /* istanbul ignore next */ () => {
                 Modal.show({
@@ -34,7 +34,7 @@ export const ErrorToastContentForJob = (props: { shortError?: React.ReactChild;
             color="danger"
           >
             See full error
-          </EuiButton>
+          </EuiSmallButton>
         </>
       ) : null}
     </div>
diff --git a/public/JobHandler/components/__snapshots__/components.test.tsx.snap b/public/JobHandler/components/__snapshots__/components.test.tsx.snap
index f08aeffe9..ed86b3107 100644
--- a/public/JobHandler/components/__snapshots__/components.test.tsx.snap
+++ b/public/JobHandler/components/__snapshots__/components.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`<ErrorToastContentForJob /> spec render with action 1`] = `
       class="euiSpacer euiSpacer--l"
     />
     <button
-      class="euiButton euiButton--danger"
+      class="euiButton euiButton--danger euiButton--small"
       style="float: right;"
       type="button"
     >
diff --git a/public/components/AdvancedSettings/__snapshots__/AdvancedSettings.test.tsx.snap b/public/components/AdvancedSettings/__snapshots__/AdvancedSettings.test.tsx.snap
index 59a325f24..b6fffd1f9 100644
--- a/public/components/AdvancedSettings/__snapshots__/AdvancedSettings.test.tsx.snap
+++ b/public/components/AdvancedSettings/__snapshots__/AdvancedSettings.test.tsx.snap
@@ -41,7 +41,7 @@ HTMLCollection [
               class="euiSpacer euiSpacer--s"
             />
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
diff --git a/public/components/AliasSelect/__snapshots__/AliasSelect.test.tsx.snap b/public/components/AliasSelect/__snapshots__/AliasSelect.test.tsx.snap
index 8987a1f1c..b8ec12d8a 100644
--- a/public/components/AliasSelect/__snapshots__/AliasSelect.test.tsx.snap
+++ b/public/components/AliasSelect/__snapshots__/AliasSelect.test.tsx.snap
@@ -4,17 +4,17 @@ exports[`<AliasSelect /> spec renders the component and remove duplicate aliases
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="euiComboBox"
+  class="euiComboBox euiComboBox--compressed"
   role="combobox"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayout--compressed"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
         tabindex="-1"
       >
@@ -61,17 +61,17 @@ exports[`<AliasSelect /> spec renders with error 1`] = `
   <div
     aria-expanded="false"
     aria-haspopup="listbox"
-    class="euiComboBox"
+    class="euiComboBox euiComboBox--compressed"
     role="combobox"
   >
     <div
-      class="euiFormControlLayout"
+      class="euiFormControlLayout euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <div
-          class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+          class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
           data-test-subj="comboBoxInput"
           tabindex="-1"
         >
diff --git a/public/components/ChannelNotification/ChannelNotification.tsx b/public/components/ChannelNotification/ChannelNotification.tsx
index af195be02..5b5d01bd1 100644
--- a/public/components/ChannelNotification/ChannelNotification.tsx
+++ b/public/components/ChannelNotification/ChannelNotification.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiTextArea, EuiSelect, EuiButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiTextArea, EuiCompressedSelect, EuiSmallButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { FeatureChannelList } from "../../../server/models/interfaces";
@@ -36,7 +36,7 @@ const ChannelNotification = ({
       <CustomFormRow label="Channel ID">
         <EuiFlexGroup gutterSize="s" style={{ maxWidth: 600, width: 600 }}>
           <EuiFlexItem>
-            <EuiSelect
+            <EuiCompressedSelect
               id={actionNotification ? "action-channel-id" : "channel-id"}
               placeholder="Select channel ID"
               hasNoInitialSelection
@@ -48,7 +48,7 @@ const ChannelNotification = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               iconType="refresh"
               onClick={getChannels}
               disabled={loadingChannels}
@@ -57,9 +57,9 @@ const ChannelNotification = ({
             />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+            <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
               Manage channels
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </CustomFormRow>
@@ -68,7 +68,7 @@ const ChannelNotification = ({
         <>
           <EuiSpacer size="m" />
 
-          <EuiFormRow title="Notification message" helpText="Embed variables in your message using Mustache template.">
+          <EuiCompressedFormRow title="Notification message" helpText="Embed variables in your message using Mustache template.">
             <EuiTextArea
               placeholder="The index {{ctx.index}} failed during policy execution."
               style={{ minHeight: "150px" }}
@@ -77,7 +77,7 @@ const ChannelNotification = ({
               onChange={onChangeMessage}
               data-test-subj={actionNotification ? "create-policy-notification-action-message" : "create-policy-notification-message"}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
     </>
diff --git a/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap b/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
index 37625417d..9b135ffd7 100644
--- a/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
+++ b/public/components/ChannelNotification/__snapshots__/ChannelNotification.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ChannelNotification /> spec renders the component 1`] = `
 <div
-  class="euiFormRow"
+  class="euiFormRow euiFormRow--compressed"
   id="some_html_id-row"
 >
   <div
@@ -26,13 +26,13 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         class="euiFlexItem"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <select
-              class="euiSelect"
+              class="euiSelect euiSelect--compressed"
               data-test-subj="create-policy-notification-channel-id"
               id="channel-id"
               placeholder="Select channel ID"
@@ -67,7 +67,7 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary refresh-button"
+          class="euiButton euiButton--primary euiButton--small refresh-button"
           data-test-subj="channel-notification-refresh"
           type="button"
         >
@@ -85,7 +85,7 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <a
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           href="notifications-dashboards#/channels"
           rel="noopener noreferrer"
           target="_blank"
diff --git a/public/components/ComboBoxWithoutWarning/index.tsx b/public/components/ComboBoxWithoutWarning/index.tsx
index 19c297006..a11e1fc7d 100644
--- a/public/components/ComboBoxWithoutWarning/index.tsx
+++ b/public/components/ComboBoxWithoutWarning/index.tsx
@@ -2,14 +2,14 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { EuiComboBox, EuiComboBoxProps } from "@elastic/eui";
+import { EuiCompressedComboBox, EuiComboBoxProps } from "@elastic/eui";
 
 /**
  * The EuiComboBox has an issue when calling closeList.
  * It does not check if the component is still mounted.
  * And it will give a warning in browser console and terminal when running unittest.
  */
-export default class ComboBoxWithoutWarning<T> extends EuiComboBox<T> {
+export default class ComboBoxWithoutWarning<T> extends EuiCompressedComboBox<T> {
   memoriedCloseList: (event?: Event) => void;
   constructor(props: EuiComboBoxProps<T>) {
     super(props as any);
diff --git a/public/components/ConfirmationModal/ConfirmationModal.tsx b/public/components/ConfirmationModal/ConfirmationModal.tsx
index 93d9cf746..4da8eb742 100644
--- a/public/components/ConfirmationModal/ConfirmationModal.tsx
+++ b/public/components/ConfirmationModal/ConfirmationModal.tsx
@@ -5,14 +5,14 @@
 
 import React from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   // @ts-ignore
 } from "@elastic/eui";
 
@@ -47,10 +47,10 @@ const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({
         <EuiModalBody>{bodyMessage}</EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={onClose} data-test-subj="confirmationModalCloseButton">
+          <EuiSmallButtonEmpty onClick={onClose} data-test-subj="confirmationModalCloseButton">
             Cancel
-          </EuiButtonEmpty>
-          <EuiButton
+          </EuiSmallButtonEmpty>
+          <EuiSmallButton
             onClick={() => {
               onAction();
               onClose();
@@ -60,7 +60,7 @@ const ConfirmationModal: React.SFC<ConfirmationModalProps> = ({
             {...actionProps}
           >
             {actionMessage}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap b/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap
index dcbe9f699..914dab104 100644
--- a/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap
+++ b/public/components/ConfirmationModal/__snapshots__/ConfirmationModal.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
           class="euiModalFooter"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
             data-test-subj="confirmationModalCloseButton"
             type="button"
           >
@@ -66,7 +66,7 @@ exports[`<ConfirmationModal /> spec renders the component 1`] = `
             </span>
           </button>
           <button
-            class="euiButton euiButton--primary euiButton--fill"
+            class="euiButton euiButton--primary euiButton--small euiButton--fill"
             data-test-subj="confirmationModalActionButton"
             type="button"
           >
diff --git a/public/components/ContentPanel/ContentPanelActions.tsx b/public/components/ContentPanel/ContentPanelActions.tsx
index 22f6b8954..9a0118f71 100644
--- a/public/components/ContentPanel/ContentPanelActions.tsx
+++ b/public/components/ContentPanel/ContentPanelActions.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSmallButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { ModalConsumer } from "../Modal";
 
 interface ContentPanelActionsProps {
@@ -26,18 +26,18 @@ const ContentPanelActions: React.SFC<ContentPanelActionsProps> = ({ actions, siz
       let button = children ? (
         children
       ) : (
-        <EuiButton {...buttonProps} data-test-subj={`${text}Button`} size={size ? size : "m"}>
+        <EuiSmallButton {...buttonProps} data-test-subj={`${text}Button`}>
           {text}
-        </EuiButton>
+        </EuiSmallButton>
       );
 
       if (modal) {
         button = (
           <ModalConsumer>
             {({ onShow }) => (
-              <EuiButton {...buttonProps} onClick={modal.onClickModal(onShow)} data-test-subj={`${text}Button`}>
+              <EuiSmallButton {...buttonProps} onClick={modal.onClickModal(onShow)} data-test-subj={`${text}Button`}>
                 {text}
-              </EuiButton>
+              </EuiSmallButton>
             )}
           </ModalConsumer>
         );
diff --git a/public/components/ContentPanel/__snapshots__/ContentPanelActions.test.tsx.snap b/public/components/ContentPanel/__snapshots__/ContentPanelActions.test.tsx.snap
index 04d1b991f..d2f86a6e1 100644
--- a/public/components/ContentPanel/__snapshots__/ContentPanelActions.test.tsx.snap
+++ b/public/components/ContentPanel/__snapshots__/ContentPanelActions.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<ContentPanelActions /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       data-test-subj="ContentPanelActionsButton"
       type="button"
     >
diff --git a/public/components/CreatePolicyModal/CreatePolicyModal.tsx b/public/components/CreatePolicyModal/CreatePolicyModal.tsx
index 9838b179d..c0a037985 100644
--- a/public/components/CreatePolicyModal/CreatePolicyModal.tsx
+++ b/public/components/CreatePolicyModal/CreatePolicyModal.tsx
@@ -5,19 +5,19 @@
 
 import React, { useState } from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
-  EuiFormRow,
-  EuiRadio,
+  EuiCompressedFormRow,
+  EuiCompressedRadio,
   EuiPanel,
 } from "@elastic/eui";
 
@@ -49,32 +49,34 @@ const CreatePolicyModal: React.SFC<CreatePolicyModalProps> = ({ isEdit = false,
               <EuiFlexGroup>
                 <EuiFlexItem>
                   <EuiPanel className={visual ? "selected-radio-panel" : ""}>
-                    <EuiFormRow
+                    <EuiCompressedFormRow
                       helpText={`Use the visual editor to ${isEdit ? "update" : "create"} your policy${
                         isEdit ? "" : " using pre-defined options."
                       }`}
                     >
-                      <EuiRadio
+                      <EuiCompressedRadio
                         id="create-policy-visual"
                         label="Visual editor"
                         checked={visual}
                         onChange={(e) => setVisual(e.target.checked)}
                         data-test-subj="createPolicyModalVisualRadio"
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiPanel>
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <EuiPanel className={visual ? "" : "selected-radio-panel"}>
-                    <EuiFormRow helpText={`Use the JSON editor to ${isEdit ? "update" : "create or import"} your policy using JSON.`}>
-                      <EuiRadio
+                    <EuiCompressedFormRow
+                      helpText={`Use the JSON editor to ${isEdit ? "update" : "create or import"} your policy using JSON.`}
+                    >
+                      <EuiCompressedRadio
                         id="create-policy-json"
                         label="JSON editor"
                         checked={!visual}
                         onChange={(e) => setVisual(!e.target.checked)}
                         data-test-subj="createPolicyModalJsonRadio"
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiPanel>
                 </EuiFlexItem>
               </EuiFlexGroup>
@@ -85,12 +87,12 @@ const CreatePolicyModal: React.SFC<CreatePolicyModalProps> = ({ isEdit = false,
         <EuiModalFooter>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={onClose} data-test-subj="createPolicyModalCancelButton">
+              <EuiSmallButtonEmpty onClick={onClose} data-test-subj="createPolicyModalCancelButton">
                 Cancel
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 onClick={() => {
                   onClose();
                   onClickContinue(visual);
@@ -99,7 +101,7 @@ const CreatePolicyModal: React.SFC<CreatePolicyModalProps> = ({ isEdit = false,
                 data-test-subj="createPolicyModalContinueButton"
               >
                 Continue
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiModalFooter>
diff --git a/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap b/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap
index 8ebb04e2a..3b4365950 100644
--- a/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap
+++ b/public/components/CreatePolicyModal/__snapshots__/CreatePolicyModal.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow selected-radio-panel"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -81,7 +81,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                         >
                           <div
                             aria-describedby="some_html_id-help-0"
-                            class="euiRadio"
+                            class="euiRadio euiRadio--compressed"
                             data-test-subj="createPolicyModalVisualRadio"
                           >
                             <input
@@ -118,7 +118,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -126,7 +126,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
                         >
                           <div
                             aria-describedby="some_html_id-help-0"
-                            class="euiRadio"
+                            class="euiRadio euiRadio--compressed"
                             data-test-subj="createPolicyModalJsonRadio"
                           >
                             <input
@@ -170,7 +170,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--primary"
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
                 data-test-subj="createPolicyModalCancelButton"
                 type="button"
               >
@@ -189,7 +189,7 @@ exports[`<CreatePolicyModal /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="createPolicyModalContinueButton"
                 type="button"
               >
@@ -292,7 +292,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow selected-radio-panel"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -300,7 +300,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                         >
                           <div
                             aria-describedby="some_html_id-help-0"
-                            class="euiRadio"
+                            class="euiRadio euiRadio--compressed"
                             data-test-subj="createPolicyModalVisualRadio"
                           >
                             <input
@@ -337,7 +337,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                       class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -345,7 +345,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
                         >
                           <div
                             aria-describedby="some_html_id-help-0"
-                            class="euiRadio"
+                            class="euiRadio euiRadio--compressed"
                             data-test-subj="createPolicyModalJsonRadio"
                           >
                             <input
@@ -389,7 +389,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--primary"
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
                 data-test-subj="createPolicyModalCancelButton"
                 type="button"
               >
@@ -408,7 +408,7 @@ exports[`<CreatePolicyModal /> spec renders the component w/ edit 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="createPolicyModalContinueButton"
                 type="button"
               >
diff --git a/public/components/CustomFormRow/__snapshots__/CustomFormRow.test.tsx.snap b/public/components/CustomFormRow/__snapshots__/CustomFormRow.test.tsx.snap
index 88b551250..9e7888b68 100644
--- a/public/components/CustomFormRow/__snapshots__/CustomFormRow.test.tsx.snap
+++ b/public/components/CustomFormRow/__snapshots__/CustomFormRow.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<FormGenerator /> spec render the component 1`] = `
 HTMLCollection [
   <div>
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="some_html_id-row"
     >
       <div
diff --git a/public/components/CustomFormRow/index.tsx b/public/components/CustomFormRow/index.tsx
index 400f1b4f1..8e2bf9a8d 100644
--- a/public/components/CustomFormRow/index.tsx
+++ b/public/components/CustomFormRow/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React from "react";
-import { EuiDescribedFormGroup, EuiFormRow, EuiFormRowProps } from "@elastic/eui";
+import { EuiDescribedFormGroup, EuiCompressedFormRow, EuiFormRowProps } from "@elastic/eui";
 
 export type CustomFormRowProps = {
   position?: "top" | "bottom";
@@ -30,13 +30,13 @@ export default function CustomFormRow(props: CustomFormRowProps) {
         }
         description={helpText}
       >
-        {children ? <EuiFormRow {...others}>{children}</EuiFormRow> : null}
+        {children ? <EuiCompressedFormRow {...others}>{children}</EuiCompressedFormRow> : null}
       </EuiDescribedFormGroup>
     );
   }
 
   return (
-    <EuiFormRow
+    <EuiCompressedFormRow
       {...others}
       label={
         isOptional ? (
@@ -58,6 +58,6 @@ export default function CustomFormRow(props: CustomFormRowProps) {
         ) : null}
         {children}
       </>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 }
diff --git a/public/components/DeleteModal/DeleteModal.tsx b/public/components/DeleteModal/DeleteModal.tsx
index 329e8caea..30995f67d 100644
--- a/public/components/DeleteModal/DeleteModal.tsx
+++ b/public/components/DeleteModal/DeleteModal.tsx
@@ -5,9 +5,9 @@
 
 import React, { useEffect, useState } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -57,7 +57,7 @@ export default function DeleteTemplateModal(props: DeleteModalProps) {
           <EuiText color="subdued" size="s">
             To confirm your action, type <b style={{ color: "#000" }}>delete</b>.
           </EuiText>
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="deleteInput"
             placeholder="delete"
             fullWidth
@@ -68,12 +68,12 @@ export default function DeleteTemplateModal(props: DeleteModalProps) {
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty data-test-subj="deletaCancelButton" onClick={onClose}>
+        <EuiSmallButtonEmpty data-test-subj="deletaCancelButton" onClick={onClose}>
           Cancel
-        </EuiButtonEmpty>
-        <EuiButton data-test-subj="deleteConfirmButton" onClick={onConfirm} fill color="danger" disabled={value !== "delete"}>
+        </EuiSmallButtonEmpty>
+        <EuiSmallButton data-test-subj="deleteConfirmButton" onClick={onConfirm} fill color="danger" disabled={value !== "delete"}>
           Delete
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap b/public/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
index bcb5fd6a0..198200d66 100644
--- a/public/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
+++ b/public/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
@@ -80,13 +80,13 @@ HTMLCollection [
                   </div>
                 </div>
                 <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"
                       data-test-subj="deleteInput"
                       placeholder="delete"
                       type="text"
@@ -101,7 +101,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="deletaCancelButton"
               type="button"
             >
@@ -116,7 +116,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--danger euiButton--fill euiButton-isDisabled"
+              class="euiButton euiButton--danger euiButton--small euiButton--fill euiButton-isDisabled"
               data-test-subj="deleteConfirmButton"
               disabled=""
               type="button"
diff --git a/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap b/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
index adc9be3b8..13488a6c2 100644
--- a/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
+++ b/public/components/FilterGroup/__snapshots__/FilterGroup.test.tsx.snap
@@ -13,7 +13,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -63,7 +63,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -181,7 +181,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-isSelected euiFilterButton-hasActiveFilters euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
@@ -299,7 +299,7 @@ HTMLCollection [
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-isSelected euiFilterButton-hasNotification euiFilterButton--hasIcon"
             data-test-subj="test"
             placeholder="test"
             type="button"
diff --git a/public/components/FilterGroup/index.tsx b/public/components/FilterGroup/index.tsx
index 56431fcf8..23a8dbddf 100644
--- a/public/components/FilterGroup/index.tsx
+++ b/public/components/FilterGroup/index.tsx
@@ -1,4 +1,4 @@
-import { EuiFilterButton, EuiFilterButtonProps, EuiFilterGroup, EuiFilterSelectItem, EuiPopover } from "@elastic/eui";
+import { EuiSmallFilterButton, EuiFilterButtonProps, EuiFilterGroup, EuiFilterSelectItem, EuiPopover } from "@elastic/eui";
 import React, { useState } from "react";
 
 export interface IFilterGroupProps {
@@ -24,14 +24,13 @@ export default function FilterGroup({ options, value, filterButtonProps, onChang
     <EuiFilterGroup>
       <EuiPopover
         button={
-          <EuiFilterButton
+          <EuiSmallFilterButton
             iconType="arrowDown"
             onClick={onButtonClick}
             isSelected={isPopoverOpen}
             numFilters={options?.length}
             hasActiveFilters={!!value?.length}
             numActiveFilters={value?.length}
-            size={useNewUX ? "s" : undefined}
             {...filterButtonProps}
           />
         }
diff --git a/public/components/FormGenerator/__snapshots__/FormGenerator.test.tsx.snap b/public/components/FormGenerator/__snapshots__/FormGenerator.test.tsx.snap
index 5850d4eaf..cf9a5558e 100644
--- a/public/components/FormGenerator/__snapshots__/FormGenerator.test.tsx.snap
+++ b/public/components/FormGenerator/__snapshots__/FormGenerator.test.tsx.snap
@@ -7,7 +7,7 @@ HTMLCollection [
       class="euiForm"
     >
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-name-test"
         id="some_html_id-row"
       >
@@ -29,13 +29,13 @@ HTMLCollection [
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   type="text"
                   value=""
                 />
@@ -45,7 +45,7 @@ HTMLCollection [
         </div>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-name-test_component"
         id="some_html_id-row"
       >
@@ -69,7 +69,7 @@ HTMLCollection [
         </div>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-name-test_component_2"
         id="some_html_id-row"
       >
@@ -91,13 +91,13 @@ HTMLCollection [
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   type="text"
                   value=""
                 />
@@ -107,7 +107,7 @@ HTMLCollection [
         </div>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-name-test_component_3"
         id="some_html_id-row"
       >
diff --git a/public/components/FormGenerator/built_in_components/index.tsx b/public/components/FormGenerator/built_in_components/index.tsx
index c1e3eb3a9..6425da435 100644
--- a/public/components/FormGenerator/built_in_components/index.tsx
+++ b/public/components/FormGenerator/built_in_components/index.tsx
@@ -3,9 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { forwardRef, useRef } from "react";
-import { EuiFieldNumber, EuiFieldText, EuiSwitch, EuiSelect, EuiText, EuiCheckbox, EuiComboBoxOptionOption } from "@elastic/eui";
+import {
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
+  EuiCompressedSwitch,
+  EuiCompressedSelect,
+  EuiText,
+  EuiCompressedCheckbox,
+  EuiComboBoxOptionOption,
+} from "@elastic/eui";
 import EuiToolTipWrapper, { IEuiToolTipWrapperProps } from "../../EuiToolTipWrapper";
-import EuiComboBox from "../../ComboBoxWithoutWarning";
+import EuiCompressedComboBox from "../../ComboBoxWithoutWarning";
 
 export type ComponentMapEnum = "Input" | "Number" | "Switch" | "Select" | "Text" | "ComboBoxSingle" | "CheckBox" | "ComboBoxMultiple";
 
@@ -20,7 +28,7 @@ let globalId = 0;
 const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponentProps>> = {
   Input: EuiToolTipWrapper(
     forwardRef(({ onChange, value, removeWhenEmpty, ...others }, ref: React.Ref<HTMLInputElement>) => (
-      <EuiFieldText
+      <EuiCompressedFieldText
         inputRef={ref}
         value={value || ""}
         onChange={(e) => onChange(e.target.value ? e.target.value : removeWhenEmpty ? undefined : e.target.value)}
@@ -30,7 +38,7 @@ const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponent
   ),
   Number: EuiToolTipWrapper(
     forwardRef(({ onChange, value, removeWhenEmpty, ...others }, ref: React.Ref<HTMLInputElement>) => (
-      <EuiFieldNumber
+      <EuiCompressedFieldNumber
         inputRef={ref}
         onChange={(e) => onChange(e.target.value ? e.target.value : removeWhenEmpty ? undefined : e.target.value)}
         value={value === undefined ? "" : value}
@@ -41,7 +49,7 @@ const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponent
   Switch: EuiToolTipWrapper(
     forwardRef(({ value, onChange, ...others }, ref: React.Ref<any>) => (
       <div ref={ref}>
-        <EuiSwitch showLabel={false} label="" checked={value || false} onChange={(e) => onChange(e.target.checked)} {...others} />
+        <EuiCompressedSwitch showLabel={false} label="" checked={value || false} onChange={(e) => onChange(e.target.checked)} {...others} />
       </div>
     )) as React.ComponentType<IFieldComponentProps>
   ),
@@ -52,14 +60,14 @@ const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponent
   )) as React.ComponentType<IFieldComponentProps>,
   Select: EuiToolTipWrapper(
     forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => (
-      <EuiSelect inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} />
+      <EuiCompressedSelect inputRef={ref} onChange={(e) => onChange(e.target.value)} value={value || ""} {...others} />
     )) as React.ComponentType<IFieldComponentProps>
   ),
   CheckBox: EuiToolTipWrapper(
     forwardRef(({ onChange, value, ...others }, ref: React.Ref<any>) => {
       const idRef = useRef(globalId++);
       return (
-        <EuiCheckbox
+        <EuiCompressedCheckbox
           ref={ref}
           id={`builtInCheckBoxId-${idRef.current}`}
           checked={value === undefined ? false : value}
@@ -72,7 +80,7 @@ const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponent
   ComboBoxSingle: EuiToolTipWrapper(
     forwardRef(({ onChange, value, options, ...others }, ref: React.Ref<any>) => {
       return (
-        <EuiComboBox
+        <EuiCompressedComboBox
           onCreateOption={(searchValue) => {
             const allOptions = (options as { label: string; options?: { label: string }[] }[]).reduce((total, current) => {
               if (current.options) {
@@ -117,7 +125,7 @@ const componentMap: Record<ComponentMapEnum, React.ComponentType<IFieldComponent
         ref: React.Ref<any>
       ) => {
         return (
-          <EuiComboBox
+          <EuiCompressedComboBox
             onCreateOption={(searchValue) => {
               const allOptions = others.options.reduce((total, current) => {
                 if (current.options) {
diff --git a/public/components/IndexDetail/IndexDetail.tsx b/public/components/IndexDetail/IndexDetail.tsx
index 01bc32138..c900a3f22 100644
--- a/public/components/IndexDetail/IndexDetail.tsx
+++ b/public/components/IndexDetail/IndexDetail.tsx
@@ -6,12 +6,12 @@
 import React, { Ref, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import {
   EuiSpacer,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiOverlayMask,
   EuiLoadingSpinner,
   EuiContextMenu,
-  EuiButton,
+  EuiSmallButton,
   EuiCallOut,
   EuiTitle,
 } from "@elastic/eui";
@@ -445,9 +445,9 @@ const IndexDetail = (
             data-test-subj="moreAction"
             panelPaddingSize="none"
             button={
-              <EuiButton iconType="arrowDown" iconSide="right" data-test-subj="importSettingMappingBtn">
+              <EuiSmallButton iconType="arrowDown" iconSide="right" data-test-subj="importSettingMappingBtn">
                 Import settings and mappings
-              </EuiButton>
+              </EuiSmallButton>
             }
           >
             <EuiContextMenu
@@ -561,7 +561,7 @@ const IndexDetail = (
         ? null
         : (() => {
             const content = (
-              <EuiFormRow fullWidth>
+              <EuiCompressedFormRow fullWidth>
                 <IndexMapping
                   isEdit={isEdit}
                   value={finalValue?.mappings}
@@ -571,7 +571,7 @@ const IndexDetail = (
                   readonly={readonly}
                   docVersion={docVersion}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             );
 
             if (mode && mode === IndicesUpdateMode.mappings) {
@@ -601,7 +601,7 @@ const IndexDetail = (
                         <OptionalLabel />
                       </div>
                     </EuiTitle>
-                    <EuiFormRow
+                    <EuiCompressedFormRow
                       fullWidth
                       helpText={
                         <>
@@ -616,7 +616,7 @@ const IndexDetail = (
                       }
                     >
                       <></>
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </>
                 }
                 titleSize="s"
diff --git a/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap b/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
index 7317652b8..5ec73e06d 100644
--- a/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
+++ b/public/components/IndexDetail/__snapshots__/IndexDetail.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<IndexDetail /> spec renders the component 1`] = `
       class="euiForm"
     >
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-name-index"
         id="some_html_id-row"
       >
@@ -57,13 +57,13 @@ exports[`<IndexDetail /> spec renders the component 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   placeholder="Specify a name for the new index."
                   type="text"
                   value=""
@@ -82,7 +82,7 @@ exports[`<IndexDetail /> spec renders the component 1`] = `
         </div>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         data-test-subj="form-name-templateMessage"
         id="some_html_id-row"
       >
@@ -91,7 +91,7 @@ exports[`<IndexDetail /> spec renders the component 1`] = `
         />
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-name-aliases"
         id="some_html_id-row"
       >
@@ -124,17 +124,17 @@ exports[`<IndexDetail /> spec renders the component 1`] = `
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="euiComboBox"
+              class="euiComboBox euiComboBox--compressed"
               role="combobox"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <div
-                    class="euiComboBox__inputWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                     data-test-subj="comboBoxInput"
                     tabindex="-1"
                   >
diff --git a/public/components/IndexMapping/IndexMapping.tsx b/public/components/IndexMapping/IndexMapping.tsx
index 71ac99aeb..f7b38ab0b 100644
--- a/public/components/IndexMapping/IndexMapping.tsx
+++ b/public/components/IndexMapping/IndexMapping.tsx
@@ -4,7 +4,17 @@
  */
 
 import React, { forwardRef, useCallback, useState, Ref, useRef, useMemo, useImperativeHandle } from "react";
-import { EuiTreeView, EuiIcon, EuiTreeViewProps, EuiButton, EuiSpacer, EuiButtonGroup, EuiLink, EuiCallOut } from "@elastic/eui";
+import {
+  EuiTreeView,
+  EuiIcon,
+  EuiTreeViewProps,
+  EuiSmallButton,
+  EuiButton,
+  EuiSpacer,
+  EuiButtonGroup,
+  EuiLink,
+  EuiCallOut,
+} from "@elastic/eui";
 import { set, get, isEmpty } from "lodash";
 import MonacoJSONEditor, { IJSONEditorRef } from "../MonacoJSONEditor";
 import { Modal } from "../Modal";
@@ -194,16 +204,10 @@ const IndexMapping = (
           {readonly ? null : (
             <>
               <EuiSpacer />
-              <EuiButton
-                size={useNewUx ? "s" : undefined}
-                style={{ marginRight: 8 }}
-                data-test-subj="createIndexAddFieldButton"
-                onClick={() => addField("")}
-              >
+              <EuiSmallButton style={{ marginRight: 8 }} data-test-subj="createIndexAddFieldButton" onClick={() => addField("")}>
                 Add new field
-              </EuiButton>
-              <EuiButton
-                size={useNewUx ? "s" : undefined}
+              </EuiSmallButton>
+              <EuiSmallButton
                 data-test-subj="createIndexAddObjectFieldButton"
                 onClick={() =>
                   addField("", {
@@ -212,7 +216,7 @@ const IndexMapping = (
                 }
               >
                 Add new object
-              </EuiButton>
+              </EuiSmallButton>
             </>
           )}
         </>
diff --git a/public/components/IndexMapping/__snapshots__/IndexMapping.test.tsx.snap b/public/components/IndexMapping/__snapshots__/IndexMapping.test.tsx.snap
index 9d6b2373f..d5da9fb44 100644
--- a/public/components/IndexMapping/__snapshots__/IndexMapping.test.tsx.snap
+++ b/public/components/IndexMapping/__snapshots__/IndexMapping.test.tsx.snap
@@ -689,7 +689,7 @@ exports[`<IndexMapping /> spec render mappings with object type 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <button
-    class="euiButton euiButton--primary"
+    class="euiButton euiButton--primary euiButton--small"
     data-test-subj="createIndexAddFieldButton"
     style="margin-right: 8px;"
     type="button"
@@ -705,7 +705,7 @@ exports[`<IndexMapping /> spec render mappings with object type 1`] = `
     </span>
   </button>
   <button
-    class="euiButton euiButton--primary"
+    class="euiButton euiButton--primary euiButton--small"
     data-test-subj="createIndexAddObjectFieldButton"
     type="button"
   >
diff --git a/public/components/JSONDiffEditor/JSONDiffEditor.tsx b/public/components/JSONDiffEditor/JSONDiffEditor.tsx
index f89ee3cd9..5b2d1a433 100644
--- a/public/components/JSONDiffEditor/JSONDiffEditor.tsx
+++ b/public/components/JSONDiffEditor/JSONDiffEditor.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle, useCallback } from "react";
-import { EuiFormRow } from "@elastic/eui";
+import { EuiCompressedFormRow } from "@elastic/eui";
 import { MonacoDiffEditor } from "react-monaco-editor";
 import { monaco } from "@osd/monaco";
 import CustomFormRow from "../CustomFormRow";
@@ -135,13 +135,13 @@ const JSONDiffEditor = forwardRef(({ value, onChange, ...others }: JSONDiffEdito
         />
       </div>
       {confirmModalVisible && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           fullWidth
           isInvalid={confirmModalVisible}
           error="Your input does not match the validation of json format, please fix the error line with error aside."
         >
           <></>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
     </>
   );
diff --git a/public/components/JSONDiffEditor/JSONTextArea.tsx b/public/components/JSONDiffEditor/JSONTextArea.tsx
index 9158885f5..9f0d487cb 100644
--- a/public/components/JSONDiffEditor/JSONTextArea.tsx
+++ b/public/components/JSONDiffEditor/JSONTextArea.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { forwardRef, useState, useEffect, useImperativeHandle, useRef } from "react";
-import { EuiFormRow } from "@elastic/eui";
+import { EuiCompressedFormRow } from "@elastic/eui";
 import type { MonacoDiffEditorProps } from "react-monaco-editor";
 import { IJSONEditorRef } from "../JSONEditor";
 import CustomFormRow from "../CustomFormRow";
@@ -74,13 +74,13 @@ const JSONDiffEditor = forwardRef(({ value, onChange, ...others }: JSONDiffEdito
         </div>
       </div>
       {confirmModalVisible && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           fullWidth
           isInvalid={confirmModalVisible}
           error="Your input does not match the validation of json format, please fix the error line with error aside."
         >
           <></>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
     </div>
   );
diff --git a/public/components/JSONEditor/JSONEditor.tsx b/public/components/JSONEditor/JSONEditor.tsx
index 2599c3918..4b91065cf 100644
--- a/public/components/JSONEditor/JSONEditor.tsx
+++ b/public/components/JSONEditor/JSONEditor.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useState, useEffect, forwardRef, useImperativeHandle, useRef } from "react";
-import { EuiCodeEditor, EuiCodeEditorProps, EuiFormRow } from "@elastic/eui";
+import { EuiCodeEditor, EuiCodeEditorProps, EuiCompressedFormRow } from "@elastic/eui";
 
 export interface JSONEditorProps extends Partial<EuiCodeEditorProps> {
   disabled?: boolean;
@@ -75,13 +75,13 @@ const JSONEditor = forwardRef(({ value, onChange, disabled, ...others }: JSONEdi
         }}
       />
       {confirmModalVisible && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           fullWidth
           isInvalid={confirmModalVisible}
           error="Your input does not match the validation of json format, please fix the error line with error aside."
         >
           <></>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
     </>
   );
diff --git a/public/components/JSONModal/JSONModal.tsx b/public/components/JSONModal/JSONModal.tsx
index 5013e89e1..647aa58f9 100644
--- a/public/components/JSONModal/JSONModal.tsx
+++ b/public/components/JSONModal/JSONModal.tsx
@@ -12,7 +12,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiCodeBlock,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
 } from "@elastic/eui";
 
 interface JSONModalProps {
@@ -36,9 +36,9 @@ const JSONModal: React.SFC<JSONModalProps> = ({ title, json, onClose }) => {
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={onClose} data-test-subj="jsonModalCloseButton">
+          <EuiSmallButtonEmpty onClick={onClose} data-test-subj="jsonModalCloseButton">
             Close
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/components/JSONModal/__snapshots__/JSONModal.test.tsx.snap b/public/components/JSONModal/__snapshots__/JSONModal.test.tsx.snap
index 5d7eee9dc..b3664e449 100644
--- a/public/components/JSONModal/__snapshots__/JSONModal.test.tsx.snap
+++ b/public/components/JSONModal/__snapshots__/JSONModal.test.tsx.snap
@@ -258,7 +258,7 @@ exports[`<JSONModal /> spec renders the component 1`] = `
           class="euiModalFooter"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
             data-test-subj="jsonModalCloseButton"
             type="button"
           >
diff --git a/public/components/LegacyNotification/LegacyNotification.tsx b/public/components/LegacyNotification/LegacyNotification.tsx
index 9b9009a03..a7991b50a 100644
--- a/public/components/LegacyNotification/LegacyNotification.tsx
+++ b/public/components/LegacyNotification/LegacyNotification.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiFormRow, EuiCallOut, EuiButton, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCallOut, EuiSmallButton, EuiSpacer } from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { DarkModeConsumer } from "../../components/DarkMode";
@@ -25,10 +25,10 @@ const LegacyNotification = ({ value, onChange, onSwitchToChannels }: LegacyNotif
           Using Channel ID will give you more control to manage notifications across OpenSearch dashboards. If you do decide to switch, you
           will lose your current error notification settings.
         </p>
-        <EuiButton onClick={onSwitchToChannels}>Switch to using Channel ID</EuiButton>
+        <EuiSmallButton onClick={onSwitchToChannels}>Switch to using Channel ID</EuiSmallButton>
       </EuiCallOut>
       <EuiSpacer size="m" />
-      <EuiFormRow fullWidth style={{ maxWidth: "100%" }}>
+      <EuiCompressedFormRow fullWidth style={{ maxWidth: "100%" }}>
         <DarkModeConsumer>
           {(isDarkMode) => (
             <JSONEditor
@@ -42,7 +42,7 @@ const LegacyNotification = ({ value, onChange, onSwitchToChannels }: LegacyNotif
             />
           )}
         </DarkModeConsumer>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 };
diff --git a/public/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap b/public/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap
index 32526bb61..bdb6da4cd 100644
--- a/public/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap
+++ b/public/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<LegacyNotification /> spec renders the component 1`] = `
         Using Channel ID will give you more control to manage notifications across OpenSearch dashboards. If you do decide to switch, you will lose your current error notification settings.
       </p>
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         type="button"
       >
         <span
diff --git a/public/components/Modal/Modal.tsx b/public/components/Modal/Modal.tsx
index 462a0dded..04ba477af 100644
--- a/public/components/Modal/Modal.tsx
+++ b/public/components/Modal/Modal.tsx
@@ -7,13 +7,13 @@ import {
   EuiModal,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiButton,
+  EuiSmallButton,
   EuiModalBody,
   EuiModalFooter,
   EuiModalProps,
   EuiModalBodyProps,
   EuiButtonProps,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
 } from "@elastic/eui";
 import React, { Component, createContext, useEffect, useState } from "react";
 import { render } from "react-dom";
@@ -72,7 +72,7 @@ interface IShowOptions extends Pick<EuiModalProps, "style" | "maxWidth" | "class
   footer?: footerEnum[];
   bodyProps?: EuiModalBodyProps;
   confirmButtonProps?: EuiButtonProps;
-  CancelButtonComponent?: typeof EuiButton | typeof EuiButtonEmpty;
+  CancelButtonComponent?: typeof EuiSmallButton | typeof EuiSmallButtonEmpty;
 }
 
 const blank = () => null;
@@ -89,7 +89,7 @@ const SimpleModal = (props: IShowOptions) => {
     visible,
     footer = ["confirm", "cancel"],
     confirmButtonProps,
-    CancelButtonComponent = EuiButtonEmpty,
+    CancelButtonComponent = EuiSmallButtonEmpty,
     ...others
   } = props;
   const testSubj = props["data-test-subj"] || title || Date.now();
@@ -127,7 +127,7 @@ const SimpleModal = (props: IShowOptions) => {
             {footer.map((item) => {
               if (item === "confirm") {
                 return (
-                  <EuiButton
+                  <EuiSmallButton
                     key={item}
                     fill
                     color="primary"
@@ -143,7 +143,7 @@ const SimpleModal = (props: IShowOptions) => {
                     {...confirmButtonProps}
                   >
                     {finalLocale.confirm}
-                  </EuiButton>
+                  </EuiSmallButton>
                 );
               } else if (item === "cancel") {
                 return (
@@ -163,7 +163,7 @@ const SimpleModal = (props: IShowOptions) => {
           </>
         ) : (
           <>
-            <EuiButton
+            <EuiSmallButton
               fill
               color="primary"
               data-test-subj={`${testSubj}-ok`}
@@ -177,7 +177,7 @@ const SimpleModal = (props: IShowOptions) => {
               }}
             >
               {finalLocale.ok}
-            </EuiButton>
+            </EuiSmallButton>
           </>
         )}
       </EuiModalFooter>
diff --git a/public/components/MonacoJSONEditor/MonacoJSONEditor.tsx b/public/components/MonacoJSONEditor/MonacoJSONEditor.tsx
index 43901c52c..a256433e2 100644
--- a/public/components/MonacoJSONEditor/MonacoJSONEditor.tsx
+++ b/public/components/MonacoJSONEditor/MonacoJSONEditor.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { forwardRef, useState, useEffect, useRef, useImperativeHandle, useCallback } from "react";
-import { EuiFormRow } from "@elastic/eui";
+import { EuiCompressedFormRow } from "@elastic/eui";
 import MonacoEditor from "react-monaco-editor";
 import { monaco } from "@osd/monaco";
 import { IJSONEditorRef } from "../JSONEditor";
@@ -131,13 +131,13 @@ const MonacoJSONEditor = forwardRef(
           />
         </div>
         {confirmModalVisible && (
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth
             isInvalid={confirmModalVisible}
             error="Your input does not match the validation of json format, please fix the error line with error aside."
           >
             <></>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         )}
       </>
     );
diff --git a/public/components/PolicyModal/PolicyModal.tsx b/public/components/PolicyModal/PolicyModal.tsx
index 5d1798c72..48523d9cd 100644
--- a/public/components/PolicyModal/PolicyModal.tsx
+++ b/public/components/PolicyModal/PolicyModal.tsx
@@ -5,7 +5,7 @@
 
 import React from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -13,7 +13,7 @@ import {
   EuiModalHeaderTitle,
   EuiOverlayMask,
   EuiCodeBlock,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   // @ts-ignore
   EuiCopy,
   EuiFlexGroup,
@@ -50,26 +50,26 @@ const PolicyModal: React.SFC<PolicyModalProps> = ({ policyId, policy, errorMessa
             <EuiFlexItem grow={false} style={{ marginRight: "auto" }}>
               <EuiCopy textToCopy={policyString}>
                 {(copy: () => void) => (
-                  <EuiButtonEmpty iconType="copyClipboard" onClick={copy} disabled={!policy} data-test-subj="policyModalCopyButton">
+                  <EuiSmallButtonEmpty iconType="copyClipboard" onClick={copy} disabled={!policy} data-test-subj="policyModalCopyButton">
                     Copy
-                  </EuiButtonEmpty>
+                  </EuiSmallButtonEmpty>
                 )}
               </EuiCopy>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={onClose} data-test-subj="policyModalCloseButton">
+              <EuiSmallButtonEmpty onClick={onClose} data-test-subj="policyModalCloseButton">
                 Close
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={() => onEdit(false)} fill disabled={!policyId || !policy} data-test-subj="policyModalEditJsonButton">
+              <EuiSmallButton onClick={() => onEdit(false)} fill disabled={!policyId || !policy} data-test-subj="policyModalEditJsonButton">
                 Edit as JSON
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={() => onEdit(true)} fill disabled={!policyId || !policy} data-test-subj="policyModalEditButton">
+              <EuiSmallButton onClick={() => onEdit(true)} fill disabled={!policyId || !policy} data-test-subj="policyModalEditButton">
                 Edit
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiModalFooter>
diff --git a/public/components/PolicyModal/__snapshots__/PolicyModal.test.tsx.snap b/public/components/PolicyModal/__snapshots__/PolicyModal.test.tsx.snap
index 56ecf11b2..c18d7500b 100644
--- a/public/components/PolicyModal/__snapshots__/PolicyModal.test.tsx.snap
+++ b/public/components/PolicyModal/__snapshots__/PolicyModal.test.tsx.snap
@@ -153,7 +153,7 @@ exports[`<PolicyModal /> spec renders the component 1`] = `
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--primary"
+                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
                   data-test-subj="policyModalCopyButton"
                   type="button"
                 >
@@ -174,7 +174,7 @@ exports[`<PolicyModal /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--primary"
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
                 data-test-subj="policyModalCloseButton"
                 type="button"
               >
@@ -193,7 +193,7 @@ exports[`<PolicyModal /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="policyModalEditJsonButton"
                 type="button"
               >
@@ -212,7 +212,7 @@ exports[`<PolicyModal /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="policyModalEditButton"
                 type="button"
               >
diff --git a/public/components/RemoteSelect/__snapshots__/RemoteSelect.test.tsx.snap b/public/components/RemoteSelect/__snapshots__/RemoteSelect.test.tsx.snap
index 0f7fb023b..a32ae0349 100644
--- a/public/components/RemoteSelect/__snapshots__/RemoteSelect.test.tsx.snap
+++ b/public/components/RemoteSelect/__snapshots__/RemoteSelect.test.tsx.snap
@@ -4,17 +4,17 @@ exports[`<AliasSelect /> spec renders the component 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="euiComboBox"
+  class="euiComboBox euiComboBox--compressed"
   role="combobox"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayout--compressed"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
         tabindex="-1"
       >
@@ -58,17 +58,17 @@ exports[`<AliasSelect /> spec renders with error 1`] = `
 <div
   aria-expanded="false"
   aria-haspopup="listbox"
-  class="euiComboBox"
+  class="euiComboBox euiComboBox--compressed"
   role="combobox"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiFormControlLayout euiFormControlLayout--compressed"
   >
     <div
       class="euiFormControlLayout__childrenWrapper"
     >
       <div
-        class="euiComboBox__inputWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
         data-test-subj="comboBoxInput"
         tabindex="-1"
       >
diff --git a/public/components/RemoteSelect/index.tsx b/public/components/RemoteSelect/index.tsx
index 55c18369b..e12f74eab 100644
--- a/public/components/RemoteSelect/index.tsx
+++ b/public/components/RemoteSelect/index.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useCallback, useRef, useState, forwardRef } from "react";
-import { EuiComboBox, EuiComboBoxProps } from "@elastic/eui";
+import { EuiCompressedComboBox, EuiComboBoxProps } from "@elastic/eui";
 import { useEffect } from "react";
 import { debounce } from "lodash";
 import { ServerResponse } from "../../../server/models/types";
@@ -75,7 +75,7 @@ const RemoteSelect = forwardRef((props: RemoteSelectProps, ref: React.Ref<HTMLIn
     }
   };
   return (
-    <EuiComboBox
+    <EuiCompressedComboBox
       onCreateOption={onCreateOption}
       {...others}
       inputRef={ref as (instance: HTMLInputElement | null) => void}
diff --git a/public/components/SwitchableEditor/SwitchableEditor.tsx b/public/components/SwitchableEditor/SwitchableEditor.tsx
index 153dc2c95..1e523cd93 100644
--- a/public/components/SwitchableEditor/SwitchableEditor.tsx
+++ b/public/components/SwitchableEditor/SwitchableEditor.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSpacer, EuiSwitch } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedSwitch } from "@elastic/eui";
 import React, { forwardRef, useRef, useState, useImperativeHandle } from "react";
 import JSONEditor, { IJSONEditorRef } from "../JSONEditor";
 import MonacoJSONEditor, { MonacoJSONEditorProps } from "../MonacoJSONEditor";
@@ -30,7 +30,7 @@ const SwitchableEditor = forwardRef(
         {mode === "diff" ? (
           <>
             <EuiSpacer />
-            <EuiSwitch
+            <EuiCompressedSwitch
               label="Compare previously saved settings"
               checked={checked}
               onChange={async (e) => {
diff --git a/public/components/SwitchableEditor/__snapshots__/SwitchableEditor.test.tsx.snap b/public/components/SwitchableEditor/__snapshots__/SwitchableEditor.test.tsx.snap
index 903629b2d..04ef88f5f 100644
--- a/public/components/SwitchableEditor/__snapshots__/SwitchableEditor.test.tsx.snap
+++ b/public/components/SwitchableEditor/__snapshots__/SwitchableEditor.test.tsx.snap
@@ -7,7 +7,7 @@ HTMLCollection [
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiSwitch euiSwitch--primary"
+      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
     >
       <button
         aria-checked="false"
@@ -25,10 +25,7 @@ HTMLCollection [
           />
           <span
             class="euiSwitch__track"
-          >
-            EuiIconMock
-            EuiIconMock
-          </span>
+          />
         </span>
       </button>
       <span
@@ -169,7 +166,7 @@ HTMLCollection [
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiSwitch euiSwitch--primary"
+      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
     >
       <button
         aria-checked="true"
@@ -187,10 +184,7 @@ HTMLCollection [
           />
           <span
             class="euiSwitch__track"
-          >
-            EuiIconMock
-            EuiIconMock
-          </span>
+          />
         </span>
       </button>
       <span
@@ -218,7 +212,7 @@ HTMLCollection [
           style="flex-grow: 1;"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
@@ -247,7 +241,7 @@ HTMLCollection [
           style="flex-grow: 1;"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
diff --git a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx
index d08805159..52ef06dc4 100644
--- a/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx
+++ b/public/components/UnsavedChangesBottomBar/UnsavedChangesBottomBar.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useCallback, useEffect, useRef, useState } from "react";
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiButtonProps, EuiButtonEmptyProps } from "@elastic/eui";
+import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty, EuiButtonProps, EuiButtonEmptyProps } from "@elastic/eui";
 import classNames from "classnames";
 import BottomBar from "../BottomBar";
 import "./index.scss";
@@ -50,7 +50,7 @@ export default function UnsavedChangesBottomBar(props: CustomFormRowProps) {
   const renderCancel = useCallback(
     () => (
       <EuiFlexItem grow={false}>
-        <EuiButtonEmpty onClick={onClickCancel} color="ghost" iconType="cross" children="Cancel" {...props.cancelButtonprops} />
+        <EuiSmallButtonEmpty onClick={onClickCancel} color="ghost" iconType="cross" children="Cancel" {...props.cancelButtonprops} />
       </EuiFlexItem>
     ),
     [onClickCancel]
diff --git a/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap b/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap
index f24bafde0..cf8474e50 100644
--- a/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap
+++ b/public/components/UnsavedChangesBottomBar/__snapshots__/UnsavedChangesBottomBar.test.tsx.snap
@@ -20,7 +20,7 @@ HTMLCollection [
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--ghost"
+            class="euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small"
             type="button"
           >
             <span
diff --git a/public/containers/ChannelSelect/__snapshots__/ChannelSelect.test.tsx.snap b/public/containers/ChannelSelect/__snapshots__/ChannelSelect.test.tsx.snap
index 36cb3ba8d..7c11786c6 100644
--- a/public/containers/ChannelSelect/__snapshots__/ChannelSelect.test.tsx.snap
+++ b/public/containers/ChannelSelect/__snapshots__/ChannelSelect.test.tsx.snap
@@ -16,17 +16,17 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox channelSelect-combobox"
+          class="euiComboBox channelSelect-combobox euiComboBox--compressed"
           role="combobox"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
@@ -83,17 +83,17 @@ exports[`<ChannelNotification /> spec renders the component 1`] = `
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox channelSelect-combobox"
+          class="euiComboBox channelSelect-combobox euiComboBox--compressed"
           role="combobox"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
diff --git a/public/containers/ClearCacheModal/ClearCacheModal.tsx b/public/containers/ClearCacheModal/ClearCacheModal.tsx
index 6597c0d52..39d6a797b 100644
--- a/public/containers/ClearCacheModal/ClearCacheModal.tsx
+++ b/public/containers/ClearCacheModal/ClearCacheModal.tsx
@@ -12,8 +12,8 @@ import { CoreServicesContext } from "../../components/core_services";
 import { INDEX_OP_BLOCKS_TYPE, INDEX_OP_TARGET_TYPE } from "../../utils/constants";
 import { getErrorMessage, filterBlockedItems } from "../../utils/helpers";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiModal,
   EuiModalBody,
@@ -215,17 +215,17 @@ export default function ClearCacheModal(props: ClearCacheModalProps) {
       <EuiModalBody>{!!selectedItems && selectedItems.length > 0 ? specificIndexesChildren : noSpecificIndexesChildren}</EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty data-test-subj="ClearCacheCancelButton" onClick={onClose}>
+        <EuiSmallButtonEmpty data-test-subj="ClearCacheCancelButton" onClick={onClose}>
           Cancel
-        </EuiButtonEmpty>
-        <EuiButton
+        </EuiSmallButtonEmpty>
+        <EuiSmallButton
           data-test-subj="ClearCacheConfirmButton"
           onClick={onConfirm}
           fill
           isDisabled={selectedItems.length > 0 && unBlockedItems.length == 0}
         >
           Clear cache
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap b/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap
index d1ea64585..a6e05da19 100644
--- a/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap
+++ b/public/containers/ClearCacheModal/__snapshots__/ClearCacheModal.test.tsx.snap
@@ -65,7 +65,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="ClearCacheCancelButton"
               type="button"
             >
@@ -80,7 +80,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="ClearCacheConfirmButton"
               type="button"
             >
diff --git a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
index c7c4d12f9..f1ccbd6fa 100644
--- a/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
+++ b/public/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
       style="padding: 10px 0px 0px 10px;"
     >
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -107,13 +107,13 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
               class="euiFlexItem"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <select
-                    class="euiSelect"
+                    class="euiSelect euiSelect--compressed"
                     data-test-subj="create-policy-notification-channel-id"
                     id="channel-id"
                     placeholder="Select channel ID"
@@ -143,7 +143,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary refresh-button"
+                class="euiButton euiButton--primary euiButton--small refresh-button"
                 data-test-subj="channel-notification-refresh"
                 type="button"
               >
@@ -161,7 +161,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <a
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 href="notifications-dashboards#/channels"
                 rel="noopener noreferrer"
                 target="_blank"
@@ -185,7 +185,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--m"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
         title="Notification message"
       >
diff --git a/public/containers/FlushIndexModal/FlushIndexModal.tsx b/public/containers/FlushIndexModal/FlushIndexModal.tsx
index 19237677b..ff1a278fb 100644
--- a/public/containers/FlushIndexModal/FlushIndexModal.tsx
+++ b/public/containers/FlushIndexModal/FlushIndexModal.tsx
@@ -5,8 +5,8 @@
 
 import React, { useCallback, useContext, useState, useEffect } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiModal,
   EuiModalBody,
@@ -188,12 +188,12 @@ export default function FlushIndexModal(props: FlushIndexModalProps) {
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty data-test-subj="flushCancelButton" onClick={onClose}>
+        <EuiSmallButtonEmpty data-test-subj="flushCancelButton" onClick={onClose}>
           Cancel
-        </EuiButtonEmpty>
-        <EuiButton data-test-subj="flushConfirmButton" onClick={onFlushConfirm} fill>
+        </EuiSmallButtonEmpty>
+        <EuiSmallButton data-test-subj="flushConfirmButton" onClick={onFlushConfirm} fill>
           Flush
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap b/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap
index c49bbde0d..bb47eb31f 100644
--- a/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap
+++ b/public/containers/FlushIndexModal/__snapshots__/FlushIndexModal.test.tsx.snap
@@ -102,7 +102,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -117,7 +117,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
@@ -248,7 +248,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -263,7 +263,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
@@ -397,7 +397,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -412,7 +412,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
@@ -530,7 +530,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -545,7 +545,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
@@ -673,7 +673,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -688,7 +688,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
diff --git a/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap b/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap
index 2ca549f5a..2caffbb4c 100644
--- a/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap
+++ b/public/containers/IndexForm/__snapshots__/IndexForm.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`<IndexForm /> spec render page 1`] = `
         class="euiForm"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           data-test-subj="form-name-index"
           id="some_html_id-row"
         >
@@ -58,13 +58,13 @@ exports[`<IndexForm /> spec render page 1`] = `
               class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
-                    class="euiFieldText"
+                    class="euiFieldText euiFieldText--compressed"
                     placeholder="Specify a name for the new index."
                     type="text"
                     value=""
@@ -83,7 +83,7 @@ exports[`<IndexForm /> spec render page 1`] = `
           </div>
         </div>
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           data-test-subj="form-name-templateMessage"
           id="some_html_id-row"
         >
@@ -92,7 +92,7 @@ exports[`<IndexForm /> spec render page 1`] = `
           />
         </div>
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           data-test-subj="form-name-aliases"
           id="some_html_id-row"
         >
@@ -125,17 +125,17 @@ exports[`<IndexForm /> spec render page 1`] = `
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                class="euiComboBox"
+                class="euiComboBox euiComboBox--compressed"
                 role="combobox"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <div
-                      class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                      class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                       data-test-subj="comboBoxInput"
                       tabindex="-1"
                     >
@@ -218,7 +218,7 @@ exports[`<IndexForm /> spec render page 1`] = `
         class="euiForm"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           data-test-subj="form-name-index.number_of_shards"
           id="some_html_id-row"
         >
@@ -251,13 +251,13 @@ exports[`<IndexForm /> spec render page 1`] = `
               class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
-                    class="euiFieldNumber"
+                    class="euiFieldNumber euiFieldNumber--compressed"
                     placeholder="Specify primary shard count."
                     type="number"
                     value=""
@@ -268,7 +268,7 @@ exports[`<IndexForm /> spec render page 1`] = `
           </div>
         </div>
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           data-test-subj="form-name-index.number_of_replicas"
           id="some_html_id-row"
         >
@@ -296,13 +296,13 @@ exports[`<IndexForm /> spec render page 1`] = `
               class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
-                    class="euiFieldNumber"
+                    class="euiFieldNumber euiFieldNumber--compressed"
                     placeholder="Specify number of replicas."
                     type="number"
                     value=""
@@ -313,7 +313,7 @@ exports[`<IndexForm /> spec render page 1`] = `
           </div>
         </div>
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           data-test-subj="form-name-index.refresh_interval"
           id="some_html_id-row"
         >
@@ -341,13 +341,13 @@ exports[`<IndexForm /> spec render page 1`] = `
               class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <input
-                    class="euiFieldText"
+                    class="euiFieldText euiFieldText--compressed"
                     placeholder="Can be set to -1 to disable refreshing."
                     type="text"
                     value=""
@@ -403,7 +403,7 @@ exports[`<IndexForm /> spec render page 1`] = `
                   class="euiSpacer euiSpacer--s"
                 />
                 <div
-                  class="euiFormRow euiFormRow--fullWidth"
+                  class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                   data-test-subj="formNameAdvancedSettings"
                   id="some_html_id-row"
                 >
@@ -612,7 +612,7 @@ exports[`<IndexForm /> spec render page 1`] = `
           </i>
         </div>
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -655,7 +655,7 @@ exports[`<IndexForm /> spec render page 1`] = `
       style="padding: 0px 10px;"
     >
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -735,7 +735,7 @@ exports[`<IndexForm /> spec render page 1`] = `
             class="euiSpacer euiSpacer--l"
           />
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="createIndexAddFieldButton"
             style="margin-right: 8px;"
             type="button"
@@ -751,7 +751,7 @@ exports[`<IndexForm /> spec render page 1`] = `
             </span>
           </button>
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="createIndexAddObjectFieldButton"
             type="button"
           >
diff --git a/public/containers/NotificationConfig/NotificationConfig.tsx b/public/containers/NotificationConfig/NotificationConfig.tsx
index c2ebea8b4..1649ecd8e 100644
--- a/public/containers/NotificationConfig/NotificationConfig.tsx
+++ b/public/containers/NotificationConfig/NotificationConfig.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useRef, forwardRef, useMemo, useImperativeHandle, useContext, useEffect, useState } from "react";
-import { EuiBadge, EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from "@elastic/eui";
+import { EuiBadge, EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from "@elastic/eui";
 import ChannelSelect, { useChannels } from "../ChannelSelect";
 import { AllBuiltInComponents } from "../../components/FormGenerator";
 import {
@@ -224,9 +224,9 @@ const NotificationConfig = (
                     />
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton onClick={() => window.open("/app/notifications-dashboards#/channels")} iconType="popout">
+                    <EuiSmallButton onClick={() => window.open("/app/notifications-dashboards#/channels")} iconType="popout">
                       Manage channels
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </CustomFormRow>
diff --git a/public/containers/NotificationConfig/__snapshots__/NotificationConfig.test.tsx.snap b/public/containers/NotificationConfig/__snapshots__/NotificationConfig.test.tsx.snap
index 20530817d..d891a0675 100644
--- a/public/containers/NotificationConfig/__snapshots__/NotificationConfig.test.tsx.snap
+++ b/public/containers/NotificationConfig/__snapshots__/NotificationConfig.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<ChannelNotification /> spec renders with create permission and no defa
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="some_html_id-row"
     >
       <div
@@ -55,7 +55,7 @@ exports[`<ChannelNotification /> spec renders with create permission and no defa
           class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               class="euiCheckbox__input"
@@ -81,7 +81,7 @@ exports[`<ChannelNotification /> spec renders with create permission and no defa
           class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               class="euiCheckbox__input"
@@ -162,7 +162,7 @@ exports[`<ChannelNotification /> spec renders with full permission and default n
         class="euiFlexItem"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -195,7 +195,7 @@ exports[`<ChannelNotification /> spec renders with full permission and default n
         class="euiFlexItem"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -243,7 +243,7 @@ exports[`<ChannelNotification /> spec renders with full permission and default n
       class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
     >
       <div
-        class="euiCheckbox"
+        class="euiCheckbox euiCheckbox--compressed"
       >
         <input
           class="euiCheckbox__input"
@@ -316,7 +316,7 @@ exports[`<ChannelNotification /> spec renders with full permission and no defaul
       class="euiSpacer euiSpacer--l"
     />
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="some_html_id-row"
     >
       <div
@@ -336,7 +336,7 @@ exports[`<ChannelNotification /> spec renders with full permission and no defaul
           class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               class="euiCheckbox__input"
@@ -362,7 +362,7 @@ exports[`<ChannelNotification /> spec renders with full permission and no defaul
           class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
         >
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               class="euiCheckbox__input"
@@ -442,7 +442,7 @@ exports[`<ChannelNotification /> spec renders with view permission and default n
         class="euiFlexItem"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -475,7 +475,7 @@ exports[`<ChannelNotification /> spec renders with view permission and default n
         class="euiFlexItem"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
diff --git a/public/containers/RefreshAction/index.tsx b/public/containers/RefreshAction/index.tsx
index b1768b778..f35457aa3 100644
--- a/public/containers/RefreshAction/index.tsx
+++ b/public/containers/RefreshAction/index.tsx
@@ -5,8 +5,8 @@
 
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiModal,
   EuiModalBody,
@@ -208,10 +208,10 @@ export default function RefreshActionModal<T>(props: RefreshActionModalProps) {
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
-        <EuiButton data-test-subj="refreshConfirmButton" onClick={onConfirm} fill>
+        <EuiSmallButtonEmpty onClick={onClose}>Cancel</EuiSmallButtonEmpty>
+        <EuiSmallButton data-test-subj="refreshConfirmButton" onClick={onConfirm} fill>
           Refresh
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/pages/Aliases/components/IndexControls/IndexControls.tsx b/public/pages/Aliases/components/IndexControls/IndexControls.tsx
index f5865c74c..a4fdf908a 100644
--- a/public/pages/Aliases/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Aliases/components/IndexControls/IndexControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { EuiComboBox, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiCompressedComboBox, EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { ALIAS_STATUS_OPTIONS, IndicesUpdateMode } from "../../../../utils/constants";
 import { getUISettings } from "../../../../services/Services";
 import AliasesActions from "../../containers/AliasActions";
@@ -44,8 +44,7 @@ export default function SearchControls(props: SearchControlsProps) {
   return useUpdatedUX ? (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch
-          compressed
+        <EuiCompressedFieldSearch
           fullWidth
           placeholder="Search"
           value={state.search}
@@ -75,10 +74,15 @@ export default function SearchControls(props: SearchControlsProps) {
   ) : (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />
+        <EuiCompressedFieldSearch
+          fullWidth
+          placeholder="Search..."
+          value={state.search}
+          onChange={(e) => onChange("search", e.target.value)}
+        />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiComboBox
+        <EuiCompressedComboBox
           style={{
             width: 300,
           }}
diff --git a/public/pages/Aliases/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/Aliases/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
index e2b013133..18166dae0 100644
--- a/public/pages/Aliases/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
+++ b/public/pages/Aliases/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`<IndexControls /> spec renders the component 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
           placeholder="Search..."
           type="search"
           value="testing"
@@ -34,7 +34,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
         >
           <button
             aria-label="Clear input"
-            class="euiFormControlLayoutClearButton"
+            class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
             type="button"
           >
             EuiIconMock
@@ -49,18 +49,18 @@ exports[`<IndexControls /> spec renders the component 1`] = `
     <div
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="euiComboBox"
+      class="euiComboBox euiComboBox--compressed"
       role="combobox"
       style="width: 300px;"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
             data-test-subj="comboBoxInput"
             tabindex="-1"
           >
@@ -107,7 +107,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
           >
             <button
               aria-label="Clear input"
-              class="euiFormControlLayoutClearButton"
+              class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
               data-test-subj="comboBoxClearButton"
               type="button"
             >
diff --git a/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap b/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap
index 0db264c08..d2fc9928c 100644
--- a/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap
+++ b/public/pages/Aliases/containers/AliasActions/__snapshots__/AliasActions.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<AliasesActions /> spec cannot clear cache for aliases if some indexes
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -36,7 +36,7 @@ exports[`<AliasesActions /> spec clear cache for aliases by calling commonServic
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -63,7 +63,7 @@ exports[`<AliasesActions /> spec delete alias by calling commonService 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -90,7 +90,7 @@ exports[`<AliasesActions /> spec filter aliases failed when clearing caches for
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -124,7 +124,7 @@ exports[`<AliasesActions /> spec refresh alias by calling commonService 1`] = `
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -242,7 +242,7 @@ exports[`<AliasesActions /> spec refresh alias by calling commonService 1`] = `
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               type="button"
             >
               <span
@@ -256,7 +256,7 @@ exports[`<AliasesActions /> spec refresh alias by calling commonService 1`] = `
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="refreshConfirmButton"
               type="button"
             >
@@ -301,7 +301,7 @@ exports[`<AliasesActions /> spec refresh multi alias even failed to get index st
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -392,7 +392,7 @@ exports[`<AliasesActions /> spec refresh multi alias even failed to get index st
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               type="button"
             >
               <span
@@ -406,7 +406,7 @@ exports[`<AliasesActions /> spec refresh multi alias even failed to get index st
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="refreshConfirmButton"
               type="button"
             >
@@ -449,7 +449,7 @@ HTMLCollection [
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -562,7 +562,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -577,7 +577,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
@@ -615,7 +615,7 @@ exports[`<AliasesActions /> spec renders the component and all the actions shoul
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
diff --git a/public/pages/Aliases/containers/AliasActions/index.tsx b/public/pages/Aliases/containers/AliasActions/index.tsx
index 8aece3cd4..c1c5f395f 100644
--- a/public/pages/Aliases/containers/AliasActions/index.tsx
+++ b/public/pages/Aliases/containers/AliasActions/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useMemo, useState } from "react";
-import { EuiButton, EuiContextMenu } from "@elastic/eui";
+import { EuiSmallButton, EuiContextMenu } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import SimplePopover from "../../../../components/SimplePopover";
 import DeleteIndexModal from "../DeleteAliasModal";
@@ -56,9 +56,9 @@ export default function AliasesActions(props: AliasesActionsProps) {
         data-test-subj="moreAction"
         panelPaddingSize="none"
         button={
-          <EuiButton iconType="arrowDown" iconSide="right" size={size}>
+          <EuiSmallButton iconType="arrowDown" iconSide="right">
             Actions
-          </EuiButton>
+          </EuiSmallButton>
         }
       >
         <EuiContextMenu
diff --git a/public/pages/Aliases/containers/Aliases/Aliases.tsx b/public/pages/Aliases/containers/Aliases/Aliases.tsx
index 6adbbb8e0..133a4abbb 100644
--- a/public/pages/Aliases/containers/Aliases/Aliases.tsx
+++ b/public/pages/Aliases/containers/Aliases/Aliases.tsx
@@ -21,9 +21,9 @@ import {
   EuiText,
   EuiLink,
   EuiTitle,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiEmptyPrompt,
-  EuiButton,
+  EuiSmallButton,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS } from "../../utils/constants";
@@ -307,7 +307,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
     const description = [
       {
         renderComponent: (
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth
             helpText={
               <div style={{ width: "51%" }}>
@@ -320,13 +320,11 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
             }
           >
             <></>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         ),
       },
     ];
 
-    const Buttonsize = this.state.useUpdatedUX ? "s" : undefined;
-
     const commonRender = () => {
       return (
         <>
@@ -395,8 +393,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
-                      size={Buttonsize}
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.setState({
@@ -405,7 +402,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
                       }}
                     >
                       Create alias
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               ) : (
@@ -416,8 +413,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
-                      size={Buttonsize}
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.setState(defaultFilter, () => {
@@ -426,7 +422,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
                       }}
                     >
                       Reset filters
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               )
@@ -535,7 +531,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
             <EuiTitle>
               <span>Aliases</span>
             </EuiTitle>
-            <EuiFormRow
+            <EuiCompressedFormRow
               fullWidth
               helpText={
                 <div style={{ width: "50%" }}>
@@ -548,7 +544,7 @@ class Aliases extends MDSEnabledComponent<AliasesProps, AliasesState> {
               }
             >
               <></>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </>
         }
       >
diff --git a/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap b/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap
index cdb5bf628..caa3632b3 100644
--- a/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap
+++ b/public/pages/Aliases/containers/Aliases/__snapshots__/Aliases.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<Aliases /> spec renders the component 1`] = `
         Aliases
       </span>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -75,7 +75,7 @@ exports[`<Aliases /> spec renders the component 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     type="button"
                   >
                     <span
@@ -96,7 +96,7 @@ exports[`<Aliases /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="Create aliasButton"
                 type="button"
               >
@@ -130,13 +130,13 @@ exports[`<Aliases /> spec renders the component 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=""
@@ -159,18 +159,18 @@ exports[`<Aliases /> spec renders the component 1`] = `
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox"
+          class="euiComboBox euiComboBox--compressed"
           role="combobox"
           style="width: 300px;"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
@@ -421,7 +421,7 @@ exports[`<Aliases /> spec renders the component 1`] = `
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <button
-                            class="euiButton euiButton--primary euiButton--fill"
+                            class="euiButton euiButton--primary euiButton--small euiButton--fill"
                             type="button"
                           >
                             <span
diff --git a/public/pages/Aliases/containers/CreateAlias/__snapshots__/CreateAlias.test.tsx.snap b/public/pages/Aliases/containers/CreateAlias/__snapshots__/CreateAlias.test.tsx.snap
index 8ae51a911..4028a5e0e 100644
--- a/public/pages/Aliases/containers/CreateAlias/__snapshots__/CreateAlias.test.tsx.snap
+++ b/public/pages/Aliases/containers/CreateAlias/__snapshots__/CreateAlias.test.tsx.snap
@@ -55,7 +55,7 @@ HTMLCollection [
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="form-name-alias"
                   id="some_html_id-row"
                 >
@@ -77,13 +77,13 @@ HTMLCollection [
                       class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                     >
                       <div
-                        class="euiFormControlLayout"
+                        class="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
                           class="euiFormControlLayout__childrenWrapper"
                         >
                           <input
-                            class="euiFieldText"
+                            class="euiFieldText euiFieldText--compressed"
                             placeholder="Specify alias name"
                             type="text"
                             value=""
@@ -100,7 +100,7 @@ HTMLCollection [
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="form-name-indexArray"
                   id="some_html_id-row"
                 >
@@ -127,17 +127,17 @@ HTMLCollection [
                     <div
                       aria-expanded="false"
                       aria-haspopup="listbox"
-                      class="euiComboBox"
+                      class="euiComboBox euiComboBox--compressed"
                       role="combobox"
                     >
                       <div
-                        class="euiFormControlLayout"
+                        class="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
                           class="euiFormControlLayout__childrenWrapper"
                         >
                           <div
-                            class="euiComboBox__inputWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                             data-test-subj="comboBoxInput"
                             tabindex="-1"
                           >
@@ -193,7 +193,7 @@ HTMLCollection [
           >
             <div>
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateAliasButton"
                 style="margin-right: 20px;"
                 type="button"
@@ -209,7 +209,7 @@ HTMLCollection [
                 </span>
               </button>
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="createAliasButton"
                 type="button"
               >
diff --git a/public/pages/Aliases/containers/CreateAlias/index.tsx b/public/pages/Aliases/containers/CreateAlias/index.tsx
index 4931c4e9d..23be9245e 100644
--- a/public/pages/Aliases/containers/CreateAlias/index.tsx
+++ b/public/pages/Aliases/containers/CreateAlias/index.tsx
@@ -4,7 +4,7 @@
  */
 import React, { useContext, useEffect, useRef } from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiCallOut,
   EuiModal,
   EuiModalHeader,
@@ -188,10 +188,10 @@ export default function CreateAlias(props: ICreateAliasProps) {
       </EuiModalBody>
       <EuiModalFooter>
         <div>
-          <EuiButton data-test-subj="cancelCreateAliasButton" style={{ marginRight: 20 }} onClick={props.onClose}>
+          <EuiSmallButton data-test-subj="cancelCreateAliasButton" style={{ marginRight: 20 }} onClick={props.onClose}>
             Cancel
-          </EuiButton>
-          <EuiButton
+          </EuiSmallButton>
+          <EuiSmallButton
             fill
             color="primary"
             data-test-subj="createAliasButton"
@@ -241,7 +241,7 @@ export default function CreateAlias(props: ICreateAliasProps) {
             }}
           >
             {isEdit ? "Save changes" : "Create alias"}
-          </EuiButton>
+          </EuiSmallButton>
         </div>
       </EuiModalFooter>
     </EuiModal>
diff --git a/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx b/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx
index 247e5c089..bb1b11c91 100644
--- a/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx
+++ b/public/pages/Aliases/containers/DeleteAliasModal/DeleteAliasModal.tsx
@@ -5,10 +5,10 @@
 
 import React, { useCallback, useContext, useEffect, useState } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -92,7 +92,7 @@ export default function DeleteAliasModal(props: DeleteAliasModalProps) {
           <EuiText color="subdued">
             To confirm your action, type <b style={{ color: "#000" }}>delete</b>.
           </EuiText>
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="deleteInput"
             placeholder="delete"
             fullWidth
@@ -103,10 +103,10 @@ export default function DeleteAliasModal(props: DeleteAliasModalProps) {
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
-        <EuiButton data-test-subj="deleteConfirmButton" onClick={onConfirm} fill color="danger" disabled={value !== "delete"}>
+        <EuiSmallButtonEmpty onClick={onClose}>Cancel</EuiSmallButtonEmpty>
+        <EuiSmallButton data-test-subj="deleteConfirmButton" onClick={onConfirm} fill color="danger" disabled={value !== "delete"}>
           Delete
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/pages/Aliases/containers/DeleteAliasModal/__snapshots__/DeleteAliasModal.test.tsx.snap b/public/pages/Aliases/containers/DeleteAliasModal/__snapshots__/DeleteAliasModal.test.tsx.snap
index 9aa8f94ee..b49c26501 100644
--- a/public/pages/Aliases/containers/DeleteAliasModal/__snapshots__/DeleteAliasModal.test.tsx.snap
+++ b/public/pages/Aliases/containers/DeleteAliasModal/__snapshots__/DeleteAliasModal.test.tsx.snap
@@ -76,13 +76,13 @@ HTMLCollection [
                   </div>
                 </div>
                 <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"
                       data-test-subj="deleteInput"
                       placeholder="delete"
                       type="text"
@@ -97,7 +97,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               type="button"
             >
               <span
@@ -111,7 +111,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--danger euiButton--fill euiButton-isDisabled"
+              class="euiButton euiButton--danger euiButton--small euiButton--fill euiButton-isDisabled"
               data-test-subj="deleteConfirmButton"
               disabled=""
               type="button"
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
index c4bc4c259..738c761d4 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/ChangeManagedIndices.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiSpacer, EuiComboBox, EuiFormRow } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedComboBox, EuiCompressedFormRow } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { ManagedIndexService } from "../../../../services";
 import { ManagedIndexItem, State } from "../../../../../models/interfaces";
@@ -93,13 +93,13 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
       <ContentPanel bodyStyles={{ padding: "initial" }} title="Choose managed indices" titleSize="s">
         <div style={{ paddingLeft: "10px" }}>
           <EuiSpacer size="m" />
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Managed indices"
             helpText="You can use * as wildcards to form index patterns."
             isInvalid={!!managedIndicesError}
             error={managedIndicesError}
           >
-            <EuiComboBox
+            <EuiCompressedComboBox
               placeholder=""
               async
               options={managedIndices}
@@ -111,10 +111,10 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               onSearchChange={this.onManagedIndexSearchChange}
               compressed={useUpdatedUX ? true : false}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
-          <EuiFormRow label="State filters" helpText="Apply new policy only on managed indices in these states.">
-            <EuiComboBox
+          <EuiCompressedFormRow label="State filters" helpText="Apply new policy only on managed indices in these states.">
+            <EuiCompressedComboBox
               isDisabled={!selectedManagedIndices.length}
               placeholder="Choose state filters"
               options={stateOptions}
@@ -124,7 +124,7 @@ export default class ChangeManagedIndices extends Component<ChangeManagedIndices
               onSearchChange={this.onStateFilterSearchChange}
               compressed={useUpdatedUX ? true : false}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </div>
       </ContentPanel>
     );
diff --git a/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap b/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
index dbce8f4bf..d14c359ac 100644
--- a/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
+++ b/public/pages/ChangePolicy/components/ChangeManagedIndices/__snapshots__/ChangeManagedIndices.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--m"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -114,7 +114,7 @@ exports[`<ChangeManagedIndices /> spec renders the component 1`] = `
         </div>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
diff --git a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
index 9dad0f9f3..74153cf35 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
+++ b/public/pages/ChangePolicy/components/NewPolicy/NewPolicy.tsx
@@ -5,7 +5,16 @@
 
 import React from "react";
 import _ from "lodash";
-import { EuiSpacer, EuiText, EuiRadioGroup, EuiFormRow, EuiSelect, EuiComboBox, EuiLink, EuiIcon } from "@elastic/eui";
+import {
+  EuiSpacer,
+  EuiText,
+  EuiCompressedRadioGroup,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
+  EuiCompressedComboBox,
+  EuiLink,
+  EuiIcon,
+} from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { IndexService } from "../../../../services";
 import { Radio } from "../../containers/ChangePolicy/ChangePolicy";
@@ -102,8 +111,8 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
 
           <EuiSpacer size="s" />
 
-          <EuiFormRow label="New policy" isInvalid={!!selectedPoliciesError} error={selectedPoliciesError}>
-            <EuiComboBox
+          <EuiCompressedFormRow label="New policy" isInvalid={!!selectedPoliciesError} error={selectedPoliciesError}>
+            <EuiCompressedComboBox
               placeholder=""
               async
               options={policies}
@@ -116,16 +125,16 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               onSearchChange={this.onPolicySearchChange}
               compressed={useUpdatedUX ? true : false}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer size="m" />
 
-          <EuiRadioGroup options={radioOptions} idSelected={stateRadioIdSelected} onChange={this.props.onChangeStateRadio} />
+          <EuiCompressedRadioGroup options={radioOptions} idSelected={stateRadioIdSelected} onChange={this.props.onChangeStateRadio} />
 
           <EuiSpacer size="s" />
 
-          <EuiFormRow>
-            <EuiSelect
+          <EuiCompressedFormRow>
+            <EuiCompressedSelect
               disabled={stateRadioIdSelected !== Radio.State}
               options={stateOptions}
               value={stateSelected}
@@ -133,7 +142,7 @@ export default class NewPolicy extends React.Component<NewPolicyProps, NewPolicy
               aria-label="Start state for new policy"
               compressed={useUpdatedUX ? true : false}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </div>
       </ContentPanel>
     );
diff --git a/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap b/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
index 6492f85bd..4c6f47674 100644
--- a/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/components/NewPolicy/__snapshots__/NewPolicy.test.tsx.snap
@@ -60,7 +60,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -133,7 +133,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
       />
       <div>
         <div
-          class="euiRadio euiRadioGroup__item"
+          class="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             checked=""
@@ -153,7 +153,7 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
           </label>
         </div>
         <div
-          class="euiRadio euiRadioGroup__item"
+          class="euiRadio euiRadio--compressed euiRadioGroup__item"
         >
           <input
             class="euiRadio__input"
@@ -177,21 +177,21 @@ exports[`<NewPolicy /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <select
                 aria-label="Start state for new policy"
-                class="euiSelect"
+                class="euiSelect euiSelect--compressed"
                 disabled=""
                 id="some_html_id"
               />
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
index 97ececf11..277ef1d0d 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/ChangePolicy.tsx
@@ -5,7 +5,7 @@
 
 import React, { Component, useContext } from "react";
 import { RouteComponentProps } from "react-router-dom";
-import { EuiSpacer, EuiTitle, EuiButton, EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from "@elastic/eui";
+import { EuiSpacer, EuiTitle, EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty } from "@elastic/eui";
 import { IndexService, ManagedIndexService } from "../../../../services";
 import ChangeManagedIndices from "../../components/ChangeManagedIndices";
 import NewPolicy from "../../components/NewPolicy";
@@ -194,14 +194,14 @@ export class ChangePolicy extends Component<ChangePolicyProps, ChangePolicyState
 
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
+              <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="changePolicyCancelButton">
                 Cancel
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
+              <EuiSmallButton fill onClick={this.onSubmit} data-test-subj="changePolicyChangeButton">
                 Change
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
diff --git a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
index c56bf7822..2c6445bf8 100644
--- a/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
+++ b/public/pages/ChangePolicy/containers/ChangePolicy/__snapshots__/ChangePolicy.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--m"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -125,7 +125,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
           </div>
         </div>
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -271,7 +271,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -344,7 +344,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
         />
         <div>
           <div
-            class="euiRadio euiRadioGroup__item"
+            class="euiRadio euiRadio--compressed euiRadioGroup__item"
           >
             <input
               checked=""
@@ -364,7 +364,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
             </label>
           </div>
           <div
-            class="euiRadio euiRadioGroup__item"
+            class="euiRadio euiRadio--compressed euiRadioGroup__item"
           >
             <input
               class="euiRadio__input"
@@ -388,21 +388,21 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <select
                   aria-label="Start state for new policy"
-                  class="euiSelect"
+                  class="euiSelect euiSelect--compressed"
                   disabled=""
                   id="some_html_id"
                 />
@@ -432,7 +432,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="changePolicyCancelButton"
         type="button"
       >
@@ -451,7 +451,7 @@ exports[`<ChangePolicy /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="changePolicyChangeButton"
         type="button"
       >
diff --git a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx
index 8e1b67d2f..96d0cbb42 100644
--- a/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx
+++ b/public/pages/ComposableTemplates/components/IndexControls/IndexControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { EuiButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import FilterGroup from "../../../../components/FilterGroup";
 import { IndicesUpdateMode } from "../../../../utils/constants";
 
@@ -33,8 +33,7 @@ export default function SearchControls(props: SearchControlsProps) {
   return (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch
-          compressed={props.useNewUX}
+        <EuiCompressedFieldSearch
           fullWidth
           placeholder="Search..."
           value={state.search}
diff --git a/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
index f824985b6..cf0145263 100644
--- a/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
+++ b/public/pages/ComposableTemplates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`<IndexControls /> spec renders the component 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
           placeholder="Search..."
           type="search"
           value="testing"
@@ -34,7 +34,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
         >
           <button
             aria-label="Clear input"
-            class="euiFormControlLayoutClearButton"
+            class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
             type="button"
           >
             EuiIconMock
@@ -57,7 +57,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
           class="euiPopover__anchor"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+            class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
             type="button"
           >
             <span
diff --git a/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/AssociatedTemplatesModal.tsx b/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/AssociatedTemplatesModal.tsx
index a08270975..ceb4117f8 100644
--- a/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/AssociatedTemplatesModal.tsx
+++ b/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/AssociatedTemplatesModal.tsx
@@ -8,8 +8,8 @@ import { CoreStart } from "opensearch-dashboards/public";
 import { ServicesContext } from "../../../../services";
 import { CoreServicesContext } from "../../../../components/core_services";
 import {
-  EuiButtonEmpty,
-  EuiButtonIcon,
+  EuiSmallButtonEmpty,
+  EuiSmallButtonIcon,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
@@ -71,7 +71,7 @@ export default function AssociatedTemplatesModal(props: AssociatedTemplatesModal
                   render: (value: string, record) => {
                     return (
                       <EuiToolTip content="Unlink">
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label={`Unlink from ${record.name}?`}
                           iconType="unlink"
                           onClick={() => {
@@ -91,7 +91,7 @@ export default function AssociatedTemplatesModal(props: AssociatedTemplatesModal
                               confirmButtonProps: {
                                 color: "danger",
                               },
-                              CancelButtonComponent: EuiButtonEmpty,
+                              CancelButtonComponent: EuiSmallButtonEmpty,
                               async onOk() {
                                 const updateResult = await submitTemplateChange({
                                   templateName: record.name,
diff --git a/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/__snapshots__/AssociatedTemplatesModal.test.tsx.snap b/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/__snapshots__/AssociatedTemplatesModal.test.tsx.snap
index fcd6bfe7d..daf206825 100644
--- a/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/__snapshots__/AssociatedTemplatesModal.test.tsx.snap
+++ b/public/pages/ComposableTemplates/containers/AssociatedTemplatesModal/__snapshots__/AssociatedTemplatesModal.test.tsx.snap
@@ -169,7 +169,7 @@ HTMLCollection [
                             >
                               <button
                                 aria-label="Unlink from test_template?"
-                                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                                 type="button"
                               >
                                 EuiIconMock
diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx
index 821225eae..bca1f7be6 100644
--- a/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx
+++ b/public/pages/ComposableTemplates/containers/ComposableTemplates/ComposableTemplates.tsx
@@ -14,14 +14,14 @@ import {
   Direction,
   Pagination,
   EuiTableSelectionType,
-  EuiButton,
+  EuiSmallButton,
   EuiLink,
   EuiTitle,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiEmptyPrompt,
   EuiText,
   EuiTableSortingType,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiToolTip,
   EuiBasicTableColumn,
 } from "@elastic/eui";
@@ -289,7 +289,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
         <EuiTitle>
           <span>Component templates</span>
         </EuiTitle>
-        <EuiFormRow
+        <EuiCompressedFormRow
           fullWidth
           helpText={
             <div>
@@ -302,7 +302,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
           }
         >
           <></>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
 
@@ -355,7 +355,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                   onUnlink={/* istanbul ignore next */ () => this.getComposableTemplates()}
                   renderProps={({ setVisible }) => (
                     <EuiToolTip content="View associated index templates">
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="View associated index templates"
                         iconType="kqlSelector"
                         data-test-subj={`ViewAssociatedIndexTemplates-${record.name}`}
@@ -378,7 +378,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                   }}
                   renderDeleteButton={({ triggerDelete }) => (
                     <EuiToolTip content="Delete component template">
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Delete component template"
                         color="danger"
                         iconType="trash"
@@ -467,16 +467,15 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE);
                       }}
                       data-test-subj="CreateComponentTemplateWhenNoTemplateFound"
-                      size={useNewUX ? "s" : undefined}
                     >
                       Create component template
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               ) : (
@@ -487,7 +486,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.setState(defaultFilter, () => {
@@ -496,7 +495,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                       }}
                     >
                       Reset filters
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               )
@@ -547,7 +546,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.props.history.push(ROUTES.CREATE_COMPOSABLE_TEMPLATE);
@@ -555,7 +554,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                       data-test-subj="CreateComponentTemplateWhenNoTemplateFound"
                     >
                       Create component template
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               ) : (
@@ -566,7 +565,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.setState(defaultFilter, () => {
@@ -575,7 +574,7 @@ class ComposableTemplates extends MDSEnabledComponent<ComposableTemplatesProps,
                       }}
                     >
                       Reset filters
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               )
diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap b/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap
index 2bdc5d49d..bf1b2002d 100644
--- a/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap
+++ b/public/pages/ComposableTemplates/containers/ComposableTemplates/__snapshots__/ComposableTemplates.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
         Component templates
       </span>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -58,7 +58,7 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--danger euiButton-isDisabled"
+                class="euiButton euiButton--danger euiButton--small euiButton-isDisabled"
                 data-test-subj="deleteAction"
                 disabled=""
                 type="button"
@@ -78,7 +78,7 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="Create component templateButton"
                 type="button"
               >
@@ -112,13 +112,13 @@ exports[`<ComposableTemplates /> spec renders the component 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=""
@@ -149,7 +149,7 @@ exports[`<ComposableTemplates /> spec renders the component 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
+                class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiFilterButton euiFilterButton-hasNotification euiFilterButton--hasIcon"
                 type="button"
               >
                 <span
diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/__snapshots__/ComposableTemplatesActions.test.tsx.snap b/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/__snapshots__/ComposableTemplatesActions.test.tsx.snap
index 315b09710..3a94036ad 100644
--- a/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/__snapshots__/ComposableTemplatesActions.test.tsx.snap
+++ b/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/__snapshots__/ComposableTemplatesActions.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ComposableTemplatesActions /> spec delete templates by calling commonService 1`] = `
 <button
-  class="euiButton euiButton--danger"
+  class="euiButton euiButton--danger euiButton--small"
   data-test-subj="deleteAction"
   type="button"
 >
@@ -31,7 +31,7 @@ exports[`<ComposableTemplatesActions /> spec renders delete action by using rend
 
 exports[`<ComposableTemplatesActions /> spec renders the component and all the actions should be disabled when no items selected 1`] = `
 <button
-  class="euiButton euiButton--danger euiButton-isDisabled"
+  class="euiButton euiButton--danger euiButton--small euiButton-isDisabled"
   data-test-subj="deleteAction"
   disabled=""
   type="button"
diff --git a/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/index.tsx b/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/index.tsx
index 0d515ebee..e17d44997 100644
--- a/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/index.tsx
+++ b/public/pages/ComposableTemplates/containers/ComposableTemplatesActions/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useState } from "react";
-import { EuiButton } from "@elastic/eui";
+import { EuiSmallButton } from "@elastic/eui";
 import DeleteIndexModal from "../DeleteComposableTemplatesModal";
 import AssociatedTemplatesModal from "../AssociatedTemplatesModal";
 
@@ -36,9 +36,14 @@ export function ComposableTemplatesDeleteAction(props: ComposableTemplatesAction
     }
 
     return (
-      <EuiButton data-test-subj="deleteAction" color="danger" disabled={renderProps.selectedItems.length !== 1} onClick={triggerDelete}>
+      <EuiSmallButton
+        data-test-subj="deleteAction"
+        color="danger"
+        disabled={renderProps.selectedItems.length !== 1}
+        onClick={triggerDelete}
+      >
         Delete
-      </EuiButton>
+      </EuiSmallButton>
     );
   };
 
diff --git a/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/DeleteComposableTemplatesModal.tsx b/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/DeleteComposableTemplatesModal.tsx
index 22cd87f1c..545247702 100644
--- a/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/DeleteComposableTemplatesModal.tsx
+++ b/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/DeleteComposableTemplatesModal.tsx
@@ -8,8 +8,8 @@ import { CoreStart } from "opensearch-dashboards/public";
 import { ServicesContext } from "../../../../services";
 import { CoreServicesContext } from "../../../../components/core_services";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiLoadingSpinner,
   EuiModal,
   EuiModalBody,
@@ -146,16 +146,23 @@ export default function DeleteTemplateModal(props: DeleteTemplateModalProps) {
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty disabled={loading} isLoading={loading} data-test-subj="deletaCancelButton" onClick={onClose}>
+        <EuiSmallButtonEmpty disabled={loading} isLoading={loading} data-test-subj="deletaCancelButton" onClick={onClose}>
           Cancel
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
         {!linkedIndexItemCount ? (
-          <EuiButton disabled={loading} isLoading={loading} data-test-subj="deleteConfirmButton" onClick={onConfirm} fill color="danger">
+          <EuiSmallButton
+            disabled={loading}
+            isLoading={loading}
+            data-test-subj="deleteConfirmButton"
+            onClick={onConfirm}
+            fill
+            color="danger"
+          >
             Delete
-          </EuiButton>
+          </EuiSmallButton>
         ) : null}
         {linkedIndexItemCount ? (
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="deleteConfirmUnlinkButton"
             onClick={onConfirm}
             disabled={!checked || loading}
@@ -164,7 +171,7 @@ export default function DeleteTemplateModal(props: DeleteTemplateModalProps) {
             color="danger"
           >
             Apply changes
-          </EuiButton>
+          </EuiSmallButton>
         ) : null}
       </EuiModalFooter>
     </EuiModal>
diff --git a/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap b/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap
index b6e59e2ec..fb83e969d 100644
--- a/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap
+++ b/public/pages/ComposableTemplates/containers/DeleteComposableTemplatesModal/__snapshots__/DeleteComposableTemplatesModal.test.tsx.snap
@@ -64,7 +64,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="deletaCancelButton"
               type="button"
             >
@@ -79,7 +79,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--danger euiButton--fill"
+              class="euiButton euiButton--danger euiButton--small euiButton--fill"
               data-test-subj="deleteConfirmButton"
               type="button"
             >
diff --git a/public/pages/CreateComposableTemplate/components/TemplateType/TemplateType.tsx b/public/pages/CreateComposableTemplate/components/TemplateType/TemplateType.tsx
index b52d7b8ab..ed78e1354 100644
--- a/public/pages/CreateComposableTemplate/components/TemplateType/TemplateType.tsx
+++ b/public/pages/CreateComposableTemplate/components/TemplateType/TemplateType.tsx
@@ -1,4 +1,4 @@
-import { EuiRadio } from "@elastic/eui";
+import { EuiCompressedRadio } from "@elastic/eui";
 import { TEMPLATE_TYPE } from "../../../../utils/constants";
 import React from "react";
 
@@ -11,13 +11,13 @@ export default function TemplateType(props: ITemplateTypeProps) {
   const { value, onChange } = props;
   return (
     <>
-      <EuiRadio
+      <EuiCompressedRadio
         id={TEMPLATE_TYPE.INDEX_TEMPLATE}
         onChange={(e) => e.target.checked && onChange(undefined)}
         label={TEMPLATE_TYPE.INDEX_TEMPLATE}
         checked={value === undefined}
       />
-      <EuiRadio
+      <EuiCompressedRadio
         id={TEMPLATE_TYPE.DATA_STREAM}
         onChange={(e) => e.target.checked && onChange({})}
         label={TEMPLATE_TYPE.DATA_STREAM}
diff --git a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
index 491ece091..f2bb4f1b3 100644
--- a/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
+++ b/public/pages/CreateComposableTemplate/containers/CreateComposableTemplate/__snapshots__/CreateComposableTemplate.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
         style="flex-direction: row;"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           style="margin-right: 20px;"
           type="button"
         >
@@ -38,7 +38,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
           </span>
         </button>
         <button
-          class="euiButton euiButton--danger"
+          class="euiButton euiButton--danger euiButton--small"
           data-test-subj="deleteAction"
           type="button"
         >
@@ -125,7 +125,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
               class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="form-row-_meta.description"
                 id="some_html_id-row"
               >
@@ -136,13 +136,13 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                     class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="some_html_id"
                           type="text"
                           value=""
@@ -172,7 +172,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
           class="euiFlexItem"
         >
           <div
-            class="euiFormRow euiFormRow--fullWidth"
+            class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
@@ -216,7 +216,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                 >
                   <div>
                     <div
-                      class="euiSwitch euiSwitch--primary"
+                      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
                     >
                       <button
                         aria-checked="false"
@@ -234,10 +234,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                           />
                           <span
                             class="euiSwitch__track"
-                          >
-                            EuiIconMock
-                            EuiIconMock
-                          </span>
+                          />
                         </span>
                       </button>
                       <span
@@ -299,7 +296,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                 >
                   <div>
                     <div
-                      class="euiSwitch euiSwitch--primary"
+                      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
                     >
                       <button
                         aria-checked="false"
@@ -317,10 +314,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                           />
                           <span
                             class="euiSwitch__track"
-                          >
-                            EuiIconMock
-                            EuiIconMock
-                          </span>
+                          />
                         </span>
                       </button>
                       <span
@@ -361,7 +355,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
             Index mapping
           </div>
           <div
-            class="euiFormRow euiFormRow--fullWidth"
+            class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
@@ -407,7 +401,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
               >
                 <div>
                   <div
-                    class="euiSwitch euiSwitch--primary"
+                    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
                   >
                     <button
                       aria-checked="false"
@@ -425,10 +419,7 @@ exports[`<CreateComposableTemplate /> spec it goes to templates page when click
                         />
                         <span
                           class="euiSwitch__track"
-                        >
-                          EuiIconMock
-                          EuiIconMock
-                        </span>
+                        />
                       </span>
                     </button>
                     <span
diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx
index f56560474..009e6728c 100644
--- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx
+++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react";
-import { EuiButton, EuiButtonEmpty, EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
+import { EuiSmallButton, EuiSmallButtonEmpty, EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import { IComposableTemplate, IComposableTemplateRemote } from "../../../../../models/interfaces";
 import useField from "../../../../lib/field";
@@ -278,9 +278,9 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<IComponentTemplateD
                   </>
                 ) : (
                   <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
-                    <EuiButton style={{ marginRight: 20 }} onClick={onClickViewJson}>
+                    <EuiSmallButton style={{ marginRight: 20 }} onClick={onClickViewJson}>
                       View JSON
-                    </EuiButton>
+                    </EuiSmallButton>
                     <ComposableTemplatesActions selectedItems={[templateName || ""]} history={props.history} onDelete={onDelete} />
                   </EuiFlexItem>
                 )}
@@ -304,20 +304,14 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<IComponentTemplateD
           <EuiSpacer />
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={onCancel} data-test-subj="CreateComposableTemplateCancelButton" size={useNewUX ? "s" : undefined}>
+              <EuiSmallButtonEmpty onClick={onCancel} data-test-subj="CreateComposableTemplateCancelButton">
                 Cancel
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                onClick={onClickSubmit}
-                isLoading={isSubmitting}
-                data-test-subj="CreateComposableTemplateCreateButton"
-                size={useNewUX ? "s" : undefined}
-              >
+              <EuiSmallButton fill onClick={onClickSubmit} isLoading={isSubmitting} data-test-subj="CreateComposableTemplateCreateButton">
                 Create component template
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
diff --git a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
index e497072b8..491aa488c 100644
--- a/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
+++ b/public/pages/CreateComposableTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
         Create component template
       </h1>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -76,7 +76,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-name"
         id="some_html_id-row"
       >
@@ -106,13 +106,13 @@ exports[`<TemplateDetail /> spec render component 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   type="text"
                   value=""
                 />
@@ -122,7 +122,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
         </div>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -142,7 +142,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-_meta.description"
         id="some_html_id-row"
       >
@@ -175,13 +175,13 @@ exports[`<TemplateDetail /> spec render component 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   type="text"
                   value=""
                 />
@@ -207,7 +207,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
         class="euiFlexItem"
       >
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -251,7 +251,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
               >
                 <div>
                   <div
-                    class="euiSwitch euiSwitch--primary"
+                    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
                   >
                     <button
                       aria-checked="false"
@@ -269,10 +269,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
                         />
                         <span
                           class="euiSwitch__track"
-                        >
-                          EuiIconMock
-                          EuiIconMock
-                        </span>
+                        />
                       </span>
                     </button>
                     <span
@@ -334,7 +331,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
               >
                 <div>
                   <div
-                    class="euiSwitch euiSwitch--primary"
+                    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
                   >
                     <button
                       aria-checked="false"
@@ -352,10 +349,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
                         />
                         <span
                           class="euiSwitch__track"
-                        >
-                          EuiIconMock
-                          EuiIconMock
-                        </span>
+                        />
                       </span>
                     </button>
                     <span
@@ -396,7 +390,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
           Index mapping
         </div>
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -442,7 +436,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
             >
               <div>
                 <div
-                  class="euiSwitch euiSwitch--primary"
+                  class="euiSwitch euiSwitch--primary euiSwitch--compressed"
                 >
                   <button
                     aria-checked="false"
@@ -460,10 +454,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
                       />
                       <span
                         class="euiSwitch__track"
-                      >
-                        EuiIconMock
-                        EuiIconMock
-                      </span>
+                      />
                     </span>
                   </button>
                   <span
@@ -496,7 +487,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="CreateComposableTemplateCancelButton"
         type="button"
       >
@@ -515,7 +506,7 @@ exports[`<TemplateDetail /> spec render component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="CreateComposableTemplateCreateButton"
         type="button"
       >
diff --git a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx
index 167cdacb9..e6b13d32f 100644
--- a/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx
+++ b/public/pages/CreateComposableTemplate/containers/TemplateMappings/TemplateMappings.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useRef } from "react";
-import { EuiFormRow, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { SubDetailProps } from "../../interface";
 import IndexMapping, { IIndexMappingsRef } from "../../../../components/IndexMapping";
@@ -22,7 +22,7 @@ export default function TemplateMappings(props: SubDetailProps) {
           <EuiTitle size="s">
             <div>Index mapping</div>
           </EuiTitle>
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth
             helpText={
               <div>
@@ -38,7 +38,7 @@ export default function TemplateMappings(props: SubDetailProps) {
             }
           >
             <></>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       }
       actions={
@@ -55,7 +55,7 @@ export default function TemplateMappings(props: SubDetailProps) {
       {values.includes?.[IndicesUpdateMode.mappings] ? (
         <>
           <EuiSpacer />
-          <EuiFormRow fullWidth>
+          <EuiCompressedFormRow fullWidth>
             <IndexMapping
               {...field.registerField({
                 name: ["template", "mappings"],
@@ -82,7 +82,7 @@ export default function TemplateMappings(props: SubDetailProps) {
               oldMappingsEditable
               docVersion={coreServices.docLinks.DOC_LINK_VERSION}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer />
         </>
       ) : null}
diff --git a/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap b/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap
index d4158acd6..f607a6d8f 100644
--- a/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap
+++ b/public/pages/CreateDataStream/containers/CreateDataStream/__snapshots__/CreateDataStream.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
           Create data stream
         </h1>
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -69,7 +69,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
           />
           <div>
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               type="button"
             >
               <span
@@ -123,7 +123,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           data-test-subj="form-row-name"
           id="some_html_id-row"
         >
@@ -168,17 +168,17 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                class="euiComboBox"
+                class="euiComboBox euiComboBox--compressed"
                 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"
                     >
@@ -225,7 +225,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -259,7 +259,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
           data-test-subj="CreateDataStreamCancelButton"
           type="button"
         >
@@ -278,7 +278,7 @@ exports[`<CreateDataStream /> spec it goes to data streams page when click cance
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           data-test-subj="CreateDataStreamCreateButton"
           type="button"
         >
diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
index 2b070ae16..3c269515a 100644
--- a/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
+++ b/public/pages/CreateDataStream/containers/DataStreamDetail/DataStreamDetail.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react";
-import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiSmallButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiTitle, EuiText } from "@elastic/eui";
 import { TemplateItemRemote } from "../../../../../models/interfaces";
 import useField, { FieldInstance } from "../../../../lib/field";
 import CustomFormRow from "../../../../components/CustomFormRow";
@@ -184,7 +184,7 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
 
             {isEdit ? (
               <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
-                <EuiButton
+                <EuiSmallButton
                   style={{ marginRight: 20 }}
                   onClick={() => {
                     Modal.show({
@@ -195,7 +195,7 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
                   }}
                 >
                   View JSON
-                </EuiButton>
+                </EuiSmallButton>
                 <DataStreamsActions
                   selectedItems={values ? ([values] as DataStreamInEdit[]) : []}
                   history={props.history}
@@ -213,9 +213,9 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
             To create a data stream, you must first define its mappings and settings by creating a data stream template.
             <EuiSpacer size="s" />
             <div>
-              <EuiButton onClick={() => props.history.push(`${ROUTES.CREATE_TEMPLATE}?values=${JSON.stringify({ data_stream: {} })}`)}>
+              <EuiSmallButton onClick={() => props.history.push(`${ROUTES.CREATE_TEMPLATE}?values=${JSON.stringify({ data_stream: {} })}`)}>
                 Create template
-              </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiCallOut>
           <EuiSpacer />
@@ -247,14 +247,14 @@ const DataStreamDetail = (props: DataStreamDetailProps, ref: Ref<FieldInstance>)
           <EuiSpacer />
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty onClick={onCancel} data-test-subj="CreateDataStreamCancelButton">
+              <EuiSmallButtonEmpty onClick={onCancel} data-test-subj="CreateDataStreamCancelButton">
                 Cancel
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton fill onClick={onSubmit} isLoading={isLoading} data-test-subj="CreateDataStreamCreateButton">
+              <EuiSmallButton fill onClick={onSubmit} isLoading={isLoading} data-test-subj="CreateDataStreamCreateButton">
                 {isEdit ? "Save changes" : "Create data stream"}
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
diff --git a/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap b/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap
index 29148aabe..3cf7ebe74 100644
--- a/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap
+++ b/public/pages/CreateDataStream/containers/DataStreamDetail/__snapshots__/DataStreamDetail.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
         Create data stream
       </h1>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -66,7 +66,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
         />
         <div>
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             type="button"
           >
             <span
@@ -120,7 +120,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         data-test-subj="form-row-name"
         id="some_html_id-row"
       >
@@ -165,17 +165,17 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="euiComboBox"
+              class="euiComboBox euiComboBox--compressed"
               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"
                   >
@@ -222,7 +222,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -256,7 +256,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="CreateDataStreamCancelButton"
         type="button"
       >
@@ -275,7 +275,7 @@ exports[`<DataStreamDetail /> spec render component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="CreateDataStreamCreateButton"
         type="button"
       >
diff --git a/public/pages/CreateDataStream/containers/TemplateMappings/TemplateMappings.tsx b/public/pages/CreateDataStream/containers/TemplateMappings/TemplateMappings.tsx
index ad3d1ff8c..9dd2668e8 100644
--- a/public/pages/CreateDataStream/containers/TemplateMappings/TemplateMappings.tsx
+++ b/public/pages/CreateDataStream/containers/TemplateMappings/TemplateMappings.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useContext, useRef } from "react";
-import { EuiFormRow, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
 import { CoreStart } from "opensearch-dashboards/public";
 import { SubDetailProps } from "../../interface";
 import IndexMapping, { IIndexMappingsRef } from "../../../../components/IndexMapping";
@@ -16,7 +16,7 @@ export default function TemplateMappings(props: SubDetailProps) {
   return (
     <>
       <EuiTitle size="s">
-        <EuiFormRow
+        <EuiCompressedFormRow
           fullWidth
           label={
             <EuiTitle size="s">
@@ -37,10 +37,10 @@ export default function TemplateMappings(props: SubDetailProps) {
           }
         >
           <></>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiFormRow fullWidth>
+      <EuiCompressedFormRow fullWidth>
         <IndexMapping
           {...field.registerField({
             name: ["template", "mappings"],
@@ -50,7 +50,7 @@ export default function TemplateMappings(props: SubDetailProps) {
           ref={mappingsRef}
           docVersion={coreServices.docLinks.DOC_LINK_VERSION}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 }
diff --git a/public/pages/CreateIndex/containers/IndexForm/index.tsx b/public/pages/CreateIndex/containers/IndexForm/index.tsx
index f50334ca6..9448a61f2 100644
--- a/public/pages/CreateIndex/containers/IndexForm/index.tsx
+++ b/public/pages/CreateIndex/containers/IndexForm/index.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component, forwardRef, useContext } from "react";
-import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiButton, EuiButtonEmpty, EuiLoadingSpinner } from "@elastic/eui";
+import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiSmallButton, EuiSmallButtonEmpty, EuiLoadingSpinner } from "@elastic/eui";
 import { get, set, differenceWith, isEqual, merge } from "lodash";
 import { diffArrays } from "diff";
 import flattern from "flat";
@@ -467,20 +467,14 @@ export class IndexForm extends Component<IndexFormProps & { services: BrowserSer
             <EuiSpacer />
             <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiButtonEmpty size={useUpdatedUX ? "s" : undefined} onClick={this.onCancel} data-test-subj="createIndexCancelButton">
+                <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createIndexCancelButton">
                   Cancel
-                </EuiButtonEmpty>
+                </EuiSmallButtonEmpty>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton
-                  fill
-                  size={useUpdatedUX ? "s" : undefined}
-                  onClick={this.onSubmit}
-                  isLoading={isSubmitting}
-                  data-test-subj="createIndexCreateButton"
-                >
+                <EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createIndexCreateButton">
                   {isEdit ? "Update" : "Create"}
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </>
diff --git a/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap b/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap
index c668f04a6..883b45635 100644
--- a/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/components/DefineTemplate/__snapshots__/DefineTemplate.test.tsx.snap
@@ -56,7 +56,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
             class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               data-test-subj="form-row-data_stream"
               id="some_html_id-row"
             >
@@ -64,7 +64,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiRadio"
+                  class="euiRadio euiRadio--compressed"
                 >
                   <input
                     checked=""
@@ -84,7 +84,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
                   </label>
                 </div>
                 <div
-                  class="euiRadio"
+                  class="euiRadio euiRadio--compressed"
                 >
                   <input
                     class="euiRadio__input"
@@ -140,7 +140,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
             class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               data-test-subj="form-row-index_patterns"
               id="some_html_id-row"
             >
@@ -150,17 +150,17 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="euiComboBox"
+                  class="euiComboBox euiComboBox--compressed"
                   role="combobox"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <div
-                        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                         data-test-subj="comboBoxInput"
                         tabindex="-1"
                       >
@@ -227,7 +227,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
             class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               data-test-subj="form-row-priority"
               id="some_html_id-row"
             >
@@ -238,13 +238,13 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
                   class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldNumber"
+                        class="euiFieldNumber euiFieldNumber--compressed"
                         id="some_html_id"
                         type="number"
                         value=""
@@ -261,7 +261,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in edit mode
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         data-test-subj="form-row-_meta.flow"
         id="some_html_id-row"
       >
@@ -431,7 +431,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-name"
         id="some_html_id-row"
       >
@@ -461,13 +461,13 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   type="text"
                   value=""
                 />
@@ -477,7 +477,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
         </div>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -497,7 +497,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-data_stream"
         id="some_html_id-row"
       >
@@ -516,7 +516,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiRadio"
+            class="euiRadio euiRadio--compressed"
           >
             <input
               checked=""
@@ -536,7 +536,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
             </label>
           </div>
           <div
-            class="euiRadio"
+            class="euiRadio euiRadio--compressed"
           >
             <input
               class="euiRadio__input"
@@ -560,7 +560,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-index_patterns"
         id="some_html_id-row"
       >
@@ -587,17 +587,17 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
@@ -631,7 +631,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-priority"
         id="some_html_id-row"
       >
@@ -659,13 +659,13 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldNumber"
+                  class="euiFieldNumber euiFieldNumber--compressed"
                   type="number"
                   value=""
                 />
@@ -678,7 +678,7 @@ exports[`<ComposableTemplatesActions /> spec renders the component in non-edit m
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         data-test-subj="form-row-_meta.flow"
         id="some_html_id-row"
       >
diff --git a/public/pages/CreateIndexTemplate/components/TemplateType/TemplateType.tsx b/public/pages/CreateIndexTemplate/components/TemplateType/TemplateType.tsx
index b6466eff4..5c42e150d 100644
--- a/public/pages/CreateIndexTemplate/components/TemplateType/TemplateType.tsx
+++ b/public/pages/CreateIndexTemplate/components/TemplateType/TemplateType.tsx
@@ -2,7 +2,7 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { EuiRadio, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedRadio, EuiSpacer } from "@elastic/eui";
 import { TEMPLATE_TYPE } from "../../../../utils/constants";
 import React from "react";
 import { AllBuiltInComponents } from "../../../../components/FormGenerator";
@@ -21,13 +21,13 @@ export default function TemplateType(props: ITemplateTypeProps) {
   const { value, onChange } = props;
   return (
     <>
-      <EuiRadio
+      <EuiCompressedRadio
         id={TEMPLATE_TYPE.INDEX_TEMPLATE}
         onChange={(e) => e.target.checked && onChange(undefined)}
         label={TEMPLATE_TYPE.INDEX_TEMPLATE}
         checked={value === undefined}
       />
-      <EuiRadio
+      <EuiCompressedRadio
         id={TEMPLATE_TYPE.DATA_STREAM}
         onChange={(e) =>
           e.target.checked &&
diff --git a/public/pages/CreateIndexTemplate/containers/ComposableTemplate/ComposableTemplate.tsx b/public/pages/CreateIndexTemplate/containers/ComposableTemplate/ComposableTemplate.tsx
index 4cc6730f1..08551237f 100644
--- a/public/pages/CreateIndexTemplate/containers/ComposableTemplate/ComposableTemplate.tsx
+++ b/public/pages/CreateIndexTemplate/containers/ComposableTemplate/ComposableTemplate.tsx
@@ -4,8 +4,8 @@
  */
 import React, { useContext, useRef, useState, useEffect, useMemo } from "react";
 import {
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiDragDropContext,
   EuiDraggable,
   EuiDroppable,
@@ -153,7 +153,7 @@ export default function ComposableTemplate(props: SubDetailProps) {
                             </div>
                             <div>
                               {readonly ? null : (
-                                <EuiButtonIcon
+                                <EuiSmallButtonIcon
                                   onClick={() => {
                                     const newValue = [...(values.composed_of || [])];
                                     newValue.splice(index, 1);
@@ -164,7 +164,7 @@ export default function ComposableTemplate(props: SubDetailProps) {
                                   aria-label="delete"
                                 />
                               )}
-                              <EuiButtonIcon
+                              <EuiSmallButtonIcon
                                 onClick={() => window.open(`#${ROUTES.CREATE_COMPOSABLE_TEMPLATE}/${item}`)}
                                 style={{ marginLeft: 12 }}
                                 iconType="inspect"
@@ -188,10 +188,10 @@ export default function ComposableTemplate(props: SubDetailProps) {
       <EuiSpacer />
       {readonly ? null : (
         <div>
-          <EuiButton onClick={() => setDialogVisible(true)}>Associate component templates</EuiButton>
-          <EuiButton style={{ marginLeft: 20 }} onClick={() => setCreateComponentVisible(true)}>
+          <EuiSmallButton onClick={() => setDialogVisible(true)}>Associate component templates</EuiSmallButton>
+          <EuiSmallButton style={{ marginLeft: 20 }} onClick={() => setCreateComponentVisible(true)}>
             Create component template
-          </EuiButton>
+          </EuiSmallButton>
         </div>
       )}
       <Modal.SimpleModal
diff --git a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
index 98987911b..2e821bbd0 100644
--- a/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/CreateIndexTemplate/__snapshots__/CreateIndexTemplate.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
         style="flex-direction: row;"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           style="margin-right: 20px;"
           type="button"
         >
@@ -38,7 +38,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
           </span>
         </button>
         <button
-          class="euiButton euiButton--danger"
+          class="euiButton euiButton--danger euiButton--small"
           type="button"
         >
           <span
@@ -238,7 +238,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -406,7 +406,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
                   class="euiSpacer euiSpacer--s"
                 />
                 <div
-                  class="euiFormRow euiFormRow--fullWidth"
+                  class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -599,7 +599,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
           Index mapping
         </div>
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -634,7 +634,7 @@ exports[`<CreateIndexTemplate /> spec render template pages 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
index f79077eab..fae9173bb 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/TemplateDetail.tsx
@@ -5,7 +5,7 @@
 
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, Ref, useState } from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiCodeBlock,
@@ -175,7 +175,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
 
   const PreviewTemplateButton = () => (
     <EuiFlexItem grow={false}>
-      <EuiButton
+      <EuiSmallButton
         onClick={async () => {
           const result = await simulateTemplate({
             template: field.getValues(),
@@ -192,7 +192,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
         color="ghost"
       >
         Preview template
-      </EuiButton>
+      </EuiSmallButton>
     </EuiFlexItem>
   );
   const { HeaderControl } = getNavigationUI();
@@ -232,9 +232,8 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
     },
     {
       renderComponent: (
-        <EuiButton
+        <EuiSmallButton
           fill
-          size="s"
           style={{ marginRight: 20 }}
           onClick={() => {
             const showValue: TemplateItemRemote = {
@@ -259,7 +258,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
           }}
         >
           View JSON
-        </EuiButton>
+        </EuiSmallButton>
       ),
     },
   ];
@@ -292,7 +291,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
           {isEdit ? (
             <>
               <EuiFlexItem grow={false} style={{ flexDirection: "row" }}>
-                <EuiButton
+                <EuiSmallButton
                   style={{ marginRight: 20 }}
                   onClick={() => {
                     const showValue: TemplateItemRemote = {
@@ -317,10 +316,10 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
                   }}
                 >
                   View JSON
-                </EuiButton>
-                <EuiButton color="danger" onClick={() => setVisible(true)}>
+                </EuiSmallButton>
+                <EuiSmallButton color="danger" onClick={() => setVisible(true)}>
                   Delete
-                </EuiButton>
+                </EuiSmallButton>
                 <DeleteTemplateModal
                   visible={visible}
                   selectedItems={[templateName]}
@@ -440,7 +439,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
               </EuiFlexItem>
               <PreviewTemplateButton />
               <EuiFlexItem grow={false}>
-                <EuiButton
+                <EuiSmallButton
                   fill
                   onClick={async () => {
                     const result = await onSubmit();
@@ -457,7 +456,7 @@ const TemplateDetail = (props: TemplateDetailProps, ref: Ref<FieldInstance>) =>
                   data-test-subj="CreateIndexTemplateCreateButton"
                 >
                   Create template
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </BottomBar>
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
index 6961904b8..1b983481e 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
+++ b/public/pages/CreateIndexTemplate/containers/TemplateDetail/__snapshots__/TemplateDetail.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
          template
       </h1>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -85,7 +85,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-name"
         id="some_html_id-row"
       >
@@ -115,13 +115,13 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   type="text"
                   value=""
                 />
@@ -131,7 +131,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         </div>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -151,7 +151,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-data_stream"
         id="some_html_id-row"
       >
@@ -170,7 +170,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiRadio"
+            class="euiRadio euiRadio--compressed"
           >
             <input
               checked=""
@@ -190,7 +190,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             </label>
           </div>
           <div
-            class="euiRadio"
+            class="euiRadio euiRadio--compressed"
           >
             <input
               class="euiRadio__input"
@@ -214,7 +214,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-index_patterns"
         id="some_html_id-row"
       >
@@ -241,17 +241,17 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
@@ -285,7 +285,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-priority"
         id="some_html_id-row"
       >
@@ -313,13 +313,13 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldNumber"
+                  class="euiFieldNumber euiFieldNumber--compressed"
                   type="number"
                   value="0"
                 />
@@ -332,7 +332,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         data-test-subj="form-row-_meta.flow"
         id="some_html_id-row"
       >
@@ -496,7 +496,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -528,7 +528,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         data-test-subj="form-row-template.aliases"
         id="some_html_id-row"
       >
@@ -555,17 +555,17 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             role="combobox"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
@@ -619,7 +619,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-template.settings.index.number_of_shards"
         id="some_html_id-row"
       >
@@ -647,13 +647,13 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldNumber"
+                  class="euiFieldNumber euiFieldNumber--compressed"
                   type="number"
                   value=""
                 />
@@ -666,7 +666,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         data-test-subj="form-row-template.settings.index.number_of_replicas"
         id="some_html_id-row"
       >
@@ -694,13 +694,13 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldNumber"
+                  class="euiFieldNumber euiFieldNumber--compressed"
                   type="number"
                   value=""
                 />
@@ -713,7 +713,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         data-test-subj="form-row-template.settings.index.refresh_interval"
         id="some_html_id-row"
       >
@@ -741,13 +741,13 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   type="text"
                   value=""
                 />
@@ -802,7 +802,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
                 class="euiSpacer euiSpacer--s"
               />
               <div
-                class="euiFormRow euiFormRow--fullWidth"
+                class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                 id="some_html_id-row"
               >
                 <div
@@ -992,7 +992,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         Index mapping
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -1027,7 +1027,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -1107,7 +1107,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             class="euiSpacer euiSpacer--l"
           />
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="createIndexAddFieldButton"
             style="margin-right: 8px;"
             type="button"
@@ -1123,7 +1123,7 @@ exports[`<TemplateDetail /> spec render component in non-edit-mode 1`] = `
             </span>
           </button>
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="createIndexAddObjectFieldButton"
             type="button"
           >
diff --git a/public/pages/CreateIndexTemplate/containers/TemplateMappings/TemplateMappings.tsx b/public/pages/CreateIndexTemplate/containers/TemplateMappings/TemplateMappings.tsx
index a80f1b6d2..42ad275ae 100644
--- a/public/pages/CreateIndexTemplate/containers/TemplateMappings/TemplateMappings.tsx
+++ b/public/pages/CreateIndexTemplate/containers/TemplateMappings/TemplateMappings.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useContext, useRef } from "react";
-import { EuiFormRow, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiLink, EuiSpacer, EuiTitle } from "@elastic/eui";
 import { CoreStart } from "opensearch-dashboards/public";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { SubDetailProps } from "../../interface";
@@ -19,7 +19,7 @@ export default function TemplateMappings(props: SubDetailProps) {
       <EuiTitle size="s">
         <div>Index mapping</div>
       </EuiTitle>
-      <EuiFormRow
+      <EuiCompressedFormRow
         fullWidth
         helpText={
           <div>
@@ -35,9 +35,9 @@ export default function TemplateMappings(props: SubDetailProps) {
         }
       >
         <></>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       <EuiSpacer size="s" />
-      <EuiFormRow fullWidth>
+      <EuiCompressedFormRow fullWidth>
         <IndexMapping
           {...field.registerField({
             name: ["template", "mappings"],
@@ -61,7 +61,7 @@ export default function TemplateMappings(props: SubDetailProps) {
           oldMappingsEditable
           docVersion={coreServices.docLinks.DOC_LINK_VERSION}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 }
diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
index e7a29c53c..e91f498c4 100644
--- a/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
+++ b/public/pages/CreatePolicy/components/ConfigurePolicy/ConfigurePolicy.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiFieldText, EuiText } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiText } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 
 interface ConfigurePolicyProps {
@@ -26,14 +26,20 @@ const ConfigurePolicy = ({ isEdit, policyId, policyIdError, onChange, useNewUx }
         <></>
       )}
       <EuiSpacer size="s" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Policy ID"
         helpText="Specify a unique ID that is easy to recognize and remember."
         isInvalid={!!policyIdError}
         error={policyIdError}
       >
-        <EuiFieldText isInvalid={!!policyIdError} placeholder="example_policy" readOnly={isEdit} value={policyId} onChange={onChange} />
-      </EuiFormRow>
+        <EuiCompressedFieldText
+          isInvalid={!!policyIdError}
+          placeholder="example_policy"
+          readOnly={isEdit}
+          value={policyId}
+          onChange={onChange}
+        />
+      </EuiCompressedFormRow>
     </div>
   </ContentPanel>
 );
diff --git a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
index 310fd6a83..75b67021c 100644
--- a/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/components/ConfigurePolicy/__snapshots__/ConfigurePolicy.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`<ConfigurePolicy /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--s"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -63,14 +63,14 @@ exports[`<ConfigurePolicy /> spec renders the component 1`] = `
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <input
                 aria-describedby="some_html_id-help-0"
-                class="euiFieldText"
+                class="euiFieldText euiFieldText--compressed"
                 id="some_html_id"
                 placeholder="example_policy"
                 type="text"
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
index 247dc329e..24c2b990d 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
+++ b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
@@ -6,7 +6,7 @@
 import React from "react";
 import {
   EuiSpacer,
-  EuiButton,
+  EuiSmallButton,
   // @ts-ignore
   EuiCodeEditor,
   EuiText,
@@ -38,14 +38,14 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError, useNew
     actions={[
       <EuiCopy textToCopy={jsonString}>
         {(copy: () => void) => (
-          <EuiButton iconType="copyClipboard" onClick={copy} size={useNewUx ? "s" : undefined}>
+          <EuiSmallButton iconType="copyClipboard" onClick={copy}>
             Copy
-          </EuiButton>
+          </EuiSmallButton>
         )}
       </EuiCopy>,
-      <EuiButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError} size={useNewUx ? "s" : undefined}>
+      <EuiSmallButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError}>
         Auto indent
-      </EuiButton>,
+      </EuiSmallButton>,
     ]}
   >
     <div style={{ paddingLeft: "10px" }}>
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/__mocks__/DefinePolicyMock.tsx b/public/pages/CreatePolicy/components/DefinePolicy/__mocks__/DefinePolicyMock.tsx
index 1697b2169..9c979eb5c 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/__mocks__/DefinePolicyMock.tsx
+++ b/public/pages/CreatePolicy/components/DefinePolicy/__mocks__/DefinePolicyMock.tsx
@@ -6,8 +6,8 @@
 import React, { ChangeEvent } from "react";
 import {
   EuiSpacer,
-  EuiButton,
-  EuiTextArea,
+  EuiSmallButton,
+  EuiCompressedTextArea,
   EuiText,
   // @ts-ignore
   EuiCopy,
@@ -23,7 +23,7 @@ interface DefinePolicyProps {
 
 /*
  * Attempting to test EuiCodeEditor which uses react-ace was a lot more effort than seemed worthwhile
- * at the moment, so in the meantime we will mock DefinePolicy as a EuiTextArea so that we can still test
+ * at the moment, so in the meantime we will mock DefinePolicy as a EuiCompressedTextArea so that we can still test
  * the functionality of CreatePolicy (minus the JSON code editor).
  * */
 const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: DefinePolicyProps) => (
@@ -34,14 +34,14 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: Defi
     actions={[
       <EuiCopy textToCopy={jsonString}>
         {(copy: () => void) => (
-          <EuiButton iconType="copyClipboard" onClick={copy}>
+          <EuiSmallButton iconType="copyClipboard" onClick={copy}>
             Copy
-          </EuiButton>
+          </EuiSmallButton>
         )}
       </EuiCopy>,
-      <EuiButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError}>
+      <EuiSmallButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError}>
         Auto Indent
-      </EuiButton>,
+      </EuiSmallButton>,
     ]}
   >
     <div style={{ paddingLeft: "10px" }}>
@@ -50,7 +50,11 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: Defi
       </EuiText>
     </div>
     <EuiSpacer size="s" />
-    <EuiTextArea value={jsonString} onChange={(e: ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)} aria-label="Code Editor" />
+    <EuiCompressedTextArea
+      value={jsonString}
+      onChange={(e: ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
+      aria-label="Code Editor"
+    />
   </ContentPanel>
 );
 
diff --git a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
index 5de09b1d9..57122b9d4 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/components/DefinePolicy/__snapshots__/DefinePolicy.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`<DefinePolicy /> spec renders the component 1`] = `
             class="euiToolTipAnchor"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               type="button"
             >
               <span
@@ -57,7 +57,7 @@ exports[`<DefinePolicy /> spec renders the component 1`] = `
           class="euiFlexItem"
         >
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             type="button"
           >
             <span
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
index 1fba864d7..bdf6fb7b4 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -9,11 +9,10 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiLink,
-  EuiIcon,
   EuiText,
 } from "@elastic/eui";
 import queryString from "query-string";
@@ -302,20 +301,14 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
         <EuiSpacer />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createPolicyCancelButton" size={useNewUX ? "s" : undefined}>
+            <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createPolicyCancelButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              onClick={this.onSubmit}
-              isLoading={isSubmitting}
-              data-test-subj="createPolicyCreateButton"
-              size={useNewUX ? "s" : undefined}
-            >
+            <EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createPolicyCreateButton">
               {isEdit ? "Update" : "Create"}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap b/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
index b5eaf64c7..b4be236d8 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/__snapshots__/CreatePolicy.test.tsx.snap
@@ -57,7 +57,7 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -75,14 +75,14 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-describedby="some_html_id-help-0"
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   id="some_html_id"
                   placeholder="example_policy"
                   type="text"
@@ -140,7 +140,7 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
               class="euiToolTipAnchor"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -160,7 +160,7 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
             class="euiFlexItem"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               type="button"
             >
               <span
@@ -200,8 +200,8 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
       />
       <textarea
         aria-label="Code Editor"
-        class="euiTextArea euiTextArea--resizeVertical"
-        rows="6"
+        class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+        rows="3"
       >
         {
     "policy": {
@@ -262,7 +262,7 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="createPolicyCancelButton"
         type="button"
       >
@@ -281,7 +281,7 @@ exports[`<CreatePolicy /> spec renders the create component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="createPolicyCreateButton"
         type="button"
       >
@@ -400,7 +400,7 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -418,14 +418,14 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout euiFormControlLayout--readOnly"
+              class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--readOnly"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-describedby="some_html_id-help-0"
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   id="some_html_id"
                   placeholder="example_policy"
                   readonly=""
@@ -484,7 +484,7 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
               class="euiToolTipAnchor"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -504,7 +504,7 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
             class="euiFlexItem"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               type="button"
             >
               <span
@@ -544,8 +544,8 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
       />
       <textarea
         aria-label="Code Editor"
-        class="euiTextArea euiTextArea--resizeVertical"
-        rows="6"
+        class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+        rows="3"
       >
         {
     "policy": {
@@ -608,7 +608,7 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="createPolicyCancelButton"
         type="button"
       >
@@ -627,7 +627,7 @@ exports[`<CreatePolicy /> spec renders the edit component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="createPolicyCreateButton"
         type="button"
       >
diff --git a/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx b/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
index 235c82ace..25fdaac16 100644
--- a/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
+++ b/public/pages/CreateRollup/components/AdvancedAggregation/AdvancedAggregation.tsx
@@ -7,14 +7,14 @@ import React, { ChangeEvent, Component, Fragment } from "react";
 import {
   EuiSpacer,
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiOverlayMask,
   EuiModal,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiModalBody,
   EuiModalFooter,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
@@ -24,7 +24,7 @@ import {
   Criteria,
   EuiTableSelectionType,
   EuiTableFieldDataColumnType,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSelect,
   EuiText,
   EuiLink,
@@ -34,7 +34,7 @@ import {
   EuiFormHelpText,
   EuiHorizontalRule,
   EuiCallOut,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiTableSortingType,
 } from "@elastic/eui";
 import { AddFieldsColumns } from "../../utils/constants";
@@ -272,7 +272,7 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
         align: "left",
         render: (aggregationMethod, item) => (
           <EuiForm>
-            <EuiFormRow>
+            <EuiCompressedFormRow>
               <EuiSelect
                 compressed={true}
                 value={aggregationMethod}
@@ -284,7 +284,7 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
                 onChange={(e) => this.onChangeAggregationMethod(e, item)}
                 data-test-subj={`aggregationMethodSelect-${item.field.label}`}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         ),
       },
@@ -298,14 +298,14 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
             "-"
           ) : (
             <EuiForm>
-              <EuiFormRow>
-                <EuiFieldNumber
+              <EuiCompressedFormRow>
+                <EuiCompressedFieldNumber
                   min={1}
                   value={interval}
                   onChange={(e) => this.onChangeInterval(e, item)}
                   data-test-subj={`interval-${item.field.label}`}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiForm>
           ),
       },
@@ -393,9 +393,9 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
           <EuiFlexItem grow={false}>
             <EuiFlexGroup direction="column" justifyContent="spaceBetween" style={{ padding: "0px 10px" }}>
               <EuiFlexItem grow={false}>
-                <EuiButton onClick={this.showModal} data-test-subj="addFieldsAggregation">
+                <EuiSmallButton onClick={this.showModal} data-test-subj="addFieldsAggregation">
                   Add fields
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
               <EuiFlexItem> </EuiFlexItem>
             </EuiFlexGroup>
@@ -424,9 +424,9 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
                     <EuiSpacer />
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={this.showModal} data-test-subj="addFieldsAggregationEmpty">
+                    <EuiSmallButton onClick={this.showModal} data-test-subj="addFieldsAggregationEmpty">
                       Add fields
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiSpacer size="m" />
@@ -459,10 +459,10 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
                 </EuiModalBody>
 
                 <EuiModalFooter>
-                  <EuiButtonEmpty onClick={this.closeModal} data-test-subj="addFieldsAggregationCancel">
+                  <EuiSmallButtonEmpty onClick={this.closeModal} data-test-subj="addFieldsAggregationCancel">
                     Cancel
-                  </EuiButtonEmpty>
-                  <EuiButton
+                  </EuiSmallButtonEmpty>
+                  <EuiSmallButton
                     fill
                     onClick={() => {
                       this.closeModal();
@@ -471,7 +471,7 @@ export default class AdvancedAggregation extends Component<AdvancedAggregationPr
                     data-test-subj="addFieldsAggregationAdd"
                   >
                     Add
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiModalFooter>
               </EuiModal>
             </EuiOverlayMask>
diff --git a/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx b/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx
index 0b57763a8..668f51b32 100644
--- a/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx
+++ b/public/pages/CreateRollup/components/ConfigureRollup/ConfigureRollup.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 
 interface ConfigureRollupProps {
@@ -20,9 +20,15 @@ const ConfigureRollup = ({ isEdit, rollupId, rollupIdError, onChangeName, onChan
   <ContentPanel bodyStyles={{ padding: "initial" }} title="Job name and description" titleSize="s">
     <div style={{ paddingLeft: "10px" }}>
       <EuiSpacer size="s" />
-      <EuiFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!rollupIdError} error={rollupIdError}>
-        <EuiFieldText isInvalid={!!rollupIdError} placeholder="my-rollupjob1" value={rollupId} onChange={onChangeName} disabled={isEdit} />
-      </EuiFormRow>
+      <EuiCompressedFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!rollupIdError} error={rollupIdError}>
+        <EuiCompressedFieldText
+          isInvalid={!!rollupIdError}
+          placeholder="my-rollupjob1"
+          value={rollupId}
+          onChange={onChangeName}
+          disabled={isEdit}
+        />
+      </EuiCompressedFormRow>
       <EuiSpacer />
       <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem grow={false}>
@@ -37,9 +43,9 @@ const ConfigureRollup = ({ isEdit, rollupId, rollupIdError, onChangeName, onChan
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="xs" />
-      <EuiFormRow>
+      <EuiCompressedFormRow>
         <EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </div>
   </ContentPanel>
 );
diff --git a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
index 4441abdf5..e48fb485a 100644
--- a/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
+++ b/public/pages/CreateRollup/components/MetricsCalculation/MetricsCalculation.tsx
@@ -6,8 +6,8 @@
 import React, { ChangeEvent, Component, Fragment } from "react";
 import {
   EuiBasicTable,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
@@ -22,7 +22,7 @@ import {
   EuiTableSelectionType,
   EuiCheckbox,
   EuiText,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPanel,
   EuiTitle,
   EuiFormHelpText,
@@ -260,7 +260,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         truncateText: true,
         render: (all: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow>
+            <EuiCompressedFormRow>
               <EuiCheckbox
                 compressed
                 id={`all-${item.source_field.label}`}
@@ -268,7 +268,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 onChange={(e) => this.setChecked(e, "all", item)}
                 data-test-subj={`all-${item.source_field.label}`}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         ),
       },
@@ -278,7 +278,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (min: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow>
+            <EuiCompressedFormRow>
               <EuiCheckbox
                 compressed
                 id={`min-${item.source_field.label}`}
@@ -286,7 +286,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 onChange={(e) => this.setChecked(e, "min", item)}
                 data-test-subj={`min-${item.source_field.label}`}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         ),
       },
@@ -296,7 +296,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (max: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow>
+            <EuiCompressedFormRow>
               <EuiCheckbox
                 compressed
                 id={`max-${item.source_field.label}`}
@@ -304,7 +304,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 onChange={(e) => this.setChecked(e, "max", item)}
                 data-test-subj={`max-${item.source_field.label}`}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         ),
       },
@@ -314,7 +314,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (sum: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow>
+            <EuiCompressedFormRow>
               <EuiCheckbox
                 compressed
                 id={`sum-${item.source_field.label}`}
@@ -322,7 +322,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 onChange={(e) => this.setChecked(e, "sum", item)}
                 data-test-subj={`sum-${item.source_field.label}`}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         ),
       },
@@ -332,7 +332,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (avg: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow>
+            <EuiCompressedFormRow>
               <EuiCheckbox
                 compressed
                 id={`avg-${item.source_field.label}`}
@@ -340,7 +340,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 onChange={(e) => this.setChecked(e, "avg", item)}
                 data-test-subj={`avg-${item.source_field.label}`}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         ),
       },
@@ -350,7 +350,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
         align: "center",
         render: (value_count: boolean, item: MetricItem) => (
           <EuiForm>
-            <EuiFormRow>
+            <EuiCompressedFormRow>
               <EuiCheckbox
                 compressed
                 id={`value_count-${item.source_field.label}`}
@@ -358,7 +358,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 onChange={(e) => this.setChecked(e, "value_count", item)}
                 data-test-subj={`valueCount-${item.source_field.label}`}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         ),
       },
@@ -529,9 +529,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
               <EuiFlexItem grow={false}>
                 <EuiPopover
                   button={
-                    <EuiButton iconType="arrowDown" iconSide="right" onClick={this.showDisable} disabled={selectedMetrics.length == 0}>
+                    <EuiSmallButton iconType="arrowDown" iconSide="right" onClick={this.showDisable} disabled={selectedMetrics.length == 0}>
                       Disable all
-                    </EuiButton>
+                    </EuiSmallButton>
                   }
                   isOpen={isDisableOpen}
                   closePopover={this.closeDisable}
@@ -544,9 +544,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
               <EuiFlexItem grow={false}>
                 <EuiPopover
                   button={
-                    <EuiButton iconType="arrowDown" iconSide="right" onClick={this.showEnable} disabled={selectedMetrics.length == 0}>
+                    <EuiSmallButton iconType="arrowDown" iconSide="right" onClick={this.showEnable} disabled={selectedMetrics.length == 0}>
                       Enable all
-                    </EuiButton>
+                    </EuiSmallButton>
                   }
                   isOpen={isEnableOpen}
                   closePopover={this.closeEnable}
@@ -557,9 +557,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 </EuiPopover>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton onClick={this.showModal} data-test-subj="addFieldsMetric">
+                <EuiSmallButton onClick={this.showModal} data-test-subj="addFieldsMetric">
                   Add fields
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
@@ -601,9 +601,9 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                     <EuiSpacer />
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={this.showModal} data-test-subj="addFieldsMetricEmpty">
+                    <EuiSmallButton onClick={this.showModal} data-test-subj="addFieldsMetricEmpty">
                       Add fields
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem>
                     <EuiSpacer />
@@ -639,10 +639,10 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                 </EuiModalBody>
 
                 <EuiModalFooter>
-                  <EuiButtonEmpty onClick={this.closeModal} data-test-subj="addFieldsMetricCancel">
+                  <EuiSmallButtonEmpty onClick={this.closeModal} data-test-subj="addFieldsMetricCancel">
                     Cancel
-                  </EuiButtonEmpty>
-                  <EuiButton
+                  </EuiSmallButtonEmpty>
+                  <EuiSmallButton
                     fill
                     onClick={() => {
                       this.closeModal();
@@ -651,7 +651,7 @@ export default class MetricsCalculation extends Component<MetricsCalculationProp
                     data-test-subj="addFieldsMetricAdd"
                   >
                     Add
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiModalFooter>
               </EuiModal>
             </EuiOverlayMask>
diff --git a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
index e30a67b25..190337431 100644
--- a/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
+++ b/public/pages/CreateRollup/components/RollupIndices/RollupIndices.tsx
@@ -4,10 +4,10 @@
  */
 
 import React, { Component, Fragment } from "react";
-import { EuiSpacer, EuiFormRow, EuiCallOut, EuiText, EuiLink } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiCallOut, EuiText, EuiLink } from "@elastic/eui";
 import { EuiComboBoxOptionOption } from "@elastic/eui/src/components/combo_box/types";
 import _ from "lodash";
-import EuiComboBox from "../../../../components/ComboBoxWithoutWarning";
+import EuiCompressedComboBox from "../../../../components/ComboBoxWithoutWarning";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { IndexItem } from "../../../../../models/interfaces";
 import IndexService from "../../../../services/IndexService";
@@ -136,13 +136,13 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
             </Fragment>
           )}
           <EuiSpacer size="m" />
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Source index"
             error={sourceIndexError}
             isInvalid={sourceIndexError != ""}
             helpText="The index pattern on which to performed the rollup job. You can use * as a wildcard."
           >
-            <EuiComboBox
+            <EuiCompressedComboBox
               placeholder="Select source index"
               options={indexOptions}
               selectedOptions={sourceIndex}
@@ -153,9 +153,9 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
               isInvalid={sourceIndexError != ""}
               data-test-subj="sourceIndexCombobox"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Target index"
             error={targetIndexError}
             isInvalid={targetIndexError != ""}
@@ -172,7 +172,7 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
               </EuiText>
             }
           >
-            <EuiComboBox
+            <EuiCompressedComboBox
               placeholder="Select or create target index"
               options={targetIndexOptions}
               selectedOptions={targetIndex}
@@ -184,7 +184,7 @@ export default class RollupIndices extends Component<RollupIndicesProps, RollupI
               isInvalid={targetIndexError != ""}
               data-test-subj="targetIndexCombobox"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </div>
       </ContentPanel>
     );
diff --git a/public/pages/CreateRollup/components/Schedule/Schedule.tsx b/public/pages/CreateRollup/components/Schedule/Schedule.tsx
index 1162b33f1..0328f0470 100644
--- a/public/pages/CreateRollup/components/Schedule/Schedule.tsx
+++ b/public/pages/CreateRollup/components/Schedule/Schedule.tsx
@@ -7,11 +7,11 @@ import React, { ChangeEvent, Component } from "react";
 import moment from "moment-timezone";
 import {
   EuiSpacer,
-  EuiCheckbox,
-  EuiRadioGroup,
-  EuiFormRow,
-  EuiSelect,
-  EuiFieldNumber,
+  EuiCompressedCheckbox,
+  EuiCompressedRadioGroup,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
+  EuiCompressedFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
   EuiTextArea,
@@ -69,20 +69,20 @@ const selectInterval = (
   <React.Fragment>
     <EuiFlexGroup style={{ maxWidth: 400 }}>
       <EuiFlexItem grow={false} style={{ width: 200 }}>
-        <EuiFormRow label="Rollup interval" error={intervalError} isInvalid={intervalError != ""}>
-          <EuiFieldNumber value={interval} onChange={onChangeInterval} isInvalid={intervalError != ""} />
-        </EuiFormRow>
+        <EuiCompressedFormRow label="Rollup interval" error={intervalError} isInvalid={intervalError != ""}>
+          <EuiCompressedFieldNumber value={interval} onChange={onChangeInterval} isInvalid={intervalError != ""} />
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFormRow hasEmptyLabelSpace={true}>
-          <EuiSelect
+        <EuiCompressedFormRow hasEmptyLabelSpace={true}>
+          <EuiCompressedSelect
             id="selectIntervalTimeunit"
             options={ScheduleIntervalTimeunitOptions}
             value={intervalTimeunit}
             onChange={onChangeTimeunit}
             isInvalid={interval == undefined || interval <= 0}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
     </EuiFlexGroup>
   </React.Fragment>
@@ -90,9 +90,14 @@ const selectInterval = (
 
 const isContinuous = (continuousJob: string, onChangeContinuousJob: (optionId: string) => void) => (
   <React.Fragment>
-    <EuiFormRow label="Continuous">
-      <EuiRadioGroup options={radios} idSelected={continuousJob} onChange={(id) => onChangeContinuousJob(id)} name="continuousJob" />
-    </EuiFormRow>
+    <EuiCompressedFormRow label="Continuous">
+      <EuiCompressedRadioGroup
+        options={radios}
+        idSelected={continuousJob}
+        onChange={(id) => onChangeContinuousJob(id)}
+        name="continuousJob"
+      />
+    </EuiCompressedFormRow>
     <EuiSpacer size="m" />
   </React.Fragment>
 );
@@ -133,7 +138,7 @@ export default class Schedule extends Component<ScheduleProps> {
       <ContentPanel bodyStyles={{ padding: "initial" }} title="Schedule" titleSize="s">
         <div style={{ paddingLeft: "10px" }}>
           {!isEdit && (
-            <EuiCheckbox
+            <EuiCompressedCheckbox
               id="jobEnabledByDefault"
               label="Enable job by default"
               checked={jobEnabledByDefault}
@@ -144,8 +149,8 @@ export default class Schedule extends Component<ScheduleProps> {
           <EuiSpacer size="m" />
           {!isEdit && isContinuous(continuousJob, onChangeContinuousJob)}
 
-          <EuiFormRow label="Rollup execution frequency">
-            <EuiSelect
+          <EuiCompressedFormRow label="Rollup execution frequency">
+            <EuiCompressedSelect
               id="continuousDefinition"
               options={[
                 { value: "fixed", text: "Define by fixed interval" },
@@ -154,30 +159,30 @@ export default class Schedule extends Component<ScheduleProps> {
               value={continuousDefinition}
               onChange={onChangeContinuousDefinition}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer size="m" />
 
           {continuousDefinition == "fixed" ? (
             selectInterval(interval, intervalTimeunit, intervalError, onChangeIntervalTime, onChangeIntervalTimeunit)
           ) : (
             <React.Fragment>
-              <EuiFormRow label="Define by cron expression">
+              <EuiCompressedFormRow label="Define by cron expression">
                 <EuiTextArea value={cronExpression} onChange={onChangeCron} compressed={true} />
-              </EuiFormRow>
-              <EuiFormRow label="Timezone" helpText="A day starts from 00:00:00 in the specified timezone.">
-                <EuiSelect id="timezone" options={timezones} value={cronTimezone} onChange={onChangeCronTimezone} />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
+              <EuiCompressedFormRow label="Timezone" helpText="A day starts from 00:00:00 in the specified timezone.">
+                <EuiCompressedSelect id="timezone" options={timezones} value={cronTimezone} onChange={onChangeCronTimezone} />
+              </EuiCompressedFormRow>
             </React.Fragment>
           )}
 
           <EuiSpacer size="m" />
 
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Page per execution"
             helpText="The number of pages every execution processes. A larger number means faster execution and higher costs on memory."
           >
-            <EuiFieldNumber min={1} placeholder="1000" value={pageSize} onChange={onChangePage} />
-          </EuiFormRow>
+            <EuiCompressedFieldNumber min={1} placeholder="1000" value={pageSize} onChange={onChangePage} />
+          </EuiCompressedFormRow>
           <EuiSpacer size="m" />
           <EuiFlexGroup style={{ maxWidth: 400 }}>
             <EuiFlexItem grow={false} style={{ width: 200 }}>
@@ -193,14 +198,19 @@ export default class Schedule extends Component<ScheduleProps> {
                   </EuiText>
                 </EuiFlexItem>
               </EuiFlexGroup>
-              <EuiFormRow>
-                <EuiFieldNumber value={delayTime} onChange={onChangeDelayTime} />
-              </EuiFormRow>
+              <EuiCompressedFormRow>
+                <EuiCompressedFieldNumber value={delayTime} onChange={onChangeDelayTime} />
+              </EuiCompressedFormRow>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiFormRow hasEmptyLabelSpace={true}>
-                <EuiSelect id="selectTimeunit" options={DelayTimeunitOptions} value={delayTimeunit} onChange={onChangeDelayTimeunit} />
-              </EuiFormRow>
+              <EuiCompressedFormRow hasEmptyLabelSpace={true}>
+                <EuiCompressedSelect
+                  id="selectTimeunit"
+                  options={DelayTimeunitOptions}
+                  value={delayTimeunit}
+                  onChange={onChangeDelayTimeunit}
+                />
+              </EuiCompressedFormRow>
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiFormHelpText style={{ maxWidth: 400 }}>
diff --git a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
index cae95d2d6..dea4b8f83 100644
--- a/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
+++ b/public/pages/CreateRollup/components/TimeAggregations/TimeAggregation.tsx
@@ -6,12 +6,12 @@
 import React, { ChangeEvent, Component, Fragment } from "react";
 import {
   EuiSpacer,
-  EuiFormRow,
-  EuiSelect,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldNumber,
-  EuiRadioGroup,
+  EuiCompressedFieldNumber,
+  EuiCompressedRadioGroup,
   EuiComboBoxOptionOption,
   EuiPanel,
   EuiTitle,
@@ -20,7 +20,7 @@ import {
   EuiText,
 } from "@elastic/eui";
 import moment from "moment-timezone";
-import EuiComboBox from "../../../../components/ComboBoxWithoutWarning";
+import EuiCompressedComboBox from "../../../../components/ComboBoxWithoutWarning";
 import { RollupService } from "../../../../services";
 import { FieldItem } from "../../../../../models/interfaces";
 import { CalendarTimeunitOptions, FixedTimeunitOptions } from "../../../../utils/constants";
@@ -92,8 +92,8 @@ export default class TimeAggregation extends Component<TimeAggregationProps, Tim
         <EuiHorizontalRule margin="xs" />
         <div style={{ paddingLeft: "10px" }}>
           <EuiSpacer size="s" />
-          <EuiFormRow label="Timestamp field" error={timestampError} isInvalid={!!timestampError}>
-            <EuiComboBox
+          <EuiCompressedFormRow label="Timestamp field" error={timestampError} isInvalid={!!timestampError}>
+            <EuiCompressedComboBox
               placeholder="Select timestamp"
               options={dateFields}
               selectedOptions={selectedTimestamp}
@@ -101,57 +101,66 @@ export default class TimeAggregation extends Component<TimeAggregationProps, Tim
               singleSelection={{ asPlainText: true }}
               isInvalid={!!timestampError}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer size="m" />
-          <EuiFormRow label="Interval type">
-            <EuiRadioGroup options={radios} idSelected={intervalType} onChange={(id) => onChangeIntervalType(id)} name="intervalType" />
-          </EuiFormRow>
+          <EuiCompressedFormRow label="Interval type">
+            <EuiCompressedRadioGroup
+              options={radios}
+              idSelected={intervalType}
+              onChange={(id) => onChangeIntervalType(id)}
+              name="intervalType"
+            />
+          </EuiCompressedFormRow>
           <EuiFlexGroup style={{ maxWidth: 300 }}>
             {intervalType == "fixed" ? (
               <Fragment>
                 <EuiSpacer size="m" />
                 <EuiFlexItem grow={false} style={{ width: 100 }}>
-                  <EuiFormRow label="Interval">
-                    <EuiFieldNumber min={1} value={intervalType == "fixed" ? intervalValue : 1} onChange={onChangeIntervalValue} />
-                  </EuiFormRow>
+                  <EuiCompressedFormRow label="Interval">
+                    <EuiCompressedFieldNumber
+                      min={1}
+                      value={intervalType == "fixed" ? intervalValue : 1}
+                      onChange={onChangeIntervalValue}
+                    />
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <EuiFormRow hasEmptyLabelSpace={true}>
-                    <EuiSelect
+                  <EuiCompressedFormRow hasEmptyLabelSpace={true}>
+                    <EuiCompressedSelect
                       id="selectTimeunit"
                       options={intervalType == "fixed" ? FixedTimeunitOptions : CalendarTimeunitOptions}
                       value={timeunit}
                       onChange={onChangeTimeunit}
                     />
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
               </Fragment>
             ) : (
               <Fragment>
                 <EuiFlexItem grow={false}>
-                  <EuiFormRow hasEmptyLabelSpace={true}>
+                  <EuiCompressedFormRow hasEmptyLabelSpace={true}>
                     <EuiText size="m">
                       <dd>Every 1</dd>{" "}
                     </EuiText>
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <EuiFormRow hasEmptyLabelSpace={true}>
-                    <EuiSelect
+                  <EuiCompressedFormRow hasEmptyLabelSpace={true}>
+                    <EuiCompressedSelect
                       id="selectTimeunit"
                       options={intervalType == "fixed" ? FixedTimeunitOptions : CalendarTimeunitOptions}
                       value={timeunit}
                       onChange={onChangeTimeunit}
                     />
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
               </Fragment>
             )}
           </EuiFlexGroup>
           <EuiSpacer size="m" />
-          <EuiFormRow label="Timezone" helpText="A day starts from 00:00:00 in the specified timezone.">
-            <EuiSelect id="timezone" options={timezones} value={timezone} onChange={onChangeTimezone} />
-          </EuiFormRow>
+          <EuiCompressedFormRow label="Timezone" helpText="A day starts from 00:00:00 in the specified timezone.">
+            <EuiCompressedSelect id="timezone" options={timezones} value={timezone} onChange={onChangeTimezone} />
+          </EuiCompressedFormRow>
         </div>
       </EuiPanel>
     );
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
index 88181854b..4f7db9022 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
+++ b/public/pages/CreateRollup/containers/CreateRollupForm/CreateRollupForm.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, useContext } from "react";
-import { EuiButton, EuiButtonEmpty, EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSmallButton, EuiSmallButtonEmpty, EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { RouteComponentProps, useHistory } from "react-router-dom";
 import moment from "moment";
 import { RollupService } from "../../../../services";
@@ -701,29 +701,29 @@ export class CreateRollupForm extends Component<CreateRollupFormProps, CreateRol
         />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createRollupCancelButton">
+            <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createRollupCancelButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           {currentStep != 1 && (
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={this._prev} data-test-subj="createRollupPreviousButton">
+              <EuiSmallButton onClick={this._prev} data-test-subj="createRollupPreviousButton">
                 Previous
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           )}
 
           {currentStep == 4 ? (
             <EuiFlexItem grow={false}>
-              <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createRollupSubmitButton">
+              <EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createRollupSubmitButton">
                 Create
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           ) : (
             <EuiFlexItem grow={false}>
-              <EuiButton fill onClick={this._next} data-test-subj="createRollupNextButton">
+              <EuiSmallButton fill onClick={this._next} data-test-subj="createRollupNextButton">
                 Next
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
diff --git a/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap b/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap
index d819a3be0..a0764b936 100644
--- a/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap
+++ b/public/pages/CreateRollup/containers/CreateRollupForm/__snapshots__/CreateRollupForm.test.tsx.snap
@@ -196,7 +196,7 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
                   class="euiSpacer euiSpacer--s"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -214,14 +214,14 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
                           aria-describedby="some_html_id-help-0"
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="some_html_id"
                           placeholder="my-rollupjob1"
                           type="text"
@@ -274,7 +274,7 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
                   class="euiSpacer euiSpacer--xs"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -349,7 +349,7 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
                   class="euiSpacer euiSpacer--m"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -370,18 +370,18 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
                       aria-describedby="some_html_id-help-0"
                       aria-expanded="false"
                       aria-haspopup="listbox"
-                      class="euiComboBox"
+                      class="euiComboBox euiComboBox--compressed"
                       data-test-subj="sourceIndexCombobox"
                       role="combobox"
                     >
                       <div
-                        class="euiFormControlLayout"
+                        class="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
                           class="euiFormControlLayout__childrenWrapper"
                         >
                           <div
-                            class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                             data-test-subj="comboBoxInput"
                             tabindex="-1"
                           >
@@ -434,7 +434,7 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -455,18 +455,18 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
                       aria-describedby="some_html_id-help-0"
                       aria-expanded="false"
                       aria-haspopup="listbox"
-                      class="euiComboBox"
+                      class="euiComboBox euiComboBox--compressed"
                       data-test-subj="targetIndexCombobox"
                       role="combobox"
                     >
                       <div
-                        class="euiFormControlLayout"
+                        class="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
                           class="euiFormControlLayout__childrenWrapper"
                         >
                           <div
-                            class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                             data-test-subj="comboBoxInput"
                             tabindex="-1"
                           >
@@ -553,7 +553,7 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
           data-test-subj="createRollupCancelButton"
           type="button"
         >
@@ -572,7 +572,7 @@ exports[`<CreateRollupForm /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           data-test-subj="createRollupNextButton"
           type="button"
         >
diff --git a/public/pages/CreateSnapshotPolicy/components/CronSchedule/CronSchedule.tsx b/public/pages/CreateSnapshotPolicy/components/CronSchedule/CronSchedule.tsx
index 6536e4e8d..05daa9c4d 100644
--- a/public/pages/CreateSnapshotPolicy/components/CronSchedule/CronSchedule.tsx
+++ b/public/pages/CreateSnapshotPolicy/components/CronSchedule/CronSchedule.tsx
@@ -7,15 +7,15 @@ import _ from "lodash";
 import React, { ChangeEvent, useEffect, useState } from "react";
 import {
   EuiCheckbox,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiDatePicker,
-  EuiFieldNumber,
-  EuiFieldText,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
 } from "@elastic/eui";
@@ -143,10 +143,10 @@ const CronSchedule = ({
         <CustomLabel title="On the" />
         <EuiFlexGroup gutterSize="m">
           <EuiFlexItem>
-            <EuiSelect options={[{ value: "day", text: "Day" }]} defaultValue="Day" />
+            <EuiCompressedSelect options={[{ value: "day", text: "Day" }]} defaultValue="Day" />
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFieldNumber
+            <EuiCompressedFieldNumber
               value={dayOfMonth}
               onChange={(e) => {
                 onDayOfMonthChange(parseInt(e.target.value));
@@ -174,7 +174,12 @@ const CronSchedule = ({
   return (
     <>
       <CustomLabel title={frequencyTitle} />
-      <EuiSelect id="creationCronScheduleType" options={CRON_SCHEDULE_FREQUENCY_TYPE} value={frequencyType} onChange={onTypeChange} />
+      <EuiCompressedSelect
+        id="creationCronScheduleType"
+        options={CRON_SCHEDULE_FREQUENCY_TYPE}
+        value={frequencyType}
+        onChange={onTypeChange}
+      />
 
       <EuiSpacer size="m" />
 
@@ -183,14 +188,14 @@ const CronSchedule = ({
           {frequencyType === "custom" ? (
             <>
               <CustomLabel title="Cron expression" />
-              <EuiFormRow helpText={cronExpressionHelpText}>
-                <EuiFieldText
+              <EuiCompressedFormRow helpText={cronExpressionHelpText}>
+                <EuiCompressedFieldText
                   value={cronExpression}
                   onChange={(e) => {
                     onCronExpressionChange(e.target.value);
                   }}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </>
           ) : (
             <>
@@ -207,8 +212,8 @@ const CronSchedule = ({
         {showTimezone ? (
           <EuiFlexItem style={{ maxWidth: 250 }}>
             <CustomLabel title="Time zone" />
-            <EuiFormRow isInvalid={!!timezoneError} error={timezoneError}>
-              <EuiComboBox
+            <EuiCompressedFormRow isInvalid={!!timezoneError} error={timezoneError}>
+              <EuiCompressedComboBox
                 placeholder="Select a time zone"
                 singleSelection={{ asPlainText: true }}
                 options={TIMEZONES}
@@ -220,7 +225,7 @@ const CronSchedule = ({
                   }
                 }}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         ) : null}
       </EuiFlexGroup>
diff --git a/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx b/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx
index f0ea456aa..216ed7914 100644
--- a/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx
+++ b/public/pages/CreateSnapshotPolicy/components/Notification/Notification.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiFormRow, EuiSelect, EuiButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedSelect, EuiSmallButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { FeatureChannelList } from "../../../../../server/models/interfaces";
@@ -24,8 +24,8 @@ const Notification = ({ channelId, channels, loadingChannels, onChangeChannelId,
       <CustomLabel title="Select notification channels" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: 600 }}>
         <EuiFlexItem>
-          <EuiFormRow>
-            <EuiSelect
+          <EuiCompressedFormRow>
+            <EuiCompressedSelect
               id="channel-id"
               placeholder="Select channel ID"
               hasNoInitialSelection
@@ -35,10 +35,10 @@ const Notification = ({ channelId, channels, loadingChannels, onChangeChannelId,
               onChange={onChangeChannelId}
               data-test-subj="create-policy-notification-channel-id"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             iconType="refresh"
             onClick={getChannels}
             disabled={loadingChannels}
@@ -47,9 +47,9 @@ const Notification = ({ channelId, channels, loadingChannels, onChangeChannelId,
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
             Manage channels
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
index 1bdd8ac79..a67bf9683 100644
--- a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
+++ b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiCheckbox, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedCheckbox, EuiSpacer } from "@elastic/eui";
 import CustomLabel from "../../../../components/CustomLabel";
 import React, { ChangeEvent } from "react";
 
@@ -27,7 +27,7 @@ const SnapshotAdvancedSettings = ({
   width,
 }: SnapshotAdvancedSettingsProps) => (
   <div style={{ padding: "10px 10px", width: width }}>
-    <EuiCheckbox
+    <EuiCompressedCheckbox
       id="include_global_state"
       label={<CustomLabel title="Include cluster state in snapshots" />}
       checked={includeGlobalState}
@@ -36,7 +36,7 @@ const SnapshotAdvancedSettings = ({
 
     <EuiSpacer size="m" />
 
-    <EuiCheckbox
+    <EuiCompressedCheckbox
       id="ignore_unavailable"
       label={
         <CustomLabel
@@ -50,7 +50,7 @@ const SnapshotAdvancedSettings = ({
 
     <EuiSpacer size="m" />
 
-    <EuiCheckbox
+    <EuiCompressedCheckbox
       id="partial"
       label={<CustomLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
       checked={partial}
diff --git a/public/pages/CreateSnapshotPolicy/components/SnapshotIndicesRepoInput/SnapshotIndicesRepoInput.tsx b/public/pages/CreateSnapshotPolicy/components/SnapshotIndicesRepoInput/SnapshotIndicesRepoInput.tsx
index 590889cdc..f9e2ea5c6 100644
--- a/public/pages/CreateSnapshotPolicy/components/SnapshotIndicesRepoInput/SnapshotIndicesRepoInput.tsx
+++ b/public/pages/CreateSnapshotPolicy/components/SnapshotIndicesRepoInput/SnapshotIndicesRepoInput.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiButton,
-  EuiComboBox,
+  EuiSmallButton,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
   EuiSelectOption,
   EuiSpacer,
 } from "@elastic/eui";
@@ -65,7 +65,7 @@ const SnapshotIndicesRepoInput = ({
   return (
     <>
       <CustomLabel title="Select or input source indexes or index patterns" />
-      <EuiComboBox
+      <EuiCompressedComboBox
         placeholder="Select or input indexes or index patterns"
         options={indexOptions}
         selectedOptions={selectedIndexOptions}
@@ -81,20 +81,20 @@ const SnapshotIndicesRepoInput = ({
       <EuiFlexGroup alignItems="flexEnd">
         <EuiFlexItem style={{ maxWidth: "400px" }}>
           <CustomLabel title="Select a repository for snapshots" />
-          <EuiFormRow isInvalid={!!repoError} error={repoError}>
-            <EuiSelect
+          <EuiCompressedFormRow isInvalid={!!repoError} error={repoError}>
+            <EuiCompressedSelect
               placeholder="Select a repository"
               disabled={repoOptions.length === 0}
               options={repoOptions}
               value={selectedRepoValue}
               onChange={onRepoSelectionChange}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
 
         {showFlyout != null && (
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={openFlyout}>Create repository</EuiButton>
+            <EuiSmallButton onClick={openFlyout}>Create repository</EuiSmallButton>
           </EuiFlexItem>
         )}
       </EuiFlexGroup>
diff --git a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
index affcf0835..fc5f23a55 100644
--- a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
+++ b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
@@ -6,27 +6,26 @@
 import _ from "lodash";
 import queryString from "query-string";
 import {
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiTextArea,
-  EuiSelect,
-  EuiFieldText,
+  EuiCompressedSelect,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
   EuiTitle,
-  EuiButtonEmpty,
-  EuiButton,
+  EuiSmallButtonEmpty,
+  EuiSmallButton,
   EuiComboBoxOptionOption,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiAccordion,
-  EuiRadioGroup,
+  EuiCompressedRadioGroup,
   EuiText,
-  EuiCheckbox,
+  EuiCompressedCheckbox,
   EuiPanel,
   EuiHorizontalRule,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiLink,
-  EuiCompressedRadioGroup,
 } from "@elastic/eui";
 import React, { ChangeEvent, Component, useContext } from "react";
 import { RouteComponentProps } from "react-router-dom";
@@ -585,14 +584,19 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <ContentPanel title="Policy settings" titleSize="s">
           <CustomLabel title="Policy name" />
-          <EuiFormRow isInvalid={!!policyIdError} error={policyIdError}>
-            <EuiFieldText placeholder="e.g. daily-snapshot" value={policyId} onChange={this.onChangePolicyName} disabled={isEdit} />
-          </EuiFormRow>
+          <EuiCompressedFormRow isInvalid={!!policyIdError} error={policyIdError}>
+            <EuiCompressedFieldText
+              placeholder="e.g. daily-snapshot"
+              value={policyId}
+              onChange={this.onChangePolicyName}
+              disabled={isEdit}
+            />
+          </EuiCompressedFormRow>
 
           <EuiSpacer />
 
           <CustomLabel title="Description" isOptional={true} />
-          <EuiFormRow>
+          <EuiCompressedFormRow>
             <EuiTextArea
               compressed={true}
               value={_.get(policy, "description", "")}
@@ -600,7 +604,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               placeholder="Snapshot management daily policy."
               data-test-subj="description"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </ContentPanel>
 
         <EuiSpacer />
@@ -672,7 +676,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               <CustomLabel title="Maximum age of snapshots retained" />
               <EuiFlexGroup>
                 <EuiFlexItem grow={false}>
-                  <EuiFieldNumber
+                  <EuiCompressedFieldNumber
                     value={maxAgeNum}
                     min={1}
                     onChange={(e) => {
@@ -681,7 +685,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
                   />
                 </EuiFlexItem>
                 <EuiFlexItem style={{ maxWidth: 100 }}>
-                  <EuiSelect
+                  <EuiCompressedSelect
                     options={MAX_AGE_UNIT_OPTIONS}
                     value={maxAgeUnit}
                     onChange={(e) => {
@@ -700,19 +704,23 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
                 <EuiFlexGroup alignItems="flexStart">
                   <EuiFlexItem grow={false}>
                     <CustomLabel title="Minimum" />
-                    <EuiFormRow isInvalid={!!minCountError} error={minCountError}>
-                      <EuiFieldNumber
+                    <EuiCompressedFormRow isInvalid={!!minCountError} error={minCountError}>
+                      <EuiCompressedFieldNumber
                         min={1}
                         value={_.get(policy, "deletion.condition.min_count") ?? "1"}
                         onChange={this.onChangeMinCount}
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
                     <CustomLabel title="Maximum" isOptional={true} />
-                    <EuiFormRow>
-                      <EuiFieldNumber min={1} value={_.get(policy, "deletion.condition.max_count", "")} onChange={this.onChangeMaxCount} />
-                    </EuiFormRow>
+                    <EuiCompressedFormRow>
+                      <EuiCompressedFieldNumber
+                        min={1}
+                        value={_.get(policy, "deletion.condition.max_count", "")}
+                        onChange={this.onChangeMaxCount}
+                      />
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                 </EuiFlexGroup>
 
@@ -724,7 +732,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
                 </span>
                 <EuiSpacer size="s" />
 
-                <EuiCheckbox
+                <EuiCompressedCheckbox
                   id="delete_schedule_checkbox"
                   label="Same as snapshot frequency"
                   checked={!deletionScheduleEnabled}
@@ -760,7 +768,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
             <EuiText>Notify on snapshot activities</EuiText>
 
             <EuiSpacer size="s" />
-            <EuiCheckbox
+            <EuiCompressedCheckbox
               id="notification-creation"
               label="When a snapshot has been created."
               checked={getNotifyCreation(policy)}
@@ -771,7 +779,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
             <EuiSpacer size="s" />
 
-            <EuiCheckbox
+            <EuiCompressedCheckbox
               id="notification-deletion"
               label="When a snapshots has been deleted."
               checked={getNotifyDeletion(policy)}
@@ -782,7 +790,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
             <EuiSpacer size="s" />
 
-            <EuiCheckbox
+            <EuiCompressedCheckbox
               id="notification-failure"
               label="When a snapshot has failed."
               checked={getNotifyFailure(policy)}
@@ -808,7 +816,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
         <EuiPanel style={{ paddingLeft: "0px", paddingRight: "0px" }}>
           <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="flexStart" alignItems="center" gutterSize="none">
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 iconType={advancedSettingsOpen ? "arrowDown" : "arrowRight"}
                 color="text"
                 onClick={() => {
@@ -849,7 +857,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
                 <EuiSpacer size="s" />
 
                 <CustomLabel title="Timestamp format" />
-                <EuiFieldText
+                <EuiCompressedFieldText
                   value={dateFormat}
                   onChange={(e) => {
                     let dateFormat = e.target.value;
@@ -884,13 +892,13 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiFlexGroup justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onClickCancel}>Cancel</EuiButtonEmpty>
+            <EuiSmallButtonEmpty onClick={this.onClickCancel}>Cancel</EuiSmallButtonEmpty>
           </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onClickSubmit} isLoading={isSubmitting}>
+            <EuiSmallButton fill onClick={this.onClickSubmit} isLoading={isSubmitting}>
               {isEdit ? "Update" : "Create"}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
index db7c6b4d7..c35cd6d75 100644
--- a/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
+++ b/public/pages/CreateTransform/components/ConfigureTransform/ConfigureTransform.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 
 interface ConfigureTransformProps {
@@ -26,15 +26,20 @@ const ConfigureTransform = ({
 }: ConfigureTransformProps) => (
   <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Job name and description" titleSize="m">
     <div>
-      <EuiFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!transformIdError} error={transformIdError}>
-        <EuiFieldText
+      <EuiCompressedFormRow
+        label="Name"
+        helpText="Specify a unique, descriptive name."
+        isInvalid={!!transformIdError}
+        error={transformIdError}
+      >
+        <EuiCompressedFieldText
           isInvalid={!!transformIdError}
           placeholder="my-transformjob1"
           value={transformId}
           onChange={onChangeName}
           disabled={isEdit}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       <EuiSpacer />
       <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem grow={false}>
@@ -49,9 +54,9 @@ const ConfigureTransform = ({
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="xs" />
-      <EuiFormRow>
+      <EuiCompressedFormRow>
         <EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </div>
   </ContentPanel>
 );
diff --git a/public/pages/CreateTransform/components/IndexFilterPopover/IndexFilterPopover.tsx b/public/pages/CreateTransform/components/IndexFilterPopover/IndexFilterPopover.tsx
index 8a3d9a8d7..7baaea5fc 100644
--- a/public/pages/CreateTransform/components/IndexFilterPopover/IndexFilterPopover.tsx
+++ b/public/pages/CreateTransform/components/IndexFilterPopover/IndexFilterPopover.tsx
@@ -7,14 +7,14 @@ import React, { ChangeEvent, useState } from "react";
 import {
   EuiForm,
   EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
   EuiPopoverTitle,
   EuiSpacer,
   EuiFlexGroup,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiCodeEditor,
-  EuiButton,
+  EuiSmallButton,
 } from "@elastic/eui";
 import { FieldItem, IndexItem } from "../../../../../models/interfaces";
 
@@ -52,8 +52,8 @@ export default function IndexFilterPopover({
       <div>
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
-            <EuiFormRow label="Field">
-              <EuiSelect
+            <EuiCompressedFormRow label="Field">
+              <EuiCompressedSelect
                 id="selectField"
                 options={fields.map((item) => {
                   return {
@@ -64,24 +64,24 @@ export default function IndexFilterPopover({
                 value={selectedField}
                 onChange={onChangeSelectedField}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow label="Operator">
-              <EuiSelect
+            <EuiCompressedFormRow label="Operator">
+              <EuiCompressedSelect
                 id="selectOperator"
                 options={[]}
                 // {getOperators(selectedField?.type)}
                 value={selectedOperator}
                 onChange={onChangeSelectedOperator}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiFlexItem>
-          <EuiFormRow label="Value">
-            <EuiSelect id="selectValue" options={[]} value={selectedValue} onChange={onChangeSelectedValue} />
-          </EuiFormRow>
+          <EuiCompressedFormRow label="Value">
+            <EuiCompressedSelect id="selectValue" options={[]} value={selectedValue} onChange={onChangeSelectedValue} />
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </div>
     );
@@ -89,14 +89,14 @@ export default function IndexFilterPopover({
 
   function customEditor() {
     return (
-      <EuiFormRow label="Custom query DSL">
+      <EuiCompressedFormRow label="Custom query DSL">
         <EuiCodeEditor
           style={{ width: 0.38 * window.innerWidth, height: 0.4 * window.innerHeight }}
           value={queryDsl}
           onChange={(string) => setQueryDsl(string)}
           mode="json"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   }
 
@@ -114,7 +114,7 @@ export default function IndexFilterPopover({
         <EuiSpacer />
         <EuiFlexGroup direction="rowReverse" alignItems="center" responsive={false}>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               fill
               onClick={() => {
                 onChangeSourceIndexFilter(queryDsl);
@@ -123,12 +123,12 @@ export default function IndexFilterPopover({
               data-test-subj="saveFilter"
             >
               Save
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty flush="right" onClick={closePopover} data-test-subj="cancelSaveFilter">
+            <EuiSmallButtonEmpty flush="right" onClick={closePopover} data-test-subj="cancelSaveFilter">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem />
         </EuiFlexGroup>
diff --git a/public/pages/CreateTransform/components/PreviewOptions/Panels/EditTransformPanel/EditTransformPanel.tsx b/public/pages/CreateTransform/components/PreviewOptions/Panels/EditTransformPanel/EditTransformPanel.tsx
index 823143e97..d8e4470e6 100644
--- a/public/pages/CreateTransform/components/PreviewOptions/Panels/EditTransformPanel/EditTransformPanel.tsx
+++ b/public/pages/CreateTransform/components/PreviewOptions/Panels/EditTransformPanel/EditTransformPanel.tsx
@@ -4,7 +4,16 @@
  */
 
 import React, { useState } from "react";
-import { EuiButton, EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiPanel, EuiSpacer, EuiText } from "@elastic/eui";
+import {
+  EuiSmallButton,
+  EuiCompressedFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFormRow,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+} from "@elastic/eui";
 import { TransformAggItem } from "../../../../../../../models/interfaces";
 
 interface EditTransformPanelProps {
@@ -30,8 +39,8 @@ export default function EditTransformPanel({ name, aggList, onEditTransformation
 
   return (
     <EuiPanel>
-      <EuiFormRow label="Transformation name" isInvalid={transformNameError !== ""} error={transformNameError}>
-        <EuiFieldText
+      <EuiCompressedFormRow label="Transformation name" isInvalid={transformNameError !== ""} error={transformNameError}>
+        <EuiCompressedFieldText
           value={transformName}
           isInvalid={transformNameError !== ""}
           onChange={(e) => {
@@ -39,16 +48,16 @@ export default function EditTransformPanel({ name, aggList, onEditTransformation
             setTransformName(e.target.value);
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       <EuiSpacer size="s" />
       <EuiFlexGroup justifyContent={"flexEnd"} gutterSize={"m"}>
         <EuiFlexItem grow={false}>
-          <EuiButton fullWidth={false} onClick={() => closePopover()} style={{ minWidth: 84 }}>
+          <EuiSmallButton fullWidth={false} onClick={() => closePopover()} style={{ minWidth: 84 }}>
             Cancel
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             fullWidth={false}
             disabled={transformNameError !== ""}
@@ -60,7 +69,7 @@ export default function EditTransformPanel({ name, aggList, onEditTransformation
             style={{ minWidth: 55 }}
           >
             OK
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/public/pages/CreateTransform/components/PreviewOptions/PreviewOptions.tsx b/public/pages/CreateTransform/components/PreviewOptions/PreviewOptions.tsx
index b24eec8e2..82833b5a4 100644
--- a/public/pages/CreateTransform/components/PreviewOptions/PreviewOptions.tsx
+++ b/public/pages/CreateTransform/components/PreviewOptions/PreviewOptions.tsx
@@ -5,7 +5,7 @@
 
 import React from "react";
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
   EuiFlexGroup,
@@ -32,7 +32,7 @@ export default function PreviewOptions({ name, aggList, onEditTransformation, on
     setIsPopoverOpen(false);
   };
 
-  const button = <EuiButtonIcon color="primary" iconType="pencil" onClick={() => setIsPopoverOpen(!isPopoverOpen)} />;
+  const button = <EuiSmallButtonIcon color="primary" iconType="pencil" onClick={() => setIsPopoverOpen(!isPopoverOpen)} />;
 
   const panels: EuiContextMenuPanelDescriptor[] = [
     {
diff --git a/public/pages/CreateTransform/components/Schedule/Schedule.tsx b/public/pages/CreateTransform/components/Schedule/Schedule.tsx
index ac0e27813..69c26ad5e 100644
--- a/public/pages/CreateTransform/components/Schedule/Schedule.tsx
+++ b/public/pages/CreateTransform/components/Schedule/Schedule.tsx
@@ -4,7 +4,15 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiSpacer, EuiCheckbox, EuiRadioGroup, EuiFormRow, EuiFieldNumber, EuiAccordion, EuiHorizontalRule } from "@elastic/eui";
+import {
+  EuiSpacer,
+  EuiCompressedCheckbox,
+  EuiCompressedRadioGroup,
+  EuiCompressedFormRow,
+  EuiCompressedFieldNumber,
+  EuiAccordion,
+  EuiHorizontalRule,
+} from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import { selectInterval } from "../../../Transforms/utils/metadataHelper";
 
@@ -38,9 +46,14 @@ const radios = [
 
 const isContinuous = (continuousJob: string, onChangeContinuousJob: (optionId: string) => void) => (
   <React.Fragment>
-    <EuiFormRow label="Continuous">
-      <EuiRadioGroup options={radios} idSelected={continuousJob} onChange={(id) => onChangeContinuousJob(id)} name="continuousJob" />
-    </EuiFormRow>
+    <EuiCompressedFormRow label="Continuous">
+      <EuiCompressedRadioGroup
+        options={radios}
+        idSelected={continuousJob}
+        onChange={(id) => onChangeContinuousJob(id)}
+        name="continuousJob"
+      />
+    </EuiCompressedFormRow>
     <EuiSpacer size="m" />
   </React.Fragment>
 );
@@ -69,7 +82,7 @@ export default class Schedule extends Component<ScheduleProps> {
       <ContentPanel panelStyles={{ padding: "20px 20px" }} bodyStyles={{ padding: "10px" }} title="Schedule" titleSize="m">
         <div>
           {!isEdit && (
-            <EuiCheckbox
+            <EuiCompressedCheckbox
               id="jobEnabledByDefault"
               label="Job enabled by default"
               checked={jobEnabledByDefault}
@@ -88,7 +101,7 @@ export default class Schedule extends Component<ScheduleProps> {
           <EuiSpacer size="m" />
           <EuiAccordion id="pagePerExecution" buttonContent="Advanced">
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="Pages per execution"
               helpText={`Determines the number of transformed buckets that are
                         computed and indexed at a time. A larger number means
@@ -98,8 +111,8 @@ export default class Schedule extends Component<ScheduleProps> {
                         you to start with the default value, and adjust based
                         on your use case and shard size.`}
             >
-              <EuiFieldNumber min={1} placeholder="1000" value={pageSize} onChange={onChangePage} />
-            </EuiFormRow>
+              <EuiCompressedFieldNumber min={1} placeholder="1000" value={pageSize} onChange={onChangePage} />
+            </EuiCompressedFormRow>
           </EuiAccordion>
         </div>
       </ContentPanel>
diff --git a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
index d82e4040e..92ff5537e 100644
--- a/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
+++ b/public/pages/CreateTransform/components/TransformIndices/TransformIndices.tsx
@@ -6,7 +6,7 @@
 import React, { Component, Fragment } from "react";
 import {
   EuiSpacer,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiCallOut,
   EuiPopover,
   EuiFlexGroup,
@@ -19,7 +19,7 @@ import {
   EuiLink,
 } from "@elastic/eui";
 import _ from "lodash";
-import EuiComboBox from "../../../../components/ComboBoxWithoutWarning";
+import EuiCompressedComboBox from "../../../../components/ComboBoxWithoutWarning";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import IndexFilterPopover from "../IndexFilterPopover";
 import { FieldItem, IndexItem } from "../../../../../models/interfaces";
@@ -172,13 +172,13 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
                 </EuiCallOut>
               </Fragment>
             )}
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="Source index"
               error={sourceIndexError}
               isInvalid={sourceIndexError != ""}
               helpText="The index where this transform job is performed on. Type in * as wildcard for index pattern. Indices cannot be changed once the job is created. Please ensure that you select the right source index."
             >
-              <EuiComboBox
+              <EuiCompressedComboBox
                 placeholder="Select source index"
                 options={indexOptions}
                 selectedOptions={sourceIndex}
@@ -189,7 +189,7 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
                 isInvalid={sourceIndexError != ""}
                 data-test-subj="sourceIndexCombobox"
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
             <EuiSpacer size="s" />
             <EuiFlexGroup gutterSize="xs">
               <EuiFlexItem grow={false}>
@@ -252,13 +252,13 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
             </EuiText>
             <EuiSpacer size="s" />
             <EuiHorizontalRule margin="xs" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="Target index"
               error={targetIndexError}
               isInvalid={targetIndexError != ""}
               helpText="The index stores transform results. You can look up an existing index to reuse or type to create a new index."
             >
-              <EuiComboBox
+              <EuiCompressedComboBox
                 placeholder="Select or create target index"
                 options={targetIndexOptions}
                 selectedOptions={targetIndex}
@@ -270,7 +270,7 @@ export default class TransformIndices extends Component<TransformIndicesProps, T
                 isInvalid={targetIndexError != ""}
                 data-test-subj="targetIndexCombobox"
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
         </ContentPanel>
         <Fragment>
diff --git a/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/DateHistogramPanel.tsx b/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/DateHistogramPanel.tsx
index b3c8652d3..9c8a1d270 100644
--- a/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/DateHistogramPanel.tsx
+++ b/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/DateHistogramPanel.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from "react";
-import { EuiButton, EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSelect, EuiSpacer, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiCompressedFieldNumber, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiCompressedSelect, EuiSpacer, EuiText } from "@elastic/eui";
 import { getDateHistogramGroupItem } from "../../../../utils/helpers";
 import { CalendarTimeunitOptions, FixedTimeunitOptions, IntervalType } from "../../../../../../utils/constants";
 import { GROUP_TYPES, TRANSFORM_AGG_TYPE, TransformAggItem, TransformGroupItem } from "../../../../../../../models/interfaces";
@@ -24,7 +24,7 @@ export default function DateHistogramPanel({ name, handleGroupSelectionChange, c
   let timeunitOptions, intervalDefinition;
   if (intervalType === IntervalType.FIXED) {
     intervalDefinition = (
-      <EuiFieldNumber
+      <EuiCompressedFieldNumber
         value={dateHistogramInterval}
         onChange={(e) => setDateHistogramInterval(e.target.valueAsNumber)}
         data-test-subj="dateHistogramValueInput"
@@ -60,7 +60,7 @@ export default function DateHistogramPanel({ name, handleGroupSelectionChange, c
           {intervalDefinition}
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiSelect
+          <EuiCompressedSelect
             options={timeunitOptions}
             value={dateHistogramTimeunit}
             onChange={(e) => setDateHistogramTimeunit(e.target.value)}
@@ -71,17 +71,17 @@ export default function DateHistogramPanel({ name, handleGroupSelectionChange, c
       <EuiSpacer size="m" />
       <EuiFlexGroup justifyContent={"flexEnd"} gutterSize={"m"}>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fullWidth={false}
             onClick={() => closePopover()}
             style={{ minWidth: 84 }}
             data-test-subj="dateHistogramPanelCancelButton"
           >
             Cancel
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             fullWidth={false}
             onClick={() => {
@@ -101,7 +101,7 @@ export default function DateHistogramPanel({ name, handleGroupSelectionChange, c
             data-test-subj="dateHistogramPanelOKButton"
           >
             OK
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/__snapshots__/DateHistogramPanel.test.tsx.snap b/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/__snapshots__/DateHistogramPanel.test.tsx.snap
index fa932de00..d834b63f3 100644
--- a/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/__snapshots__/DateHistogramPanel.test.tsx.snap
+++ b/public/pages/CreateTransform/components/TransformOptions/Panels/DateHistogramPanel/__snapshots__/DateHistogramPanel.test.tsx.snap
@@ -53,13 +53,13 @@ exports[`<DateHistogramPanel /> spec renders the component with calendar interva
       class="euiFlexItem"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <select
-            class="euiSelect"
+            class="euiSelect euiSelect--compressed"
             data-test-subj="dateHistogramTimeunitSelect"
           >
             <option
@@ -121,7 +121,7 @@ exports[`<DateHistogramPanel /> spec renders the component with calendar interva
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         data-test-subj="dateHistogramPanelCancelButton"
         type="button"
       >
@@ -140,7 +140,7 @@ exports[`<DateHistogramPanel /> spec renders the component with calendar interva
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="dateHistogramPanelOKButton"
         type="button"
       >
@@ -198,13 +198,13 @@ exports[`<DateHistogramPanel /> spec renders the component with fixed interval 1
       style="width: 100px;"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            class="euiFieldNumber"
+            class="euiFieldNumber euiFieldNumber--compressed"
             data-test-subj="dateHistogramValueInput"
             type="number"
             value="1"
@@ -216,13 +216,13 @@ exports[`<DateHistogramPanel /> spec renders the component with fixed interval 1
       class="euiFlexItem"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <select
-            class="euiSelect"
+            class="euiSelect euiSelect--compressed"
             data-test-subj="dateHistogramTimeunitSelect"
           >
             <option
@@ -274,7 +274,7 @@ exports[`<DateHistogramPanel /> spec renders the component with fixed interval 1
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         data-test-subj="dateHistogramPanelCancelButton"
         type="button"
       >
@@ -293,7 +293,7 @@ exports[`<DateHistogramPanel /> spec renders the component with fixed interval 1
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="dateHistogramPanelOKButton"
         type="button"
       >
diff --git a/public/pages/CreateTransform/components/TransformOptions/Panels/HistogramPanel/HistogramPanel.tsx b/public/pages/CreateTransform/components/TransformOptions/Panels/HistogramPanel/HistogramPanel.tsx
index 7868f661a..c69843cbf 100644
--- a/public/pages/CreateTransform/components/TransformOptions/Panels/HistogramPanel/HistogramPanel.tsx
+++ b/public/pages/CreateTransform/components/TransformOptions/Panels/HistogramPanel/HistogramPanel.tsx
@@ -5,7 +5,15 @@
 
 import { GROUP_TYPES, TRANSFORM_AGG_TYPE, TransformAggItem, TransformGroupItem } from "../../../../../../../models/interfaces";
 import React, { useState } from "react";
-import { EuiButton, EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiPanel, EuiSpacer } from "@elastic/eui";
+import {
+  EuiSmallButton,
+  EuiCompressedFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFormRow,
+  EuiPanel,
+  EuiSpacer,
+} from "@elastic/eui";
 
 interface HistogramPanelProps {
   name: string;
@@ -21,21 +29,21 @@ export default function HistogramPanel({ name, handleGroupSelectionChange, close
     <EuiPanel>
       <EuiFlexGroup>
         <EuiFlexItem grow={false} style={{ width: 109 }}>
-          <EuiFormRow label="Histogram interval">
-            <EuiFieldNumber value={histogramInterval} onChange={(e) => setHistogramInterval(e.target.valueAsNumber)} />
-          </EuiFormRow>
+          <EuiCompressedFormRow label="Histogram interval">
+            <EuiCompressedFieldNumber value={histogramInterval} onChange={(e) => setHistogramInterval(e.target.valueAsNumber)} />
+          </EuiCompressedFormRow>
           <EuiSpacer size="s" />
         </EuiFlexItem>
         <EuiFlexItem grow={false} />
       </EuiFlexGroup>
       <EuiFlexGroup justifyContent={"flexEnd"} gutterSize={"m"}>
         <EuiFlexItem grow={false}>
-          <EuiButton fullWidth={false} onClick={() => closePopover()} style={{ minWidth: 84 }}>
+          <EuiSmallButton fullWidth={false} onClick={() => closePopover()} style={{ minWidth: 84 }}>
             Cancel
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             fullWidth={false}
             onClick={() => {
@@ -55,7 +63,7 @@ export default function HistogramPanel({ name, handleGroupSelectionChange, close
             style={{ minWidth: 55 }}
           >
             OK
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/public/pages/CreateTransform/components/TransformOptions/Panels/PercentilePanel/PercentilePanel.tsx b/public/pages/CreateTransform/components/TransformOptions/Panels/PercentilePanel/PercentilePanel.tsx
index 3e8c51b33..ee689b4fe 100644
--- a/public/pages/CreateTransform/components/TransformOptions/Panels/PercentilePanel/PercentilePanel.tsx
+++ b/public/pages/CreateTransform/components/TransformOptions/Panels/PercentilePanel/PercentilePanel.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from "react";
-import { EuiButton, EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiPanel, EuiSpacer } from "@elastic/eui";
+import { EuiSmallButton, EuiCompressedComboBox, EuiFlexGroup, EuiFlexItem, EuiCompressedFormRow, EuiPanel, EuiSpacer } from "@elastic/eui";
 import { TRANSFORM_AGG_TYPE, TransformAggItem } from "../../../../../../../models/interfaces";
 
 interface PercentilePanelProps {
@@ -57,14 +57,14 @@ export default function PercentilePanel({ name, aggSelection, handleAggSelection
     <EuiPanel>
       <EuiFlexGroup gutterSize={"none"}>
         <EuiFlexItem grow={false} style={{ width: 230 }}>
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth={true}
             label="Percents"
             helpText="Only numbers between 0-100 allowed."
             isInvalid={isInvalid}
             error={isInvalid ? "Invalid input" : undefined}
           >
-            <EuiComboBox
+            <EuiCompressedComboBox
               fullWidth={true}
               noSuggestions
               selectedOptions={percents}
@@ -73,19 +73,19 @@ export default function PercentilePanel({ name, aggSelection, handleAggSelection
               isInvalid={isInvalid}
               onSearchChange={onSearchChange}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer size="m" />
         </EuiFlexItem>
         <EuiFlexItem grow={false}></EuiFlexItem>
       </EuiFlexGroup>
       <EuiFlexGroup justifyContent={"flexEnd"} gutterSize={"m"}>
         <EuiFlexItem grow={false}>
-          <EuiButton fullWidth={false} onClick={() => closePopover()} style={{ minWidth: 84 }}>
+          <EuiSmallButton fullWidth={false} onClick={() => closePopover()} style={{ minWidth: 84 }}>
             Cancel
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             fullWidth={false}
             onClick={() => {
@@ -110,7 +110,7 @@ export default function PercentilePanel({ name, aggSelection, handleAggSelection
             style={{ minWidth: 55 }}
           >
             OK
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/public/pages/CreateTransform/components/TransformOptions/Panels/ScriptedMetricsPanel/ScriptedMetricsPanel.tsx b/public/pages/CreateTransform/components/TransformOptions/Panels/ScriptedMetricsPanel/ScriptedMetricsPanel.tsx
index a65d5392b..c877f496e 100644
--- a/public/pages/CreateTransform/components/TransformOptions/Panels/ScriptedMetricsPanel/ScriptedMetricsPanel.tsx
+++ b/public/pages/CreateTransform/components/TransformOptions/Panels/ScriptedMetricsPanel/ScriptedMetricsPanel.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from "react";
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiForm, EuiFormRow, EuiPanel, EuiCodeEditor, EuiSpacer } from "@elastic/eui";
+import { EuiSmallButton, EuiFlexGroup, EuiFlexItem, EuiForm, EuiCompressedFormRow, EuiPanel, EuiCodeEditor, EuiSpacer } from "@elastic/eui";
 import { TRANSFORM_AGG_TYPE, TransformAggItem } from "../../../../../../../models/interfaces";
 
 interface ScriptedMetricsPanelProps {
@@ -20,23 +20,23 @@ export default function ScriptedMetricsPanel({ name, aggSelection, handleAggSele
   return (
     <EuiPanel>
       <EuiForm>
-        <EuiFormRow label="Scripted metrics">
+        <EuiCompressedFormRow label="Scripted metrics">
           <EuiCodeEditor
             style={{ width: 0.38 * window.innerWidth, height: 0.4 * window.innerHeight }}
             value={script}
             onChange={(value: string) => setScript(value)}
             mode="json"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer />
         <EuiFlexGroup justifyContent="flexEnd" gutterSize="m">
           <EuiFlexItem grow={false}>
-            <EuiButton fullWidth={false} onClick={() => closePopover()}>
+            <EuiSmallButton fullWidth={false} onClick={() => closePopover()}>
               Cancel
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               fill
               fullWidth={false}
               onClick={() => {
@@ -55,7 +55,7 @@ export default function ScriptedMetricsPanel({ name, aggSelection, handleAggSele
               style={{ minWidth: 55 }}
             >
               OK
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiForm>
diff --git a/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx b/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx
index 2246c0753..207de01ef 100644
--- a/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx
+++ b/public/pages/CreateTransform/components/TransformOptions/TransformOptions.tsx
@@ -5,7 +5,7 @@
 
 import React, { useState } from "react";
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
   EuiFlexGroup,
@@ -368,7 +368,7 @@ export default function TransformOptions({
   ];
 
   const button = (
-    <EuiButtonIcon
+    <EuiSmallButtonIcon
       iconType="plusInCircleFilled"
       onClick={() => setIsPopoverOpen(!isPopoverOpen)}
       data-test-subj={`${name}OptionsPopover`}
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
index c984a880d..4fef6fc72 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/CreateTransformForm.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, useContext } from "react";
-import { EuiButton, EuiButtonEmpty, EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSmallButton, EuiSmallButtonEmpty, EuiComboBoxOptionOption, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import moment from "moment";
 import { RollupService, TransformService } from "../../../../services";
@@ -679,29 +679,29 @@ export class CreateTransformForm extends Component<CreateTransformFormProps, Cre
         />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd" style={{ padding: "5px 50px" }}>
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createTransformCancelButton">
+            <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="createTransformCancelButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           {currentStep != 1 && (
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={this._prev} data-test-subj="createTransformPreviousButton">
+              <EuiSmallButton onClick={this._prev} data-test-subj="createTransformPreviousButton">
                 Previous
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           )}
 
           {currentStep == 4 ? (
             <EuiFlexItem grow={false}>
-              <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createTransformSubmitButton">
+              <EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createTransformSubmitButton">
                 Create
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           ) : (
             <EuiFlexItem grow={false}>
-              <EuiButton fill onClick={this._next} isLoading={isLoading} data-test-subj="createTransformNextButton">
+              <EuiSmallButton fill onClick={this._next} isLoading={isLoading} data-test-subj="createTransformNextButton">
                 Next
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
diff --git a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
index a46d10184..7863547ce 100644
--- a/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
+++ b/public/pages/CreateTransform/containers/CreateTransformForm/__snapshots__/CreateTransformForm.test.tsx.snap
@@ -193,7 +193,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
             >
               <div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -211,14 +211,14 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
                           aria-describedby="some_html_id-help-0"
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="some_html_id"
                           placeholder="my-transformjob1"
                           type="text"
@@ -271,7 +271,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                   class="euiSpacer euiSpacer--xs"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -324,7 +324,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
               >
                 <div>
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--compressed"
                     id="some_html_id-row"
                   >
                     <div
@@ -345,18 +345,18 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                         aria-describedby="some_html_id-help-0"
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        class="euiComboBox"
+                        class="euiComboBox euiComboBox--compressed"
                         data-test-subj="sourceIndexCombobox"
                         role="combobox"
                       >
                         <div
-                          class="euiFormControlLayout"
+                          class="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
                           >
                             <div
-                              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                               data-test-subj="comboBoxInput"
                               tabindex="-1"
                             >
@@ -531,7 +531,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                     class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
                   />
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--compressed"
                     id="some_html_id-row"
                   >
                     <div
@@ -552,18 +552,18 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
                         aria-describedby="some_html_id-help-0"
                         aria-expanded="false"
                         aria-haspopup="listbox"
-                        class="euiComboBox"
+                        class="euiComboBox euiComboBox--compressed"
                         data-test-subj="targetIndexCombobox"
                         role="combobox"
                       >
                         <div
-                          class="euiFormControlLayout"
+                          class="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
                           >
                             <div
-                              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                               data-test-subj="comboBoxInput"
                               tabindex="-1"
                             >
@@ -651,7 +651,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
           data-test-subj="createTransformCancelButton"
           type="button"
         >
@@ -670,7 +670,7 @@ exports[`<CreateTransformForm /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           data-test-subj="createTransformNextButton"
           type="button"
         >
diff --git a/public/pages/DataStreams/components/IndexControls/IndexControls.tsx b/public/pages/DataStreams/components/IndexControls/IndexControls.tsx
index b7d88bfae..361d829dd 100644
--- a/public/pages/DataStreams/components/IndexControls/IndexControls.tsx
+++ b/public/pages/DataStreams/components/IndexControls/IndexControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 
 export interface SearchControlsProps {
   value: {
@@ -30,12 +30,11 @@ export default function SearchControls(props: SearchControlsProps) {
   return (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch
+        <EuiCompressedFieldSearch
           fullWidth
           placeholder="Search..."
           value={state.search}
           onChange={(e) => onChange("search", e.target.value)}
-          compressed={props.useNewUX}
         />
       </EuiFlexItem>
     </EuiFlexGroup>
diff --git a/public/pages/DataStreams/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/DataStreams/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
index 1c3d7a474..84a76e94b 100644
--- a/public/pages/DataStreams/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
+++ b/public/pages/DataStreams/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`<IndexControls /> spec renders the component 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
           placeholder="Search..."
           type="search"
           value="testing"
@@ -34,7 +34,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
         >
           <button
             aria-label="Clear input"
-            class="euiFormControlLayoutClearButton"
+            class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
             type="button"
           >
             EuiIconMock
diff --git a/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx b/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx
index a2f585c23..e03b34999 100644
--- a/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx
+++ b/public/pages/DataStreams/containers/DataStreams/DataStreams.tsx
@@ -15,17 +15,16 @@ import {
   Direction,
   Pagination,
   EuiTableSelectionType,
-  EuiButton,
+  EuiSmallButton,
   EuiLink,
   EuiTitle,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiEmptyPrompt,
   EuiText,
   EuiHealth,
   EuiToolTip,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSmallButton,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS, HEALTH_TO_COLOR } from "../../utils/constants";
@@ -471,7 +470,7 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
               <EuiTitle size="s">
                 <span>Data streams</span>
               </EuiTitle>
-              <EuiFormRow
+              <EuiCompressedFormRow
                 fullWidth
                 helpText={
                   <div>
@@ -484,7 +483,7 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
                 }
               >
                 <></>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </>
           }
         >
@@ -578,14 +577,14 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.props.history.push(ROUTES.CREATE_DATA_STREAM);
                       }}
                     >
                       Create data stream
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               ) : (
@@ -596,7 +595,7 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
                     </EuiText>
                   }
                   actions={[
-                    <EuiButton
+                    <EuiSmallButton
                       fill
                       onClick={() => {
                         this.setState(defaultFilter, () => {
@@ -605,7 +604,7 @@ class DataStreams extends MDSEnabledComponent<DataStreamsProps, DataStreamsState
                       }}
                     >
                       Reset filters
-                    </EuiButton>,
+                    </EuiSmallButton>,
                   ]}
                 />
               )
diff --git a/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap b/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap
index 25608bbe3..ca81487cc 100644
--- a/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap
+++ b/public/pages/DataStreams/containers/DataStreams/__snapshots__/DataStreams.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<DataStreams /> spec renders the component 1`] = `
         Data streams
       </span>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -65,7 +65,7 @@ exports[`<DataStreams /> spec renders the component 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     type="button"
                   >
                     <span
@@ -86,7 +86,7 @@ exports[`<DataStreams /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="Create data streamButton"
                 type="button"
               >
@@ -120,13 +120,13 @@ exports[`<DataStreams /> spec renders the component 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=""
@@ -419,7 +419,7 @@ exports[`<DataStreams /> spec renders the component 1`] = `
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <button
-                            class="euiButton euiButton--primary euiButton--fill"
+                            class="euiButton euiButton--primary euiButton--small euiButton--fill"
                             type="button"
                           >
                             <span
diff --git a/public/pages/DataStreams/containers/DataStreamsActions/__snapshots__/DataStreamsActions.test.tsx.snap b/public/pages/DataStreams/containers/DataStreamsActions/__snapshots__/DataStreamsActions.test.tsx.snap
index 6e0b76857..1e45caa05 100644
--- a/public/pages/DataStreams/containers/DataStreamsActions/__snapshots__/DataStreamsActions.test.tsx.snap
+++ b/public/pages/DataStreams/containers/DataStreamsActions/__snapshots__/DataStreamsActions.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<DataStreamsActions /> spec cannot clear cache for data streams if they
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -36,7 +36,7 @@ exports[`<DataStreamsActions /> spec clear cache for data streams by calling com
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -63,7 +63,7 @@ exports[`<DataStreamsActions /> spec delete data streams by calling commonServic
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -90,7 +90,7 @@ exports[`<DataStreamsActions /> spec filter data streams failed when clearing ca
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -124,7 +124,7 @@ exports[`<DataStreamsActions /> spec refresh data streams by calling commonServi
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -242,7 +242,7 @@ exports[`<DataStreamsActions /> spec refresh data streams by calling commonServi
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               type="button"
             >
               <span
@@ -256,7 +256,7 @@ exports[`<DataStreamsActions /> spec refresh data streams by calling commonServi
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="refreshConfirmButton"
               type="button"
             >
@@ -299,7 +299,7 @@ HTMLCollection [
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -412,7 +412,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -427,7 +427,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
@@ -465,7 +465,7 @@ exports[`<DataStreamsActions /> spec renders the component and all the actions s
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
diff --git a/public/pages/DataStreams/containers/DataStreamsActions/index.tsx b/public/pages/DataStreams/containers/DataStreamsActions/index.tsx
index 111a84b73..b74ccc0c1 100644
--- a/public/pages/DataStreams/containers/DataStreamsActions/index.tsx
+++ b/public/pages/DataStreams/containers/DataStreamsActions/index.tsx
@@ -4,7 +4,7 @@
  */
 import React, { useMemo, useState } from "react";
 import { RouteComponentProps } from "react-router-dom";
-import { EuiButton, EuiContextMenu } from "@elastic/eui";
+import { EuiSmallButton, EuiContextMenu } from "@elastic/eui";
 import SimplePopover from "../../../../components/SimplePopover";
 import ClearCacheModal from "../../../../containers/ClearCacheModal";
 import FlushIndexModal from "../../../../containers/FlushIndexModal";
@@ -21,7 +21,7 @@ export interface DataStreamsActionsProps {
 }
 
 export default function DataStreamsActions(props: DataStreamsActionsProps) {
-  const { selectedItems, onDelete, history, useNewUX } = props;
+  const { selectedItems, onDelete, history } = props;
   const [deleteIndexModalVisible, setDeleteIndexModalVisible] = useState(false);
   const [clearCacheModalVisible, setClearCacheModalVisible] = useState(false);
   const [flushDataStreamModalVisible, setFlushDataStreamModalVisible] = useState(false);
@@ -52,9 +52,9 @@ export default function DataStreamsActions(props: DataStreamsActionsProps) {
         data-test-subj="moreAction"
         panelPaddingSize="s"
         button={
-          <EuiButton iconType="arrowDown" iconSide="right" size={useNewUX ? "s" : undefined}>
+          <EuiSmallButton iconType="arrowDown" iconSide="right">
             Actions
-          </EuiButton>
+          </EuiSmallButton>
         }
       >
         <EuiContextMenu
diff --git a/public/pages/DataStreams/containers/DeleteDataStreamsModal/__snapshots__/DeleteDataStreamsModal.test.tsx.snap b/public/pages/DataStreams/containers/DeleteDataStreamsModal/__snapshots__/DeleteDataStreamsModal.test.tsx.snap
index 473ff4ba9..dfc7f4a59 100644
--- a/public/pages/DataStreams/containers/DeleteDataStreamsModal/__snapshots__/DeleteDataStreamsModal.test.tsx.snap
+++ b/public/pages/DataStreams/containers/DeleteDataStreamsModal/__snapshots__/DeleteDataStreamsModal.test.tsx.snap
@@ -76,13 +76,13 @@ HTMLCollection [
                   </div>
                 </div>
                 <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"
                       data-test-subj="deleteInput"
                       placeholder="delete"
                       type="text"
@@ -97,7 +97,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="deletaCancelButton"
               type="button"
             >
@@ -112,7 +112,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--danger euiButton--fill euiButton-isDisabled"
+              class="euiButton euiButton--danger euiButton--small euiButton--fill euiButton-isDisabled"
               data-test-subj="deleteConfirmButton"
               disabled=""
               type="button"
diff --git a/public/pages/EditRollup/containers/EditRollup.tsx b/public/pages/EditRollup/containers/EditRollup.tsx
index 7d9c51fd1..a16b57773 100644
--- a/public/pages/EditRollup/containers/EditRollup.tsx
+++ b/public/pages/EditRollup/containers/EditRollup.tsx
@@ -7,7 +7,7 @@ import React, { ChangeEvent, Component, useContext } from "react";
 import { RouteComponentProps } from "react-router-dom";
 import moment from "moment";
 import queryString from "query-string";
-import { EuiFlexItem, EuiFlexGroup, EuiButton, EuiTitle, EuiSpacer, EuiButtonEmpty } from "@elastic/eui";
+import { EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiTitle, EuiSpacer, EuiSmallButtonEmpty } from "@elastic/eui";
 import ConfigureRollup from "../../CreateRollup/components/ConfigureRollup";
 import Schedule from "../../CreateRollup/components/Schedule";
 import { getErrorMessage } from "../../../utils/helpers";
@@ -351,14 +351,14 @@ export class EditRollup extends Component<EditRollupProps, EditRollupState> {
 
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="editRollupCancelButton">
+            <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="editRollupCancelButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="editRollupSaveChangesButton">
+            <EuiSmallButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="editRollupSaveChangesButton">
               Save changes
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap b/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap
index d3790b7ae..78cede257 100644
--- a/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap
+++ b/public/pages/EditRollup/containers/__snapshots__/EditRollup.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`<EditRollup /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -67,14 +67,14 @@ exports[`<EditRollup /> spec renders the component 1`] = `
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-describedby="some_html_id-help-0"
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   disabled=""
                   id="some_html_id"
                   placeholder="my-rollupjob1"
@@ -128,7 +128,7 @@ exports[`<EditRollup /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--xs"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -185,7 +185,7 @@ exports[`<EditRollup /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--m"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -202,13 +202,13 @@ exports[`<EditRollup /> spec renders the component 1`] = `
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <select
-                  class="euiSelect"
+                  class="euiSelect euiSelect--compressed"
                   id="some_html_id"
                 >
                   <option
@@ -247,7 +247,7 @@ exports[`<EditRollup /> spec renders the component 1`] = `
             style="width: 200px;"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -265,13 +265,13 @@ exports[`<EditRollup /> spec renders the component 1`] = `
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <input
-                      class="euiFieldNumber"
+                      class="euiFieldNumber euiFieldNumber--compressed"
                       id="some_html_id"
                       type="number"
                       value="2"
@@ -285,20 +285,20 @@ exports[`<EditRollup /> spec renders the component 1`] = `
             class="euiFlexItem"
           >
             <div
-              class="euiFormRow euiFormRow--hasEmptyLabelSpace"
+              class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <select
-                      class="euiSelect"
+                      class="euiSelect euiSelect--compressed"
                       id="some_html_id"
                     >
                       <option
@@ -336,7 +336,7 @@ exports[`<EditRollup /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--m"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -353,14 +353,14 @@ exports[`<EditRollup /> spec renders the component 1`] = `
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-describedby="some_html_id-help-0"
-                  class="euiFieldNumber"
+                  class="euiFieldNumber euiFieldNumber--compressed"
                   id="some_html_id"
                   min="1"
                   placeholder="1000"
@@ -419,20 +419,20 @@ exports[`<EditRollup /> spec renders the component 1`] = `
               </div>
             </div>
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <input
-                      class="euiFieldNumber"
+                      class="euiFieldNumber euiFieldNumber--compressed"
                       id="some_html_id"
                       type="number"
                       value=""
@@ -446,20 +446,20 @@ exports[`<EditRollup /> spec renders the component 1`] = `
             class="euiFlexItem"
           >
             <div
-              class="euiFormRow euiFormRow--hasEmptyLabelSpace"
+              class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <select
-                      class="euiSelect"
+                      class="euiSelect euiSelect--compressed"
                       id="some_html_id"
                     >
                       <option
@@ -517,7 +517,7 @@ exports[`<EditRollup /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="editRollupCancelButton"
         type="button"
       >
@@ -536,7 +536,7 @@ exports[`<EditRollup /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="editRollupSaveChangesButton"
         type="button"
       >
diff --git a/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap b/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap
index 83d180fb1..ca8ee9b9b 100644
--- a/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap
+++ b/public/pages/ForceMerge/components/ForceMergeAdvancedOptions/__snapshots__/ForceMergeAdvancedOptions.test.tsx.snap
@@ -7,7 +7,7 @@ Object {
     <div>
       <div>
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -32,7 +32,7 @@ Object {
             </div>
             <div>
               <div
-                class="euiRadio euiRadioGroup__item"
+                class="euiRadio euiRadio--compressed euiRadioGroup__item"
               >
                 <input
                   checked=""
@@ -52,7 +52,7 @@ Object {
                 </label>
               </div>
               <div
-                class="euiRadio euiRadioGroup__item"
+                class="euiRadio euiRadio--compressed euiRadioGroup__item"
               >
                 <input
                   class="euiRadio__input"
@@ -77,7 +77,7 @@ Object {
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -103,7 +103,7 @@ Object {
               class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiCheckbox"
+                class="euiCheckbox euiCheckbox--compressed"
               >
                 <input
                   class="euiCheckbox__input"
@@ -127,7 +127,7 @@ Object {
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFormRow euiFormRow--fullWidth"
+          class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -153,7 +153,7 @@ Object {
               class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
             >
               <div
-                class="euiCheckbox"
+                class="euiCheckbox euiCheckbox--compressed"
               >
                 <input
                   class="euiCheckbox__input"
@@ -179,7 +179,7 @@ Object {
   "container": <div>
     <div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -204,7 +204,7 @@ Object {
           </div>
           <div>
             <div
-              class="euiRadio euiRadioGroup__item"
+              class="euiRadio euiRadio--compressed euiRadioGroup__item"
             >
               <input
                 checked=""
@@ -224,7 +224,7 @@ Object {
               </label>
             </div>
             <div
-              class="euiRadio euiRadioGroup__item"
+              class="euiRadio euiRadio--compressed euiRadioGroup__item"
             >
               <input
                 class="euiRadio__input"
@@ -249,7 +249,7 @@ Object {
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -275,7 +275,7 @@ Object {
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiCheckbox"
+              class="euiCheckbox euiCheckbox--compressed"
             >
               <input
                 class="euiCheckbox__input"
@@ -299,7 +299,7 @@ Object {
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -325,7 +325,7 @@ Object {
             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
           >
             <div
-              class="euiCheckbox"
+              class="euiCheckbox euiCheckbox--compressed"
             >
               <input
                 class="euiCheckbox__input"
diff --git a/public/pages/ForceMerge/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap b/public/pages/ForceMerge/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
index fed9f737e..59eb8953f 100644
--- a/public/pages/ForceMerge/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
+++ b/public/pages/ForceMerge/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
@@ -9,17 +9,17 @@ Object {
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox"
+          class="euiComboBox euiComboBox--compressed"
           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"
               >
@@ -62,17 +62,17 @@ Object {
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         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"
             >
diff --git a/public/pages/ForceMerge/components/SwitchNumber/index.tsx b/public/pages/ForceMerge/components/SwitchNumber/index.tsx
index 7ef9de185..baa82b156 100644
--- a/public/pages/ForceMerge/components/SwitchNumber/index.tsx
+++ b/public/pages/ForceMerge/components/SwitchNumber/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useState } from "react";
-import { EuiRadioGroup, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedRadioGroup, EuiSpacer } from "@elastic/eui";
 import CustomFormRow from "../../../../components/CustomFormRow";
 import { AllBuiltInComponents } from "../../../../components/FormGenerator";
 
@@ -16,7 +16,7 @@ export default function SwitchNumber(props: SwitchNumberProps) {
   const [id, setId] = useState(props.value && props.value > 0 ? "1" : "0");
   return (
     <>
-      <EuiRadioGroup
+      <EuiCompressedRadioGroup
         options={[
           {
             id: "0",
diff --git a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
index 54fb6abd7..ee738e585 100644
--- a/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
+++ b/public/pages/ForceMerge/container/ForceMerge/ForceMerge.tsx
@@ -4,9 +4,9 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiSmallButtonIcon,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
@@ -140,7 +140,7 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
   const advanceTitle = (
     <EuiFlexGroup gutterSize="none" justifyContent="flexStart" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           iconType={advancedSettingsOpen ? "arrowDown" : "arrowRight"}
           color="text"
           data-test-subj="advanceOptionToggle"
@@ -268,14 +268,14 @@ export default function ForceMergeWrapper(props: Omit<ForceMergeProps, "services
 
       <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty onClick={onCancel} data-test-subj="reindexCancelButton">
+          <EuiSmallButtonEmpty onClick={onCancel} data-test-subj="reindexCancelButton">
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton fill onClick={onClickAction} isLoading={executing} data-test-subj="forceMergeConfirmButton">
+          <EuiSmallButton fill onClick={onClickAction} isLoading={executing} data-test-subj="forceMergeConfirmButton">
             Force merge
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>
diff --git a/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap b/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap
index 97e8b89a1..7325372fe 100644
--- a/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap
+++ b/public/pages/ForceMerge/container/ForceMerge/__snapshots__/ForceMerge.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
     Force merge
   </h1>
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -61,7 +61,7 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -88,18 +88,18 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="euiComboBox"
+              class="euiComboBox euiComboBox--compressed"
               data-test-subj="sourceSelector"
               role="combobox"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <div
-                    class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                     data-test-subj="comboBoxInput"
                     tabindex="-1"
                   >
@@ -169,7 +169,7 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
           >
             <button
               aria-label="drop down icon"
-              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
               data-test-subj="advanceOptionToggle"
               type="button"
             >
@@ -202,7 +202,7 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="reindexCancelButton"
         type="button"
       >
@@ -221,7 +221,7 @@ exports[`<ForceMerge /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="forceMergeConfirmButton"
         type="button"
       >
diff --git a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
index 8c7422f56..3fb2fe53b 100644
--- a/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
+++ b/public/pages/IndexDetail/containers/IndexDetail/IndexDetail.tsx
@@ -11,7 +11,7 @@ import {
   EuiDescriptionListDescription,
   EuiSpacer,
   EuiTitle,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiTabbedContentTab,
 } from "@elastic/eui";
@@ -168,7 +168,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
                   <EuiTitle size="s">
                     <span>Index mappings</span>
                   </EuiTitle>
-                  <EuiFormRow
+                  <EuiCompressedFormRow
                     fullWidth
                     helpText={
                       <>
@@ -187,7 +187,7 @@ export default function IndexDetail(props: IndexDetailModalProps) {
                     }
                   >
                     <></>
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </>
               }
             >
diff --git a/public/pages/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx b/public/pages/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx
index 1c4106669..63127e04d 100644
--- a/public/pages/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx
+++ b/public/pages/Indices/components/ApplyPolicyModal/ApplyPolicyModal.tsx
@@ -6,17 +6,17 @@
 import React, { Component, Fragment } from "react";
 import _ from "lodash";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiComboBox,
-  EuiFormRow,
-  EuiFieldText,
+  EuiCompressedComboBox,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
   EuiCallOut,
   EuiText,
   EuiSpacer,
@@ -200,7 +200,7 @@ export default class ApplyPolicyModal extends Component<ApplyPolicyModalProps, A
 
     if (hasSingleIndexSelected) {
       return (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Rollover alias"
           helpText={
             <EuiText size="xs" grow={false}>
@@ -216,14 +216,14 @@ export default class ApplyPolicyModal extends Component<ApplyPolicyModalProps, A
           error={rolloverAliasError}
           fullWidth
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             isInvalid={hasSubmitted && !!rolloverAliasError}
             placeholder="Rollover alias"
             value={rolloverAlias}
             onChange={this.onChangeRolloverAlias}
             fullWidth
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       );
     }
 
@@ -293,8 +293,8 @@ export default class ApplyPolicyModal extends Component<ApplyPolicyModalProps, A
               </p>
             </EuiText>
             <EuiSpacer size="m" />
-            <EuiFormRow label="Policy ID" isInvalid={hasSubmitted && !!selectedPolicyError} error={selectedPolicyError} fullWidth>
-              <EuiComboBox
+            <EuiCompressedFormRow label="Policy ID" isInvalid={hasSubmitted && !!selectedPolicyError} error={selectedPolicyError} fullWidth>
+              <EuiCompressedComboBox
                 placeholder="Search policies"
                 async
                 options={policyOptions}
@@ -306,19 +306,19 @@ export default class ApplyPolicyModal extends Component<ApplyPolicyModalProps, A
                 onSearchChange={this.onPolicySearchChange}
                 fullWidth
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
             {this.renderPreview()}
             {this.renderRollover()}
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButtonEmpty onClick={onClose} data-test-subj="applyPolicyModalCloseButton">
+            <EuiSmallButtonEmpty onClick={onClose} data-test-subj="applyPolicyModalCloseButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
 
-            <EuiButton onClick={this.onSubmit} fill data-test-subj="applyPolicyModalEditButton">
+            <EuiSmallButton onClick={this.onSubmit} fill data-test-subj="applyPolicyModalEditButton">
               Apply
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
diff --git a/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap b/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap
index cf0106925..a84d2e80f 100644
--- a/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap
+++ b/public/pages/Indices/components/ApplyPolicyModal/__snapshots__/ApplyPolicyModal.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`<ApplyPolicyModal /> spec renders the component 1`] = `
               class="euiSpacer euiSpacer--m"
             />
             <div
-              class="euiFormRow euiFormRow--fullWidth"
+              class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -74,17 +74,17 @@ exports[`<ApplyPolicyModal /> spec renders the component 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="euiComboBox euiComboBox--fullWidth"
+                  class="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
                   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-isLoading euiComboBox__inputWrap-isClearable"
+                        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                         data-test-subj="comboBoxInput"
                         tabindex="-1"
                       >
@@ -136,7 +136,7 @@ exports[`<ApplyPolicyModal /> spec renders the component 1`] = `
           class="euiModalFooter"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
             data-test-subj="applyPolicyModalCloseButton"
             type="button"
           >
@@ -151,7 +151,7 @@ exports[`<ApplyPolicyModal /> spec renders the component 1`] = `
             </span>
           </button>
           <button
-            class="euiButton euiButton--primary euiButton--fill"
+            class="euiButton euiButton--primary euiButton--small euiButton--fill"
             data-test-subj="applyPolicyModalEditButton"
             type="button"
           >
diff --git a/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx b/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx
index 78af2117f..b7ae88670 100644
--- a/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx
+++ b/public/pages/Indices/components/CloseIndexModal/CloseIndexModal.tsx
@@ -5,9 +5,9 @@
 
 import React, { useEffect, useState } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -65,17 +65,17 @@ export default function CloseIndexModal(props: CloseIndexModalProps) {
           <EuiText color="subdued">
             To confirm your action, type <b style={{ color: "#000" }}>close</b>.
           </EuiText>
-          <EuiFieldText placeholder="close" fullWidth value={value} onChange={(e) => setValue(e.target.value)} />
+          <EuiCompressedFieldText placeholder="close" fullWidth value={value} onChange={(e) => setValue(e.target.value)} />
         </div>
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty data-test-subj="Close Cancel button" onClick={onClose}>
+        <EuiSmallButtonEmpty data-test-subj="Close Cancel button" onClick={onClose}>
           Cancel
-        </EuiButtonEmpty>
-        <EuiButton data-test-subj="Close Confirm button" onClick={onConfirm} fill disabled={value !== "close"}>
+        </EuiSmallButtonEmpty>
+        <EuiSmallButton data-test-subj="Close Confirm button" onClick={onConfirm} fill disabled={value !== "close"}>
           Close
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap b/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap
index dd244c1cf..bde05c2af 100644
--- a/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap
+++ b/public/pages/Indices/components/CloseIndexModal/__snapshots__/CloseIndexModal.test.tsx.snap
@@ -93,13 +93,13 @@ HTMLCollection [
                   </div>
                 </div>
                 <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"
                       placeholder="close"
                       type="text"
                       value=""
@@ -113,7 +113,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="Close Cancel button"
               type="button"
             >
@@ -128,7 +128,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
               data-test-subj="Close Confirm button"
               disabled=""
               type="button"
diff --git a/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx b/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx
index 2d91c19a2..087b38257 100644
--- a/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx
+++ b/public/pages/Indices/components/DeleteIndexModal/DeleteIndexModal.tsx
@@ -5,10 +5,10 @@
 
 import React, { useEffect, useState } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -67,15 +67,15 @@ export default function DeleteIndexModal(props: DeleteIndexModalProps) {
           <EuiText color="subdued">
             To confirm your action, type <b style={{ color: "#000" }}>delete</b>.
           </EuiText>
-          <EuiFieldText placeholder="delete" fullWidth value={value} onChange={(e) => setValue(e.target.value)} />
+          <EuiCompressedFieldText placeholder="delete" fullWidth value={value} onChange={(e) => setValue(e.target.value)} />
         </div>
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={onClose}>Cancel</EuiButtonEmpty>
-        <EuiButton data-test-subj="Delete Confirm button" onClick={onConfirm} fill color="danger" disabled={value !== "delete"}>
+        <EuiSmallButtonEmpty onClick={onClose}>Cancel</EuiSmallButtonEmpty>
+        <EuiSmallButton data-test-subj="Delete Confirm button" onClick={onConfirm} fill color="danger" disabled={value !== "delete"}>
           Delete
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap b/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap
index aca0331c2..07a482145 100644
--- a/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap
+++ b/public/pages/Indices/components/DeleteIndexModal/__snapshots__/DeleteIndexModal.test.tsx.snap
@@ -99,13 +99,13 @@ HTMLCollection [
                   </div>
                 </div>
                 <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"
                       placeholder="delete"
                       type="text"
                       value=""
@@ -119,7 +119,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               type="button"
             >
               <span
@@ -133,7 +133,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--danger euiButton--fill euiButton-isDisabled"
+              class="euiButton euiButton--danger euiButton--small euiButton--fill euiButton-isDisabled"
               data-test-subj="Delete Confirm button"
               disabled=""
               type="button"
diff --git a/public/pages/Indices/components/IndexControls/IndexControls.tsx b/public/pages/Indices/components/IndexControls/IndexControls.tsx
index e69a8d08c..ca812d9e6 100644
--- a/public/pages/Indices/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Indices/components/IndexControls/IndexControls.tsx
@@ -13,7 +13,7 @@ import {
   EuiSpacer,
   EuiFlexItem,
   EuiSearchBar,
-  EuiSwitch,
+  EuiCompressedSwitch,
   EuiButtonEmpty,
 } from "@elastic/eui";
 import { DataStream, ManagedCatIndex } from "../../../../../server/models/interfaces";
@@ -106,8 +106,7 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSwitch
-            compressed
+          <EuiCompressedSwitch
             label="Show data stream indexes"
             checked={showDataStreams}
             onChange={toggleShowDataStreams}
@@ -126,7 +125,7 @@ export default class IndexControls extends Component<IndexControlsProps, IndexCo
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSwitch
+          <EuiCompressedSwitch
             label="Show data stream indexes"
             checked={showDataStreams}
             onChange={toggleShowDataStreams}
diff --git a/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
index 4a09d54d6..a2d92b546 100644
--- a/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
+++ b/public/pages/Indices/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`<IndexControls /> spec renders data streams selection field 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiSwitch euiSwitch--primary"
+      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
     >
       <button
         aria-checked="true"
@@ -113,10 +113,7 @@ exports[`<IndexControls /> spec renders data streams selection field 1`] = `
           />
           <span
             class="euiSwitch__track"
-          >
-            EuiIconMock
-            EuiIconMock
-          </span>
+          />
         </span>
       </button>
       <span
@@ -186,7 +183,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiSwitch euiSwitch--primary"
+      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
     >
       <button
         aria-checked="false"
@@ -205,10 +202,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
           />
           <span
             class="euiSwitch__track"
-          >
-            EuiIconMock
-            EuiIconMock
-          </span>
+          />
         </span>
       </button>
       <span
diff --git a/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx b/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx
index 08f81789c..c1e9d64b7 100644
--- a/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx
+++ b/public/pages/Indices/components/IndexEmptyPrompt/IndexEmptyPrompt.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
 
 export const TEXT = {
   RESET_FILTERS: "There are no indices matching your applied filters. Reset your filters to view your indices.",
@@ -25,9 +25,9 @@ const getActions: React.SFC<IndexEmptyPromptProps> = ({ filterIsApplied, loading
 
   if (filterIsApplied) {
     return (
-      <EuiButton fill onClick={resetFilters} data-test-subj="indexEmptyPromptResetFilters">
+      <EuiSmallButton fill onClick={resetFilters} data-test-subj="indexEmptyPromptResetFilters">
         Reset Filters
-      </EuiButton>
+      </EuiSmallButton>
     );
   }
 
@@ -40,7 +40,7 @@ interface IndexEmptyPromptProps {
   resetFilters: () => void;
 }
 
-const IndexEmptyPrompt: React.SFC<IndexEmptyPromptProps> = props => (
+const IndexEmptyPrompt: React.SFC<IndexEmptyPromptProps> = (props) => (
   <EuiEmptyPrompt
     style={{ maxWidth: "45em" }}
     body={
diff --git a/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx b/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx
index d55d0137c..cc91861d3 100644
--- a/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx
+++ b/public/pages/Indices/components/OpenIndexModal/OpenIndexModal.tsx
@@ -5,8 +5,8 @@
 
 import React from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -47,12 +47,12 @@ export default function OpenIndexModal(props: OpenIndexModalProps) {
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButtonEmpty data-test-subj="Open Cancel button" onClick={onClose}>
+        <EuiSmallButtonEmpty data-test-subj="Open Cancel button" onClick={onClose}>
           Cancel
-        </EuiButtonEmpty>
-        <EuiButton data-test-subj="Open Confirm button" onClick={onConfirm} fill>
+        </EuiSmallButtonEmpty>
+        <EuiSmallButton data-test-subj="Open Confirm button" onClick={onConfirm} fill>
           Open
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap b/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap
index 02283748a..5941ce115 100644
--- a/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap
+++ b/public/pages/Indices/components/OpenIndexModal/__snapshots__/OpenIndexModal.test.tsx.snap
@@ -67,7 +67,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="Open Cancel button"
               type="button"
             >
@@ -82,7 +82,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="Open Confirm button"
               type="button"
             >
diff --git a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
index 5c099744b..26164b897 100644
--- a/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
+++ b/public/pages/Indices/containers/Indices/__snapshots__/Indices.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`<Indices /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="RefreshButton"
                 type="button"
               >
@@ -67,7 +67,7 @@ exports[`<Indices /> spec renders the component 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     type="button"
                   >
                     <span
@@ -88,7 +88,7 @@ exports[`<Indices /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="Create IndexButton"
                 type="button"
               >
@@ -158,7 +158,7 @@ exports[`<Indices /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <div
-          class="euiSwitch euiSwitch--primary"
+          class="euiSwitch euiSwitch--primary euiSwitch--compressed"
         >
           <button
             aria-checked="false"
@@ -177,10 +177,7 @@ exports[`<Indices /> spec renders the component 1`] = `
               />
               <span
                 class="euiSwitch__track"
-              >
-                EuiIconMock
-                EuiIconMock
-              </span>
+              />
             </span>
           </button>
           <span
diff --git a/public/pages/Indices/containers/IndicesActions/__snapshots__/IndicesActions.test.tsx.snap b/public/pages/Indices/containers/IndicesActions/__snapshots__/IndicesActions.test.tsx.snap
index de5f3cb42..e0bd558c1 100644
--- a/public/pages/Indices/containers/IndicesActions/__snapshots__/IndicesActions.test.tsx.snap
+++ b/public/pages/Indices/containers/IndicesActions/__snapshots__/IndicesActions.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<IndicesActions /> spec Split index by calling commonService 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -36,7 +36,7 @@ exports[`<IndicesActions /> spec clear cache for all indexes failed if some inde
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -63,7 +63,7 @@ exports[`<IndicesActions /> spec clear cache for all indexes successfully by cal
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -90,7 +90,7 @@ exports[`<IndicesActions /> spec clear cache for mulitple indexes by calling com
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -117,7 +117,7 @@ exports[`<IndicesActions /> spec close index by calling commonService 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -144,7 +144,7 @@ exports[`<IndicesActions /> spec delete index by calling commonService 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -171,7 +171,7 @@ exports[`<IndicesActions /> spec filter indices failed when clearing caches for
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -198,7 +198,7 @@ exports[`<IndicesActions /> spec filter some closed or blocked indices when clea
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -225,7 +225,7 @@ exports[`<IndicesActions /> spec open index by calling commonService 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -259,7 +259,7 @@ exports[`<IndicesActions /> spec refresh selected indexes by calling commonServi
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -377,7 +377,7 @@ exports[`<IndicesActions /> spec refresh selected indexes by calling commonServi
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               type="button"
             >
               <span
@@ -391,7 +391,7 @@ exports[`<IndicesActions /> spec refresh selected indexes by calling commonServi
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="refreshConfirmButton"
               type="button"
             >
@@ -434,7 +434,7 @@ HTMLCollection [
         class="euiPopover__anchor"
       >
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           type="button"
         >
           <span
@@ -550,7 +550,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="flushCancelButton"
               type="button"
             >
@@ -565,7 +565,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="flushConfirmButton"
               type="button"
             >
@@ -603,7 +603,7 @@ exports[`<IndicesActions /> spec renders the component and all the actions shoul
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -630,7 +630,7 @@ exports[`<IndicesActions /> spec shrink action is disabled if multiple indices a
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -657,7 +657,7 @@ exports[`<IndicesActions /> spec shrink action is disabled if the selected index
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -684,7 +684,7 @@ exports[`<IndicesActions /> spec shrink index by calling commonService 1`] = `
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -711,7 +711,7 @@ exports[`<IndicesActions /> spec split action is disabled if multiple indices ar
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -738,7 +738,7 @@ exports[`<IndicesActions /> spec split action is disabled if the selected index
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -765,7 +765,7 @@ exports[`<IndicesActions /> spec unable to clear cache when clearing cache for a
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
diff --git a/public/pages/Indices/containers/IndicesActions/index.tsx b/public/pages/Indices/containers/IndicesActions/index.tsx
index 366cb3c94..35be9cd08 100644
--- a/public/pages/Indices/containers/IndicesActions/index.tsx
+++ b/public/pages/Indices/containers/IndicesActions/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useCallback, useContext, useMemo, useState } from "react";
-import { EuiButton, EuiContextMenu } from "@elastic/eui";
+import { EuiSmallButton, EuiContextMenu } from "@elastic/eui";
 
 import { ManagedCatIndex } from "../../../../../server/models/interfaces";
 import ApplyPolicyModal from "../../components/ApplyPolicyModal";
@@ -139,9 +139,9 @@ export default function IndicesActions(props: IndicesActionsProps) {
             data-test-subj="moreAction"
             panelPaddingSize="none"
             button={
-              <EuiButton iconType="arrowDown" iconSide="right" size={size}>
+              <EuiSmallButton iconType="arrowDown" iconSide="right">
                 Actions
-              </EuiButton>
+              </EuiSmallButton>
             }
           >
             <EuiContextMenu
diff --git a/public/pages/ManagedIndices/components/InfoModal/InfoModal.tsx b/public/pages/ManagedIndices/components/InfoModal/InfoModal.tsx
index 8abf5befc..05cec47f1 100644
--- a/public/pages/ManagedIndices/components/InfoModal/InfoModal.tsx
+++ b/public/pages/ManagedIndices/components/InfoModal/InfoModal.tsx
@@ -5,7 +5,7 @@
 
 import React from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -36,9 +36,9 @@ const InfoModal = ({ info, onClose }: InfoModalProps) => (
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton fill onClick={onClose} data-test-subj="infoModalCloseButton">
+        <EuiSmallButton fill onClick={onClose} data-test-subj="infoModalCloseButton">
           Close
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   </EuiOverlayMask>
diff --git a/public/pages/ManagedIndices/components/InfoModal/__snapshots__/InfoModal.test.tsx.snap b/public/pages/ManagedIndices/components/InfoModal/__snapshots__/InfoModal.test.tsx.snap
index aba487664..91124c422 100644
--- a/public/pages/ManagedIndices/components/InfoModal/__snapshots__/InfoModal.test.tsx.snap
+++ b/public/pages/ManagedIndices/components/InfoModal/__snapshots__/InfoModal.test.tsx.snap
@@ -107,7 +107,7 @@ exports[`<InfoModal /> spec renders the component 1`] = `
           class="euiModalFooter"
         >
           <button
-            class="euiButton euiButton--primary euiButton--fill"
+            class="euiButton euiButton--primary euiButton--small euiButton--fill"
             data-test-subj="infoModalCloseButton"
             type="button"
           >
diff --git a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
index 7f648b69c..fdea115a0 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
+++ b/public/pages/ManagedIndices/components/ManagedIndexControls/ManagedIndexControls.tsx
@@ -11,7 +11,7 @@ import {
   EuiFlexItem,
   EuiPagination,
   EuiSearchBar,
-  EuiSwitch,
+  EuiCompressedSwitch,
   EuiButton,
   EuiPopover,
   EuiContextMenuPanel,
@@ -102,8 +102,7 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
         </EuiFlexItem>
         <EuiFlexItem grow={false}>{Actions}</EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSwitch
-            compressed
+          <EuiCompressedSwitch
             label="Show data stream indexes"
             checked={showDataStreams}
             onChange={toggleShowDataStreams}
@@ -122,7 +121,7 @@ export default class ManagedIndexControls extends Component<ManagedIndexControls
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSwitch
+          <EuiCompressedSwitch
             label="Show data stream indexes"
             checked={showDataStreams}
             onChange={toggleShowDataStreams}
diff --git a/public/pages/ManagedIndices/components/ManagedIndexControls/__snapshots__/ManagedIndexControls.test.tsx.snap b/public/pages/ManagedIndices/components/ManagedIndexControls/__snapshots__/ManagedIndexControls.test.tsx.snap
index 96fc4f29c..82bf738f9 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexControls/__snapshots__/ManagedIndexControls.test.tsx.snap
+++ b/public/pages/ManagedIndices/components/ManagedIndexControls/__snapshots__/ManagedIndexControls.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`<ManagedIndexControls /> spec renders data streams selection field 1`]
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiSwitch euiSwitch--primary"
+      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
     >
       <button
         aria-checked="true"
@@ -102,10 +102,7 @@ exports[`<ManagedIndexControls /> spec renders data streams selection field 1`]
           />
           <span
             class="euiSwitch__track"
-          >
-            EuiIconMock
-            EuiIconMock
-          </span>
+          />
         </span>
       </button>
       <span
@@ -175,7 +172,7 @@ exports[`<ManagedIndexControls /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiSwitch euiSwitch--primary"
+      class="euiSwitch euiSwitch--primary euiSwitch--compressed"
     >
       <button
         aria-checked="false"
@@ -194,10 +191,7 @@ exports[`<ManagedIndexControls /> spec renders the component 1`] = `
           />
           <span
             class="euiSwitch__track"
-          >
-            EuiIconMock
-            EuiIconMock
-          </span>
+          />
         </span>
       </button>
       <span
diff --git a/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx b/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx
index 0d9eb8b5a..b3c07cf30 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx
+++ b/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/ManagedIndexEmptyPrompt.tsx
@@ -5,7 +5,7 @@
 
 import React from "react";
 import * as H from "history";
-import { EuiButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
 import { ModalConsumer } from "../../../../components/Modal";
 import CreatePolicyModal from "../../../../components/CreatePolicyModal";
 import { ROUTES } from "../../../../utils/constants";
@@ -27,9 +27,9 @@ const getActions: React.SFC<ManagedIndexEmptyPromptProps> = ({ history, filterIs
 
   if (filterIsApplied) {
     return (
-      <EuiButton fill onClick={resetFilters} data-test-subj="managedIndexEmptyPromptResetFilters">
+      <EuiSmallButton fill onClick={resetFilters} data-test-subj="managedIndexEmptyPromptResetFilters">
         Reset Filters
-      </EuiButton>
+      </EuiSmallButton>
     );
   }
 
@@ -40,9 +40,9 @@ const getActions: React.SFC<ManagedIndexEmptyPromptProps> = ({ history, filterIs
   return (
     <ModalConsumer>
       {({ onShow }) => (
-        <EuiButton fill onClick={() => onShow(CreatePolicyModal, { history, onClickContinue: onClickCreate })}>
+        <EuiSmallButton fill onClick={() => onShow(CreatePolicyModal, { history, onClickContinue: onClickCreate })}>
           Create policy
-        </EuiButton>
+        </EuiSmallButton>
       )}
     </ModalConsumer>
   );
diff --git a/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/__snapshots__/ManagedIndexEmptyPrompt.test.tsx.snap b/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/__snapshots__/ManagedIndexEmptyPrompt.test.tsx.snap
index b3000d8e9..f560f1ebc 100644
--- a/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/__snapshots__/ManagedIndexEmptyPrompt.test.tsx.snap
+++ b/public/pages/ManagedIndices/components/ManagedIndexEmptyPrompt/__snapshots__/ManagedIndexEmptyPrompt.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<ManagedIndexEmptyPrompt /> spec renders the component 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/ManagedIndices/components/RetryModal/RetryModal.tsx b/public/pages/ManagedIndices/components/RetryModal/RetryModal.tsx
index 0ea23909f..aa72b51eb 100644
--- a/public/pages/ManagedIndices/components/RetryModal/RetryModal.tsx
+++ b/public/pages/ManagedIndices/components/RetryModal/RetryModal.tsx
@@ -5,18 +5,18 @@
 
 import React, { Component } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiRadioGroup,
-  EuiSelect,
+  EuiCompressedRadioGroup,
+  EuiCompressedSelect,
   EuiSpacer,
-  EuiFormRow,
+  EuiCompressedFormRow,
 } from "@elastic/eui";
 import { ManagedIndexItem, State } from "../../../../../models/interfaces";
 import { BrowserServices } from "../../../../models/interfaces";
@@ -139,28 +139,28 @@ export default class RetryModal extends Component<RetryModalProps, RetryModalSta
           </EuiModalHeader>
 
           <EuiModalBody>
-            <EuiRadioGroup options={radioOptions} idSelected={radioIdSelected} onChange={this.onChange} />
+            <EuiCompressedRadioGroup options={radioOptions} idSelected={radioIdSelected} onChange={this.onChange} />
 
             <EuiSpacer size="s" />
-            <EuiFormRow label="Start state" helpText="Only common states shared across all selected indexes are available">
-              <EuiSelect
+            <EuiCompressedFormRow label="Start state" helpText="Only common states shared across all selected indexes are available">
+              <EuiCompressedSelect
                 disabled={radioIdSelected !== Radio.State}
                 options={stateOptions}
                 value={stateSelected}
                 onChange={this.onSelectChange}
                 aria-label="Retry failed policy from"
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButtonEmpty onClick={onClose} data-test-subj="retryModalCloseButton">
+            <EuiSmallButtonEmpty onClick={onClose} data-test-subj="retryModalCloseButton">
               Close
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
 
-            <EuiButton onClick={this.onRetry} disabled={!retryItems.length} fill data-test-subj="retryModalRetryButton">
+            <EuiSmallButton onClick={this.onRetry} disabled={!retryItems.length} fill data-test-subj="retryModalRetryButton">
               Retry
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
diff --git a/public/pages/ManagedIndices/components/RetryModal/__snapshots__/RetryModal.test.tsx.snap b/public/pages/ManagedIndices/components/RetryModal/__snapshots__/RetryModal.test.tsx.snap
index ccfc3efe3..21e1a1af2 100644
--- a/public/pages/ManagedIndices/components/RetryModal/__snapshots__/RetryModal.test.tsx.snap
+++ b/public/pages/ManagedIndices/components/RetryModal/__snapshots__/RetryModal.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`<RetryModal /> spec renders the component 1`] = `
           >
             <div>
               <div
-                class="euiRadio euiRadioGroup__item"
+                class="euiRadio euiRadio--compressed euiRadioGroup__item"
               >
                 <input
                   checked=""
@@ -65,7 +65,7 @@ exports[`<RetryModal /> spec renders the component 1`] = `
                 </label>
               </div>
               <div
-                class="euiRadio euiRadioGroup__item"
+                class="euiRadio euiRadio--compressed euiRadioGroup__item"
               >
                 <input
                   class="euiRadio__input"
@@ -88,7 +88,7 @@ exports[`<RetryModal /> spec renders the component 1`] = `
               class="euiSpacer euiSpacer--s"
             />
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -105,7 +105,7 @@ exports[`<RetryModal /> spec renders the component 1`] = `
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
@@ -113,7 +113,7 @@ exports[`<RetryModal /> spec renders the component 1`] = `
                     <select
                       aria-describedby="some_html_id-help-0"
                       aria-label="Retry failed policy from"
-                      class="euiSelect"
+                      class="euiSelect euiSelect--compressed"
                       disabled=""
                       id="some_html_id"
                     >
@@ -153,7 +153,7 @@ exports[`<RetryModal /> spec renders the component 1`] = `
           class="euiModalFooter"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
             data-test-subj="retryModalCloseButton"
             type="button"
           >
@@ -168,7 +168,7 @@ exports[`<RetryModal /> spec renders the component 1`] = `
             </span>
           </button>
           <button
-            class="euiButton euiButton--primary euiButton--fill"
+            class="euiButton euiButton--primary euiButton--small euiButton--fill"
             data-test-subj="retryModalRetryButton"
             type="button"
           >
diff --git a/public/pages/ManagedIndices/components/RolloverAliasModal/RolloverAliasModal.tsx b/public/pages/ManagedIndices/components/RolloverAliasModal/RolloverAliasModal.tsx
index 16b92b7ba..6f6befa0d 100644
--- a/public/pages/ManagedIndices/components/RolloverAliasModal/RolloverAliasModal.tsx
+++ b/public/pages/ManagedIndices/components/RolloverAliasModal/RolloverAliasModal.tsx
@@ -5,16 +5,16 @@
 
 import React, { Component } from "react";
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiFormRow,
-  EuiFieldText,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
 } from "@elastic/eui";
 import { BrowserServices } from "../../../../models/interfaces";
 import { getErrorMessage } from "../../../../utils/helpers";
@@ -77,19 +77,24 @@ export default class RolloverAliasModal extends Component<RolloverAliasModalProp
           </EuiModalHeader>
 
           <EuiModalBody>
-            <EuiFormRow label="Rollover alias" helpText="A rollover alias is required when using the rollover action.">
-              <EuiFieldText placeholder="Rollover alias" value={rolloverAlias} onChange={this.onChange} />
-            </EuiFormRow>
+            <EuiCompressedFormRow label="Rollover alias" helpText="A rollover alias is required when using the rollover action.">
+              <EuiCompressedFieldText placeholder="Rollover alias" value={rolloverAlias} onChange={this.onChange} />
+            </EuiCompressedFormRow>
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButtonEmpty onClick={onClose} data-test-subj="editRolloverAliasModalCloseButton">
+            <EuiSmallButtonEmpty onClick={onClose} data-test-subj="editRolloverAliasModalCloseButton">
               Close
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
 
-            <EuiButton onClick={this.onEditRolloverAlias} disabled={!rolloverAlias} fill data-test-subj="editRolloverAliasModalAddButton">
+            <EuiSmallButton
+              onClick={this.onEditRolloverAlias}
+              disabled={!rolloverAlias}
+              fill
+              data-test-subj="editRolloverAliasModalAddButton"
+            >
               Edit
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>
diff --git a/public/pages/ManagedIndices/components/RolloverAliasModal/__snapshots__/RolloverAliasModal.test.tsx.snap b/public/pages/ManagedIndices/components/RolloverAliasModal/__snapshots__/RolloverAliasModal.test.tsx.snap
index 22658a72f..a0458032e 100644
--- a/public/pages/ManagedIndices/components/RolloverAliasModal/__snapshots__/RolloverAliasModal.test.tsx.snap
+++ b/public/pages/ManagedIndices/components/RolloverAliasModal/__snapshots__/RolloverAliasModal.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`<RolloverAliasModal /> spec renders the component 1`] = `
             class="euiModalBody__overflow"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -61,14 +61,14 @@ exports[`<RolloverAliasModal /> spec renders the component 1`] = `
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <input
                       aria-describedby="some_html_id-help-0"
-                      class="euiFieldText"
+                      class="euiFieldText euiFieldText--compressed"
                       id="some_html_id"
                       placeholder="Rollover alias"
                       type="text"
@@ -90,7 +90,7 @@ exports[`<RolloverAliasModal /> spec renders the component 1`] = `
           class="euiModalFooter"
         >
           <button
-            class="euiButtonEmpty euiButtonEmpty--primary"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
             data-test-subj="editRolloverAliasModalCloseButton"
             type="button"
           >
@@ -105,7 +105,7 @@ exports[`<RolloverAliasModal /> spec renders the component 1`] = `
             </span>
           </button>
           <button
-            class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+            class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
             data-test-subj="editRolloverAliasModalAddButton"
             disabled=""
             type="button"
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
index c00e99b20..bc4869762 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/ManagedIndices.tsx
@@ -11,7 +11,7 @@ import {
   EuiLink,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton,
+  EuiSmallButton,
   EuiTitle,
   EuiSpacer,
   EuiTableFieldDataColumnType,
@@ -548,16 +548,15 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
     };
 
     const actionsButton = (
-      <EuiButton
+      <EuiSmallButton
         iconType="arrowDown"
         iconSide="right"
         disabled={!selectedItems.length}
         onClick={this.onActionButtonClick}
         data-test-subj="actionButton"
-        size="s"
       >
         Actions
-      </EuiButton>
+      </EuiSmallButton>
     );
 
     const popoverActionItems = [
@@ -682,14 +681,14 @@ export class ManagedIndices extends MDSEnabledComponent<ManagedIndicesProps, Man
         <EuiFlexGroup alignItems="center">
           <EuiFlexItem></EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton iconType="refresh" onClick={this.getManagedIndices} data-test-subj="refreshButton">
+            <EuiSmallButton iconType="refresh" onClick={this.getManagedIndices} data-test-subj="refreshButton">
               Refresh
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton href={`${PLUGIN_NAME}#/change-policy`} data-test-subj="changePolicyButton">
+            <EuiSmallButton href={`${PLUGIN_NAME}#/change-policy`} data-test-subj="changePolicyButton">
               Change policy
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
 
diff --git a/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap b/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap
index c15090c49..49a924ae9 100644
--- a/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap
+++ b/public/pages/ManagedIndices/containers/ManagedIndices/__snapshots__/ManagedIndices.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<ManagedIndices /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         data-test-subj="refreshButton"
         type="button"
       >
@@ -34,7 +34,7 @@ exports[`<ManagedIndices /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <a
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         data-test-subj="changePolicyButton"
         href="opensearch_index_management_dashboards#/change-policy"
         rel="noreferrer"
@@ -93,7 +93,7 @@ exports[`<ManagedIndices /> spec renders the component 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="Edit rollover aliasButton"
                   disabled=""
                   type="button"
@@ -113,7 +113,7 @@ exports[`<ManagedIndices /> spec renders the component 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="Remove policyButton"
                   disabled=""
                   type="button"
@@ -133,7 +133,7 @@ exports[`<ManagedIndices /> spec renders the component 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="Retry policyButton"
                   disabled=""
                   type="button"
@@ -204,7 +204,7 @@ exports[`<ManagedIndices /> spec renders the component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            class="euiSwitch euiSwitch--primary"
+            class="euiSwitch euiSwitch--primary euiSwitch--compressed"
           >
             <button
               aria-checked="false"
@@ -223,10 +223,7 @@ exports[`<ManagedIndices /> spec renders the component 1`] = `
                 />
                 <span
                   class="euiSwitch__track"
-                >
-                  EuiIconMock
-                  EuiIconMock
-                </span>
+                />
               </span>
             </button>
             <span
diff --git a/public/pages/Notifications/containers/Notifications/Notifications.tsx b/public/pages/Notifications/containers/Notifications/Notifications.tsx
index 2d1382732..774d2dd66 100644
--- a/public/pages/Notifications/containers/Notifications/Notifications.tsx
+++ b/public/pages/Notifications/containers/Notifications/Notifications.tsx
@@ -5,7 +5,7 @@
 
 import React, { ReactChild, useContext, useEffect, useRef, useState } from "react";
 import { unstable_batchedUpdates } from "react-dom";
-import { EuiButton, EuiCallOut, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
+import { EuiSmallButton, EuiCallOut, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText, EuiTitle } from "@elastic/eui";
 import { get } from "lodash";
 import { CoreStart } from "opensearch-dashboards/public";
 import useField from "../../../../lib/field";
@@ -216,9 +216,9 @@ const Notifications = (props: NotificationsProps) => {
               </CustomFormRow>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+              <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
                 Manage channels
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
           <EuiSpacer />
diff --git a/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap b/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap
index 7f9b35369..0dc9715d5 100644
--- a/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap
+++ b/public/pages/Notifications/containers/Notifications/__snapshots__/Notifications.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`<Notifications /> spec View without permission 1`] = `
         Notification settings
       </h1>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -33,7 +33,7 @@ exports[`<Notifications /> spec View without permission 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <a
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         href="notifications-dashboards#/channels"
         rel="noopener noreferrer"
         target="_blank"
@@ -102,7 +102,7 @@ exports[`<Notifications /> spec renders 1`] = `
         Notification settings
       </h1>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -121,7 +121,7 @@ exports[`<Notifications /> spec renders 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <a
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         href="notifications-dashboards#/channels"
         rel="noopener noreferrer"
         target="_blank"
@@ -189,14 +189,14 @@ exports[`<Notifications /> spec renders 1`] = `
           class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
               class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 id="some_html_id-row"
               >
                 <div
@@ -222,7 +222,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -249,7 +249,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -311,14 +311,14 @@ exports[`<Notifications /> spec renders 1`] = `
           class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
               class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 id="some_html_id-row"
               >
                 <div
@@ -344,7 +344,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -371,7 +371,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -433,14 +433,14 @@ exports[`<Notifications /> spec renders 1`] = `
           class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
               class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 id="some_html_id-row"
               >
                 <div
@@ -466,7 +466,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -493,7 +493,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -555,14 +555,14 @@ exports[`<Notifications /> spec renders 1`] = `
           class="euiFlexItem euiDescribedFormGroup__fields euiDescribedFormGroup__fieldPadding--xsmall"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
               class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 id="some_html_id-row"
               >
                 <div
@@ -588,7 +588,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
@@ -615,7 +615,7 @@ exports[`<Notifications /> spec renders 1`] = `
                         class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                       >
                         <div
-                          class="euiCheckbox"
+                          class="euiCheckbox euiCheckbox--compressed"
                         >
                           <input
                             class="euiCheckbox__input"
diff --git a/public/pages/Policies/components/PolicyControls/PolicyControls.tsx b/public/pages/Policies/components/PolicyControls/PolicyControls.tsx
index 433ca1910..ae24a5436 100644
--- a/public/pages/Policies/components/PolicyControls/PolicyControls.tsx
+++ b/public/pages/Policies/components/PolicyControls/PolicyControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiPagination } from "@elastic/eui";
+import { EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem, EuiPagination } from "@elastic/eui";
 
 interface PolicyControlsProps {
   activePage: number;
@@ -35,7 +35,7 @@ export default class PolicyControls extends Component<PolicyControlsProps, Polic
     return (
       <EuiFlexGroup style={{ padding: "0px 5px" }}>
         <EuiFlexItem>
-          <EuiFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={onSearchChange} />
+          <EuiCompressedFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={onSearchChange} />
         </EuiFlexItem>
         {pageCount > 1 && (
           <EuiFlexItem grow={false} style={{ justifyContent: "center" }}>
diff --git a/public/pages/Policies/components/PolicyControls/__snapshots__/PolicyControls.test.tsx.snap b/public/pages/Policies/components/PolicyControls/__snapshots__/PolicyControls.test.tsx.snap
index 386e1a781..c7f062a29 100644
--- a/public/pages/Policies/components/PolicyControls/__snapshots__/PolicyControls.test.tsx.snap
+++ b/public/pages/Policies/components/PolicyControls/__snapshots__/PolicyControls.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`<PolicyControls /> spec renders the component 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
           placeholder="Search"
           type="search"
           value="testing"
@@ -34,7 +34,7 @@ exports[`<PolicyControls /> spec renders the component 1`] = `
         >
           <button
             aria-label="Clear input"
-            class="euiFormControlLayoutClearButton"
+            class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
             type="button"
           >
             EuiIconMock
diff --git a/public/pages/Policies/components/PolicyEmptyPrompt/PolicyEmptyPrompt.tsx b/public/pages/Policies/components/PolicyEmptyPrompt/PolicyEmptyPrompt.tsx
index c6a2c22b6..7ece71a51 100644
--- a/public/pages/Policies/components/PolicyEmptyPrompt/PolicyEmptyPrompt.tsx
+++ b/public/pages/Policies/components/PolicyEmptyPrompt/PolicyEmptyPrompt.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
 import { ROUTES } from "../../../../utils/constants";
 import { ModalConsumer } from "../../../../components/Modal";
 import CreatePolicyModal from "../../../../components/CreatePolicyModal";
@@ -27,9 +27,9 @@ const getActions: React.SFC<PolicyEmptyPromptProps> = ({ history, filterIsApplie
   }
   if (filterIsApplied) {
     return (
-      <EuiButton fill onClick={resetFilters} data-test-subj="policyEmptyPromptRestFilters">
+      <EuiSmallButton fill onClick={resetFilters} data-test-subj="policyEmptyPromptRestFilters">
         Reset Filters
-      </EuiButton>
+      </EuiSmallButton>
     );
   }
 
@@ -40,9 +40,9 @@ const getActions: React.SFC<PolicyEmptyPromptProps> = ({ history, filterIsApplie
   return (
     <ModalConsumer>
       {({ onShow }) => (
-        <EuiButton fill onClick={() => onShow(CreatePolicyModal, { history, onClickContinue: onClickCreate })}>
+        <EuiSmallButton fill onClick={() => onShow(CreatePolicyModal, { history, onClickContinue: onClickCreate })}>
           Create policy
-        </EuiButton>
+        </EuiSmallButton>
       )}
     </ModalConsumer>
   );
diff --git a/public/pages/Policies/components/PolicyEmptyPrompt/__snapshots__/PolicyEmptyPrompt.test.tsx.snap b/public/pages/Policies/components/PolicyEmptyPrompt/__snapshots__/PolicyEmptyPrompt.test.tsx.snap
index d537c6a1b..e6624253a 100644
--- a/public/pages/Policies/components/PolicyEmptyPrompt/__snapshots__/PolicyEmptyPrompt.test.tsx.snap
+++ b/public/pages/Policies/components/PolicyEmptyPrompt/__snapshots__/PolicyEmptyPrompt.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<PolicyEmptyPrompt /> spec renders the component 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/Policies/containers/Policies/Policies.tsx b/public/pages/Policies/containers/Policies/Policies.tsx
index 24960f203..3b1679b8e 100644
--- a/public/pages/Policies/containers/Policies/Policies.tsx
+++ b/public/pages/Policies/containers/Policies/Policies.tsx
@@ -18,7 +18,7 @@ import {
   // @ts-ignore
   Pagination,
   EuiTableSelectionType,
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiTextColor,
   EuiFlexGroup,
@@ -432,16 +432,15 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
     };
 
     const actionsButton = (
-      <EuiButton
+      <EuiSmallButton
         iconType="arrowDown"
         iconSide="right"
         disabled={!selectedItems.length}
         onClick={this.onActionButtonClick}
         data-test-subj="actionButton"
-        size="s"
       >
         Actions
-      </EuiButton>
+      </EuiSmallButton>
     );
 
     const popoverItems = [
diff --git a/public/pages/Policies/containers/Policies/__snapshots__/Policies.test.tsx.snap b/public/pages/Policies/containers/Policies/__snapshots__/Policies.test.tsx.snap
index 634cf99c9..16db51da8 100644
--- a/public/pages/Policies/containers/Policies/__snapshots__/Policies.test.tsx.snap
+++ b/public/pages/Policies/containers/Policies/__snapshots__/Policies.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`<IndexPolicies /> spec renders the component 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="DeleteButton"
                   disabled=""
                   type="button"
@@ -63,7 +63,7 @@ exports[`<IndexPolicies /> spec renders the component 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"
@@ -83,7 +83,7 @@ exports[`<IndexPolicies /> spec renders the component 1`] = `
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="Create policyButton"
                   type="button"
                 >
@@ -117,13 +117,13 @@ exports[`<IndexPolicies /> spec renders the component 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=""
diff --git a/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx b/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
index 36504643e..26574fb9d 100644
--- a/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
+++ b/public/pages/PolicyDetails/components/DeleteModal/DeleteModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, Fragment } from "react";
-import { EuiConfirmModal, EuiForm, EuiFormRow, EuiFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
+import { EuiConfirmModal, EuiForm, EuiCompressedFormRow, EuiCompressedFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
 
 interface DeleteModalProps {
   policyId: string;
@@ -44,9 +44,14 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
               Delete "<strong>{policyId}</strong>" permanently? Indices will no longer be managed using this policy.
             </Fragment>
             <EuiSpacer size="s" />
-            <EuiFormRow helpText={`To confirm deletion, type "delete".`}>
-              <EuiFieldText value={confirmDeleteText} placeholder="delete" onChange={this.onChange} data-test-subj="deleteTextField" />
-            </EuiFormRow>
+            <EuiCompressedFormRow helpText={`To confirm deletion, type "delete".`}>
+              <EuiCompressedFieldText
+                value={confirmDeleteText}
+                placeholder="delete"
+                onChange={this.onChange}
+                data-test-subj="deleteTextField"
+              />
+            </EuiCompressedFormRow>
           </EuiForm>
         </EuiConfirmModal>
       </EuiOverlayMask>
diff --git a/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap b/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
index 62d043f89..3b72dd09a 100644
--- a/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
+++ b/public/pages/PolicyDetails/components/DeleteModal/__snapshots__/DeleteModal.test.tsx.snap
@@ -72,21 +72,21 @@ exports[`<DeleteModal /> spec renders the component 1`] = `
                     class="euiSpacer euiSpacer--s"
                   />
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--compressed"
                     id="some_html_id-row"
                   >
                     <div
                       class="euiFormRow__fieldWrapper"
                     >
                       <div
-                        class="euiFormControlLayout"
+                        class="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
                           class="euiFormControlLayout__childrenWrapper"
                         >
                           <input
                             aria-describedby="some_html_id-help-0"
-                            class="euiFieldText"
+                            class="euiFieldText euiFieldText--compressed"
                             data-test-subj="deleteTextField"
                             id="some_html_id"
                             placeholder="delete"
diff --git a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
index b39caab6f..4c71b35c4 100644
--- a/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
+++ b/public/pages/PolicyDetails/containers/PolicyDetails/PolicyDetails.tsx
@@ -9,7 +9,7 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton,
+  EuiSmallButton,
   EuiLoadingSpinner,
   EuiBasicTable,
   EuiTableFieldDataColumnType,
@@ -288,24 +288,24 @@ export class PolicyDetails extends Component<PolicyDetailsProps, PolicyDetailsSt
                   <EuiFlexItem grow={false}>
                     <ModalConsumer>
                       {({ onShow }) => (
-                        <EuiButton
+                        <EuiSmallButton
                           onClick={() => onShow(CreatePolicyModal, { isEdit: true, onClickContinue: this.onEdit })}
                           data-test-subj="policy-details-edit-button"
                         >
                           Edit
-                        </EuiButton>
+                        </EuiSmallButton>
                       )}
                     </ModalConsumer>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
+                    <EuiSmallButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
                       Delete
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton onClick={this.showJSONModal} data-test-subj="viewButton">
+                    <EuiSmallButton onClick={this.showJSONModal} data-test-subj="viewButton">
                       View JSON
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
diff --git a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
index 8019fd3d1..c8fcd6226 100644
--- a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
+++ b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
@@ -84,7 +84,7 @@ Object {
                       class="euiForm"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         data-test-subj="form-name-index"
                         id="some_html_id-row"
                       >
@@ -106,13 +106,13 @@ Object {
                             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldText"
+                                  class="euiFieldText euiFieldText--compressed"
                                   placeholder="Specify a name for the new index."
                                   type="text"
                                   value=""
@@ -131,7 +131,7 @@ Object {
                         </div>
                       </div>
                       <div
-                        class="euiFormRow euiFormRow--fullWidth"
+                        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                         data-test-subj="form-name-templateMessage"
                         id="some_html_id-row"
                       >
@@ -140,7 +140,7 @@ Object {
                         />
                       </div>
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         data-test-subj="form-name-aliases"
                         id="some_html_id-row"
                       >
@@ -173,17 +173,17 @@ Object {
                             <div
                               aria-expanded="false"
                               aria-haspopup="listbox"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               role="combobox"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <div
-                                    class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                                     data-test-subj="comboBoxInput"
                                     tabindex="-1"
                                   >
@@ -266,7 +266,7 @@ Object {
                       class="euiForm"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         data-test-subj="form-name-index.number_of_shards"
                         id="some_html_id-row"
                       >
@@ -299,13 +299,13 @@ Object {
                             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldNumber"
+                                  class="euiFieldNumber euiFieldNumber--compressed"
                                   placeholder="Specify primary shard count."
                                   type="number"
                                   value="1"
@@ -316,7 +316,7 @@ Object {
                         </div>
                       </div>
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         data-test-subj="form-name-index.number_of_replicas"
                         id="some_html_id-row"
                       >
@@ -344,13 +344,13 @@ Object {
                             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldNumber"
+                                  class="euiFieldNumber euiFieldNumber--compressed"
                                   placeholder="Specify number of replicas."
                                   type="number"
                                   value="1"
@@ -361,7 +361,7 @@ Object {
                         </div>
                       </div>
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         data-test-subj="form-name-index.refresh_interval"
                         id="some_html_id-row"
                       >
@@ -389,13 +389,13 @@ Object {
                             class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldText"
+                                  class="euiFieldText euiFieldText--compressed"
                                   placeholder="Can be set to -1 to disable refreshing."
                                   type="text"
                                   value="1s"
@@ -451,7 +451,7 @@ Object {
                                 class="euiSpacer euiSpacer--s"
                               />
                               <div
-                                class="euiFormRow euiFormRow--fullWidth"
+                                class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                                 data-test-subj="formNameAdvancedSettings"
                                 id="some_html_id-row"
                               >
@@ -664,7 +664,7 @@ Object {
                         </i>
                       </div>
                       <div
-                        class="euiFormRow euiFormRow--fullWidth"
+                        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                         id="some_html_id-row"
                       >
                         <div
@@ -707,7 +707,7 @@ Object {
                     style="padding: 0px 10px;"
                   >
                     <div
-                      class="euiFormRow euiFormRow--fullWidth"
+                      class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                       id="some_html_id-row"
                     >
                       <div
@@ -787,7 +787,7 @@ Object {
                           class="euiSpacer euiSpacer--l"
                         />
                         <button
-                          class="euiButton euiButton--primary"
+                          class="euiButton euiButton--primary euiButton--small"
                           data-test-subj="createIndexAddFieldButton"
                           style="margin-right: 8px;"
                           type="button"
@@ -803,7 +803,7 @@ Object {
                           </span>
                         </button>
                         <button
-                          class="euiButton euiButton--primary"
+                          class="euiButton euiButton--primary euiButton--small"
                           data-test-subj="createIndexAddObjectFieldButton"
                           type="button"
                         >
@@ -834,7 +834,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                   data-test-subj="flyout-footer-cancel-button"
                   type="button"
                 >
@@ -853,7 +853,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   data-test-subj="flyout-footer-action-button"
                   type="button"
                 >
diff --git a/public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap b/public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
index 6f9f71ea7..732e2608e 100644
--- a/public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
+++ b/public/pages/Reindex/components/IndexSelect/__snapshots__/IndexSelect.test.tsx.snap
@@ -9,17 +9,17 @@ Object {
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox"
+          class="euiComboBox euiComboBox--compressed"
           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"
               >
@@ -49,7 +49,7 @@ Object {
               >
                 <button
                   aria-label="Clear input"
-                  class="euiFormControlLayoutClearButton"
+                  class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                   data-test-subj="comboBoxClearButton"
                   type="button"
                 >
@@ -75,17 +75,17 @@ Object {
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         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"
             >
@@ -115,7 +115,7 @@ Object {
             >
               <button
                 aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
+                class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                 data-test-subj="comboBoxClearButton"
                 type="button"
               >
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
index db937eb5d..42c98b178 100644
--- a/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/ReindexAdvancedOptions.tsx
@@ -5,7 +5,15 @@
 
 import React, { ChangeEvent, useContext, useEffect, useState } from "react";
 import CustomFormRow, { OptionalLabel } from "../../../../components/CustomFormRow";
-import { EuiCheckbox, EuiComboBox, EuiComboBoxOptionOption, EuiFieldNumber, EuiLink, EuiRadioGroup, EuiSpacer } from "@elastic/eui";
+import {
+  EuiCompressedCheckbox,
+  EuiCompressedComboBox,
+  EuiComboBoxOptionOption,
+  EuiCompressedFieldNumber,
+  EuiLink,
+  EuiCompressedRadioGroup,
+  EuiSpacer,
+} from "@elastic/eui";
 import { CoreServicesContext } from "../../../../components/core_services";
 import { CoreStart } from "opensearch-dashboards/public";
 
@@ -68,7 +76,7 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
           </>
         }
       >
-        <EuiCheckbox
+        <EuiCompressedCheckbox
           id="uniqueCheckbox"
           label="Reindex only unique documents"
           checked={reindexUniqueDocuments}
@@ -88,7 +96,7 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
           </>
         }
       >
-        <EuiCheckbox
+        <EuiCompressedCheckbox
           id="ConflictsOptionCheckbox"
           label="Ignore conflicts during reindexing"
           checked={ignoreConflicts}
@@ -102,7 +110,7 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
         helpText="Divide this reindexing operation into smaller subtasks to run in parallel."
       >
         <>
-          <EuiCheckbox
+          <EuiCompressedCheckbox
             id="sliceEnabledCheckBox"
             data-test-subj="sliceEnabled"
             label="Slice this reindexing operation"
@@ -115,7 +123,7 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
           {sliceEnabled ? (
             <>
               <EuiSpacer />
-              <EuiRadioGroup
+              <EuiCompressedRadioGroup
                 options={[
                   {
                     id: "auto",
@@ -147,7 +155,7 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
             label="Number of subtasks"
             helpText="Specify the number of subtasks to divide this operation into."
           >
-            <EuiFieldNumber
+            <EuiCompressedFieldNumber
               data-test-subj="slices"
               value={slices}
               placeholder="Specify a number"
@@ -176,7 +184,7 @@ const ReindexAdvancedOptions = (props: ReindexOptionsProps) => {
           </>
         }
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           aria-label="Ingest Pipeline"
           placeholder="Select an ingest pipeline"
           data-test-subj="pipelineCombobox"
diff --git a/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap b/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
index 803d57feb..aa23ebd2a 100644
--- a/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
+++ b/public/pages/Reindex/components/ReindexAdvancedOptions/__snapshots__/ReindexAdvancedOptions.test.tsx.snap
@@ -7,7 +7,7 @@ Object {
     <div>
       <div>
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -37,7 +37,7 @@ Object {
               </button>
             </div>
             <div
-              class="euiCheckbox"
+              class="euiCheckbox euiCheckbox--compressed"
             >
               <input
                 checked=""
@@ -61,7 +61,7 @@ Object {
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -91,7 +91,7 @@ Object {
               </button>
             </div>
             <div
-              class="euiCheckbox"
+              class="euiCheckbox euiCheckbox--compressed"
             >
               <input
                 checked=""
@@ -115,7 +115,7 @@ Object {
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -138,7 +138,7 @@ Object {
               Divide this reindexing operation into smaller subtasks to run in parallel.
             </div>
             <div
-              class="euiCheckbox"
+              class="euiCheckbox euiCheckbox--compressed"
             >
               <input
                 checked=""
@@ -164,7 +164,7 @@ Object {
               data-test-subj="sliceOption"
             >
               <div
-                class="euiRadio euiRadioGroup__item"
+                class="euiRadio euiRadio--compressed euiRadioGroup__item"
               >
                 <input
                   class="euiRadio__input"
@@ -184,7 +184,7 @@ Object {
                 </label>
               </div>
               <div
-                class="euiRadio euiRadioGroup__item"
+                class="euiRadio euiRadio--compressed euiRadioGroup__item"
               >
                 <input
                   checked=""
@@ -211,7 +211,7 @@ Object {
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -235,13 +235,13 @@ Object {
               Specify the number of subtasks to divide this operation into.
             </div>
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
-                  class="euiFieldNumber"
+                  class="euiFieldNumber euiFieldNumber--compressed"
                   data-test-subj="slices"
                   min="2"
                   placeholder="Specify a number"
@@ -256,7 +256,7 @@ Object {
           class="euiSpacer euiSpacer--l"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -300,18 +300,18 @@ Object {
               aria-expanded="false"
               aria-haspopup="listbox"
               aria-label="Ingest Pipeline"
-              class="euiComboBox"
+              class="euiComboBox euiComboBox--compressed"
               data-test-subj="pipelineCombobox"
               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"
                   >
@@ -359,7 +359,7 @@ Object {
   "container": <div>
     <div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -389,7 +389,7 @@ Object {
             </button>
           </div>
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               checked=""
@@ -413,7 +413,7 @@ Object {
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -443,7 +443,7 @@ Object {
             </button>
           </div>
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               checked=""
@@ -467,7 +467,7 @@ Object {
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -490,7 +490,7 @@ Object {
             Divide this reindexing operation into smaller subtasks to run in parallel.
           </div>
           <div
-            class="euiCheckbox"
+            class="euiCheckbox euiCheckbox--compressed"
           >
             <input
               checked=""
@@ -516,7 +516,7 @@ Object {
             data-test-subj="sliceOption"
           >
             <div
-              class="euiRadio euiRadioGroup__item"
+              class="euiRadio euiRadio--compressed euiRadioGroup__item"
             >
               <input
                 class="euiRadio__input"
@@ -536,7 +536,7 @@ Object {
               </label>
             </div>
             <div
-              class="euiRadio euiRadioGroup__item"
+              class="euiRadio euiRadio--compressed euiRadioGroup__item"
             >
               <input
                 checked=""
@@ -563,7 +563,7 @@ Object {
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -587,13 +587,13 @@ Object {
             Specify the number of subtasks to divide this operation into.
           </div>
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <input
-                class="euiFieldNumber"
+                class="euiFieldNumber euiFieldNumber--compressed"
                 data-test-subj="slices"
                 min="2"
                 placeholder="Specify a number"
@@ -608,7 +608,7 @@ Object {
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -652,18 +652,18 @@ Object {
             aria-expanded="false"
             aria-haspopup="listbox"
             aria-label="Ingest Pipeline"
-            class="euiComboBox"
+            class="euiComboBox euiComboBox--compressed"
             data-test-subj="pipelineCombobox"
             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"
                 >
diff --git a/public/pages/Reindex/container/Reindex/Reindex.tsx b/public/pages/Reindex/container/Reindex/Reindex.tsx
index 427611b15..9ab096a43 100644
--- a/public/pages/Reindex/container/Reindex/Reindex.tsx
+++ b/public/pages/Reindex/container/Reindex/Reindex.tsx
@@ -4,14 +4,14 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiSmallButtonIcon,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
-  EuiRadioGroup,
+  EuiCompressedRadioGroup,
   EuiSpacer,
   EuiSwitchEvent,
   EuiText,
@@ -515,7 +515,7 @@ class Reindex extends Component<ReindexProps, ReindexState> {
     const advanceTitle = (
       <EuiFlexGroup gutterSize="none" justifyContent="flexStart" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             iconType={advancedSettingsOpen ? "arrowDown" : "arrowRight"}
             color="text"
             data-test-subj="advanceOptionToggle"
@@ -583,7 +583,7 @@ class Reindex extends Component<ReindexProps, ReindexState> {
 
           <EuiSpacer />
           <CustomFormRow>
-            <EuiRadioGroup
+            <EuiCompressedRadioGroup
               options={[
                 {
                   id: "all",
@@ -654,9 +654,9 @@ class Reindex extends Component<ReindexProps, ReindexState> {
               </CustomFormRow>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton data-test-subj="createIndexButton" onClick={() => this.setState({ showCreateIndexFlyout: true })}>
+              <EuiSmallButton data-test-subj="createIndexButton" onClick={() => this.setState({ showCreateIndexFlyout: true })}>
                 Create index
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </ContentPanel>
@@ -689,14 +689,14 @@ class Reindex extends Component<ReindexProps, ReindexState> {
 
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="reindexCancelButton">
+            <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="reindexCancelButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onClickAction} isLoading={executing} data-test-subj="reindexConfirmButton">
+            <EuiSmallButton fill onClick={this.onClickAction} isLoading={executing} data-test-subj="reindexConfirmButton">
               Reindex
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
 
diff --git a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
index 09497952c..3f8dae5da 100644
--- a/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
+++ b/public/pages/Reindex/container/Reindex/__snapshots__/Reindex.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
     Reindex
   </h1>
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -78,7 +78,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -105,18 +105,18 @@ exports[`<Reindex /> spec renders the component 1`] = `
             <div
               aria-expanded="false"
               aria-haspopup="listbox"
-              class="euiComboBox"
+              class="euiComboBox euiComboBox--compressed"
               data-test-subj="sourceSelector"
               role="combobox"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <div
-                    class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                     data-test-subj="comboBoxInput"
                     tabindex="-1"
                   >
@@ -163,7 +163,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -173,14 +173,14 @@ exports[`<Reindex /> spec renders the component 1`] = `
             data-test-subj="subsetOption"
           >
             <legend
-              class="euiFormLegend"
+              class="euiFormLegend euiFormLegend--compressed"
             >
               <span>
                 Specify a reindex option
               </span>
             </legend>
             <div
-              class="euiRadio euiRadioGroup__item"
+              class="euiRadio euiRadio--compressed euiRadioGroup__item"
             >
               <input
                 checked=""
@@ -201,7 +201,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
               </label>
             </div>
             <div
-              class="euiRadio euiRadioGroup__item"
+              class="euiRadio euiRadio--compressed euiRadioGroup__item"
             >
               <input
                 class="euiRadio__input"
@@ -272,7 +272,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
           style="max-width: 400px;"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
@@ -293,18 +293,18 @@ exports[`<Reindex /> spec renders the component 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="euiComboBox"
+                  class="euiComboBox euiComboBox--compressed"
                   data-test-subj="destinationSelector"
                   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"
                       >
@@ -352,7 +352,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="createIndexButton"
             type="button"
           >
@@ -392,7 +392,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
           >
             <button
               aria-label="drop down icon"
-              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small"
               data-test-subj="advanceOptionToggle"
               type="button"
             >
@@ -425,7 +425,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="reindexCancelButton"
         type="button"
       >
@@ -444,7 +444,7 @@ exports[`<Reindex /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="reindexConfirmButton"
         type="button"
       >
diff --git a/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx b/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
index 1f069efc6..360ce4d1d 100644
--- a/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
+++ b/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
@@ -7,16 +7,16 @@ import {
   EuiAccordion,
   EuiCallOut,
   EuiCodeEditor,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -191,14 +191,14 @@ export class CreateRepositoryFlyout extends MDSEnabledComponent<CreateRepository
       configuration = (
         <>
           <CustomLabel title="Location" />
-          <EuiFormRow isInvalid={!!locationError} error={locationError}>
-            <EuiFieldText
+          <EuiCompressedFormRow isInvalid={!!locationError} error={locationError}>
+            <EuiCompressedFieldText
               disabled={!!editRepo}
               placeholder="e.g., /mnt/snapshots"
               value={location}
               onChange={(e) => this.setState({ location: e.target.value })}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer size="l" />
 
@@ -279,25 +279,25 @@ export class CreateRepositoryFlyout extends MDSEnabledComponent<CreateRepository
 
         <EuiFlyoutBody>
           <CustomLabel title="Repository name" />
-          <EuiFormRow isInvalid={!!repoNameError} error={repoNameError}>
-            <EuiFieldText
+          <EuiCompressedFormRow isInvalid={!!repoNameError} error={repoNameError}>
+            <EuiCompressedFieldText
               disabled={!!editRepo}
               value={repoName}
               data-test-subj="repoNameInput"
               onChange={(e) => this.setState({ repoName: e.target.value })}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer size="m" />
 
           <CustomLabel title="Repository type" helpText={repoTypeHelpText} />
-          <EuiFormRow isInvalid={!!repoTypeError} error={repoTypeError}>
-            <EuiSelect
+          <EuiCompressedFormRow isInvalid={!!repoTypeError} error={repoTypeError}>
+            <EuiCompressedSelect
               options={REPO_SELECT_OPTIONS}
               value={selectedRepoTypeOption}
               onChange={(e) => this.setState({ selectedRepoTypeOption: e.target.value })}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer size="m" />
 
diff --git a/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx b/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx
index d8a6a7f9b..c848665da 100644
--- a/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx
+++ b/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiConfirmModal, EuiFieldText, EuiForm, EuiFormRow, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
+import { EuiConfirmModal, EuiCompressedFieldText, EuiForm, EuiCompressedFormRow, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
 
 interface DeleteModalProps {
   closeDeleteModal: (event?: any) => void;
@@ -59,9 +59,14 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
             </p>
             <EuiSpacer size="s" />
             {!!confirmation && (
-              <EuiFormRow helpText={`To confirm deletion, type "delete".`}>
-                <EuiFieldText value={confirmDeleteText} placeholder="delete" onChange={this.onChange} data-test-subj="deleteTextField" />
-              </EuiFormRow>
+              <EuiCompressedFormRow helpText={`To confirm deletion, type "delete".`}>
+                <EuiCompressedFieldText
+                  value={confirmDeleteText}
+                  placeholder="delete"
+                  onChange={this.onChange}
+                  data-test-subj="deleteTextField"
+                />
+              </EuiCompressedFormRow>
             )}
           </EuiForm>
         </EuiConfirmModal>
diff --git a/public/pages/Repositories/containers/Repositories/Repositories.tsx b/public/pages/Repositories/containers/Repositories/Repositories.tsx
index 2dded695c..b8e438f45 100644
--- a/public/pages/Repositories/containers/Repositories/Repositories.tsx
+++ b/public/pages/Repositories/containers/Repositories/Repositories.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiInMemoryTable,
@@ -229,7 +229,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
       </EuiContextMenuItem>,
     ];
     const popoverButton = (
-      <EuiButton
+      <EuiSmallButton
         iconType="arrowDown"
         iconSide="right"
         disabled={!selectedItems.length}
@@ -239,18 +239,18 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
         data-test-subj="actionButton"
       >
         Actions
-      </EuiButton>
+      </EuiSmallButton>
     );
     const actions = [
-      <EuiButton iconType="refresh" onClick={this.getRepos} data-test-subj="refreshButton">
+      <EuiSmallButton iconType="refresh" onClick={this.getRepos} data-test-subj="refreshButton">
         Refresh
-      </EuiButton>,
-      <EuiButton disabled={!selectedItems.length} onClick={this.showDeleteModal} data-test-subj="deleteButton" color="danger">
+      </EuiSmallButton>,
+      <EuiSmallButton disabled={!selectedItems.length} onClick={this.showDeleteModal} data-test-subj="deleteButton" color="danger">
         Delete
-      </EuiButton>,
-      <EuiButton onClick={this.onClickCreate} fill={true}>
+      </EuiSmallButton>,
+      <EuiSmallButton onClick={this.onClickCreate} fill={true}>
         Create repository
-      </EuiButton>,
+      </EuiSmallButton>,
     ];
 
     const renderToolsRight = () => {
diff --git a/public/pages/Rollover/containers/Rollover/Rollover.tsx b/public/pages/Rollover/containers/Rollover/Rollover.tsx
index f982818bf..354b63d60 100644
--- a/public/pages/Rollover/containers/Rollover/Rollover.tsx
+++ b/public/pages/Rollover/containers/Rollover/Rollover.tsx
@@ -11,7 +11,7 @@ import { ServicesContext } from "../../../../services";
 import { BrowserServices } from "../../../../models/interfaces";
 import { CoreServicesContext } from "../../../../components/core_services";
 import IndexFormWrapper, { IndexForm } from "../../../../containers/IndexForm";
-import { EuiButton, EuiButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiLink, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiSmallButtonEmpty, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiLink, EuiText } from "@elastic/eui";
 import CustomFormRow from "../../../../components/CustomFormRow";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import FormGenerator, { AllBuiltInComponents, IFormGeneratorRef } from "../../../../components/FormGenerator";
@@ -189,7 +189,7 @@ export default function Rollover(props: RolloverProps) {
                 </CustomFormRow>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton
+                <EuiSmallButton
                   disabled={!writeIndexValue}
                   fill
                   color="primary"
@@ -208,7 +208,7 @@ export default function Rollover(props: RolloverProps) {
                   }}
                 >
                   Assign as write index
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </>
@@ -320,7 +320,7 @@ export default function Rollover(props: RolloverProps) {
             title="Configure new rollover index"
             titleSize="s"
             actions={
-              <EuiButton
+              <EuiSmallButton
                 onClick={() => {
                   indexFormRef.current?.importSettings({
                     index: writingIndex,
@@ -328,7 +328,7 @@ export default function Rollover(props: RolloverProps) {
                 }}
               >
                 Import from old write index
-              </EuiButton>
+              </EuiSmallButton>
             }
           >
             <IndexFormWrapper
@@ -356,7 +356,7 @@ export default function Rollover(props: RolloverProps) {
       ) : null}
       <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             onClick={() => {
               if (sourceType === "alias") {
                 props.history.push(ROUTES.ALIASES);
@@ -367,10 +367,10 @@ export default function Rollover(props: RolloverProps) {
             data-test-subj="rolloverCancelButton"
           >
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             disabled={loading || (sourceType === "alias" && !writingIndex)}
             fill
             onClick={async () => {
@@ -407,7 +407,7 @@ export default function Rollover(props: RolloverProps) {
             data-test-subj="rolloverSubmitButton"
           >
             Roll over
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>
diff --git a/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap b/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap
index ddd89e2df..45b190cd0 100644
--- a/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap
+++ b/public/pages/Rollover/containers/Rollover/__snapshots__/Rollover.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`container <Rollover /> spec render the component 1`] = `
     Roll over
   </h1>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
     style="margin-bottom: 20px;"
   >
@@ -59,7 +59,7 @@ exports[`container <Rollover /> spec render the component 1`] = `
         class="euiForm"
       >
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           data-test-subj="form-name-source"
           id="some_html_id-row"
         >
@@ -89,17 +89,17 @@ exports[`container <Rollover /> spec render the component 1`] = `
               <div
                 aria-expanded="false"
                 aria-haspopup="listbox"
-                class="euiComboBox"
+                class="euiComboBox euiComboBox--compressed"
                 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"
                     >
@@ -129,7 +129,7 @@ exports[`container <Rollover /> spec render the component 1`] = `
                     >
                       <button
                         aria-label="Clear input"
-                        class="euiFormControlLayoutClearButton"
+                        class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                         data-test-subj="comboBoxClearButton"
                         type="button"
                       >
@@ -163,7 +163,7 @@ exports[`container <Rollover /> spec render the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="rolloverCancelButton"
         type="button"
       >
@@ -182,7 +182,7 @@ exports[`container <Rollover /> spec render the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="rolloverSubmitButton"
         type="button"
       >
diff --git a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
index a998a500a..cf3e64bd3 100644
--- a/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
+++ b/public/pages/RollupDetails/containers/RollupDetails/RollupDetails.tsx
@@ -9,9 +9,9 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton,
+  EuiSmallButton,
   EuiOverlayMask,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiModalFooter,
   EuiModal,
   EuiModalHeader,
@@ -427,22 +427,22 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup alignItems="center" gutterSize="s">
                   <EuiFlexItem grow={false}>
-                    <EuiButton disabled={!enabled} onClick={this.onDisable} data-test-subj="disableButton">
+                    <EuiSmallButton disabled={!enabled} onClick={this.onDisable} data-test-subj="disableButton">
                       Disable
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton disabled={enabled} onClick={this.onEnable} data-test-subj="enableButton">
+                    <EuiSmallButton disabled={enabled} onClick={this.onEnable} data-test-subj="enableButton">
                       Enable
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={this.showModal}>View JSON</EuiButton>
+                    <EuiSmallButton onClick={this.showModal}>View JSON</EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
+                    <EuiSmallButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
                       Delete
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
@@ -492,7 +492,7 @@ export class RollupDetails extends Component<RollupDetailsProps, RollupDetailsSt
               </EuiModalBody>
 
               <EuiModalFooter>
-                <EuiButtonEmpty onClick={this.closeModal}>Close</EuiButtonEmpty>
+                <EuiSmallButtonEmpty onClick={this.closeModal}>Close</EuiSmallButtonEmpty>
               </EuiModalFooter>
             </EuiModal>
           </EuiOverlayMask>
diff --git a/public/pages/Rollups/components/DeleteModal/DeleteModal.tsx b/public/pages/Rollups/components/DeleteModal/DeleteModal.tsx
index 27fde2536..949f14c84 100644
--- a/public/pages/Rollups/components/DeleteModal/DeleteModal.tsx
+++ b/public/pages/Rollups/components/DeleteModal/DeleteModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, Fragment } from "react";
-import { EuiConfirmModal, EuiForm, EuiFormRow, EuiFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
+import { EuiConfirmModal, EuiForm, EuiCompressedFormRow, EuiCompressedFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
 
 interface DeleteModalProps {
   rollupId: string;
@@ -45,9 +45,14 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
               will remain as it is.
             </Fragment>
             <EuiSpacer size="s" />
-            <EuiFormRow helpText="To confirm deletion, enter delete in the text field">
-              <EuiFieldText value={confirmDeleteText} placeholder="delete" onChange={this.onChange} data-test-subj="deleteTextField" />
-            </EuiFormRow>
+            <EuiCompressedFormRow helpText="To confirm deletion, enter delete in the text field">
+              <EuiCompressedFieldText
+                value={confirmDeleteText}
+                placeholder="delete"
+                onChange={this.onChange}
+                data-test-subj="deleteTextField"
+              />
+            </EuiCompressedFormRow>
           </EuiForm>
         </EuiConfirmModal>
       </EuiOverlayMask>
diff --git a/public/pages/Rollups/components/RollupEmptyPrompt/RollupEmptyPrompt.tsx b/public/pages/Rollups/components/RollupEmptyPrompt/RollupEmptyPrompt.tsx
index c94b1a0ae..c67078ba4 100644
--- a/public/pages/Rollups/components/RollupEmptyPrompt/RollupEmptyPrompt.tsx
+++ b/public/pages/Rollups/components/RollupEmptyPrompt/RollupEmptyPrompt.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
 import { PLUGIN_NAME, ROUTES } from "../../../../utils/constants";
 
 export const TEXT = {
@@ -26,16 +26,16 @@ const getActions: React.SFC<RollupEmptyPromptProps> = ({ filterIsApplied, loadin
   }
   if (filterIsApplied) {
     return (
-      <EuiButton fill onClick={resetFilters} data-test-subj="rollupEmptyPromptRestFilters">
+      <EuiSmallButton fill onClick={resetFilters} data-test-subj="rollupEmptyPromptRestFilters">
         Reset Filters
-      </EuiButton>
+      </EuiSmallButton>
     );
   }
 
   return (
-    <EuiButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_ROLLUP}`} data-test-subj="emptyPromptCreateRollupButton">
+    <EuiSmallButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_ROLLUP}`} data-test-subj="emptyPromptCreateRollupButton">
       Create rollup
-    </EuiButton>
+    </EuiSmallButton>
   );
 };
 
diff --git a/public/pages/Rollups/containers/Rollups/Rollups.tsx b/public/pages/Rollups/containers/Rollups/Rollups.tsx
index 06c25aa57..f118ba7d5 100644
--- a/public/pages/Rollups/containers/Rollups/Rollups.tsx
+++ b/public/pages/Rollups/containers/Rollups/Rollups.tsx
@@ -22,21 +22,18 @@ import {
   Pagination,
   EuiTableSelectionType,
   EuiFlexItem,
-  EuiFieldSearch,
-  EuiPagination,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiPanel,
   EuiTitle,
-  EuiButton,
+  EuiSmallButton,
   EuiPopover,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiTextColor,
   EuiLink,
   EuiTableFieldDataColumnType,
-  EuiInMemoryTable,
   EuiButtonIcon,
-  EuiCompressedFieldSearch,
 } from "@elastic/eui";
 import { RollupService } from "../../../../services";
 import RollupEmptyPrompt from "../../components/RollupEmptyPrompt";
@@ -303,16 +300,15 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
     };
 
     const actionButton = (
-      <EuiButton
+      <EuiSmallButton
         iconType="arrowDown"
         iconSide="right"
         disabled={!selectedItems.length}
         onClick={this.onActionButtonClick}
         data-test-subj="actionButton"
-        size={useNewUX ? "s" : undefined}
       >
         Actions
-      </EuiButton>
+      </EuiSmallButton>
     );
 
     const selection: EuiTableSelectionType<DocumentRollup> = {
@@ -538,17 +534,17 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiButton iconType="refresh" onClick={this.getRollups} data-test-subj="refreshButton">
+                <EuiSmallButton iconType="refresh" onClick={this.getRollups} data-test-subj="refreshButton">
                   Refresh
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton disabled={!selectedItems.length} onClick={this.onDisable} data-test-subj="disableButton">
+                <EuiSmallButton disabled={!selectedItems.length} onClick={this.onDisable} data-test-subj="disableButton">
                   Disable
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton
+                <EuiSmallButton
                   disabled={!selectedItems.length}
                   onClick={() => {
                     this.onEnable();
@@ -556,7 +552,7 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
                   data-test-subj="enableButton"
                 >
                   Enable
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiPopover
@@ -572,9 +568,9 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
                 </EuiPopover>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton onClick={this.onClickCreate} fill={true} data-test-subj="createRollupButton">
+                <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="createRollupButton">
                   Create rollup job
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
@@ -583,7 +579,7 @@ export class Rollups extends MDSEnabledComponent<RollupsProps, RollupsState> {
         <div style={{ padding: "initial" }}>
           <EuiFlexGroup style={{ padding: "0px 5px" }}>
             <EuiFlexItem>
-              <EuiFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
+              <EuiCompressedFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
             </EuiFlexItem>
           </EuiFlexGroup>
 
diff --git a/public/pages/Rollups/containers/Rollups/__snapshots__/Rollups.test.tsx.snap b/public/pages/Rollups/containers/Rollups/__snapshots__/Rollups.test.tsx.snap
index 9caafaf70..1db220698 100644
--- a/public/pages/Rollups/containers/Rollups/__snapshots__/Rollups.test.tsx.snap
+++ b/public/pages/Rollups/containers/Rollups/__snapshots__/Rollups.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<Rollups /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               data-test-subj="refreshButton"
               type="button"
             >
@@ -51,7 +51,7 @@ exports[`<Rollups /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton-isDisabled"
+              class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
               data-test-subj="disableButton"
               disabled=""
               type="button"
@@ -71,7 +71,7 @@ exports[`<Rollups /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton-isDisabled"
+              class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
               data-test-subj="enableButton"
               disabled=""
               type="button"
@@ -99,7 +99,7 @@ exports[`<Rollups /> spec renders the component 1`] = `
                 class="euiPopover__anchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="actionButton"
                   disabled=""
                   type="button"
@@ -122,7 +122,7 @@ exports[`<Rollups /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="createRollupButton"
               type="button"
             >
@@ -151,13 +151,13 @@ exports[`<Rollups /> spec renders the component 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=""
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
index 1feeb3c50..29c89ec7c 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/ShrinkIndex.tsx
@@ -4,15 +4,15 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
   EuiSpacer,
   EuiTitle,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLoadingSpinner,
 } from "@elastic/eui";
 import React, { Component } from "react";
@@ -375,7 +375,7 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
             <EuiCallOut title="The source index must block write operations before shrinking." color="danger" iconType="alert">
               <p>In order to shrink an existing index, you must first set the index to block write operations.</p>
               <EuiSpacer />
-              <EuiButton
+              <EuiSmallButton
                 onClick={() => {
                   const indexWriteBlockSettings = {
                     "index.blocks.write": true,
@@ -386,7 +386,7 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
                 data-test-subj="onSetIndexWriteBlockButton"
               >
                 Block write operations
-              </EuiButton>
+              </EuiSmallButton>
             </EuiCallOut>
             <EuiSpacer />
           </>
@@ -403,7 +403,7 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
                 to complete. The index will be in red health status while the index is opening.
               </p>
               <EuiSpacer />
-              <EuiButton
+              <EuiSmallButton
                 onClick={() => {
                   this.onOpenIndex();
                 }}
@@ -413,7 +413,7 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
                 data-test-subj="onOpenIndexButton"
               >
                 Open index
-              </EuiButton>
+              </EuiSmallButton>
             </EuiCallOut>
             <EuiSpacer />
           </>
@@ -626,7 +626,7 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
     );
 
     const subTitleText = (
-      <EuiFormRow
+      <EuiCompressedFormRow
         fullWidth
         helpText={
           <div>
@@ -638,7 +638,7 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
         }
       >
         <></>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
 
     return (
@@ -664,12 +664,12 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
         <EuiSpacer />
         <EuiFlexGroup justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} flush="left" data-test-subj="shrinkIndexCancelButton">
+            <EuiSmallButtonEmpty onClick={this.onCancel} flush="left" data-test-subj="shrinkIndexCancelButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               isLoading={this.state.loading}
               isDisabled={this.state.loading}
               onClick={this.onClickAction}
@@ -678,7 +678,7 @@ export default class ShrinkIndex extends Component<ShrinkIndexProps, ShrinkIndex
               disabled={disableShrinkButton}
             >
               Shrink
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap b/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
index ef97faa60..0fc667260 100644
--- a/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
+++ b/public/pages/ShrinkIndex/container/ShrinkIndex/__snapshots__/ShrinkIndex.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
       Shrink index
     </h1>
     <div
-      class="euiFormRow euiFormRow--fullWidth"
+      class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="some_html_id-row"
     >
       <div
@@ -199,7 +199,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
           class="euiForm"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             data-test-subj="form-name-targetIndex"
             id="some_html_id-row"
           >
@@ -221,13 +221,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                 class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <input
-                      class="euiFieldText"
+                      class="euiFieldText euiFieldText--compressed"
                       data-test-subj="targetIndexNameInput"
                       placeholder="Specify a name for the new shrunken index."
                       type="text"
@@ -247,7 +247,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             </div>
           </div>
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             data-test-subj="form-name-index.number_of_shards"
             id="some_html_id-row"
           >
@@ -280,13 +280,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                 class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <select
-                      class="euiSelect"
+                      class="euiSelect euiSelect--compressed"
                       data-test-subj="numberOfShardsInput"
                       placeholder="Select primary shard count"
                     >
@@ -316,7 +316,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             </div>
           </div>
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             data-test-subj="form-name-index.number_of_replicas"
             id="some_html_id-row"
           >
@@ -346,13 +346,13 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                 class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <input
-                      class="euiFieldNumber"
+                      class="euiFieldNumber euiFieldNumber--compressed"
                       data-test-subj="numberOfReplicasInput"
                       min="0"
                       type="number"
@@ -364,7 +364,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             </div>
           </div>
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             data-test-subj="form-name-aliases"
             id="some_html_id-row"
           >
@@ -397,18 +397,18 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                 <div
                   aria-expanded="false"
                   aria-haspopup="listbox"
-                  class="euiComboBox"
+                  class="euiComboBox euiComboBox--compressed"
                   data-test-subj="aliasesInput"
                   role="combobox"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <div
-                        class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                        class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                         data-test-subj="comboBoxInput"
                         tabindex="-1"
                       >
@@ -497,7 +497,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                     class="euiSpacer euiSpacer--s"
                   />
                   <div
-                    class="euiFormRow"
+                    class="euiFormRow euiFormRow--compressed"
                     data-test-subj="formNameAdvancedSettings"
                     id="some_html_id-row"
                   >
@@ -748,7 +748,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
             class="euiSpacer euiSpacer--l"
           />
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
@@ -768,7 +768,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                 class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
               >
                 <div
-                  class="euiCheckbox"
+                  class="euiCheckbox euiCheckbox--compressed"
                 >
                   <input
                     class="euiCheckbox__input"
@@ -794,7 +794,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
                 class="euiToolTipAnchor euiToolTipAnchor--displayBlock"
               >
                 <div
-                  class="euiCheckbox"
+                  class="euiCheckbox euiCheckbox--compressed"
                 >
                   <input
                     class="euiCheckbox__input"
@@ -833,7 +833,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
           data-test-subj="shrinkIndexCancelButton"
           type="button"
         >
@@ -852,7 +852,7 @@ exports[`<Shrink index /> spec renders the component 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <button
-          class="euiButton euiButton--primary euiButton--fill"
+          class="euiButton euiButton--primary euiButton--small euiButton--fill"
           data-test-subj="shrinkIndexConfirmButton"
           type="button"
         >
diff --git a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
index acf7fc34a..259a87eec 100644
--- a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
+++ b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
@@ -12,7 +12,7 @@ import {
   Criteria,
   Direction,
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiEmptyPrompt,
@@ -31,7 +31,6 @@ import {
   EuiFlexGroup,
   EuiButtonIcon,
   EuiCompressedFieldSearch,
-  EuiSmallButton,
 } from "@elastic/eui";
 import { BREADCRUMBS, PLUGIN_NAME, ROUTES, SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL } from "../../../../utils/constants";
 import { getMessagePrompt, getSMPoliciesQueryParamsFromURL, renderTimestampMillis } from "../../helpers";
@@ -464,15 +463,15 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
       </EuiSmallButton>
     );
     const actions = [
-      <EuiButton iconType="refresh" onClick={this.getPolicies} data-test-subj="refreshButton">
+      <EuiSmallButton iconType="refresh" onClick={this.getPolicies} data-test-subj="refreshButton">
         Refresh
-      </EuiButton>,
-      <EuiButton disabled={!selectedItems.length} onClick={this.onClickStop}>
+      </EuiSmallButton>,
+      <EuiSmallButton disabled={!selectedItems.length} onClick={this.onClickStop}>
         Disable
-      </EuiButton>,
-      <EuiButton disabled={!selectedItems.length} onClick={this.onClickStart}>
+      </EuiSmallButton>,
+      <EuiSmallButton disabled={!selectedItems.length} onClick={this.onClickStart}>
         Enable
-      </EuiButton>,
+      </EuiSmallButton>,
       <EuiPopover
         id="action"
         button={actionsButton}
@@ -484,9 +483,9 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
       >
         <EuiContextMenuPanel items={popoverActionItems} size="s" />
       </EuiPopover>,
-      <EuiButton onClick={this.onClickCreate} fill={true}>
+      <EuiSmallButton onClick={this.onClickCreate} fill={true}>
         Create policy
-      </EuiButton>,
+      </EuiSmallButton>,
     ];
 
     const subTitleText = (
@@ -509,9 +508,9 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
           </EuiText>
         }
         actions={
-          <EuiButton onClick={this.onClickCreate} fill={true}>
+          <EuiSmallButton onClick={this.onClickCreate} fill={true}>
             Create policy
-          </EuiButton>
+          </EuiSmallButton>
         }
       />
     );
diff --git a/public/pages/SnapshotPolicyDetails/components/InfoModal/InfoModal.tsx b/public/pages/SnapshotPolicyDetails/components/InfoModal/InfoModal.tsx
index 9bda2208c..d3ff0e9d3 100644
--- a/public/pages/SnapshotPolicyDetails/components/InfoModal/InfoModal.tsx
+++ b/public/pages/SnapshotPolicyDetails/components/InfoModal/InfoModal.tsx
@@ -5,7 +5,7 @@
 
 import React from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -34,9 +34,9 @@ const InfoModal = ({ info, onClose }: InfoModalProps) => (
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton fill onClick={onClose} data-test-subj="infoModalCloseButton">
+        <EuiSmallButton fill onClick={onClose} data-test-subj="infoModalCloseButton">
           Close
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   </EuiOverlayMask>
diff --git a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
index e6f9f9a51..d5031c7d0 100644
--- a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
+++ b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
@@ -10,7 +10,7 @@ import queryString from "query-string";
 import {
   EuiAccordion,
   EuiBasicTable,
-  EuiButton,
+  EuiSmallButton,
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
@@ -432,12 +432,12 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
               <EuiFlexItem grow={false}>
                 <EuiFlexGroup alignItems="center" gutterSize="s">
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={this.onEdit}>Edit</EuiButton>
+                    <EuiSmallButton onClick={this.onEdit}>Edit</EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
+                    <EuiSmallButton onClick={this.showDeleteModal} color="danger" data-test-subj="deleteButton">
                       Delete
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
@@ -539,9 +539,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
           title="Last creation/deletion"
           titleSize="s"
           actions={
-            <EuiButton iconType="refresh" onClick={() => this.getPolicy(policyId)} data-test-subj="refreshButton">
+            <EuiSmallButton iconType="refresh" onClick={() => this.getPolicy(policyId)} data-test-subj="refreshButton">
               Refresh
-            </EuiButton>
+            </EuiSmallButton>
           }
         >
           <EuiBasicTable items={latestActivities} itemId="name" columns={this.columns} />
diff --git a/public/pages/Snapshots/components/AddPrefixInput/AddPrefixInput.tsx b/public/pages/Snapshots/components/AddPrefixInput/AddPrefixInput.tsx
index 08c898189..0c5556fbf 100644
--- a/public/pages/Snapshots/components/AddPrefixInput/AddPrefixInput.tsx
+++ b/public/pages/Snapshots/components/AddPrefixInput/AddPrefixInput.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFormRow, EuiFieldText, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedFieldText, EuiSpacer } from "@elastic/eui";
 import React, { useState, ChangeEvent } from "react";
 import CustomLabel from "../../../../components/CustomLabel";
 
@@ -24,9 +24,9 @@ const AddPrefixesInput = ({ getPrefix }: AddPrefixesInputProps) => {
       <EuiSpacer size="l" />
 
       <CustomLabel title="Specify prefix for restored index names" helpText="A prefix will be added to any restored index names." />
-      <EuiFormRow>
-        <EuiFieldText value={prefix} onChange={onPrefixChange} data-test-subj="prefixInput" />
-      </EuiFormRow>
+      <EuiCompressedFormRow>
+        <EuiCompressedFieldText value={prefix} onChange={onPrefixChange} data-test-subj="prefixInput" />
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
     </>
diff --git a/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap b/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap
index d383d6e0d..651c664a3 100644
--- a/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap
+++ b/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap
@@ -29,20 +29,20 @@ exports[`AddPrefixInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--s"
   />
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            class="euiFieldText"
+            class="euiFieldText euiFieldText--compressed"
             data-test-subj="prefixInput"
             id="some_html_id"
             type="text"
diff --git a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
index e44a2f381..63b2b6545 100644
--- a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
+++ b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
@@ -6,12 +6,12 @@
 import {
   EuiAccordion,
   EuiComboBoxOptionOption,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
   EuiTitle,
   EuiText,
@@ -226,8 +226,8 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent<CreateSnapshotProp
 
         <EuiFlyoutBody>
           <CustomLabel title="Snapshot name" />
-          <EuiFormRow isInvalid={!!snapshotIdError} error={snapshotIdError}>
-            <EuiFieldText
+          <EuiCompressedFormRow isInvalid={!!snapshotIdError} error={snapshotIdError}>
+            <EuiCompressedFieldText
               value={snapshotId}
               onChange={(e) => {
                 this.setState({ snapshotId: e.target.value });
@@ -235,7 +235,7 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent<CreateSnapshotProp
               data-test-subj="snapshotNameInput"
               placeholder="Enter snapshot name"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiFormHelpText>A valid snapshot name can not contain upper case characters. </EuiFormHelpText>
 
           <EuiSpacer size="m" />
diff --git a/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx b/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx
index ec0ee65eb..dd656afa9 100644
--- a/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx
+++ b/public/pages/Snapshots/components/ErrorModal/ErrorModal.tsx
@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiModal, EuiText, EuiButton, EuiModalHeader, EuiModalFooter, EuiModalBody, EuiModalHeaderTitle } from "@elastic/eui";
+import { EuiModal, EuiText, EuiSmallButton, EuiModalHeader, EuiModalFooter, EuiModalBody, EuiModalHeaderTitle } from "@elastic/eui";
 import React from "react";
-import { RestoreError } from "../../../../models/interfaces"
-
+import { RestoreError } from "../../../../models/interfaces";
 
 interface ErrorModalProps {
   error: RestoreError;
@@ -16,24 +15,29 @@ interface ErrorModalProps {
 }
 
 const ErrorModal = ({ onClick, error, snapshotId }: ErrorModalProps) => {
-
   return (
     <>
       <EuiModal onClose={onClick}>
         <EuiModalHeader color="danger" style={{ flexDirection: "column", alignItems: "flex-start" }}>
-          <EuiModalHeaderTitle><h1>{`Failed to restore snapshot ${snapshotId}`}</h1></EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <h1>{`Failed to restore snapshot ${snapshotId}`}</h1>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
-          <EuiText size="m" color="danger">{error.reason ?? error}.</EuiText>
+          <EuiText size="m" color="danger">
+            {error.reason ?? error}.
+          </EuiText>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButton onClick={onClick} fill>Close</EuiButton>
+          <EuiSmallButton onClick={onClick} fill>
+            Close
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </>
   );
 };
 
-export default ErrorModal;
\ No newline at end of file
+export default ErrorModal;
diff --git a/public/pages/Snapshots/components/IndexSettingsInput/IndexSettingsInput.tsx b/public/pages/Snapshots/components/IndexSettingsInput/IndexSettingsInput.tsx
index 8b72ca8e9..51a2a254c 100644
--- a/public/pages/Snapshots/components/IndexSettingsInput/IndexSettingsInput.tsx
+++ b/public/pages/Snapshots/components/IndexSettingsInput/IndexSettingsInput.tsx
@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFormRow, EuiText, EuiTextArea, EuiSpacer, EuiLink } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiText, EuiCompressedTextArea, EuiSpacer, EuiLink } from "@elastic/eui";
 import React, { useState, ChangeEvent } from "react";
-import { INDEX_SETTINGS_URL } from "../../../../utils/constants"
+import { INDEX_SETTINGS_URL } from "../../../../utils/constants";
 
 interface IndexSettingsInputProps {
   getIndexSettings: (indexSettings: string, ignore: boolean) => void;
@@ -50,9 +50,14 @@ const IndexSettingsInput = ({ getIndexSettings, ignore, showError, inputError }:
     <>
       <EuiSpacer size="m" />
 
-      <EuiFormRow isInvalid={showError} error={inputError} label={indexSettingsLabel} id={ignore ? "ignore_index_settings" : "customize_index_settings"}>
-        <EuiTextArea value={indexSettings} onChange={onSettingsChange} placeholder={placeholderText} isInvalid={showError} />
-      </EuiFormRow>
+      <EuiCompressedFormRow
+        isInvalid={showError}
+        error={inputError}
+        label={indexSettingsLabel}
+        id={ignore ? "ignore_index_settings" : "customize_index_settings"}
+      >
+        <EuiCompressedTextArea value={indexSettings} onChange={onSettingsChange} placeholder={placeholderText} isInvalid={showError} />
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
     </>
diff --git a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
index 54418ac58..1e38cb97c 100644
--- a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
+++ b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
@@ -3,15 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFormRow, EuiFieldText, EuiSpacer, EuiText, EuiLink } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedFieldText, EuiSpacer, EuiText, EuiLink } from "@elastic/eui";
 import React, { useState, ChangeEvent } from "react";
-import { RESTORE_SNAPSHOT_DOCUMENTATION_URL } from "../../../../utils/constants"
-import { BAD_RENAME_PATTERN_TEXT, BAD_RENAME_REPLACEMENT_TEXT, RENAME_HELP_TEXT, PATTERN_HELP_TEXT } from "../../constants"
+import { RESTORE_SNAPSHOT_DOCUMENTATION_URL } from "../../../../utils/constants";
+import { BAD_RENAME_PATTERN_TEXT, BAD_RENAME_REPLACEMENT_TEXT, RENAME_HELP_TEXT, PATTERN_HELP_TEXT } from "../../constants";
 interface RenameInputProps {
   getRenamePattern: (prefix: string) => void;
   getRenameReplacement: (prefix: string) => void;
   showPatternError: boolean;
-  showRenameError: boolean
+  showRenameError: boolean;
 }
 
 const RenameInput = ({ getRenamePattern, getRenameReplacement, showPatternError, showRenameError }: RenameInputProps) => {
@@ -59,15 +59,25 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement, showPatternError,
   return (
     <>
       <EuiSpacer size="l" />
-      <EuiFormRow error={BAD_RENAME_PATTERN_TEXT} isInvalid={showPatternError} label={patternLabel} id="rename_pattern">
-        <EuiFieldText value={renamePattern} onChange={onPatternChange} isInvalid={showPatternError} data-test-subj="renamePatternInput" />
-      </EuiFormRow>
+      <EuiCompressedFormRow error={BAD_RENAME_PATTERN_TEXT} isInvalid={showPatternError} label={patternLabel} id="rename_pattern">
+        <EuiCompressedFieldText
+          value={renamePattern}
+          onChange={onPatternChange}
+          isInvalid={showPatternError}
+          data-test-subj="renamePatternInput"
+        />
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
 
-      <EuiFormRow error={BAD_RENAME_REPLACEMENT_TEXT} isInvalid={showRenameError} label={renameLabel} id="rename_replacement">
-        <EuiFieldText value={renameReplacement} onChange={onReplacementChange} isInvalid={showRenameError} data-test-subj="renameReplacementInput" />
-      </EuiFormRow>
+      <EuiCompressedFormRow error={BAD_RENAME_REPLACEMENT_TEXT} isInvalid={showRenameError} label={renameLabel} id="rename_replacement">
+        <EuiCompressedFieldText
+          value={renameReplacement}
+          onChange={onReplacementChange}
+          isInvalid={showRenameError}
+          data-test-subj="renameReplacementInput"
+        />
+      </EuiCompressedFormRow>
     </>
   );
 };
diff --git a/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap b/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap
index 854374969..7c8a2da7e 100644
--- a/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap
+++ b/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`RenameInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="rename_pattern-row"
   >
     <div
@@ -53,13 +53,13 @@ exports[`RenameInput component renders without error 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="renamePatternInput"
             id="rename_pattern"
             type="text"
@@ -73,7 +73,7 @@ exports[`RenameInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="rename_replacement-row"
   >
     <div
@@ -120,13 +120,13 @@ exports[`RenameInput component renders without error 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="renameReplacementInput"
             id="rename_replacement"
             type="text"
diff --git a/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx b/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx
index 392eaecb6..596203268 100644
--- a/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx
+++ b/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiInMemoryTable, EuiSpacer, EuiLink, EuiFlyout, EuiButton, EuiButtonIcon, EuiEmptyPrompt, EuiHealth } from "@elastic/eui";
+import { EuiInMemoryTable, EuiSpacer, EuiLink, EuiFlyout, EuiSmallButton, EuiButtonIcon, EuiEmptyPrompt, EuiHealth } from "@elastic/eui";
 import _ from "lodash";
 import React, { useEffect, useContext, useState, useMemo } from "react";
 import { SnapshotManagementService } from "../../../../services";
@@ -191,14 +191,14 @@ export const RestoreActivitiesPanel = ({
 
   const actions = useMemo(
     () => [
-      <EuiButton
+      <EuiSmallButton
         iconType="refresh"
         onClick={getRestoreStatus}
         data-test-subj="refreshStatusButton"
         isDisabled={restoreStartRef ? false : true}
       >
         Refresh
-      </EuiButton>,
+      </EuiSmallButton>,
     ],
     []
   );
diff --git a/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx b/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx
index 491f5660e..89ef017f2 100644
--- a/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx
+++ b/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx
@@ -15,7 +15,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiAccordion,
-  EuiCheckbox,
+  EuiCompressedCheckbox,
   EuiCallOut,
   EuiText,
 } from "@elastic/eui";
@@ -493,7 +493,7 @@ export class RestoreSnapshotFlyout extends MDSEnabledComponent<RestoreSnapshotPr
                     snapshot. Do you want to continue?
                   </p>
                   <EuiSpacer size="s" />
-                  <EuiCheckbox
+                  <EuiCompressedCheckbox
                     id={partial}
                     label={<EuiText size="s">Allow restore partial snapshots</EuiText>}
                     checked={String(_.get(snapshot, partial, false)) == "true"}
diff --git a/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx b/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx
index 3141edd0d..74cb867c7 100644
--- a/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx
+++ b/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx
@@ -5,7 +5,7 @@
 
 import React, { Component, useContext } from "react";
 import {
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiFlexGrid,
   EuiFlexItem,
   EuiFlyout,
@@ -157,7 +157,7 @@ export class SnapshotFlyout extends MDSEnabledComponent<SnapshotFlyoutProps, Sna
         </EuiFlyoutBody>
 
         <EuiFlyoutFooter>
-          <EuiButtonEmpty onClick={onCloseFlyout}>Close</EuiButtonEmpty>
+          <EuiSmallButtonEmpty onClick={onCloseFlyout}>Close</EuiSmallButtonEmpty>
         </EuiFlyoutFooter>
       </EuiFlyout>
     );
diff --git a/public/pages/Snapshots/components/SnapshotIndicesInput/SnapshotIndicesInput.tsx b/public/pages/Snapshots/components/SnapshotIndicesInput/SnapshotIndicesInput.tsx
index db6ce9463..73c7a5d70 100644
--- a/public/pages/Snapshots/components/SnapshotIndicesInput/SnapshotIndicesInput.tsx
+++ b/public/pages/Snapshots/components/SnapshotIndicesInput/SnapshotIndicesInput.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiComboBoxOptionOption, EuiSpacer, EuiFormRow } from "@elastic/eui";
+import { EuiCompressedComboBox, EuiComboBoxOptionOption, EuiSpacer, EuiCompressedFormRow } from "@elastic/eui";
 import React from "react";
 import { IndexItem } from "../../../../../models/interfaces";
 
@@ -24,14 +24,14 @@ const SnapshotIndicesInput = ({
   onIndicesSelectionChange,
   getIndexOptions,
   onCreateOption,
-  showError
+  showError,
 }: SnapshotIndicesInputProps) => {
   const selectionError = "You must select at least one index to restore.";
 
   return (
     <>
-      <EuiFormRow label="Select indices or input index patterns you want to restore" error={selectionError} isInvalid={showError}>
-        <EuiComboBox
+      <EuiCompressedFormRow label="Select indices or input index patterns you want to restore" error={selectionError} isInvalid={showError}>
+        <EuiCompressedComboBox
           isInvalid={showError}
           placeholder="Select indices or input index patterns."
           options={indexOptions}
@@ -41,7 +41,7 @@ const SnapshotIndicesInput = ({
           onCreateOption={onCreateOption}
           isClearable={true}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
     </>
diff --git a/public/pages/Snapshots/components/SnapshotIndicesInput/__snapshots__/SnapshotIndicesInput.test.tsx.snap b/public/pages/Snapshots/components/SnapshotIndicesInput/__snapshots__/SnapshotIndicesInput.test.tsx.snap
index da243b734..3489049d5 100644
--- a/public/pages/Snapshots/components/SnapshotIndicesInput/__snapshots__/SnapshotIndicesInput.test.tsx.snap
+++ b/public/pages/Snapshots/components/SnapshotIndicesInput/__snapshots__/SnapshotIndicesInput.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SnapshotIndicesInput component renders without error 1`] = `
 <div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="some_html_id-row"
   >
     <div
@@ -22,17 +22,17 @@ exports[`SnapshotIndicesInput component renders without error 1`] = `
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         role="combobox"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
diff --git a/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx b/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx
index e8e00e982..5d850272f 100644
--- a/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx
+++ b/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiRadio, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedRadio, EuiSpacer } from "@elastic/eui";
 import CustomLabel from "../../../../components/CustomLabel";
 import { RESTORE_OPTIONS } from "../../../../models/interfaces";
 interface SnapshotRenameOptionsProps {
@@ -34,7 +34,7 @@ const SnapshotRenameOptions = ({
 
       <EuiSpacer size="m" />
 
-      <EuiRadio
+      <EuiCompressedRadio
         id={do_not_rename}
         name="rename_option"
         label="Do not rename"
@@ -44,7 +44,7 @@ const SnapshotRenameOptions = ({
 
       <EuiSpacer size="s" />
 
-      <EuiRadio
+      <EuiCompressedRadio
         id={add_prefix}
         name="rename_option"
         label="Add prefix to restored index names"
@@ -54,7 +54,7 @@ const SnapshotRenameOptions = ({
 
       <EuiSpacer size="s" />
 
-      <EuiRadio
+      <EuiCompressedRadio
         id={rename_indices}
         name="rename_option"
         label="Rename using regular expression (Advanced)"
diff --git a/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap b/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap
index 12120e8f4..7c56ad84b 100644
--- a/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap
+++ b/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`SnapshotRenameOptions component renders without error 1`] = `
       class="euiSpacer euiSpacer--m"
     />
     <div
-      class="euiRadio"
+      class="euiRadio euiRadio--compressed"
     >
       <input
         checked=""
@@ -34,7 +34,7 @@ exports[`SnapshotRenameOptions component renders without error 1`] = `
       class="euiSpacer euiSpacer--s"
     />
     <div
-      class="euiRadio"
+      class="euiRadio euiRadio--compressed"
     >
       <input
         class="euiRadio__input"
@@ -57,7 +57,7 @@ exports[`SnapshotRenameOptions component renders without error 1`] = `
       class="euiSpacer euiSpacer--s"
     />
     <div
-      class="euiRadio"
+      class="euiRadio euiRadio--compressed"
     >
       <input
         class="euiRadio__input"
diff --git a/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx b/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx
index 965e0f451..490dff0fa 100644
--- a/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx
+++ b/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx
@@ -4,8 +4,8 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiCheckbox, EuiSpacer, EuiText } from "@elastic/eui";
-import { CheckBoxLabel } from "../../helper"
+import { EuiCompressedCheckbox, EuiSpacer, EuiText } from "@elastic/eui";
+import { CheckBoxLabel } from "../../helper";
 import IndexSettingsInput from "../../components/IndexSettingsInput";
 import { RESTORE_OPTIONS } from "../../../../models/interfaces";
 
@@ -40,21 +40,15 @@ const SnapshotRestoreAdvancedOptions = ({
   onIgnoreIndexSettingsToggle,
   width,
   badJSONInput,
-  badIgnoreInput
+  badIgnoreInput,
 }: SnapshotAdvancedOptionsProps) => {
-  const {
-    restore_aliases,
-    include_global_state,
-    ignore_unavailable,
-    customize_index_settings,
-    ignore_index_settings,
-  } = RESTORE_OPTIONS;
-  const JSONerror = "Please enter valid JSON between curly brackets."
-  const ignoreListError = "Please enter a comma separated list of valid settings to ignore."
+  const { restore_aliases, include_global_state, ignore_unavailable, customize_index_settings, ignore_index_settings } = RESTORE_OPTIONS;
+  const JSONerror = "Please enter valid JSON between curly brackets.";
+  const ignoreListError = "Please enter a comma separated list of valid settings to ignore.";
 
   return (
     <div style={{ padding: "10px 10px", width: width }}>
-      <EuiCheckbox
+      <EuiCompressedCheckbox
         id={restore_aliases}
         label={<CheckBoxLabel title="Restore aliases" helpText="Restore index aliases alongside their associated indices." />}
         checked={restoreAliases}
@@ -63,7 +57,7 @@ const SnapshotRestoreAdvancedOptions = ({
 
       <EuiSpacer size="s" />
 
-      <EuiCheckbox
+      <EuiCompressedCheckbox
         id={include_global_state}
         label={<EuiText size="s">Restore cluster state from snapshots</EuiText>}
         checked={restoreClusterState}
@@ -72,7 +66,7 @@ const SnapshotRestoreAdvancedOptions = ({
 
       <EuiSpacer size="m" />
 
-      <EuiCheckbox
+      <EuiCompressedCheckbox
         id={ignore_unavailable}
         label={
           <CheckBoxLabel
@@ -97,30 +91,31 @@ const SnapshotRestoreAdvancedOptions = ({
 
       <EuiSpacer size="m" />
 
-      <EuiCheckbox
+      <EuiCompressedCheckbox
         id={customize_index_settings}
         label={<CheckBoxLabel title="Customize index settings" helpText="Overrides index settings on all restored indices." />}
         checked={customizeIndexSettings}
         onChange={onCustomizeIndexSettingsToggle}
       />
 
-      {customizeIndexSettings && <IndexSettingsInput getIndexSettings={getIndexSettings} ignore={false} showError={badJSONInput} inputError={JSONerror} />}
+      {customizeIndexSettings && (
+        <IndexSettingsInput getIndexSettings={getIndexSettings} ignore={false} showError={badJSONInput} inputError={JSONerror} />
+      )}
 
       <EuiSpacer size="s" />
 
-      <EuiCheckbox
+      <EuiCompressedCheckbox
         id={ignore_index_settings}
         label={
-          <CheckBoxLabel
-            title="Ignore index settings"
-            helpText="Exclude index settings that you don't want to restore from a snapshot."
-          />
+          <CheckBoxLabel title="Ignore index settings" helpText="Exclude index settings that you don't want to restore from a snapshot." />
         }
         checked={ignoreIndexSettings}
         onChange={onIgnoreIndexSettingsToggle}
       />
 
-      {ignoreIndexSettings && <IndexSettingsInput getIndexSettings={getIndexSettings} ignore={true} showError={badIgnoreInput} inputError={ignoreListError} />}
+      {ignoreIndexSettings && (
+        <IndexSettingsInput getIndexSettings={getIndexSettings} ignore={true} showError={badIgnoreInput} inputError={ignoreListError} />
+      )}
     </div>
   );
 };
diff --git a/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx b/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx
index 6398947ba..d8b4390f2 100644
--- a/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx
+++ b/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiRadio, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedRadio, EuiSpacer } from "@elastic/eui";
 import CustomLabel from "../../../../components/CustomLabel";
 import { RESTORE_OPTIONS } from "../../../../models/interfaces";
 
@@ -31,7 +31,7 @@ const SnapshotRestoreOption = ({
 
       <EuiSpacer size="m" />
 
-      <EuiRadio
+      <EuiCompressedRadio
         id={restore_all_indices}
         name="restore_option"
         label="Restore all indices in snapshot"
@@ -41,7 +41,7 @@ const SnapshotRestoreOption = ({
 
       <EuiSpacer size="s" />
 
-      <EuiRadio
+      <EuiCompressedRadio
         id={restore_specific_indices}
         name="restore_option"
         label="Restore specific indices"
diff --git a/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap b/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap
index 5509d887b..b4d9ae44a 100644
--- a/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap
+++ b/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`SnapshotRestoreOption component renders without error 1`] = `
       class="euiSpacer euiSpacer--m"
     />
     <div
-      class="euiRadio"
+      class="euiRadio euiRadio--compressed"
     >
       <input
         checked=""
@@ -34,7 +34,7 @@ exports[`SnapshotRestoreOption component renders without error 1`] = `
       class="euiSpacer euiSpacer--s"
     />
     <div
-      class="euiRadio"
+      class="euiRadio euiRadio--compressed"
     >
       <input
         class="euiRadio__input"
diff --git a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
index 63996eb5a..1d79acfd3 100644
--- a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
+++ b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
@@ -7,6 +7,7 @@ import React, { Component, useContext } from "react";
 import _ from "lodash";
 import { RouteComponentProps } from "react-router-dom";
 import {
+  EuiSmallButton,
   EuiInMemoryTable,
   EuiLink,
   EuiTableFieldDataColumnType,
@@ -478,16 +479,15 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
     };
 
     const actionsButton = (
-      <EuiButton
+      <EuiSmallButton
         iconType="arrowDown"
         iconSide="right"
         disabled={!selectedItems.length}
         onClick={this.onActionButtonClick}
         data-test-subj="actionButton"
-        size="s"
       >
         Actions
-      </EuiButton>
+      </EuiSmallButton>
     );
 
     const search = {
@@ -524,18 +524,18 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
     };
 
     const actions = [
-      <EuiButton iconType="refresh" onClick={this.getSnapshots} data-test-subj="refreshButton">
+      <EuiSmallButton iconType="refresh" onClick={this.getSnapshots} data-test-subj="refreshButton">
         Refresh
-      </EuiButton>,
-      <EuiButton disabled={!selectedItems.length} onClick={this.showDeleteModal} data-test-subj="deleteButton" color="danger">
+      </EuiSmallButton>,
+      <EuiSmallButton disabled={!selectedItems.length} onClick={this.showDeleteModal} data-test-subj="deleteButton" color="danger">
         Delete
-      </EuiButton>,
-      <EuiButton disabled={selectedItems.length !== 1} onClick={this.onClickRestore} color="primary" data-test-subj="restoreButton">
+      </EuiSmallButton>,
+      <EuiSmallButton disabled={selectedItems.length !== 1} onClick={this.onClickRestore} color="primary" data-test-subj="restoreButton">
         Restore
-      </EuiButton>,
-      <EuiButton onClick={this.onClickCreate} fill={true} data-test-subj="takeSnapshotButton">
+      </EuiSmallButton>,
+      <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="takeSnapshotButton">
         Take snapshot
-      </EuiButton>,
+      </EuiSmallButton>,
     ];
 
     const subTitleText = (
diff --git a/public/pages/Snapshots/helper.tsx b/public/pages/Snapshots/helper.tsx
index 13d148f36..cd9eda19a 100644
--- a/public/pages/Snapshots/helper.tsx
+++ b/public/pages/Snapshots/helper.tsx
@@ -5,8 +5,8 @@
 
 import React from "react";
 import _ from "lodash";
-import { Toast } from "../../models/interfaces"
-import { EuiHealth, EuiButton, EuiFlexGroup, EuiSpacer, EuiText } from "@elastic/eui";
+import { Toast } from "../../models/interfaces";
+import { EuiHealth, EuiSmallButton, EuiFlexGroup, EuiSpacer, EuiText } from "@elastic/eui";
 
 export function truncateLongText(text: string, truncateLen: number = 20): string {
   if (text.length > truncateLen) {
@@ -30,7 +30,6 @@ export function snapshotStatusRender(value: string): React.ReactElement {
   return <EuiHealth color={color}>{capital}</EuiHealth>;
 }
 
-
 export const getToasts = (id: string, message: string | undefined, snapshotId: string, onClick: (e: React.MouseEvent) => void): Toast[] => {
   const toasts = [
     {
@@ -42,10 +41,10 @@ export const getToasts = (id: string, message: string | undefined, snapshotId: s
         <>
           <EuiSpacer size="xl" />
           <EuiFlexGroup justifyContent="flexEnd" style={{ paddingRight: "1rem" }}>
-            <EuiButton onClick={onClick}>View restore activities</EuiButton>
+            <EuiSmallButton onClick={onClick}>View restore activities</EuiSmallButton>
           </EuiFlexGroup>
         </>
-      )
+      ),
     },
     {
       id: "error_restore_toast",
@@ -53,20 +52,22 @@ export const getToasts = (id: string, message: string | undefined, snapshotId: s
       color: "danger",
       text: (
         <>
-          <EuiText size="s" >{message}</EuiText>
+          <EuiText size="s">{message}</EuiText>
           <EuiSpacer size="xl" />
           <EuiFlexGroup justifyContent="flexEnd" style={{ paddingRight: "1rem" }}>
-            <EuiButton onClick={onClick} color="danger">View full error</EuiButton>
+            <EuiSmallButton onClick={onClick} color="danger">
+              View full error
+            </EuiSmallButton>
           </EuiFlexGroup>
         </>
-      )
-    }
-  ]
+      ),
+    },
+  ];
   if (id === "success_restore_toast") {
-    return [toasts[0]]
+    return [toasts[0]];
   }
   return [toasts[1]];
-}
+};
 
 interface CheckboxLabelProps {
   title: string;
@@ -76,9 +77,7 @@ interface CheckboxLabelProps {
 export const CheckBoxLabel = ({ title, helpText }: CheckboxLabelProps) => (
   <>
     <EuiText size="s">{title}</EuiText>
-    <EuiText
-      size="xs"
-      style={{ fontWeight: "200" }}>
+    <EuiText size="xs" style={{ fontWeight: "200" }}>
       {helpText}
     </EuiText>
   </>
@@ -91,7 +90,7 @@ export const checkBadJSON = (testString: string) => {
   } catch (err) {
     return true;
   }
-}
+};
 
 export const checkNoSelectedIndices = (indices: string, restoreSpecific: boolean): boolean => {
   let notSelected = false;
@@ -101,7 +100,7 @@ export const checkNoSelectedIndices = (indices: string, restoreSpecific: boolean
   }
 
   return notSelected;
-}
+};
 
 export const checkBadRegex = (regex: string): boolean => {
   try {
@@ -109,10 +108,9 @@ export const checkBadRegex = (regex: string): boolean => {
 
     return false;
   } catch (err) {
-
     return true;
   }
-}
+};
 
 export const checkBadReplacement = (regexString: string): boolean => {
   const isNotValid = regexString.indexOf("$") >= 0;
@@ -120,7 +118,7 @@ export const checkBadReplacement = (regexString: string): boolean => {
   if (isNotValid) return false;
 
   return true;
-}
+};
 
 export const checkCustomIgnoreConflict = (customIndexSettings?: string, ignoreIndexSettings?: string) => {
   if (customIndexSettings && customIndexSettings.length > 0) {
@@ -139,4 +137,4 @@ export const checkCustomIgnoreConflict = (customIndexSettings?: string, ignoreIn
     }
   }
   return false;
-}
+};
diff --git a/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx b/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
index 8ccb17228..8fda2b6b3 100644
--- a/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
+++ b/public/pages/SplitIndex/components/SplitIndexForm/SplitIndexForm.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { Component } from "react";
-import { EuiSpacer, EuiLink, EuiFlexItem, EuiFlexGroup, EuiButton, EuiButtonEmpty } from "@elastic/eui";
+import { EuiSpacer, EuiLink, EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiSmallButtonEmpty } from "@elastic/eui";
 import FormGenerator, { IField, IFormGeneratorRef, IFieldComponentProps } from "../../../../components/FormGenerator";
 import { IndexItem } from "../../../../../models/interfaces";
 import IndexDetail from "../../../../containers/IndexDetail";
@@ -240,12 +240,12 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
         <EuiSpacer />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.props.onCancel} data-test-subj="splitCancelButton">
+            <EuiSmallButtonEmpty onClick={this.props.onCancel} data-test-subj="splitCancelButton">
               Cancel
-            </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               fill
               onClick={this.onSubmit}
               isLoading={this.props.loading}
@@ -254,7 +254,7 @@ export default class SplitIndexForm extends Component<SplitIndexComponentProps>
               isDisabled={!readyForSplit}
             >
               Split
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
index 960659f83..dade1590e 100644
--- a/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
+++ b/public/pages/SplitIndex/container/SplitIndex/SplitIndex.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { Component, useContext } from "react";
-import { EuiCallOut, EuiSpacer, EuiTitle, EuiButton, EuiLink, EuiFormRow } from "@elastic/eui";
+import { EuiCallOut, EuiSpacer, EuiTitle, EuiSmallButton, EuiLink, EuiCompressedFormRow } from "@elastic/eui";
 import { get } from "lodash";
 
 import { CatIndex } from "../../../../../server/models/interfaces";
@@ -124,7 +124,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
               complete. The index will be in the Red state while the index is opening.
             </p>
             <p>
-              <EuiButton
+              <EuiSmallButton
                 fill
                 isLoading={this.state.loading}
                 isDisabled={this.state.loading}
@@ -144,7 +144,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
                 data-test-subj={"open-index-button"}
               >
                 Open index
-              </EuiButton>
+              </EuiSmallButton>
             </p>
           </EuiCallOut>
           <EuiSpacer />
@@ -159,7 +159,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
         <>
           <EuiCallOut color="danger" iconType="alert" title="The source index must block write operations before splitting.">
             <p>In order to split an existing index, you must first set the index to block write operations.</p>
-            <EuiButton
+            <EuiSmallButton
               fill
               onClick={async () => {
                 try {
@@ -178,7 +178,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
               data-test-subj={"set-indexsetting-button"}
             >
               Block write operations
-            </EuiButton>
+            </EuiSmallButton>
           </EuiCallOut>
           <EuiSpacer />
         </>
@@ -225,7 +225,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
           <h1>Split index</h1>
         </EuiTitle>
 
-        <EuiFormRow
+        <EuiCompressedFormRow
           fullWidth
           helpText={
             <div>
@@ -241,7 +241,7 @@ export class SplitIndex extends Component<SplitIndexProps> {
           }
         >
           <></>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
         <EuiSpacer />
 
diff --git a/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap b/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap
index 9d2cad05d..3288a3a6e 100644
--- a/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap
+++ b/public/pages/SplitIndex/container/SplitIndex/__snapshots__/SplitIndex.test.tsx.snap
@@ -12,7 +12,7 @@ HTMLCollection [
         Split index
       </h1>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
diff --git a/public/pages/Templates/components/DeleteTemplate/index.tsx b/public/pages/Templates/components/DeleteTemplate/index.tsx
index c45758553..bdd41ef6d 100644
--- a/public/pages/Templates/components/DeleteTemplate/index.tsx
+++ b/public/pages/Templates/components/DeleteTemplate/index.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import React, { useState } from "react";
-import { EuiButtonIcon, EuiToolTip } from "@elastic/eui";
+import { EuiSmallButtonIcon, EuiToolTip } from "@elastic/eui";
 import DeleteIndexModal from "../../containers/DeleteTemplatesModal";
 import { ITemplate } from "../../interface";
 
@@ -23,7 +23,7 @@ export default function DeleteTemplate(props: DeleteTemplateProps) {
   return (
     <>
       <EuiToolTip content="Delete template">
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           aria-label="Delete template"
           color="danger"
           iconType="trash"
diff --git a/public/pages/Templates/components/IndexControls/IndexControls.tsx b/public/pages/Templates/components/IndexControls/IndexControls.tsx
index bc8a211dc..f61ff90d9 100644
--- a/public/pages/Templates/components/IndexControls/IndexControls.tsx
+++ b/public/pages/Templates/components/IndexControls/IndexControls.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useEffect, useState } from "react";
-import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { getUISettings } from "../../../../services/Services";
 import TemplatesActions from "../../containers/TemplatesActions";
 import { ITemplate } from "../../interface";
@@ -40,8 +40,7 @@ export default function SearchControls(props: SearchControlsProps) {
   return useUpdatedUX ? (
     <EuiFlexGroup style={{ padding: "0px 5px 16px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch
-          compressed
+        <EuiCompressedFieldSearch
           fullWidth
           placeholder="Search"
           value={state.search}
@@ -55,7 +54,12 @@ export default function SearchControls(props: SearchControlsProps) {
   ) : (
     <EuiFlexGroup style={{ padding: "0px 5px" }} alignItems="center">
       <EuiFlexItem>
-        <EuiFieldSearch fullWidth placeholder="Search..." value={state.search} onChange={(e) => onChange("search", e.target.value)} />
+        <EuiCompressedFieldSearch
+          fullWidth
+          placeholder="Search..."
+          value={state.search}
+          onChange={(e) => onChange("search", e.target.value)}
+        />
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/public/pages/Templates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap b/public/pages/Templates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
index 1c3d7a474..84a76e94b 100644
--- a/public/pages/Templates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
+++ b/public/pages/Templates/components/IndexControls/__snapshots__/IndexControls.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`<IndexControls /> spec renders the component 1`] = `
     class="euiFlexItem"
   >
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
     >
       <div
         class="euiFormControlLayout__childrenWrapper"
       >
         <input
-          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+          class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
           placeholder="Search..."
           type="search"
           value="testing"
@@ -34,7 +34,7 @@ exports[`<IndexControls /> spec renders the component 1`] = `
         >
           <button
             aria-label="Clear input"
-            class="euiFormControlLayoutClearButton"
+            class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
             type="button"
           >
             EuiIconMock
diff --git a/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx b/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx
index f750d0a01..db7ea2f26 100644
--- a/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx
+++ b/public/pages/Templates/containers/AssociatedComponentsModal/AssociatedComponentsModal.tsx
@@ -7,7 +7,16 @@ import React, { Dispatch, SetStateAction, useContext, useState } from "react";
 import { CoreStart } from "opensearch-dashboards/public";
 import { ServicesContext } from "../../../../services";
 import { CoreServicesContext } from "../../../../components/core_services";
-import { EuiButtonIcon, EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiInMemoryTable, EuiLink, EuiTitle, EuiToolTip } from "@elastic/eui";
+import {
+  EuiSmallButtonIcon,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiTitle,
+  EuiToolTip,
+} from "@elastic/eui";
 import { ROUTES } from "../../../../utils/constants";
 import { ReactChild } from "react";
 import { Modal } from "../../../../components/Modal";
@@ -62,7 +71,7 @@ export default function AssociatedComponentsModal(props: AssociatedComponentsMod
                   render: (value: string, record) => {
                     return (
                       <EuiToolTip content="Unlink">
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label={`Unlink ${record.name}?`}
                           iconType="unlink"
                           onClick={() => {
diff --git a/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap b/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap
index c5401295c..418079bd4 100644
--- a/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap
+++ b/public/pages/Templates/containers/AssociatedComponentsModal/__snapshots__/AssociatedComponentsModal.test.tsx.snap
@@ -169,7 +169,7 @@ HTMLCollection [
                             >
                               <button
                                 aria-label="Unlink test_component_template?"
-                                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                                class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                                 type="button"
                               >
                                 EuiIconMock
diff --git a/public/pages/Templates/containers/DeleteTemplatesModal/__snapshots__/DeleteTemplateModal.test.tsx.snap b/public/pages/Templates/containers/DeleteTemplatesModal/__snapshots__/DeleteTemplateModal.test.tsx.snap
index f0359cddd..b01932f99 100644
--- a/public/pages/Templates/containers/DeleteTemplatesModal/__snapshots__/DeleteTemplateModal.test.tsx.snap
+++ b/public/pages/Templates/containers/DeleteTemplatesModal/__snapshots__/DeleteTemplateModal.test.tsx.snap
@@ -76,13 +76,13 @@ HTMLCollection [
                   </div>
                 </div>
                 <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"
                       data-test-subj="deleteInput"
                       placeholder="delete"
                       type="text"
@@ -97,7 +97,7 @@ HTMLCollection [
             class="euiModalFooter"
           >
             <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
+              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
               data-test-subj="deletaCancelButton"
               type="button"
             >
@@ -112,7 +112,7 @@ HTMLCollection [
               </span>
             </button>
             <button
-              class="euiButton euiButton--danger euiButton--fill euiButton-isDisabled"
+              class="euiButton euiButton--danger euiButton--small euiButton--fill euiButton-isDisabled"
               data-test-subj="deleteConfirmButton"
               disabled=""
               type="button"
diff --git a/public/pages/Templates/containers/Templates/Templates.tsx b/public/pages/Templates/containers/Templates/Templates.tsx
index 0ac946b32..dcc4bb6bd 100644
--- a/public/pages/Templates/containers/Templates/Templates.tsx
+++ b/public/pages/Templates/containers/Templates/Templates.tsx
@@ -15,14 +15,14 @@ import {
   Direction,
   Pagination,
   EuiTableSelectionType,
-  EuiButton,
+  EuiSmallButton,
   EuiLink,
   EuiTitle,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiEmptyPrompt,
   EuiText,
   EuiToolTip,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
 } from "@elastic/eui";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
 import { DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_QUERY_PARAMS } from "../../utils/constants";
@@ -301,7 +301,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
                       onUnlink={() => this.getTemplates()}
                       renderProps={({ setVisible }) => (
                         <EuiToolTip content="View associated index templates">
-                          <EuiButtonIcon
+                          <EuiSmallButtonIcon
                             aria-label="View associated index templates"
                             iconType="kqlSelector"
                             onClick={() => setVisible(true)}
@@ -339,14 +339,14 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
                   </EuiText>
                 }
                 actions={[
-                  <EuiButton
+                  <EuiSmallButton
                     fill
                     onClick={() => {
                       this.props.history.push(ROUTES.CREATE_TEMPLATE);
                     }}
                   >
                     Create template
-                  </EuiButton>,
+                  </EuiSmallButton>,
                 ]}
               />
             ) : (
@@ -357,7 +357,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
                   </EuiText>
                 }
                 actions={[
-                  <EuiButton
+                  <EuiSmallButton
                     fill
                     onClick={() => {
                       this.setState(defaultFilter, () => {
@@ -366,7 +366,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
                     }}
                   >
                     Reset filters
-                  </EuiButton>,
+                  </EuiSmallButton>,
                 ]}
               />
             )
@@ -382,7 +382,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
     const description = [
       {
         renderComponent: (
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth
             helpText={
               <div>
@@ -394,7 +394,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
             }
           >
             <></>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         ),
       },
     ];
@@ -460,7 +460,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
             <EuiTitle>
               <span>Templates</span>
             </EuiTitle>
-            <EuiFormRow
+            <EuiCompressedFormRow
               fullWidth
               helpText={
                 <div>
@@ -472,7 +472,7 @@ class Templates extends MDSEnabledComponent<TemplatesProps, TemplatesState> {
               }
             >
               <></>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </>
         }
       >
diff --git a/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap b/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap
index 807e874fc..a33118792 100644
--- a/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap
+++ b/public/pages/Templates/containers/Templates/__snapshots__/Templates.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`<Templates /> spec renders the component 1`] = `
         Templates
       </span>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -73,7 +73,7 @@ exports[`<Templates /> spec renders the component 1`] = `
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     type="button"
                   >
                     <span
@@ -94,7 +94,7 @@ exports[`<Templates /> spec renders the component 1`] = `
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 data-test-subj="Create templateButton"
                 type="button"
               >
@@ -128,13 +128,13 @@ exports[`<Templates /> spec renders the component 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=""
@@ -427,7 +427,7 @@ exports[`<Templates /> spec renders the component 1`] = `
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <button
-                            class="euiButton euiButton--primary euiButton--fill"
+                            class="euiButton euiButton--primary euiButton--small euiButton--fill"
                             type="button"
                           >
                             <span
diff --git a/public/pages/Templates/containers/TemplatesActions/__snapshots__/TemplatesActions.test.tsx.snap b/public/pages/Templates/containers/TemplatesActions/__snapshots__/TemplatesActions.test.tsx.snap
index d12e4fb9f..92f6d5412 100644
--- a/public/pages/Templates/containers/TemplatesActions/__snapshots__/TemplatesActions.test.tsx.snap
+++ b/public/pages/Templates/containers/TemplatesActions/__snapshots__/TemplatesActions.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<TemplatesActions /> spec delete templates by calling commonService 1`]
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
@@ -36,7 +36,7 @@ exports[`<TemplatesActions /> spec renders the component and all the actions sho
     class="euiPopover__anchor"
   >
     <button
-      class="euiButton euiButton--primary"
+      class="euiButton euiButton--primary euiButton--small"
       type="button"
     >
       <span
diff --git a/public/pages/Templates/containers/TemplatesActions/index.tsx b/public/pages/Templates/containers/TemplatesActions/index.tsx
index 8f59e884c..432726af6 100644
--- a/public/pages/Templates/containers/TemplatesActions/index.tsx
+++ b/public/pages/Templates/containers/TemplatesActions/index.tsx
@@ -4,7 +4,7 @@
  */
 import React, { useMemo, useState } from "react";
 import { RouteComponentProps } from "react-router-dom";
-import { EuiButton, EuiContextMenu } from "@elastic/eui";
+import { EuiSmallButton, EuiContextMenu } from "@elastic/eui";
 import SimplePopover from "../../../../components/SimplePopover";
 import DeleteIndexModal from "../DeleteTemplatesModal";
 import { ITemplate } from "../../interface";
@@ -38,9 +38,9 @@ export default function TemplatesActions(props: TemplatesActionsProps) {
         data-test-subj="moreAction"
         panelPaddingSize="none"
         button={
-          <EuiButton iconType="arrowDown" iconSide="right" size={size}>
+          <EuiSmallButton iconType="arrowDown" iconSide="right">
             Actions
-          </EuiButton>
+          </EuiSmallButton>
         }
       >
         <EuiContextMenu
diff --git a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
index 2b07a5439..b52818e0d 100644
--- a/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
+++ b/public/pages/Transforms/components/ConfigureTransform/Configure.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea, EuiText, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 
 interface ConfigureTransformProps {
@@ -29,9 +29,15 @@ const ConfigureTransform = ({
   <ContentPanel bodyStyles={{ padding: "initial" }} title="Job name and description" titleSize={size}>
     <div style={{ paddingLeft: "10px" }}>
       <EuiSpacer size="s" />
-      <EuiFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!error} error={error}>
-        <EuiFieldText isInvalid={!!error} placeholder="transform-id" value={transformId} onChange={onChangeName} disabled={inEdit} />
-      </EuiFormRow>
+      <EuiCompressedFormRow label="Name" helpText="Specify a unique, descriptive name." isInvalid={!!error} error={error}>
+        <EuiCompressedFieldText
+          isInvalid={!!error}
+          placeholder="transform-id"
+          value={transformId}
+          onChange={onChangeName}
+          disabled={inEdit}
+        />
+      </EuiCompressedFormRow>
       <EuiSpacer />
       <EuiFlexGroup gutterSize="xs">
         <EuiFlexItem grow={false}>
@@ -46,9 +52,9 @@ const ConfigureTransform = ({
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="xs" />
-      <EuiFormRow>
+      <EuiCompressedFormRow>
         <EuiTextArea compressed={true} value={description} onChange={onChangeDescription} data-test-subj="description" />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </div>
   </ContentPanel>
 );
diff --git a/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx b/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx
index e81f91170..2e27aef2b 100644
--- a/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx
+++ b/public/pages/Transforms/components/DeleteModal/DeleteModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, Fragment } from "react";
-import { EuiConfirmModal, EuiForm, EuiFormRow, EuiFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
+import { EuiConfirmModal, EuiForm, EuiCompressedFormRow, EuiCompressedFieldText, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
 
 // TODO: Merge with Rollup to create generic component
 interface DeleteModalProps {
@@ -46,9 +46,14 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
               it will remain intact.
             </Fragment>
             <EuiSpacer size="s" />
-            <EuiFormRow helpText="To confirm deletion, enter delete in the text field">
-              <EuiFieldText value={confirmDeleteText} placeholder="delete" onChange={this.onChange} data-test-subj="deleteTextField" />
-            </EuiFormRow>
+            <EuiCompressedFormRow helpText="To confirm deletion, enter delete in the text field">
+              <EuiCompressedFieldText
+                value={confirmDeleteText}
+                placeholder="delete"
+                onChange={this.onChange}
+                data-test-subj="deleteTextField"
+              />
+            </EuiCompressedFormRow>
           </EuiForm>
         </EuiConfirmModal>
       </EuiOverlayMask>
diff --git a/public/pages/Transforms/components/ErrorModal/ErrorModal.tsx b/public/pages/Transforms/components/ErrorModal/ErrorModal.tsx
index e9a6c0c52..98a2d6c7b 100644
--- a/public/pages/Transforms/components/ErrorModal/ErrorModal.tsx
+++ b/public/pages/Transforms/components/ErrorModal/ErrorModal.tsx
@@ -5,7 +5,7 @@
 
 import React from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -37,9 +37,9 @@ const ErrorModal = ({ metadata, onClose }: ErrorModalProps) => (
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton fill onClick={onClose} data-test-subj="errorModalCloseButton">
+        <EuiSmallButton fill onClick={onClose} data-test-subj="errorModalCloseButton">
           Close
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   </EuiOverlayMask>
diff --git a/public/pages/Transforms/components/Schedule/Schedule.tsx b/public/pages/Transforms/components/Schedule/Schedule.tsx
index 04f6fa5fe..94d73cd86 100644
--- a/public/pages/Transforms/components/Schedule/Schedule.tsx
+++ b/public/pages/Transforms/components/Schedule/Schedule.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiSpacer, EuiCheckbox, EuiAccordion, EuiFormRow, EuiFieldNumber } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedCheckbox, EuiAccordion, EuiCompressedFormRow, EuiCompressedFieldNumber } from "@elastic/eui";
 // @ts-ignore
 import { htmlIdGenerator } from "@elastic/eui/lib/services";
 import { ContentPanel } from "../../../../components/ContentPanel";
@@ -52,7 +52,7 @@ export default class Schedule extends Component<ScheduleProps> {
     return (
       <ContentPanel bodyStyles={{ padding: "initial" }} title="Schedule" titleSize={size}>
         <div style={{ paddingLeft: "10px" }}>
-          <EuiCheckbox
+          <EuiCompressedCheckbox
             id="jobEnabled"
             label="Job enabled by default"
             checked={enabled}
@@ -71,14 +71,14 @@ export default class Schedule extends Component<ScheduleProps> {
 
           <EuiAccordion id={htmlIdGenerator()()} buttonContent="Advanced">
             <EuiSpacer size="m" />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label={"Pages per execution"}
               helpText={
                 "Determines the number of transformed buckets that are computed and indexed at a time. A larger number means faster execution, but costs more memory. An exception occurs when memory limits are exceeded. We recommend you to start with default value and adjust based on your use case."
               }
             >
-              <EuiFieldNumber min={1} placeholder="1000" value={pageSize} onChange={onPageChange} />
-            </EuiFormRow>
+              <EuiCompressedFieldNumber min={1} placeholder="1000" value={pageSize} onChange={onPageChange} />
+            </EuiCompressedFormRow>
           </EuiAccordion>
         </div>
       </ContentPanel>
diff --git a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
index defa31e12..98b5cbbf1 100644
--- a/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
+++ b/public/pages/Transforms/components/TransformEmptyPrompt/TransformEmptyPrompt.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from "@elastic/eui";
 import { PLUGIN_NAME, ROUTES } from "../../../../utils/constants";
 import { getUISettings } from "../../../../services/Services";
 
@@ -36,20 +36,16 @@ const getActions: React.SFC<TransformEmptyPromptProps> = ({ filterIsApplied, loa
 
   if (filterIsApplied) {
     return (
-      <EuiButton size={useUpdatedUX ? "s" : undefined} fill onClick={resetFilters} data-test-subj="transformEmptyPromptRestFilters">
+      <EuiSmallButton fill onClick={resetFilters} data-test-subj="transformEmptyPromptRestFilters">
         Reset Filters
-      </EuiButton>
+      </EuiSmallButton>
     );
   }
 
   return (
-    <EuiButton
-      size={useUpdatedUX ? "s" : undefined}
-      href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`}
-      data-test-subj="emptyPromptCreateTransformButton"
-    >
+    <EuiSmallButton href={`${PLUGIN_NAME}#${ROUTES.CREATE_TRANSFORM}`} data-test-subj="emptyPromptCreateTransformButton">
       Create transform
-    </EuiButton>
+    </EuiSmallButton>
   );
 };
 
diff --git a/public/pages/Transforms/containers/Transforms/EditTransform.tsx b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
index ff179f23c..7d8251caa 100644
--- a/public/pages/Transforms/containers/Transforms/EditTransform.tsx
+++ b/public/pages/Transforms/containers/Transforms/EditTransform.tsx
@@ -11,7 +11,7 @@ import { EMPTY_TRANSFORM } from "../../utils/constants";
 import queryString from "query-string";
 import { BREADCRUMBS, ROUTES } from "../../../../utils/constants";
 import { getErrorMessage } from "../../../../utils/helpers";
-import { EuiFlexItem, EuiFlexGroup, EuiButton, EuiTitle, EuiSpacer, EuiButtonEmpty } from "@elastic/eui";
+import { EuiFlexItem, EuiFlexGroup, EuiSmallButton, EuiTitle, EuiSpacer, EuiSmallButtonEmpty } from "@elastic/eui";
 import ConfigureTransform from "../../components/ConfigureTransform";
 import Schedule from "../../components/Schedule";
 import Indices from "../../components/Indices";
@@ -188,24 +188,19 @@ export class EditTransform extends Component<EditTransformProps, EditTransformSt
 
           <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty
-                size={this.state.useUpdatedUX ? "s" : undefined}
-                onClick={this.onCancel}
-                data-test-subj="editTransformCancelButton"
-              >
+              <EuiSmallButtonEmpty onClick={this.onCancel} data-test-subj="editTransformCancelButton">
                 Cancel
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
-                size={this.state.useUpdatedUX ? "s" : undefined}
+              <EuiSmallButton
                 fill
                 onClick={this.onSubmit}
                 isLoading={isSubmitting}
                 data-test-subj="editTransformSaveButton"
               >
                 Save changes
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </>
diff --git a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
index ef4b1ba3b..e1761b9c6 100644
--- a/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
+++ b/public/pages/Transforms/containers/Transforms/TransformDetails.tsx
@@ -8,9 +8,9 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButton,
+  EuiSmallButton,
   EuiOverlayMask,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiModalFooter,
   EuiModal,
   EuiModalHeader,
@@ -238,9 +238,15 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
       scheduleText = buildIntervalScheduleText(transformJson.transform.continuous, interval, intervalTimeUnit);
     }
     const actionButton = (
-      <EuiButton iconType="arrowDown" iconSide="right" disabled={false} onClick={this.onActionButtonClick} data-test-subj="actionButton">
+      <EuiSmallButton
+        iconType="arrowDown"
+        iconSide="right"
+        disabled={false}
+        onClick={this.onActionButtonClick}
+        data-test-subj="actionButton"
+      >
         Actions
-      </EuiButton>
+      </EuiSmallButton>
     );
 
     const actionItems = [
@@ -327,22 +333,21 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
       },
       {
         renderComponent: (
-          <EuiButton size="s" onClick={() => (!this.state.enabled ? onClickEnable() : onClickDisable())}>
+          <EuiSmallButton onClick={() => (!this.state.enabled ? onClickEnable() : onClickDisable())}>
             {this.state.enabled ? "Disable" : "Enable"}
-          </EuiButton>
+          </EuiSmallButton>
         ),
       },
       {
         renderComponent: (
-          <EuiButton
-            size="s"
+          <EuiSmallButton
             onClick={() => {
               this.closePopover();
               this.showJsonModal();
             }}
           >
             View JSON
-          </EuiButton>
+          </EuiSmallButton>
         ),
       },
       {
@@ -450,7 +455,7 @@ export class TransformDetails extends Component<TransformDetailsProps, Transform
               </EuiModalBody>
 
               <EuiModalFooter>
-                <EuiButtonEmpty onClick={this.closeModal}>Close</EuiButtonEmpty>
+                <EuiSmallButtonEmpty onClick={this.closeModal}>Close</EuiSmallButtonEmpty>
               </EuiModalFooter>
             </EuiModal>
           </EuiOverlayMask>
diff --git a/public/pages/Transforms/containers/Transforms/Transforms.tsx b/public/pages/Transforms/containers/Transforms/Transforms.tsx
index c042dafe0..9d4dfff13 100644
--- a/public/pages/Transforms/containers/Transforms/Transforms.tsx
+++ b/public/pages/Transforms/containers/Transforms/Transforms.tsx
@@ -11,11 +11,11 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiTitle,
-  EuiButton,
+  EuiSmallButton,
   EuiBasicTable,
   EuiPopover,
   EuiContextMenuPanel,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiHorizontalRule,
   EuiPagination,
   EuiLink,
@@ -200,7 +200,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
     const Actionsize = this.state.useUpdatedUX ? "s" : "m";
 
     const actionButton = (
-      <EuiButton
+      <EuiSmallButton
         iconType="arrowDown"
         iconSide="right"
         disabled={!selectedItems.length}
@@ -209,7 +209,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
         size={Actionsize}
       >
         Actions
-      </EuiButton>
+      </EuiSmallButton>
     );
 
     const actionItems = [
@@ -336,17 +336,17 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
           <EuiFlexItem grow={false}>
             <EuiFlexGroup alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiButton iconType="refresh" onClick={this.getTransforms} data-test-subj="refreshButton">
+                <EuiSmallButton iconType="refresh" onClick={this.getTransforms} data-test-subj="refreshButton">
                   Refresh
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton disabled={!selectedItems.length} onClick={this.onDisable} data-test-subj="disableButton">
+                <EuiSmallButton disabled={!selectedItems.length} onClick={this.onDisable} data-test-subj="disableButton">
                   Disable
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton
+                <EuiSmallButton
                   disabled={!selectedItems.length}
                   onClick={() => {
                     this.onEnable();
@@ -354,7 +354,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
                   data-test-subj="enableButton"
                 >
                   Enable
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiPopover
@@ -370,9 +370,9 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
                 </EuiPopover>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButton onClick={this.onClickCreate} fill={true} data-test-subj="createTransformButton">
+                <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="createTransformButton">
                   Create transform job
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
@@ -381,7 +381,7 @@ export class Transforms extends MDSEnabledComponent<TransformProps, TransformSta
         <div style={{ padding: "initial" }}>
           <EuiFlexGroup style={{ padding: "0px 5px" }}>
             <EuiFlexItem>
-              <EuiFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
+              <EuiCompressedFieldSearch fullWidth={true} value={search} placeholder="Search" onChange={this.onSearchChange} />
             </EuiFlexItem>
             {pageCount > 1 && (
               <EuiFlexItem grow={false} style={{ justifyContent: "center" }}>
diff --git a/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap b/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
index 19414169b..86ee0124e 100644
--- a/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
+++ b/public/pages/Transforms/containers/Transforms/__snapshots__/EditTransform.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--s"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -67,14 +67,14 @@ exports[`<EditTransform /> spec renders the component 1`] = `
             class="euiFormRow__fieldWrapper"
           >
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
               >
                 <input
                   aria-describedby="some_html_id-help-0"
-                  class="euiFieldText"
+                  class="euiFieldText euiFieldText--compressed"
                   disabled=""
                   id="some_html_id"
                   placeholder="transform-id"
@@ -128,7 +128,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--xs"
         />
         <div
-          class="euiFormRow"
+          class="euiFormRow euiFormRow--compressed"
           id="some_html_id-row"
         >
           <div
@@ -361,7 +361,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
         style="padding-left: 10px;"
       >
         <div
-          class="euiCheckbox"
+          class="euiCheckbox euiCheckbox--compressed"
         >
           <input
             checked=""
@@ -392,7 +392,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
             style="width: 200px;"
           >
             <div
-              class="euiFormRow"
+              class="euiFormRow euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -410,13 +410,13 @@ exports[`<EditTransform /> spec renders the component 1`] = `
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <input
-                      class="euiFieldNumber"
+                      class="euiFieldNumber euiFieldNumber--compressed"
                       id="some_html_id"
                       type="number"
                       value="2"
@@ -430,20 +430,20 @@ exports[`<EditTransform /> spec renders the component 1`] = `
             class="euiFlexItem"
           >
             <div
-              class="euiFormRow euiFormRow--hasEmptyLabelSpace"
+              class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout"
+                  class="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <select
-                      class="euiSelect"
+                      class="euiSelect euiSelect--compressed"
                       id="some_html_id"
                     >
                       <option
@@ -520,7 +520,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
                   class="euiSpacer euiSpacer--m"
                 />
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   id="some_html_id-row"
                 >
                   <div
@@ -537,14 +537,14 @@ exports[`<EditTransform /> spec renders the component 1`] = `
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
                           aria-describedby="some_html_id-help-0"
-                          class="euiFieldNumber"
+                          class="euiFieldNumber euiFieldNumber--compressed"
                           id="some_html_id"
                           min="1"
                           placeholder="1000"
@@ -578,7 +578,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary"
+        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
         data-test-subj="editTransformCancelButton"
         type="button"
       >
@@ -597,7 +597,7 @@ exports[`<EditTransform /> spec renders the component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary euiButton--fill"
+        class="euiButton euiButton--primary euiButton--small euiButton--fill"
         data-test-subj="editTransformSaveButton"
         type="button"
       >
diff --git a/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap b/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
index bd7b682fc..c33fb832c 100644
--- a/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
+++ b/public/pages/Transforms/containers/Transforms/__snapshots__/Transforms.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               data-test-subj="refreshButton"
               type="button"
             >
@@ -51,7 +51,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton-isDisabled"
+              class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
               data-test-subj="disableButton"
               disabled=""
               type="button"
@@ -71,7 +71,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton-isDisabled"
+              class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
               data-test-subj="enableButton"
               disabled=""
               type="button"
@@ -99,7 +99,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
                 class="euiPopover__anchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="actionButton"
                   disabled=""
                   type="button"
@@ -122,7 +122,7 @@ exports[`<Transforms /> spec renders the component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary euiButton--fill"
+              class="euiButton euiButton--primary euiButton--small euiButton--fill"
               data-test-subj="createTransformButton"
               type="button"
             >
@@ -151,13 +151,13 @@ exports[`<Transforms /> spec renders the component 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=""
diff --git a/public/pages/Transforms/utils/metadataHelper.tsx b/public/pages/Transforms/utils/metadataHelper.tsx
index 2b4f3b979..51b855961 100644
--- a/public/pages/Transforms/utils/metadataHelper.tsx
+++ b/public/pages/Transforms/utils/metadataHelper.tsx
@@ -6,7 +6,17 @@
 import { TransformMetadata } from "../../../../models/interfaces";
 import React, { ChangeEvent } from "react";
 import moment from "moment-timezone";
-import { EuiFieldNumber, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiFormRow, EuiLink, EuiSelect, EuiTextArea, EuiText } from "@elastic/eui";
+import {
+  EuiCompressedFieldNumber,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiCompressedFormRow,
+  EuiLink,
+  EuiCompressedSelect,
+  EuiTextArea,
+  EuiText,
+} from "@elastic/eui";
 import { ScheduleIntervalTimeunitOptions } from "../../CreateTransform/utils/constants";
 import ErrorModal from "../components/ErrorModal";
 import { ModalConsumer } from "../../../components/Modal";
@@ -85,20 +95,20 @@ export const selectInterval = (
   <React.Fragment>
     <EuiFlexGroup style={{ maxWidth: 400 }}>
       <EuiFlexItem grow={false} style={{ width: 200 }}>
-        <EuiFormRow label="Transform execution interval" error={intervalError} isInvalid={intervalError != ""}>
-          <EuiFieldNumber value={interval} onChange={onChangeInterval} isInvalid={intervalError != ""} />
-        </EuiFormRow>
+        <EuiCompressedFormRow label="Transform execution interval" error={intervalError} isInvalid={intervalError != ""}>
+          <EuiCompressedFieldNumber value={interval} onChange={onChangeInterval} isInvalid={intervalError != ""} />
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFormRow hasEmptyLabelSpace={true}>
-          <EuiSelect
+        <EuiCompressedFormRow hasEmptyLabelSpace={true}>
+          <EuiCompressedSelect
             id="selectIntervalTimeunit"
             options={ScheduleIntervalTimeunitOptions}
             value={intervalTimeunit}
             onChange={onChangeTimeunit}
             isInvalid={interval == undefined || interval <= 0}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
     </EuiFlexGroup>
   </React.Fragment>
@@ -111,12 +121,12 @@ export const selectCronExpression = (
   onCronTimeZoneChange: (e: ChangeEvent<HTMLSelectElement>) => void
 ) => (
   <React.Fragment>
-    <EuiFormRow label="Define by cron expression">
+    <EuiCompressedFormRow label="Define by cron expression">
       <EuiTextArea value={cronExpression} onChange={onCronExpressionChange} compressed={true} />
-    </EuiFormRow>
-    <EuiFormRow label="Timezone" helpText="A day starts from 00:00:00 in the specified timezone.">
-      <EuiSelect id="timezone" options={timezones} value={cronTimeZone} onChange={onCronTimeZoneChange} />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
+    <EuiCompressedFormRow label="Timezone" helpText="A day starts from 00:00:00 in the specified timezone.">
+      <EuiCompressedSelect id="timezone" options={timezones} value={cronTimeZone} onChange={onCronTimeZoneChange} />
+    </EuiCompressedFormRow>
   </React.Fragment>
 );
 
diff --git a/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx b/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
index 286284da7..e5565c821 100644
--- a/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
+++ b/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiTextArea, EuiSelect, EuiButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiTextArea, EuiCompressedSelect, EuiSmallButton, EuiFlexGroup, EuiFlexItem } from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { FeatureChannelList } from "../../../../../server/models/interfaces";
@@ -38,9 +38,8 @@ const ChannelNotification = ({
       <EuiFormCustomLabel title="Channel ID" />
       <EuiFlexGroup gutterSize="s" style={{ maxWidth: 600 }}>
         <EuiFlexItem>
-          <EuiFormRow>
-            <EuiSelect
-              compressed={useNewUx}
+          <EuiCompressedFormRow>
+            <EuiCompressedSelect
               id={actionNotification ? "action-channel-id" : "channel-id"}
               placeholder="Select channel ID"
               hasNoInitialSelection
@@ -50,22 +49,21 @@ const ChannelNotification = ({
               onChange={onChangeChannelId}
               data-test-subj={actionNotification ? "create-policy-notification-action-channel-id" : "create-policy-notification-channel-id"}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             iconType="refresh"
             onClick={getChannels}
             disabled={loadingChannels}
             className="refresh-button"
             data-test-subj="channel-notification-refresh"
-            size={useNewUx ? "s" : undefined}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" size={useNewUx ? "s" : undefined}>
+          <EuiSmallButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
             Manage channels
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
 
@@ -75,7 +73,7 @@ const ChannelNotification = ({
 
           <EuiFormCustomLabel title="Notification message" helpText="Embed variables in your message using Mustache template." />
 
-          <EuiFormRow>
+          <EuiCompressedFormRow>
             <EuiTextArea
               placeholder="The index {{ctx.index}} failed during policy execution."
               style={{ minHeight: "150px" }}
@@ -84,7 +82,7 @@ const ChannelNotification = ({
               onChange={onChangeMessage}
               data-test-subj={actionNotification ? "create-policy-notification-action-message" : "create-policy-notification-message"}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
     </>
diff --git a/public/pages/VisualCreatePolicy/components/DraggableItem/DraggableItem.tsx b/public/pages/VisualCreatePolicy/components/DraggableItem/DraggableItem.tsx
index c77acd9b9..dd38768e1 100644
--- a/public/pages/VisualCreatePolicy/components/DraggableItem/DraggableItem.tsx
+++ b/public/pages/VisualCreatePolicy/components/DraggableItem/DraggableItem.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiFlexGroup, EuiFlexItem, EuiDraggable, EuiPanel, EuiIcon, EuiButtonIcon, EuiToolTip } from "@elastic/eui";
+import { EuiFlexGroup, EuiFlexItem, EuiDraggable, EuiPanel, EuiIcon, EuiSmallButtonIcon, EuiToolTip } from "@elastic/eui";
 
 interface DraggableItemProps {
   content: string | JSX.Element | null;
@@ -29,7 +29,7 @@ const DraggableItem = ({ content, id, idx, isLast, onClickDelete, onClickEdit, d
           <EuiFlexItem>{content}</EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiToolTip position="top" content={<p>Delete {draggableType}</p>}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 iconType="trash"
                 aria-label="Delete"
                 color="danger"
@@ -40,7 +40,7 @@ const DraggableItem = ({ content, id, idx, isLast, onClickDelete, onClickEdit, d
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiToolTip position="top" content={<p>Edit {draggableType}</p>}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 iconType="pencil"
                 aria-label="Edit"
                 color="primary"
diff --git a/public/pages/VisualCreatePolicy/components/DraggableItem/__snapshots__/DraggableItem.test.tsx.snap b/public/pages/VisualCreatePolicy/components/DraggableItem/__snapshots__/DraggableItem.test.tsx.snap
index 6c28dc30b..8352f28b8 100644
--- a/public/pages/VisualCreatePolicy/components/DraggableItem/__snapshots__/DraggableItem.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/DraggableItem/__snapshots__/DraggableItem.test.tsx.snap
@@ -48,7 +48,7 @@ exports[`<DraggableItem /> spec renders the component 1`] = `
           >
             <button
               aria-label="Delete"
-              class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+              class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
               data-test-subj="draggable-item-delete-button-some_html_id"
               type="button"
             >
@@ -64,7 +64,7 @@ exports[`<DraggableItem /> spec renders the component 1`] = `
           >
             <button
               aria-label="Edit"
-              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
               data-test-subj="draggable-item-edit-button-some_html_id"
               type="button"
             >
diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
index db823e6bd..de0a17c09 100644
--- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
+++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiButton } from "@elastic/eui";
+import { EuiFlexGroup, EuiFlexItem, EuiSmallButtonEmpty, EuiSmallButton } from "@elastic/eui";
 
 interface FlyoutFooterProps {
   edit: boolean;
@@ -31,20 +31,14 @@ const FlyoutFooter = ({
 }: FlyoutFooterProps) => (
   <EuiFlexGroup justifyContent="flexEnd">
     <EuiFlexItem grow={false}>
-      <EuiButtonEmpty size={useNewUx ? "s" : undefined} onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
+      <EuiSmallButtonEmpty onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
         Cancel
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiButton
-        size={useNewUx ? "s" : undefined}
-        disabled={disabledAction}
-        onClick={onClickAction}
-        fill
-        data-test-subj="flyout-footer-action-button"
-      >
+      <EuiSmallButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button">
         {text ? text : restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"}
-      </EuiButton>
+      </EuiSmallButton>
     </EuiFlexItem>
   </EuiFlexGroup>
 );
diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap b/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
index d9490da11..965abd239 100644
--- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`<FlyoutFooter /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <button
-      class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+      class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
       data-test-subj="flyout-footer-cancel-button"
       type="button"
     >
@@ -27,7 +27,7 @@ exports[`<FlyoutFooter /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <button
-      class="euiButton euiButton--primary euiButton--fill"
+      class="euiButton euiButton--primary euiButton--small euiButton--fill"
       data-test-subj="flyout-footer-action-button"
       type="button"
     >
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx b/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx
index f07e94e0d..9a499c139 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx
@@ -4,7 +4,14 @@
  */
 
 import React, { ChangeEvent, useState } from "react";
-import { EuiButton, EuiFormRow, EuiComboBox, EuiFlexGroup, EuiFlexItem, EuiFieldNumber } from "@elastic/eui";
+import {
+  EuiSmallButton,
+  EuiCompressedFormRow,
+  EuiCompressedComboBox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFieldNumber,
+} from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { ISMTemplate as ISMTemplateData } from "../../../../../models/interfaces";
@@ -24,9 +31,8 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst, us
   return (
     <EuiFlexGroup gutterSize="l" alignItems="center">
       <EuiFlexItem style={{ maxWidth: ISM_TEMPLATE_INPUT_MAX_WIDTH }}>
-        <EuiFormRow isInvalid={false} error={null}>
-          <EuiComboBox
-            compressed={useNewUx}
+        <EuiCompressedFormRow isInvalid={false} error={null}>
+          <EuiCompressedComboBox
             isClearable={false}
             placeholder="Add index patterns"
             noSuggestions
@@ -64,12 +70,11 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst, us
             isInvalid={isInvalid}
             data-test-subj="ism-template-index-pattern-input"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiFormRow error={null} isInvalid={false}>
-          <EuiFieldNumber
-            compressed={useNewUx}
+        <EuiCompressedFormRow error={null} isInvalid={false}>
+          <EuiCompressedFieldNumber
             value={template.priority}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
               const priority = e.target.valueAsNumber;
@@ -78,12 +83,12 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst, us
             isInvalid={false}
             data-test-subj="ism-template-priority-input"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton color="danger" onClick={onRemoveTemplate} data-test-subj="ism-template-remove-button" size={useNewUx ? "s" : undefined}>
+        <EuiSmallButton color="danger" onClick={onRemoveTemplate} data-test-subj="ism-template-remove-button">
           Remove
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplate/__snapshots__/ISMTemplate.test.tsx.snap b/public/pages/VisualCreatePolicy/components/ISMTemplate/__snapshots__/ISMTemplate.test.tsx.snap
index fbe0ac150..a8396ca6f 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplate/__snapshots__/ISMTemplate.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplate/__snapshots__/ISMTemplate.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`<ISMTemplate /> spec renders the component 1`] = `
     style="max-width: 400px;"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="some_html_id-row"
     >
       <div
@@ -18,18 +18,18 @@ exports[`<ISMTemplate /> spec renders the component 1`] = `
         <div
           aria-expanded="false"
           aria-haspopup="listbox"
-          class="euiComboBox"
+          class="euiComboBox euiComboBox--compressed"
           data-test-subj="ism-template-index-pattern-input"
           role="combobox"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <div
-                class="euiComboBox__inputWrap"
+                class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
                 data-test-subj="comboBoxInput"
                 tabindex="-1"
               >
@@ -82,20 +82,20 @@ exports[`<ISMTemplate /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow euiFormRow--compressed"
       id="some_html_id-row"
     >
       <div
         class="euiFormRow__fieldWrapper"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              class="euiFieldNumber"
+              class="euiFieldNumber euiFieldNumber--compressed"
               data-test-subj="ism-template-priority-input"
               id="some_html_id"
               type="number"
@@ -110,7 +110,7 @@ exports[`<ISMTemplate /> spec renders the component 1`] = `
     class="euiFlexItem euiFlexItem--flexGrowZero"
   >
     <button
-      class="euiButton euiButton--danger"
+      class="euiButton euiButton--danger euiButton--small"
       data-test-subj="ism-template-remove-button"
       type="button"
     >
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx b/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
index e196ba1a2..ebf521b40 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiSpacer, EuiFlexGroup, EuiEmptyPrompt, EuiFlexItem, EuiText, EuiLink, EuiIcon } from "@elastic/eui";
+import { EuiSmallButton, EuiSpacer, EuiFlexGroup, EuiEmptyPrompt, EuiFlexItem, EuiText, EuiLink, EuiIcon } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
 import "brace/mode/json";
@@ -24,15 +24,14 @@ interface ISMTemplatesProps {
 const ISMTemplates = ({ policy, onChangePolicy, useNewUx }: ISMTemplatesProps) => {
   const templates = convertTemplatesToArray(policy.ism_template);
   const addTemplateButton = (
-    <EuiButton
-      size={useNewUx ? "s" : undefined}
+    <EuiSmallButton
       onClick={() => {
         onChangePolicy({ ...policy, ism_template: [...templates, { index_patterns: [], priority: 1 }] });
       }}
       data-test-subj="ism-templates-add-template-button"
     >
       Add template
-    </EuiButton>
+    </EuiSmallButton>
   );
   const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" };
   return (
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap b/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
index 9b109b00b..b93b100b3 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplates/__snapshots__/ISMTemplates.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`<ISMTemplates /> spec renders the component 1`] = `
           class="euiSpacer euiSpacer--l"
         />
         <button
-          class="euiButton euiButton--primary"
+          class="euiButton euiButton--primary euiButton--small"
           data-test-subj="ism-templates-add-template-button"
           type="button"
         >
diff --git a/public/pages/VisualCreatePolicy/components/LegacyNotification/LegacyNotification.tsx b/public/pages/VisualCreatePolicy/components/LegacyNotification/LegacyNotification.tsx
index af9f92fd0..e9d56af2a 100644
--- a/public/pages/VisualCreatePolicy/components/LegacyNotification/LegacyNotification.tsx
+++ b/public/pages/VisualCreatePolicy/components/LegacyNotification/LegacyNotification.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiFormRow, EuiCodeEditor, EuiCallOut, EuiButton, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCodeEditor, EuiCallOut, EuiSmallButton, EuiSpacer } from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { DarkModeConsumer } from "../../../../components/DarkMode";
@@ -31,10 +31,10 @@ const LegacyNotification = ({
           Using Channel ID will give you more control to manage notifications across OpenSearch dashboards. If you do decide to switch, you
           will lose your current error notification settings.
         </p>
-        <EuiButton onClick={onSwitchToChannels}>Switch to using Channel ID</EuiButton>
+        <EuiSmallButton onClick={onSwitchToChannels}>Switch to using Channel ID</EuiSmallButton>
       </EuiCallOut>
       <EuiSpacer size="m" />
-      <EuiFormRow fullWidth isInvalid={isInvalid} error={null} style={{ maxWidth: "100%" }}>
+      <EuiCompressedFormRow fullWidth isInvalid={isInvalid} error={null} style={{ maxWidth: "100%" }}>
         <DarkModeConsumer>
           {(isDarkMode) => (
             <EuiCodeEditor
@@ -50,7 +50,7 @@ const LegacyNotification = ({
             />
           )}
         </DarkModeConsumer>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 };
diff --git a/public/pages/VisualCreatePolicy/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap b/public/pages/VisualCreatePolicy/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap
index 32526bb61..bdb6da4cd 100644
--- a/public/pages/VisualCreatePolicy/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/LegacyNotification/__snapshots__/LegacyNotification.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`<LegacyNotification /> spec renders the component 1`] = `
         Using Channel ID will give you more control to manage notifications across OpenSearch dashboards. If you do decide to switch, you will lose your current error notification settings.
       </p>
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         type="button"
       >
         <span
diff --git a/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx b/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx
index 89d2dc9b9..1023a5c63 100644
--- a/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx
+++ b/public/pages/VisualCreatePolicy/components/PolicyInfo/PolicyInfo.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiSpacer, EuiFormRow, EuiFieldText, EuiTextArea } from "@elastic/eui";
+import { EuiSpacer, EuiCompressedFormRow, EuiCompressedFieldText, EuiTextArea } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
 import "brace/theme/github";
 import "brace/mode/json";
@@ -24,8 +24,8 @@ const PolicyInfo = ({ isEdit, policyId, policyIdError, description, onChangePoli
     <div style={{ padding: "10px 0px 0px 10px" }}>
       <EuiFormCustomLabel title="Policy ID" helpText="Specify a unique and descriptive ID that is easy to recognize and remember." />
 
-      <EuiFormRow isInvalid={!!policyIdError} error={policyIdError}>
-        <EuiFieldText
+      <EuiCompressedFormRow isInvalid={!!policyIdError} error={policyIdError}>
+        <EuiCompressedFieldText
           disabled={isEdit}
           isInvalid={!!policyIdError}
           placeholder="hot_cold_workflow"
@@ -34,13 +34,13 @@ const PolicyInfo = ({ isEdit, policyId, policyIdError, description, onChangePoli
           onChange={onChangePolicyId}
           data-test-subj="create-policy-policy-id"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer size="m" />
 
       <EuiFormCustomLabel title="Description" helpText="Describe the policy." />
 
-      <EuiFormRow isInvalid={false} error={null}>
+      <EuiCompressedFormRow isInvalid={false} error={null}>
         <EuiTextArea
           style={{ minHeight: "150px" }}
           compressed={true}
@@ -48,7 +48,7 @@ const PolicyInfo = ({ isEdit, policyId, policyIdError, description, onChangePoli
           onChange={onChangeDescription}
           data-test-subj="create-policy-description"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </div>
   </ContentPanel>
 );
diff --git a/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap b/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
index 5b0a90d58..b0075cd58 100644
--- a/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/PolicyInfo/__snapshots__/PolicyInfo.test.tsx.snap
@@ -55,20 +55,20 @@ exports[`<PolicyInfo /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormControlLayout"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <input
-                class="euiFieldText"
+                class="euiFieldText euiFieldText--compressed"
                 data-test-subj="create-policy-policy-id"
                 id="some_html_id"
                 placeholder="hot_cold_workflow"
@@ -103,7 +103,7 @@ exports[`<PolicyInfo /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
diff --git a/public/pages/VisualCreatePolicy/components/States/State.tsx b/public/pages/VisualCreatePolicy/components/States/State.tsx
index 87bd87d00..b399302ed 100644
--- a/public/pages/VisualCreatePolicy/components/States/State.tsx
+++ b/public/pages/VisualCreatePolicy/components/States/State.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiAccordion, EuiText, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from "@elastic/eui";
+import { EuiAccordion, EuiText, EuiPanel, EuiFlexGroup, EuiFlexItem, EuiSmallButtonIcon, EuiToolTip } from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { State as StateData } from "../../../../../models/interfaces";
@@ -64,7 +64,7 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat
             <ModalConsumer>
               {({ onShow, onClose }) => (
                 <EuiToolTip position="top" content={<p>Delete state</p>}>
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     iconType="trash"
                     aria-label="Delete"
                     color="danger"
@@ -94,7 +94,7 @@ const State = ({ state, isInitialState, idx, onClickEditState, onClickDeleteStat
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiToolTip position="top" content={<p>Edit state</p>}>
-              <EuiButtonIcon iconType="pencil" aria-label="Edit" color="primary" onClick={() => onClickEditState(state)} />
+              <EuiSmallButtonIcon iconType="pencil" aria-label="Edit" color="primary" onClick={() => onClickEditState(state)} />
             </EuiToolTip>
           </EuiFlexItem>
         </EuiFlexGroup>
diff --git a/public/pages/VisualCreatePolicy/components/States/States.tsx b/public/pages/VisualCreatePolicy/components/States/States.tsx
index 11a130ba6..51a2ddb38 100644
--- a/public/pages/VisualCreatePolicy/components/States/States.tsx
+++ b/public/pages/VisualCreatePolicy/components/States/States.tsx
@@ -5,7 +5,7 @@
 
 import React, { ChangeEvent } from "react";
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiText,
   EuiHorizontalRule,
   EuiFlexGroup,
@@ -14,7 +14,7 @@ import {
   EuiLink,
   EuiIcon,
   EuiEmptyPrompt,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSelect,
 } from "@elastic/eui";
 import { ContentPanel } from "../../../../components/ContentPanel";
@@ -65,7 +65,7 @@ const States = ({
       <div style={{ padding: "0px 10px" }}>
         {!isReadOnly && (
           <>
-            <EuiFormRow style={{ maxWidth: "300px", padding: "15px" }} isInvalid={false} error={null}>
+            <EuiCompressedFormRow style={{ maxWidth: "300px", padding: "15px" }} isInvalid={false} error={null}>
               <EuiSelect
                 compressed
                 prepend="Initial state"
@@ -73,7 +73,7 @@ const States = ({
                 value={policy.default_state}
                 onChange={onChangeDefaultState}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
             <EuiSpacer size="s" />
             <EuiHorizontalRule margin="none" />
           </>
@@ -99,9 +99,9 @@ const States = ({
           (!!policy.states.length ? (
             <>
               <EuiSpacer />
-              <EuiButton onClick={onOpenFlyout} data-test-subj="states-add-state-button" size={useNewUx ? "s" : undefined}>
+              <EuiSmallButton onClick={onOpenFlyout} data-test-subj="states-add-state-button">
                 Add state
-              </EuiButton>
+              </EuiSmallButton>
             </>
           ) : (
             <EuiEmptyPrompt
@@ -109,14 +109,9 @@ const States = ({
               titleSize="s"
               body={<p>Your policy currently has no states defined. Add states to manage your index lifecycle.</p>}
               actions={
-                <EuiButton
-                  color="primary"
-                  onClick={onOpenFlyout}
-                  data-test-subj="states-add-state-button"
-                  size={useNewUx ? "s" : undefined}
-                >
+                <EuiSmallButton color="primary" onClick={onOpenFlyout} data-test-subj="states-add-state-button">
                   Add state
-                </EuiButton>
+                </EuiSmallButton>
               }
             />
           ))}
diff --git a/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap b/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap
index aeade8c53..b28d1308b 100644
--- a/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/States/__snapshots__/State.test.tsx.snap
@@ -118,7 +118,7 @@ exports[`<State /> spec renders the component 1`] = `
           >
             <button
               aria-label="Delete"
-              class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+              class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
               data-test-subj="state-delete-button"
               type="button"
             >
@@ -134,7 +134,7 @@ exports[`<State /> spec renders the component 1`] = `
           >
             <button
               aria-label="Edit"
-              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+              class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
               type="button"
             >
               EuiIconMock
diff --git a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
index 5da85d714..6e0e652bc 100644
--- a/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/States/__snapshots__/States.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`<States /> spec renders the component 1`] = `
       style="padding: 0px 10px;"
     >
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
         style="max-width: 300px; padding: 15px;"
       >
@@ -242,7 +242,7 @@ exports[`<States /> spec renders the component 1`] = `
                     >
                       <button
                         aria-label="Delete"
-                        class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                        class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                         data-test-subj="state-delete-button"
                         type="button"
                       >
@@ -258,7 +258,7 @@ exports[`<States /> spec renders the component 1`] = `
                     >
                       <button
                         aria-label="Edit"
-                        class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                        class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                         type="button"
                       >
                         EuiIconMock
@@ -445,7 +445,7 @@ exports[`<States /> spec renders the component 1`] = `
                     >
                       <button
                         aria-label="Delete"
-                        class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                        class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                         data-test-subj="state-delete-button"
                         type="button"
                       >
@@ -461,7 +461,7 @@ exports[`<States /> spec renders the component 1`] = `
                     >
                       <button
                         aria-label="Edit"
-                        class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                        class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
                         type="button"
                       >
                         EuiIconMock
@@ -547,7 +547,7 @@ exports[`<States /> spec renders the component 1`] = `
         class="euiSpacer euiSpacer--l"
       />
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         data-test-subj="states-add-state-button"
         type="button"
       >
diff --git a/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/TimeoutRetrySettings.tsx b/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/TimeoutRetrySettings.tsx
index 7a5c24021..4e26e1844 100644
--- a/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/TimeoutRetrySettings.tsx
+++ b/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/TimeoutRetrySettings.tsx
@@ -4,7 +4,16 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiAccordion, EuiText, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldNumber, EuiFieldText, EuiSelect } from "@elastic/eui";
+import {
+  EuiAccordion,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiCompressedFormRow,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
+  EuiCompressedSelect,
+} from "@elastic/eui";
 import "brace/theme/github";
 import "brace/mode/json";
 import { Action, UIAction } from "../../../../../models/interfaces";
@@ -36,10 +45,10 @@ const TimeoutRetrySettings = ({ action, editAction, onChangeAction }: TimeoutRet
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFormCustomLabel title="Timeout" helpText={`The timeout period for the action. Accepts time units, e.g. "5h" or "1d".`} />
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <EuiFieldText
+              <EuiCompressedFieldText
                 isInvalid={false}
                 fullWidth
                 value={action.action.timeout || ""}
@@ -50,17 +59,17 @@ const TimeoutRetrySettings = ({ action, editAction, onChangeAction }: TimeoutRet
               />
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFormCustomLabel
           title="Retry count"
           helpText="The number of times the action should be retried if it fails. Must be greater than 0."
         />
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <EuiFieldNumber
+              <EuiCompressedFieldNumber
                 isInvalid={false}
                 fullWidth
                 min={0}
@@ -74,12 +83,12 @@ const TimeoutRetrySettings = ({ action, editAction, onChangeAction }: TimeoutRet
               />
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFormCustomLabel title="Retry backoff" helpText="The backoff policy type to use when retrying." />
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
-          <EuiSelect
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+          <EuiCompressedSelect
             id="retry-backoff-type"
             fullWidth
             options={options}
@@ -89,14 +98,14 @@ const TimeoutRetrySettings = ({ action, editAction, onChangeAction }: TimeoutRet
               onChangeAction(action.clone({ ...action.action, retry: { ...action.action.retry, backoff } }));
             }}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiFormCustomLabel title="Retry delay" helpText={`The time to wait between retries. Accepts time units, e.g. "2h" or "1d"`} />
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
           <EuiFlexGroup>
             <EuiFlexItem>
-              <EuiFieldText
+              <EuiCompressedFieldText
                 isInvalid={false}
                 fullWidth
                 value={action.action.retry?.delay || ""}
@@ -107,7 +116,7 @@ const TimeoutRetrySettings = ({ action, editAction, onChangeAction }: TimeoutRet
               />
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiAccordion>
diff --git a/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap b/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap
index 88d269e2a..27d51c080 100644
--- a/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/TimeoutRetrySettings/__snapshots__/TimeoutRetrySettings.test.tsx.snap
@@ -80,7 +80,7 @@ exports[`<TimeoutRetrySettings /> spec renders the component 1`] = `
               </p>
             </div>
             <div
-              class="euiFormRow euiFormRow--fullWidth"
+              class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -94,13 +94,13 @@ exports[`<TimeoutRetrySettings /> spec renders the component 1`] = `
                     class="euiFlexItem"
                   >
                     <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"
                           type="text"
                           value=""
                         />
@@ -135,7 +135,7 @@ exports[`<TimeoutRetrySettings /> spec renders the component 1`] = `
               </p>
             </div>
             <div
-              class="euiFormRow euiFormRow--fullWidth"
+              class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -149,13 +149,13 @@ exports[`<TimeoutRetrySettings /> spec renders the component 1`] = `
                     class="euiFlexItem"
                   >
                     <div
-                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                      class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldNumber euiFieldNumber--fullWidth"
+                          class="euiFieldNumber euiFieldNumber--fullWidth euiFieldNumber--compressed"
                           min="0"
                           type="number"
                           value=""
@@ -191,20 +191,20 @@ exports[`<TimeoutRetrySettings /> spec renders the component 1`] = `
               </p>
             </div>
             <div
-              class="euiFormRow euiFormRow--fullWidth"
+              class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
                 class="euiFormRow__fieldWrapper"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                 >
                   <div
                     class="euiFormControlLayout__childrenWrapper"
                   >
                     <select
-                      class="euiSelect euiSelect--fullWidth"
+                      class="euiSelect euiSelect--fullWidth euiSelect--compressed"
                       id="some_html_id"
                     >
                       <option
@@ -261,7 +261,7 @@ exports[`<TimeoutRetrySettings /> spec renders the component 1`] = `
               </p>
             </div>
             <div
-              class="euiFormRow euiFormRow--fullWidth"
+              class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
               id="some_html_id-row"
             >
               <div
@@ -275,13 +275,13 @@ exports[`<TimeoutRetrySettings /> spec renders the component 1`] = `
                     class="euiFlexItem"
                   >
                     <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"
                           type="text"
                           value=""
                         />
diff --git a/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx b/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx
index e2e878cc9..1e5367395 100644
--- a/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx
+++ b/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx
@@ -4,7 +4,15 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiLink, EuiIcon, EuiFormRow, EuiSelect, EuiSpacer, EuiFieldText, EuiFieldNumber } from "@elastic/eui";
+import {
+  EuiLink,
+  EuiIcon,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
+  EuiSpacer,
+  EuiCompressedFieldText,
+  EuiCompressedFieldNumber,
+} from "@elastic/eui";
 import moment from "moment-timezone";
 import EuiFormCustomLabel from "../EuiFormCustomLabel";
 import { UITransition } from "../../../../../models/interfaces";
@@ -34,9 +42,8 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
   return (
     <>
       <EuiFormCustomLabel title="Condition" helpText="Specify the condition needed to be met to transition to the destination state." />
-      <EuiFormRow fullWidth isInvalid={false} error={null}>
-        <EuiSelect
-          compressed={useNewUx}
+      <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+        <EuiCompressedSelect
           fullWidth
           id="condition-type"
           options={conditionTypeOptions}
@@ -59,15 +66,15 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
           }}
           data-test-subj="create-state-action-type"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
 
       <EuiSpacer />
 
       {conditionType === "min_index_age" && (
         <>
           <EuiFormCustomLabel title="Minimum index age" helpText="The minimum age required to transition to the next state." />
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiFieldText
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedFieldText
               fullWidth
               value={conditions?.min_index_age}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -84,7 +91,7 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
               }}
               data-test-subj="transition-render-conditions-min-index-age"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
 
@@ -94,8 +101,8 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
             title="Minimum doc count"
             helpText="The minimum number of documents required to transition to the next state."
           />
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiFieldNumber
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedFieldNumber
               fullWidth
               value={typeof conditions?.min_doc_count === "undefined" ? "" : conditions?.min_doc_count}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -114,7 +121,7 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
               }}
               data-test-subj="transition-render-conditions-min-doc-count"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
 
@@ -124,8 +131,8 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
             title="Minimum index size"
             helpText="The minimum size of the total primary shard storage required to transition to the next state."
           />
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiFieldText
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedFieldText
               fullWidth
               value={conditions?.min_size}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -142,7 +149,7 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
               }}
               data-test-subj="transition-render-conditions-min-size"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
 
@@ -152,8 +159,8 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
             title="Minimum rollover age"
             helpText="The minimum age after a rollover has occurred that is required to transition to the next state."
           />
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiFieldText
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedFieldText
               fullWidth
               value={conditions?.min_rollover_age}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -170,7 +177,7 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
               }}
               data-test-subj="transition-render-conditions-min-rollover-age"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
 
@@ -185,8 +192,8 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
               </EuiLink>
             }
           />
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiFieldText
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedFieldText
               fullWidth
               value={conditions?.cron?.cron.expression}
               onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -208,13 +215,13 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
               }}
               data-test-subj="transition-render-conditions-min-size"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer />
 
           <EuiFormCustomLabel title="Timezone" helpText="A day starts from 00:00:00 in the specified timezone." />
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiSelect
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedSelect
               fullWidth
               id="timezone"
               options={timezones}
@@ -237,7 +244,7 @@ const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionPr
                 });
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
     </>
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/AliasUIActionComponent.tsx b/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/AliasUIActionComponent.tsx
index 11bfde084..8eeef7655 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/AliasUIActionComponent.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/AliasUIActionComponent.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from "react";
-import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow, EuiSpacer, EuiSwitch } from "@elastic/eui";
+import { EuiCompressedComboBox, EuiComboBoxOptionOption, EuiCompressedFormRow, EuiSpacer, EuiCompressedSwitch } from "@elastic/eui";
 import { AliasAction, AliasActionItem, AliasActions, UIAction } from "../../../../../../models/interfaces";
 import AliasUIAction, { MAX_ALIAS_ACTIONS } from "./AliasUIAction";
 import { inputLimitText } from "../../../../CreatePolicy/utils/helpers";
@@ -83,7 +83,7 @@ export default class AliasUIActionComponent extends Component<AliasUIActionCompo
     const { addAliasToggle, removeAliasToggle } = this.state;
     return (
       <>
-        <EuiSwitch
+        <EuiCompressedSwitch
           label={"Add aliases"}
           checked={addAliasToggle}
           onChange={(e) => {
@@ -96,7 +96,7 @@ export default class AliasUIActionComponent extends Component<AliasUIActionCompo
         {addAliasToggle && (
           <>
             <EuiSpacer size={"m"} />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label={"Select aliases to add to indexes"}
               fullWidth
               style={{ maxWidth: "100%" }}
@@ -105,7 +105,7 @@ export default class AliasUIActionComponent extends Component<AliasUIActionCompo
               data-test-subj={"add-alias-row"}
             >
               <>
-                <EuiComboBox
+                <EuiCompressedComboBox
                   placeholder={"Enter aliases to add"}
                   noSuggestions={true}
                   selectedOptions={selectedItems.add || []}
@@ -120,13 +120,13 @@ export default class AliasUIActionComponent extends Component<AliasUIActionCompo
                 />
                 {inputLimitText(selectedItems.add?.length, MAX_ALIAS_ACTIONS, "alias", "aliases")}
               </>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </>
         )}
 
         <EuiSpacer size={"l"} />
 
-        <EuiSwitch
+        <EuiCompressedSwitch
           label={"Remove aliases"}
           checked={removeAliasToggle}
           onChange={(e) => {
@@ -139,7 +139,7 @@ export default class AliasUIActionComponent extends Component<AliasUIActionCompo
         {removeAliasToggle && (
           <>
             <EuiSpacer size={"m"} />
-            <EuiFormRow
+            <EuiCompressedFormRow
               label={"Select aliases to remove from indexes"}
               fullWidth
               style={{ maxWidth: "100%" }}
@@ -148,7 +148,7 @@ export default class AliasUIActionComponent extends Component<AliasUIActionCompo
               data-test-subj={"remove-alias-row"}
             >
               <>
-                <EuiComboBox
+                <EuiCompressedComboBox
                   placeholder={"Enter aliases to remove"}
                   noSuggestions={true}
                   selectedOptions={selectedItems.remove || []}
@@ -163,7 +163,7 @@ export default class AliasUIActionComponent extends Component<AliasUIActionCompo
                 />
                 {inputLimitText(selectedItems.remove?.length, MAX_ALIAS_ACTIONS, "alias", "aliases")}
               </>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </>
         )}
       </>
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/__snapshots__/AliasUIAction.test.tsx.snap b/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/__snapshots__/AliasUIAction.test.tsx.snap
index ee5d567d9..c31f35f40 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/__snapshots__/AliasUIAction.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/UIActions/AliasUIAction/__snapshots__/AliasUIAction.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AliasUIAction component renders with blank action 1`] = `
 <div>
   <div
-    class="euiSwitch euiSwitch--primary"
+    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
   >
     <button
       aria-checked="true"
@@ -22,10 +22,7 @@ exports[`AliasUIAction component renders with blank action 1`] = `
         />
         <span
           class="euiSwitch__track"
-        >
-          EuiIconMock
-          EuiIconMock
-        </span>
+        />
       </span>
     </button>
     <span
@@ -39,7 +36,7 @@ exports[`AliasUIAction component renders with blank action 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     data-test-subj="add-alias-row"
     id="some_html_id-row"
     style="max-width: 100%;"
@@ -61,18 +58,18 @@ exports[`AliasUIAction component renders with blank action 1`] = `
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         data-test-subj="add-alias-combo-box"
         role="combobox"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
@@ -115,7 +112,7 @@ exports[`AliasUIAction component renders with blank action 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <div
-    class="euiSwitch euiSwitch--primary"
+    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
   >
     <button
       aria-checked="true"
@@ -134,10 +131,7 @@ exports[`AliasUIAction component renders with blank action 1`] = `
         />
         <span
           class="euiSwitch__track"
-        >
-          EuiIconMock
-          EuiIconMock
-        </span>
+        />
       </span>
     </button>
     <span
@@ -151,7 +145,7 @@ exports[`AliasUIAction component renders with blank action 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     data-test-subj="remove-alias-row"
     id="some_html_id-row"
     style="max-width: 100%;"
@@ -173,18 +167,18 @@ exports[`AliasUIAction component renders with blank action 1`] = `
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         data-test-subj="remove-alias-combo-box"
         role="combobox"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
@@ -229,7 +223,7 @@ exports[`AliasUIAction component renders with blank action 1`] = `
 exports[`AliasUIAction component renders with pre-defined actions 1`] = `
 <div>
   <div
-    class="euiSwitch euiSwitch--primary"
+    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
   >
     <button
       aria-checked="true"
@@ -248,10 +242,7 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
         />
         <span
           class="euiSwitch__track"
-        >
-          EuiIconMock
-          EuiIconMock
-        </span>
+        />
       </span>
     </button>
     <span
@@ -265,7 +256,7 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     data-test-subj="add-alias-row"
     id="some_html_id-row"
     style="max-width: 100%;"
@@ -287,18 +278,18 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         data-test-subj="add-alias-combo-box"
         role="combobox"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
@@ -433,7 +424,7 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
             >
               <button
                 aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
+                class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                 data-test-subj="comboBoxClearButton"
                 type="button"
               >
@@ -458,7 +449,7 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <div
-    class="euiSwitch euiSwitch--primary"
+    class="euiSwitch euiSwitch--primary euiSwitch--compressed"
   >
     <button
       aria-checked="true"
@@ -477,10 +468,7 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
         />
         <span
           class="euiSwitch__track"
-        >
-          EuiIconMock
-          EuiIconMock
-        </span>
+        />
       </span>
     </button>
     <span
@@ -494,7 +482,7 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
     class="euiSpacer euiSpacer--m"
   />
   <div
-    class="euiFormRow euiFormRow--fullWidth"
+    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
     data-test-subj="remove-alias-row"
     id="some_html_id-row"
     style="max-width: 100%;"
@@ -516,18 +504,18 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
       <div
         aria-expanded="false"
         aria-haspopup="listbox"
-        class="euiComboBox"
+        class="euiComboBox euiComboBox--compressed"
         data-test-subj="remove-alias-combo-box"
         role="combobox"
       >
         <div
-          class="euiFormControlLayout"
+          class="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
@@ -640,7 +628,7 @@ exports[`AliasUIAction component renders with pre-defined actions 1`] = `
             >
               <button
                 aria-label="Clear input"
-                class="euiFormControlLayoutClearButton"
+                class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                 data-test-subj="comboBoxClearButton"
                 type="button"
               >
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/AllocationUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/AllocationUIAction.tsx
index cf0aaa090..b90689d78 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/AllocationUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/AllocationUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiFormRow, EuiCodeEditor } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCodeEditor } from "@elastic/eui";
 import { AllocationAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
 import { ActionType } from "../../utils/constants";
@@ -45,7 +45,7 @@ export default class AllocationUIAction implements UIAction<AllocationAction> {
 
   render = (action: UIAction<AllocationAction>, onChangeAction: (action: UIAction<AllocationAction>) => void) => {
     return (
-      <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null} style={{ maxWidth: "100%" }}>
+      <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null} style={{ maxWidth: "100%" }}>
         <DarkModeConsumer>
           {(isDarkMode) => (
             <EuiCodeEditor
@@ -66,7 +66,7 @@ export default class AllocationUIAction implements UIAction<AllocationAction> {
             />
           )}
         </DarkModeConsumer>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   };
 
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/ForceMergeUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/ForceMergeUIAction.tsx
index c93bec95a..7aad7a765 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/ForceMergeUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/ForceMergeUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiFormRow, EuiFieldNumber } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedFieldNumber } from "@elastic/eui";
 import EuiFormCustomLabel from "../EuiFormCustomLabel";
 import { ForceMergeAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
@@ -34,8 +34,8 @@ export default class ForceMergeUIAction implements UIAction<ForceMergeAction> {
     return (
       <>
         <EuiFormCustomLabel title="Max num segments" helpText="The number of segments to merge to." isInvalid={!this.isValid()} />
-        <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null}>
-          <EuiFieldNumber
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null}>
+          <EuiCompressedFieldNumber
             fullWidth
             value={typeof segments === "undefined" ? "" : segments}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -46,7 +46,7 @@ export default class ForceMergeUIAction implements UIAction<ForceMergeAction> {
             }}
             data-test-subj="action-render-force-merge"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/IndexPriorityUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/IndexPriorityUIAction.tsx
index bd4f6a510..2e4ec308b 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/IndexPriorityUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/IndexPriorityUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiFormRow, EuiFieldNumber } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedFieldNumber } from "@elastic/eui";
 import EuiFormCustomLabel from "../EuiFormCustomLabel";
 import { IndexPriorityAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
@@ -38,8 +38,8 @@ export default class IndexPriorityUIAction implements UIAction<IndexPriorityActi
           helpText="Higher priority indices are recovered first when possible."
           isInvalid={!this.isValid()}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null}>
-          <EuiFieldNumber
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null}>
+          <EuiCompressedFieldNumber
             fullWidth
             value={typeof priority === "undefined" ? "" : priority}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -50,7 +50,7 @@ export default class IndexPriorityUIAction implements UIAction<IndexPriorityActi
             }}
             data-test-subj="action-render-index-priority"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/ReplicaCountUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/ReplicaCountUIAction.tsx
index ffae3e3c8..5d7a408f9 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/ReplicaCountUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/ReplicaCountUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiFormRow, EuiFieldNumber } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedFieldNumber } from "@elastic/eui";
 import { ReplicaCountAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
 import { ActionType } from "../../utils/constants";
@@ -38,8 +38,8 @@ export default class ReplicaCountUIAction implements UIAction<ReplicaCountAction
           helpText="The number of replicas to set for the index."
           isInvalid={!this.isValid()}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null}>
-          <EuiFieldNumber
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null}>
+          <EuiCompressedFieldNumber
             fullWidth
             value={typeof replicas === "undefined" ? "" : replicas}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -50,7 +50,7 @@ export default class ReplicaCountUIAction implements UIAction<ReplicaCountAction
             }}
             data-test-subj="action-render-replica-count"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/RolloverUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/RolloverUIAction.tsx
index bd07351b5..d4d0e64a6 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/RolloverUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/RolloverUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiFormRow, EuiFieldNumber, EuiFieldText, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedFieldNumber, EuiCompressedFieldText, EuiSpacer } from "@elastic/eui";
 import { RolloverAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
 import { ActionType } from "../../utils/constants";
@@ -47,8 +47,8 @@ export default class RolloverUIAction implements UIAction<RolloverAction> {
           helpText={`The minimum age required to roll over the index. Accepts time units, e.g. "5h" or "1d".`}
           isInvalid={!this.isValid()}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={rollover.min_index_age || ""}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -60,15 +60,15 @@ export default class RolloverUIAction implements UIAction<RolloverAction> {
             }}
             data-test-subj="action-render-rollover-min-index-age"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel
           title="Minimum doc count"
           helpText="The minimum number of documents required to roll over the index."
           isInvalid={!this.isValid()}
         />
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
-          <EuiFieldNumber
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+          <EuiCompressedFieldNumber
             fullWidth
             value={typeof rollover.min_doc_count === "undefined" ? "" : rollover.min_doc_count}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -80,15 +80,15 @@ export default class RolloverUIAction implements UIAction<RolloverAction> {
             }}
             data-test-subj="action-render-rollover-min-doc-count"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel
           title="Minimum index size"
           helpText={`The minimum size of the total primary shard storage required to roll over the index. Accepts byte units, e.g. "500mb" or "50gb".`}
           isInvalid={!this.isValid()}
         />
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={rollover.min_size || ""}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -100,15 +100,15 @@ export default class RolloverUIAction implements UIAction<RolloverAction> {
             }}
             data-test-subj="action-render-rollover-min-size"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel
           title="Minimum primary shard size"
           helpText={`The minimum size of a single primary shard required to roll over the index. Accepts byte units, e.g. "500mb" or "50gb".`}
           isInvalid={!this.isValid()}
         />
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={rollover.min_primary_shard_size || ""}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -120,7 +120,7 @@ export default class RolloverUIAction implements UIAction<RolloverAction> {
             }}
             data-test-subj="action-render-rollover-min-primary-shard-size"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/RollupUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/RollupUIAction.tsx
index 8be933fed..1afb6f4e9 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/RollupUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/RollupUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiFormRow, EuiCodeEditor } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCodeEditor } from "@elastic/eui";
 import { RollupAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
 import { DarkModeConsumer } from "../../../../components/DarkMode";
@@ -46,7 +46,7 @@ export default class RollupUIAction implements UIAction<RollupAction> {
   render = (action: UIAction<RollupAction>, onChangeAction: (action: UIAction<RollupAction>) => void) => {
     // If we don't have a JSON string yet it just means we haven't converted the rollup to it yet
     return (
-      <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null} style={{ maxWidth: "100%" }}>
+      <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null} style={{ maxWidth: "100%" }}>
         <DarkModeConsumer>
           {(isDarkMode) => (
             <EuiCodeEditor
@@ -67,7 +67,7 @@ export default class RollupUIAction implements UIAction<RollupAction> {
             />
           )}
         </DarkModeConsumer>
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   };
 
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/ShrinkUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/ShrinkUIAction.tsx
index 226abd339..b72c52064 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/ShrinkUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/ShrinkUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiFormRow, EuiCodeEditor, EuiFieldText, EuiSpacer, EuiRadioGroup, EuiCallOut } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCodeEditor, EuiCompressedFieldText, EuiSpacer, EuiCompressedRadioGroup, EuiCallOut } from "@elastic/eui";
 import { ShrinkAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
 import { ActionType } from "../../utils/constants";
@@ -109,8 +109,8 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
           }
           isInvalid={!this.isValidNumShards()}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValidNumShards()} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValidNumShards()} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={typeof shrink.num_new_shards === "undefined" ? "" : shrink.num_new_shards}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -122,7 +122,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
             }}
             data-test-subj="action-render-shrink-num-new-shards"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel
           title="Maximum shard size"
@@ -133,8 +133,8 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
           }
           isInvalid={!this.isValidNumShards()}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValidNumShards()} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValidNumShards()} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={shrink.max_shard_size || ""}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -146,7 +146,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
             }}
             data-test-subj="action-render-shrink-max-shard-size"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel
           title="Percentage of source shards"
@@ -157,8 +157,8 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
           }
           isInvalid={!this.isValidNumShards()}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValidNumShards()} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValidNumShards()} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={typeof shrink.percentage_of_source_shards === "undefined" ? "" : shrink.percentage_of_source_shards}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -170,7 +170,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
             }}
             data-test-subj="action-render-shrink-percentage-of-source-shards"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel
           title="Target Index Name Template"
@@ -179,7 +179,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
           isInvalid={!this.isValidIndexNameTemplateJson()}
           isOptional={true}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValidIndexNameTemplateJson()} error={null} style={{ maxWidth: "100%" }}>
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValidIndexNameTemplateJson()} error={null} style={{ maxWidth: "100%" }}>
           <DarkModeConsumer>
             {(isDarkMode) => (
               <EuiCodeEditor
@@ -200,7 +200,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
               />
             )}
           </DarkModeConsumer>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiCallOut color="warning" hidden={!this.action.shrink.force_unsafe}>
           <p>
@@ -213,8 +213,8 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
           helpText={`If this is set to 'No' then the shrink action will fail for indices which do not have replica shards.`}
           isInvalid={false}
         />
-        <EuiFormRow fullWidth isInvalid={false} error={null} style={{ maxWidth: "100%" }}>
-          <EuiRadioGroup
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null} style={{ maxWidth: "100%" }}>
+          <EuiCompressedRadioGroup
             options={radios}
             idSelected={this.action.force_unsafe_input}
             onChange={(id) => {
@@ -231,7 +231,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
             }}
             name="forceUnsafe"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel
           title="Aliases"
@@ -239,7 +239,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
           isInvalid={!this.isValidAliasesJson()}
           isOptional={true}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValidAliasesJson()} error={null} style={{ maxWidth: "100%" }}>
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValidAliasesJson()} error={null} style={{ maxWidth: "100%" }}>
           <DarkModeConsumer>
             {(isDarkMode) => (
               <EuiCodeEditor
@@ -261,7 +261,7 @@ export default class ShrinkUIAction implements UIAction<ShrinkAction> {
               />
             )}
           </DarkModeConsumer>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
diff --git a/public/pages/VisualCreatePolicy/components/UIActions/SnapshotUIAction.tsx b/public/pages/VisualCreatePolicy/components/UIActions/SnapshotUIAction.tsx
index 40e30fa64..ec6602790 100644
--- a/public/pages/VisualCreatePolicy/components/UIActions/SnapshotUIAction.tsx
+++ b/public/pages/VisualCreatePolicy/components/UIActions/SnapshotUIAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent } from "react";
-import { EuiFormRow, EuiFieldText, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedFormRow, EuiCompressedFieldText, EuiSpacer } from "@elastic/eui";
 import { SnapshotAction, UIAction } from "../../../../../models/interfaces";
 import { makeId } from "../../../../utils/helpers";
 import { ActionType } from "../../utils/constants";
@@ -36,8 +36,8 @@ export default class SnapshotUIAction implements UIAction<SnapshotAction> {
           helpText="The repository name that you register through the native snapshot API operations."
           isInvalid={!this.isValid()}
         />
-        <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={(action.action as SnapshotAction).snapshot.repository}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -53,11 +53,11 @@ export default class SnapshotUIAction implements UIAction<SnapshotAction> {
             }}
             data-test-subj="action-render-snapshot-repository"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer size="s" />
         <EuiFormCustomLabel title="Snapshot" helpText="The name of the snapshot." isInvalid={!this.isValid()} />
-        <EuiFormRow fullWidth isInvalid={!this.isValid()} error={null}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth isInvalid={!this.isValid()} error={null}>
+          <EuiCompressedFieldText
             fullWidth
             value={(action.action as SnapshotAction).snapshot.snapshot}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
@@ -73,7 +73,7 @@ export default class SnapshotUIAction implements UIAction<SnapshotAction> {
             }}
             data-test-subj="action-render-snapshot-snapshot"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
diff --git a/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx b/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx
index 36ba9e4e1..af3244981 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Component, ChangeEvent } from "react";
-import { EuiText, EuiLink, EuiFlyoutBody, EuiFlyoutFooter, EuiTitle, EuiFormRow, EuiSelect, EuiSpacer } from "@elastic/eui";
+import { EuiText, EuiLink, EuiFlyoutBody, EuiFlyoutFooter, EuiTitle, EuiCompressedFormRow, EuiCompressedSelect, EuiSpacer } from "@elastic/eui";
 import { UIAction, Action } from "../../../../../models/interfaces";
 import TimeoutRetrySettings from "../../components/TimeoutRetrySettings";
 import { actionRepoSingleton, getActionOptions } from "../../utils/helpers";
@@ -78,9 +78,8 @@ export default class CreateAction extends Component<CreateActionProps, CreateAct
           <EuiSpacer />
 
           <EuiFormCustomLabel title="Action type" helpText="Select the action you want to add to this state." />
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiSelect
-              compressed={useNewUx}
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedSelect
               fullWidth
               placeholder="Select action type"
               id="action-type"
@@ -92,7 +91,7 @@ export default class CreateAction extends Component<CreateActionProps, CreateAct
               onChange={this.onChangeSelectedAction}
               data-test-subj="create-state-action-type"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer />
 
diff --git a/public/pages/VisualCreatePolicy/containers/CreateAction/__snapshots__/CreateAction.test.tsx.snap b/public/pages/VisualCreatePolicy/containers/CreateAction/__snapshots__/CreateAction.test.tsx.snap
index 2af3ddd18..9a99d43e4 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateAction/__snapshots__/CreateAction.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/containers/CreateAction/__snapshots__/CreateAction.test.tsx.snap
@@ -61,20 +61,20 @@ exports[`<CreateAction /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <select
-                class="euiSelect euiSelect--fullWidth"
+                class="euiSelect euiSelect--fullWidth euiSelect--compressed"
                 data-test-subj="create-state-action-type"
                 id="some_html_id"
                 placeholder="Select action type"
@@ -201,20 +201,20 @@ exports[`<CreateAction /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           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"
                 data-test-subj="action-render-rollover-min-index-age"
                 id="some_html_id"
                 type="text"
@@ -248,20 +248,20 @@ exports[`<CreateAction /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <input
-                class="euiFieldNumber euiFieldNumber--fullWidth"
+                class="euiFieldNumber euiFieldNumber--fullWidth euiFieldNumber--compressed"
                 data-test-subj="action-render-rollover-min-doc-count"
                 id="some_html_id"
                 type="number"
@@ -295,20 +295,20 @@ exports[`<CreateAction /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           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"
                 data-test-subj="action-render-rollover-min-size"
                 id="some_html_id"
                 type="text"
@@ -342,20 +342,20 @@ exports[`<CreateAction /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           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"
                 data-test-subj="action-render-rollover-min-primary-shard-size"
                 id="some_html_id"
                 type="text"
@@ -447,7 +447,7 @@ exports[`<CreateAction /> spec renders the component 1`] = `
                     </p>
                   </div>
                   <div
-                    class="euiFormRow euiFormRow--fullWidth"
+                    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                     id="some_html_id-row"
                   >
                     <div
@@ -461,13 +461,13 @@ exports[`<CreateAction /> spec renders the component 1`] = `
                           class="euiFlexItem"
                         >
                           <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"
                                 type="text"
                                 value=""
                               />
@@ -502,7 +502,7 @@ exports[`<CreateAction /> spec renders the component 1`] = `
                     </p>
                   </div>
                   <div
-                    class="euiFormRow euiFormRow--fullWidth"
+                    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                     id="some_html_id-row"
                   >
                     <div
@@ -516,13 +516,13 @@ exports[`<CreateAction /> spec renders the component 1`] = `
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <input
-                                class="euiFieldNumber euiFieldNumber--fullWidth"
+                                class="euiFieldNumber euiFieldNumber--fullWidth euiFieldNumber--compressed"
                                 min="0"
                                 type="number"
                                 value=""
@@ -558,20 +558,20 @@ exports[`<CreateAction /> spec renders the component 1`] = `
                     </p>
                   </div>
                   <div
-                    class="euiFormRow euiFormRow--fullWidth"
+                    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                     id="some_html_id-row"
                   >
                     <div
                       class="euiFormRow__fieldWrapper"
                     >
                       <div
-                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                       >
                         <div
                           class="euiFormControlLayout__childrenWrapper"
                         >
                           <select
-                            class="euiSelect euiSelect--fullWidth"
+                            class="euiSelect euiSelect--fullWidth euiSelect--compressed"
                             id="some_html_id"
                           >
                             <option
@@ -628,7 +628,7 @@ exports[`<CreateAction /> spec renders the component 1`] = `
                     </p>
                   </div>
                   <div
-                    class="euiFormRow euiFormRow--fullWidth"
+                    class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                     id="some_html_id-row"
                   >
                     <div
@@ -642,13 +642,13 @@ exports[`<CreateAction /> spec renders the component 1`] = `
                           class="euiFlexItem"
                         >
                           <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"
                                 type="text"
                                 value=""
                               />
diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx
index f17233237..3c6bbebbf 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiFormRow, EuiDragDropContext, EuiDroppable, EuiSpacer, EuiText, DropResult } from "@elastic/eui";
+import { EuiSmallButton, EuiCompressedFormRow, EuiDragDropContext, EuiDroppable, EuiSpacer, EuiText, DropResult } from "@elastic/eui";
 import DraggableItem from "../../components/DraggableItem";
 import EuiFormCustomLabel from "../../components/EuiFormCustomLabel";
 import { Action, UIAction } from "../../../../../models/interfaces";
@@ -24,7 +24,7 @@ const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndAct
       <EuiFormCustomLabel title="Actions" helpText="Actions are the operations ISM performs when an index is in a certain state." />
 
       {!!actions.length && (
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
           <EuiDragDropContext onDragEnd={onDragEndActions}>
             <EuiDroppable droppableId="STATE_ACTIONS_DROPPABLE_AREA">
               {actions.map((action, idx) => (
@@ -41,7 +41,7 @@ const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndAct
               ))}
             </EuiDroppable>
           </EuiDragDropContext>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
 
       <EuiSpacer size="s" />
@@ -56,9 +56,7 @@ const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndAct
 
       <EuiSpacer />
 
-      <EuiButton onClick={onClickAddAction} size={useNewUx ? "s" : undefined}>
-        + Add action
-      </EuiButton>
+      <EuiSmallButton onClick={onClickAddAction}>+ Add action</EuiSmallButton>
     </>
   );
 };
diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx
index 9b3594c89..a0a1235b2 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx
@@ -12,14 +12,14 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButtonEmpty,
-  EuiButton,
-  EuiFormRow,
-  EuiFieldText,
+  EuiSmallButtonEmpty,
+  EuiSmallButton,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
   EuiHorizontalRule,
   euiDragDropReorder,
   DropResult,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
   EuiPortal,
@@ -202,9 +202,8 @@ export default class CreateState extends Component<CreateStateProps, CreateState
           <span /> {/* Dummy span to get rid of last child styling on h5 */}
         </EuiText>
 
-        <EuiFormRow fullWidth isInvalid={!!nameError} error={nameError}>
-          <EuiFieldText
-            compressed={useNewUx}
+        <EuiCompressedFormRow fullWidth isInvalid={!!nameError} error={nameError}>
+          <EuiCompressedFieldText
             fullWidth
             isInvalid={!!nameError}
             placeholder="sample_hot_state"
@@ -213,7 +212,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
             onChange={this.onChangeStateName}
             data-test-subj="create-state-state-name"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
         <EuiSpacer />
 
@@ -224,9 +223,8 @@ export default class CreateState extends Component<CreateStateProps, CreateState
 
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiFormRow>
-              <EuiSelect
-                compressed={useNewUx}
+            <EuiCompressedFormRow>
+              <EuiCompressedSelect
                 disabled={disableOrderSelections}
                 options={[
                   { value: "after", text: "Add after" },
@@ -236,19 +234,18 @@ export default class CreateState extends Component<CreateStateProps, CreateState
                 onChange={(e) => this.setState({ order: e.target.value })}
                 aria-label="Retry failed policy from"
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFormRow>
-              <EuiSelect
-                compressed={useNewUx}
+            <EuiCompressedFormRow>
+              <EuiCompressedSelect
                 disabled={disableOrderSelections}
                 options={stateOptions}
                 value={afterBeforeState}
                 onChange={(e) => this.setState({ afterBeforeState: e.target.value })}
                 aria-label="Retry failed policy from"
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
 
@@ -284,14 +281,14 @@ export default class CreateState extends Component<CreateStateProps, CreateState
     return (
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty size={useNewUx ? "s" : undefined} iconType="cross" onClick={onCloseFlyout} flush="left">
+          <EuiSmallButtonEmpty iconType="cross" onClick={onCloseFlyout} flush="left">
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton size={useNewUx ? "s" : undefined} fill disabled={!name.trim().length || !!nameError} onClick={this.onClickSaveState}>
+          <EuiSmallButton fill disabled={!name.trim().length || !!nameError} onClick={this.onClickSaveState}>
             {isEditing ? "Update state" : "Save state"}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx
index d8700a733..6a5c805e9 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react";
-import { EuiButton, EuiFormRow, EuiDragDropContext, EuiDroppable, EuiSpacer, EuiText, DropResult } from "@elastic/eui";
+import { EuiSmallButton, EuiCompressedFormRow, EuiDragDropContext, EuiDroppable, EuiSpacer, EuiText, DropResult } from "@elastic/eui";
 import EuiFormCustomLabel from "../../components/EuiFormCustomLabel";
 import DraggableItem from "../../components/DraggableItem";
 import { UITransition } from "../../../../../models/interfaces";
@@ -34,7 +34,7 @@ const Transitions = ({
         helpText="Transitions define the conditions that need to be met for a state to change. After all actions in the current state are completed, the policy starts checking the conditions for transitions."
       />
       {!!transitions.length && (
-        <EuiFormRow fullWidth isInvalid={false} error={null}>
+        <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
           <EuiDragDropContext onDragEnd={onDragEndTransitions}>
             <EuiDroppable droppableId="STATE_TRANSITIONS_DROPPABLE_AREA">
               {transitions.map((transition, idx) => (
@@ -51,7 +51,7 @@ const Transitions = ({
               ))}
             </EuiDroppable>
           </EuiDragDropContext>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
 
       <EuiSpacer size="s" />
@@ -66,9 +66,7 @@ const Transitions = ({
 
       <EuiSpacer />
 
-      <EuiButton onClick={onClickAddTransition} size={useNewUx ? "s" : undefined}>
-        + Add Transition
-      </EuiButton>
+      <EuiSmallButton onClick={onClickAddTransition}>+ Add Transition</EuiSmallButton>
     </>
   );
 };
diff --git a/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx b/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx
index 542ba9635..09ebf2306 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx
@@ -4,7 +4,17 @@
  */
 
 import React, { Component } from "react";
-import { EuiText, EuiLink, EuiIcon, EuiFlyoutBody, EuiFlyoutFooter, EuiTitle, EuiFormRow, EuiSpacer, EuiComboBox } from "@elastic/eui";
+import {
+  EuiText,
+  EuiLink,
+  EuiIcon,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiTitle,
+  EuiCompressedFormRow,
+  EuiSpacer,
+  EuiCompressedComboBox,
+} from "@elastic/eui";
 import { Transition as ITransition, UITransition } from "../../../../../models/interfaces";
 import FlyoutFooter from "../../components/FlyoutFooter";
 import EuiFormCustomLabel from "../../components/EuiFormCustomLabel";
@@ -103,9 +113,8 @@ export default class CreateTransition extends Component<CreateTransitionProps, C
             helpText="If entering a state that does not exist yet then you must create it before creating the policy."
           />
 
-          <EuiFormRow fullWidth isInvalid={false} error={null}>
-            <EuiComboBox
-              compressed={useNewUx}
+          <EuiCompressedFormRow fullWidth isInvalid={false} error={null}>
+            <EuiCompressedComboBox
               fullWidth
               isClearable={false}
               placeholder="Select a single option"
@@ -116,7 +125,7 @@ export default class CreateTransition extends Component<CreateTransitionProps, C
               onCreateOption={this.onCreateOption}
               customOptionText="Add {searchValue} state"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer />
 
diff --git a/public/pages/VisualCreatePolicy/containers/CreateTransition/__snapshots__/CreateTransition.test.tsx.snap b/public/pages/VisualCreatePolicy/containers/CreateTransition/__snapshots__/CreateTransition.test.tsx.snap
index 834d09ad8..396ed43ba 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateTransition/__snapshots__/CreateTransition.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/containers/CreateTransition/__snapshots__/CreateTransition.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`<CreateTransition /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
@@ -70,17 +70,17 @@ exports[`<CreateTransition /> spec renders the component 1`] = `
           <div
             aria-expanded="false"
             aria-haspopup="listbox"
-            class="euiComboBox euiComboBox--fullWidth"
+            class="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
             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"
+                  class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
                   data-test-subj="comboBoxInput"
                   tabindex="-1"
                 >
@@ -147,20 +147,20 @@ exports[`<CreateTransition /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           class="euiFormRow__fieldWrapper"
         >
           <div
-            class="euiFormControlLayout euiFormControlLayout--fullWidth"
+            class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
           >
             <div
               class="euiFormControlLayout__childrenWrapper"
             >
               <select
-                class="euiSelect euiSelect--fullWidth"
+                class="euiSelect euiSelect--fullWidth euiSelect--compressed"
                 data-test-subj="create-state-action-type"
                 id="some_html_id"
                 style="text-transform: capitalize;"
@@ -233,20 +233,20 @@ exports[`<CreateTransition /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
           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"
                 data-test-subj="transition-render-conditions-min-index-age"
                 id="some_html_id"
                 type="text"
diff --git a/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap b/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
index 71c619239..1544d1b03 100644
--- a/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/containers/ErrorNotification/__snapshots__/ErrorNotification.test.tsx.snap
@@ -104,20 +104,20 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
           class="euiFlexItem"
         >
           <div
-            class="euiFormRow"
+            class="euiFormRow euiFormRow--compressed"
             id="some_html_id-row"
           >
             <div
               class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormControlLayout"
+                class="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
                 >
                   <select
-                    class="euiSelect euiSelect-isLoading"
+                    class="euiSelect euiSelect--compressed euiSelect-isLoading"
                     data-test-subj="create-policy-notification-channel-id"
                     id="some_html_id"
                     placeholder="Select channel ID"
@@ -152,7 +152,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButton euiButton--primary euiButton-isDisabled refresh-button"
+            class="euiButton euiButton--primary euiButton--small euiButton-isDisabled refresh-button"
             data-test-subj="channel-notification-refresh"
             disabled=""
             type="button"
@@ -171,7 +171,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <a
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             href="notifications-dashboards#/channels"
             rel="noopener noreferrer"
             target="_blank"
@@ -213,7 +213,7 @@ exports[`<ErrorNotification /> spec renders the component 1`] = `
         </p>
       </div>
       <div
-        class="euiFormRow"
+        class="euiFormRow euiFormRow--compressed"
         id="some_html_id-row"
       >
         <div
diff --git a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
index 8532b6a9f..c50d7fb55 100644
--- a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
+++ b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component, useContext } from "react";
-import { EuiText, EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiButton, EuiLink, EuiIcon } from "@elastic/eui";
+import { EuiText, EuiSpacer, EuiTitle, EuiFlexGroup, EuiFlexItem, EuiSmallButton, EuiLink, EuiIcon } from "@elastic/eui";
 import { RouteComponentProps } from "react-router-dom";
 import queryString from "query-string";
 import { EMPTY_DEFAULT_POLICY } from "../../utils/constants";
@@ -372,14 +372,12 @@ export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, Visua
 
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.onCancel} size={useNewUX ? "s" : undefined}>
-              Cancel
-            </EuiButton>
+            <EuiSmallButton onClick={this.onCancel}>Cancel</EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onSubmit} size={useNewUX ? "s" : undefined}>
+            <EuiSmallButton fill onClick={this.onSubmit}>
               {isEdit ? "Update" : "Create"}
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/temporary/EuiRefreshPicker.tsx b/public/temporary/EuiRefreshPicker.tsx
index 536f42df9..ee2173077 100644
--- a/public/temporary/EuiRefreshPicker.tsx
+++ b/public/temporary/EuiRefreshPicker.tsx
@@ -7,7 +7,7 @@
 // Used under the Apache-2.0 license.
 
 import React, { Component } from "react";
-import { EuiSuperDatePicker } from "@elastic/eui";
+import { EuiCompressedSuperDatePicker } from "@elastic/eui";
 import AsyncInterval from "./AsyncInterval";
 
 interface EuiRefreshPickerProps {
@@ -63,7 +63,7 @@ export default class EuiRefreshPicker extends Component<EuiRefreshPickerProps> {
 
   render() {
     return (
-      <EuiSuperDatePicker
+      <EuiCompressedSuperDatePicker
         isAutoRefreshOnly
         isPaused={this.props.isPaused}
         refreshInterval={this.props.refreshInterval}