From d54345816b88266d2ba25d242872c4efeadd018d Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Wed, 21 Aug 2024 15:25:49 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components (#2068) (#2080)

* Use EuiSmallButton



* Use EuiSmallButtonIcon



* Use EuiSmallButtonEmpty



* Use EuiCompressedFormRow



* Use EuiCompressedField*



* Use EuiCompressedSelect and EuiCompressedSuperSelect



* Use EuiCompressedFilePicker



* Use EuiCompressedRadio and EuiCompressedRadioGroup



* Use EuiCompressedSwitch



* Use EuiCompressedEuiTextArea



* Use EuiCompressedComboBox



* Use EuiSmallFilterButton



* Undo unnecessary EuiSmallButton* uses



* Use EuiCompressedSuperDatePicker



* Fix tests and snapshots



* Fix tests and snapshots



---------

cherry-picked 69d12cee1b0e43869d078e30cc996e9d685e44a9

Signed-off-by: Miki <miki@amazon.com>
---
 .../__snapshots__/create.test.tsx.snap        |  800 ++++----
 .../__snapshots__/log_config.test.tsx.snap    |  214 +-
 .../service_config.test.tsx.snap              |  112 +-
 .../__snapshots__/trace_config.test.tsx.snap  |   68 +-
 .../components/app_table.tsx                  |   16 +-
 .../config_components/log_config.tsx          |    6 +-
 .../config_components/service_config.tsx      |   10 +-
 .../config_components/trace_config.tsx        |   10 +-
 .../components/configuration.tsx              |   10 +-
 .../components/create.tsx                     |   30 +-
 .../availability_info_flyout.tsx              |    4 +-
 .../common/helpers/delete_modal.tsx           |   20 +-
 .../common/helpers/ppl_reference_flyout.tsx   |    8 +-
 .../live_tail_button.test.tsx.snap            |  349 ++--
 .../common/live_tail/live_tail_button.tsx     |   10 +-
 .../__snapshots__/search.test.tsx.snap        |  460 +++--
 .../components/common/search/autocomplete.tsx |    4 +-
 .../components/common/search/date_picker.tsx  |    4 +-
 .../common/search/direct_search.tsx           |   13 +-
 public/components/common/search/search.tsx    |   17 +-
 .../components/common/search/searchindex.tsx  |    4 +-
 .../custom_panel_table.test.tsx.snap          |   28 +-
 .../custom_panel_view.test.tsx.snap           | 1352 ++++++------
 .../custom_panel_view_so.test.tsx.snap        |   54 +-
 .../custom_panels/custom_panel_table.tsx      |   22 +-
 .../custom_panels/custom_panel_view.tsx       |   26 +-
 .../custom_panels/custom_panel_view_so.tsx    |   26 +-
 .../custom_input_model.test.tsx.snap          |   32 +-
 .../modal_container.test.tsx.snap             |   16 +-
 .../helpers/add_visualization_popover.tsx     |    6 +-
 .../helpers/custom_input_modal.tsx            |   24 +-
 .../helpers/modal_containers.tsx              |   19 +-
 .../__snapshots__/empty_panel.test.tsx.snap   |  238 ++-
 .../visualization_container.tsx               |   13 +-
 .../visualization_flyout.test.tsx.snap        |  310 +--
 .../visualization_flyout_so.test.tsx.snap     |  310 +--
 .../visualization_flyout.tsx                  |   36 +-
 .../visualization_flyout_so.tsx               |   36 +-
 .../associated_objects_tab.test.tsx.snap      |  475 +++--
 .../data_connection.test.tsx.snap             |    2 +-
 .../inactive_data_connection.test.tsx.snap    |    2 +-
 ...installed_integrations_table.test.tsx.snap |  147 +-
 ...data_connections_description.test.tsx.snap |  113 +-
 ...anage_data_connections_table.test.tsx.snap |    2 +-
 .../__snapshots__/no_access.test.tsx.snap     |   68 +-
 .../acceleration_action_overlay.tsx           |    8 +-
 .../acceleration_details_flyout.tsx           |   18 +-
 .../accelerations/acceleration_table.tsx      |    6 +-
 .../create_acceleration.test.tsx.snap         |  168 +-
 .../create_acceleration_button.test.tsx.snap  |    2 +-
 .../create/create_acceleration.tsx            |    6 +-
 .../create/create_acceleration_button.tsx     |    6 +-
 .../define_index_options.test.tsx.snap        |   18 +-
 .../index_advanced_settings.test.tsx.snap     |   30 +-
 .../index_setting_options.test.tsx.snap       |   78 +-
 .../index_type_selector.test.tsx.snap         |   16 +-
 .../preview_sql_defintion.test.tsx.snap       |    8 +-
 .../source_selector.test.tsx.snap             |   20 +-
 .../selectors/define_index_options.tsx        |   16 +-
 .../selectors/index_advanced_settings.tsx     |   14 +-
 .../selectors/index_setting_options.tsx       |   38 +-
 .../selectors/index_type_selector.tsx         |   14 +-
 .../selectors/preview_sql_defintion.tsx       |   14 +-
 .../selectors/source_selector.tsx             |   16 +-
 .../query_visual_editor.test.tsx.snap         |   28 +-
 .../covering_index/covering_index_builder.tsx |    4 +-
 .../column_expression.test.tsx.snap           |    4 +-
 .../materialized_view/add_column_popover.tsx  |   24 +-
 .../materialized_view/column_expression.tsx   |   28 +-
 .../group_by_tumble_expression.tsx            |   26 +-
 .../add_fields_modal.test.tsx.snap            |   16 +-
 .../delete_fields_modal.test.tsx.snap         |   16 +-
 .../generate_fields.test.tsx.snap             |    2 +-
 .../skipping_index_builder.test.tsx.snap      |   28 +-
 .../skipping_index/add_fields_modal.tsx       |    8 +-
 .../skipping_index/delete_fields_modal.tsx    |    8 +-
 .../skipping_index/generate_fields.tsx        |    6 +-
 .../skipping_index/skipping_index_builder.tsx |   18 +-
 .../utils/acceleration_utils.tsx              |    6 +-
 .../components/manage/access_control_tab.tsx  |    6 +-
 .../associated_objects_details_flyout.tsx     |    6 +-
 .../associated_objects_refresh_button.tsx     |    6 +-
 .../utils/associated_objects_tab_empty.tsx    |    6 +-
 .../manage/inactive_data_connection.tsx       |    6 +-
 .../installed_integrations_table.tsx          |   10 +-
 .../manage_data_connections_description.tsx   |    6 +-
 .../components/new/auth_details.tsx           |   32 +-
 .../new/configure_prometheus_datasource.tsx   |   27 +-
 .../new/configure_s3_datasource.tsx           |   38 +-
 .../datasources/components/new/name_row.tsx   |    8 +-
 .../components/new/query_permissions.tsx      |   14 +-
 ...ew_prometheus_datasource_configuration.tsx |    4 +-
 .../review_s3_datasource_configuration.tsx    |    4 +-
 .../datasources/components/no_access.tsx      |    6 +-
 .../explorer/direct_query_running.tsx         |    6 +-
 .../__snapshots__/flyout_button.test.tsx.snap |   67 +-
 .../detail_table/table_row_btn_collapse.tsx   |    6 +-
 .../explorer/events_views/docViewRow.tsx      |    6 +-
 .../explorer/events_views/doc_flyout.tsx      |    6 +-
 .../events_views/surrounding_flyout.tsx       |   27 +-
 .../patterns_header.test.tsx.snap             |  139 +-
 .../explorer/log_patterns/patterns_header.tsx |   14 +-
 .../explorer/query_assist/input.tsx           |   10 +-
 .../__snapshots__/save_panel.test.tsx.snap    |  109 +-
 .../explorer/save_panel/save_panel.tsx        |   17 +-
 .../__snapshots__/field.test.tsx.snap         |   70 +-
 .../__snapshots__/sidebar.test.tsx.snap       | 1822 ++++++++++-------
 .../explorer/sidebar/field.tsx                |    5 +-
 .../__snapshots__/config_panel.test.tsx.snap  |  315 +--
 .../config_panel/config_panel.tsx             |    4 +-
 .../config_controls/config_availability.tsx   |   38 +-
 .../config_color_palette_picker.tsx           |   10 +-
 .../config_controls/config_color_theme.tsx    |   22 +-
 .../config_controls/config_number_input.tsx   |    4 +-
 .../config_controls/config_panel_item.tsx     |    4 +-
 .../config_panel_option_gauge.tsx             |    8 +-
 .../config_controls/config_panel_options.tsx  |   14 +-
 .../config_single_color_picker.tsx            |    6 +-
 .../config_controls/config_switch.tsx         |    6 +-
 .../config_controls/config_switch_button.tsx  |    4 +-
 .../config_controls/config_text_input.tsx     |    4 +-
 .../config_controls/config_thresholds.tsx     |   30 +-
 .../config_treemap_parents.tsx                |    6 +-
 .../config_controls/config_yaxis_side.tsx     |   24 +-
 .../data_config_panel_fields.tsx              |   12 +-
 .../data_configurations_panel.tsx             |   40 +-
 .../logs_view_config_panel_item.tsx           |   15 +-
 .../treemap_config_panel_item.tsx             |   18 +-
 .../config_panes/default_vis_editor.tsx       |   10 +-
 .../plotly_viz_editor/plotly_actions.tsx      |    4 +-
 .../saved_query_table.test.tsx.snap           |    1 +
 .../components/event_analytics/home/home.tsx  |   18 +-
 .../added_integration.test.tsx.snap           |   70 +-
 .../added_integration_flyout.test.tsx.snap    |  468 +++--
 .../added_integration_table.test.tsx.snap     |    1 +
 ...ilable_integration_card_view.test.tsx.snap |   22 +-
 .../integration_header.test.tsx.snap          |  118 +-
 .../setup_integration.test.tsx.snap           |  499 +++--
 .../setup_integration_inputs.test.tsx.snap    |  762 ++++---
 .../__snapshots__/upload_flyout.test.tsx.snap |   18 +-
 .../components/add_integration_flyout.tsx     |   30 +-
 .../components/added_integration.tsx          |    4 +-
 .../available_integration_card_view.tsx       |    4 +-
 .../available_integration_overview_page.tsx   |    6 +-
 .../components/integration_header.tsx         |    6 +-
 .../components/setup_integration.tsx          |   12 +-
 .../components/setup_integration_inputs.tsx   |   60 +-
 .../integrations/components/upload_flyout.tsx |   18 +-
 .../__snapshots__/sidebar.test.tsx.snap       |    4 +-
 .../metrics/sidebar/data_source_picker.tsx    |    5 +-
 .../metrics/sidebar/index_picker.tsx          |    4 +-
 .../metrics_export_panel.test.tsx.snap        |  164 +-
 .../__snapshots__/top_menu.test.tsx.snap      |  418 ++--
 .../metrics/top_menu/metrics_export_panel.tsx |   18 +-
 .../components/metrics/top_menu/top_menu.tsx  |   14 +-
 .../__snapshots__/note_table.test.tsx.snap    |   18 +-
 .../__snapshots__/notebook.test.tsx.snap      |   16 +-
 .../modal_containers.test.tsx.snap            |   32 +-
 .../custom_input_modal.test.tsx.snap          |   32 +-
 .../custom_modals/custom_input_modal.tsx      |   20 +-
 .../custom_modals/reporting_loading_modal.tsx |   32 +-
 .../components/helpers/modal_containers.tsx   |   20 +-
 .../notebooks/components/note_table.tsx       |   22 +-
 .../notebooks/components/notebook.tsx         |   38 +-
 .../__snapshots__/para_input.test.tsx.snap    |   16 +-
 .../__snapshots__/paragraphs.test.tsx.snap    |    8 +-
 .../paragraph_components/para_input.tsx       |   32 +-
 .../paragraph_components/paragraphs.tsx       |   18 +-
 .../helper_functions.test.tsx.snap            |    4 +-
 .../__snapshots__/search_bar.test.tsx.snap    |  207 +-
 .../filter_edit_popover.test.tsx.snap         |  180 +-
 .../filter_helpers.test.tsx.snap              |   73 +-
 .../__snapshots__/filters.test.tsx.snap       |   70 +-
 .../common/filters/filter_edit_popover.tsx    |   28 +-
 .../common/filters/filter_helpers.tsx         |   22 +-
 .../components/common/filters/filters.tsx     |    4 +-
 .../components/common/helper_functions.tsx    |    6 +-
 .../__snapshots__/service_map.test.tsx.snap   |    4 +-
 .../components/common/plots/service_map.tsx   |    4 +-
 .../common/plots/service_map_node_details.tsx |   14 +-
 .../components/common/search_bar.tsx          |   10 +-
 .../__snapshots__/dashboard.test.tsx.snap     |  334 +--
 .../__snapshots__/mode_picker.test.tsx.snap   |  220 +-
 .../dashboard/__tests__/mode_picker.test.tsx  |    2 +-
 .../dashboard/latency_trend_cell.tsx          |   12 +-
 .../components/dashboard/mode_picker.tsx      |    6 +-
 .../__snapshots__/services.test.tsx.snap      | 1003 ++++-----
 .../services/service_trends_plots.tsx         |    4 +-
 .../components/services/service_view.tsx      |    6 +-
 .../__snapshots__/traces.test.tsx.snap        |  959 +++++----
 .../__snapshots__/traces_table.test.tsx.snap  |  263 +--
 .../components/traces/flyout_list_item.tsx    |    4 +-
 .../components/traces/span_detail_flyout.tsx  |   14 +-
 .../components/traces/trace_view.tsx          |    6 +-
 .../components/traces/traces_table.tsx        |   10 +-
 .../charts/data_table/data_table_header.tsx   |   18 +-
 196 files changed, 8672 insertions(+), 7188 deletions(-)

diff --git a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
index c93045750..83a0140a8 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/create.test.tsx.snap
@@ -59,7 +59,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -77,13 +77,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -94,7 +94,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -112,13 +112,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -268,7 +268,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -303,13 +303,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -455,7 +455,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -475,18 +475,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -523,7 +523,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -664,13 +664,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -683,7 +683,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -855,7 +855,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -876,18 +876,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -924,7 +924,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -1078,7 +1078,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -1100,7 +1100,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     data-test-subj="createButton"
                     disabled=""
                     type="button"
@@ -1124,7 +1124,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                     data-test-subj="createAndSetButton"
                     disabled=""
                     type="button"
@@ -1316,7 +1316,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -1334,13 +1334,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -1351,7 +1351,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -1369,13 +1369,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -1525,7 +1525,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -1560,13 +1560,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -1712,7 +1712,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -1732,18 +1732,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -1780,7 +1780,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -1921,13 +1921,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -1940,7 +1940,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -2112,7 +2112,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -2133,18 +2133,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -2181,7 +2181,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -2335,7 +2335,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -2357,7 +2357,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="createButton"
                   disabled=""
                   type="button"
@@ -2381,7 +2381,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                   data-test-subj="createAndSetButton"
                   disabled=""
                   type="button"
@@ -2513,7 +2513,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -2531,13 +2531,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -2548,7 +2548,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -2566,13 +2566,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -2723,7 +2723,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -2758,13 +2758,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -2908,7 +2908,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -2928,18 +2928,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -2976,7 +2976,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -3117,13 +3117,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -3136,7 +3136,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -3311,7 +3311,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -3332,18 +3332,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -3411,7 +3411,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -3565,7 +3565,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -3587,7 +3587,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     data-test-subj="createButton"
                     disabled=""
                     type="button"
@@ -3611,7 +3611,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                     data-test-subj="createAndSetButton"
                     disabled=""
                     type="button"
@@ -3684,7 +3684,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -3702,13 +3702,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -3719,7 +3719,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -3737,13 +3737,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -3894,7 +3894,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -3929,13 +3929,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -4079,7 +4079,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -4099,18 +4099,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -4147,7 +4147,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -4288,13 +4288,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -4307,7 +4307,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -4482,7 +4482,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -4503,18 +4503,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -4582,7 +4582,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -4736,7 +4736,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -4758,7 +4758,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="createButton"
                   disabled=""
                   type="button"
@@ -4782,7 +4782,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                   data-test-subj="createAndSetButton"
                   disabled=""
                   type="button"
@@ -4914,7 +4914,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -4932,13 +4932,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -4949,7 +4949,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -4967,13 +4967,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -5124,7 +5124,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -5159,13 +5159,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -5312,7 +5312,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -5332,18 +5332,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -5411,7 +5411,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -5552,13 +5552,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -5571,7 +5571,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -5743,7 +5743,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -5764,18 +5764,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -5812,7 +5812,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -5966,7 +5966,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -5988,7 +5988,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     data-test-subj="createButton"
                     disabled=""
                     type="button"
@@ -6012,7 +6012,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                     data-test-subj="createAndSetButton"
                     disabled=""
                     type="button"
@@ -6085,7 +6085,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -6103,13 +6103,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -6120,7 +6120,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -6138,13 +6138,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -6295,7 +6295,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -6330,13 +6330,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -6483,7 +6483,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -6503,18 +6503,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -6582,7 +6582,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -6723,13 +6723,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -6742,7 +6742,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -6914,7 +6914,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -6935,18 +6935,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -6983,7 +6983,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -7137,7 +7137,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -7159,7 +7159,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="createButton"
                   disabled=""
                   type="button"
@@ -7183,7 +7183,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                   data-test-subj="createAndSetButton"
                   disabled=""
                   type="button"
@@ -7313,7 +7313,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -7331,13 +7331,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -7348,7 +7348,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -7366,13 +7366,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -7522,7 +7522,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -7557,13 +7557,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -7706,7 +7706,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -7726,18 +7726,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -7774,7 +7774,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -7914,13 +7914,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -7933,7 +7933,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -8104,7 +8104,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -8125,18 +8125,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -8173,7 +8173,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -8326,7 +8326,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -8348,7 +8348,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     data-test-subj="createButton"
                     disabled=""
                     type="button"
@@ -8372,7 +8372,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                     data-test-subj="createAndSetButton"
                     disabled=""
                     type="button"
@@ -8445,7 +8445,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -8463,13 +8463,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -8480,7 +8480,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -8498,13 +8498,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -8654,7 +8654,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -8689,13 +8689,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -8838,7 +8838,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -8858,18 +8858,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -8906,7 +8906,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -9046,13 +9046,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -9065,7 +9065,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -9236,7 +9236,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -9257,18 +9257,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -9305,7 +9305,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -9458,7 +9458,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -9480,7 +9480,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="createButton"
                   disabled=""
                   type="button"
@@ -9504,7 +9504,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                   data-test-subj="createAndSetButton"
                   disabled=""
                   type="button"
@@ -9634,7 +9634,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -9652,13 +9652,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -9669,7 +9669,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -9687,13 +9687,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -9844,7 +9844,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -9879,13 +9879,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -10031,7 +10031,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -10051,18 +10051,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -10099,7 +10099,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -10240,13 +10240,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -10259,7 +10259,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -10431,7 +10431,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -10452,18 +10452,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -10500,7 +10500,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -10654,7 +10654,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -10676,7 +10676,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="createButton"
                     type="button"
                   >
@@ -10699,7 +10699,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                     data-test-subj="createAndSetButton"
                     type="button"
                   >
@@ -10771,7 +10771,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -10789,13 +10789,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -10806,7 +10806,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -10824,13 +10824,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -10981,7 +10981,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -11016,13 +11016,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -11168,7 +11168,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -11188,18 +11188,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -11236,7 +11236,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -11377,13 +11377,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -11396,7 +11396,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -11568,7 +11568,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -11589,18 +11589,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -11637,7 +11637,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -11791,7 +11791,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -11813,7 +11813,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="createButton"
                   type="button"
                 >
@@ -11836,7 +11836,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   data-test-subj="createAndSetButton"
                   type="button"
                 >
@@ -11967,7 +11967,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -11985,13 +11985,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -12002,7 +12002,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -12020,13 +12020,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -12177,7 +12177,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -12212,13 +12212,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -12365,7 +12365,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -12385,18 +12385,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -12464,7 +12464,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -12605,13 +12605,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -12624,7 +12624,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -12796,7 +12796,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -12817,18 +12817,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -12865,7 +12865,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -13019,7 +13019,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -13041,7 +13041,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     data-test-subj="createButton"
                     disabled=""
                     type="button"
@@ -13065,7 +13065,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                     data-test-subj="createAndSetButton"
                     disabled=""
                     type="button"
@@ -13138,7 +13138,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -13156,13 +13156,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -13173,7 +13173,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -13191,13 +13191,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -13348,7 +13348,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -13383,13 +13383,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -13536,7 +13536,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -13556,18 +13556,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -13635,7 +13635,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -13776,13 +13776,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -13795,7 +13795,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -13967,7 +13967,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -13988,18 +13988,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -14036,7 +14036,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -14190,7 +14190,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -14212,7 +14212,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="createButton"
                   disabled=""
                   type="button"
@@ -14236,7 +14236,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                   data-test-subj="createAndSetButton"
                   disabled=""
                   type="button"
@@ -14368,7 +14368,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -14386,13 +14386,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -14403,7 +14403,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -14421,13 +14421,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -14578,7 +14578,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -14613,13 +14613,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -14763,7 +14763,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -14783,18 +14783,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -14831,7 +14831,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -14972,13 +14972,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -14991,7 +14991,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -15166,7 +15166,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -15187,18 +15187,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -15266,7 +15266,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -15420,7 +15420,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -15442,7 +15442,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     data-test-subj="createButton"
                     disabled=""
                     type="button"
@@ -15466,7 +15466,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                     data-test-subj="createAndSetButton"
                     disabled=""
                     type="button"
@@ -15539,7 +15539,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -15557,13 +15557,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -15574,7 +15574,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -15592,13 +15592,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -15749,7 +15749,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -15784,13 +15784,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -15934,7 +15934,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -15954,18 +15954,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -16002,7 +16002,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -16143,13 +16143,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -16162,7 +16162,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -16337,7 +16337,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -16358,18 +16358,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -16437,7 +16437,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -16591,7 +16591,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -16613,7 +16613,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="createButton"
                   disabled=""
                   type="button"
@@ -16637,7 +16637,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                   data-test-subj="createAndSetButton"
                   disabled=""
                   type="button"
@@ -16772,7 +16772,7 @@ Object {
                 class="euiForm"
               >
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="nameFormRow"
                   id="random_html_id-row"
                 >
@@ -16790,13 +16790,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="name"
                           type="text"
@@ -16807,7 +16807,7 @@ Object {
                   </div>
                 </div>
                 <div
-                  class="euiFormRow"
+                  class="euiFormRow euiFormRow--compressed"
                   data-test-subj="descriptionFormRow"
                   id="random_html_id-row"
                 >
@@ -16825,13 +16825,13 @@ Object {
                     class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormControlLayout"
+                      class="euiFormControlLayout euiFormControlLayout--compressed"
                     >
                       <div
                         class="euiFormControlLayout__childrenWrapper"
                       >
                         <input
-                          class="euiFieldText"
+                          class="euiFieldText euiFieldText--compressed"
                           id="random_html_id"
                           name="description"
                           type="text"
@@ -16981,7 +16981,7 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -17016,13 +17016,13 @@ Object {
                                       autocapitalize="off"
                                       autocomplete="off"
                                       autocorrect="off"
-                                      class="euiTextArea euiTextArea--resizeVertical"
+                                      class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                       data-test-subj="searchAutocompleteTextArea"
                                       enterkeyhint="search"
                                       id="autocomplete-textarea"
                                       maxlength="16384"
                                       placeholder="Enter query"
-                                      rows="6"
+                                      rows="3"
                                       spellcheck="false"
                                       style="margin-top: 0px; height: 18px; padding: 8px;"
                                       type="search"
@@ -17168,7 +17168,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -17188,18 +17188,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select services and entities"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="servicesEntitiesComboBox"
                               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"
                                   >
@@ -17236,7 +17236,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -17377,13 +17377,13 @@ Object {
                               class="euiFlexItem"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
-                                    class="euiFieldSearch"
+                                    class="euiFieldSearch euiFieldSearch--compressed"
                                     placeholder="Service name"
                                     type="search"
                                     value=""
@@ -17396,7 +17396,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -17568,7 +17568,7 @@ Object {
                         class="euiAccordion__padding--l"
                       >
                         <div
-                          class="euiFormRow"
+                          class="euiFormRow euiFormRow--compressed"
                           id="random_html_id-row"
                         >
                           <div
@@ -17589,18 +17589,18 @@ Object {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-label="Select trace groups"
-                              class="euiComboBox"
+                              class="euiComboBox euiComboBox--compressed"
                               data-test-subj="traceGroupsComboBox"
                               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"
                                   >
@@ -17637,7 +17637,7 @@ Object {
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -17791,7 +17791,7 @@ Object {
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="cancelCreateButton"
                   type="button"
                 >
@@ -17813,7 +17813,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                     data-test-subj="createButton"
                     disabled=""
                     type="button"
@@ -17837,7 +17837,7 @@ Object {
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                     data-test-subj="createAndSetButton"
                     disabled=""
                     type="button"
@@ -18029,7 +18029,7 @@ Object {
               class="euiForm"
             >
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="nameFormRow"
                 id="random_html_id-row"
               >
@@ -18047,13 +18047,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="name"
                         type="text"
@@ -18064,7 +18064,7 @@ Object {
                 </div>
               </div>
               <div
-                class="euiFormRow"
+                class="euiFormRow euiFormRow--compressed"
                 data-test-subj="descriptionFormRow"
                 id="random_html_id-row"
               >
@@ -18082,13 +18082,13 @@ Object {
                   class="euiFormRow__fieldWrapper"
                 >
                   <div
-                    class="euiFormControlLayout"
+                    class="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       class="euiFormControlLayout__childrenWrapper"
                     >
                       <input
-                        class="euiFieldText"
+                        class="euiFieldText euiFieldText--compressed"
                         id="random_html_id"
                         name="description"
                         type="text"
@@ -18238,7 +18238,7 @@ Object {
                           class="euiFlexItem"
                         >
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -18273,13 +18273,13 @@ Object {
                                     autocapitalize="off"
                                     autocomplete="off"
                                     autocorrect="off"
-                                    class="euiTextArea euiTextArea--resizeVertical"
+                                    class="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
                                     data-test-subj="searchAutocompleteTextArea"
                                     enterkeyhint="search"
                                     id="autocomplete-textarea"
                                     maxlength="16384"
                                     placeholder="Enter query"
-                                    rows="6"
+                                    rows="3"
                                     spellcheck="false"
                                     style="margin-top: 0px; height: 18px; padding: 8px;"
                                     type="search"
@@ -18425,7 +18425,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -18445,18 +18445,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select services and entities"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="servicesEntitiesComboBox"
                             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"
                                 >
@@ -18493,7 +18493,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -18634,13 +18634,13 @@ Object {
                             class="euiFlexItem"
                           >
                             <div
-                              class="euiFormControlLayout"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 class="euiFormControlLayout__childrenWrapper"
                               >
                                 <input
-                                  class="euiFieldSearch"
+                                  class="euiFieldSearch euiFieldSearch--compressed"
                                   placeholder="Service name"
                                   type="search"
                                   value=""
@@ -18653,7 +18653,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -18825,7 +18825,7 @@ Object {
                       class="euiAccordion__padding--l"
                     >
                       <div
-                        class="euiFormRow"
+                        class="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -18846,18 +18846,18 @@ Object {
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Select trace groups"
-                            class="euiComboBox"
+                            class="euiComboBox euiComboBox--compressed"
                             data-test-subj="traceGroupsComboBox"
                             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"
                                 >
@@ -18894,7 +18894,7 @@ Object {
                                   >
                                     <svg
                                       aria-hidden="true"
-                                      class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height="16"
                                       role="img"
@@ -19048,7 +19048,7 @@ Object {
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="cancelCreateButton"
                 type="button"
               >
@@ -19070,7 +19070,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                   data-test-subj="createButton"
                   disabled=""
                   type="button"
@@ -19094,7 +19094,7 @@ Object {
                 class="euiToolTipAnchor"
               >
                 <button
-                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                   data-test-subj="createAndSetButton"
                   disabled=""
                   type="button"
diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
index 0ccc0ae60..73a12dc3a 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
@@ -410,9 +410,9 @@ exports[`Log Config component renders empty log config 1`] = `
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiFormRow
+                        <EuiCompressedFormRow
                           describedByIds={Array []}
-                          display="row"
+                          display="rowCompressed"
                           fullWidth={false}
                           hasChildLabel={true}
                           hasEmptyLabelSpace={false}
@@ -421,7 +421,7 @@ exports[`Log Config component renders empty log config 1`] = `
                           labelType="label"
                         >
                           <div
-                            className="euiFormRow"
+                            className="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -513,7 +513,7 @@ exports[`Log Config component renders empty log config 1`] = `
                                       id="autocomplete-root"
                                       role="combobox"
                                     >
-                                      <EuiTextArea
+                                      <EuiCompressedTextArea
                                         aria-autocomplete="both"
                                         aria-labelledby="autocomplete-0-label"
                                         autoCapitalize="off"
@@ -542,40 +542,71 @@ exports[`Log Config component renders empty log config 1`] = `
                                         type="search"
                                         value=""
                                       >
-                                        <EuiValidatableControl>
-                                          <textarea
-                                            aria-autocomplete="both"
-                                            aria-labelledby="autocomplete-0-label"
-                                            autoCapitalize="off"
-                                            autoComplete="off"
-                                            autoCorrect="off"
-                                            autoFocus={false}
-                                            className="euiTextArea euiTextArea--resizeVertical"
-                                            data-test-subj="searchAutocompleteTextArea"
-                                            disabled={false}
-                                            enterKeyHint="search"
-                                            id="autocomplete-textarea"
-                                            maxLength={16384}
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onKeyDown={[Function]}
-                                            placeholder="Enter query"
-                                            rows={6}
-                                            spellCheck="false"
-                                            style={
-                                              Object {
-                                                "height": "18px",
-                                                "marginTop": "0px",
-                                                "padding": "8px",
-                                              }
+                                        <EuiTextArea
+                                          aria-autocomplete="both"
+                                          aria-labelledby="autocomplete-0-label"
+                                          autoCapitalize="off"
+                                          autoComplete="off"
+                                          autoCorrect="off"
+                                          autoFocus={false}
+                                          compressed={true}
+                                          data-test-subj="searchAutocompleteTextArea"
+                                          disabled={false}
+                                          enterKeyHint="search"
+                                          id="autocomplete-textarea"
+                                          maxLength={16384}
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onKeyDown={[Function]}
+                                          placeholder="Enter query"
+                                          spellCheck="false"
+                                          style={
+                                            Object {
+                                              "height": "18px",
+                                              "marginTop": "0px",
+                                              "padding": "8px",
                                             }
-                                            type="search"
-                                            value=""
-                                          />
-                                        </EuiValidatableControl>
-                                      </EuiTextArea>
+                                          }
+                                          type="search"
+                                          value=""
+                                        >
+                                          <EuiValidatableControl>
+                                            <textarea
+                                              aria-autocomplete="both"
+                                              aria-labelledby="autocomplete-0-label"
+                                              autoCapitalize="off"
+                                              autoComplete="off"
+                                              autoCorrect="off"
+                                              autoFocus={false}
+                                              className="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+                                              data-test-subj="searchAutocompleteTextArea"
+                                              disabled={false}
+                                              enterKeyHint="search"
+                                              id="autocomplete-textarea"
+                                              maxLength={16384}
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyDown={[Function]}
+                                              placeholder="Enter query"
+                                              rows={3}
+                                              spellCheck="false"
+                                              style={
+                                                Object {
+                                                  "height": "18px",
+                                                  "marginTop": "0px",
+                                                  "padding": "8px",
+                                                }
+                                              }
+                                              type="search"
+                                              value=""
+                                            />
+                                          </EuiValidatableControl>
+                                        </EuiTextArea>
+                                      </EuiCompressedTextArea>
                                     </div>
                                   </Autocomplete>
                                   <EuiBadge
@@ -620,7 +651,7 @@ exports[`Log Config component renders empty log config 1`] = `
                               </EuiFormHelpText>
                             </div>
                           </div>
-                        </EuiFormRow>
+                        </EuiCompressedFormRow>
                       </div>
                     </EuiFlexItem>
                   </div>
@@ -1046,9 +1077,9 @@ exports[`Log Config component renders with query 1`] = `
                       <div
                         className="euiFlexItem"
                       >
-                        <EuiFormRow
+                        <EuiCompressedFormRow
                           describedByIds={Array []}
-                          display="row"
+                          display="rowCompressed"
                           fullWidth={false}
                           hasChildLabel={true}
                           hasEmptyLabelSpace={false}
@@ -1057,7 +1088,7 @@ exports[`Log Config component renders with query 1`] = `
                           labelType="label"
                         >
                           <div
-                            className="euiFormRow"
+                            className="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -1149,7 +1180,7 @@ exports[`Log Config component renders with query 1`] = `
                                       id="autocomplete-root"
                                       role="combobox"
                                     >
-                                      <EuiTextArea
+                                      <EuiCompressedTextArea
                                         aria-autocomplete="both"
                                         aria-labelledby="autocomplete-1-label"
                                         autoCapitalize="off"
@@ -1178,40 +1209,71 @@ exports[`Log Config component renders with query 1`] = `
                                         type="search"
                                         value="source = openserach_dashboard_sample_logs"
                                       >
-                                        <EuiValidatableControl>
-                                          <textarea
-                                            aria-autocomplete="both"
-                                            aria-labelledby="autocomplete-1-label"
-                                            autoCapitalize="off"
-                                            autoComplete="off"
-                                            autoCorrect="off"
-                                            autoFocus={false}
-                                            className="euiTextArea euiTextArea--resizeVertical"
-                                            data-test-subj="searchAutocompleteTextArea"
-                                            disabled={false}
-                                            enterKeyHint="search"
-                                            id="autocomplete-textarea"
-                                            maxLength={16384}
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onClick={[Function]}
-                                            onFocus={[Function]}
-                                            onKeyDown={[Function]}
-                                            placeholder="Enter query"
-                                            rows={6}
-                                            spellCheck="false"
-                                            style={
-                                              Object {
-                                                "height": "18px",
-                                                "marginTop": "0px",
-                                                "padding": "8px",
-                                              }
+                                        <EuiTextArea
+                                          aria-autocomplete="both"
+                                          aria-labelledby="autocomplete-1-label"
+                                          autoCapitalize="off"
+                                          autoComplete="off"
+                                          autoCorrect="off"
+                                          autoFocus={false}
+                                          compressed={true}
+                                          data-test-subj="searchAutocompleteTextArea"
+                                          disabled={false}
+                                          enterKeyHint="search"
+                                          id="autocomplete-textarea"
+                                          maxLength={16384}
+                                          onBlur={[Function]}
+                                          onChange={[Function]}
+                                          onClick={[Function]}
+                                          onFocus={[Function]}
+                                          onKeyDown={[Function]}
+                                          placeholder="Enter query"
+                                          spellCheck="false"
+                                          style={
+                                            Object {
+                                              "height": "18px",
+                                              "marginTop": "0px",
+                                              "padding": "8px",
                                             }
-                                            type="search"
-                                            value="source = openserach_dashboard_sample_logs"
-                                          />
-                                        </EuiValidatableControl>
-                                      </EuiTextArea>
+                                          }
+                                          type="search"
+                                          value="source = openserach_dashboard_sample_logs"
+                                        >
+                                          <EuiValidatableControl>
+                                            <textarea
+                                              aria-autocomplete="both"
+                                              aria-labelledby="autocomplete-1-label"
+                                              autoCapitalize="off"
+                                              autoComplete="off"
+                                              autoCorrect="off"
+                                              autoFocus={false}
+                                              className="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+                                              data-test-subj="searchAutocompleteTextArea"
+                                              disabled={false}
+                                              enterKeyHint="search"
+                                              id="autocomplete-textarea"
+                                              maxLength={16384}
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onKeyDown={[Function]}
+                                              placeholder="Enter query"
+                                              rows={3}
+                                              spellCheck="false"
+                                              style={
+                                                Object {
+                                                  "height": "18px",
+                                                  "marginTop": "0px",
+                                                  "padding": "8px",
+                                                }
+                                              }
+                                              type="search"
+                                              value="source = openserach_dashboard_sample_logs"
+                                            />
+                                          </EuiValidatableControl>
+                                        </EuiTextArea>
+                                      </EuiCompressedTextArea>
                                     </div>
                                   </Autocomplete>
                                   <EuiBadge
@@ -1256,7 +1318,7 @@ exports[`Log Config component renders with query 1`] = `
                               </EuiFormHelpText>
                             </div>
                           </div>
-                        </EuiFormRow>
+                        </EuiCompressedFormRow>
                       </div>
                     </EuiFlexItem>
                   </div>
diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
index 2a759f441..34a531e58 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -407,9 +407,9 @@ exports[`Service Config component renders empty service config 1`] = `
               <div
                 className="euiAccordion__padding--l"
               >
-                <EuiFormRow
+                <EuiCompressedFormRow
                   describedByIds={Array []}
-                  display="row"
+                  display="rowCompressed"
                   fullWidth={false}
                   hasChildLabel={true}
                   hasEmptyLabelSpace={false}
@@ -417,7 +417,7 @@ exports[`Service Config component renders empty service config 1`] = `
                   labelType="label"
                 >
                   <div
-                    className="euiFormRow"
+                    className="euiFormRow euiFormRow--compressed"
                     id="random_html_id-row"
                   >
                     <div
@@ -440,10 +440,10 @@ exports[`Service Config component renders empty service config 1`] = `
                     <div
                       className="euiFormRow__fieldWrapper"
                     >
-                      <EuiComboBox
+                      <EuiCompressedComboBox
                         aria-label="Select services and entities"
                         async={false}
-                        compressed={false}
+                        compressed={true}
                         data-test-subj="servicesEntitiesComboBox"
                         fullWidth={false}
                         id="random_html_id"
@@ -461,14 +461,14 @@ exports[`Service Config component renders empty service config 1`] = `
                           aria-expanded={false}
                           aria-haspopup="listbox"
                           aria-label="Select services and entities"
-                          className="euiComboBox"
+                          className="euiComboBox euiComboBox--compressed"
                           data-test-subj="servicesEntitiesComboBox"
                           onKeyDown={[Function]}
                           role="combobox"
                         >
                           <EuiComboBoxInput
                             autoSizeInputRef={[Function]}
-                            compressed={false}
+                            compressed={true}
                             fullWidth={false}
                             hasSelectedOptions={false}
                             id="random_html_id"
@@ -491,7 +491,7 @@ exports[`Service Config component renders empty service config 1`] = `
                             value=""
                           >
                             <EuiFormControlLayout
-                              compressed={false}
+                              compressed={true}
                               fullWidth={false}
                               icon={
                                 Object {
@@ -506,13 +506,13 @@ exports[`Service Config component renders empty service config 1`] = `
                               }
                             >
                               <div
-                                className="euiFormControlLayout"
+                                className="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   className="euiFormControlLayout__childrenWrapper"
                                 >
                                   <div
-                                    className="euiComboBox__inputWrap"
+                                    className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
                                     data-test-subj="comboBoxInput"
                                     onClick={[Function]}
                                     tabIndex={-1}
@@ -583,7 +583,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                     </AutosizeInput>
                                   </div>
                                   <EuiFormControlLayoutIcons
-                                    compressed={false}
+                                    compressed={true}
                                     icon={
                                       Object {
                                         "aria-label": "Open list of options",
@@ -604,7 +604,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                         data-test-subj="comboBoxToggleListButton"
                                         iconRef={[Function]}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <button
@@ -617,19 +617,19 @@ exports[`Service Config component renders empty service config 1`] = `
                                           <EuiIcon
                                             aria-hidden="true"
                                             className="euiFormControlLayoutCustomIcon__icon"
-                                            size="m"
+                                            size="s"
                                             type="arrowDown"
                                           >
                                             <EuiIconBeaker
                                               aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                               focusable="false"
                                               role="img"
                                               style={null}
                                             >
                                               <svg
                                                 aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
                                                 height={16}
                                                 role="img"
@@ -653,10 +653,10 @@ exports[`Service Config component renders empty service config 1`] = `
                             </EuiFormControlLayout>
                           </EuiComboBoxInput>
                         </div>
-                      </EuiComboBox>
+                      </EuiCompressedComboBox>
                     </div>
                   </div>
-                </EuiFormRow>
+                </EuiCompressedFormRow>
                 <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
@@ -1007,8 +1007,8 @@ exports[`Service Config component renders empty service config 1`] = `
                             <div
                               className="euiFlexItem"
                             >
-                              <EuiFieldSearch
-                                compressed={false}
+                              <EuiCompressedFieldSearch
+                                compressed={true}
                                 fullWidth={false}
                                 incremental={false}
                                 isClearable={true}
@@ -1020,13 +1020,13 @@ exports[`Service Config component renders empty service config 1`] = `
                                 value=""
                               >
                                 <EuiFormControlLayout
-                                  compressed={false}
+                                  compressed={true}
                                   fullWidth={false}
                                   icon="search"
                                   isLoading={false}
                                 >
                                   <div
-                                    className="euiFormControlLayout"
+                                    className="euiFormControlLayout euiFormControlLayout--compressed"
                                   >
                                     <div
                                       className="euiFormControlLayout__childrenWrapper"
@@ -1035,7 +1035,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                         isInvalid={false}
                                       >
                                         <input
-                                          className="euiFieldSearch"
+                                          className="euiFieldSearch euiFieldSearch--compressed"
                                           onChange={[Function]}
                                           onKeyUp={[Function]}
                                           placeholder="Service name"
@@ -1044,7 +1044,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                         />
                                       </EuiValidatableControl>
                                       <EuiFormControlLayoutIcons
-                                        compressed={false}
+                                        compressed={true}
                                         icon="search"
                                         isLoading={false}
                                       >
@@ -1052,7 +1052,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                           className="euiFormControlLayoutIcons"
                                         >
                                           <EuiFormControlLayoutCustomIcon
-                                            size="m"
+                                            size="s"
                                             type="search"
                                           >
                                             <span
@@ -1061,19 +1061,19 @@ exports[`Service Config component renders empty service config 1`] = `
                                               <EuiIcon
                                                 aria-hidden="true"
                                                 className="euiFormControlLayoutCustomIcon__icon"
-                                                size="m"
+                                                size="s"
                                                 type="search"
                                               >
                                                 <EuiIconBeaker
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -1095,7 +1095,7 @@ exports[`Service Config component renders empty service config 1`] = `
                                     </div>
                                   </div>
                                 </EuiFormControlLayout>
-                              </EuiFieldSearch>
+                              </EuiCompressedFieldSearch>
                             </div>
                           </EuiFlexItem>
                         </div>
@@ -1627,9 +1627,9 @@ exports[`Service Config component renders with one service selected 1`] = `
               <div
                 className="euiAccordion__padding--l"
               >
-                <EuiFormRow
+                <EuiCompressedFormRow
                   describedByIds={Array []}
-                  display="row"
+                  display="rowCompressed"
                   fullWidth={false}
                   hasChildLabel={true}
                   hasEmptyLabelSpace={false}
@@ -1637,7 +1637,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                   labelType="label"
                 >
                   <div
-                    className="euiFormRow"
+                    className="euiFormRow euiFormRow--compressed"
                     id="random_html_id-row"
                   >
                     <div
@@ -1660,10 +1660,10 @@ exports[`Service Config component renders with one service selected 1`] = `
                     <div
                       className="euiFormRow__fieldWrapper"
                     >
-                      <EuiComboBox
+                      <EuiCompressedComboBox
                         aria-label="Select services and entities"
                         async={false}
-                        compressed={false}
+                        compressed={true}
                         data-test-subj="servicesEntitiesComboBox"
                         fullWidth={false}
                         id="random_html_id"
@@ -1681,14 +1681,14 @@ exports[`Service Config component renders with one service selected 1`] = `
                           aria-expanded={false}
                           aria-haspopup="listbox"
                           aria-label="Select services and entities"
-                          className="euiComboBox"
+                          className="euiComboBox euiComboBox--compressed"
                           data-test-subj="servicesEntitiesComboBox"
                           onKeyDown={[Function]}
                           role="combobox"
                         >
                           <EuiComboBoxInput
                             autoSizeInputRef={[Function]}
-                            compressed={false}
+                            compressed={true}
                             fullWidth={false}
                             hasSelectedOptions={false}
                             id="random_html_id"
@@ -1711,7 +1711,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                             value=""
                           >
                             <EuiFormControlLayout
-                              compressed={false}
+                              compressed={true}
                               fullWidth={false}
                               icon={
                                 Object {
@@ -1726,13 +1726,13 @@ exports[`Service Config component renders with one service selected 1`] = `
                               }
                             >
                               <div
-                                className="euiFormControlLayout"
+                                className="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   className="euiFormControlLayout__childrenWrapper"
                                 >
                                   <div
-                                    className="euiComboBox__inputWrap"
+                                    className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
                                     data-test-subj="comboBoxInput"
                                     onClick={[Function]}
                                     tabIndex={-1}
@@ -1803,7 +1803,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     </AutosizeInput>
                                   </div>
                                   <EuiFormControlLayoutIcons
-                                    compressed={false}
+                                    compressed={true}
                                     icon={
                                       Object {
                                         "aria-label": "Open list of options",
@@ -1824,7 +1824,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                         data-test-subj="comboBoxToggleListButton"
                                         iconRef={[Function]}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <button
@@ -1837,19 +1837,19 @@ exports[`Service Config component renders with one service selected 1`] = `
                                           <EuiIcon
                                             aria-hidden="true"
                                             className="euiFormControlLayoutCustomIcon__icon"
-                                            size="m"
+                                            size="s"
                                             type="arrowDown"
                                           >
                                             <EuiIconArrowDown
                                               aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                              className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                               focusable="false"
                                               role="img"
                                               style={null}
                                             >
                                               <svg
                                                 aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
                                                 height={16}
                                                 role="img"
@@ -1874,10 +1874,10 @@ exports[`Service Config component renders with one service selected 1`] = `
                             </EuiFormControlLayout>
                           </EuiComboBoxInput>
                         </div>
-                      </EuiComboBox>
+                      </EuiCompressedComboBox>
                     </div>
                   </div>
-                </EuiFormRow>
+                </EuiCompressedFormRow>
                 <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
@@ -2228,8 +2228,8 @@ exports[`Service Config component renders with one service selected 1`] = `
                             <div
                               className="euiFlexItem"
                             >
-                              <EuiFieldSearch
-                                compressed={false}
+                              <EuiCompressedFieldSearch
+                                compressed={true}
                                 fullWidth={false}
                                 incremental={false}
                                 isClearable={true}
@@ -2241,13 +2241,13 @@ exports[`Service Config component renders with one service selected 1`] = `
                                 value=""
                               >
                                 <EuiFormControlLayout
-                                  compressed={false}
+                                  compressed={true}
                                   fullWidth={false}
                                   icon="search"
                                   isLoading={false}
                                 >
                                   <div
-                                    className="euiFormControlLayout"
+                                    className="euiFormControlLayout euiFormControlLayout--compressed"
                                   >
                                     <div
                                       className="euiFormControlLayout__childrenWrapper"
@@ -2256,7 +2256,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                         isInvalid={false}
                                       >
                                         <input
-                                          className="euiFieldSearch"
+                                          className="euiFieldSearch euiFieldSearch--compressed"
                                           onChange={[Function]}
                                           onKeyUp={[Function]}
                                           placeholder="Service name"
@@ -2265,7 +2265,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                         />
                                       </EuiValidatableControl>
                                       <EuiFormControlLayoutIcons
-                                        compressed={false}
+                                        compressed={true}
                                         icon="search"
                                         isLoading={false}
                                       >
@@ -2273,7 +2273,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                           className="euiFormControlLayoutIcons"
                                         >
                                           <EuiFormControlLayoutCustomIcon
-                                            size="m"
+                                            size="s"
                                             type="search"
                                           >
                                             <span
@@ -2282,19 +2282,19 @@ exports[`Service Config component renders with one service selected 1`] = `
                                               <EuiIcon
                                                 aria-hidden="true"
                                                 className="euiFormControlLayoutCustomIcon__icon"
-                                                size="m"
+                                                size="s"
                                                 type="search"
                                               >
                                                 <EuiIconSearch
                                                   aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                   focusable="false"
                                                   role="img"
                                                   style={null}
                                                 >
                                                   <svg
                                                     aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                    className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                     focusable="false"
                                                     height={16}
                                                     role="img"
@@ -2316,7 +2316,7 @@ exports[`Service Config component renders with one service selected 1`] = `
                                     </div>
                                   </div>
                                 </EuiFormControlLayout>
-                              </EuiFieldSearch>
+                              </EuiCompressedFieldSearch>
                             </div>
                           </EuiFlexItem>
                         </div>
diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
index 9750299fa..db13f48f7 100644
--- a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
+++ b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -403,9 +403,9 @@ exports[`Trace Config component renders empty trace config 1`] = `
               <div
                 className="euiAccordion__padding--l"
               >
-                <EuiFormRow
+                <EuiCompressedFormRow
                   describedByIds={Array []}
-                  display="row"
+                  display="rowCompressed"
                   fullWidth={false}
                   hasChildLabel={true}
                   hasEmptyLabelSpace={false}
@@ -414,7 +414,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
                   labelType="label"
                 >
                   <div
-                    className="euiFormRow"
+                    className="euiFormRow euiFormRow--compressed"
                     id="random_html_id-row"
                   >
                     <div
@@ -437,11 +437,11 @@ exports[`Trace Config component renders empty trace config 1`] = `
                     <div
                       className="euiFormRow__fieldWrapper"
                     >
-                      <EuiComboBox
+                      <EuiCompressedComboBox
                         aria-describedby="random_html_id-help-0"
                         aria-label="Select trace groups"
                         async={false}
-                        compressed={false}
+                        compressed={true}
                         data-test-subj="traceGroupsComboBox"
                         fullWidth={false}
                         id="random_html_id"
@@ -461,14 +461,14 @@ exports[`Trace Config component renders empty trace config 1`] = `
                           aria-expanded={false}
                           aria-haspopup="listbox"
                           aria-label="Select trace groups"
-                          className="euiComboBox"
+                          className="euiComboBox euiComboBox--compressed"
                           data-test-subj="traceGroupsComboBox"
                           onKeyDown={[Function]}
                           role="combobox"
                         >
                           <EuiComboBoxInput
                             autoSizeInputRef={[Function]}
-                            compressed={false}
+                            compressed={true}
                             fullWidth={false}
                             hasSelectedOptions={false}
                             id="random_html_id"
@@ -491,7 +491,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
                             value=""
                           >
                             <EuiFormControlLayout
-                              compressed={false}
+                              compressed={true}
                               fullWidth={false}
                               icon={
                                 Object {
@@ -506,13 +506,13 @@ exports[`Trace Config component renders empty trace config 1`] = `
                               }
                             >
                               <div
-                                className="euiFormControlLayout"
+                                className="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   className="euiFormControlLayout__childrenWrapper"
                                 >
                                   <div
-                                    className="euiComboBox__inputWrap"
+                                    className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
                                     data-test-subj="comboBoxInput"
                                     onClick={[Function]}
                                     tabIndex={-1}
@@ -583,7 +583,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
                                     </AutosizeInput>
                                   </div>
                                   <EuiFormControlLayoutIcons
-                                    compressed={false}
+                                    compressed={true}
                                     icon={
                                       Object {
                                         "aria-label": "Open list of options",
@@ -604,7 +604,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
                                         data-test-subj="comboBoxToggleListButton"
                                         iconRef={[Function]}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <button
@@ -617,19 +617,19 @@ exports[`Trace Config component renders empty trace config 1`] = `
                                           <EuiIcon
                                             aria-hidden="true"
                                             className="euiFormControlLayoutCustomIcon__icon"
-                                            size="m"
+                                            size="s"
                                             type="arrowDown"
                                           >
                                             <EuiIconBeaker
                                               aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                               focusable="false"
                                               role="img"
                                               style={null}
                                             >
                                               <svg
                                                 aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
                                                 height={16}
                                                 role="img"
@@ -653,7 +653,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
                             </EuiFormControlLayout>
                           </EuiComboBoxInput>
                         </div>
-                      </EuiComboBox>
+                      </EuiCompressedComboBox>
                       <EuiFormHelpText
                         className="euiFormRow__text"
                         id="random_html_id-help-0"
@@ -668,7 +668,7 @@ exports[`Trace Config component renders empty trace config 1`] = `
                       </EuiFormHelpText>
                     </div>
                   </div>
-                </EuiFormRow>
+                </EuiCompressedFormRow>
                 <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
@@ -1336,9 +1336,9 @@ exports[`Trace Config component renders with one trace selected 1`] = `
               <div
                 className="euiAccordion__padding--l"
               >
-                <EuiFormRow
+                <EuiCompressedFormRow
                   describedByIds={Array []}
-                  display="row"
+                  display="rowCompressed"
                   fullWidth={false}
                   hasChildLabel={true}
                   hasEmptyLabelSpace={false}
@@ -1347,7 +1347,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                   labelType="label"
                 >
                   <div
-                    className="euiFormRow"
+                    className="euiFormRow euiFormRow--compressed"
                     id="random_html_id-row"
                   >
                     <div
@@ -1370,11 +1370,11 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                     <div
                       className="euiFormRow__fieldWrapper"
                     >
-                      <EuiComboBox
+                      <EuiCompressedComboBox
                         aria-describedby="random_html_id-help-0"
                         aria-label="Select trace groups"
                         async={false}
-                        compressed={false}
+                        compressed={true}
                         data-test-subj="traceGroupsComboBox"
                         fullWidth={false}
                         id="random_html_id"
@@ -1394,14 +1394,14 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                           aria-expanded={false}
                           aria-haspopup="listbox"
                           aria-label="Select trace groups"
-                          className="euiComboBox"
+                          className="euiComboBox euiComboBox--compressed"
                           data-test-subj="traceGroupsComboBox"
                           onKeyDown={[Function]}
                           role="combobox"
                         >
                           <EuiComboBoxInput
                             autoSizeInputRef={[Function]}
-                            compressed={false}
+                            compressed={true}
                             fullWidth={false}
                             hasSelectedOptions={false}
                             id="random_html_id"
@@ -1424,7 +1424,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                             value=""
                           >
                             <EuiFormControlLayout
-                              compressed={false}
+                              compressed={true}
                               fullWidth={false}
                               icon={
                                 Object {
@@ -1439,13 +1439,13 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                               }
                             >
                               <div
-                                className="euiFormControlLayout"
+                                className="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   className="euiFormControlLayout__childrenWrapper"
                                 >
                                   <div
-                                    className="euiComboBox__inputWrap"
+                                    className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed"
                                     data-test-subj="comboBoxInput"
                                     onClick={[Function]}
                                     tabIndex={-1}
@@ -1516,7 +1516,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                                     </AutosizeInput>
                                   </div>
                                   <EuiFormControlLayoutIcons
-                                    compressed={false}
+                                    compressed={true}
                                     icon={
                                       Object {
                                         "aria-label": "Open list of options",
@@ -1537,7 +1537,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                                         data-test-subj="comboBoxToggleListButton"
                                         iconRef={[Function]}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <button
@@ -1550,19 +1550,19 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                                           <EuiIcon
                                             aria-hidden="true"
                                             className="euiFormControlLayoutCustomIcon__icon"
-                                            size="m"
+                                            size="s"
                                             type="arrowDown"
                                           >
                                             <EuiIconArrowDown
                                               aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                              className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                               focusable="false"
                                               role="img"
                                               style={null}
                                             >
                                               <svg
                                                 aria-hidden={true}
-                                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                 focusable="false"
                                                 height={16}
                                                 role="img"
@@ -1587,7 +1587,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                             </EuiFormControlLayout>
                           </EuiComboBoxInput>
                         </div>
-                      </EuiComboBox>
+                      </EuiCompressedComboBox>
                       <EuiFormHelpText
                         className="euiFormRow__text"
                         id="random_html_id-help-0"
@@ -1602,7 +1602,7 @@ exports[`Trace Config component renders with one trace selected 1`] = `
                       </EuiFormHelpText>
                     </div>
                   </div>
-                </EuiFormRow>
+                </EuiCompressedFormRow>
                 <EuiSpacer>
                   <div
                     className="euiSpacer euiSpacer--l"
diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx
index 8f106198b..3bdcc1f47 100644
--- a/public/components/application_analytics/components/app_table.tsx
+++ b/public/components/application_analytics/components/app_table.tsx
@@ -7,7 +7,7 @@
 import '../app_analytics.scss';
 import {
   EuiBadge,
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiFlexGroup,
@@ -141,14 +141,14 @@ export function AppTable(props: AppTableProps) {
   };
 
   const popoverButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="appAnalyticsActionsButton"
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
     >
       Actions
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const popoverItems: ReactElement[] = [
@@ -283,9 +283,9 @@ export function AppTable(props: AppTableProps) {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/create">
+                    <EuiSmallButton fill href="#/create">
                       {createButtonText}
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageContentHeaderSection>
@@ -323,12 +323,12 @@ export function AppTable(props: AppTableProps) {
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton fullWidth={false} href={`#/create`}>
+                    <EuiSmallButton fullWidth={false} href={`#/create`}>
                       {createButtonText}
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   {/* <EuiFlexItem grow={false}>
-                    <EuiButton fullWidth={false}>Add sample applications</EuiButton>
+                    <EuiSmallButton fullWidth={false}>Add sample applications</EuiSmallButton>
                   </EuiFlexItem> */}
                 </EuiFlexGroup>
                 <EuiSpacer size="xxl" />
diff --git a/public/components/application_analytics/components/config_components/log_config.tsx b/public/components/application_analytics/components/config_components/log_config.tsx
index fd0371bbd..0dea21295 100644
--- a/public/components/application_analytics/components/config_components/log_config.tsx
+++ b/public/components/application_analytics/components/config_components/log_config.tsx
@@ -8,7 +8,7 @@ import {
   EuiText,
   EuiSpacer,
   EuiButton,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiFlexItem,
   EuiBadge,
   EuiOverlayMask,
@@ -127,7 +127,7 @@ export const LogConfig = (props: LogConfigProps) => {
             </EuiCallOut>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFormRow
+            <EuiCompressedFormRow
               label="Base Query"
               helpText="The default logs view in the application will be filtered by this query."
             >
@@ -157,7 +157,7 @@ export const LogConfig = (props: LogConfigProps) => {
                   PPL
                 </EuiBadge>
               </EuiFlexItem>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiAccordion>
diff --git a/public/components/application_analytics/components/config_components/service_config.tsx b/public/components/application_analytics/components/config_components/service_config.tsx
index 181636aea..f1dd2230e 100644
--- a/public/components/application_analytics/components/config_components/service_config.tsx
+++ b/public/components/application_analytics/components/config_components/service_config.tsx
@@ -8,8 +8,8 @@ import {
   EuiAccordion,
   EuiBadge,
   EuiButton,
-  EuiComboBox,
-  EuiFormRow,
+  EuiCompressedComboBox,
+  EuiCompressedFormRow,
   EuiOverlayMask,
   EuiSpacer,
   EuiText,
@@ -167,8 +167,8 @@ export const ServiceConfig = (props: ServiceConfigProps) => {
         }}
         paddingSize="l"
       >
-        <EuiFormRow label="Services & entities">
-          <EuiComboBox
+        <EuiCompressedFormRow label="Services & entities">
+          <EuiCompressedComboBox
             aria-label="Select services and entities"
             placeholder="Select services and entities"
             options={services}
@@ -177,7 +177,7 @@ export const ServiceConfig = (props: ServiceConfigProps) => {
             isClearable={false}
             data-test-subj="servicesEntitiesComboBox"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer />
         <ServiceMap
           serviceMap={serviceMap}
diff --git a/public/components/application_analytics/components/config_components/trace_config.tsx b/public/components/application_analytics/components/config_components/trace_config.tsx
index fdcfb230d..b8839424a 100644
--- a/public/components/application_analytics/components/config_components/trace_config.tsx
+++ b/public/components/application_analytics/components/config_components/trace_config.tsx
@@ -9,8 +9,8 @@ import {
   EuiAccordion,
   EuiBadge,
   EuiButton,
-  EuiComboBox,
-  EuiFormRow,
+  EuiCompressedComboBox,
+  EuiCompressedFormRow,
   EuiOverlayMask,
   EuiSpacer,
   EuiText,
@@ -246,11 +246,11 @@ export const TraceConfig = (props: TraceConfigProps) => {
         }}
         paddingSize="l"
       >
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Trace Groups"
           helpText="Select one or multiple trace groups, or type a custom one"
         >
-          <EuiComboBox
+          <EuiCompressedComboBox
             aria-label="Select trace groups"
             placeholder="Select or add trace groups"
             options={traceOptions}
@@ -260,7 +260,7 @@ export const TraceConfig = (props: TraceConfigProps) => {
             isClearable={false}
             data-test-subj="traceGroupsComboBox"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer />
         <DashboardTable
           items={traceItems}
diff --git a/public/components/application_analytics/components/configuration.tsx b/public/components/application_analytics/components/configuration.tsx
index d9f82fbe2..74bbb002c 100644
--- a/public/components/application_analytics/components/configuration.tsx
+++ b/public/components/application_analytics/components/configuration.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiBreadcrumb,
-  EuiButton,
+  EuiSmallButton,
   EuiCode,
   EuiFlexGroup,
   EuiFlexItem,
@@ -17,7 +17,7 @@ import {
   EuiPageContentBody,
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSelectOption,
   EuiSpacer,
   EuiText,
@@ -68,7 +68,7 @@ export const Configuration = (props: ConfigProps) => {
               <EuiPageContentHeaderSection>
                 <EuiFlexGroup gutterSize="s">
                   <EuiFlexItem>
-                    <EuiButton
+                    <EuiSmallButton
                       fill
                       data-test-subj="editApplicationButton"
                       onClick={() => {
@@ -76,7 +76,7 @@ export const Configuration = (props: ConfigProps) => {
                       }}
                     >
                       Edit
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageContentHeaderSection>
@@ -125,7 +125,7 @@ export const Configuration = (props: ConfigProps) => {
                   </EuiText>
                   <EuiSpacer size="m" />
                   {visWithAvailability.length > 0 ? (
-                    <EuiSelect
+                    <EuiCompressedSelect
                       options={visWithAvailability}
                       value={availabilityVisId}
                       onChange={onAvailabilityVisChange}
diff --git a/public/components/application_analytics/components/create.tsx b/public/components/application_analytics/components/create.tsx
index 5e90563d7..102a669bd 100644
--- a/public/components/application_analytics/components/create.tsx
+++ b/public/components/application_analytics/components/create.tsx
@@ -5,12 +5,12 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiHorizontalRule,
   EuiPage,
   EuiPageBody,
@@ -200,20 +200,20 @@ export const CreateApp = (props: CreateAppProps) => {
             </EuiPageContentHeader>
             <EuiHorizontalRule />
             <EuiForm component="form">
-              <EuiFormRow label="Name" data-test-subj="nameFormRow">
-                <EuiFieldText
+              <EuiCompressedFormRow label="Name" data-test-subj="nameFormRow">
+                <EuiCompressedFieldText
                   name="name"
                   value={name}
                   onChange={(e) => setNameWithStorage(e.target.value)}
                 />
-              </EuiFormRow>
-              <EuiFormRow label="Description" data-test-subj="descriptionFormRow">
-                <EuiFieldText
+              </EuiCompressedFormRow>
+              <EuiCompressedFormRow label="Description" data-test-subj="descriptionFormRow">
+                <EuiCompressedFieldText
                   name="description"
                   value={description}
                   onChange={(e) => setDescriptionWithStorage(e.target.value)}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiForm>
           </EuiPageContent>
           <EuiSpacer />
@@ -243,33 +243,33 @@ export const CreateApp = (props: CreateAppProps) => {
           <EuiSpacer />
           <EuiFlexGroup>
             <EuiFlexItem grow={false}>
-              <EuiButton data-test-subj="cancelCreateButton" onClick={onCancel}>
+              <EuiSmallButton data-test-subj="cancelCreateButton" onClick={onCancel}>
                 Cancel
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiToolTip position="top" content={missingField(false)}>
-                <EuiButton
+                <EuiSmallButton
                   data-test-subj="createButton"
                   isDisabled={isDisabled}
                   onClick={editMode ? onUpdate : () => onCreate('create')}
                   fill={editMode ? true : false}
                 >
                   {editMode ? 'Save' : 'Create'}
-                </EuiButton>
+                </EuiSmallButton>
               </EuiToolTip>
             </EuiFlexItem>
             {editMode || (
               <EuiFlexItem grow={false}>
                 <EuiToolTip position="top" content={missingField(true)}>
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj="createAndSetButton"
                     fill
                     isDisabled={isDisabled || !query}
                     onClick={() => onCreate('createSetAvailability')}
                   >
                     Create and Set Availability
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiToolTip>
               </EuiFlexItem>
             )}
diff --git a/public/components/application_analytics/components/flyout_components/availability_info_flyout.tsx b/public/components/application_analytics/components/flyout_components/availability_info_flyout.tsx
index 86e668f41..f1691d4f6 100644
--- a/public/components/application_analytics/components/flyout_components/availability_info_flyout.tsx
+++ b/public/components/application_analytics/components/flyout_components/availability_info_flyout.tsx
@@ -11,7 +11,7 @@ import {
   EuiText,
   EuiCodeBlock,
   EuiFlyoutFooter,
-  EuiButton,
+  EuiSmallButton,
 } from '@elastic/eui';
 import React from 'react';
 
@@ -55,7 +55,7 @@ export function AvailabilityInfoFlyout(props: AvailabilityInfoFlyoutProps) {
         </EuiText>
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
-        <EuiButton onClick={closeFlyout}>Close</EuiButton>
+        <EuiSmallButton onClick={closeFlyout}>Close</EuiSmallButton>
       </EuiFlyoutFooter>
     </EuiFlyout>
   );
diff --git a/public/components/common/helpers/delete_modal.tsx b/public/components/common/helpers/delete_modal.tsx
index bf343fa6b..8f3c58363 100644
--- a/public/components/common/helpers/delete_modal.tsx
+++ b/public/components/common/helpers/delete_modal.tsx
@@ -7,11 +7,11 @@ import React, { useState } from 'react';
 import {
   EuiOverlayMask,
   EuiModal,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiForm,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
@@ -52,21 +52,21 @@ export const DeleteModal = ({
           <EuiText>The action cannot be undone.</EuiText>
           <EuiSpacer />
           <EuiForm>
-            <EuiFormRow label={`To confirm deletion, enter "${deletePrompt}" in the text field`}>
-              <EuiFieldText
+            <EuiCompressedFormRow label={`To confirm deletion, enter "${deletePrompt}" in the text field`}>
+              <EuiCompressedFieldText
                 name="input"
                 placeholder={deletePrompt}
                 value={value}
                 onChange={(e) => onChange(e)}
                 data-test-subj="popoverModal__deleteTextInput"
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
-          <EuiButton
+          <EuiSmallButtonEmpty onClick={onCancel}>Cancel</EuiSmallButtonEmpty>
+          <EuiSmallButton
             onClick={() => onConfirm()}
             color="danger"
             fill
@@ -74,7 +74,7 @@ export const DeleteModal = ({
             data-test-subj="popoverModal__deleteButton"
           >
             Delete
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/components/common/helpers/ppl_reference_flyout.tsx b/public/components/common/helpers/ppl_reference_flyout.tsx
index bf5e52261..b3227a64c 100644
--- a/public/components/common/helpers/ppl_reference_flyout.tsx
+++ b/public/components/common/helpers/ppl_reference_flyout.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiComboBox,
+  EuiSmallButton,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
@@ -60,7 +60,7 @@ export const PPLReferenceFlyout = ({ module, closeFlyout }: Props) => {
     <EuiFlyoutBody>
       <EuiFlexGroup component="span">
         <EuiFlexItem>
-          <EuiComboBox
+          <EuiCompressedComboBox
             placeholder="Refer commands, functions and language structures"
             options={allOptionsStatic}
             selectedOptions={selectedOptions}
@@ -84,7 +84,7 @@ export const PPLReferenceFlyout = ({ module, closeFlyout }: Props) => {
     <EuiFlyoutFooter>
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={closeFlyout}>Close</EuiButton>
+          <EuiSmallButton onClick={closeFlyout}>Close</EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutFooter>
diff --git a/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap b/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
index d16f1b466..560b5b030 100644
--- a/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
+++ b/public/components/common/live_tail/__tests__/__snapshots__/live_tail_button.test.tsx.snap
@@ -8,89 +8,98 @@ exports[`Live tail button change live tail to 10s interval 1`] = `
   liveTailName="10s"
   setIsLiveTailPopoverOpen={[MockFunction]}
 >
-  <EuiButton
+  <EuiSmallButton
     data-test-subj=""
     iconSide="left"
     iconType="stop"
     onClick={[Function]}
   >
-    <EuiButtonDisplay
-      baseClassName="euiButton"
+    <EuiButton
       data-test-subj=""
-      disabled={false}
-      element="button"
       iconSide="left"
       iconType="stop"
-      isDisabled={false}
       onClick={[Function]}
-      type="button"
+      size="s"
     >
-      <button
-        className="euiButton euiButton--primary"
+      <EuiButtonDisplay
+        baseClassName="euiButton"
         data-test-subj=""
         disabled={false}
+        element="button"
+        iconSide="left"
+        iconType="stop"
+        isDisabled={false}
         onClick={[Function]}
-        style={
-          Object {
-            "minWidth": undefined,
-          }
-        }
+        size="s"
         type="button"
       >
-        <EuiButtonContent
-          className="euiButton__content"
-          iconSide="left"
-          iconType="stop"
-          textProps={
+        <button
+          className="euiButton euiButton--primary euiButton--small"
+          data-test-subj=""
+          disabled={false}
+          onClick={[Function]}
+          style={
             Object {
-              "className": "euiButton__text",
+              "minWidth": undefined,
             }
           }
+          type="button"
         >
-          <span
-            className="euiButtonContent euiButton__content"
+          <EuiButtonContent
+            className="euiButton__content"
+            iconSide="left"
+            iconType="stop"
+            textProps={
+              Object {
+                "className": "euiButton__text",
+              }
+            }
           >
-            <EuiIcon
-              className="euiButtonContent__icon"
-              color="inherit"
-              size="m"
-              type="stop"
+            <span
+              className="euiButtonContent euiButton__content"
             >
-              <EuiIconStop
-                aria-hidden={true}
-                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                focusable="false"
-                role="img"
-                style={null}
+              <EuiIcon
+                className="euiButtonContent__icon"
+                color="inherit"
+                size="m"
+                type="stop"
               >
-                <svg
+                <EuiIconStop
                   aria-hidden={true}
                   className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                   focusable="false"
-                  height={16}
                   role="img"
                   style={null}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M4 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
-                    fillRule="evenodd"
-                  />
-                </svg>
-              </EuiIconStop>
-            </EuiIcon>
-            <span
-              className="euiButton__text"
-            >
-              10s
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M4 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                </EuiIconStop>
+              </EuiIcon>
+              <span
+                className="euiButton__text"
+              >
+                10s
+              </span>
             </span>
-          </span>
-        </EuiButtonContent>
-      </button>
-    </EuiButtonDisplay>
-  </EuiButton>
+          </EuiButtonContent>
+        </button>
+      </EuiButtonDisplay>
+    </EuiButton>
+  </EuiSmallButton>
 </LiveTailButton>
 `;
 
@@ -102,88 +111,97 @@ exports[`Live tail button starts live tail with 5s interval 1`] = `
   liveTailName="5s"
   setIsLiveTailPopoverOpen={[MockFunction]}
 >
-  <EuiButton
+  <EuiSmallButton
     data-test-subj=""
     iconSide="left"
     iconType="stop"
     onClick={[Function]}
   >
-    <EuiButtonDisplay
-      baseClassName="euiButton"
+    <EuiButton
       data-test-subj=""
-      disabled={false}
-      element="button"
       iconSide="left"
       iconType="stop"
-      isDisabled={false}
       onClick={[Function]}
-      type="button"
+      size="s"
     >
-      <button
-        className="euiButton euiButton--primary"
+      <EuiButtonDisplay
+        baseClassName="euiButton"
         data-test-subj=""
         disabled={false}
+        element="button"
+        iconSide="left"
+        iconType="stop"
+        isDisabled={false}
         onClick={[Function]}
-        style={
-          Object {
-            "minWidth": undefined,
-          }
-        }
+        size="s"
         type="button"
       >
-        <EuiButtonContent
-          className="euiButton__content"
-          iconSide="left"
-          iconType="stop"
-          textProps={
+        <button
+          className="euiButton euiButton--primary euiButton--small"
+          data-test-subj=""
+          disabled={false}
+          onClick={[Function]}
+          style={
             Object {
-              "className": "euiButton__text",
+              "minWidth": undefined,
             }
           }
+          type="button"
         >
-          <span
-            className="euiButtonContent euiButton__content"
+          <EuiButtonContent
+            className="euiButton__content"
+            iconSide="left"
+            iconType="stop"
+            textProps={
+              Object {
+                "className": "euiButton__text",
+              }
+            }
           >
-            <EuiIcon
-              className="euiButtonContent__icon"
-              color="inherit"
-              size="m"
-              type="stop"
+            <span
+              className="euiButtonContent euiButton__content"
             >
-              <EuiIconBeaker
-                aria-hidden={true}
-                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                focusable="false"
-                role="img"
-                style={null}
+              <EuiIcon
+                className="euiButtonContent__icon"
+                color="inherit"
+                size="m"
+                type="stop"
               >
-                <svg
+                <EuiIconBeaker
                   aria-hidden={true}
                   className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                   focusable="false"
-                  height={16}
                   role="img"
                   style={null}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                  />
-                </svg>
-              </EuiIconBeaker>
-            </EuiIcon>
-            <span
-              className="euiButton__text"
-            >
-              5s
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                    />
+                  </svg>
+                </EuiIconBeaker>
+              </EuiIcon>
+              <span
+                className="euiButton__text"
+              >
+                5s
+              </span>
             </span>
-          </span>
-        </EuiButtonContent>
-      </button>
-    </EuiButtonDisplay>
-  </EuiButton>
+          </EuiButtonContent>
+        </button>
+      </EuiButtonDisplay>
+    </EuiButton>
+  </EuiSmallButton>
 </LiveTailButton>
 `;
 
@@ -192,88 +210,97 @@ exports[`Live tail off button stop live tail 1`] = `
   StopLive={[MockFunction]}
   dataTestSubj=""
 >
-  <EuiButton
+  <EuiSmallButton
     color="danger"
     data-test-subj=""
     iconType="stop"
     onClick={[Function]}
   >
-    <EuiButtonDisplay
-      baseClassName="euiButton"
+    <EuiButton
       color="danger"
       data-test-subj=""
-      disabled={false}
-      element="button"
       iconType="stop"
-      isDisabled={false}
       onClick={[Function]}
-      type="button"
+      size="s"
     >
-      <button
-        className="euiButton euiButton--danger"
+      <EuiButtonDisplay
+        baseClassName="euiButton"
+        color="danger"
         data-test-subj=""
         disabled={false}
+        element="button"
+        iconType="stop"
+        isDisabled={false}
         onClick={[Function]}
-        style={
-          Object {
-            "minWidth": undefined,
-          }
-        }
+        size="s"
         type="button"
       >
-        <EuiButtonContent
-          className="euiButton__content"
-          iconSide="left"
-          iconType="stop"
-          textProps={
+        <button
+          className="euiButton euiButton--danger euiButton--small"
+          data-test-subj=""
+          disabled={false}
+          onClick={[Function]}
+          style={
             Object {
-              "className": "euiButton__text",
+              "minWidth": undefined,
             }
           }
+          type="button"
         >
-          <span
-            className="euiButtonContent euiButton__content"
+          <EuiButtonContent
+            className="euiButton__content"
+            iconSide="left"
+            iconType="stop"
+            textProps={
+              Object {
+                "className": "euiButton__text",
+              }
+            }
           >
-            <EuiIcon
-              className="euiButtonContent__icon"
-              color="inherit"
-              size="m"
-              type="stop"
+            <span
+              className="euiButtonContent euiButton__content"
             >
-              <EuiIconStop
-                aria-hidden={true}
-                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                focusable="false"
-                role="img"
-                style={null}
+              <EuiIcon
+                className="euiButtonContent__icon"
+                color="inherit"
+                size="m"
+                type="stop"
               >
-                <svg
+                <EuiIconStop
                   aria-hidden={true}
                   className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                   focusable="false"
-                  height={16}
                   role="img"
                   style={null}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <path
-                    d="M4 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
-                    fillRule="evenodd"
-                  />
-                </svg>
-              </EuiIconStop>
-            </EuiIcon>
-            <span
-              className="euiButton__text"
-            >
-              Stop
+                  <svg
+                    aria-hidden={true}
+                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                    focusable="false"
+                    height={16}
+                    role="img"
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M4 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
+                      fillRule="evenodd"
+                    />
+                  </svg>
+                </EuiIconStop>
+              </EuiIcon>
+              <span
+                className="euiButton__text"
+              >
+                Stop
+              </span>
             </span>
-          </span>
-        </EuiButtonContent>
-      </button>
-    </EuiButtonDisplay>
-  </EuiButton>
+          </EuiButtonContent>
+        </button>
+      </EuiButtonDisplay>
+    </EuiButton>
+  </EuiSmallButton>
 </StopLiveButton>
 `;
diff --git a/public/components/common/live_tail/live_tail_button.tsx b/public/components/common/live_tail/live_tail_button.tsx
index 66bb91591..d14ca8ead 100644
--- a/public/components/common/live_tail/live_tail_button.tsx
+++ b/public/components/common/live_tail/live_tail_button.tsx
@@ -5,7 +5,7 @@
 
 // Define pop over interval options for live tail button in your plugin
 
-import { EuiButton } from '@elastic/eui';
+import { EuiSmallButton } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { LiveTailProps } from 'common/types/explorer';
 
@@ -19,14 +19,14 @@ export const LiveTailButton = ({
 }: LiveTailProps) => {
   const liveButton = useMemo(() => {
     return (
-      <EuiButton
+      <EuiSmallButton
         iconType={isLiveTailOn ? 'stop' : 'clock'}
         iconSide="left"
         onClick={() => setIsLiveTailPopoverOpen(!isLiveTailPopoverOpen)}
         data-test-subj={dataTestSubj}
       >
         {liveTailName}
-      </EuiButton>
+      </EuiSmallButton>
     );
   }, [isLiveTailPopoverOpen, isLiveTailOn]);
   return liveButton;
@@ -37,14 +37,14 @@ export const StopLiveButton = (props: any) => {
 
   const stopButton = () => {
     return (
-      <EuiButton
+      <EuiSmallButton
         iconType="stop"
         onClick={() => StopLive()}
         color="danger"
         data-test-subj={dataTestSubj}
       >
         Stop
-      </EuiButton>
+      </EuiSmallButton>
     );
   };
   return stopButton();
diff --git a/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap b/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap
index 3991cb057..79f3070e5 100644
--- a/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap
+++ b/public/components/common/search/__tests__/__snapshots__/search.test.tsx.snap
@@ -49,14 +49,14 @@ exports[`Explorer Search component renders basic component 1`] = `
                       <EuiPopover
                         anchorPosition="downLeft"
                         button={
-                          <EuiButton
+                          <EuiSmallButton
                             color="text"
                             iconSide="right"
                             iconType="arrowDown"
                             onClick={[Function]}
                           >
                             PPL
-                          </EuiButton>
+                          </EuiSmallButton>
                         }
                         closePopover={[Function]}
                         display="inlineBlock"
@@ -73,87 +73,96 @@ exports[`Explorer Search component renders basic component 1`] = `
                           <div
                             className="euiPopover__anchor"
                           >
-                            <EuiButton
+                            <EuiSmallButton
                               color="text"
                               iconSide="right"
                               iconType="arrowDown"
                               onClick={[Function]}
                             >
-                              <EuiButtonDisplay
-                                baseClassName="euiButton"
+                              <EuiButton
                                 color="text"
-                                disabled={false}
-                                element="button"
                                 iconSide="right"
                                 iconType="arrowDown"
-                                isDisabled={false}
                                 onClick={[Function]}
-                                type="button"
+                                size="s"
                               >
-                                <button
-                                  className="euiButton euiButton--text"
+                                <EuiButtonDisplay
+                                  baseClassName="euiButton"
+                                  color="text"
                                   disabled={false}
+                                  element="button"
+                                  iconSide="right"
+                                  iconType="arrowDown"
+                                  isDisabled={false}
                                   onClick={[Function]}
-                                  style={
-                                    Object {
-                                      "minWidth": undefined,
-                                    }
-                                  }
+                                  size="s"
                                   type="button"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButton__content"
-                                    iconSide="right"
-                                    iconType="arrowDown"
-                                    textProps={
+                                  <button
+                                    className="euiButton euiButton--text euiButton--small"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    style={
                                       Object {
-                                        "className": "euiButton__text",
+                                        "minWidth": undefined,
                                       }
                                     }
+                                    type="button"
                                   >
-                                    <span
-                                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                    <EuiButtonContent
+                                      className="euiButton__content"
+                                      iconSide="right"
+                                      iconType="arrowDown"
+                                      textProps={
+                                        Object {
+                                          "className": "euiButton__text",
+                                        }
+                                      }
                                     >
-                                      <EuiIcon
-                                        className="euiButtonContent__icon"
-                                        color="inherit"
-                                        size="m"
-                                        type="arrowDown"
+                                      <span
+                                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                       >
-                                        <EuiIconBeaker
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                          focusable="false"
-                                          role="img"
-                                          style={null}
+                                        <EuiIcon
+                                          className="euiButtonContent__icon"
+                                          color="inherit"
+                                          size="m"
+                                          type="arrowDown"
                                         >
-                                          <svg
+                                          <EuiIconBeaker
                                             aria-hidden={true}
                                             className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                             focusable="false"
-                                            height={16}
                                             role="img"
                                             style={null}
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
                                           >
-                                            <path
-                                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                            />
-                                          </svg>
-                                        </EuiIconBeaker>
-                                      </EuiIcon>
-                                      <span
-                                        className="euiButton__text"
-                                      >
-                                        PPL
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                              <path
+                                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                              />
+                                            </svg>
+                                          </EuiIconBeaker>
+                                        </EuiIcon>
+                                        <span
+                                          className="euiButton__text"
+                                        >
+                                          PPL
+                                        </span>
                                       </span>
-                                    </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonDisplay>
-                            </EuiButton>
+                                    </EuiButtonContent>
+                                  </button>
+                                </EuiButtonDisplay>
+                              </EuiButton>
+                            </EuiSmallButton>
                           </div>
                         </div>
                       </EuiPopover>
@@ -240,7 +249,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                           id="autocomplete-root"
                           role="combobox"
                         >
-                          <EuiTextArea
+                          <EuiCompressedTextArea
                             aria-autocomplete="both"
                             aria-labelledby="autocomplete-0-label"
                             autoCapitalize="off"
@@ -268,39 +277,69 @@ exports[`Explorer Search component renders basic component 1`] = `
                             type="search"
                             value=""
                           >
-                            <EuiValidatableControl>
-                              <textarea
-                                aria-autocomplete="both"
-                                aria-labelledby="autocomplete-0-label"
-                                autoCapitalize="off"
-                                autoComplete="off"
-                                autoCorrect="off"
-                                autoFocus={false}
-                                className="euiTextArea euiTextArea--resizeVertical"
-                                data-test-subj="searchAutocompleteTextArea"
-                                enterKeyHint="search"
-                                id="autocomplete-textarea"
-                                maxLength={16384}
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onKeyDown={[Function]}
-                                placeholder="Enter query"
-                                rows={6}
-                                spellCheck="false"
-                                style={
-                                  Object {
-                                    "height": "18px",
-                                    "marginTop": "0px",
-                                    "padding": "8px",
-                                  }
+                            <EuiTextArea
+                              aria-autocomplete="both"
+                              aria-labelledby="autocomplete-0-label"
+                              autoCapitalize="off"
+                              autoComplete="off"
+                              autoCorrect="off"
+                              autoFocus={false}
+                              compressed={true}
+                              data-test-subj="searchAutocompleteTextArea"
+                              enterKeyHint="search"
+                              id="autocomplete-textarea"
+                              maxLength={16384}
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onClick={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              placeholder="Enter query"
+                              spellCheck="false"
+                              style={
+                                Object {
+                                  "height": "18px",
+                                  "marginTop": "0px",
+                                  "padding": "8px",
                                 }
-                                type="search"
-                                value=""
-                              />
-                            </EuiValidatableControl>
-                          </EuiTextArea>
+                              }
+                              type="search"
+                              value=""
+                            >
+                              <EuiValidatableControl>
+                                <textarea
+                                  aria-autocomplete="both"
+                                  aria-labelledby="autocomplete-0-label"
+                                  autoCapitalize="off"
+                                  autoComplete="off"
+                                  autoCorrect="off"
+                                  autoFocus={false}
+                                  className="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+                                  data-test-subj="searchAutocompleteTextArea"
+                                  enterKeyHint="search"
+                                  id="autocomplete-textarea"
+                                  maxLength={16384}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onKeyDown={[Function]}
+                                  placeholder="Enter query"
+                                  rows={3}
+                                  spellCheck="false"
+                                  style={
+                                    Object {
+                                      "height": "18px",
+                                      "marginTop": "0px",
+                                      "padding": "8px",
+                                    }
+                                  }
+                                  type="search"
+                                  value=""
+                                />
+                              </EuiValidatableControl>
+                            </EuiTextArea>
+                          </EuiCompressedTextArea>
                         </div>
                       </Autocomplete>
                       <EuiBadge
@@ -349,7 +388,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                         handleTimePickerChange={[Function]}
                         handleTimeRangePickerRefresh={[Function]}
                       >
-                        <EuiSuperDatePicker
+                        <EuiCompressedSuperDatePicker
                           className="osdQueryBar__datePicker"
                           commonlyUsedRanges={
                             Array [
@@ -395,7 +434,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                               },
                             ]
                           }
-                          compressed={false}
+                          compressed={true}
                           data-test-subj="pplSearchDatePicker"
                           dateFormat=""
                           end="now"
@@ -424,7 +463,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                                 >
                                   <EuiFormControlLayout
                                     className="euiSuperDatePicker"
-                                    compressed={false}
+                                    compressed={true}
                                     isDisabled={false}
                                     prepend={
                                       <EuiQuickSelectPopover
@@ -485,7 +524,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                                     }
                                   >
                                     <div
-                                      className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                      className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                                     >
                                       <EuiQuickSelectPopover
                                         applyTime={[Function]}
@@ -701,7 +740,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                                             className="euiDatePickerRange euiDatePickerRange--inGroup"
                                           >
                                             <button
-                                              className="euiSuperDatePicker__prettyFormat"
+                                              className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                                               data-test-subj="superDatePickerShowDatesButton"
                                               disabled={false}
                                               onClick={[Function]}
@@ -721,7 +760,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                                           </div>
                                         </EuiDatePickerRange>
                                         <EuiFormControlLayoutIcons
-                                          compressed={false}
+                                          compressed={true}
                                         />
                                       </div>
                                     </div>
@@ -730,7 +769,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                               </EuiFlexItem>
                             </div>
                           </EuiFlexGroup>
-                        </EuiSuperDatePicker>
+                        </EuiCompressedSuperDatePicker>
                       </DatePicker>
                     </div>
                   </EuiFlexItem>
@@ -751,7 +790,7 @@ exports[`Explorer Search component renders basic component 1`] = `
                           onMouseOut={[Function]}
                           onMouseOver={[Function]}
                         >
-                          <EuiButton
+                          <EuiSmallButton
                             color="primary"
                             data-test-subj="superDatePickerApplyTimeButton"
                             fill={true}
@@ -760,87 +799,99 @@ exports[`Explorer Search component renders basic component 1`] = `
                             onClick={[Function]}
                             onFocus={[Function]}
                           >
-                            <EuiButtonDisplay
-                              baseClassName="euiButton"
+                            <EuiButton
                               color="primary"
                               data-test-subj="superDatePickerApplyTimeButton"
-                              disabled={false}
-                              element="button"
                               fill={true}
                               iconType="play"
-                              isDisabled={false}
                               onBlur={[Function]}
                               onClick={[Function]}
                               onFocus={[Function]}
-                              type="button"
+                              size="s"
                             >
-                              <button
-                                className="euiButton euiButton--primary euiButton--fill"
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                color="primary"
                                 data-test-subj="superDatePickerApplyTimeButton"
                                 disabled={false}
+                                element="button"
+                                fill={true}
+                                iconType="play"
+                                isDisabled={false}
                                 onBlur={[Function]}
                                 onClick={[Function]}
                                 onFocus={[Function]}
-                                style={
-                                  Object {
-                                    "minWidth": undefined,
-                                  }
-                                }
+                                size="s"
                                 type="button"
                               >
-                                <EuiButtonContent
-                                  className="euiButton__content"
-                                  iconSide="left"
-                                  iconType="play"
-                                  textProps={
+                                <button
+                                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                  data-test-subj="superDatePickerApplyTimeButton"
+                                  disabled={false}
+                                  onBlur={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  style={
                                     Object {
-                                      "className": "euiButton__text",
+                                      "minWidth": undefined,
                                     }
                                   }
+                                  type="button"
                                 >
-                                  <span
-                                    className="euiButtonContent euiButton__content"
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    iconType="play"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
                                   >
-                                    <EuiIcon
-                                      className="euiButtonContent__icon"
-                                      color="inherit"
-                                      size="m"
-                                      type="play"
+                                    <span
+                                      className="euiButtonContent euiButton__content"
                                     >
-                                      <EuiIconBeaker
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
+                                      <EuiIcon
+                                        className="euiButtonContent__icon"
+                                        color="inherit"
+                                        size="m"
+                                        type="play"
                                       >
-                                        <svg
+                                        <EuiIconBeaker
                                           aria-hidden={true}
                                           className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                           focusable="false"
-                                          height={16}
                                           role="img"
                                           style={null}
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
                                         >
-                                          <path
-                                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                          />
-                                        </svg>
-                                      </EuiIconBeaker>
-                                    </EuiIcon>
-                                    <span
-                                      className="euiButton__text"
-                                    >
-                                      Run
+                                          <svg
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                            focusable="false"
+                                            height={16}
+                                            role="img"
+                                            style={null}
+                                            viewBox="0 0 16 16"
+                                            width={16}
+                                            xmlns="http://www.w3.org/2000/svg"
+                                          >
+                                            <path
+                                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                            />
+                                          </svg>
+                                        </EuiIconBeaker>
+                                      </EuiIcon>
+                                      <span
+                                        className="euiButton__text"
+                                      >
+                                        Run
+                                      </span>
                                     </span>
-                                  </span>
-                                </EuiButtonContent>
-                              </button>
-                            </EuiButtonDisplay>
-                          </EuiButton>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </EuiSmallButton>
                         </span>
                       </EuiToolTip>
                     </div>
@@ -873,86 +924,95 @@ exports[`Explorer Search component renders basic component 1`] = `
                             <LiveTailButton
                               dataTestSubj="eventLiveTail"
                             >
-                              <EuiButton
+                              <EuiSmallButton
                                 data-test-subj="eventLiveTail"
                                 iconSide="left"
                                 iconType="clock"
                                 onClick={[Function]}
                               >
-                                <EuiButtonDisplay
-                                  baseClassName="euiButton"
+                                <EuiButton
                                   data-test-subj="eventLiveTail"
-                                  disabled={false}
-                                  element="button"
                                   iconSide="left"
                                   iconType="clock"
-                                  isDisabled={false}
                                   onClick={[Function]}
-                                  type="button"
+                                  size="s"
                                 >
-                                  <button
-                                    className="euiButton euiButton--primary"
+                                  <EuiButtonDisplay
+                                    baseClassName="euiButton"
                                     data-test-subj="eventLiveTail"
                                     disabled={false}
+                                    element="button"
+                                    iconSide="left"
+                                    iconType="clock"
+                                    isDisabled={false}
                                     onClick={[Function]}
-                                    style={
-                                      Object {
-                                        "minWidth": undefined,
-                                      }
-                                    }
+                                    size="s"
                                     type="button"
                                   >
-                                    <EuiButtonContent
-                                      className="euiButton__content"
-                                      iconSide="left"
-                                      iconType="clock"
-                                      textProps={
+                                    <button
+                                      className="euiButton euiButton--primary euiButton--small"
+                                      data-test-subj="eventLiveTail"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      style={
                                         Object {
-                                          "className": "euiButton__text",
+                                          "minWidth": undefined,
                                         }
                                       }
+                                      type="button"
                                     >
-                                      <span
-                                        className="euiButtonContent euiButton__content"
+                                      <EuiButtonContent
+                                        className="euiButton__content"
+                                        iconSide="left"
+                                        iconType="clock"
+                                        textProps={
+                                          Object {
+                                            "className": "euiButton__text",
+                                          }
+                                        }
                                       >
-                                        <EuiIcon
-                                          className="euiButtonContent__icon"
-                                          color="inherit"
-                                          size="m"
-                                          type="clock"
+                                        <span
+                                          className="euiButtonContent euiButton__content"
                                         >
-                                          <EuiIconBeaker
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="clock"
                                           >
-                                            <svg
+                                            <EuiIconBeaker
                                               aria-hidden={true}
                                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                               focusable="false"
-                                              height={16}
                                               role="img"
                                               style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
                                             >
-                                              <path
-                                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                              />
-                                            </svg>
-                                          </EuiIconBeaker>
-                                        </EuiIcon>
-                                        <span
-                                          className="euiButton__text"
-                                        />
-                                      </span>
-                                    </EuiButtonContent>
-                                  </button>
-                                </EuiButtonDisplay>
-                              </EuiButton>
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                />
+                                              </svg>
+                                            </EuiIconBeaker>
+                                          </EuiIcon>
+                                          <span
+                                            className="euiButton__text"
+                                          />
+                                        </span>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonDisplay>
+                                </EuiButton>
+                              </EuiSmallButton>
                             </LiveTailButton>
                           </div>
                         </div>
diff --git a/public/components/common/search/autocomplete.tsx b/public/components/common/search/autocomplete.tsx
index a3e56c095..82d97e91d 100644
--- a/public/components/common/search/autocomplete.tsx
+++ b/public/components/common/search/autocomplete.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import { AutocompleteState, createAutocomplete } from '@algolia/autocomplete-core';
-import { EuiFieldText, EuiTextArea } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiCompressedTextArea } from '@elastic/eui';
 import $ from 'jquery';
 import DSLService from 'public/services/requests/dsl';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -134,7 +134,7 @@ export const Autocomplete = (props: AutocompleteProps) => {
     });
   }, depArray);
 
-  const TextArea = panelsFilter ? EuiFieldText : EuiTextArea;
+  const TextArea = panelsFilter ? EuiCompressedFieldText : EuiCompressedTextArea;
 
   return (
     <div className="aa-Autocomplete" {...autocomplete.getRootProps({ id: 'autocomplete-root' })}>
diff --git a/public/components/common/search/date_picker.tsx b/public/components/common/search/date_picker.tsx
index 95837ebe3..3ee3f2f78 100644
--- a/public/components/common/search/date_picker.tsx
+++ b/public/components/common/search/date_picker.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSuperDatePicker } from '@elastic/eui';
+import { EuiCompressedSuperDatePicker } from '@elastic/eui';
 import React from 'react';
 import { uiSettingsService } from '../../../../common/utils';
 import { IDatePickerProps } from './search';
@@ -14,7 +14,7 @@ export function DatePicker(props: IDatePickerProps) {
   const handleTimeChange = (e: any) => handleTimePickerChange([e.start, e.end]);
 
   return (
-    <EuiSuperDatePicker
+    <EuiCompressedSuperDatePicker
       data-test-subj="pplSearchDatePicker"
       start={startTime}
       end={endTime}
diff --git a/public/components/common/search/direct_search.tsx b/public/components/common/search/direct_search.tsx
index a27fc64a6..b384e3920 100644
--- a/public/components/common/search/direct_search.tsx
+++ b/public/components/common/search/direct_search.tsx
@@ -8,6 +8,7 @@ import './search.scss';
 import '@algolia/autocomplete-theme-classic';
 import {
   EuiBadge,
+  EuiSmallButton,
   EuiButton,
   EuiButtonEmpty,
   EuiContextMenuItem,
@@ -143,7 +144,7 @@ export const DirectSearch = (props: any) => {
   }
 
   const Savebutton = (
-    <EuiButton
+    <EuiSmallButton
       iconSide="right"
       onClick={() => {
         setIsSavePanelOpen((staleState) => {
@@ -154,7 +155,7 @@ export const DirectSearch = (props: any) => {
       iconType="arrowDown"
     >
       Save
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const handleQueryLanguageChange = (lang: QUERY_LANGUAGE) => {
@@ -187,7 +188,7 @@ export const DirectSearch = (props: any) => {
   ];
 
   const languagePopOverButton = (
-    <EuiButton
+    <EuiSmallButton
       iconType="arrowDown"
       iconSide="right"
       onClick={onLanguagePopoverClick}
@@ -195,7 +196,7 @@ export const DirectSearch = (props: any) => {
       isDisabled={explorerSearchMetadata.isPolling}
     >
       {queryLang}
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const stopPollingWithStatus = (status: DirectQueryLoadingStatus | undefined) => {
@@ -408,7 +409,7 @@ export const DirectSearch = (props: any) => {
         </EuiFlexItem>
         <EuiFlexItem grow={false} />
         <EuiFlexItem className="euiFlexItem--flexGrowZero event-date-picker" grow={false}>
-          <EuiButton
+          <EuiSmallButton
             color="success"
             onClick={() => {
               onQuerySearch(queryLang);
@@ -417,7 +418,7 @@ export const DirectSearch = (props: any) => {
             isDisabled={explorerSearchMetadata.isPolling}
           >
             Search
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
 
         {showSaveButton && searchBarConfigs[selectedSubTabId]?.showSaveButton && (
diff --git a/public/components/common/search/search.tsx b/public/components/common/search/search.tsx
index f101079fb..2329edf34 100644
--- a/public/components/common/search/search.tsx
+++ b/public/components/common/search/search.tsx
@@ -6,9 +6,10 @@
 import '@algolia/autocomplete-theme-classic';
 import {
   EuiBadge,
+  EuiSmallButton,
   EuiButton,
   EuiButtonEmpty,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiContextMenuItem,
   EuiContextMenuPanel,
@@ -176,7 +177,7 @@ export const Search = (props: any) => {
   }
 
   const Savebutton = (
-    <EuiButton
+    <EuiSmallButton
       iconSide="right"
       onClick={() => {
         setIsSavePanelOpen((staleState) => {
@@ -187,7 +188,7 @@ export const Search = (props: any) => {
       iconType="arrowDown"
     >
       Save
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const liveButton = (
@@ -322,9 +323,9 @@ export const Search = (props: any) => {
   };
 
   const languagePopOverButton = (
-    <EuiButton iconType="arrowDown" iconSide="right" onClick={onLanguagePopoverClick} color="text">
+    <EuiSmallButton iconType="arrowDown" iconSide="right" onClick={onLanguagePopoverClick} color="text">
       {queryLang}
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const redirectToDiscover = () => {
@@ -372,7 +373,7 @@ export const Search = (props: any) => {
                 </EuiFlexItem>
                 {coreRefs.queryAssistEnabled && (
                   <EuiFlexItem>
-                    <EuiComboBox
+                    <EuiCompressedComboBox
                       placeholder="Select an index"
                       isClearable={false}
                       prepend={<EuiText>Index</EuiText>}
@@ -462,7 +463,7 @@ export const Search = (props: any) => {
             {!showQueryArea && (
               <EuiFlexItem grow={false}>
                 <EuiToolTip position="bottom" content={needsUpdate ? 'Click to apply' : false}>
-                  <EuiButton
+                  <EuiSmallButton
                     color={needsUpdate ? 'success' : 'primary'}
                     iconType={needsUpdate ? 'kqlFunction' : 'play'}
                     fill
@@ -470,7 +471,7 @@ export const Search = (props: any) => {
                     data-test-subj="superDatePickerApplyTimeButton" // mimic actual timepicker button
                   >
                     {needsUpdate ? 'Update' : 'Run'}
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiToolTip>
               </EuiFlexItem>
             )}
diff --git a/public/components/common/search/searchindex.tsx b/public/components/common/search/searchindex.tsx
index 0a7fe4460..03d042fa7 100644
--- a/public/components/common/search/searchindex.tsx
+++ b/public/components/common/search/searchindex.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox } from '@elastic/eui';
+import { EuiCompressedComboBox } from '@elastic/eui';
 import React, { useState, useEffect, memo } from 'react';
 
 
@@ -50,7 +50,7 @@ export function SearchIndex(options: Fetch) {
   };
 
   return (
-    <EuiComboBox
+    <EuiCompressedComboBox
       placeholder="Select one or more index"
       options={indicesFromBackend}
       selectedOptions={selectedOptions}
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
index 4e99a4432..3d8134d0c 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_table.test.tsx.snap
@@ -98,7 +98,7 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
                     class="euiPopover__anchor"
                   >
                     <button
-                      class="euiButton euiButton--primary"
+                      class="euiButton euiButton--primary euiButton--small"
                       data-test-subj="operationalPanelsActionsButton"
                       type="button"
                     >
@@ -134,7 +134,7 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
                 class="euiFlexItem"
               >
                 <a
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   data-test-subj="customPanels__createNewPanels"
                   href="#/create"
                   rel="noreferrer"
@@ -157,13 +157,13 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
           class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
         />
         <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"
               data-test-subj="operationalPanelSearchBar"
               placeholder="Search Observability Dashboard name"
               type="search"
@@ -177,7 +177,7 @@ exports[`Panels Table Component render dashboard table container with panels 1`]
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -942,7 +942,7 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
                     class="euiPopover__anchor"
                   >
                     <button
-                      class="euiButton euiButton--primary"
+                      class="euiButton euiButton--primary euiButton--small"
                       data-test-subj="operationalPanelsActionsButton"
                       type="button"
                     >
@@ -977,7 +977,7 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
                 class="euiFlexItem"
               >
                 <a
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   data-test-subj="customPanels__createNewPanels"
                   href="#/create"
                   rel="noreferrer"
@@ -1039,7 +1039,7 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <a
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               data-test-subj="customPanels__emptyCreateNewPanels"
               href="#/create"
               rel="noreferrer"
@@ -1059,7 +1059,7 @@ exports[`Panels Table Component renders empty dashboard table container 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               type="button"
             >
               <span
@@ -1181,7 +1181,7 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
                     class="euiPopover__anchor"
                   >
                     <button
-                      class="euiButton euiButton--primary"
+                      class="euiButton euiButton--primary euiButton--small"
                       data-test-subj="operationalPanelsActionsButton"
                       type="button"
                     >
@@ -1217,7 +1217,7 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
                 class="euiFlexItem"
               >
                 <a
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   data-test-subj="customPanels__createNewPanels"
                   href="#/create"
                   rel="noreferrer"
@@ -1240,13 +1240,13 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
           class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
         />
         <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"
               data-test-subj="operationalPanelSearchBar"
               placeholder="Search Observability Dashboard name"
               type="search"
@@ -1260,7 +1260,7 @@ exports[`Panels Table Component renders empty panel table container2 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
index 060e3fe8c..f7b35c7f1 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
               class="euiFlexItem"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="editPanelButton"
                 disabled=""
                 type="button"
@@ -79,7 +79,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="panelActionContextMenu"
                     type="button"
                   >
@@ -122,7 +122,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -175,7 +175,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
               role="combobox"
             >
               <div
-                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
@@ -186,7 +186,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                     autocapitalize="off"
                     autocomplete="off"
                     autocorrect="off"
-                    class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                    class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed euiFieldText--inGroup"
                     data-test-subj="searchAutocompleteTextArea"
                     disabled=""
                     enterkeyhint="search"
@@ -220,7 +220,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                  class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                 >
                   <div
                     class="euiPopover euiPopover--anchorDownLeft"
@@ -282,7 +282,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                       class="euiDatePickerRange euiDatePickerRange--inGroup"
                     >
                       <button
-                        class="euiSuperDatePicker__prettyFormat"
+                        class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                         data-test-subj="superDatePickerShowDatesButton"
                       >
                         Last 30 minutes
@@ -303,7 +303,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -384,7 +384,7 @@ exports[`Panels View Component render panel view container and refresh panel 1`]
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -470,7 +470,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
               class="euiFlexItem"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="editPanelButton"
                 disabled=""
                 type="button"
@@ -510,7 +510,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="panelActionContextMenu"
                     type="button"
                   >
@@ -553,7 +553,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -606,7 +606,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
               role="combobox"
             >
               <div
-                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
@@ -617,7 +617,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                     autocapitalize="off"
                     autocomplete="off"
                     autocorrect="off"
-                    class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                    class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed euiFieldText--inGroup"
                     data-test-subj="searchAutocompleteTextArea"
                     disabled=""
                     enterkeyhint="search"
@@ -651,7 +651,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                  class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                 >
                   <div
                     class="euiPopover euiPopover--anchorDownLeft"
@@ -713,7 +713,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                       class="euiDatePickerRange euiDatePickerRange--inGroup"
                     >
                       <button
-                        class="euiSuperDatePicker__prettyFormat"
+                        class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                         data-test-subj="superDatePickerShowDatesButton"
                       >
                         Last 30 minutes
@@ -734,7 +734,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -815,7 +815,7 @@ exports[`Panels View Component render panel view so container and reload dashboa
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -1393,87 +1393,96 @@ exports[`Panels View Component renders panel view container with visualizations
                             <div
                               className="euiFlexItem"
                             >
-                              <EuiButton
+                              <EuiSmallButton
                                 data-test-subj="editPanelButton"
                                 disabled={true}
                                 iconType="pencil"
                                 onClick={[Function]}
                               >
-                                <EuiButtonDisplay
-                                  baseClassName="euiButton"
+                                <EuiButton
                                   data-test-subj="editPanelButton"
                                   disabled={true}
-                                  element="button"
                                   iconType="pencil"
-                                  isDisabled={true}
                                   onClick={[Function]}
-                                  type="button"
+                                  size="s"
                                 >
-                                  <button
-                                    className="euiButton euiButton--primary euiButton-isDisabled"
+                                  <EuiButtonDisplay
+                                    baseClassName="euiButton"
                                     data-test-subj="editPanelButton"
                                     disabled={true}
+                                    element="button"
+                                    iconType="pencil"
+                                    isDisabled={true}
                                     onClick={[Function]}
-                                    style={
-                                      Object {
-                                        "minWidth": undefined,
-                                      }
-                                    }
+                                    size="s"
                                     type="button"
                                   >
-                                    <EuiButtonContent
-                                      className="euiButton__content"
-                                      iconSide="left"
-                                      iconType="pencil"
-                                      textProps={
+                                    <button
+                                      className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                                      data-test-subj="editPanelButton"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      style={
                                         Object {
-                                          "className": "euiButton__text",
+                                          "minWidth": undefined,
                                         }
                                       }
+                                      type="button"
                                     >
-                                      <span
-                                        className="euiButtonContent euiButton__content"
+                                      <EuiButtonContent
+                                        className="euiButton__content"
+                                        iconSide="left"
+                                        iconType="pencil"
+                                        textProps={
+                                          Object {
+                                            "className": "euiButton__text",
+                                          }
+                                        }
                                       >
-                                        <EuiIcon
-                                          className="euiButtonContent__icon"
-                                          color="inherit"
-                                          size="m"
-                                          type="pencil"
+                                        <span
+                                          className="euiButtonContent euiButton__content"
                                         >
-                                          <EuiIconPencil
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="pencil"
                                           >
-                                            <svg
+                                            <EuiIconPencil
                                               aria-hidden={true}
                                               className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                               focusable="false"
-                                              height={16}
                                               role="img"
                                               style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
                                             >
-                                              <path
-                                                d="M12.148 3.148 11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998ZM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1ZM5 14H2v-3l3 3Z"
-                                              />
-                                            </svg>
-                                          </EuiIconPencil>
-                                        </EuiIcon>
-                                        <span
-                                          className="euiButton__text"
-                                        >
-                                          Edit
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M12.148 3.148 11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998ZM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1ZM5 14H2v-3l3 3Z"
+                                                />
+                                              </svg>
+                                            </EuiIconPencil>
+                                          </EuiIcon>
+                                          <span
+                                            className="euiButton__text"
+                                          >
+                                            Edit
+                                          </span>
                                         </span>
-                                      </span>
-                                    </EuiButtonContent>
-                                  </button>
-                                </EuiButtonDisplay>
-                              </EuiButton>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonDisplay>
+                                </EuiButton>
+                              </EuiSmallButton>
                             </div>
                           </EuiFlexItem>
                           <EuiFlexItem
@@ -1485,7 +1494,7 @@ exports[`Panels View Component renders panel view container with visualizations
                               <EuiPopover
                                 anchorPosition="downCenter"
                                 button={
-                                  <EuiButton
+                                  <EuiSmallButton
                                     data-test-subj="panelActionContextMenu"
                                     disabled={false}
                                     iconSide="right"
@@ -1493,7 +1502,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                     onClick={[Function]}
                                   >
                                     Dashboard Actions
-                                  </EuiButton>
+                                  </EuiSmallButton>
                                 }
                                 closePopover={[Function]}
                                 display="inlineBlock"
@@ -1510,90 +1519,100 @@ exports[`Panels View Component renders panel view container with visualizations
                                   <div
                                     className="euiPopover__anchor"
                                   >
-                                    <EuiButton
+                                    <EuiSmallButton
                                       data-test-subj="panelActionContextMenu"
                                       disabled={false}
                                       iconSide="right"
                                       iconType="arrowDown"
                                       onClick={[Function]}
                                     >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
+                                      <EuiButton
                                         data-test-subj="panelActionContextMenu"
                                         disabled={false}
-                                        element="button"
                                         iconSide="right"
                                         iconType="arrowDown"
-                                        isDisabled={false}
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary"
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
                                           data-test-subj="panelActionContextMenu"
                                           disabled={false}
+                                          element="button"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={false}
                                           onClick={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
+                                          size="s"
                                           type="button"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
+                                          <button
+                                            className="euiButton euiButton--primary euiButton--small"
+                                            data-test-subj="panelActionContextMenu"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            style={
                                               Object {
-                                                "className": "euiButton__text",
+                                                "minWidth": undefined,
                                               }
                                             }
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            <EuiButtonContent
+                                              className="euiButton__content"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButton__text",
+                                                }
+                                              }
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="arrowDown"
+                                              <span
+                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                               >
-                                                <EuiIconArrowDown
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
+                                                <EuiIcon
+                                                  className="euiButtonContent__icon"
+                                                  color="inherit"
+                                                  size="m"
+                                                  type="arrowDown"
                                                 >
-                                                  <svg
+                                                  <EuiIconArrowDown
                                                     aria-hidden={true}
                                                     className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                     focusable="false"
-                                                    height={16}
                                                     role="img"
                                                     style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
                                                   >
-                                                    <path
-                                                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                                      fillRule="non-zero"
-                                                    />
-                                                  </svg>
-                                                </EuiIconArrowDown>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Dashboard Actions
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <path
+                                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                        fillRule="non-zero"
+                                                      />
+                                                    </svg>
+                                                  </EuiIconArrowDown>
+                                                </EuiIcon>
+                                                <span
+                                                  className="euiButton__text"
+                                                >
+                                                  Dashboard Actions
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </EuiSmallButton>
                                   </div>
                                 </div>
                               </EuiPopover>
@@ -1612,7 +1631,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                 <EuiPopover
                                   anchorPosition="downLeft"
                                   button={
-                                    <EuiButton
+                                    <EuiSmallButton
                                       data-test-subj="addVisualizationButton"
                                       disabled={false}
                                       iconSide="right"
@@ -1620,7 +1639,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                       onClick={[Function]}
                                     >
                                       Add visualization
-                                    </EuiButton>
+                                    </EuiSmallButton>
                                   }
                                   closePopover={[Function]}
                                   display="inlineBlock"
@@ -1637,90 +1656,100 @@ exports[`Panels View Component renders panel view container with visualizations
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButton
+                                      <EuiSmallButton
                                         data-test-subj="addVisualizationButton"
                                         disabled={false}
                                         iconSide="right"
                                         iconType="arrowDown"
                                         onClick={[Function]}
                                       >
-                                        <EuiButtonDisplay
-                                          baseClassName="euiButton"
+                                        <EuiButton
                                           data-test-subj="addVisualizationButton"
                                           disabled={false}
-                                          element="button"
                                           iconSide="right"
                                           iconType="arrowDown"
-                                          isDisabled={false}
                                           onClick={[Function]}
-                                          type="button"
+                                          size="s"
                                         >
-                                          <button
-                                            className="euiButton euiButton--primary"
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
                                             data-test-subj="addVisualizationButton"
                                             disabled={false}
+                                            element="button"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={false}
                                             onClick={[Function]}
-                                            style={
-                                              Object {
-                                                "minWidth": undefined,
-                                              }
-                                            }
+                                            size="s"
                                             type="button"
                                           >
-                                            <EuiButtonContent
-                                              className="euiButton__content"
-                                              iconSide="right"
-                                              iconType="arrowDown"
-                                              textProps={
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--small"
+                                              data-test-subj="addVisualizationButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
                                                 Object {
-                                                  "className": "euiButton__text",
+                                                  "minWidth": undefined,
                                                 }
                                               }
+                                              type="button"
                                             >
-                                              <span
-                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
                                               >
-                                                <EuiIcon
-                                                  className="euiButtonContent__icon"
-                                                  color="inherit"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                                 >
-                                                  <EuiIconArrowDown
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconArrowDown
                                                       aria-hidden={true}
                                                       className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                                        fillRule="non-zero"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconArrowDown>
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiButton__text"
-                                                >
-                                                  Add visualization
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                          fillRule="non-zero"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconArrowDown>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Add visualization
+                                                  </span>
                                                 </span>
-                                              </span>
-                                            </EuiButtonContent>
-                                          </button>
-                                        </EuiButtonDisplay>
-                                      </EuiButton>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </EuiSmallButton>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -1797,7 +1826,7 @@ exports[`Panels View Component renders panel view container with visualizations
                               id="autocomplete-root"
                               role="combobox"
                             >
-                              <EuiFieldText
+                              <EuiCompressedFieldText
                                 append={
                                   <EuiLink
                                     aria-label="ppl-info"
@@ -1840,7 +1869,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                 type="search"
                                 value=""
                               >
-                                <EuiFormControlLayout
+                                <EuiFieldText
                                   append={
                                     <EuiLink
                                       aria-label="ppl-info"
@@ -1854,78 +1883,126 @@ exports[`Panels View Component renders panel view container with visualizations
                                       PPL
                                     </EuiLink>
                                   }
+                                  aria-autocomplete="both"
+                                  aria-labelledby="autocomplete-4-label"
+                                  autoCapitalize="off"
+                                  autoComplete="off"
+                                  autoCorrect="off"
+                                  autoFocus={false}
+                                  compressed={true}
+                                  data-test-subj="searchAutocompleteTextArea"
+                                  disabled={true}
+                                  enterKeyHint="search"
                                   fullWidth={true}
-                                  inputId="autocomplete-textarea"
+                                  id="autocomplete-textarea"
+                                  maxLength={16384}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onKeyDown={[Function]}
+                                  placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                  spellCheck="false"
+                                  style={
+                                    Object {
+                                      "height": "18px",
+                                      "marginTop": "0px",
+                                      "padding": "8px",
+                                    }
+                                  }
+                                  type="search"
+                                  value=""
                                 >
-                                  <div
-                                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                  <EuiFormControlLayout
+                                    append={
+                                      <EuiLink
+                                        aria-label="ppl-info"
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "padding": "10px",
+                                          }
+                                        }
+                                      >
+                                        PPL
+                                      </EuiLink>
+                                    }
+                                    compressed={true}
+                                    fullWidth={true}
+                                    inputId="autocomplete-textarea"
                                   >
                                     <div
-                                      className="euiFormControlLayout__childrenWrapper"
+                                      className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
                                     >
-                                      <EuiValidatableControl>
-                                        <input
-                                          aria-autocomplete="both"
-                                          aria-labelledby="autocomplete-4-label"
-                                          autoCapitalize="off"
-                                          autoComplete="off"
-                                          autoCorrect="off"
-                                          autoFocus={false}
-                                          className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                                          data-test-subj="searchAutocompleteTextArea"
-                                          disabled={true}
-                                          enterKeyHint="search"
-                                          id="autocomplete-textarea"
-                                          maxLength={16384}
-                                          onBlur={[Function]}
-                                          onChange={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                                          spellCheck="false"
-                                          style={
-                                            Object {
-                                              "height": "18px",
-                                              "marginTop": "0px",
-                                              "padding": "8px",
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiValidatableControl>
+                                          <input
+                                            aria-autocomplete="both"
+                                            aria-labelledby="autocomplete-4-label"
+                                            autoCapitalize="off"
+                                            autoComplete="off"
+                                            autoCorrect="off"
+                                            autoFocus={false}
+                                            className="euiFieldText euiFieldText--fullWidth euiFieldText--compressed euiFieldText--inGroup"
+                                            data-test-subj="searchAutocompleteTextArea"
+                                            disabled={true}
+                                            enterKeyHint="search"
+                                            id="autocomplete-textarea"
+                                            maxLength={16384}
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onKeyDown={[Function]}
+                                            placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                            spellCheck="false"
+                                            style={
+                                              Object {
+                                                "height": "18px",
+                                                "marginTop": "0px",
+                                                "padding": "8px",
+                                              }
                                             }
-                                          }
-                                          type="search"
-                                          value=""
+                                            type="search"
+                                            value=""
+                                          />
+                                        </EuiValidatableControl>
+                                        <EuiFormControlLayoutIcons
+                                          compressed={true}
                                         />
-                                      </EuiValidatableControl>
-                                      <EuiFormControlLayoutIcons />
-                                    </div>
-                                    <EuiLink
-                                      aria-label="ppl-info"
-                                      className="euiFormControlLayout__append"
-                                      key="0/.0"
-                                      onClick={[Function]}
-                                      style={
-                                        Object {
-                                          "padding": "10px",
-                                        }
-                                      }
-                                    >
-                                      <button
+                                      </div>
+                                      <EuiLink
                                         aria-label="ppl-info"
-                                        className="euiLink euiLink--primary euiFormControlLayout__append"
-                                        disabled={false}
+                                        className="euiFormControlLayout__append"
+                                        key="0/.0"
                                         onClick={[Function]}
                                         style={
                                           Object {
                                             "padding": "10px",
                                           }
                                         }
-                                        type="button"
                                       >
-                                        PPL
-                                      </button>
-                                    </EuiLink>
-                                  </div>
-                                </EuiFormControlLayout>
-                              </EuiFieldText>
+                                        <button
+                                          aria-label="ppl-info"
+                                          className="euiLink euiLink--primary euiFormControlLayout__append"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "padding": "10px",
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          PPL
+                                        </button>
+                                      </EuiLink>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </EuiFieldText>
+                              </EuiCompressedFieldText>
                             </div>
                           </Autocomplete>
                         </div>
@@ -1936,7 +2013,7 @@ exports[`Panels View Component renders panel view container with visualizations
                         <div
                           className="euiFlexItem euiFlexItem--flexGrowZero"
                         >
-                          <EuiSuperDatePicker
+                          <EuiCompressedSuperDatePicker
                             commonlyUsedRanges={
                               Array [
                                 Object {
@@ -1981,7 +2058,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                 },
                               ]
                             }
-                            compressed={false}
+                            compressed={true}
                             dateFormat=""
                             end="now"
                             isAutoRefreshOnly={false}
@@ -2008,7 +2085,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                   >
                                     <EuiFormControlLayout
                                       className="euiSuperDatePicker"
-                                      compressed={false}
+                                      compressed={true}
                                       isDisabled={false}
                                       prepend={
                                         <EuiQuickSelectPopover
@@ -2069,7 +2146,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                       }
                                     >
                                       <div
-                                        className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                                       >
                                         <EuiQuickSelectPopover
                                           applyTime={[Function]}
@@ -2287,7 +2364,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               className="euiDatePickerRange euiDatePickerRange--inGroup"
                                             >
                                               <button
-                                                className="euiSuperDatePicker__prettyFormat"
+                                                className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                                                 data-test-subj="superDatePickerShowDatesButton"
                                                 disabled={false}
                                                 onClick={[Function]}
@@ -2307,7 +2384,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                             </div>
                                           </EuiDatePickerRange>
                                           <EuiFormControlLayoutIcons
-                                            compressed={false}
+                                            compressed={true}
                                           />
                                         </div>
                                       </div>
@@ -2321,7 +2398,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                     className="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <EuiSuperUpdateButton
-                                      compressed={false}
+                                      compressed={true}
                                       data-test-subj="superDatePickerApplyTimeButton"
                                       isDisabled={false}
                                       isLoading={false}
@@ -2349,7 +2426,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
-                                            size="m"
+                                            size="s"
                                             textProps={
                                               Object {
                                                 "className": "euiSuperUpdateButton__text",
@@ -2369,7 +2446,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
-                                              size="m"
+                                              size="s"
                                               textProps={
                                                 Object {
                                                   "className": "euiSuperUpdateButton__text",
@@ -2378,7 +2455,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                               type="button"
                                             >
                                               <button
-                                                className="euiButton euiButton--primary euiSuperUpdateButton"
+                                                className="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
                                                 data-test-subj="superDatePickerApplyTimeButton"
                                                 disabled={false}
                                                 onBlur={[Function]}
@@ -2457,7 +2534,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                 </EuiFlexItem>
                               </div>
                             </EuiFlexGroup>
-                          </EuiSuperDatePicker>
+                          </EuiCompressedSuperDatePicker>
                         </div>
                       </EuiFlexItem>
                     </div>
@@ -2554,7 +2631,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                 <EuiPopover
                                   anchorPosition="downLeft"
                                   button={
-                                    <EuiButton
+                                    <EuiSmallButton
                                       data-test-subj="addVisualizationButton"
                                       disabled={false}
                                       iconSide="right"
@@ -2562,7 +2639,7 @@ exports[`Panels View Component renders panel view container with visualizations
                                       onClick={[Function]}
                                     >
                                       Add visualization
-                                    </EuiButton>
+                                    </EuiSmallButton>
                                   }
                                   closePopover={[Function]}
                                   display="inlineBlock"
@@ -2579,90 +2656,100 @@ exports[`Panels View Component renders panel view container with visualizations
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButton
+                                      <EuiSmallButton
                                         data-test-subj="addVisualizationButton"
                                         disabled={false}
                                         iconSide="right"
                                         iconType="arrowDown"
                                         onClick={[Function]}
                                       >
-                                        <EuiButtonDisplay
-                                          baseClassName="euiButton"
+                                        <EuiButton
                                           data-test-subj="addVisualizationButton"
                                           disabled={false}
-                                          element="button"
                                           iconSide="right"
                                           iconType="arrowDown"
-                                          isDisabled={false}
                                           onClick={[Function]}
-                                          type="button"
+                                          size="s"
                                         >
-                                          <button
-                                            className="euiButton euiButton--primary"
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
                                             data-test-subj="addVisualizationButton"
                                             disabled={false}
+                                            element="button"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={false}
                                             onClick={[Function]}
-                                            style={
-                                              Object {
-                                                "minWidth": undefined,
-                                              }
-                                            }
+                                            size="s"
                                             type="button"
                                           >
-                                            <EuiButtonContent
-                                              className="euiButton__content"
-                                              iconSide="right"
-                                              iconType="arrowDown"
-                                              textProps={
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--small"
+                                              data-test-subj="addVisualizationButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
                                                 Object {
-                                                  "className": "euiButton__text",
+                                                  "minWidth": undefined,
                                                 }
                                               }
+                                              type="button"
                                             >
-                                              <span
-                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
                                               >
-                                                <EuiIcon
-                                                  className="euiButtonContent__icon"
-                                                  color="inherit"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                                 >
-                                                  <EuiIconArrowDown
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconArrowDown
                                                       aria-hidden={true}
                                                       className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                                        fillRule="non-zero"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconArrowDown>
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiButton__text"
-                                                >
-                                                  Add visualization
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                          fillRule="non-zero"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconArrowDown>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Add visualization
+                                                  </span>
                                                 </span>
-                                              </span>
-                                            </EuiButtonContent>
-                                          </button>
-                                        </EuiButtonDisplay>
-                                      </EuiButton>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </EuiSmallButton>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -3657,87 +3744,96 @@ exports[`Panels View Component renders panel view container without visualizatio
                             <div
                               className="euiFlexItem"
                             >
-                              <EuiButton
+                              <EuiSmallButton
                                 data-test-subj="editPanelButton"
                                 disabled={true}
                                 iconType="pencil"
                                 onClick={[Function]}
                               >
-                                <EuiButtonDisplay
-                                  baseClassName="euiButton"
+                                <EuiButton
                                   data-test-subj="editPanelButton"
                                   disabled={true}
-                                  element="button"
                                   iconType="pencil"
-                                  isDisabled={true}
                                   onClick={[Function]}
-                                  type="button"
+                                  size="s"
                                 >
-                                  <button
-                                    className="euiButton euiButton--primary euiButton-isDisabled"
+                                  <EuiButtonDisplay
+                                    baseClassName="euiButton"
                                     data-test-subj="editPanelButton"
                                     disabled={true}
+                                    element="button"
+                                    iconType="pencil"
+                                    isDisabled={true}
                                     onClick={[Function]}
-                                    style={
-                                      Object {
-                                        "minWidth": undefined,
-                                      }
-                                    }
+                                    size="s"
                                     type="button"
                                   >
-                                    <EuiButtonContent
-                                      className="euiButton__content"
-                                      iconSide="left"
-                                      iconType="pencil"
-                                      textProps={
+                                    <button
+                                      className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                                      data-test-subj="editPanelButton"
+                                      disabled={true}
+                                      onClick={[Function]}
+                                      style={
                                         Object {
-                                          "className": "euiButton__text",
+                                          "minWidth": undefined,
                                         }
                                       }
+                                      type="button"
                                     >
-                                      <span
-                                        className="euiButtonContent euiButton__content"
+                                      <EuiButtonContent
+                                        className="euiButton__content"
+                                        iconSide="left"
+                                        iconType="pencil"
+                                        textProps={
+                                          Object {
+                                            "className": "euiButton__text",
+                                          }
+                                        }
                                       >
-                                        <EuiIcon
-                                          className="euiButtonContent__icon"
-                                          color="inherit"
-                                          size="m"
-                                          type="pencil"
+                                        <span
+                                          className="euiButtonContent euiButton__content"
                                         >
-                                          <EuiIconBeaker
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="pencil"
                                           >
-                                            <svg
+                                            <EuiIconBeaker
                                               aria-hidden={true}
                                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                               focusable="false"
-                                              height={16}
                                               role="img"
                                               style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
                                             >
-                                              <path
-                                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                              />
-                                            </svg>
-                                          </EuiIconBeaker>
-                                        </EuiIcon>
-                                        <span
-                                          className="euiButton__text"
-                                        >
-                                          Edit
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                />
+                                              </svg>
+                                            </EuiIconBeaker>
+                                          </EuiIcon>
+                                          <span
+                                            className="euiButton__text"
+                                          >
+                                            Edit
+                                          </span>
                                         </span>
-                                      </span>
-                                    </EuiButtonContent>
-                                  </button>
-                                </EuiButtonDisplay>
-                              </EuiButton>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonDisplay>
+                                </EuiButton>
+                              </EuiSmallButton>
                             </div>
                           </EuiFlexItem>
                           <EuiFlexItem
@@ -3749,7 +3845,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                               <EuiPopover
                                 anchorPosition="downCenter"
                                 button={
-                                  <EuiButton
+                                  <EuiSmallButton
                                     data-test-subj="panelActionContextMenu"
                                     disabled={false}
                                     iconSide="right"
@@ -3757,7 +3853,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     onClick={[Function]}
                                   >
                                     Dashboard Actions
-                                  </EuiButton>
+                                  </EuiSmallButton>
                                 }
                                 closePopover={[Function]}
                                 display="inlineBlock"
@@ -3774,89 +3870,99 @@ exports[`Panels View Component renders panel view container without visualizatio
                                   <div
                                     className="euiPopover__anchor"
                                   >
-                                    <EuiButton
+                                    <EuiSmallButton
                                       data-test-subj="panelActionContextMenu"
                                       disabled={false}
                                       iconSide="right"
                                       iconType="arrowDown"
                                       onClick={[Function]}
                                     >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
+                                      <EuiButton
                                         data-test-subj="panelActionContextMenu"
                                         disabled={false}
-                                        element="button"
                                         iconSide="right"
                                         iconType="arrowDown"
-                                        isDisabled={false}
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary"
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
                                           data-test-subj="panelActionContextMenu"
                                           disabled={false}
+                                          element="button"
+                                          iconSide="right"
+                                          iconType="arrowDown"
+                                          isDisabled={false}
                                           onClick={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
+                                          size="s"
                                           type="button"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="right"
-                                            iconType="arrowDown"
-                                            textProps={
+                                          <button
+                                            className="euiButton euiButton--primary euiButton--small"
+                                            data-test-subj="panelActionContextMenu"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            style={
                                               Object {
-                                                "className": "euiButton__text",
+                                                "minWidth": undefined,
                                               }
                                             }
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                            <EuiButtonContent
+                                              className="euiButton__content"
+                                              iconSide="right"
+                                              iconType="arrowDown"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButton__text",
+                                                }
+                                              }
                                             >
-                                              <EuiIcon
-                                                className="euiButtonContent__icon"
-                                                color="inherit"
-                                                size="m"
-                                                type="arrowDown"
+                                              <span
+                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                               >
-                                                <EuiIconBeaker
-                                                  aria-hidden={true}
-                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                  focusable="false"
-                                                  role="img"
-                                                  style={null}
+                                                <EuiIcon
+                                                  className="euiButtonContent__icon"
+                                                  color="inherit"
+                                                  size="m"
+                                                  type="arrowDown"
                                                 >
-                                                  <svg
+                                                  <EuiIconBeaker
                                                     aria-hidden={true}
                                                     className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                     focusable="false"
-                                                    height={16}
                                                     role="img"
                                                     style={null}
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
                                                   >
-                                                    <path
-                                                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                    />
-                                                  </svg>
-                                                </EuiIconBeaker>
-                                              </EuiIcon>
-                                              <span
-                                                className="euiButton__text"
-                                              >
-                                                Dashboard Actions
+                                                    <svg
+                                                      aria-hidden={true}
+                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                      focusable="false"
+                                                      height={16}
+                                                      role="img"
+                                                      style={null}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                      xmlns="http://www.w3.org/2000/svg"
+                                                    >
+                                                      <path
+                                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                      />
+                                                    </svg>
+                                                  </EuiIconBeaker>
+                                                </EuiIcon>
+                                                <span
+                                                  className="euiButton__text"
+                                                >
+                                                  Dashboard Actions
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </EuiSmallButton>
                                   </div>
                                 </div>
                               </EuiPopover>
@@ -3875,7 +3981,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                 <EuiPopover
                                   anchorPosition="downLeft"
                                   button={
-                                    <EuiButton
+                                    <EuiSmallButton
                                       data-test-subj="addVisualizationButton"
                                       disabled={false}
                                       iconSide="right"
@@ -3883,7 +3989,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       onClick={[Function]}
                                     >
                                       Add visualization
-                                    </EuiButton>
+                                    </EuiSmallButton>
                                   }
                                   closePopover={[Function]}
                                   display="inlineBlock"
@@ -3900,89 +4006,99 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButton
+                                      <EuiSmallButton
                                         data-test-subj="addVisualizationButton"
                                         disabled={false}
                                         iconSide="right"
                                         iconType="arrowDown"
                                         onClick={[Function]}
                                       >
-                                        <EuiButtonDisplay
-                                          baseClassName="euiButton"
+                                        <EuiButton
                                           data-test-subj="addVisualizationButton"
                                           disabled={false}
-                                          element="button"
                                           iconSide="right"
                                           iconType="arrowDown"
-                                          isDisabled={false}
                                           onClick={[Function]}
-                                          type="button"
+                                          size="s"
                                         >
-                                          <button
-                                            className="euiButton euiButton--primary"
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
                                             data-test-subj="addVisualizationButton"
                                             disabled={false}
+                                            element="button"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={false}
                                             onClick={[Function]}
-                                            style={
-                                              Object {
-                                                "minWidth": undefined,
-                                              }
-                                            }
+                                            size="s"
                                             type="button"
                                           >
-                                            <EuiButtonContent
-                                              className="euiButton__content"
-                                              iconSide="right"
-                                              iconType="arrowDown"
-                                              textProps={
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--small"
+                                              data-test-subj="addVisualizationButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
                                                 Object {
-                                                  "className": "euiButton__text",
+                                                  "minWidth": undefined,
                                                 }
                                               }
+                                              type="button"
                                             >
-                                              <span
-                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
                                               >
-                                                <EuiIcon
-                                                  className="euiButtonContent__icon"
-                                                  color="inherit"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                                 >
-                                                  <EuiIconBeaker
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconBeaker
                                                       aria-hidden={true}
                                                       className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconBeaker>
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiButton__text"
-                                                >
-                                                  Add visualization
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconBeaker>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Add visualization
+                                                  </span>
                                                 </span>
-                                              </span>
-                                            </EuiButtonContent>
-                                          </button>
-                                        </EuiButtonDisplay>
-                                      </EuiButton>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </EuiSmallButton>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -4059,7 +4175,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                               id="autocomplete-root"
                               role="combobox"
                             >
-                              <EuiFieldText
+                              <EuiCompressedFieldText
                                 append={
                                   <EuiLink
                                     aria-label="ppl-info"
@@ -4102,7 +4218,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                 type="search"
                                 value=""
                               >
-                                <EuiFormControlLayout
+                                <EuiFieldText
                                   append={
                                     <EuiLink
                                       aria-label="ppl-info"
@@ -4116,78 +4232,126 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       PPL
                                     </EuiLink>
                                   }
+                                  aria-autocomplete="both"
+                                  aria-labelledby="autocomplete-1-label"
+                                  autoCapitalize="off"
+                                  autoComplete="off"
+                                  autoCorrect="off"
+                                  autoFocus={false}
+                                  compressed={true}
+                                  data-test-subj="searchAutocompleteTextArea"
+                                  disabled={true}
+                                  enterKeyHint="search"
                                   fullWidth={true}
-                                  inputId="autocomplete-textarea"
+                                  id="autocomplete-textarea"
+                                  maxLength={16384}
+                                  onBlur={[Function]}
+                                  onChange={[Function]}
+                                  onClick={[Function]}
+                                  onFocus={[Function]}
+                                  onKeyDown={[Function]}
+                                  placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                  spellCheck="false"
+                                  style={
+                                    Object {
+                                      "height": "18px",
+                                      "marginTop": "0px",
+                                      "padding": "8px",
+                                    }
+                                  }
+                                  type="search"
+                                  value=""
                                 >
-                                  <div
-                                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                                  <EuiFormControlLayout
+                                    append={
+                                      <EuiLink
+                                        aria-label="ppl-info"
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "padding": "10px",
+                                          }
+                                        }
+                                      >
+                                        PPL
+                                      </EuiLink>
+                                    }
+                                    compressed={true}
+                                    fullWidth={true}
+                                    inputId="autocomplete-textarea"
                                   >
                                     <div
-                                      className="euiFormControlLayout__childrenWrapper"
+                                      className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
                                     >
-                                      <EuiValidatableControl>
-                                        <input
-                                          aria-autocomplete="both"
-                                          aria-labelledby="autocomplete-1-label"
-                                          autoCapitalize="off"
-                                          autoComplete="off"
-                                          autoCorrect="off"
-                                          autoFocus={false}
-                                          className="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
-                                          data-test-subj="searchAutocompleteTextArea"
-                                          disabled={true}
-                                          enterKeyHint="search"
-                                          id="autocomplete-textarea"
-                                          maxLength={16384}
-                                          onBlur={[Function]}
-                                          onChange={[Function]}
-                                          onClick={[Function]}
-                                          onFocus={[Function]}
-                                          onKeyDown={[Function]}
-                                          placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
-                                          spellCheck="false"
-                                          style={
-                                            Object {
-                                              "height": "18px",
-                                              "marginTop": "0px",
-                                              "padding": "8px",
+                                      <div
+                                        className="euiFormControlLayout__childrenWrapper"
+                                      >
+                                        <EuiValidatableControl>
+                                          <input
+                                            aria-autocomplete="both"
+                                            aria-labelledby="autocomplete-1-label"
+                                            autoCapitalize="off"
+                                            autoComplete="off"
+                                            autoCorrect="off"
+                                            autoFocus={false}
+                                            className="euiFieldText euiFieldText--fullWidth euiFieldText--compressed euiFieldText--inGroup"
+                                            data-test-subj="searchAutocompleteTextArea"
+                                            disabled={true}
+                                            enterKeyHint="search"
+                                            id="autocomplete-textarea"
+                                            maxLength={16384}
+                                            onBlur={[Function]}
+                                            onChange={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onKeyDown={[Function]}
+                                            placeholder="Use PPL 'where' clauses to add filters on all visualizations [where Carrier = 'OpenSearch-Air']"
+                                            spellCheck="false"
+                                            style={
+                                              Object {
+                                                "height": "18px",
+                                                "marginTop": "0px",
+                                                "padding": "8px",
+                                              }
                                             }
-                                          }
-                                          type="search"
-                                          value=""
+                                            type="search"
+                                            value=""
+                                          />
+                                        </EuiValidatableControl>
+                                        <EuiFormControlLayoutIcons
+                                          compressed={true}
                                         />
-                                      </EuiValidatableControl>
-                                      <EuiFormControlLayoutIcons />
-                                    </div>
-                                    <EuiLink
-                                      aria-label="ppl-info"
-                                      className="euiFormControlLayout__append"
-                                      key="0/.0"
-                                      onClick={[Function]}
-                                      style={
-                                        Object {
-                                          "padding": "10px",
-                                        }
-                                      }
-                                    >
-                                      <button
+                                      </div>
+                                      <EuiLink
                                         aria-label="ppl-info"
-                                        className="euiLink euiLink--primary euiFormControlLayout__append"
-                                        disabled={false}
+                                        className="euiFormControlLayout__append"
+                                        key="0/.0"
                                         onClick={[Function]}
                                         style={
                                           Object {
                                             "padding": "10px",
                                           }
                                         }
-                                        type="button"
                                       >
-                                        PPL
-                                      </button>
-                                    </EuiLink>
-                                  </div>
-                                </EuiFormControlLayout>
-                              </EuiFieldText>
+                                        <button
+                                          aria-label="ppl-info"
+                                          className="euiLink euiLink--primary euiFormControlLayout__append"
+                                          disabled={false}
+                                          onClick={[Function]}
+                                          style={
+                                            Object {
+                                              "padding": "10px",
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          PPL
+                                        </button>
+                                      </EuiLink>
+                                    </div>
+                                  </EuiFormControlLayout>
+                                </EuiFieldText>
+                              </EuiCompressedFieldText>
                             </div>
                           </Autocomplete>
                         </div>
@@ -4198,7 +4362,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                         <div
                           className="euiFlexItem euiFlexItem--flexGrowZero"
                         >
-                          <EuiSuperDatePicker
+                          <EuiCompressedSuperDatePicker
                             commonlyUsedRanges={
                               Array [
                                 Object {
@@ -4243,7 +4407,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                 },
                               ]
                             }
-                            compressed={false}
+                            compressed={true}
                             dateFormat=""
                             end="now"
                             isAutoRefreshOnly={false}
@@ -4270,7 +4434,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                   >
                                     <EuiFormControlLayout
                                       className="euiSuperDatePicker"
-                                      compressed={false}
+                                      compressed={true}
                                       isDisabled={false}
                                       prepend={
                                         <EuiQuickSelectPopover
@@ -4331,7 +4495,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       }
                                     >
                                       <div
-                                        className="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                                        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                                       >
                                         <EuiQuickSelectPopover
                                           applyTime={[Function]}
@@ -4547,7 +4711,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               className="euiDatePickerRange euiDatePickerRange--inGroup"
                                             >
                                               <button
-                                                className="euiSuperDatePicker__prettyFormat"
+                                                className="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                                                 data-test-subj="superDatePickerShowDatesButton"
                                                 disabled={false}
                                                 onClick={[Function]}
@@ -4567,7 +4731,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                             </div>
                                           </EuiDatePickerRange>
                                           <EuiFormControlLayoutIcons
-                                            compressed={false}
+                                            compressed={true}
                                           />
                                         </div>
                                       </div>
@@ -4581,7 +4745,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     className="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <EuiSuperUpdateButton
-                                      compressed={false}
+                                      compressed={true}
                                       data-test-subj="superDatePickerApplyTimeButton"
                                       isDisabled={false}
                                       isLoading={false}
@@ -4609,7 +4773,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                             onBlur={[Function]}
                                             onClick={[Function]}
                                             onFocus={[Function]}
-                                            size="m"
+                                            size="s"
                                             textProps={
                                               Object {
                                                 "className": "euiSuperUpdateButton__text",
@@ -4629,7 +4793,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               onBlur={[Function]}
                                               onClick={[Function]}
                                               onFocus={[Function]}
-                                              size="m"
+                                              size="s"
                                               textProps={
                                                 Object {
                                                   "className": "euiSuperUpdateButton__text",
@@ -4638,7 +4802,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                               type="button"
                                             >
                                               <button
-                                                className="euiButton euiButton--primary euiSuperUpdateButton"
+                                                className="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
                                                 data-test-subj="superDatePickerApplyTimeButton"
                                                 disabled={false}
                                                 onBlur={[Function]}
@@ -4717,7 +4881,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                 </EuiFlexItem>
                               </div>
                             </EuiFlexGroup>
-                          </EuiSuperDatePicker>
+                          </EuiCompressedSuperDatePicker>
                         </div>
                       </EuiFlexItem>
                     </div>
@@ -4814,7 +4978,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                 <EuiPopover
                                   anchorPosition="downLeft"
                                   button={
-                                    <EuiButton
+                                    <EuiSmallButton
                                       data-test-subj="addVisualizationButton"
                                       disabled={false}
                                       iconSide="right"
@@ -4822,7 +4986,7 @@ exports[`Panels View Component renders panel view container without visualizatio
                                       onClick={[Function]}
                                     >
                                       Add visualization
-                                    </EuiButton>
+                                    </EuiSmallButton>
                                   }
                                   closePopover={[Function]}
                                   display="inlineBlock"
@@ -4839,89 +5003,99 @@ exports[`Panels View Component renders panel view container without visualizatio
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButton
+                                      <EuiSmallButton
                                         data-test-subj="addVisualizationButton"
                                         disabled={false}
                                         iconSide="right"
                                         iconType="arrowDown"
                                         onClick={[Function]}
                                       >
-                                        <EuiButtonDisplay
-                                          baseClassName="euiButton"
+                                        <EuiButton
                                           data-test-subj="addVisualizationButton"
                                           disabled={false}
-                                          element="button"
                                           iconSide="right"
                                           iconType="arrowDown"
-                                          isDisabled={false}
                                           onClick={[Function]}
-                                          type="button"
+                                          size="s"
                                         >
-                                          <button
-                                            className="euiButton euiButton--primary"
+                                          <EuiButtonDisplay
+                                            baseClassName="euiButton"
                                             data-test-subj="addVisualizationButton"
                                             disabled={false}
+                                            element="button"
+                                            iconSide="right"
+                                            iconType="arrowDown"
+                                            isDisabled={false}
                                             onClick={[Function]}
-                                            style={
-                                              Object {
-                                                "minWidth": undefined,
-                                              }
-                                            }
+                                            size="s"
                                             type="button"
                                           >
-                                            <EuiButtonContent
-                                              className="euiButton__content"
-                                              iconSide="right"
-                                              iconType="arrowDown"
-                                              textProps={
+                                            <button
+                                              className="euiButton euiButton--primary euiButton--small"
+                                              data-test-subj="addVisualizationButton"
+                                              disabled={false}
+                                              onClick={[Function]}
+                                              style={
                                                 Object {
-                                                  "className": "euiButton__text",
+                                                  "minWidth": undefined,
                                                 }
                                               }
+                                              type="button"
                                             >
-                                              <span
-                                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                              <EuiButtonContent
+                                                className="euiButton__content"
+                                                iconSide="right"
+                                                iconType="arrowDown"
+                                                textProps={
+                                                  Object {
+                                                    "className": "euiButton__text",
+                                                  }
+                                                }
                                               >
-                                                <EuiIcon
-                                                  className="euiButtonContent__icon"
-                                                  color="inherit"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                                 >
-                                                  <EuiIconBeaker
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    className="euiButtonContent__icon"
+                                                    color="inherit"
+                                                    size="m"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconBeaker
                                                       aria-hidden={true}
                                                       className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconBeaker>
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiButton__text"
-                                                >
-                                                  Add visualization
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconBeaker>
+                                                  </EuiIcon>
+                                                  <span
+                                                    className="euiButton__text"
+                                                  >
+                                                    Add visualization
+                                                  </span>
                                                 </span>
-                                              </span>
-                                            </EuiButtonContent>
-                                          </button>
-                                        </EuiButtonDisplay>
-                                      </EuiButton>
+                                              </EuiButtonContent>
+                                            </button>
+                                          </EuiButtonDisplay>
+                                        </EuiButton>
+                                      </EuiSmallButton>
                                     </div>
                                   </div>
                                 </EuiPopover>
diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap
index b816b56e3..f2cf3b5e3 100644
--- a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap
+++ b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view_so.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
               class="euiFlexItem"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="editPanelButton"
                 disabled=""
                 type="button"
@@ -79,7 +79,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="panelActionContextMenu"
                     type="button"
                   >
@@ -122,7 +122,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -175,7 +175,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
               role="combobox"
             >
               <div
-                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
@@ -186,7 +186,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                     autocapitalize="off"
                     autocomplete="off"
                     autocorrect="off"
-                    class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                    class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed euiFieldText--inGroup"
                     data-test-subj="searchAutocompleteTextArea"
                     disabled=""
                     enterkeyhint="search"
@@ -220,7 +220,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                  class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                 >
                   <div
                     class="euiPopover euiPopover--anchorDownLeft"
@@ -282,7 +282,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                       class="euiDatePickerRange euiDatePickerRange--inGroup"
                     >
                       <button
-                        class="euiSuperDatePicker__prettyFormat"
+                        class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                         data-test-subj="superDatePickerShowDatesButton"
                       >
                         Last 1 day
@@ -303,7 +303,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -384,7 +384,7 @@ exports[`Panels View SO Component render panel view container and refresh panel
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -470,7 +470,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
               class="euiFlexItem"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="editPanelButton"
                 disabled=""
                 type="button"
@@ -510,7 +510,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="panelActionContextMenu"
                     type="button"
                   >
@@ -553,7 +553,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -606,7 +606,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
               role="combobox"
             >
               <div
-                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
@@ -617,7 +617,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                     autocapitalize="off"
                     autocomplete="off"
                     autocorrect="off"
-                    class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                    class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed euiFieldText--inGroup"
                     data-test-subj="searchAutocompleteTextArea"
                     disabled=""
                     enterkeyhint="search"
@@ -651,7 +651,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                  class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                 >
                   <div
                     class="euiPopover euiPopover--anchorDownLeft"
@@ -713,7 +713,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                       class="euiDatePickerRange euiDatePickerRange--inGroup"
                     >
                       <button
-                        class="euiSuperDatePicker__prettyFormat"
+                        class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                         data-test-subj="superDatePickerShowDatesButton"
                       >
                         Last 1 day
@@ -734,7 +734,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -815,7 +815,7 @@ exports[`Panels View SO Component render panel view so container and reload dash
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -903,7 +903,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
               class="euiFlexItem"
             >
               <button
-                class="euiButton euiButton--primary euiButton-isDisabled"
+                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
                 data-test-subj="editPanelButton"
                 disabled=""
                 type="button"
@@ -943,7 +943,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="panelActionContextMenu"
                     type="button"
                   >
@@ -986,7 +986,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
@@ -1039,7 +1039,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
               role="combobox"
             >
               <div
-                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
+                class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed euiFormControlLayout--group"
               >
                 <div
                   class="euiFormControlLayout__childrenWrapper"
@@ -1050,7 +1050,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                     autocapitalize="off"
                     autocomplete="off"
                     autocorrect="off"
-                    class="euiFieldText euiFieldText--fullWidth euiFieldText--inGroup"
+                    class="euiFieldText euiFieldText--fullWidth euiFieldText--compressed euiFieldText--inGroup"
                     data-test-subj="searchAutocompleteTextArea"
                     disabled=""
                     enterkeyhint="search"
@@ -1084,7 +1084,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                 class="euiFlexItem"
               >
                 <div
-                  class="euiFormControlLayout euiFormControlLayout--group euiSuperDatePicker"
+                  class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group euiSuperDatePicker"
                 >
                   <div
                     class="euiPopover euiPopover--anchorDownLeft"
@@ -1146,7 +1146,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                       class="euiDatePickerRange euiDatePickerRange--inGroup"
                     >
                       <button
-                        class="euiSuperDatePicker__prettyFormat"
+                        class="euiSuperDatePicker__prettyFormat euiSuperDatePicker__prettyFormat--compressed"
                         data-test-subj="superDatePickerShowDatesButton"
                       >
                         Last 1 day
@@ -1167,7 +1167,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                   class="euiToolTipAnchor"
                 >
                   <button
-                    class="euiButton euiButton--primary euiSuperUpdateButton"
+                    class="euiButton euiButton--primary euiButton--small euiSuperUpdateButton"
                     data-test-subj="superDatePickerApplyTimeButton"
                     type="button"
                   >
@@ -1248,7 +1248,7 @@ exports[`Panels View SO Component renders panels view SO container with visualiz
                   class="euiPopover__anchor"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="addVisualizationButton"
                     type="button"
                   >
diff --git a/public/components/custom_panels/custom_panel_table.tsx b/public/components/custom_panels/custom_panel_table.tsx
index 4b1fd571d..f3eda8c39 100644
--- a/public/components/custom_panels/custom_panel_table.tsx
+++ b/public/components/custom_panels/custom_panel_table.tsx
@@ -6,10 +6,10 @@
 
 import {
   EuiBreadcrumb,
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -252,14 +252,14 @@ export const CustomPanelTable = ({
   };
 
   const popoverButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="operationalPanelsActionsButton"
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
     >
       Actions
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const popoverItems = (): ReactElement[] => [
@@ -376,9 +376,9 @@ export const CustomPanelTable = ({
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/create" data-test-subj="customPanels__createNewPanels">
+                    <EuiSmallButton fill href="#/create" data-test-subj="customPanels__createNewPanels">
                       Create Dashboard
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageContentHeaderSection>
@@ -386,7 +386,7 @@ export const CustomPanelTable = ({
             <EuiHorizontalRule margin="m" />
             {customPanels.length > 0 ? (
               <>
-                <EuiFieldSearch
+                <EuiCompressedFieldSearch
                   fullWidth
                   data-test-subj="operationalPanelSearchBar"
                   placeholder="Search Observability Dashboard name"
@@ -438,18 +438,18 @@ export const CustomPanelTable = ({
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="customPanels__emptyCreateNewPanels"
                       fullWidth={false}
                       href="#/create"
                     >
                       Create Dashboard
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton fullWidth={false} onClick={() => addSampledata()}>
+                    <EuiSmallButton fullWidth={false} onClick={() => addSampledata()}>
                       Add samples
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
                 <EuiSpacer size="xxl" />
diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
index 9f85485f8..9073bdf0a 100644
--- a/public/components/custom_panels/custom_panel_view.tsx
+++ b/public/components/custom_panels/custom_panel_view.tsx
@@ -6,7 +6,7 @@
 
 import {
   EuiBreadcrumb,
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
   EuiFlexGroup,
@@ -20,7 +20,7 @@ import {
   EuiPageHeaderSection,
   EuiPopover,
   EuiSpacer,
-  EuiSuperDatePicker,
+  EuiCompressedSuperDatePicker,
   EuiTitle,
   OnTimeChangeProps,
   ShortDate,
@@ -454,47 +454,47 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
   };
 
   const cancelButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="cancelPanelButton"
       iconType="cross"
       color="danger"
       onClick={() => editPanel('cancel')}
     >
       Cancel
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const saveButton = (
-    <EuiButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
+    <EuiSmallButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
       Save
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const editButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="editPanelButton"
       iconType="pencil"
       onClick={() => editPanel('edit')}
       disabled={editDisabled}
     >
       Edit
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const addButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="addVisualizationButton"
       iconType="plusInCircle"
       onClick={onAddClick}
       isDisabled={addVizDisabled}
     >
       Add
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   // Panel Actions Button
   const panelActionsButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="panelActionContextMenu"
       iconType="arrowDown"
       iconSide="right"
@@ -502,7 +502,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
       disabled={addVizDisabled}
     >
       Dashboard Actions
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   let flyout;
@@ -683,7 +683,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiSuperDatePicker
+                <EuiCompressedSuperDatePicker
                   dateFormat={uiSettingsService.get('dateFormat')}
                   start={startTime}
                   end={endTime}
diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx
index 382bc50d0..358255cff 100644
--- a/public/components/custom_panels/custom_panel_view_so.tsx
+++ b/public/components/custom_panels/custom_panel_view_so.tsx
@@ -7,7 +7,7 @@
 
 import {
   EuiBreadcrumb,
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
   EuiFlexGroup,
@@ -21,7 +21,7 @@ import {
   EuiPageHeaderSection,
   EuiPopover,
   EuiSpacer,
-  EuiSuperDatePicker,
+  EuiCompressedSuperDatePicker,
   EuiTitle,
   OnTimeChangeProps,
   ShortDate,
@@ -364,47 +364,47 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
   };
 
   const cancelButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="cancelPanelButton"
       iconType="cross"
       color="danger"
       onClick={() => editPanel('cancel')}
     >
       Cancel
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const saveButton = (
-    <EuiButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
+    <EuiSmallButton data-test-subj="savePanelButton" iconType="save" onClick={() => editPanel('save')}>
       Save
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const editButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="editPanelButton"
       iconType="pencil"
       onClick={() => editPanel('edit')}
       disabled={editDisabled}
     >
       Edit
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const addButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="addVisualizationButton"
       iconType="plusInCircle"
       onClick={onAddClick}
       isDisabled={addVizDisabled}
     >
       Add
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   // Panel Actions Button
   const panelActionsButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="panelActionContextMenu"
       iconType="arrowDown"
       iconSide="right"
@@ -412,7 +412,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
       disabled={addVizDisabled}
     >
       Dashboard Actions
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const addVisualizationToCurrentPanel = async ({
@@ -634,7 +634,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiSuperDatePicker
+                <EuiCompressedSuperDatePicker
                   dateFormat={uiSettingsService.get('dateFormat')}
                   start={panel.timeRange.from}
                   end={panel.timeRange.to}
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap
index bbc895db3..7399b3e41 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/custom_input_model.test.tsx.snap
@@ -13,9 +13,9 @@ exports[`Custom Input Model component renders custom input modal with multiple a
     </EuiModalHeader>
     <EuiModalBody>
       <EuiForm>
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
@@ -23,28 +23,28 @@ exports[`Custom Input Model component renders custom input modal with multiple a
           label="test label"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="customModalFieldText"
             name="input"
             onChange={[Function]}
             value="Test Panel"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={[MockFunction]}
       >
         btn test
-      </EuiButtonEmpty>
-      <EuiButton
+      </EuiSmallButtonEmpty>
+      <EuiSmallButton
         data-test-subj="runModalButton"
         fill={true}
         onClick={[Function]}
       >
         btn test 2
-      </EuiButton>
+      </EuiSmallButton>
     </EuiModalFooter>
   </EuiModal>
 </EuiOverlayMask>
@@ -63,37 +63,37 @@ exports[`Custom Input Model component renders custom input modal with single arg
     </EuiModalHeader>
     <EuiModalBody>
       <EuiForm>
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
           label="test label"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="customModalFieldText"
             name="input"
             onChange={[Function]}
             value=""
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={[MockFunction]}
       >
         btn test
-      </EuiButtonEmpty>
-      <EuiButton
+      </EuiSmallButtonEmpty>
+      <EuiSmallButton
         data-test-subj="runModalButton"
         fill={true}
         onClick={[Function]}
       >
         btn test 2
-      </EuiButton>
+      </EuiSmallButton>
     </EuiModalFooter>
   </EuiModal>
 </EuiOverlayMask>
diff --git a/public/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap b/public/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap
index 3d92156d3..f481b6737 100644
--- a/public/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap
+++ b/public/components/custom_panels/helpers/__tests__/__snapshots__/modal_container.test.tsx.snap
@@ -20,32 +20,32 @@ exports[`Modal Container component renders DeleteModal component 1`] = `
       </EuiText>
       <EuiSpacer />
       <EuiForm>
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
           label="To confirm deletion, enter \\"delete\\" in the text field"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="popoverModal__deleteTextInput"
             name="input"
             onChange={[Function]}
             placeholder="delete"
             value=""
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={[MockFunction]}
       >
         Cancel
-      </EuiButtonEmpty>
-      <EuiButton
+      </EuiSmallButtonEmpty>
+      <EuiSmallButton
         color="danger"
         data-test-subj="popoverModal__deleteButton"
         disabled={true}
@@ -53,7 +53,7 @@ exports[`Modal Container component renders DeleteModal component 1`] = `
         onClick={[Function]}
       >
         Delete
-      </EuiButton>
+      </EuiSmallButton>
     </EuiModalFooter>
   </EuiModal>
 </EuiOverlayMask>
diff --git a/public/components/custom_panels/helpers/add_visualization_popover.tsx b/public/components/custom_panels/helpers/add_visualization_popover.tsx
index d36fcd149..6772cfce7 100644
--- a/public/components/custom_panels/helpers/add_visualization_popover.tsx
+++ b/public/components/custom_panels/helpers/add_visualization_popover.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
+import { EuiSmallButton, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import React, { useState } from 'react';
 import {
   CREATE_TAB_PARAM,
@@ -67,7 +67,7 @@ export const AddVisualizationPopover = ({
   };
 
   const addVisualizationButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="addVisualizationButton"
       iconType="arrowDown"
       iconSide="right"
@@ -75,7 +75,7 @@ export const AddVisualizationPopover = ({
       onClick={onPopoverClick}
     >
       Add visualization
-    </EuiButton>
+    </EuiSmallButton>
   );
   return (
     <EuiPopover
diff --git a/public/components/custom_panels/helpers/custom_input_modal.tsx b/public/components/custom_panels/helpers/custom_input_modal.tsx
index 15042e679..dd073eb7b 100644
--- a/public/components/custom_panels/helpers/custom_input_modal.tsx
+++ b/public/components/custom_panels/helpers/custom_input_modal.tsx
@@ -5,7 +5,7 @@
 
 import React, { useState } from 'react';
 import {
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiForm,
   EuiModal,
   EuiModalBody,
@@ -13,9 +13,9 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiFormRow,
-  EuiFieldText,
-  EuiButton,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiSmallButton,
 } from '@elastic/eui';
 
 /*
@@ -76,31 +76,31 @@ export const CustomInputModal = (props: CustomInputModalProps) => {
 
         <EuiModalBody>
           <EuiForm>
-            <EuiFormRow label={labelTxt} helpText={helpText}>
-              <EuiFieldText
+            <EuiCompressedFormRow label={labelTxt} helpText={helpText}>
+              <EuiCompressedFieldText
                 data-test-subj="customModalFieldText"
                 name="input"
                 value={value}
                 onChange={(e) => onChange(e)}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={closeModal}>{btn1txt}</EuiButtonEmpty>
+          <EuiSmallButtonEmpty onClick={closeModal}>{btn1txt}</EuiSmallButtonEmpty>
           {optionalArgs === undefined ? (
-            <EuiButton data-test-subj="runModalButton" onClick={() => runModal(value)} fill>
+            <EuiSmallButton data-test-subj="runModalButton" onClick={() => runModal(value)} fill>
               {btn2txt}
-            </EuiButton>
+            </EuiSmallButton>
           ) : (
-            <EuiButton
+            <EuiSmallButton
               data-test-subj="runModalButton"
               onClick={() => runModal(value, ...optionalArgs)}
               fill
             >
               {btn2txt}
-            </EuiButton>
+            </EuiSmallButton>
           )}
         </EuiModalFooter>
       </EuiModal>
diff --git a/public/components/custom_panels/helpers/modal_containers.tsx b/public/components/custom_panels/helpers/modal_containers.tsx
index cdc93226c..af638df1e 100644
--- a/public/components/custom_panels/helpers/modal_containers.tsx
+++ b/public/components/custom_panels/helpers/modal_containers.tsx
@@ -3,23 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from 'react';
-import {
-  EuiOverlayMask,
-  EuiConfirmModal,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
-  EuiForm,
-  EuiFormRow,
-  EuiModal,
-  EuiModalBody,
-  EuiModalFooter,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiText,
-  EuiSpacer,
-} from '@elastic/eui';
+import React from 'react';
+import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
 import { CustomInputModal } from './custom_input_modal';
 
 /* The file contains helper functions for modal layouts
diff --git a/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap b/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
index 9d405d37c..c81e4a883 100644
--- a/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/__tests__/__snapshots__/empty_panel.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`Empty panel view component renders empty panel view with disabled popov
               <EuiPopover
                 anchorPosition="downLeft"
                 button={
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj="addVisualizationButton"
                     disabled={true}
                     iconSide="right"
@@ -94,7 +94,7 @@ exports[`Empty panel view component renders empty panel view with disabled popov
                     onClick={[Function]}
                   >
                     Add visualization
-                  </EuiButton>
+                  </EuiSmallButton>
                 }
                 closePopover={[Function]}
                 display="inlineBlock"
@@ -111,89 +111,99 @@ exports[`Empty panel view component renders empty panel view with disabled popov
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="addVisualizationButton"
                       disabled={true}
                       iconSide="right"
                       iconType="arrowDown"
                       onClick={[Function]}
                     >
-                      <EuiButtonDisplay
-                        baseClassName="euiButton"
+                      <EuiButton
                         data-test-subj="addVisualizationButton"
                         disabled={true}
-                        element="button"
                         iconSide="right"
                         iconType="arrowDown"
-                        isDisabled={true}
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <button
-                          className="euiButton euiButton--primary euiButton-isDisabled"
+                        <EuiButtonDisplay
+                          baseClassName="euiButton"
                           data-test-subj="addVisualizationButton"
                           disabled={true}
+                          element="button"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          isDisabled={true}
                           onClick={[Function]}
-                          style={
-                            Object {
-                              "minWidth": undefined,
-                            }
-                          }
+                          size="s"
                           type="button"
                         >
-                          <EuiButtonContent
-                            className="euiButton__content"
-                            iconSide="right"
-                            iconType="arrowDown"
-                            textProps={
+                          <button
+                            className="euiButton euiButton--primary euiButton--small euiButton-isDisabled"
+                            data-test-subj="addVisualizationButton"
+                            disabled={true}
+                            onClick={[Function]}
+                            style={
                               Object {
-                                "className": "euiButton__text",
+                                "minWidth": undefined,
                               }
                             }
+                            type="button"
                           >
-                            <span
-                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            <EuiButtonContent
+                              className="euiButton__content"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              textProps={
+                                Object {
+                                  "className": "euiButton__text",
+                                }
+                              }
                             >
-                              <EuiIcon
-                                className="euiButtonContent__icon"
-                                color="inherit"
-                                size="m"
-                                type="arrowDown"
+                              <span
+                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                               >
-                                <EuiIconBeaker
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  color="inherit"
+                                  size="m"
+                                  type="arrowDown"
                                 >
-                                  <svg
+                                  <EuiIconBeaker
                                     aria-hidden={true}
                                     className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                     focusable="false"
-                                    height={16}
                                     role="img"
                                     style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <path
-                                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                    />
-                                  </svg>
-                                </EuiIconBeaker>
-                              </EuiIcon>
-                              <span
-                                className="euiButton__text"
-                              >
-                                Add visualization
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                      />
+                                    </svg>
+                                  </EuiIconBeaker>
+                                </EuiIcon>
+                                <span
+                                  className="euiButton__text"
+                                >
+                                  Add visualization
+                                </span>
                               </span>
-                            </span>
-                          </EuiButtonContent>
-                        </button>
-                      </EuiButtonDisplay>
-                    </EuiButton>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonDisplay>
+                      </EuiButton>
+                    </EuiSmallButton>
                   </div>
                 </div>
               </EuiPopover>
@@ -299,7 +309,7 @@ exports[`Empty panel view component renders empty panel view with enabled popove
               <EuiPopover
                 anchorPosition="downLeft"
                 button={
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj="addVisualizationButton"
                     disabled={false}
                     iconSide="right"
@@ -307,7 +317,7 @@ exports[`Empty panel view component renders empty panel view with enabled popove
                     onClick={[Function]}
                   >
                     Add visualization
-                  </EuiButton>
+                  </EuiSmallButton>
                 }
                 closePopover={[Function]}
                 display="inlineBlock"
@@ -324,90 +334,100 @@ exports[`Empty panel view component renders empty panel view with enabled popove
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="addVisualizationButton"
                       disabled={false}
                       iconSide="right"
                       iconType="arrowDown"
                       onClick={[Function]}
                     >
-                      <EuiButtonDisplay
-                        baseClassName="euiButton"
+                      <EuiButton
                         data-test-subj="addVisualizationButton"
                         disabled={false}
-                        element="button"
                         iconSide="right"
                         iconType="arrowDown"
-                        isDisabled={false}
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <button
-                          className="euiButton euiButton--primary"
+                        <EuiButtonDisplay
+                          baseClassName="euiButton"
                           data-test-subj="addVisualizationButton"
                           disabled={false}
+                          element="button"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          isDisabled={false}
                           onClick={[Function]}
-                          style={
-                            Object {
-                              "minWidth": undefined,
-                            }
-                          }
+                          size="s"
                           type="button"
                         >
-                          <EuiButtonContent
-                            className="euiButton__content"
-                            iconSide="right"
-                            iconType="arrowDown"
-                            textProps={
+                          <button
+                            className="euiButton euiButton--primary euiButton--small"
+                            data-test-subj="addVisualizationButton"
+                            disabled={false}
+                            onClick={[Function]}
+                            style={
                               Object {
-                                "className": "euiButton__text",
+                                "minWidth": undefined,
                               }
                             }
+                            type="button"
                           >
-                            <span
-                              className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                            <EuiButtonContent
+                              className="euiButton__content"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              textProps={
+                                Object {
+                                  "className": "euiButton__text",
+                                }
+                              }
                             >
-                              <EuiIcon
-                                className="euiButtonContent__icon"
-                                color="inherit"
-                                size="m"
-                                type="arrowDown"
+                              <span
+                                className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                               >
-                                <EuiIconArrowDown
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  color="inherit"
+                                  size="m"
+                                  type="arrowDown"
                                 >
-                                  <svg
+                                  <EuiIconArrowDown
                                     aria-hidden={true}
                                     className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                     focusable="false"
-                                    height={16}
                                     role="img"
                                     style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <path
-                                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                      fillRule="non-zero"
-                                    />
-                                  </svg>
-                                </EuiIconArrowDown>
-                              </EuiIcon>
-                              <span
-                                className="euiButton__text"
-                              >
-                                Add visualization
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                        fillRule="non-zero"
+                                      />
+                                    </svg>
+                                  </EuiIconArrowDown>
+                                </EuiIcon>
+                                <span
+                                  className="euiButton__text"
+                                >
+                                  Add visualization
+                                </span>
                               </span>
-                            </span>
-                          </EuiButtonContent>
-                        </button>
-                      </EuiButtonDisplay>
-                    </EuiButton>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonDisplay>
+                      </EuiButton>
+                    </EuiSmallButton>
                   </div>
                 </div>
               </EuiPopover>
diff --git a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
index 6759ad3a6..79f75821f 100644
--- a/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_container/visualization_container.tsx
@@ -5,7 +5,8 @@
 
 import {
   EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiCodeBlock,
   EuiContextMenuItem,
   EuiContextMenuPanel,
@@ -145,9 +146,9 @@ export const VisualizationContainer = ({
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButton onClick={closeModal} fill>
+            <EuiSmallButton onClick={closeModal} fill>
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       );
@@ -169,9 +170,9 @@ export const VisualizationContainer = ({
           </EuiModalBody>
 
           <EuiModalFooter>
-            <EuiButton onClick={closeModal} fill>
+            <EuiSmallButton onClick={closeModal} fill>
               Close
-            </EuiButton>
+            </EuiSmallButton>
           </EuiModalFooter>
         </EuiModal>
       );
@@ -379,7 +380,7 @@ export const VisualizationContainer = ({
               ) : (
                 <EuiPopover
                   button={
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="actionMenuButton"
                       iconType="boxesHorizontal"
                       onClick={onActionsMenuClick}
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
index 6245bf3e5..ca1020676 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout.test.tsx.snap
@@ -49,23 +49,23 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
           <EuiFlexItem
             grow={false}
           >
-            <EuiButton
+            <EuiSmallButton
               data-test-subj="closeFlyoutButton"
               onClick={[MockFunction]}
             >
               Cancel
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem
             grow={false}
           >
-            <EuiButton
+            <EuiSmallButton
               data-test-subj="addFlyoutButton"
               fill={true}
               onClick={[Function]}
             >
               Add
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>
@@ -194,7 +194,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <button
-                            class="euiButton euiButton--primary"
+                            class="euiButton euiButton--primary euiButton--small"
                             data-test-subj="closeFlyoutButton"
                             type="button"
                           >
@@ -213,7 +213,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <button
-                            class="euiButton euiButton--primary euiButton--fill"
+                            class="euiButton euiButton--primary euiButton--small euiButton--fill"
                             data-test-subj="addFlyoutButton"
                             type="button"
                           >
@@ -410,7 +410,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                   class="euiFlexItem euiFlexItem--flexGrowZero"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary"
+                                    class="euiButton euiButton--primary euiButton--small"
                                     data-test-subj="closeFlyoutButton"
                                     type="button"
                                   >
@@ -429,7 +429,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                   class="euiFlexItem euiFlexItem--flexGrowZero"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary euiButton--fill"
+                                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                     data-test-subj="addFlyoutButton"
                                     type="button"
                                   >
@@ -558,7 +558,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary"
+                                      class="euiButton euiButton--primary euiButton--small"
                                       data-test-subj="closeFlyoutButton"
                                       type="button"
                                     >
@@ -577,7 +577,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                       data-test-subj="addFlyoutButton"
                                       type="button"
                                     >
@@ -706,7 +706,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary"
+                                        class="euiButton euiButton--primary euiButton--small"
                                         data-test-subj="closeFlyoutButton"
                                         type="button"
                                       >
@@ -725,7 +725,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary euiButton--fill"
+                                        class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                         data-test-subj="addFlyoutButton"
                                         type="button"
                                       >
@@ -842,7 +842,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary"
+                                          class="euiButton euiButton--primary euiButton--small"
                                           data-test-subj="closeFlyoutButton"
                                           type="button"
                                         >
@@ -861,7 +861,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary euiButton--fill"
+                                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                           data-test-subj="addFlyoutButton"
                                           type="button"
                                         >
@@ -1076,53 +1076,60 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       <div
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
-                                        <EuiButton
+                                        <EuiSmallButton
                                           data-test-subj="closeFlyoutButton"
                                           onClick={[MockFunction]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          <EuiButton
                                             data-test-subj="closeFlyoutButton"
-                                            disabled={false}
-                                            element="button"
-                                            isDisabled={false}
                                             onClick={[MockFunction]}
-                                            type="button"
+                                            size="s"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary"
+                                            <EuiButtonDisplay
+                                              baseClassName="euiButton"
                                               data-test-subj="closeFlyoutButton"
                                               disabled={false}
+                                              element="button"
+                                              isDisabled={false}
                                               onClick={[MockFunction]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
+                                              size="s"
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary euiButton--small"
+                                                data-test-subj="closeFlyoutButton"
+                                                disabled={false}
+                                                onClick={[MockFunction]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="left"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text",
+                                                    }
+                                                  }
                                                 >
                                                   <span
-                                                    className="euiButton__text"
+                                                    className="euiButtonContent euiButton__content"
                                                   >
-                                                    Cancel
+                                                    <span
+                                                      className="euiButton__text"
+                                                    >
+                                                      Cancel
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </EuiSmallButton>
                                       </div>
                                     </EuiFlexItem>
                                     <EuiFlexItem
@@ -1131,55 +1138,63 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       <div
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
-                                        <EuiButton
+                                        <EuiSmallButton
                                           data-test-subj="addFlyoutButton"
                                           fill={true}
                                           onClick={[Function]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          <EuiButton
                                             data-test-subj="addFlyoutButton"
-                                            disabled={false}
-                                            element="button"
                                             fill={true}
-                                            isDisabled={false}
                                             onClick={[Function]}
-                                            type="button"
+                                            size="s"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary euiButton--fill"
+                                            <EuiButtonDisplay
+                                              baseClassName="euiButton"
                                               data-test-subj="addFlyoutButton"
                                               disabled={false}
+                                              element="button"
+                                              fill={true}
+                                              isDisabled={false}
                                               onClick={[Function]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
+                                              size="s"
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                                data-test-subj="addFlyoutButton"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="left"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text",
+                                                    }
+                                                  }
                                                 >
                                                   <span
-                                                    className="euiButton__text"
+                                                    className="euiButtonContent euiButton__content"
                                                   >
-                                                    Add
+                                                    <span
+                                                      className="euiButton__text"
+                                                    >
+                                                      Add
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </EuiSmallButton>
                                       </div>
                                     </EuiFlexItem>
                                   </div>
@@ -1335,23 +1350,23 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
           <EuiFlexItem
             grow={false}
           >
-            <EuiButton
+            <EuiSmallButton
               data-test-subj="closeFlyoutButton"
               onClick={[MockFunction]}
             >
               Cancel
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem
             grow={false}
           >
-            <EuiButton
+            <EuiSmallButton
               data-test-subj="addFlyoutButton"
               fill={true}
               onClick={[Function]}
             >
               Add
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>
@@ -1480,7 +1495,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <button
-                            class="euiButton euiButton--primary"
+                            class="euiButton euiButton--primary euiButton--small"
                             data-test-subj="closeFlyoutButton"
                             type="button"
                           >
@@ -1499,7 +1514,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                           class="euiFlexItem euiFlexItem--flexGrowZero"
                         >
                           <button
-                            class="euiButton euiButton--primary euiButton--fill"
+                            class="euiButton euiButton--primary euiButton--small euiButton--fill"
                             data-test-subj="addFlyoutButton"
                             type="button"
                           >
@@ -1696,7 +1711,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                   class="euiFlexItem euiFlexItem--flexGrowZero"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary"
+                                    class="euiButton euiButton--primary euiButton--small"
                                     data-test-subj="closeFlyoutButton"
                                     type="button"
                                   >
@@ -1715,7 +1730,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                   class="euiFlexItem euiFlexItem--flexGrowZero"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary euiButton--fill"
+                                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                     data-test-subj="addFlyoutButton"
                                     type="button"
                                   >
@@ -1844,7 +1859,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary"
+                                      class="euiButton euiButton--primary euiButton--small"
                                       data-test-subj="closeFlyoutButton"
                                       type="button"
                                     >
@@ -1863,7 +1878,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                       data-test-subj="addFlyoutButton"
                                       type="button"
                                     >
@@ -1992,7 +2007,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary"
+                                        class="euiButton euiButton--primary euiButton--small"
                                         data-test-subj="closeFlyoutButton"
                                         type="button"
                                       >
@@ -2011,7 +2026,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary euiButton--fill"
+                                        class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                         data-test-subj="addFlyoutButton"
                                         type="button"
                                       >
@@ -2128,7 +2143,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary"
+                                          class="euiButton euiButton--primary euiButton--small"
                                           data-test-subj="closeFlyoutButton"
                                           type="button"
                                         >
@@ -2147,7 +2162,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary euiButton--fill"
+                                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                           data-test-subj="addFlyoutButton"
                                           type="button"
                                         >
@@ -2362,53 +2377,60 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       <div
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
-                                        <EuiButton
+                                        <EuiSmallButton
                                           data-test-subj="closeFlyoutButton"
                                           onClick={[MockFunction]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          <EuiButton
                                             data-test-subj="closeFlyoutButton"
-                                            disabled={false}
-                                            element="button"
-                                            isDisabled={false}
                                             onClick={[MockFunction]}
-                                            type="button"
+                                            size="s"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary"
+                                            <EuiButtonDisplay
+                                              baseClassName="euiButton"
                                               data-test-subj="closeFlyoutButton"
                                               disabled={false}
+                                              element="button"
+                                              isDisabled={false}
                                               onClick={[MockFunction]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
+                                              size="s"
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary euiButton--small"
+                                                data-test-subj="closeFlyoutButton"
+                                                disabled={false}
+                                                onClick={[MockFunction]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="left"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text",
+                                                    }
+                                                  }
                                                 >
                                                   <span
-                                                    className="euiButton__text"
+                                                    className="euiButtonContent euiButton__content"
                                                   >
-                                                    Cancel
+                                                    <span
+                                                      className="euiButton__text"
+                                                    >
+                                                      Cancel
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </EuiSmallButton>
                                       </div>
                                     </EuiFlexItem>
                                     <EuiFlexItem
@@ -2417,55 +2439,63 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       <div
                                         className="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
-                                        <EuiButton
+                                        <EuiSmallButton
                                           data-test-subj="addFlyoutButton"
                                           fill={true}
                                           onClick={[Function]}
                                         >
-                                          <EuiButtonDisplay
-                                            baseClassName="euiButton"
+                                          <EuiButton
                                             data-test-subj="addFlyoutButton"
-                                            disabled={false}
-                                            element="button"
                                             fill={true}
-                                            isDisabled={false}
                                             onClick={[Function]}
-                                            type="button"
+                                            size="s"
                                           >
-                                            <button
-                                              className="euiButton euiButton--primary euiButton--fill"
+                                            <EuiButtonDisplay
+                                              baseClassName="euiButton"
                                               data-test-subj="addFlyoutButton"
                                               disabled={false}
+                                              element="button"
+                                              fill={true}
+                                              isDisabled={false}
                                               onClick={[Function]}
-                                              style={
-                                                Object {
-                                                  "minWidth": undefined,
-                                                }
-                                              }
+                                              size="s"
                                               type="button"
                                             >
-                                              <EuiButtonContent
-                                                className="euiButton__content"
-                                                iconSide="left"
-                                                textProps={
+                                              <button
+                                                className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                                data-test-subj="addFlyoutButton"
+                                                disabled={false}
+                                                onClick={[Function]}
+                                                style={
                                                   Object {
-                                                    "className": "euiButton__text",
+                                                    "minWidth": undefined,
                                                   }
                                                 }
+                                                type="button"
                                               >
-                                                <span
-                                                  className="euiButtonContent euiButton__content"
+                                                <EuiButtonContent
+                                                  className="euiButton__content"
+                                                  iconSide="left"
+                                                  textProps={
+                                                    Object {
+                                                      "className": "euiButton__text",
+                                                    }
+                                                  }
                                                 >
                                                   <span
-                                                    className="euiButton__text"
+                                                    className="euiButtonContent euiButton__content"
                                                   >
-                                                    Add
+                                                    <span
+                                                      className="euiButton__text"
+                                                    >
+                                                      Add
+                                                    </span>
                                                   </span>
-                                                </span>
-                                              </EuiButtonContent>
-                                            </button>
-                                          </EuiButtonDisplay>
-                                        </EuiButton>
+                                                </EuiButtonContent>
+                                              </button>
+                                            </EuiButtonDisplay>
+                                          </EuiButton>
+                                        </EuiSmallButton>
                                       </div>
                                     </EuiFlexItem>
                                   </div>
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout_so.test.tsx.snap b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout_so.test.tsx.snap
index dfd4d98b5..f291fdc79 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout_so.test.tsx.snap
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/__tests__/__snapshots__/visualization_flyout_so.test.tsx.snap
@@ -60,23 +60,23 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
             <EuiFlexItem
               grow={false}
             >
-              <EuiButton
+              <EuiSmallButton
                 data-test-subj="closeFlyoutButton"
                 onClick={[MockFunction]}
               >
                 Cancel
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
             <EuiFlexItem
               grow={false}
             >
-              <EuiButton
+              <EuiSmallButton
                 data-test-subj="addFlyoutButton"
                 fill={true}
                 onClick={[Function]}
               >
                 Add
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutFooter>
@@ -205,7 +205,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButton euiButton--primary"
+                              class="euiButton euiButton--primary euiButton--small"
                               data-test-subj="closeFlyoutButton"
                               type="button"
                             >
@@ -224,7 +224,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButton euiButton--primary euiButton--fill"
+                              class="euiButton euiButton--primary euiButton--small euiButton--fill"
                               data-test-subj="addFlyoutButton"
                               type="button"
                             >
@@ -421,7 +421,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary"
+                                      class="euiButton euiButton--primary euiButton--small"
                                       data-test-subj="closeFlyoutButton"
                                       type="button"
                                     >
@@ -440,7 +440,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                       data-test-subj="addFlyoutButton"
                                       type="button"
                                     >
@@ -569,7 +569,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary"
+                                        class="euiButton euiButton--primary euiButton--small"
                                         data-test-subj="closeFlyoutButton"
                                         type="button"
                                       >
@@ -588,7 +588,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary euiButton--fill"
+                                        class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                         data-test-subj="addFlyoutButton"
                                         type="button"
                                       >
@@ -717,7 +717,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary"
+                                          class="euiButton euiButton--primary euiButton--small"
                                           data-test-subj="closeFlyoutButton"
                                           type="button"
                                         >
@@ -736,7 +736,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary euiButton--fill"
+                                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                           data-test-subj="addFlyoutButton"
                                           type="button"
                                         >
@@ -853,7 +853,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                           class="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
                                           <button
-                                            class="euiButton euiButton--primary"
+                                            class="euiButton euiButton--primary euiButton--small"
                                             data-test-subj="closeFlyoutButton"
                                             type="button"
                                           >
@@ -872,7 +872,7 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                           class="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
                                           <button
-                                            class="euiButton euiButton--primary euiButton--fill"
+                                            class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                             data-test-subj="addFlyoutButton"
                                             type="button"
                                           >
@@ -1087,53 +1087,60 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         <div
                                           className="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
-                                          <EuiButton
+                                          <EuiSmallButton
                                             data-test-subj="closeFlyoutButton"
                                             onClick={[MockFunction]}
                                           >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
+                                            <EuiButton
                                               data-test-subj="closeFlyoutButton"
-                                              disabled={false}
-                                              element="button"
-                                              isDisabled={false}
                                               onClick={[MockFunction]}
-                                              type="button"
+                                              size="s"
                                             >
-                                              <button
-                                                className="euiButton euiButton--primary"
+                                              <EuiButtonDisplay
+                                                baseClassName="euiButton"
                                                 data-test-subj="closeFlyoutButton"
                                                 disabled={false}
+                                                element="button"
+                                                isDisabled={false}
                                                 onClick={[MockFunction]}
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
+                                                size="s"
                                                 type="button"
                                               >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="left"
-                                                  textProps={
+                                                <button
+                                                  className="euiButton euiButton--primary euiButton--small"
+                                                  data-test-subj="closeFlyoutButton"
+                                                  disabled={false}
+                                                  onClick={[MockFunction]}
+                                                  style={
                                                     Object {
-                                                      "className": "euiButton__text",
+                                                      "minWidth": undefined,
                                                     }
                                                   }
+                                                  type="button"
                                                 >
-                                                  <span
-                                                    className="euiButtonContent euiButton__content"
+                                                  <EuiButtonContent
+                                                    className="euiButton__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButton__text",
+                                                      }
+                                                    }
                                                   >
                                                     <span
-                                                      className="euiButton__text"
+                                                      className="euiButtonContent euiButton__content"
                                                     >
-                                                      Cancel
+                                                      <span
+                                                        className="euiButton__text"
+                                                      >
+                                                        Cancel
+                                                      </span>
                                                     </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </button>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonDisplay>
+                                            </EuiButton>
+                                          </EuiSmallButton>
                                         </div>
                                       </EuiFlexItem>
                                       <EuiFlexItem
@@ -1142,55 +1149,63 @@ exports[`Visualization Flyout Component renders add visualization Flyout 1`] = `
                                         <div
                                           className="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
-                                          <EuiButton
+                                          <EuiSmallButton
                                             data-test-subj="addFlyoutButton"
                                             fill={true}
                                             onClick={[Function]}
                                           >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
+                                            <EuiButton
                                               data-test-subj="addFlyoutButton"
-                                              disabled={false}
-                                              element="button"
                                               fill={true}
-                                              isDisabled={false}
                                               onClick={[Function]}
-                                              type="button"
+                                              size="s"
                                             >
-                                              <button
-                                                className="euiButton euiButton--primary euiButton--fill"
+                                              <EuiButtonDisplay
+                                                baseClassName="euiButton"
                                                 data-test-subj="addFlyoutButton"
                                                 disabled={false}
+                                                element="button"
+                                                fill={true}
+                                                isDisabled={false}
                                                 onClick={[Function]}
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
+                                                size="s"
                                                 type="button"
                                               >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="left"
-                                                  textProps={
+                                                <button
+                                                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                                  data-test-subj="addFlyoutButton"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  style={
                                                     Object {
-                                                      "className": "euiButton__text",
+                                                      "minWidth": undefined,
                                                     }
                                                   }
+                                                  type="button"
                                                 >
-                                                  <span
-                                                    className="euiButtonContent euiButton__content"
+                                                  <EuiButtonContent
+                                                    className="euiButton__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButton__text",
+                                                      }
+                                                    }
                                                   >
                                                     <span
-                                                      className="euiButton__text"
+                                                      className="euiButtonContent euiButton__content"
                                                     >
-                                                      Add
+                                                      <span
+                                                        className="euiButton__text"
+                                                      >
+                                                        Add
+                                                      </span>
                                                     </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </button>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonDisplay>
+                                            </EuiButton>
+                                          </EuiSmallButton>
                                         </div>
                                       </EuiFlexItem>
                                     </div>
@@ -1341,23 +1356,23 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
             <EuiFlexItem
               grow={false}
             >
-              <EuiButton
+              <EuiSmallButton
                 data-test-subj="closeFlyoutButton"
                 onClick={[MockFunction]}
               >
                 Cancel
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
             <EuiFlexItem
               grow={false}
             >
-              <EuiButton
+              <EuiSmallButton
                 data-test-subj="addFlyoutButton"
                 fill={true}
                 onClick={[Function]}
               >
                 Add
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutFooter>
@@ -1486,7 +1501,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButton euiButton--primary"
+                              class="euiButton euiButton--primary euiButton--small"
                               data-test-subj="closeFlyoutButton"
                               type="button"
                             >
@@ -1505,7 +1520,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButton euiButton--primary euiButton--fill"
+                              class="euiButton euiButton--primary euiButton--small euiButton--fill"
                               data-test-subj="addFlyoutButton"
                               type="button"
                             >
@@ -1702,7 +1717,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary"
+                                      class="euiButton euiButton--primary euiButton--small"
                                       data-test-subj="closeFlyoutButton"
                                       type="button"
                                     >
@@ -1721,7 +1736,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                     class="euiFlexItem euiFlexItem--flexGrowZero"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                       data-test-subj="addFlyoutButton"
                                       type="button"
                                     >
@@ -1850,7 +1865,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary"
+                                        class="euiButton euiButton--primary euiButton--small"
                                         data-test-subj="closeFlyoutButton"
                                         type="button"
                                       >
@@ -1869,7 +1884,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                       class="euiFlexItem euiFlexItem--flexGrowZero"
                                     >
                                       <button
-                                        class="euiButton euiButton--primary euiButton--fill"
+                                        class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                         data-test-subj="addFlyoutButton"
                                         type="button"
                                       >
@@ -1998,7 +2013,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary"
+                                          class="euiButton euiButton--primary euiButton--small"
                                           data-test-subj="closeFlyoutButton"
                                           type="button"
                                         >
@@ -2017,7 +2032,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         class="euiFlexItem euiFlexItem--flexGrowZero"
                                       >
                                         <button
-                                          class="euiButton euiButton--primary euiButton--fill"
+                                          class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                           data-test-subj="addFlyoutButton"
                                           type="button"
                                         >
@@ -2134,7 +2149,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                           class="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
                                           <button
-                                            class="euiButton euiButton--primary"
+                                            class="euiButton euiButton--primary euiButton--small"
                                             data-test-subj="closeFlyoutButton"
                                             type="button"
                                           >
@@ -2153,7 +2168,7 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                           class="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
                                           <button
-                                            class="euiButton euiButton--primary euiButton--fill"
+                                            class="euiButton euiButton--primary euiButton--small euiButton--fill"
                                             data-test-subj="addFlyoutButton"
                                             type="button"
                                           >
@@ -2368,53 +2383,60 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         <div
                                           className="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
-                                          <EuiButton
+                                          <EuiSmallButton
                                             data-test-subj="closeFlyoutButton"
                                             onClick={[MockFunction]}
                                           >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
+                                            <EuiButton
                                               data-test-subj="closeFlyoutButton"
-                                              disabled={false}
-                                              element="button"
-                                              isDisabled={false}
                                               onClick={[MockFunction]}
-                                              type="button"
+                                              size="s"
                                             >
-                                              <button
-                                                className="euiButton euiButton--primary"
+                                              <EuiButtonDisplay
+                                                baseClassName="euiButton"
                                                 data-test-subj="closeFlyoutButton"
                                                 disabled={false}
+                                                element="button"
+                                                isDisabled={false}
                                                 onClick={[MockFunction]}
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
+                                                size="s"
                                                 type="button"
                                               >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="left"
-                                                  textProps={
+                                                <button
+                                                  className="euiButton euiButton--primary euiButton--small"
+                                                  data-test-subj="closeFlyoutButton"
+                                                  disabled={false}
+                                                  onClick={[MockFunction]}
+                                                  style={
                                                     Object {
-                                                      "className": "euiButton__text",
+                                                      "minWidth": undefined,
                                                     }
                                                   }
+                                                  type="button"
                                                 >
-                                                  <span
-                                                    className="euiButtonContent euiButton__content"
+                                                  <EuiButtonContent
+                                                    className="euiButton__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButton__text",
+                                                      }
+                                                    }
                                                   >
                                                     <span
-                                                      className="euiButton__text"
+                                                      className="euiButtonContent euiButton__content"
                                                     >
-                                                      Cancel
+                                                      <span
+                                                        className="euiButton__text"
+                                                      >
+                                                        Cancel
+                                                      </span>
                                                     </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </button>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonDisplay>
+                                            </EuiButton>
+                                          </EuiSmallButton>
                                         </div>
                                       </EuiFlexItem>
                                       <EuiFlexItem
@@ -2423,55 +2445,63 @@ exports[`Visualization Flyout Component renders replace visualization Flyout 1`]
                                         <div
                                           className="euiFlexItem euiFlexItem--flexGrowZero"
                                         >
-                                          <EuiButton
+                                          <EuiSmallButton
                                             data-test-subj="addFlyoutButton"
                                             fill={true}
                                             onClick={[Function]}
                                           >
-                                            <EuiButtonDisplay
-                                              baseClassName="euiButton"
+                                            <EuiButton
                                               data-test-subj="addFlyoutButton"
-                                              disabled={false}
-                                              element="button"
                                               fill={true}
-                                              isDisabled={false}
                                               onClick={[Function]}
-                                              type="button"
+                                              size="s"
                                             >
-                                              <button
-                                                className="euiButton euiButton--primary euiButton--fill"
+                                              <EuiButtonDisplay
+                                                baseClassName="euiButton"
                                                 data-test-subj="addFlyoutButton"
                                                 disabled={false}
+                                                element="button"
+                                                fill={true}
+                                                isDisabled={false}
                                                 onClick={[Function]}
-                                                style={
-                                                  Object {
-                                                    "minWidth": undefined,
-                                                  }
-                                                }
+                                                size="s"
                                                 type="button"
                                               >
-                                                <EuiButtonContent
-                                                  className="euiButton__content"
-                                                  iconSide="left"
-                                                  textProps={
+                                                <button
+                                                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                                                  data-test-subj="addFlyoutButton"
+                                                  disabled={false}
+                                                  onClick={[Function]}
+                                                  style={
                                                     Object {
-                                                      "className": "euiButton__text",
+                                                      "minWidth": undefined,
                                                     }
                                                   }
+                                                  type="button"
                                                 >
-                                                  <span
-                                                    className="euiButtonContent euiButton__content"
+                                                  <EuiButtonContent
+                                                    className="euiButton__content"
+                                                    iconSide="left"
+                                                    textProps={
+                                                      Object {
+                                                        "className": "euiButton__text",
+                                                      }
+                                                    }
                                                   >
                                                     <span
-                                                      className="euiButton__text"
+                                                      className="euiButtonContent euiButton__content"
                                                     >
-                                                      Add
+                                                      <span
+                                                        className="euiButton__text"
+                                                      >
+                                                        Add
+                                                      </span>
                                                     </span>
-                                                  </span>
-                                                </EuiButtonContent>
-                                              </button>
-                                            </EuiButtonDisplay>
-                                          </EuiButton>
+                                                  </EuiButtonContent>
+                                                </button>
+                                              </EuiButtonDisplay>
+                                            </EuiButton>
+                                          </EuiSmallButton>
                                         </div>
                                       </EuiFlexItem>
                                     </div>
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
index c8ef43fb5..8003b9258 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout.tsx
@@ -5,8 +5,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiCallOut,
   EuiCodeBlock,
   EuiDatePicker,
@@ -16,7 +16,7 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiIcon,
   EuiLoadingChart,
   EuiModal,
@@ -24,7 +24,7 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSelectOption,
   EuiSpacer,
   EuiText,
@@ -146,9 +146,9 @@ export const VisaulizationFlyout = ({
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButton onClick={closeModal} fill>
+          <EuiSmallButton onClick={closeModal} fill>
             Close
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     );
@@ -235,7 +235,7 @@ export const VisaulizationFlyout = ({
       content="Picker is disabled. Please edit date/time from panel"
       display="block"
     >
-      <EuiFormRow label="Panel Time Range" fullWidth>
+      <EuiCompressedFormRow label="Panel Time Range" fullWidth>
         <EuiDatePickerRange
           className="date-picker-preview"
           fullWidth
@@ -261,7 +261,7 @@ export const VisaulizationFlyout = ({
             />
           }
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </EuiToolTip>
   );
 
@@ -290,14 +290,14 @@ export const VisaulizationFlyout = ({
       <EuiFlyoutBody>
         <>
           <EuiSpacer size="s" />
-          <EuiFormRow label="Visualization name">
-            <EuiSelect
+          <EuiCompressedFormRow label="Visualization name">
+            <EuiCompressedSelect
               hasNoInitialSelection
               onChange={(e) => onChangeSelection(e)}
               options={visualizationOptions}
               value={selectValue}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer size="l" />
           <EuiFlexGroup alignItems="center">
             <EuiFlexItem grow={false}>
@@ -306,7 +306,7 @@ export const VisaulizationFlyout = ({
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 aria-label="refreshPreview"
                 iconType="refresh"
                 onClick={onRefreshPreview}
@@ -329,14 +329,14 @@ export const VisaulizationFlyout = ({
     <EuiFlyoutFooter>
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiButton data-test-subj="closeFlyoutButton" onClick={closeFlyout}>
+          <EuiSmallButton data-test-subj="closeFlyoutButton" onClick={closeFlyout}>
             Cancel
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton data-test-subj="addFlyoutButton" onClick={addVisualization} fill>
+          <EuiSmallButton data-test-subj="addFlyoutButton" onClick={addVisualization} fill>
             Add
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutFooter>
@@ -391,9 +391,9 @@ export const VisaulizationFlyout = ({
                 </EuiText>
                 {isPreviewError.hasOwnProperty('errorDetails') &&
                 isPreviewError.errorDetails !== '' ? (
-                  <EuiButton color="danger" onClick={() => showModal('errorModal')} size="s">
+                  <EuiSmallButton color="danger" onClick={() => showModal('errorModal')} size="s">
                     See error details
-                  </EuiButton>
+                  </EuiSmallButton>
                 ) : (
                   <></>
                 )}
diff --git a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx
index da5bff1a4..a8d26f7b3 100644
--- a/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx
+++ b/public/components/custom_panels/panel_modules/visualization_flyout/visualization_flyout_so.tsx
@@ -5,8 +5,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiCallOut,
   EuiCodeBlock,
   EuiDatePicker,
@@ -16,7 +16,7 @@ import {
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiIcon,
   EuiLoadingChart,
   EuiModal,
@@ -24,7 +24,7 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSelectOption,
   EuiSpacer,
   EuiText,
@@ -146,9 +146,9 @@ export const VisaulizationFlyoutSO = ({
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButton onClick={closeModal} fill>
+          <EuiSmallButton onClick={closeModal} fill>
             Close
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     );
@@ -210,7 +210,7 @@ export const VisaulizationFlyoutSO = ({
       content="Picker is disabled. Please edit date/time from panel"
       display="block"
     >
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Panel Time Range"
         fullWidth
         isInvalid={startDate > endDate}
@@ -243,7 +243,7 @@ export const VisaulizationFlyoutSO = ({
             />
           }
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </EuiToolTip>
   );
 
@@ -272,14 +272,14 @@ export const VisaulizationFlyoutSO = ({
       <EuiFlyoutBody>
         <>
           <EuiSpacer size="s" />
-          <EuiFormRow label="Visualization name">
-            <EuiSelect
+          <EuiCompressedFormRow label="Visualization name">
+            <EuiCompressedSelect
               hasNoInitialSelection
               onChange={(e) => onChangeSelection(e)}
               options={visualizationOptions}
               value={selectValue}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer size="l" />
           <EuiFlexGroup alignItems="center">
             <EuiFlexItem grow={false}>
@@ -288,7 +288,7 @@ export const VisaulizationFlyoutSO = ({
               </EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 aria-label="refreshPreview"
                 iconType="refresh"
                 onClick={onRefreshPreview}
@@ -311,14 +311,14 @@ export const VisaulizationFlyoutSO = ({
     <EuiFlyoutFooter>
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiButton data-test-subj="closeFlyoutButton" onClick={closeFlyout}>
+          <EuiSmallButton data-test-subj="closeFlyoutButton" onClick={closeFlyout}>
             Cancel
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton data-test-subj="addFlyoutButton" onClick={addVisualization} fill>
+          <EuiSmallButton data-test-subj="addFlyoutButton" onClick={addVisualization} fill>
             Add
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutFooter>
@@ -373,9 +373,9 @@ export const VisaulizationFlyoutSO = ({
                 </EuiText>
                 {isPreviewError.hasOwnProperty('errorDetails') &&
                 isPreviewError.errorDetails !== '' ? (
-                  <EuiButton color="danger" onClick={() => showModal('errorModal')} size="s">
+                  <EuiSmallButton color="danger" onClick={() => showModal('errorModal')} size="s">
                     See error details
-                  </EuiButton>
+                  </EuiSmallButton>
                 ) : (
                   <></>
                 )}
diff --git a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap
index f3c3fe049..0f5f540eb 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/associated_objects_tab.test.tsx.snap
@@ -227,87 +227,96 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                   isLoading={false}
                   onClick={[Function]}
                 >
-                  <EuiButton
+                  <EuiSmallButton
                     iconType="refresh"
                     isDisabled={false}
                     isLoading={false}
                     onClick={[Function]}
                   >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      disabled={false}
-                      element="button"
+                    <EuiButton
                       iconType="refresh"
                       isDisabled={false}
                       isLoading={false}
                       onClick={[Function]}
-                      type="button"
+                      size="s"
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
                         disabled={false}
+                        element="button"
+                        iconType="refresh"
+                        isDisabled={false}
+                        isLoading={false}
                         onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
+                        size="s"
                         type="button"
                       >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconSide="left"
-                          iconType="refresh"
-                          isLoading={false}
-                          textProps={
+                        <button
+                          className="euiButton euiButton--primary euiButton--small"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
                             Object {
-                              "className": "euiButton__text",
+                              "minWidth": undefined,
                             }
                           }
+                          type="button"
                         >
-                          <span
-                            className="euiButtonContent euiButton__content"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            iconType="refresh"
+                            isLoading={false}
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
-                            <EuiIcon
-                              className="euiButtonContent__icon"
-                              color="inherit"
-                              size="m"
-                              type="refresh"
+                            <span
+                              className="euiButtonContent euiButton__content"
                             >
-                              <EuiIconRefresh
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="refresh"
                               >
-                                <svg
+                                <EuiIconRefresh
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
-                                  />
-                                </svg>
-                              </EuiIconRefresh>
-                            </EuiIcon>
-                            <span
-                              className="euiButton__text"
-                            >
-                              Refresh
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
+                                    />
+                                  </svg>
+                                </EuiIconRefresh>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                Refresh
+                              </span>
                             </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </EuiSmallButton>
                 </AssociatedObjectsRefreshButton>
               </div>
             </EuiFlexItem>
@@ -322,52 +331,59 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                   handleRefresh={[Function]}
                   renderCreateAccelerationFlyout={[MockFunction]}
                 >
-                  <EuiButton
+                  <EuiSmallButton
                     fill={true}
                     onClick={[Function]}
                   >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      disabled={false}
-                      element="button"
+                    <EuiButton
                       fill={true}
-                      isDisabled={false}
                       onClick={[Function]}
-                      type="button"
+                      size="s"
                     >
-                      <button
-                        className="euiButton euiButton--primary euiButton--fill"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
                         disabled={false}
+                        element="button"
+                        fill={true}
+                        isDisabled={false}
                         onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
+                        size="s"
                         type="button"
                       >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconSide="left"
-                          textProps={
+                        <button
+                          className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
                             Object {
-                              "className": "euiButton__text",
+                              "minWidth": undefined,
                             }
                           }
+                          type="button"
                         >
-                          <span
-                            className="euiButtonContent euiButton__content"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
                             <span
-                              className="euiButton__text"
+                              className="euiButtonContent euiButton__content"
                             >
-                              Create acceleration
+                              <span
+                                className="euiButton__text"
+                              >
+                                Create acceleration
+                              </span>
                             </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </EuiSmallButton>
                 </CreateAccelerationFlyoutButton>
               </div>
             </EuiFlexItem>
@@ -1163,6 +1179,7 @@ exports[`AssociatedObjectsTab Component renders correctly with associated object
                                       config={
                                         Object {
                                           "cache": 60000,
+                                          "compressed": undefined,
                                           "field": "accelerations",
                                           "multiSelect": true,
                                           "name": "Accelerations",
@@ -5104,87 +5121,96 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
                   isLoading={false}
                   onClick={[Function]}
                 >
-                  <EuiButton
+                  <EuiSmallButton
                     iconType="refresh"
                     isDisabled={false}
                     isLoading={false}
                     onClick={[Function]}
                   >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      disabled={false}
-                      element="button"
+                    <EuiButton
                       iconType="refresh"
                       isDisabled={false}
                       isLoading={false}
                       onClick={[Function]}
-                      type="button"
+                      size="s"
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
                         disabled={false}
+                        element="button"
+                        iconType="refresh"
+                        isDisabled={false}
+                        isLoading={false}
                         onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
+                        size="s"
                         type="button"
                       >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconSide="left"
-                          iconType="refresh"
-                          isLoading={false}
-                          textProps={
+                        <button
+                          className="euiButton euiButton--primary euiButton--small"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
                             Object {
-                              "className": "euiButton__text",
+                              "minWidth": undefined,
                             }
                           }
+                          type="button"
                         >
-                          <span
-                            className="euiButtonContent euiButton__content"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            iconType="refresh"
+                            isLoading={false}
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
-                            <EuiIcon
-                              className="euiButtonContent__icon"
-                              color="inherit"
-                              size="m"
-                              type="refresh"
+                            <span
+                              className="euiButtonContent euiButton__content"
                             >
-                              <EuiIconBeaker
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                className="euiButtonContent__icon"
+                                color="inherit"
+                                size="m"
+                                type="refresh"
                               >
-                                <svg
+                                <EuiIconBeaker
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                  />
-                                </svg>
-                              </EuiIconBeaker>
-                            </EuiIcon>
-                            <span
-                              className="euiButton__text"
-                            >
-                              Refresh
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                    />
+                                  </svg>
+                                </EuiIconBeaker>
+                              </EuiIcon>
+                              <span
+                                className="euiButton__text"
+                              >
+                                Refresh
+                              </span>
                             </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </EuiSmallButton>
                 </AssociatedObjectsRefreshButton>
               </div>
             </EuiFlexItem>
@@ -5199,52 +5225,59 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
                   handleRefresh={[Function]}
                   renderCreateAccelerationFlyout={[MockFunction]}
                 >
-                  <EuiButton
+                  <EuiSmallButton
                     fill={true}
                     onClick={[Function]}
                   >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      disabled={false}
-                      element="button"
+                    <EuiButton
                       fill={true}
-                      isDisabled={false}
                       onClick={[Function]}
-                      type="button"
+                      size="s"
                     >
-                      <button
-                        className="euiButton euiButton--primary euiButton--fill"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
                         disabled={false}
+                        element="button"
+                        fill={true}
+                        isDisabled={false}
                         onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
+                        size="s"
                         type="button"
                       >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconSide="left"
-                          textProps={
+                        <button
+                          className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
                             Object {
-                              "className": "euiButton__text",
+                              "minWidth": undefined,
                             }
                           }
+                          type="button"
                         >
-                          <span
-                            className="euiButtonContent euiButton__content"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
                             <span
-                              className="euiButton__text"
+                              className="euiButtonContent euiButton__content"
                             >
-                              Create acceleration
+                              <span
+                                className="euiButton__text"
+                              >
+                                Create acceleration
+                              </span>
                             </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </EuiSmallButton>
                 </CreateAccelerationFlyoutButton>
               </div>
             </EuiFlexItem>
@@ -5261,13 +5294,13 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
       >
         <EuiEmptyPrompt
           actions={
-            <EuiButton
+            <EuiSmallButton
               iconSide="right"
               iconType="popout"
               onClick={[Function]}
             >
               Query Workbench
-            </EuiButton>
+            </EuiSmallButton>
           }
           body={
             <React.Fragment>
@@ -5318,85 +5351,93 @@ exports[`AssociatedObjectsTab Component renders tab with no databases or objects
                 className="euiSpacer euiSpacer--l"
               />
             </EuiSpacer>
-            <EuiButton
+            <EuiSmallButton
               iconSide="right"
               iconType="popout"
               onClick={[Function]}
             >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                disabled={false}
-                element="button"
+              <EuiButton
                 iconSide="right"
                 iconType="popout"
-                isDisabled={false}
                 onClick={[Function]}
-                type="button"
+                size="s"
               >
-                <button
-                  className="euiButton euiButton--primary"
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
                   disabled={false}
+                  element="button"
+                  iconSide="right"
+                  iconType="popout"
+                  isDisabled={false}
                   onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
+                  size="s"
                   type="button"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="right"
-                    iconType="popout"
-                    textProps={
+                  <button
+                    className="euiButton euiButton--primary euiButton--small"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
                       Object {
-                        "className": "euiButton__text",
+                        "minWidth": undefined,
                       }
                     }
+                    type="button"
                   >
-                    <span
-                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="right"
+                      iconType="popout"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="popout"
+                      <span
+                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                       >
-                        <EuiIconBeaker
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="popout"
                         >
-                          <svg
+                          <EuiIconBeaker
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <path
-                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                            />
-                          </svg>
-                        </EuiIconBeaker>
-                      </EuiIcon>
-                      <span
-                        className="euiButton__text"
-                      >
-                        Query Workbench
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                              />
+                            </svg>
+                          </EuiIconBeaker>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Query Workbench
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </EuiSmallButton>
           </div>
         </EuiEmptyPrompt>
       </AssociatedObjectsTabEmpty>
diff --git a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
index 6a56e9ac8..b27d506dd 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/data_connection.test.tsx.snap
@@ -486,7 +486,7 @@ exports[`Data Connection Page test Renders S3 data connection page with data 1`]
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="createButton"
                   type="button"
                 >
diff --git a/public/components/datasources/components/__tests__/__snapshots__/inactive_data_connection.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/inactive_data_connection.test.tsx.snap
index 2587fc5cb..55a7121d1 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/inactive_data_connection.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/inactive_data_connection.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`Data Connection Inactive Page test Renders inactive data connection cal
           Associated objects and accelerations are not available while this connection is inactive.
         </p>
         <button
-          class="euiButton euiButton--warning"
+          class="euiButton euiButton--warning euiButton--small"
           type="button"
         >
           <span
diff --git a/public/components/datasources/components/__tests__/__snapshots__/installed_integrations_table.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/installed_integrations_table.test.tsx.snap
index 04b01d305..0a3b522cd 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/installed_integrations_table.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/installed_integrations_table.test.tsx.snap
@@ -111,50 +111,56 @@ exports[`Installed Integrations Table test Renders the empty installed integrati
                 <AddIntegrationButton
                   toggleFlyout={[Function]}
                 >
-                  <EuiButton
+                  <EuiSmallButton
                     onClick={[Function]}
                   >
-                    <EuiButtonDisplay
-                      baseClassName="euiButton"
-                      disabled={false}
-                      element="button"
-                      isDisabled={false}
+                    <EuiButton
                       onClick={[Function]}
-                      type="button"
+                      size="s"
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
+                        baseClassName="euiButton"
                         disabled={false}
+                        element="button"
+                        isDisabled={false}
                         onClick={[Function]}
-                        style={
-                          Object {
-                            "minWidth": undefined,
-                          }
-                        }
+                        size="s"
                         type="button"
                       >
-                        <EuiButtonContent
-                          className="euiButton__content"
-                          iconSide="left"
-                          textProps={
+                        <button
+                          className="euiButton euiButton--primary euiButton--small"
+                          disabled={false}
+                          onClick={[Function]}
+                          style={
                             Object {
-                              "className": "euiButton__text",
+                              "minWidth": undefined,
                             }
                           }
+                          type="button"
                         >
-                          <span
-                            className="euiButtonContent euiButton__content"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
                             <span
-                              className="euiButton__text"
+                              className="euiButtonContent euiButton__content"
                             >
-                              Add Integrations
+                              <span
+                                className="euiButton__text"
+                              >
+                                Add Integrations
+                              </span>
                             </span>
-                          </span>
-                        </EuiButtonContent>
-                      </button>
-                    </EuiButtonDisplay>
-                  </EuiButton>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
+                    </EuiButton>
+                  </EuiSmallButton>
                 </AddIntegrationButton>
               </div>
             </EuiFlexItem>
@@ -235,8 +241,8 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 fullWidth={true}
                 incremental={false}
                 isClearable={true}
@@ -245,20 +251,20 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
                 placeholder="Search..."
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           onChange={[Function]}
                           onKeyUp={[Function]}
                           placeholder="Search..."
@@ -266,7 +272,7 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -274,7 +280,7 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -283,19 +289,19 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconBeaker
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -317,7 +323,7 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
@@ -330,52 +336,59 @@ exports[`Installed Integrations Table test Renders the installed integrations ta
                 fill={true}
                 toggleFlyout={[Function]}
               >
-                <EuiButton
+                <EuiSmallButton
                   fill={true}
                   onClick={[Function]}
                 >
-                  <EuiButtonDisplay
-                    baseClassName="euiButton"
-                    disabled={false}
-                    element="button"
+                  <EuiButton
                     fill={true}
-                    isDisabled={false}
                     onClick={[Function]}
-                    type="button"
+                    size="s"
                   >
-                    <button
-                      className="euiButton euiButton--primary euiButton--fill"
+                    <EuiButtonDisplay
+                      baseClassName="euiButton"
                       disabled={false}
+                      element="button"
+                      fill={true}
+                      isDisabled={false}
                       onClick={[Function]}
-                      style={
-                        Object {
-                          "minWidth": undefined,
-                        }
-                      }
+                      size="s"
                       type="button"
                     >
-                      <EuiButtonContent
-                        className="euiButton__content"
-                        iconSide="left"
-                        textProps={
+                      <button
+                        className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                        disabled={false}
+                        onClick={[Function]}
+                        style={
                           Object {
-                            "className": "euiButton__text",
+                            "minWidth": undefined,
                           }
                         }
+                        type="button"
                       >
-                        <span
-                          className="euiButtonContent euiButton__content"
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
                         >
                           <span
-                            className="euiButton__text"
+                            className="euiButtonContent euiButton__content"
                           >
-                            Add Integrations
+                            <span
+                              className="euiButton__text"
+                            >
+                              Add Integrations
+                            </span>
                           </span>
-                        </span>
-                      </EuiButtonContent>
-                    </button>
-                  </EuiButtonDisplay>
-                </EuiButton>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
+                  </EuiButton>
+                </EuiSmallButton>
               </AddIntegrationButton>
             </div>
           </EuiFlexItem>
diff --git a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap
index 31368b5ba..715c3b5d6 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_description.test.tsx.snap
@@ -72,83 +72,90 @@ exports[`Manage Data Connections Description test Renders manage data connection
           <div
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <EuiButton
+            <EuiSmallButton
               iconType="refresh"
               onClick={[Function]}
             >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
-                disabled={false}
-                element="button"
+              <EuiButton
                 iconType="refresh"
-                isDisabled={false}
                 onClick={[Function]}
-                type="button"
+                size="s"
               >
-                <button
-                  className="euiButton euiButton--primary"
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
                   disabled={false}
+                  element="button"
+                  iconType="refresh"
+                  isDisabled={false}
                   onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
+                  size="s"
                   type="button"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    iconType="refresh"
-                    textProps={
+                  <button
+                    className="euiButton euiButton--primary euiButton--small"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
                       Object {
-                        "className": "euiButton__text",
+                        "minWidth": undefined,
                       }
                     }
+                    type="button"
                   >
-                    <span
-                      className="euiButtonContent euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      iconType="refresh"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="refresh"
+                      <span
+                        className="euiButtonContent euiButton__content"
                       >
-                        <EuiIconBeaker
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="refresh"
                         >
-                          <svg
+                          <EuiIconBeaker
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <path
-                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                            />
-                          </svg>
-                        </EuiIconBeaker>
-                      </EuiIcon>
-                      <span
-                        className="euiButton__text"
-                      >
-                        Refresh
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                              />
+                            </svg>
+                          </EuiIconBeaker>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Refresh
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </EuiSmallButton>
           </div>
         </EuiFlexItem>
       </div>
diff --git a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap
index b8cf20aa6..ae9c5778f 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/manage_data_connections_table.test.tsx.snap
@@ -139,7 +139,7 @@ exports[`Manage Data Connections Table test Renders manage data connections tabl
               class="euiFlexItem euiFlexItem--flexGrowZero"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
diff --git a/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap b/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap
index 5fd77b87b..d57f96d46 100644
--- a/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap
+++ b/public/components/datasources/components/__tests__/__snapshots__/no_access.test.tsx.snap
@@ -8,13 +8,13 @@ exports[`No access test Renders no access view of data source 1`] = `
     >
       <EuiEmptyPrompt
         actions={
-          <EuiButton
+          <EuiSmallButton
             color="primary"
             fill={true}
             onClick={[Function]}
           >
             Return to data connections
-          </EuiButton>
+          </EuiSmallButton>
         }
         body={
           <EuiText>
@@ -111,54 +111,62 @@ exports[`No access test Renders no access view of data source 1`] = `
               className="euiSpacer euiSpacer--l"
             />
           </EuiSpacer>
-          <EuiButton
+          <EuiSmallButton
             color="primary"
             fill={true}
             onClick={[Function]}
           >
-            <EuiButtonDisplay
-              baseClassName="euiButton"
+            <EuiButton
               color="primary"
-              disabled={false}
-              element="button"
               fill={true}
-              isDisabled={false}
               onClick={[Function]}
-              type="button"
+              size="s"
             >
-              <button
-                className="euiButton euiButton--primary euiButton--fill"
+              <EuiButtonDisplay
+                baseClassName="euiButton"
+                color="primary"
                 disabled={false}
+                element="button"
+                fill={true}
+                isDisabled={false}
                 onClick={[Function]}
-                style={
-                  Object {
-                    "minWidth": undefined,
-                  }
-                }
+                size="s"
                 type="button"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  iconSide="left"
-                  textProps={
+                <button
+                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
                     Object {
-                      "className": "euiButton__text",
+                      "minWidth": undefined,
                     }
                   }
+                  type="button"
                 >
-                  <span
-                    className="euiButtonContent euiButton__content"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButtonContent euiButton__content"
                     >
-                      Return to data connections
+                      <span
+                        className="euiButton__text"
+                      >
+                        Return to data connections
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
-            </EuiButtonDisplay>
-          </EuiButton>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </EuiSmallButton>
         </div>
       </EuiEmptyPrompt>
     </div>
diff --git a/public/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx b/public/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx
index 1dac3599f..a7b2a27c7 100644
--- a/public/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx
+++ b/public/components/datasources/components/manage/accelerations/acceleration_action_overlay.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiOverlayMask, EuiConfirmModal, EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { EuiOverlayMask, EuiConfirmModal, EuiCompressedFormRow, EuiCompressedFieldText } from '@elastic/eui';
 import { CachedAcceleration } from '../../../../../../common/types/data_connections';
 import {
   ACC_DELETE_MSG,
@@ -79,13 +79,13 @@ export const AccelerationActionOverlay: React.FC<AccelerationActionOverlayProps>
       >
         <p>{description}</p>
         {actionType === 'vacuum' && (
-          <EuiFormRow label={`To confirm, type ${displayIndexName}`}>
-            <EuiFieldText
+          <EuiCompressedFormRow label={`To confirm, type ${displayIndexName}`}>
+            <EuiCompressedFieldText
               name="confirmationInput"
               value={confirmationInput}
               onChange={(e) => setConfirmationInput(e.target.value)}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         )}
       </EuiConfirmModal>
     </EuiOverlayMask>
diff --git a/public/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx b/public/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx
index c28f7055a..8c64efa15 100644
--- a/public/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx
+++ b/public/components/datasources/components/manage/accelerations/acceleration_details_flyout.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyoutBody,
@@ -146,14 +146,14 @@ export const AccelerationDetailsFlyout = (props: AccelerationDetailsFlyoutProps)
 
   const DiscoverIcon = () => {
     return (
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={() => {
           onDiscoverIconClick(acceleration, dataSourceName);
           resetFlyout();
         }}
       >
         <EuiIcon type={'discoverApp'} size="m" />
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     );
   };
 
@@ -162,25 +162,25 @@ export const AccelerationDetailsFlyout = (props: AccelerationDetailsFlyoutProps)
       return null;
     }
     return (
-      <EuiButtonEmpty onClick={onSyncIconClickHandler}>
+      <EuiSmallButtonEmpty onClick={onSyncIconClickHandler}>
         <EuiIcon type="inputOutput" size="m" />
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     );
   };
 
   const DeleteIcon = () => {
     return (
-      <EuiButtonEmpty onClick={onDeleteIconClickHandler}>
+      <EuiSmallButtonEmpty onClick={onDeleteIconClickHandler}>
         <EuiIcon type="trash" size="m" />
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     );
   };
 
   const VacuumIcon = () => {
     return (
-      <EuiButtonEmpty onClick={onVacuumIconClickHandler}>
+      <EuiSmallButtonEmpty onClick={onVacuumIconClickHandler}>
         <EuiIcon type="broom" size="m" />
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     );
   };
 
diff --git a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
index dbe4033c7..615efb070 100644
--- a/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
+++ b/public/components/datasources/components/manage/accelerations/acceleration_table.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -140,7 +140,7 @@ export const AccelerationTable = ({
 
   const RefreshButton = () => {
     return (
-      <EuiButton
+      <EuiSmallButton
         onClick={handleRefresh}
         isLoading={
           isRefreshing ||
@@ -148,7 +148,7 @@ export const AccelerationTable = ({
         }
       >
         Refresh
-      </EuiButton>
+      </EuiSmallButton>
     );
   };
 
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
index 19fcd741b..82aa93790 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration.test.tsx.snap
@@ -161,7 +161,7 @@ Array [
                       class="euiSpacer euiSpacer--m"
                     />
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -189,17 +189,17 @@ Array [
                             <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"
+                                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                     data-test-subj="comboBoxInput"
                                     tabindex="-1"
                                   >
@@ -235,7 +235,7 @@ Array [
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -286,7 +286,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -314,17 +314,17 @@ Array [
                             <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"
+                                    class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                     data-test-subj="comboBoxInput"
                                     tabindex="-1"
                                   >
@@ -360,7 +360,7 @@ Array [
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -425,7 +425,7 @@ Array [
                       class="euiSpacer euiSpacer--s"
                     />
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -487,7 +487,7 @@ Array [
                                 value="skipping"
                               />
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
@@ -502,7 +502,7 @@ Array [
                                     aria-describedby="random_html_id-help-0"
                                     aria-haspopup="true"
                                     aria-labelledby="random_html_id random_html_id"
-                                    class="euiSuperSelectControl"
+                                    class="euiSuperSelectControl euiSuperSelectControl--compressed"
                                     type="button"
                                   >
                                     Skipping index
@@ -515,7 +515,7 @@ Array [
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -557,7 +557,7 @@ Array [
                       class="euiSpacer euiSpacer--s"
                     />
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -586,7 +586,7 @@ Array [
                                 value="autoInterval"
                               />
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
@@ -601,7 +601,7 @@ Array [
                                     aria-describedby="random_html_id-help-0"
                                     aria-haspopup="true"
                                     aria-labelledby="random_html_id random_html_id"
-                                    class="euiSuperSelectControl"
+                                    class="euiSuperSelectControl euiSuperSelectControl--compressed"
                                     type="button"
                                   >
                                     Auto (Interval)
@@ -614,7 +614,7 @@ Array [
                                     >
                                       <svg
                                         aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height="16"
                                         role="img"
@@ -642,7 +642,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -660,7 +660,7 @@ Array [
                         class="euiFormRow__fieldWrapper"
                       >
                         <div
-                          class="euiFormControlLayout euiFormControlLayout--group"
+                          class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
@@ -668,7 +668,7 @@ Array [
                             <input
                               aria-describedby="random_html_id-help-0"
                               aria-label="Refresh increments"
-                              class="euiFieldNumber euiFieldNumber--inGroup"
+                              class="euiFieldNumber euiFieldNumber--compressed euiFieldNumber--inGroup"
                               id="random_html_id"
                               min="1"
                               placeholder="Refresh increments"
@@ -677,13 +677,13 @@ Array [
                             />
                           </div>
                           <div
-                            class="euiFormControlLayout"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               class="euiFormControlLayout__childrenWrapper"
                             >
                               <select
-                                class="euiSelect euiFormControlLayout__append"
+                                class="euiSelect euiSelect--compressed euiFormControlLayout__append"
                               >
                                 <option
                                   value="minute"
@@ -714,7 +714,7 @@ Array [
                                 >
                                   <svg
                                     aria-hidden="true"
-                                    class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height="16"
                                     role="img"
@@ -740,7 +740,7 @@ Array [
                       </div>
                     </div>
                     <div
-                      class="euiFormRow"
+                      class="euiFormRow euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -791,7 +791,7 @@ Array [
                         class="euiFormRow__fieldWrapper"
                       >
                         <div
-                          class="euiFormControlLayout"
+                          class="euiFormControlLayout euiFormControlLayout--compressed"
                         >
                           <div
                             class="euiFormControlLayout__childrenWrapper"
@@ -799,7 +799,7 @@ Array [
                             <input
                               aria-describedby="random_html_id-help-0"
                               aria-label="Use aria labels when no actual label is in use"
-                              class="euiFieldText"
+                              class="euiFieldText euiFieldText--compressed"
                               id="random_html_id"
                               placeholder="s3://checkpoint/location"
                               type="text"
@@ -967,7 +967,7 @@ Array [
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButton euiButton--primary"
+                              class="euiButton euiButton--primary euiButton--small"
                               type="button"
                             >
                               <span
@@ -985,7 +985,7 @@ Array [
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButton euiButton--danger"
+                              class="euiButton euiButton--danger euiButton--small"
                               type="button"
                             >
                               <span
@@ -1005,7 +1005,7 @@ Array [
                         class="euiFlexItem euiFlexItem--flexGrowZero"
                       >
                         <button
-                          class="euiButton euiButton--primary"
+                          class="euiButton euiButton--primary euiButton--small"
                           type="button"
                         >
                           <span
@@ -1080,7 +1080,7 @@ Array [
                             class="euiAccordion__padding--l"
                           >
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -1109,7 +1109,7 @@ Array [
                                 class="euiFormRow__fieldWrapper"
                               >
                                 <div
-                                  class="euiFormControlLayout euiFormControlLayout--group"
+                                  class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                 >
                                   <label
                                     class="euiFormLabel euiFormControlLayout__prepend"
@@ -1143,7 +1143,7 @@ Array [
                                     <input
                                       aria-describedby="random_html_id-help-0"
                                       aria-label="Enter Index Name"
-                                      class="euiFieldText euiFieldText--inGroup"
+                                      class="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                       disabled=""
                                       id="random_html_id"
                                       placeholder="Enter index name"
@@ -1167,7 +1167,7 @@ Array [
                               </div>
                             </div>
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -1185,7 +1185,7 @@ Array [
                                 class="euiFormRow__fieldWrapper"
                               >
                                 <div
-                                  class="euiFormControlLayout"
+                                  class="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
                                   <div
                                     class="euiFormControlLayout__childrenWrapper"
@@ -1193,7 +1193,7 @@ Array [
                                     <input
                                       aria-describedby="random_html_id-help-0"
                                       aria-label="Number of primary shards"
-                                      class="euiFieldNumber"
+                                      class="euiFieldNumber euiFieldNumber--compressed"
                                       id="random_html_id"
                                       max="100"
                                       min="1"
@@ -1215,7 +1215,7 @@ Array [
                               class="euiSpacer euiSpacer--l"
                             />
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -1233,7 +1233,7 @@ Array [
                                 class="euiFormRow__fieldWrapper"
                               >
                                 <div
-                                  class="euiFormControlLayout"
+                                  class="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
                                   <div
                                     class="euiFormControlLayout__childrenWrapper"
@@ -1241,7 +1241,7 @@ Array [
                                     <input
                                       aria-describedby="random_html_id-help-0"
                                       aria-label="Number of replicas"
-                                      class="euiFieldNumber"
+                                      class="euiFieldNumber euiFieldNumber--compressed"
                                       id="random_html_id"
                                       max="100"
                                       min="0"
@@ -1329,7 +1329,7 @@ Array [
                                 class="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <button
-                                  class="euiButton euiButton--success"
+                                  class="euiButton euiButton--success euiButton--small"
                                   type="button"
                                 >
                                   <span
@@ -1380,7 +1380,7 @@ Array [
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     type="button"
                   >
                     <span
@@ -1412,7 +1412,7 @@ Array [
                   class="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    class="euiButton euiButton--primary euiButton--fill"
+                    class="euiButton euiButton--primary euiButton--small euiButton--fill"
                     type="button"
                   >
                     <span
@@ -1621,7 +1621,7 @@ Array [
                         className="euiSpacer euiSpacer--m"
                       />,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -1651,18 +1651,18 @@ Array [
                               <div
                                 aria-expanded={false}
                                 aria-haspopup="listbox"
-                                className="euiComboBox"
+                                className="euiComboBox euiComboBox--compressed"
                                 onKeyDown={[Function]}
                                 role="combobox"
                               >
                                 <div
-                                  className="euiFormControlLayout"
+                                  className="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
                                   <div
                                     className="euiFormControlLayout__childrenWrapper"
                                   >
                                     <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                       data-test-subj="comboBoxInput"
                                       onClick={[Function]}
                                       tabIndex={-1}
@@ -1725,7 +1725,7 @@ Array [
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"
@@ -1780,7 +1780,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -1810,18 +1810,18 @@ Array [
                               <div
                                 aria-expanded={false}
                                 aria-haspopup="listbox"
-                                className="euiComboBox"
+                                className="euiComboBox euiComboBox--compressed"
                                 onKeyDown={[Function]}
                                 role="combobox"
                               >
                                 <div
-                                  className="euiFormControlLayout"
+                                  className="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
                                   <div
                                     className="euiFormControlLayout__childrenWrapper"
                                   >
                                     <div
-                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                      className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                       data-test-subj="comboBoxInput"
                                       onClick={[Function]}
                                       tabIndex={-1}
@@ -1884,7 +1884,7 @@ Array [
                                       >
                                         <svg
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           height={16}
                                           role="img"
@@ -1955,7 +1955,7 @@ Array [
                         className="euiSpacer euiSpacer--s"
                       />,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -2024,7 +2024,7 @@ Array [
                                     value="skipping"
                                   />,
                                   <div
-                                    className="euiFormControlLayout"
+                                    className="euiFormControlLayout euiFormControlLayout--compressed"
                                   >
                                     <div
                                       className="euiFormControlLayout__childrenWrapper"
@@ -2039,7 +2039,7 @@ Array [
                                         aria-describedby="random_html_id-help-0"
                                         aria-haspopup="true"
                                         aria-labelledby="random_html_id random_html_id"
-                                        className="euiSuperSelectControl"
+                                        className="euiSuperSelectControl euiSuperSelectControl--compressed"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -2056,7 +2056,7 @@ Array [
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -2102,7 +2102,7 @@ Array [
                         className="euiSpacer euiSpacer--s"
                       />,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -2137,7 +2137,7 @@ Array [
                                     value="autoInterval"
                                   />,
                                   <div
-                                    className="euiFormControlLayout"
+                                    className="euiFormControlLayout euiFormControlLayout--compressed"
                                   >
                                     <div
                                       className="euiFormControlLayout__childrenWrapper"
@@ -2152,7 +2152,7 @@ Array [
                                         aria-describedby="random_html_id-help-0"
                                         aria-haspopup="true"
                                         aria-labelledby="random_html_id random_html_id"
-                                        className="euiSuperSelectControl"
+                                        className="euiSuperSelectControl euiSuperSelectControl--compressed"
                                         onBlur={[Function]}
                                         onClick={[Function]}
                                         onFocus={[Function]}
@@ -2169,7 +2169,7 @@ Array [
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -2199,7 +2199,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -2217,7 +2217,7 @@ Array [
                           className="euiFormRow__fieldWrapper"
                         >
                           <div
-                            className="euiFormControlLayout euiFormControlLayout--group"
+                            className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
@@ -2225,7 +2225,7 @@ Array [
                               <input
                                 aria-describedby="random_html_id-help-0"
                                 aria-label="Refresh increments"
-                                className="euiFieldNumber euiFieldNumber--inGroup"
+                                className="euiFieldNumber euiFieldNumber--compressed euiFieldNumber--inGroup"
                                 id="random_html_id"
                                 min={1}
                                 onBlur={[Function]}
@@ -2237,13 +2237,13 @@ Array [
                               />
                             </div>
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 className="euiFormControlLayout__childrenWrapper"
                               >
                                 <select
-                                  className="euiSelect euiFormControlLayout__append"
+                                  className="euiSelect euiSelect--compressed euiFormControlLayout__append"
                                   onBlur={[Function]}
                                   onChange={[Function]}
                                   onMouseUp={[Function]}
@@ -2282,7 +2282,7 @@ Array [
                                   >
                                     <svg
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       height={16}
                                       role="img"
@@ -2309,7 +2309,7 @@ Array [
                         </div>
                       </div>,
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -2361,7 +2361,7 @@ Array [
                           className="euiFormRow__fieldWrapper"
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
@@ -2369,7 +2369,7 @@ Array [
                               <input
                                 aria-describedby="random_html_id-help-0"
                                 aria-label="Use aria labels when no actual label is in use"
-                                className="euiFieldText"
+                                className="euiFieldText euiFieldText--compressed"
                                 id="random_html_id"
                                 onBlur={[Function]}
                                 onChange={[Function]}
@@ -2568,7 +2568,7 @@ Array [
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <button
-                                  className="euiButton euiButton--primary"
+                                  className="euiButton euiButton--primary euiButton--small"
                                   disabled={false}
                                   onClick={[Function]}
                                   style={
@@ -2593,7 +2593,7 @@ Array [
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <button
-                                  className="euiButton euiButton--danger"
+                                  className="euiButton euiButton--danger euiButton--small"
                                   disabled={false}
                                   onClick={[Function]}
                                   style={
@@ -2621,7 +2621,7 @@ Array [
                           >
                             Array [
                               <button
-                                className="euiButton euiButton--primary"
+                                className="euiButton euiButton--primary euiButton--small"
                                 disabled={false}
                                 onClick={[Function]}
                                 style={
@@ -2710,7 +2710,7 @@ Array [
                           >
                             Array [
                               <div
-                                className="euiFormRow"
+                                className="euiFormRow euiFormRow--compressed"
                                 id="random_html_id-row"
                               >
                                 <div
@@ -2741,7 +2741,7 @@ Array [
                                   className="euiFormRow__fieldWrapper"
                                 >
                                   <div
-                                    className="euiFormControlLayout euiFormControlLayout--group"
+                                    className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                   >
                                     <label
                                       className="euiFormLabel euiFormControlLayout__prepend"
@@ -2781,7 +2781,7 @@ Array [
                                       <input
                                         aria-describedby="random_html_id-help-0"
                                         aria-label="Enter Index Name"
-                                        className="euiFieldText euiFieldText--inGroup"
+                                        className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                         disabled={true}
                                         id="random_html_id"
                                         onBlur={[Function]}
@@ -2810,7 +2810,7 @@ Array [
                               "",
                             ]
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -2828,7 +2828,7 @@ Array [
                                 className="euiFormRow__fieldWrapper"
                               >
                                 <div
-                                  className="euiFormControlLayout"
+                                  className="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
                                   <div
                                     className="euiFormControlLayout__childrenWrapper"
@@ -2836,7 +2836,7 @@ Array [
                                     <input
                                       aria-describedby="random_html_id-help-0"
                                       aria-label="Number of primary shards"
-                                      className="euiFieldNumber"
+                                      className="euiFieldNumber euiFieldNumber--compressed"
                                       id="random_html_id"
                                       max={100}
                                       min={1}
@@ -2861,7 +2861,7 @@ Array [
                               className="euiSpacer euiSpacer--l"
                             />
                             <div
-                              className="euiFormRow"
+                              className="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -2879,7 +2879,7 @@ Array [
                                 className="euiFormRow__fieldWrapper"
                               >
                                 <div
-                                  className="euiFormControlLayout"
+                                  className="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
                                   <div
                                     className="euiFormControlLayout__childrenWrapper"
@@ -2887,7 +2887,7 @@ Array [
                                     <input
                                       aria-describedby="random_html_id-help-0"
                                       aria-label="Number of replicas"
-                                      className="euiFieldNumber"
+                                      className="euiFieldNumber euiFieldNumber--compressed"
                                       id="random_html_id"
                                       max={100}
                                       min={0}
@@ -2980,7 +2980,7 @@ Array [
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
                                 <button
-                                  className="euiButton euiButton--success"
+                                  className="euiButton euiButton--success euiButton--small"
                                   disabled={false}
                                   onClick={[Function]}
                                   style={
@@ -3040,7 +3040,7 @@ Array [
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--flushLeft"
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--flushLeft"
                     disabled={false}
                     onClick={[MockFunction]}
                     type="button"
@@ -3075,7 +3075,7 @@ Array [
                   className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <button
-                    className="euiButton euiButton--primary euiButton--fill"
+                    className="euiButton euiButton--primary euiButton--small euiButton--fill"
                     disabled={false}
                     onClick={[Function]}
                     style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration_button.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration_button.test.tsx.snap
index 198d8814e..9d194103d 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration_button.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/__tests__/__snapshots__/create_acceleration_button.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Create acceleration button component renders create acceleration button component with mv state 1`] = `
 <button
-  className="euiButton euiButton--primary euiButton--fill"
+  className="euiButton euiButton--primary euiButton--small euiButton--fill"
   disabled={false}
   onClick={[Function]}
   style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx
index 507c6fe95..e5fc9a715 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -267,9 +267,9 @@ export const CreateAcceleration = ({
         <EuiFlyoutFooter>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem grow={false}>
-              <EuiButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
+              <EuiSmallButtonEmpty iconType="cross" onClick={resetFlyout} flush="left">
                 Cancel
-              </EuiButtonEmpty>
+              </EuiSmallButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <CreateAccelerationButton
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration_button.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration_button.tsx
index 76d668276..ac6123edc 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration_button.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/create/create_acceleration_button.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton } from '@elastic/eui';
+import { EuiSmallButton } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { SANITIZE_QUERY_REGEX } from '../../../../../../../../common/constants/data_sources';
 import { CreateAccelerationForm } from '../../../../../../../../common/types/data_connections';
@@ -66,9 +66,9 @@ export const CreateAccelerationButton = ({
   }, [directqueryLoadStatus]);
 
   const createAccelerationBtn = (
-    <EuiButton onClick={createAcceleration} fill isLoading={isLoading}>
+    <EuiSmallButton onClick={createAcceleration} fill isLoading={isLoading}>
       {isLoading ? 'Creating acceleration' : 'Create acceleration'}
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   return createAccelerationBtn;
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
index ad9200b27..b0ecc95cd 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/define_index_options.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Index options acceleration components renders acceleration index options with covering index options 1`] = `
 Array [
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -34,7 +34,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <label
           className="euiFormLabel euiFormControlLayout__prepend"
@@ -74,7 +74,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Enter Index Name"
-            className="euiFieldText euiFieldText--inGroup"
+            className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
             disabled={false}
             id="random_html_id"
             onBlur={[Function]}
@@ -107,7 +107,7 @@ Array [
 exports[`Index options acceleration components renders acceleration index options with default options 1`] = `
 Array [
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -138,7 +138,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <label
           className="euiFormLabel euiFormControlLayout__prepend"
@@ -178,7 +178,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Enter Index Name"
-            className="euiFieldText euiFieldText--inGroup"
+            className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
             disabled={true}
             id="random_html_id"
             onBlur={[Function]}
@@ -211,7 +211,7 @@ Array [
 exports[`Index options acceleration components renders acceleration index options with materialized index options 1`] = `
 Array [
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -242,7 +242,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <label
           className="euiFormLabel euiFormControlLayout__prepend"
@@ -282,7 +282,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Enter Index Name"
-            className="euiFieldText euiFieldText--inGroup"
+            className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
             disabled={false}
             id="random_html_id"
             onBlur={[Function]}
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_advanced_settings.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_advanced_settings.test.tsx.snap
index 40151f9b2..13d48a407 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_advanced_settings.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_advanced_settings.test.tsx.snap
@@ -61,7 +61,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
       >
         Array [
           <div
-            className="euiFormRow"
+            className="euiFormRow euiFormRow--compressed"
             id="random_html_id-row"
           >
             <div
@@ -92,7 +92,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
               className="euiFormRow__fieldWrapper"
             >
               <div
-                className="euiFormControlLayout euiFormControlLayout--group"
+                className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
               >
                 <label
                   className="euiFormLabel euiFormControlLayout__prepend"
@@ -132,7 +132,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
                   <input
                     aria-describedby="random_html_id-help-0"
                     aria-label="Enter Index Name"
-                    className="euiFieldText euiFieldText--inGroup"
+                    className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                     disabled={true}
                     id="random_html_id"
                     onBlur={[Function]}
@@ -161,7 +161,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
           "",
         ]
         <div
-          className="euiFormRow"
+          className="euiFormRow euiFormRow--compressed"
           id="random_html_id-row"
         >
           <div
@@ -179,7 +179,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout"
+              className="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 className="euiFormControlLayout__childrenWrapper"
@@ -187,7 +187,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
                 <input
                   aria-describedby="random_html_id-help-0"
                   aria-label="Number of primary shards"
-                  className="euiFieldNumber"
+                  className="euiFieldNumber euiFieldNumber--compressed"
                   id="random_html_id"
                   max={100}
                   min={1}
@@ -212,7 +212,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
           className="euiSpacer euiSpacer--l"
         />
         <div
-          className="euiFormRow"
+          className="euiFormRow euiFormRow--compressed"
           id="random_html_id-row"
         >
           <div
@@ -230,7 +230,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout"
+              className="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 className="euiFormControlLayout__childrenWrapper"
@@ -238,7 +238,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
                 <input
                   aria-describedby="random_html_id-help-0"
                   aria-label="Number of replicas"
-                  className="euiFieldNumber"
+                  className="euiFieldNumber euiFieldNumber--compressed"
                   id="random_html_id"
                   max={100}
                   min={0}
@@ -326,7 +326,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
         className="euiAccordion__padding--l"
       >
         <div
-          className="euiFormRow"
+          className="euiFormRow euiFormRow--compressed"
           id="random_html_id-row"
         >
           <div
@@ -344,7 +344,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout"
+              className="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 className="euiFormControlLayout__childrenWrapper"
@@ -352,7 +352,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
                 <input
                   aria-describedby="random_html_id-help-0"
                   aria-label="Number of primary shards"
-                  className="euiFieldNumber"
+                  className="euiFieldNumber euiFieldNumber--compressed"
                   id="random_html_id"
                   max={100}
                   min={1}
@@ -377,7 +377,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
           className="euiSpacer euiSpacer--l"
         />
         <div
-          className="euiFormRow"
+          className="euiFormRow euiFormRow--compressed"
           id="random_html_id-row"
         >
           <div
@@ -395,7 +395,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout"
+              className="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 className="euiFormControlLayout__childrenWrapper"
@@ -403,7 +403,7 @@ exports[`Advanced Index settings acceleration components renders acceleration in
                 <input
                   aria-describedby="random_html_id-help-0"
                   aria-label="Number of replicas"
-                  className="euiFieldNumber"
+                  className="euiFieldNumber euiFieldNumber--compressed"
                   id="random_html_id"
                   max={100}
                   min={0}
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
index c3755c2ea..70fe5053b 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_setting_options.test.tsx.snap
@@ -14,7 +14,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -49,7 +49,7 @@ Array [
                 value="autoInterval"
               />,
               <div
-                className="euiFormControlLayout"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
@@ -64,7 +64,7 @@ Array [
                     aria-describedby="random_html_id-help-0"
                     aria-haspopup="true"
                     aria-labelledby="random_html_id random_html_id"
-                    className="euiSuperSelectControl"
+                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -81,7 +81,7 @@ Array [
                     >
                       <svg
                         aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                         focusable="false"
                         height={16}
                         role="img"
@@ -111,7 +111,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -129,7 +129,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -137,7 +137,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Refresh increments"
-            className="euiFieldNumber euiFieldNumber--inGroup"
+            className="euiFieldNumber euiFieldNumber--compressed euiFieldNumber--inGroup"
             id="random_html_id"
             min={1}
             onBlur={[Function]}
@@ -149,13 +149,13 @@ Array [
           />
         </div>
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <select
-              className="euiSelect euiFormControlLayout__append"
+              className="euiSelect euiSelect--compressed euiFormControlLayout__append"
               onBlur={[Function]}
               onChange={[Function]}
               onMouseUp={[Function]}
@@ -194,7 +194,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -221,7 +221,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -273,7 +273,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -281,7 +281,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Use aria labels when no actual label is in use"
-            className="euiFieldText"
+            className="euiFieldText euiFieldText--compressed"
             id="random_html_id"
             onBlur={[Function]}
             onChange={[Function]}
@@ -317,7 +317,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -352,7 +352,7 @@ Array [
                 value="autoInterval"
               />,
               <div
-                className="euiFormControlLayout"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
@@ -367,7 +367,7 @@ Array [
                     aria-describedby="random_html_id-help-0"
                     aria-haspopup="true"
                     aria-labelledby="random_html_id random_html_id"
-                    className="euiSuperSelectControl"
+                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -384,7 +384,7 @@ Array [
                     >
                       <svg
                         aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                         focusable="false"
                         height={16}
                         role="img"
@@ -415,7 +415,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -433,7 +433,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -441,7 +441,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Refresh increments"
-            className="euiFieldNumber euiFieldNumber--inGroup"
+            className="euiFieldNumber euiFieldNumber--compressed euiFieldNumber--inGroup"
             id="random_html_id"
             min={1}
             onBlur={[Function]}
@@ -453,13 +453,13 @@ Array [
           />
         </div>
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <select
-              className="euiSelect euiFormControlLayout__append"
+              className="euiSelect euiSelect--compressed euiFormControlLayout__append"
               onBlur={[Function]}
               onChange={[Function]}
               onMouseUp={[Function]}
@@ -498,7 +498,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -526,7 +526,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -577,7 +577,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -585,7 +585,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Use aria labels when no actual label is in use"
-            className="euiFieldText"
+            className="euiFieldText euiFieldText--compressed"
             id="random_html_id"
             onBlur={[Function]}
             onChange={[Function]}
@@ -621,7 +621,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -656,7 +656,7 @@ Array [
                 value="autoInterval"
               />,
               <div
-                className="euiFormControlLayout"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
@@ -671,7 +671,7 @@ Array [
                     aria-describedby="random_html_id-help-0"
                     aria-haspopup="true"
                     aria-labelledby="random_html_id random_html_id"
-                    className="euiSuperSelectControl"
+                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -688,7 +688,7 @@ Array [
                     >
                       <svg
                         aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                         focusable="false"
                         height={16}
                         role="img"
@@ -719,7 +719,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -737,7 +737,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout euiFormControlLayout--group"
+        className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -745,7 +745,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Refresh increments"
-            className="euiFieldNumber euiFieldNumber--inGroup"
+            className="euiFieldNumber euiFieldNumber--compressed euiFieldNumber--inGroup"
             id="random_html_id"
             min={1}
             onBlur={[Function]}
@@ -757,13 +757,13 @@ Array [
           />
         </div>
         <div
-          className="euiFormControlLayout"
+          className="euiFormControlLayout euiFormControlLayout--compressed"
         >
           <div
             className="euiFormControlLayout__childrenWrapper"
           >
             <select
-              className="euiSelect euiFormControlLayout__append"
+              className="euiSelect euiSelect--compressed euiFormControlLayout__append"
               onBlur={[Function]}
               onChange={[Function]}
               onMouseUp={[Function]}
@@ -802,7 +802,7 @@ Array [
               >
                 <svg
                   aria-hidden={true}
-                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height={16}
                   role="img"
@@ -830,7 +830,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -881,7 +881,7 @@ Array [
       className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout"
+        className="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           className="euiFormControlLayout__childrenWrapper"
@@ -889,7 +889,7 @@ Array [
           <input
             aria-describedby="random_html_id-help-0"
             aria-label="Use aria labels when no actual label is in use"
-            className="euiFieldText"
+            className="euiFieldText euiFieldText--compressed"
             id="random_html_id"
             onBlur={[Function]}
             onChange={[Function]}
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
index 0a4b47c08..82540ef2c 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/index_type_selector.test.tsx.snap
@@ -14,7 +14,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -83,7 +83,7 @@ Array [
                 value="skipping"
               />,
               <div
-                className="euiFormControlLayout"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
@@ -98,7 +98,7 @@ Array [
                     aria-describedby="random_html_id-help-0"
                     aria-haspopup="true"
                     aria-labelledby="random_html_id random_html_id"
-                    className="euiSuperSelectControl"
+                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -115,7 +115,7 @@ Array [
                     >
                       <svg
                         aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                         focusable="false"
                         height={16}
                         role="img"
@@ -161,7 +161,7 @@ Array [
     className="euiSpacer euiSpacer--s"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -229,7 +229,7 @@ Array [
                 value="skipping"
               />,
               <div
-                className="euiFormControlLayout"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
@@ -244,7 +244,7 @@ Array [
                     aria-describedby="random_html_id-help-0"
                     aria-haspopup="true"
                     aria-labelledby="random_html_id random_html_id"
-                    className="euiSuperSelectControl"
+                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -261,7 +261,7 @@ Array [
                     >
                       <svg
                         aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                         focusable="false"
                         height={16}
                         role="img"
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/preview_sql_defintion.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/preview_sql_defintion.test.tsx.snap
index 802f07f9e..96c6ac678 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/preview_sql_defintion.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/preview_sql_defintion.test.tsx.snap
@@ -67,7 +67,7 @@ exports[`Preview SQL acceleration components renders Preview SQL settings with d
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--success"
+              className="euiButton euiButton--success euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
@@ -181,7 +181,7 @@ exports[`Preview SQL acceleration components renders Preview SQL settings with d
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--success"
+              className="euiButton euiButton--success euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
@@ -296,7 +296,7 @@ exports[`Preview SQL acceleration components renders Preview SQL settings with e
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--success"
+              className="euiButton euiButton--success euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
@@ -411,7 +411,7 @@ exports[`Preview SQL acceleration components renders Preview SQL settings with m
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--success"
+              className="euiButton euiButton--success euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
index 379583fb4..b9a4d9c58 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/__tests__/__snapshots__/source_selector.test.tsx.snap
@@ -41,7 +41,7 @@ Array [
     className="euiSpacer euiSpacer--m"
   />,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -71,18 +71,18 @@ Array [
           <div
             aria-expanded={false}
             aria-haspopup="listbox"
-            className="euiComboBox"
+            className="euiComboBox euiComboBox--compressed"
             onKeyDown={[Function]}
             role="combobox"
           >
             <div
-              className="euiFormControlLayout"
+              className="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 className="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                   data-test-subj="comboBoxInput"
                   onClick={[Function]}
                   tabIndex={-1}
@@ -145,7 +145,7 @@ Array [
                   >
                     <svg
                       aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                       focusable="false"
                       height={16}
                       role="img"
@@ -200,7 +200,7 @@ Array [
     </div>
   </div>,
   <div
-    className="euiFormRow"
+    className="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -230,18 +230,18 @@ Array [
           <div
             aria-expanded={false}
             aria-haspopup="listbox"
-            className="euiComboBox"
+            className="euiComboBox euiComboBox--compressed"
             onKeyDown={[Function]}
             role="combobox"
           >
             <div
-              className="euiFormControlLayout"
+              className="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 className="euiFormControlLayout__childrenWrapper"
               >
                 <div
-                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                   data-test-subj="comboBoxInput"
                   onClick={[Function]}
                   tabIndex={-1}
@@ -304,7 +304,7 @@ Array [
                   >
                     <svg
                       aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                       focusable="false"
                       height={16}
                       role="img"
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/define_index_options.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/define_index_options.tsx
index 63f829977..9bc751927 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/define_index_options.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/define_index_options.tsx
@@ -4,11 +4,11 @@
  */
 
 import {
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiIconTip,
   EuiLink,
   EuiMarkdownFormat,
@@ -51,9 +51,9 @@ export const DefineIndexOptions = ({
         </EuiFlexGroup>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButton onClick={() => setModalComponent(<></>)} fill>
+        <EuiSmallButton onClick={() => setModalComponent(<></>)} fill>
           Close
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
@@ -89,7 +89,7 @@ export const DefineIndexOptions = ({
 
   return (
     <>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Index name"
         helpText='Must be in lowercase letters, numbers and underscore. Spaces, commas, and characters -, :, ", *, +, /, \, |, ?, #, >, or < are not allowed. Prefix and suffix are added to the name of generated OpenSearch index.'
         isInvalid={hasError(accelerationFormData.formErrors, 'indexNameError')}
@@ -100,7 +100,7 @@ export const DefineIndexOptions = ({
           </EuiText>
         }
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           placeholder="Enter index name"
           value={accelerationFormData.accelerationIndexName}
           onChange={onChangeIndexName}
@@ -117,7 +117,7 @@ export const DefineIndexOptions = ({
             );
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       {modalComponent}
     </>
   );
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_advanced_settings.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_advanced_settings.tsx
index b6b24d691..3ad21969e 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_advanced_settings.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_advanced_settings.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiAccordion, EuiFieldNumber, EuiFormRow, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiAccordion, EuiCompressedFieldNumber, EuiCompressedFormRow, EuiSpacer, EuiText } from '@elastic/eui';
 import producer from 'immer';
 import React, { ChangeEvent, useState } from 'react';
 import { CreateAccelerationForm } from '../../../../../../../../common/types/data_connections';
@@ -56,13 +56,13 @@ export const IndexAdvancedSettings = ({
           setAccelerationFormData={setAccelerationFormData}
         />
       )}
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Number of primary shards"
         helpText="Specify the number of primary shards for the index. The number of primary shards cannot be changed after the index is created."
         isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
         error={accelerationFormData.formErrors.primaryShardsError}
       >
-        <EuiFieldNumber
+        <EuiCompressedFieldNumber
           placeholder="Number of primary shards"
           value={primaryShards}
           onChange={onChangePrimaryShards}
@@ -80,15 +80,15 @@ export const IndexAdvancedSettings = ({
           }}
           isInvalid={hasError(accelerationFormData.formErrors, 'primaryShardsError')}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       <EuiSpacer size="l" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Number of replicas"
         helpText="Specify the number of replicas each primary shard should have."
         isInvalid={hasError(accelerationFormData.formErrors, 'replicaShardsError')}
         error={accelerationFormData.formErrors.replicaShardsError}
       >
-        <EuiFieldNumber
+        <EuiCompressedFieldNumber
           placeholder="Number of replicas"
           value={replicaCount}
           onChange={onChangeReplicaCount}
@@ -106,7 +106,7 @@ export const IndexAdvancedSettings = ({
           }}
           isInvalid={hasError(accelerationFormData.formErrors, 'replicaShardsError')}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </EuiAccordion>
   );
 };
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_setting_options.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_setting_options.tsx
index 22a030894..6b0ea9a1a 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_setting_options.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_setting_options.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiFieldNumber,
-  EuiFieldText,
-  EuiFormRow,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
   EuiLink,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
-  EuiSuperSelect,
+  EuiCompressedSuperSelect,
   EuiText,
 } from '@elastic/eui';
 import producer from 'immer';
@@ -164,26 +164,26 @@ export const IndexSettingOptions = ({
           setAccelerationFormData={setAccelerationFormData}
         />
       )}
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Refresh type"
         helpText="Specify how often the index should refresh, which publishes the most recent changes and make them available for search."
       >
-        <EuiSuperSelect
+        <EuiCompressedSuperSelect
           options={refreshOptions}
           valueOfSelected={refreshTypeSelected}
           onChange={onChangeRefreshType}
           itemLayoutAlign="top"
           hasDividers
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       {refreshTypeSelected === 'autoInterval' && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Refresh increments"
           helpText="Specify how frequent the index gets updated when performing the refresh job."
           isInvalid={hasError(accelerationFormData.formErrors, 'refreshIntervalError')}
           error={accelerationFormData.formErrors.refreshIntervalError}
         >
-          <EuiFieldNumber
+          <EuiCompressedFieldNumber
             placeholder="Refresh increments"
             value={refreshWindow}
             onChange={onChangeRefreshWindow}
@@ -202,7 +202,7 @@ export const IndexSettingOptions = ({
               );
             }}
             append={
-              <EuiSelect
+              <EuiCompressedSelect
                 value={refreshInterval}
                 onChange={onChangeRefreshInterval}
                 options={ACCELERATION_REFRESH_TIME_INTERVAL}
@@ -220,10 +220,10 @@ export const IndexSettingOptions = ({
               />
             }
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
       {refreshTypeSelected !== 'manual' && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Checkpoint location"
           helpText="The HDFS compatible file system location path for incremental refresh job checkpoint."
           isInvalid={hasError(accelerationFormData.formErrors, 'checkpointLocationError')}
@@ -236,7 +236,7 @@ export const IndexSettingOptions = ({
             </EuiText>
           }
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             placeholder="s3://checkpoint/location"
             value={checkpoint}
             onChange={onChangeCheckpoint}
@@ -253,16 +253,16 @@ export const IndexSettingOptions = ({
               );
             }}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
       {accelerationFormData.accelerationIndexType === 'materialized' && (
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Watermark Delay"
           helpText="Data arrival delay for incremental refresh on a materialized view with aggregations"
           isInvalid={hasError(accelerationFormData.formErrors, 'watermarkDelayError')}
           error={accelerationFormData.formErrors.watermarkDelayError}
         >
-          <EuiFieldNumber
+          <EuiCompressedFieldNumber
             placeholder="Watermark delay interval"
             value={delayWindow}
             onChange={onChangeDelayWindow}
@@ -280,14 +280,14 @@ export const IndexSettingOptions = ({
               );
             }}
             append={
-              <EuiSelect
+              <EuiCompressedSelect
                 value={delayInterval}
                 onChange={onChangeDelayInterval}
                 options={ACCELERATION_TIME_INTERVAL}
               />
             }
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       )}
     </>
   );
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx
index c16962058..b7b769227 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/index_type_selector.tsx
@@ -3,7 +3,13 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFormRow, EuiLink, EuiSpacer, EuiSuperSelect, EuiText } from '@elastic/eui';
+import {
+  EuiCompressedFormRow,
+  EuiLink,
+  EuiSpacer,
+  EuiCompressedSuperSelect,
+  EuiText,
+} from '@elastic/eui';
 import React, { Fragment, useEffect, useState } from 'react';
 import {
   ACCELERATION_DEFUALT_SKIPPING_INDEX_NAME,
@@ -97,7 +103,7 @@ export const IndexTypeSelector = ({
         <h3>Acceleration setting</h3>
       </EuiText>
       <EuiSpacer size="s" />
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Acceleration type"
         helpText="Select the type of acceleration according to your use case."
         labelAppend={
@@ -108,14 +114,14 @@ export const IndexTypeSelector = ({
           </EuiText>
         }
       >
-        <EuiSuperSelect
+        <EuiCompressedSuperSelect
           options={superSelectOptions}
           valueOfSelected={value}
           onChange={onChangeSupeSelect}
           itemLayoutAlign="top"
           hasDividers
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 };
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/preview_sql_defintion.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/preview_sql_defintion.tsx
index a22b87b28..22eae7c5c 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/preview_sql_defintion.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/preview_sql_defintion.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiAccordion,
-  EuiButton,
+  EuiSmallButton,
   EuiCodeBlock,
   EuiFlexGroup,
   EuiFlexItem,
@@ -103,9 +103,9 @@ export const PreviewSQLDefinition = ({
   };
 
   const queryWorkbenchButton = sqlWorkbenchPLuginExists ? (
-    <EuiButton iconSide="right" onClick={openInWorkbench}>
+    <EuiSmallButton iconSide="right" onClick={openInWorkbench}>
       Edit in Query Workbench
-    </EuiButton>
+    </EuiSmallButton>
   ) : (
     <></>
   );
@@ -132,18 +132,18 @@ export const PreviewSQLDefinition = ({
         <EuiFlexGroup>
           <EuiFlexItem grow={false}>
             {isPreviewStale && isPreviewTriggered ? (
-              <EuiButton
+              <EuiSmallButton
                 iconType="kqlFunction"
                 iconSide="left"
                 color="success"
                 onClick={onClickPreview}
               >
                 Update preview
-              </EuiButton>
+              </EuiSmallButton>
             ) : (
-              <EuiButton color="success" onClick={onClickPreview}>
+              <EuiSmallButton color="success" onClick={onClickPreview}>
                 Generate preview
-              </EuiButton>
+              </EuiSmallButton>
             )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>{queryWorkbenchButton}</EuiFlexItem>
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx
index 1d61000b2..ed4cee829 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/selectors/source_selector.tsx
@@ -4,14 +4,14 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiDescriptionList,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -192,7 +192,7 @@ export const AccelerationDataSourceSelector = ({
         <>
           {dataSourceDescription}
           <EuiSpacer size="m" />
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Database"
             helpText="Select the database that contains the tables you'd like to use."
             isInvalid={hasError(accelerationFormData.formErrors, 'databaseError')}
@@ -200,7 +200,7 @@ export const AccelerationDataSourceSelector = ({
           >
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
-                <EuiComboBox
+                <EuiCompressedComboBox
                   placeholder="Select a database"
                   singleSelection={{ asPlainText: true }}
                   options={databases}
@@ -236,8 +236,8 @@ export const AccelerationDataSourceSelector = ({
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFormRow>
-          <EuiFormRow
+          </EuiCompressedFormRow>
+          <EuiCompressedFormRow
             label="Table"
             helpText={
               tableFieldsLoading
@@ -249,7 +249,7 @@ export const AccelerationDataSourceSelector = ({
           >
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem>
-                <EuiComboBox
+                <EuiCompressedComboBox
                   placeholder="Select a table"
                   singleSelection={{ asPlainText: true }}
                   options={tables}
@@ -286,7 +286,7 @@ export const AccelerationDataSourceSelector = ({
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
     </>
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
index 628a20254..3c065ddd8 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/__tests__/__snapshots__/query_visual_editor.test.tsx.snap
@@ -263,7 +263,7 @@ Array [
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--primary"
+              className="euiButton euiButton--primary euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
@@ -288,7 +288,7 @@ Array [
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--danger"
+              className="euiButton euiButton--danger euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
@@ -316,7 +316,7 @@ Array [
       >
         Array [
           <button
-            className="euiButton euiButton--primary"
+            className="euiButton euiButton--primary euiButton--small"
             disabled={false}
             onClick={[Function]}
             style={
@@ -701,14 +701,14 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <div
-                    className="euiFormControlLayout"
+                    className="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <select
                         aria-label="Use aria labels when no actual label is in use"
-                        className="euiSelect"
+                        className="euiSelect euiSelect--compressed"
                         id="selectDocExample"
                         onChange={[Function]}
                         onMouseUp={[Function]}
@@ -741,7 +741,7 @@ Array [
                         >
                           <svg
                             aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                             focusable="false"
                             height={16}
                             role="img"
@@ -778,7 +778,7 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <button
-                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                     disabled={false}
                     onClick={[Function]}
                     type="button"
@@ -871,14 +871,14 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <div
-                    className="euiFormControlLayout"
+                    className="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <select
                         aria-label="Use aria labels when no actual label is in use"
-                        className="euiSelect"
+                        className="euiSelect euiSelect--compressed"
                         id="selectDocExample"
                         onChange={[Function]}
                         onMouseUp={[Function]}
@@ -917,7 +917,7 @@ Array [
                         >
                           <svg
                             aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                             focusable="false"
                             height={16}
                             role="img"
@@ -954,7 +954,7 @@ Array [
                   className="euiTableCellContent euiTableCellContent--overflowingContent"
                 >
                   <button
-                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                     disabled={false}
                     onClick={[Function]}
                     type="button"
@@ -1134,7 +1134,7 @@ Array [
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--primary"
+              className="euiButton euiButton--primary euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
@@ -1159,7 +1159,7 @@ Array [
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              className="euiButton euiButton--danger"
+              className="euiButton euiButton--danger euiButton--small"
               disabled={false}
               onClick={[Function]}
               style={
@@ -1187,7 +1187,7 @@ Array [
       >
         Array [
           <button
-            className="euiButton euiButton--primary"
+            className="euiButton euiButton--primary euiButton--small"
             disabled={false}
             onClick={[Function]}
             style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/covering_index/covering_index_builder.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/covering_index/covering_index_builder.tsx
index 00be641ed..24886b1df 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/covering_index/covering_index_builder.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/covering_index/covering_index_builder.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiExpression,
   EuiFlexGroup,
@@ -85,7 +85,7 @@ export const CoveringIndexBuilder = ({
           >
             <>
               <EuiPopoverTitle paddingSize="l">Columns</EuiPopoverTitle>
-              <EuiComboBox
+              <EuiCompressedComboBox
                 placeholder="Select one or more options"
                 options={accelerationFormData.dataTableFields.map((x) => ({ label: x.fieldName }))}
                 selectedOptions={selectedOptions}
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
index 8812acbe2..c28ceb133 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/__tests__/__snapshots__/column_expression.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Column expression components in materialized view renders column expres
     >
       <button
         aria-label="delete-column-expression"
-        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
         disabled={false}
         onClick={[Function]}
         type="button"
@@ -152,7 +152,7 @@ exports[`Column expression components in materialized view renders column expres
     >
       <button
         aria-label="delete-column-expression"
-        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+        className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
         disabled={false}
         onClick={[Function]}
         type="button"
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/add_column_popover.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/add_column_popover.tsx
index a8a4f2e97..13c6c397c 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/add_column_popover.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/add_column_popover.tsx
@@ -6,12 +6,12 @@
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopover,
   EuiPopoverFooter,
   EuiPopoverTitle,
@@ -115,20 +115,20 @@ export const AddColumnPopOver = ({
       <>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiFormRow label="Function">
-              <EuiComboBox
+            <EuiCompressedFormRow label="Function">
+              <EuiCompressedComboBox
                 singleSelection={{ asPlainText: true }}
                 options={ACCELERATION_AGGREGRATION_FUNCTIONS}
                 selectedOptions={selectedFunction}
                 onChange={setSelectedFunction}
                 isClearable={false}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           {selectedFunction[0].label !== 'window.start' && (
             <EuiFlexItem>
-              <EuiFormRow label="Aggregation field">
-                <EuiComboBox
+              <EuiCompressedFormRow label="Aggregation field">
+                <EuiCompressedComboBox
                   singleSelection={{ asPlainText: true }}
                   options={[
                     { label: '*', disabled: selectedFunction[0].label !== 'count' },
@@ -138,14 +138,14 @@ export const AddColumnPopOver = ({
                   onChange={setSelectedField}
                   isClearable={false}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiFlexItem>
           )}
         </EuiFlexGroup>
         <EuiSpacer size="m" />
-        <EuiFormRow label="Column alias - optional">
-          <EuiFieldText name="aliasField" onChange={onChangeAlias} />
-        </EuiFormRow>
+        <EuiCompressedFormRow label="Column alias - optional">
+          <EuiCompressedFieldText name="aliasField" onChange={onChangeAlias} />
+        </EuiCompressedFormRow>
       </>
       <EuiPopoverFooter>
         <EuiButton size="s" fill onClick={onAddExpression}>
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/column_expression.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/column_expression.tsx
index 3550dfeda..4c3e4d291 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/column_expression.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/column_expression.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiButtonIcon,
-  EuiComboBox,
+  EuiSmallButtonIcon,
+  EuiCompressedComboBox,
   EuiExpression,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopover,
 } from '@elastic/eui';
 import producer from 'immer';
@@ -93,8 +93,8 @@ export const ColumnExpression = ({
             <>
               <EuiFlexGroup>
                 <EuiFlexItem grow={false}>
-                  <EuiFormRow label="Aggregate function">
-                    <EuiComboBox
+                  <EuiCompressedFormRow label="Aggregate function">
+                    <EuiCompressedComboBox
                       singleSelection={{ asPlainText: true }}
                       options={ACCELERATION_AGGREGRATION_FUNCTIONS}
                       selectedOptions={[
@@ -113,12 +113,12 @@ export const ColumnExpression = ({
                       }
                       isClearable={false}
                     />
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </EuiFlexItem>
                 {currentColumnExpressionValue.functionName !== 'window.start' && (
                   <EuiFlexItem grow={false}>
-                    <EuiFormRow label="Aggregation field">
-                      <EuiComboBox
+                    <EuiCompressedFormRow label="Aggregation field">
+                      <EuiCompressedComboBox
                         singleSelection={{ asPlainText: true }}
                         options={[
                           {
@@ -145,7 +145,7 @@ export const ColumnExpression = ({
                         }
                         isClearable={false}
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                 )}
               </EuiFlexGroup>
@@ -173,8 +173,8 @@ export const ColumnExpression = ({
               panelPaddingSize="s"
               anchorPosition="downLeft"
             >
-              <EuiFormRow label="Column alias">
-                <EuiFieldText
+              <EuiCompressedFormRow label="Column alias">
+                <EuiCompressedFieldText
                   name="aliasField"
                   value={currentColumnExpressionValue.fieldAlias}
                   onChange={(e) =>
@@ -184,12 +184,12 @@ export const ColumnExpression = ({
                     )
                   }
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiPopover>
           </EuiFlexItem>
         )}
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             color="danger"
             onClick={onDeleteColumnExpression}
             iconType="trash"
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/group_by_tumble_expression.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/group_by_tumble_expression.tsx
index 226030e0e..a7b380fb0 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/group_by_tumble_expression.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/materialized_view/group_by_tumble_expression.tsx
@@ -4,15 +4,15 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiExpression,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPopover,
-  EuiSelect,
+  EuiCompressedSelect,
 } from '@elastic/eui';
 import producer from 'immer';
 import React, { useState } from 'react';
@@ -93,8 +93,8 @@ export const GroupByTumbleExpression = ({
       >
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiFormRow label="Time Field">
-              <EuiComboBox
+            <EuiCompressedFormRow label="Time Field">
+              <EuiCompressedComboBox
                 style={{ minWidth: '200px' }}
                 placeholder="Select one or more options"
                 singleSelection={{ asPlainText: true }}
@@ -105,25 +105,25 @@ export const GroupByTumbleExpression = ({
                 onChange={onChangeTimeField}
                 isClearable={false}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow label="Tumble Window">
-              <EuiFieldNumber
+            <EuiCompressedFormRow label="Tumble Window">
+              <EuiCompressedFieldNumber
                 value={groupbyValues.tumbleWindow}
                 onChange={onChangeTumbleWindow}
                 min={1}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow label="Tumble Interval">
-              <EuiSelect
+            <EuiCompressedFormRow label="Tumble Interval">
+              <EuiCompressedSelect
                 value={groupbyValues.tumbleInterval}
                 onChange={onChangeTumbleInterval}
                 options={ACCELERATION_TIME_INTERVAL}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiPopover>
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
index 4ddc4bc21..f1ee69a23 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/add_fields_modal.test.tsx.snap
@@ -305,7 +305,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -319,7 +319,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -699,7 +699,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -720,7 +720,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                className="euiButton euiButton--primary euiButton--fill"
+                className="euiButton euiButton--primary euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -1071,7 +1071,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -1085,7 +1085,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                class="euiButton euiButton--primary euiButton--fill"
+                class="euiButton euiButton--primary euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -1466,7 +1466,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -1487,7 +1487,7 @@ exports[`Add fields modal in skipping index renders add fields modal in skipping
                 </span>
               </button>
               <button
-                className="euiButton euiButton--primary euiButton--fill"
+                className="euiButton euiButton--primary euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
index f6ff424f0..1f3054ea6 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/delete_fields_modal.test.tsx.snap
@@ -330,7 +330,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -344,7 +344,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                class="euiButton euiButton--danger euiButton--fill"
+                class="euiButton euiButton--danger euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -755,7 +755,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -776,7 +776,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                className="euiButton euiButton--danger euiButton--fill"
+                className="euiButton euiButton--danger euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -1426,7 +1426,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               class="euiModalFooter"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 type="button"
               >
                 <span
@@ -1440,7 +1440,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                class="euiButton euiButton--danger euiButton--fill"
+                class="euiButton euiButton--danger euiButton--small euiButton--fill"
                 type="button"
               >
                 <span
@@ -2167,7 +2167,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
               className="euiModalFooter"
             >
               <button
-                className="euiButton euiButton--primary"
+                className="euiButton euiButton--primary euiButton--small"
                 disabled={false}
                 onClick={[Function]}
                 style={
@@ -2188,7 +2188,7 @@ exports[`Delete fields modal in skipping index renders delete fields modal in sk
                 </span>
               </button>
               <button
-                className="euiButton euiButton--danger euiButton--fill"
+                className="euiButton euiButton--danger euiButton--small euiButton--fill"
                 disabled={false}
                 onClick={[Function]}
                 style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/generate_fields.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/generate_fields.test.tsx.snap
index decdb88aa..9dadec708 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/generate_fields.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/generate_fields.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Generate fields in skipping index Generate fields in skipping index with default options 1`] = `
 Array [
   <button
-    className="euiButton euiButton--primary"
+    className="euiButton euiButton--primary euiButton--small"
     disabled={false}
     onClick={[Function]}
     style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
index 669a7fe70..55bfa3b06 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/__tests__/__snapshots__/skipping_index_builder.test.tsx.snap
@@ -173,7 +173,7 @@ Array [
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            className="euiButton euiButton--primary"
+            className="euiButton euiButton--primary euiButton--small"
             disabled={false}
             onClick={[Function]}
             style={
@@ -198,7 +198,7 @@ Array [
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            className="euiButton euiButton--danger"
+            className="euiButton euiButton--danger euiButton--small"
             disabled={false}
             onClick={[Function]}
             style={
@@ -226,7 +226,7 @@ Array [
     >
       Array [
         <button
-          className="euiButton euiButton--primary"
+          className="euiButton euiButton--primary euiButton--small"
           disabled={false}
           onClick={[Function]}
           style={
@@ -455,14 +455,14 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  className="euiFormControlLayout"
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     className="euiFormControlLayout__childrenWrapper"
                   >
                     <select
                       aria-label="Use aria labels when no actual label is in use"
-                      className="euiSelect"
+                      className="euiSelect euiSelect--compressed"
                       id="selectDocExample"
                       onChange={[Function]}
                       onMouseUp={[Function]}
@@ -495,7 +495,7 @@ Array [
                       >
                         <svg
                           aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                           focusable="false"
                           height={16}
                           role="img"
@@ -532,7 +532,7 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                   disabled={false}
                   onClick={[Function]}
                   type="button"
@@ -625,14 +625,14 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <div
-                  className="euiFormControlLayout"
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     className="euiFormControlLayout__childrenWrapper"
                   >
                     <select
                       aria-label="Use aria labels when no actual label is in use"
-                      className="euiSelect"
+                      className="euiSelect euiSelect--compressed"
                       id="selectDocExample"
                       onChange={[Function]}
                       onMouseUp={[Function]}
@@ -671,7 +671,7 @@ Array [
                       >
                         <svg
                           aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                           focusable="false"
                           height={16}
                           role="img"
@@ -708,7 +708,7 @@ Array [
                 className="euiTableCellContent euiTableCellContent--overflowingContent"
               >
                 <button
-                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
                   disabled={false}
                   onClick={[Function]}
                   type="button"
@@ -888,7 +888,7 @@ Array [
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            className="euiButton euiButton--primary"
+            className="euiButton euiButton--primary euiButton--small"
             disabled={false}
             onClick={[Function]}
             style={
@@ -913,7 +913,7 @@ Array [
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            className="euiButton euiButton--danger"
+            className="euiButton euiButton--danger euiButton--small"
             disabled={false}
             onClick={[Function]}
             style={
@@ -941,7 +941,7 @@ Array [
     >
       Array [
         <button
-          className="euiButton euiButton--primary"
+          className="euiButton euiButton--primary euiButton--small"
           disabled={false}
           onClick={[Function]}
           style={
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/add_fields_modal.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/add_fields_modal.tsx
index 8ede532dd..0f2e03d99 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/add_fields_modal.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/add_fields_modal.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiInMemoryTable,
   EuiModal,
   EuiModalBody,
@@ -84,8 +84,8 @@ export const AddFieldsModal = ({
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton onClick={() => setIsAddModalVisible(false)}>Cancel</EuiButton>
-        <EuiButton
+        <EuiSmallButton onClick={() => setIsAddModalVisible(false)}>Cancel</EuiSmallButton>
+        <EuiSmallButton
           onClick={() => {
             setAccelerationFormData(
               producer((accData) => {
@@ -105,7 +105,7 @@ export const AddFieldsModal = ({
           fill
         >
           Add
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/delete_fields_modal.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/delete_fields_modal.tsx
index 34ea5414c..e5e3f1518 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/delete_fields_modal.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/delete_fields_modal.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiInMemoryTable,
   EuiModal,
   EuiModalBody,
@@ -83,8 +83,8 @@ export const DeleteFieldsModal = ({
       </EuiModalBody>
 
       <EuiModalFooter>
-        <EuiButton onClick={() => setIsDeleteModalVisible(false)}>Cancel</EuiButton>
-        <EuiButton
+        <EuiSmallButton onClick={() => setIsDeleteModalVisible(false)}>Cancel</EuiSmallButton>
+        <EuiSmallButton
           onClick={() => {
             setAccelerationFormData({
               ...accelerationFormData,
@@ -100,7 +100,7 @@ export const DeleteFieldsModal = ({
           fill
         >
           Delete
-        </EuiButton>
+        </EuiSmallButton>
       </EuiModalFooter>
     </EuiModal>
   );
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/generate_fields.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/generate_fields.tsx
index fd4aa5445..52e131efb 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/generate_fields.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/generate_fields.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiConfirmModal } from '@elastic/eui';
+import { EuiSmallButton, EuiConfirmModal } from '@elastic/eui';
 import producer from 'immer';
 import React, { useEffect, useState } from 'react';
 import {
@@ -118,9 +118,9 @@ export const GenerateFields = ({
 
   return (
     <>
-      <EuiButton onClick={onClickGenerate} isDisabled={isSkippingtableLoading}>
+      <EuiSmallButton onClick={onClickGenerate} isDisabled={isSkippingtableLoading}>
         {isGenerateRun ? 'Regenerate' : 'Generate'}
-      </EuiButton>
+      </EuiSmallButton>
       {replaceDefinitionModal}
     </>
   );
diff --git a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/skipping_index_builder.tsx b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/skipping_index_builder.tsx
index 680279590..c9968010c 100644
--- a/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/skipping_index_builder.tsx
+++ b/public/components/datasources/components/manage/accelerations/create_accelerations_flyout/visual_editors/skipping_index/skipping_index_builder.tsx
@@ -5,11 +5,11 @@
 
 import {
   EuiBasicTable,
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -103,7 +103,7 @@ export const SkippingIndexBuilder = ({
     {
       name: 'Acceleration method',
       render: (item: SkippingIndexRowType) => (
-        <EuiSelect
+        <EuiCompressedSelect
           id="selectDocExample"
           options={
             item.dataType === SPARK_STRING_DATATYPE
@@ -122,7 +122,7 @@ export const SkippingIndexBuilder = ({
       readOnly: isSkippingtableLoading,
       render: (item: SkippingIndexRowType) => {
         return (
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             onClick={() => {
               setAccelerationFormData({
                 ...accelerationFormData,
@@ -178,21 +178,21 @@ export const SkippingIndexBuilder = ({
         <EuiFlexItem>
           <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} wrap>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 onClick={() => setIsAddModalVisible(true)}
                 isDisabled={isSkippingtableLoading}
               >
                 Add fields
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton
+              <EuiSmallButton
                 onClick={() => setIsDeleteModalVisible(true)}
                 isDisabled={isSkippingtableLoading}
                 color="danger"
               >
                 Bulk delete
-              </EuiButton>
+              </EuiSmallButton>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
diff --git a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx
index 0b7d7d9dd..6074e9a5c 100644
--- a/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx
+++ b/public/components/datasources/components/manage/accelerations/utils/acceleration_utils.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiHealth } from '@elastic/eui';
+import { EuiSmallButton, EuiHealth } from '@elastic/eui';
 import React from 'react';
 import { DATA_SOURCE_TYPES } from '../../../../../../../common/constants/data_sources';
 import {
@@ -104,7 +104,7 @@ export const CreateAccelerationFlyoutButton = ({
 }) => {
   return (
     <>
-      <EuiButton
+      <EuiSmallButton
         onClick={() =>
           renderCreateAccelerationFlyout({
             dataSource: dataSourceName,
@@ -114,7 +114,7 @@ export const CreateAccelerationFlyoutButton = ({
         fill
       >
         Create acceleration
-      </EuiButton>
+      </EuiSmallButton>
     </>
   );
 };
diff --git a/public/components/datasources/components/manage/access_control_tab.tsx b/public/components/datasources/components/manage/access_control_tab.tsx
index aac893d6a..2e6a9d145 100644
--- a/public/components/datasources/components/manage/access_control_tab.tsx
+++ b/public/components/datasources/components/manage/access_control_tab.tsx
@@ -9,7 +9,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiHorizontalRule,
-  EuiButton,
+  EuiSmallButton,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { EuiPanel } from '@elastic/eui';
@@ -107,12 +107,12 @@ export const AccessControlTab = (props: AccessControlTabProps) => {
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="createButton"
             onClick={() => setMode(mode === 'view' ? 'edit' : 'view')}
           >
             {mode === 'view' ? 'Edit' : 'Cancel'}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
diff --git a/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx b/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx
index 7520995cd..0826534f0 100644
--- a/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx
+++ b/public/components/datasources/components/manage/associated_objects/associated_objects_details_flyout.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiButtonEmpty,
   EuiDescriptionList,
   EuiDescriptionListDescription,
@@ -196,7 +196,7 @@ export const AssociatedObjectsDetailsFlyout = ({
         </p>
       }
       actions={
-        <EuiButton
+        <EuiSmallButton
           color="primary"
           fill
           onClick={() =>
@@ -213,7 +213,7 @@ export const AssociatedObjectsDetailsFlyout = ({
           {i18n.translate('datasources.associatedObjectsFlyout.createAccelerationButton', {
             defaultMessage: CREATE_ACCELERATION_DESCRIPTION,
           })}
-        </EuiButton>
+        </EuiSmallButton>
       }
     />
   );
diff --git a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_refresh_button.tsx b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_refresh_button.tsx
index e737a8356..54e07f6fd 100644
--- a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_refresh_button.tsx
+++ b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_refresh_button.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton } from '@elastic/eui';
+import { EuiSmallButton } from '@elastic/eui';
 import React from 'react';
 import { ASSC_OBJ_REFRESH_BTN } from './associated_objects_tab_utils';
 
@@ -18,8 +18,8 @@ export const AssociatedObjectsRefreshButton: React.FC<AssociatedObjectsRefreshBu
   const { isLoading, onClick } = props;
 
   return (
-    <EuiButton iconType="refresh" onClick={onClick} isLoading={isLoading} isDisabled={isLoading}>
+    <EuiSmallButton iconType="refresh" onClick={onClick} isLoading={isLoading} isDisabled={isLoading}>
       {ASSC_OBJ_REFRESH_BTN}
-    </EuiButton>
+    </EuiSmallButton>
   );
 };
diff --git a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
index 2d1273af6..1b5e489f1 100644
--- a/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
+++ b/public/components/datasources/components/manage/associated_objects/utils/associated_objects_tab_empty.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiText } from '@elastic/eui';
 import React from 'react';
 import { LoadCacheType } from '../../../../../../../common/types/data_connections';
 import { coreRefs } from '../../../../../../framework/core_refs';
@@ -17,13 +17,13 @@ export const AssociatedObjectsTabEmpty: React.FC<AssociatedObjectsTabEmptyProps>
   const { application } = coreRefs;
 
   const QueryWorkbenchButton = (
-    <EuiButton
+    <EuiSmallButton
       iconSide="right"
       onClick={() => application!.navigateToApp('opensearch-query-workbench')}
       iconType="popout"
     >
       Query Workbench
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   let titleText;
diff --git a/public/components/datasources/components/manage/inactive_data_connection.tsx b/public/components/datasources/components/manage/inactive_data_connection.tsx
index 50a668ae1..768143a2f 100644
--- a/public/components/datasources/components/manage/inactive_data_connection.tsx
+++ b/public/components/datasources/components/manage/inactive_data_connection.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiCallOut } from '@elastic/eui';
+import { EuiSmallButton, EuiCallOut } from '@elastic/eui';
 import React from 'react';
 import {
   DATACONNECTIONS_BASE,
@@ -45,9 +45,9 @@ export const InactiveDataConnectionCallout = ({
       <p>
         Associated objects and accelerations are not available while this connection is inactive.
       </p>
-      <EuiButton onClick={enableDataSource} color="warning">
+      <EuiSmallButton onClick={enableDataSource} color="warning">
         Enable connection
-      </EuiButton>
+      </EuiSmallButton>
     </EuiCallOut>
   );
 };
diff --git a/public/components/datasources/components/manage/integrations/installed_integrations_table.tsx b/public/components/datasources/components/manage/integrations/installed_integrations_table.tsx
index 19001dd13..de1e15d7e 100644
--- a/public/components/datasources/components/manage/integrations/installed_integrations_table.tsx
+++ b/public/components/datasources/components/manage/integrations/installed_integrations_table.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiFieldSearch,
+  EuiSmallButton,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -94,9 +94,9 @@ const AddIntegrationButton = ({
   toggleFlyout: () => void;
 }) => {
   return (
-    <EuiButton fill={fill} onClick={toggleFlyout}>
+    <EuiSmallButton fill={fill} onClick={toggleFlyout}>
       Add Integrations
-    </EuiButton>
+    </EuiSmallButton>
   );
 };
 
@@ -224,7 +224,7 @@ export const InstalledIntegrationsTable = ({
       <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem>
-          <EuiFieldSearch
+          <EuiCompressedFieldSearch
             fullWidth
             placeholder="Search..."
             onChange={(queryEvent) => {
diff --git a/public/components/datasources/components/manage/manage_data_connections_description.tsx b/public/components/datasources/components/manage/manage_data_connections_description.tsx
index 20a170423..bc8e58013 100644
--- a/public/components/datasources/components/manage/manage_data_connections_description.tsx
+++ b/public/components/datasources/components/manage/manage_data_connections_description.tsx
@@ -9,7 +9,7 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   EuiLink,
-  EuiButton,
+  EuiSmallButton,
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
@@ -38,9 +38,9 @@ export const DataConnectionsDescription = (props: DataConnectionsDescriptionProp
           </>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton onClick={refresh} iconType="refresh">
+          <EuiSmallButton onClick={refresh} iconType="refresh">
             Refresh
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
 
diff --git a/public/components/datasources/components/new/auth_details.tsx b/public/components/datasources/components/new/auth_details.tsx
index 90b59c531..932a00c0c 100644
--- a/public/components/datasources/components/new/auth_details.tsx
+++ b/public/components/datasources/components/new/auth_details.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiFormRow, EuiFieldText, EuiFieldPassword } from '@elastic/eui';
+import { EuiCompressedFormRow, EuiCompressedFieldText, EuiCompressedFieldPassword } from '@elastic/eui';
 import { useState } from 'react';
 import React from 'react';
 import { AuthMethod } from '../../../../../common/constants/data_connections';
@@ -45,29 +45,29 @@ export const AuthDetails = (props: AuthDetailProps) => {
     case 'basicauth':
       return (
         <>
-          <EuiFormRow label="Username">
-            <EuiFieldText
+          <EuiCompressedFormRow label="Username">
+            <EuiCompressedFieldText
               placeholder={'Username'}
               value={username}
               onChange={(e) => setUsername(e.target.value)}
               onBlur={(e) => setUsernameForRequest(e.target.value)}
             />
-          </EuiFormRow>
-          <EuiFormRow label="Password">
-            <EuiFieldPassword
+          </EuiCompressedFormRow>
+          <EuiCompressedFormRow label="Password">
+            <EuiCompressedFieldPassword
               type={'dual'}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               onBlur={(e) => setPasswordForRequest(e.target.value)}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       );
     case 'awssigv4':
       return (
         <>
-          <EuiFormRow label="Auth Region">
-            <EuiFieldText
+          <EuiCompressedFormRow label="Auth Region">
+            <EuiCompressedFieldText
               placeholder="us-west-2"
               value={region}
               onBlur={(e) => {
@@ -77,23 +77,23 @@ export const AuthDetails = (props: AuthDetailProps) => {
                 setRegion(e.target.value);
               }}
             />
-          </EuiFormRow>
-          <EuiFormRow label="Access Key">
-            <EuiFieldText
+          </EuiCompressedFormRow>
+          <EuiCompressedFormRow label="Access Key">
+            <EuiCompressedFieldText
               placeholder={'Access key placeholder'}
               value={accessKey}
               onChange={(e) => setAccessKey(e.target.value)}
               onBlur={(e) => setAccessKeyForRequest(e.target.value)}
             />
-          </EuiFormRow>
-          <EuiFormRow label="Secret Key">
-            <EuiFieldPassword
+          </EuiCompressedFormRow>
+          <EuiCompressedFormRow label="Secret Key">
+            <EuiCompressedFieldPassword
               type={'dual'}
               value={secretKey}
               onChange={(e) => setSecretKey(e.target.value)}
               onBlur={(e) => setSecretKeyForRequest(e.target.value)}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       );
     default:
diff --git a/public/components/datasources/components/new/configure_prometheus_datasource.tsx b/public/components/datasources/components/new/configure_prometheus_datasource.tsx
index 853351cb8..b1ef818ce 100644
--- a/public/components/datasources/components/new/configure_prometheus_datasource.tsx
+++ b/public/components/datasources/components/new/configure_prometheus_datasource.tsx
@@ -9,11 +9,10 @@ import {
   EuiSpacer,
   EuiText,
   EuiLink,
-  EuiFormRow,
-  EuiFieldText,
-  EuiTextArea,
-  EuiSelect,
-  EuiFieldPassword,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiCompressedTextArea,
+  EuiCompressedSelect,
   EuiForm,
 } from '@elastic/eui';
 import React, { useState } from 'react';
@@ -113,8 +112,8 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
             currentError={error}
             setErrorForForm={setError}
           />
-          <EuiFormRow label="Description - Optional">
-            <EuiTextArea
+          <EuiCompressedFormRow label="Description - Optional">
+            <EuiCompressedTextArea
               data-test-subj="data-source-description"
               placeholder="Placeholder"
               value={details}
@@ -125,7 +124,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
                 setDetails(e.target.value);
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer />
 
           <EuiText>
@@ -133,12 +132,12 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
           </EuiText>
           <EuiSpacer size="m" />
 
-          <EuiFormRow label="Prometheus URI">
+          <EuiCompressedFormRow label="Prometheus URI">
             <>
               <EuiText size="xs">
                 <p>Enter the Prometheus URI endpoint.</p>
               </EuiText>
-              <EuiFieldText
+              <EuiCompressedFieldText
                 data-test-subj="Prometheus-URI"
                 placeholder="Prometheus URI"
                 value={store}
@@ -150,7 +149,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
                 }}
               />
             </>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer />
 
           <EuiText>
@@ -158,8 +157,8 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
           </EuiText>
           <EuiSpacer size="m" />
 
-          <EuiFormRow label="Authentication method">
-            <EuiSelect
+          <EuiCompressedFormRow label="Authentication method">
+            <EuiCompressedSelect
               id="selectAuthMethod"
               options={authOptions}
               value={currentAuthMethod}
@@ -167,7 +166,7 @@ export const ConfigurePrometheusDatasource = (props: ConfigurePrometheusDatasour
                 setAuthMethodForRequest(e.target.value as AuthMethod);
               }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <AuthDetails
             currentUsername={currentUsername}
diff --git a/public/components/datasources/components/new/configure_s3_datasource.tsx b/public/components/datasources/components/new/configure_s3_datasource.tsx
index 06929e11e..c5b6c077f 100644
--- a/public/components/datasources/components/new/configure_s3_datasource.tsx
+++ b/public/components/datasources/components/new/configure_s3_datasource.tsx
@@ -9,10 +9,10 @@ import {
   EuiSpacer,
   EuiText,
   EuiLink,
-  EuiFormRow,
-  EuiFieldText,
-  EuiTextArea,
-  EuiSelect,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiCompressedTextArea,
+  EuiCompressedSelect,
   EuiCallOut,
 } from '@elastic/eui';
 import React, { useState } from 'react';
@@ -107,8 +107,8 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
           currentError={error}
           setErrorForForm={setError}
         />
-        <EuiFormRow label="Description - Optional">
-          <EuiTextArea
+        <EuiCompressedFormRow label="Description - Optional">
+          <EuiCompressedTextArea
             placeholder="Describe data source"
             value={details}
             onBlur={(e) => {
@@ -118,7 +118,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
               setDetails(e.target.value);
             }}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <EuiSpacer />
 
         <EuiText>
@@ -126,7 +126,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
         </EuiText>
         <EuiSpacer size="m" />
 
-        <EuiFormRow label="Authentication Method">
+        <EuiCompressedFormRow label="Authentication Method">
           <>
             <EuiText size="xs">
               <p>
@@ -134,16 +134,16 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
                 engine to connect to AWS Glue Data Catalog.
               </p>
             </EuiText>
-            <EuiFieldText data-test-subj="authentication-method" value="IAM role" disabled />
+            <EuiCompressedFieldText data-test-subj="authentication-method" value="IAM role" disabled />
           </>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
-        <EuiFormRow label="AWS Glue Data Catalog authentication ARN">
+        <EuiCompressedFormRow label="AWS Glue Data Catalog authentication ARN">
           <>
             <EuiText size="xs">
               <p>This should be the IAM role ARN</p>
             </EuiText>
-            <EuiFieldText
+            <EuiCompressedFieldText
               data-test-subj="role-ARN"
               placeholder="Role ARN"
               value={arn}
@@ -155,7 +155,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
               }}
             />
           </>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
         <EuiSpacer />
 
@@ -164,7 +164,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
         </EuiText>
         <EuiSpacer size="m" />
 
-        <EuiFormRow label="AWS Glue Data Catalog index store URI">
+        <EuiCompressedFormRow label="AWS Glue Data Catalog index store URI">
           <>
             <EuiText size="xs">
               <p>
@@ -172,7 +172,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
                 Catalog. This OpenSearch instance is used for writing index data back.
               </p>
             </EuiText>
-            <EuiFieldText
+            <EuiCompressedFieldText
               data-test-subj="index-URI"
               placeholder="Index store URI"
               value={store}
@@ -184,14 +184,14 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
               }}
             />
           </>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
-        <EuiFormRow label="AWS Glue Data Catalog index store authentication">
+        <EuiCompressedFormRow label="AWS Glue Data Catalog index store authentication">
           <>
             <EuiText size="xs">
               <p>Authentication settings to access the index store.</p>
             </EuiText>
-            <EuiSelect
+            <EuiCompressedSelect
               id="selectAuthMethod"
               options={authOptions}
               value={currentAuthMethod}
@@ -200,7 +200,7 @@ export const ConfigureS3Datasource = (props: ConfigureS3DatasourceProps) => {
               }}
             />
           </>
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         <AuthDetails
           currentUsername={currentUsername}
           setUsernameForRequest={setUsernameForRequest}
diff --git a/public/components/datasources/components/new/name_row.tsx b/public/components/datasources/components/new/name_row.tsx
index 96c96aaa4..9d3e664d5 100644
--- a/public/components/datasources/components/new/name_row.tsx
+++ b/public/components/datasources/components/new/name_row.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiText, EuiFormRow, EuiFieldText } from '@elastic/eui';
+import { EuiText, EuiCompressedFormRow, EuiCompressedFieldText } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { coreRefs } from '../../../../../public/framework/core_refs';
 
@@ -44,7 +44,7 @@ export const NameRow = (props: ConfigureNameProps) => {
   };
 
   return (
-    <EuiFormRow label="Data source name" isInvalid={currentError.length !== 0} error={currentError}>
+    <EuiCompressedFormRow label="Data source name" isInvalid={currentError.length !== 0} error={currentError}>
       <>
         <EuiText size="xs">
           <p>
@@ -52,7 +52,7 @@ export const NameRow = (props: ConfigureNameProps) => {
             and concise.
           </p>
         </EuiText>
-        <EuiFieldText
+        <EuiCompressedFieldText
           data-test-subj="name"
           placeholder="Title"
           value={name}
@@ -63,6 +63,6 @@ export const NameRow = (props: ConfigureNameProps) => {
           isInvalid={currentError.length !== 0}
         />
       </>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 };
diff --git a/public/components/datasources/components/new/query_permissions.tsx b/public/components/datasources/components/new/query_permissions.tsx
index 0c0853b57..f5ad60399 100644
--- a/public/components/datasources/components/new/query_permissions.tsx
+++ b/public/components/datasources/components/new/query_permissions.tsx
@@ -4,11 +4,11 @@
  */
 
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
-  EuiRadioGroup,
+  EuiCompressedFormRow,
+  EuiCompressedRadioGroup,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -43,7 +43,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
         <EuiText size="xs">
           Select one or more OpenSearch roles that can query this data connection.
         </EuiText>
-        <EuiFormRow
+        <EuiCompressedFormRow
           isInvalid={selectedRoles.length === 0}
           error={
             selectedRoles.length === 0
@@ -51,7 +51,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
               : undefined
           }
         >
-          <EuiComboBox
+          <EuiCompressedComboBox
             placeholder="Select one or more options"
             options={roles}
             selectedOptions={selectedRoles}
@@ -60,7 +60,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
             data-test-subj="query-permissions-combo-box"
             isInvalid={selectedRoles.length === 0}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </div>
     );
   };
@@ -80,7 +80,7 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiRadioGroup
+          <EuiCompressedRadioGroup
             options={accessLevelOptions}
             idSelected={selectedAccessLevel}
             onChange={(id) => {
diff --git a/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx b/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx
index e3c699560..21e828992 100644
--- a/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx
+++ b/public/components/datasources/components/new/review_prometheus_datasource_configuration.tsx
@@ -11,7 +11,7 @@ import {
   EuiFlexGroup,
   EuiHorizontalRule,
   EuiFlexItem,
-  EuiButton,
+  EuiSmallButton,
 } from '@elastic/eui';
 import React from 'react';
 import { AuthMethod } from '../../../../../common/constants/data_connections';
@@ -53,7 +53,7 @@ export const ReviewPrometheusDatasource = (props: ConfigurePrometheusDatasourceP
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={goBack}>Edit</EuiButton>
+            <EuiSmallButton onClick={goBack}>Edit</EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule />
diff --git a/public/components/datasources/components/new/review_s3_datasource_configuration.tsx b/public/components/datasources/components/new/review_s3_datasource_configuration.tsx
index c230b3971..6feb4ae67 100644
--- a/public/components/datasources/components/new/review_s3_datasource_configuration.tsx
+++ b/public/components/datasources/components/new/review_s3_datasource_configuration.tsx
@@ -11,7 +11,7 @@ import {
   EuiFlexGroup,
   EuiHorizontalRule,
   EuiFlexItem,
-  EuiButton,
+  EuiSmallButton,
 } from '@elastic/eui';
 import React from 'react';
 import { AuthMethod } from '../../../../../common/constants/data_connections';
@@ -53,7 +53,7 @@ export const ReviewS3Datasource = (props: ConfigureS3DatasourceProps) => {
             </EuiText>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={goBack}>Edit</EuiButton>
+            <EuiSmallButton onClick={goBack}>Edit</EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
         <EuiHorizontalRule />
diff --git a/public/components/datasources/components/no_access.tsx b/public/components/datasources/components/no_access.tsx
index 1766f7fe1..c05bdd8d9 100644
--- a/public/components/datasources/components/no_access.tsx
+++ b/public/components/datasources/components/no_access.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiPage, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiPage, EuiText } from '@elastic/eui';
 import React from 'react';
 
 export const NoAccess = () => {
@@ -20,9 +20,9 @@ export const NoAccess = () => {
           </EuiText>
         }
         actions={
-          <EuiButton color="primary" fill onClick={() => (window.location.hash = '')}>
+          <EuiSmallButton color="primary" fill onClick={() => (window.location.hash = '')}>
             Return to data connections
-          </EuiButton>
+          </EuiSmallButton>
         }
       />
     </EuiPage>
diff --git a/public/components/event_analytics/explorer/direct_query_running.tsx b/public/components/event_analytics/explorer/direct_query_running.tsx
index 33ad428a6..a42ca4e53 100644
--- a/public/components/event_analytics/explorer/direct_query_running.tsx
+++ b/public/components/event_analytics/explorer/direct_query_running.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiEmptyPrompt, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { DirectQueryLoadingStatus } from '../../../../common/types/explorer';
@@ -48,9 +48,9 @@ export const DirectQueryRunning = ({ tabId }: { tabId: string }) => {
             Status: {explorerSearchMeta.status ?? DirectQueryLoadingStatus.SCHEDULED}
           </EuiText>
           <EuiSpacer size="s" />
-          <EuiButton color="success" onClick={cancelQuery}>
+          <EuiSmallButton color="success" onClick={cancelQuery}>
             Cancel
-          </EuiButton>
+          </EuiSmallButton>
         </>
       }
     />
diff --git a/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/flyout_button.test.tsx.snap b/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/flyout_button.test.tsx.snap
index ef81a5b96..3aee6f2fd 100644
--- a/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/flyout_button.test.tsx.snap
+++ b/public/components/event_analytics/explorer/events_views/__tests__/__snapshots__/flyout_button.test.tsx.snap
@@ -17,50 +17,57 @@ exports[`Datagrid Doc viewer row component Renders Doc viewer row component 1`]
     ]
   }
 >
-  <EuiButtonIcon
+  <EuiSmallButtonIcon
     aria-label="inspect document details"
     iconType="inspect"
     onClick={[Function]}
   >
-    <button
+    <EuiButtonIcon
       aria-label="inspect document details"
-      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-      disabled={false}
+      iconType="inspect"
       onClick={[Function]}
-      type="button"
+      size="s"
     >
-      <EuiIcon
-        aria-hidden="true"
-        className="euiButtonIcon__icon"
-        color="inherit"
-        size="m"
-        type="inspect"
+      <button
+        aria-label="inspect document details"
+        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+        disabled={false}
+        onClick={[Function]}
+        type="button"
       >
-        <EuiIconBeaker
-          aria-hidden={true}
-          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-          focusable="false"
-          role="img"
-          style={null}
+        <EuiIcon
+          aria-hidden="true"
+          className="euiButtonIcon__icon"
+          color="inherit"
+          size="m"
+          type="inspect"
         >
-          <svg
+          <EuiIconBeaker
             aria-hidden={true}
             className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
             focusable="false"
-            height={16}
             role="img"
             style={null}
-            viewBox="0 0 16 16"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
-              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-            />
-          </svg>
-        </EuiIconBeaker>
-      </EuiIcon>
-    </button>
-  </EuiButtonIcon>
+            <svg
+              aria-hidden={true}
+              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+              focusable="false"
+              height={16}
+              role="img"
+              style={null}
+              viewBox="0 0 16 16"
+              width={16}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+              />
+            </svg>
+          </EuiIconBeaker>
+        </EuiIcon>
+      </button>
+    </EuiButtonIcon>
+  </EuiSmallButtonIcon>
 </ForwardRef>
 `;
diff --git a/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx b/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx
index 8a1caaaa0..3fcbf7c8e 100644
--- a/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx
+++ b/public/components/event_analytics/explorer/events_views/detail_table/table_row_btn_collapse.tsx
@@ -2,10 +2,10 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
- 
+
 import React from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiToolTip, EuiButtonIcon } from '@elastic/eui';
+import { EuiToolTip, EuiSmallButtonIcon } from '@elastic/eui';
 
 export interface Props {
   onClick: () => void;
@@ -18,7 +18,7 @@ export function DocViewTableRowBtnCollapse({ onClick, isCollapsed }: Props) {
   });
   return (
     <EuiToolTip content={label}>
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         aria-expanded={!isCollapsed}
         aria-label={label}
         data-test-subj="collapseBtn"
diff --git a/public/components/event_analytics/explorer/events_views/docViewRow.tsx b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
index 07830e10f..d66c049f0 100644
--- a/public/components/event_analytics/explorer/events_views/docViewRow.tsx
+++ b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
@@ -6,7 +6,7 @@
 import moment from 'moment';
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 import { toPairs, uniqueId, has, forEach, isEqual } from 'lodash';
-import { EuiButtonIcon, EuiLink } from '@elastic/eui';
+import { EuiSmallButtonIcon, EuiLink } from '@elastic/eui';
 import { useEffect } from 'react';
 import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 import { DocFlyout } from './doc_flyout';
@@ -138,7 +138,7 @@ export const FlyoutButton = forwardRef((props: FlyoutButtonProps, ref) => {
   const getExpColapTd = () => {
     return (
       <td className="osdDocTableCell__toggleDetails" key={uniqueId('grid-td-')}>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           className="euiButtonIcon euiButtonIcon--text"
           data-test-subj="eventExplorer__flyoutArrow"
           onClick={() => {
@@ -288,7 +288,7 @@ export const FlyoutButton = forwardRef((props: FlyoutButtonProps, ref) => {
 
   return (
     <>
-      <EuiButtonIcon
+      <EuiSmallButtonIcon
         onClick={() => toggleDetailOpen()}
         iconType={detailsOpen || surroundingEventsOpen ? 'minimize' : 'inspect'}
         aria-label="inspect document details"
diff --git a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
index feb0a57e9..16f3f79b4 100644
--- a/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
+++ b/public/components/event_analytics/explorer/events_views/doc_flyout.tsx
@@ -6,7 +6,7 @@
 import './docView.scss';
 import React from 'react';
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -108,13 +108,13 @@ export const DocFlyout = ({
               )
             }
           >
-            <EuiButton
+            <EuiSmallButton
               onClick={openSurroundingFlyout}
               className="header-button"
               isDisabled={rawQuery.match(PPL_STATS_REGEX) || !doc.hasOwnProperty(timeStampField)}
             >
               View surrounding events
-            </EuiButton>
+            </EuiSmallButton>
           </EuiToolTip>
         </EuiFlexItem>
       </EuiFlexGroup>
diff --git a/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
index 7b1eafe92..a29f5c56a 100644
--- a/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
+++ b/public/components/event_analytics/explorer/events_views/surrounding_flyout.tsx
@@ -6,15 +6,16 @@
 import './docView.scss';
 import React, { useEffect, useState, Fragment } from 'react';
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiButtonIcon,
   EuiCallOut,
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyoutBody,
   EuiFlyoutHeader,
+  EuiCompressedFormRow,
   EuiFormRow,
   EuiSpacer,
   EuiText,
@@ -215,14 +216,14 @@ export const SurroundingFlyout = ({
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             onClick={openDetailsFlyout}
             className="header-button"
             iconType="sortRight"
             iconSide="right"
           >
             View event details
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutHeader>
@@ -237,20 +238,20 @@ export const SurroundingFlyout = ({
     return (
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>
-          <EuiFormRow>
-            <EuiButtonEmpty
+          <EuiCompressedFormRow>
+            <EuiSmallButtonEmpty
               isLoading={typeOfDocs === 'new' ? loadingNewEvents : loadingOldEvents}
               iconSide="left"
               onClick={() => loadButton(typeOfDocs)}
               iconType={iconType}
             >
               Load
-            </EuiButtonEmpty>
-          </EuiFormRow>
+            </EuiSmallButtonEmpty>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="cnt-picker">
-          <EuiFormRow>
-            <EuiFieldNumber
+          <EuiCompressedFormRow>
+            <EuiCompressedFieldNumber
               value={value}
               onChange={(e) => onChange(e)}
               aria-label={typeOfDocs === 'new' ? 'fetch newer events' : 'fetch older events'}
@@ -258,10 +259,10 @@ export const SurroundingFlyout = ({
               max={10000}
               onKeyDown={(e) => handleKeyDown(e, typeOfDocs)}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiFormRow display="center">
+          <EuiFormRow display="centerCompressed">
             <EuiText>{typeOfDocs === 'new' ? 'newer' : 'older'} events</EuiText>
           </EuiFormRow>
         </EuiFlexItem>
diff --git a/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap b/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap
index 681b600ae..482927d59 100644
--- a/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap
+++ b/public/components/event_analytics/explorer/log_patterns/__tests__/__snapshots__/patterns_header.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
           <EuiPopover
             anchorPosition="upCenter"
             button={
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 iconType="gear"
                 onClick={[Function]}
               />
@@ -84,49 +84,55 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
               <div
                 className="euiPopover__anchor"
               >
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   iconType="gear"
                   onClick={[Function]}
                 >
-                  <button
-                    className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                    disabled={false}
+                  <EuiButtonIcon
+                    iconType="gear"
                     onClick={[Function]}
-                    type="button"
+                    size="s"
                   >
-                    <EuiIcon
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      size="m"
-                      type="gear"
+                    <button
+                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIconBeaker
-                        aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                        focusable="false"
-                        role="img"
-                        style={null}
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="gear"
                       >
-                        <svg
+                        <EuiIconBeaker
                           aria-hidden={true}
                           className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                           focusable="false"
-                          height={16}
                           role="img"
                           style={null}
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <path
-                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                          />
-                        </svg>
-                      </EuiIconBeaker>
-                    </EuiIcon>
-                  </button>
-                </EuiButtonIcon>
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                            />
+                          </svg>
+                        </EuiIconBeaker>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </EuiSmallButtonIcon>
               </div>
               <EuiPortal>
                 <Portal
@@ -180,21 +186,21 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
                               class="euiSpacer euiSpacer--s"
                             />
                             <div
-                              class="euiFormRow"
+                              class="euiFormRow euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
                                 class="euiFormRow__fieldWrapper"
                               >
                                 <div
-                                  class="euiFormControlLayout"
+                                  class="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
                                   <div
                                     class="euiFormControlLayout__childrenWrapper"
                                   >
                                     <input
                                       aria-describedby="random_html_id-help-0"
-                                      class="euiFieldText"
+                                      class="euiFieldText euiFieldText--compressed"
                                       id="random_html_id"
                                       type="text"
                                       value="[a-zA-Zd]"
@@ -497,9 +503,9 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
                                           className="euiSpacer euiSpacer--s"
                                         />
                                       </EuiSpacer>
-                                      <EuiFormRow
+                                      <EuiCompressedFormRow
                                         describedByIds={Array []}
-                                        display="row"
+                                        display="rowCompressed"
                                         fullWidth={false}
                                         hasChildLabel={true}
                                         hasEmptyLabelSpace={false}
@@ -520,13 +526,13 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
                                         labelType="label"
                                       >
                                         <div
-                                          className="euiFormRow"
+                                          className="euiFormRow euiFormRow--compressed"
                                           id="random_html_id-row"
                                         >
                                           <div
                                             className="euiFormRow__fieldWrapper"
                                           >
-                                            <EuiFieldText
+                                            <EuiCompressedFieldText
                                               aria-describedby="random_html_id-help-0"
                                               id="random_html_id"
                                               onBlur={[Function]}
@@ -534,33 +540,46 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
                                               onFocus={[Function]}
                                               value="[a-zA-Zd]"
                                             >
-                                              <EuiFormControlLayout
-                                                fullWidth={false}
-                                                inputId="random_html_id"
+                                              <EuiFieldText
+                                                aria-describedby="random_html_id-help-0"
+                                                compressed={true}
+                                                id="random_html_id"
+                                                onBlur={[Function]}
+                                                onChange={[Function]}
+                                                onFocus={[Function]}
+                                                value="[a-zA-Zd]"
                                               >
-                                                <div
-                                                  className="euiFormControlLayout"
+                                                <EuiFormControlLayout
+                                                  compressed={true}
+                                                  fullWidth={false}
+                                                  inputId="random_html_id"
                                                 >
                                                   <div
-                                                    className="euiFormControlLayout__childrenWrapper"
+                                                    className="euiFormControlLayout euiFormControlLayout--compressed"
                                                   >
-                                                    <EuiValidatableControl>
-                                                      <input
-                                                        aria-describedby="random_html_id-help-0"
-                                                        className="euiFieldText"
-                                                        id="random_html_id"
-                                                        onBlur={[Function]}
-                                                        onChange={[Function]}
-                                                        onFocus={[Function]}
-                                                        type="text"
-                                                        value="[a-zA-Zd]"
+                                                    <div
+                                                      className="euiFormControlLayout__childrenWrapper"
+                                                    >
+                                                      <EuiValidatableControl>
+                                                        <input
+                                                          aria-describedby="random_html_id-help-0"
+                                                          className="euiFieldText euiFieldText--compressed"
+                                                          id="random_html_id"
+                                                          onBlur={[Function]}
+                                                          onChange={[Function]}
+                                                          onFocus={[Function]}
+                                                          type="text"
+                                                          value="[a-zA-Zd]"
+                                                        />
+                                                      </EuiValidatableControl>
+                                                      <EuiFormControlLayoutIcons
+                                                        compressed={true}
                                                       />
-                                                    </EuiValidatableControl>
-                                                    <EuiFormControlLayoutIcons />
+                                                    </div>
                                                   </div>
-                                                </div>
-                                              </EuiFormControlLayout>
-                                            </EuiFieldText>
+                                                </EuiFormControlLayout>
+                                              </EuiFieldText>
+                                            </EuiCompressedFieldText>
                                             <EuiFormHelpText
                                               className="euiFormRow__text"
                                               id="random_html_id-help-0"
@@ -641,7 +660,7 @@ exports[`Patterns header component Renders header of log patterns 1`] = `
                                             </EuiFormHelpText>
                                           </div>
                                         </div>
-                                      </EuiFormRow>
+                                      </EuiCompressedFormRow>
                                       <EuiPopoverFooter>
                                         <div
                                           className="euiPopoverFooter"
diff --git a/public/components/event_analytics/explorer/log_patterns/patterns_header.tsx b/public/components/event_analytics/explorer/log_patterns/patterns_header.tsx
index 8776f5cc8..93e428038 100644
--- a/public/components/event_analytics/explorer/log_patterns/patterns_header.tsx
+++ b/public/components/event_analytics/explorer/log_patterns/patterns_header.tsx
@@ -7,11 +7,11 @@ import React from 'react';
 import {
   EuiButton,
   EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiFieldText,
+  EuiSmallButtonIcon,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiLink,
   EuiPopover,
   EuiPopoverFooter,
@@ -54,7 +54,7 @@ export const PatternsHeader = ({
       <EuiFlexItem grow={false}>
         <EuiPopover
           button={
-            <EuiButtonIcon
+            <EuiSmallButtonIcon
               iconType="gear"
               onClick={() => setIsPatternConfigPopoverOpen(!isPatternConfigPopoverOpen)}
             />
@@ -69,7 +69,7 @@ export const PatternsHeader = ({
           <EuiText size="s">Log patterns allow you to cluster your logs, to help</EuiText>
           <EuiText size="s">summarize large volume of logs.</EuiText>
           <EuiSpacer size="s" />
-          <EuiFormRow
+          <EuiCompressedFormRow
             helpText={
               <EuiText size="s">
                 Pattern regex is used to reduce logs into log groups.{' '}
@@ -79,11 +79,11 @@ export const PatternsHeader = ({
               </EuiText>
             }
           >
-            <EuiFieldText
+            <EuiCompressedFieldText
               value={patternRegexInput}
               onChange={(e) => setPatternRegexInput(e.target.value)}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiPopoverFooter>
             <EuiFlexGroup justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
diff --git a/public/components/event_analytics/explorer/query_assist/input.tsx b/public/components/event_analytics/explorer/query_assist/input.tsx
index f1f984e56..fb20511f6 100644
--- a/public/components/event_analytics/explorer/query_assist/input.tsx
+++ b/public/components/event_analytics/explorer/query_assist/input.tsx
@@ -4,9 +4,9 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiComboBoxOptionOption,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
@@ -337,7 +337,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
         <EuiFlexItem>
           <EuiInputPopover
             input={
-              <EuiFieldText
+              <EuiCompressedFieldText
                 inputRef={inputRef}
                 placeholder="Ask me a question"
                 disabled={loading}
@@ -386,7 +386,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
       {props.children}
       <EuiSpacer size="m" />
       {props.lastFocusedInput === 'query_area' ? (
-        <EuiButton
+        <EuiSmallButton
           fill
           isLoading={loading}
           onClick={props.runChanges}
@@ -394,7 +394,7 @@ export const QueryAssistInput: React.FC<React.PropsWithChildren<Props>> = (props
           style={{ height: 44 }}
         >
           Run
-        </EuiButton>
+        </EuiSmallButton>
       ) : (
         <EuiSplitButton
           disabled={loading}
diff --git a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
index bb9969e7c..ff2d38815 100644
--- a/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/save_panel/__tests__/__snapshots__/save_panel.test.tsx.snap
@@ -61,9 +61,9 @@ exports[`Saved query table component Renders saved query table 1`] = `
         Custom operational dashboards/application
       </h3>
     </EuiTitle>
-    <EuiFormRow
+    <EuiCompressedFormRow
       describedByIds={Array []}
-      display="row"
+      display="rowCompressed"
       fullWidth={false}
       hasChildLabel={true}
       hasEmptyLabelSpace={false}
@@ -71,16 +71,16 @@ exports[`Saved query table component Renders saved query table 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow"
+        className="euiFormRow euiFormRow--compressed"
         id="random_html_id-row"
       >
         <div
           className="euiFormRow__fieldWrapper"
         >
-          <EuiComboBox
+          <EuiCompressedComboBox
             aria-describedby="random_html_id-help-0"
             async={false}
-            compressed={false}
+            compressed={true}
             data-test-subj="eventExplorer__querySaveComboBox"
             fullWidth={false}
             id="random_html_id"
@@ -123,14 +123,14 @@ exports[`Saved query table component Renders saved query table 1`] = `
               aria-describedby="random_html_id-help-0"
               aria-expanded={false}
               aria-haspopup="listbox"
-              className="euiComboBox"
+              className="euiComboBox euiComboBox--compressed"
               data-test-subj="eventExplorer__querySaveComboBox"
               onKeyDown={[Function]}
               role="combobox"
             >
               <EuiComboBoxInput
                 autoSizeInputRef={[Function]}
-                compressed={false}
+                compressed={true}
                 fullWidth={false}
                 hasSelectedOptions={true}
                 id="random_html_id"
@@ -185,7 +185,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                       "onClick": [Function],
                     }
                   }
-                  compressed={false}
+                  compressed={true}
                   fullWidth={false}
                   icon={
                     Object {
@@ -200,13 +200,13 @@ exports[`Saved query table component Renders saved query table 1`] = `
                   }
                 >
                   <div
-                    className="euiFormControlLayout"
+                    className="euiFormControlLayout euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <div
-                        className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                        className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                         data-test-subj="comboBoxInput"
                         onClick={[Function]}
                         tabIndex={-1}
@@ -354,7 +354,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                             "onClick": [Function],
                           }
                         }
-                        compressed={false}
+                        compressed={true}
                         icon={
                           Object {
                             "aria-label": "Open list of options",
@@ -373,7 +373,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                           <EuiFormControlLayoutClearButton
                             data-test-subj="comboBoxClearButton"
                             onClick={[Function]}
-                            size="m"
+                            size="s"
                           >
                             <EuiI18n
                               default="Clear input"
@@ -381,7 +381,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                             >
                               <button
                                 aria-label="Clear input"
-                                className="euiFormControlLayoutClearButton"
+                                className="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                                 data-test-subj="comboBoxClearButton"
                                 onClick={[Function]}
                                 type="button"
@@ -422,7 +422,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                             data-test-subj="comboBoxToggleListButton"
                             iconRef={[Function]}
                             onClick={[Function]}
-                            size="m"
+                            size="s"
                             type="arrowDown"
                           >
                             <button
@@ -435,19 +435,19 @@ exports[`Saved query table component Renders saved query table 1`] = `
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="arrowDown"
                               >
                                 <EuiIconBeaker
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -471,7 +471,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                 </EuiFormControlLayout>
               </EuiComboBoxInput>
             </div>
-          </EuiComboBox>
+          </EuiCompressedComboBox>
           <EuiFormHelpText
             className="euiFormRow__text"
             id="random_html_id-help-0"
@@ -486,7 +486,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
           </EuiFormHelpText>
         </div>
       </div>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
     <EuiTitle
       size="xxs"
     >
@@ -496,9 +496,9 @@ exports[`Saved query table component Renders saved query table 1`] = `
         Name
       </h3>
     </EuiTitle>
-    <EuiFormRow
+    <EuiCompressedFormRow
       describedByIds={Array []}
-      display="row"
+      display="rowCompressed"
       fullWidth={false}
       hasChildLabel={true}
       hasEmptyLabelSpace={false}
@@ -506,13 +506,13 @@ exports[`Saved query table component Renders saved query table 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow"
+        className="euiFormRow euiFormRow--compressed"
         id="random_html_id-row"
       >
         <div
           className="euiFormRow__fieldWrapper"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             aria-describedby="random_html_id-help-0"
             data-test-subj="eventExplorer__querySaveName"
             id="random_html_id"
@@ -523,36 +523,51 @@ exports[`Saved query table component Renders saved query table 1`] = `
             onFocus={[Function]}
             value="Count by depature"
           >
-            <EuiFormControlLayout
-              fullWidth={false}
-              inputId="random_html_id"
+            <EuiFieldText
+              aria-describedby="random_html_id-help-0"
+              compressed={true}
+              data-test-subj="eventExplorer__querySaveName"
+              id="random_html_id"
+              isInvalid={false}
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              value="Count by depature"
             >
-              <div
-                className="euiFormControlLayout"
+              <EuiFormControlLayout
+                compressed={true}
+                fullWidth={false}
+                inputId="random_html_id"
               >
                 <div
-                  className="euiFormControlLayout__childrenWrapper"
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
                 >
-                  <EuiValidatableControl
-                    isInvalid={false}
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
                   >
-                    <input
-                      aria-describedby="random_html_id-help-0"
-                      className="euiFieldText"
-                      data-test-subj="eventExplorer__querySaveName"
-                      id="random_html_id"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      type="text"
-                      value="Count by depature"
+                    <EuiValidatableControl
+                      isInvalid={false}
+                    >
+                      <input
+                        aria-describedby="random_html_id-help-0"
+                        className="euiFieldText euiFieldText--compressed"
+                        data-test-subj="eventExplorer__querySaveName"
+                        id="random_html_id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        type="text"
+                        value="Count by depature"
+                      />
+                    </EuiValidatableControl>
+                    <EuiFormControlLayoutIcons
+                      compressed={true}
                     />
-                  </EuiValidatableControl>
-                  <EuiFormControlLayoutIcons />
+                  </div>
                 </div>
-              </div>
-            </EuiFormControlLayout>
-          </EuiFieldText>
+              </EuiFormControlLayout>
+            </EuiFieldText>
+          </EuiCompressedFieldText>
           <EuiFormHelpText
             className="euiFormRow__text"
             id="random_html_id-help-0"
@@ -567,7 +582,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
           </EuiFormHelpText>
         </div>
       </div>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
     <EuiFormRow
       describedByIds={Array []}
       display="columnCompressedSwitch"
diff --git a/public/components/event_analytics/explorer/save_panel/save_panel.tsx b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
index 642adb6d4..0f709cf84 100644
--- a/public/components/event_analytics/explorer/save_panel/save_panel.tsx
+++ b/public/components/event_analytics/explorer/save_panel/save_panel.tsx
@@ -6,9 +6,10 @@
 import React, { useState } from 'react';
 import {
   EuiTitle,
-  EuiComboBox,
+  EuiCompressedComboBox,
+  EuiCompressedFormRow,
   EuiFormRow,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiSwitch,
   EuiToolTip,
 } from '@elastic/eui';
@@ -78,8 +79,8 @@ export const SavePanel = ({
           <EuiTitle size="xxs">
             <h3>{'Custom operational dashboards/application'}</h3>
           </EuiTitle>
-          <EuiFormRow helpText="Search existing dashboards or applications by name">
-            <EuiComboBox
+          <EuiCompressedFormRow helpText="Search existing dashboards or applications by name">
+            <EuiCompressedComboBox
               placeholder="Select dashboards/applications"
               onChange={(daOptions) => {
                 handleOptionChange(daOptions);
@@ -95,14 +96,14 @@ export const SavePanel = ({
               singleSelection={{ asPlainText: true }}
               data-test-subj="eventExplorer__querySaveComboBox"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </>
       )}
       <EuiTitle size="xxs">
         <h3>Name</h3>
       </EuiTitle>
-      <EuiFormRow helpText="Name for your savings">
-        <EuiFieldText
+      <EuiCompressedFormRow helpText="Name for your savings">
+        <EuiCompressedFieldText
           key={'save-panel-id'}
           value={savePanelName}
           isInvalid={isEmpty(savePanelName)}
@@ -111,7 +112,7 @@ export const SavePanel = ({
           }}
           data-test-subj="eventExplorer__querySaveName"
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
       {showOptionList && (
         <>
           <EuiFormRow display="columnCompressedSwitch">
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
index 0c780860f..df2df9cb9 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
@@ -321,7 +321,7 @@ exports[`Field component Renders a sidebar field 1`] = `
                 onMouseOut={[Function]}
                 onMouseOver={[Function]}
               >
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   aria-label="Remove agent from table"
                   className="dscSidebarField__actionButton"
                   color="danger"
@@ -329,47 +329,57 @@ exports[`Field component Renders a sidebar field 1`] = `
                   iconType="cross"
                   onClick={[Function]}
                 >
-                  <button
+                  <EuiButtonIcon
                     aria-label="Remove agent from table"
-                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                    className="dscSidebarField__actionButton"
+                    color="danger"
                     data-test-subj="fieldToggle-agent"
-                    disabled={false}
+                    iconType="cross"
                     onClick={[Function]}
-                    type="button"
+                    size="s"
                   >
-                    <EuiIcon
-                      aria-hidden="true"
-                      className="euiButtonIcon__icon"
-                      color="inherit"
-                      size="m"
-                      type="cross"
+                    <button
+                      aria-label="Remove agent from table"
+                      className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                      data-test-subj="fieldToggle-agent"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
                     >
-                      <EuiIconBeaker
-                        aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                        focusable="false"
-                        role="img"
-                        style={null}
+                      <EuiIcon
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        color="inherit"
+                        size="m"
+                        type="cross"
                       >
-                        <svg
+                        <EuiIconBeaker
                           aria-hidden={true}
                           className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                           focusable="false"
-                          height={16}
                           role="img"
                           style={null}
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <path
-                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                          />
-                        </svg>
-                      </EuiIconBeaker>
-                    </EuiIcon>
-                  </button>
-                </EuiButtonIcon>
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                            />
+                          </svg>
+                        </EuiIconBeaker>
+                      </EuiIcon>
+                    </button>
+                  </EuiButtonIcon>
+                </EuiSmallButtonIcon>
               </span>
             </EuiToolTip>
           </div>
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index aff341c85..a9cb087e1 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -1290,7 +1290,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Remove double_per_ip_bytes from table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="danger"
@@ -1298,46 +1298,56 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="cross"
                                                                         isDisabled={true}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Remove double_per_ip_bytes from table"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="danger"
                                                                           data-test-subj="fieldToggle-double_per_ip_bytes"
-                                                                          disabled={true}
-                                                                          type="button"
+                                                                          iconType="cross"
+                                                                          isDisabled={true}
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="cross"
+                                                                          <button
+                                                                            aria-label="Remove double_per_ip_bytes from table"
+                                                                            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-double_per_ip_bytes"
+                                                                            disabled={true}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="cross"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -1696,7 +1706,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Remove host from table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="danger"
@@ -1704,46 +1714,56 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="cross"
                                                                         isDisabled={true}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Remove host from table"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="danger"
                                                                           data-test-subj="fieldToggle-host"
-                                                                          disabled={true}
-                                                                          type="button"
+                                                                          iconType="cross"
+                                                                          isDisabled={true}
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="cross"
+                                                                          <button
+                                                                            aria-label="Remove host from table"
+                                                                            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-host"
+                                                                            disabled={true}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="cross"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -2102,7 +2122,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Remove ip_count from table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="danger"
@@ -2110,46 +2130,56 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="cross"
                                                                         isDisabled={true}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Remove ip_count from table"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="danger"
                                                                           data-test-subj="fieldToggle-ip_count"
-                                                                          disabled={true}
-                                                                          type="button"
+                                                                          iconType="cross"
+                                                                          isDisabled={true}
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="cross"
+                                                                          <button
+                                                                            aria-label="Remove ip_count from table"
+                                                                            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-ip_count"
+                                                                            disabled={true}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="cross"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -2508,7 +2538,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Remove per_ip_bytes from table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="danger"
@@ -2516,46 +2546,56 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="cross"
                                                                         isDisabled={true}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Remove per_ip_bytes from table"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="danger"
                                                                           data-test-subj="fieldToggle-per_ip_bytes"
-                                                                          disabled={true}
-                                                                          type="button"
+                                                                          iconType="cross"
+                                                                          isDisabled={true}
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="cross"
+                                                                          <button
+                                                                            aria-label="Remove per_ip_bytes from table"
+                                                                            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-per_ip_bytes"
+                                                                            disabled={true}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="cross"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -2914,7 +2954,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Remove resp_code from table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="danger"
@@ -2922,46 +2962,56 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="cross"
                                                                         isDisabled={true}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Remove resp_code from table"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="danger"
                                                                           data-test-subj="fieldToggle-resp_code"
-                                                                          disabled={true}
-                                                                          type="button"
+                                                                          iconType="cross"
+                                                                          isDisabled={true}
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="cross"
+                                                                          <button
+                                                                            aria-label="Remove resp_code from table"
+                                                                            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-resp_code"
+                                                                            disabled={true}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="cross"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -3320,7 +3370,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Remove sum_bytes from table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="danger"
@@ -3328,46 +3378,56 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="cross"
                                                                         isDisabled={true}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Remove sum_bytes from table"
-                                                                          className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="danger"
                                                                           data-test-subj="fieldToggle-sum_bytes"
-                                                                          disabled={true}
-                                                                          type="button"
+                                                                          iconType="cross"
+                                                                          isDisabled={true}
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="cross"
+                                                                          <button
+                                                                            aria-label="Remove sum_bytes from table"
+                                                                            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-sum_bytes"
+                                                                            disabled={true}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="cross"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -3944,7 +4004,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add agent to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -3952,47 +4012,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add agent to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-agent"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add agent to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-agent"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -4351,7 +4421,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add bytes to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -4359,47 +4429,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add bytes to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-bytes"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add bytes to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-bytes"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -4758,7 +4838,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add clientip to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -4766,47 +4846,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add clientip to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-clientip"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add clientip to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-clientip"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -5165,7 +5255,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add event to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -5173,47 +5263,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add event to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-event"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add event to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-event"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -5632,7 +5732,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add extension to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -5640,47 +5740,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add extension to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-extension"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add extension to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-extension"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -6039,7 +6149,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add geo to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -6047,47 +6157,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add geo to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-geo"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add geo to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-geo"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -6506,7 +6626,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add host to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -6514,47 +6634,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add host to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-host"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add host to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-host"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -6973,7 +7103,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add index to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -6981,47 +7111,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add index to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-index"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add index to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-index"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -7380,7 +7520,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add ip to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -7388,47 +7528,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add ip to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-ip"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add ip to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-ip"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -7787,7 +7937,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add machine to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -7795,47 +7945,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add machine to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-machine"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add machine to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-machine"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -8194,7 +8354,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add memory to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -8202,47 +8362,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add memory to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-memory"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add memory to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-memory"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -8661,7 +8831,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add message to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -8669,47 +8839,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add message to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-message"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
-                                                                          >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                          <button
+                                                                            aria-label="Add message to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-message"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
+                                                                          >
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -9068,7 +9248,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add phpmemory to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -9076,47 +9256,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add phpmemory to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-phpmemory"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add phpmemory to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-phpmemory"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -9535,7 +9725,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add referer to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -9543,47 +9733,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add referer to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-referer"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add referer to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-referer"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -10002,7 +10202,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add request to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -10010,47 +10210,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add request to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-request"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add request to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-request"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -10469,7 +10679,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add response to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -10477,47 +10687,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add response to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-response"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add response to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-response"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -10936,7 +11156,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add tags to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -10944,47 +11164,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add tags to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-tags"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add tags to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-tags"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -11384,7 +11614,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add timestamp to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -11392,47 +11622,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add timestamp to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-timestamp"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add timestamp to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-timestamp"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -11851,7 +12091,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add url to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -11859,47 +12099,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add url to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-url"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add url to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-url"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
@@ -12318,7 +12568,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                       onMouseOut={[Function]}
                                                                       onMouseOver={[Function]}
                                                                     >
-                                                                      <EuiButtonIcon
+                                                                      <EuiSmallButtonIcon
                                                                         aria-label="Add utc_time to table"
                                                                         className="dscSidebarField__actionButton"
                                                                         color="primary"
@@ -12326,47 +12576,57 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                                                         iconType="plusInCircleFilled"
                                                                         onClick={[Function]}
                                                                       >
-                                                                        <button
+                                                                        <EuiButtonIcon
                                                                           aria-label="Add utc_time to table"
-                                                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall dscSidebarField__actionButton"
+                                                                          className="dscSidebarField__actionButton"
+                                                                          color="primary"
                                                                           data-test-subj="fieldToggle-utc_time"
-                                                                          disabled={false}
+                                                                          iconType="plusInCircleFilled"
                                                                           onClick={[Function]}
-                                                                          type="button"
+                                                                          size="s"
                                                                         >
-                                                                          <EuiIcon
-                                                                            aria-hidden="true"
-                                                                            className="euiButtonIcon__icon"
-                                                                            color="inherit"
-                                                                            size="m"
-                                                                            type="plusInCircleFilled"
+                                                                          <button
+                                                                            aria-label="Add utc_time to table"
+                                                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small dscSidebarField__actionButton"
+                                                                            data-test-subj="fieldToggle-utc_time"
+                                                                            disabled={false}
+                                                                            onClick={[Function]}
+                                                                            type="button"
                                                                           >
-                                                                            <EuiIconBeaker
-                                                                              aria-hidden={true}
-                                                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                                              focusable="false"
-                                                                              role="img"
-                                                                              style={null}
+                                                                            <EuiIcon
+                                                                              aria-hidden="true"
+                                                                              className="euiButtonIcon__icon"
+                                                                              color="inherit"
+                                                                              size="m"
+                                                                              type="plusInCircleFilled"
                                                                             >
-                                                                              <svg
+                                                                              <EuiIconBeaker
                                                                                 aria-hidden={true}
                                                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                                                 focusable="false"
-                                                                                height={16}
                                                                                 role="img"
                                                                                 style={null}
-                                                                                viewBox="0 0 16 16"
-                                                                                width={16}
-                                                                                xmlns="http://www.w3.org/2000/svg"
                                                                               >
-                                                                                <path
-                                                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                                                />
-                                                                              </svg>
-                                                                            </EuiIconBeaker>
-                                                                          </EuiIcon>
-                                                                        </button>
-                                                                      </EuiButtonIcon>
+                                                                                <svg
+                                                                                  aria-hidden={true}
+                                                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                                                  focusable="false"
+                                                                                  height={16}
+                                                                                  role="img"
+                                                                                  style={null}
+                                                                                  viewBox="0 0 16 16"
+                                                                                  width={16}
+                                                                                  xmlns="http://www.w3.org/2000/svg"
+                                                                                >
+                                                                                  <path
+                                                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                                                  />
+                                                                                </svg>
+                                                                              </EuiIconBeaker>
+                                                                            </EuiIcon>
+                                                                          </button>
+                                                                        </EuiButtonIcon>
+                                                                      </EuiSmallButtonIcon>
                                                                     </span>
                                                                   </EuiToolTip>
                                                                 </div>
diff --git a/public/components/event_analytics/explorer/sidebar/field.tsx b/public/components/event_analytics/explorer/sidebar/field.tsx
index 2c08f0844..a617a04ed 100644
--- a/public/components/event_analytics/explorer/sidebar/field.tsx
+++ b/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -5,6 +5,7 @@
 
 import {
   EuiBadge,
+  EuiSmallButtonIcon,
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
@@ -220,7 +221,7 @@ export const Field = (props: IFieldProps) => {
         >
           <>
             {isFieldToggleButtonDisabled ? (
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 color={selected ? 'danger' : 'primary'}
                 iconType={selected ? 'cross' : 'plusInCircleFilled'}
                 isDisabled
@@ -229,7 +230,7 @@ export const Field = (props: IFieldProps) => {
                 className="dscSidebarField__actionButton"
               />
             ) : (
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 color={selected ? 'danger' : 'primary'}
                 iconType={selected ? 'cross' : 'plusInCircleFilled'}
                 onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
index 951ef271e..82f1269fb 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/__tests__/__snapshots__/config_panel.test.tsx.snap
@@ -671,10 +671,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
     <div
       className="cp__rightHeader"
     >
-      <EuiComboBox
+      <EuiCompressedComboBox
         aria-label="config chart selector"
         async={false}
-        compressed={false}
+        compressed={true}
         fullWidth={true}
         isClearable={false}
         onChange={[Function]}
@@ -2691,13 +2691,13 @@ exports[`Config panel component Renders config panel with visualization data 1`]
           aria-expanded={false}
           aria-haspopup="listbox"
           aria-label="config chart selector"
-          className="euiComboBox euiComboBox--fullWidth"
+          className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
           onKeyDown={[Function]}
           role="combobox"
         >
           <EuiComboBoxInput
             autoSizeInputRef={[Function]}
-            compressed={false}
+            compressed={true}
             fullWidth={true}
             hasSelectedOptions={true}
             inputRef={[Function]}
@@ -3027,7 +3027,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
             value="Vertical bar"
           >
             <EuiFormControlLayout
-              compressed={false}
+              compressed={true}
               fullWidth={true}
               icon={
                 Object {
@@ -3042,13 +3042,13 @@ exports[`Config panel component Renders config panel with visualization data 1`]
               }
             >
               <div
-                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
                 >
                   <div
-                    className="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
+                    className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
                     data-test-subj="comboBoxInput"
                     onClick={[Function]}
                     tabIndex={-1}
@@ -4400,7 +4400,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                     </AutosizeInput>
                   </div>
                   <EuiFormControlLayoutIcons
-                    compressed={false}
+                    compressed={true}
                     icon={
                       Object {
                         "aria-label": "Open list of options",
@@ -4421,7 +4421,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                         data-test-subj="comboBoxToggleListButton"
                         iconRef={[Function]}
                         onClick={[Function]}
-                        size="m"
+                        size="s"
                         type="arrowDown"
                       >
                         <button
@@ -4434,19 +4434,19 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
-                            size="m"
+                            size="s"
                             type="arrowDown"
                           >
                             <EuiIconBeaker
                               aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                               focusable="false"
                               role="img"
                               style={null}
                             >
                               <svg
                                 aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                 focusable="false"
                                 height={16}
                                 role="img"
@@ -4470,7 +4470,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
             </EuiFormControlLayout>
           </EuiComboBoxInput>
         </div>
-      </EuiComboBox>
+      </EuiCompressedComboBox>
     </div>
     <div
       className="cp__rightSettings"
@@ -7350,16 +7350,16 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                   <div
                     className="euiForm visEditorSidebar__form"
                   >
-                    <EuiFormRow
+                    <EuiCompressedFormRow
                       describedByIds={Array []}
-                      display="row"
+                      display="rowCompressed"
                       fullWidth={false}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -8114,9 +8114,9 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                           <form
                                             className="euiForm"
                                           >
-                                            <EuiFormRow
+                                            <EuiCompressedFormRow
                                               describedByIds={Array []}
-                                              display="row"
+                                              display="rowCompressed"
                                               fullWidth={true}
                                               hasChildLabel={true}
                                               hasEmptyLabelSpace={false}
@@ -8125,7 +8125,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               labelType="label"
                                             >
                                               <div
-                                                className="euiFormRow euiFormRow--fullWidth"
+                                                className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                                                 id="random_html_id-row"
                                               >
                                                 <div
@@ -8148,7 +8148,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 <div
                                                   className="euiFormRow__fieldWrapper"
                                                 >
-                                                  <EuiFieldText
+                                                  <EuiCompressedFieldText
                                                     aria-describedby="random_html_id-help-0"
                                                     id="random_html_id"
                                                     name="title"
@@ -8158,35 +8158,50 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     placeholder="Title"
                                                     value=""
                                                   >
-                                                    <EuiFormControlLayout
-                                                      fullWidth={false}
-                                                      inputId="random_html_id"
+                                                    <EuiFieldText
+                                                      aria-describedby="random_html_id-help-0"
+                                                      compressed={true}
+                                                      id="random_html_id"
+                                                      name="title"
+                                                      onBlur={[Function]}
+                                                      onChange={[Function]}
+                                                      onFocus={[Function]}
+                                                      placeholder="Title"
+                                                      value=""
                                                     >
-                                                      <div
-                                                        className="euiFormControlLayout"
+                                                      <EuiFormControlLayout
+                                                        compressed={true}
+                                                        fullWidth={false}
+                                                        inputId="random_html_id"
                                                       >
                                                         <div
-                                                          className="euiFormControlLayout__childrenWrapper"
+                                                          className="euiFormControlLayout euiFormControlLayout--compressed"
                                                         >
-                                                          <EuiValidatableControl>
-                                                            <input
-                                                              aria-describedby="random_html_id-help-0"
-                                                              className="euiFieldText"
-                                                              id="random_html_id"
-                                                              name="title"
-                                                              onBlur={[Function]}
-                                                              onChange={[Function]}
-                                                              onFocus={[Function]}
-                                                              placeholder="Title"
-                                                              type="text"
-                                                              value=""
+                                                          <div
+                                                            className="euiFormControlLayout__childrenWrapper"
+                                                          >
+                                                            <EuiValidatableControl>
+                                                              <input
+                                                                aria-describedby="random_html_id-help-0"
+                                                                className="euiFieldText euiFieldText--compressed"
+                                                                id="random_html_id"
+                                                                name="title"
+                                                                onBlur={[Function]}
+                                                                onChange={[Function]}
+                                                                onFocus={[Function]}
+                                                                placeholder="Title"
+                                                                type="text"
+                                                                value=""
+                                                              />
+                                                            </EuiValidatableControl>
+                                                            <EuiFormControlLayoutIcons
+                                                              compressed={true}
                                                             />
-                                                          </EuiValidatableControl>
-                                                          <EuiFormControlLayoutIcons />
+                                                          </div>
                                                         </div>
-                                                      </div>
-                                                    </EuiFormControlLayout>
-                                                  </EuiFieldText>
+                                                      </EuiFormControlLayout>
+                                                    </EuiFieldText>
+                                                  </EuiCompressedFieldText>
                                                   <EuiFormHelpText
                                                     className="euiFormRow__text"
                                                     id="random_html_id-help-0"
@@ -8201,10 +8216,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                   </EuiFormHelpText>
                                                 </div>
                                               </div>
-                                            </EuiFormRow>
-                                            <EuiFormRow
+                                            </EuiCompressedFormRow>
+                                            <EuiCompressedFormRow
                                               describedByIds={Array []}
-                                              display="row"
+                                              display="rowCompressed"
                                               fullWidth={false}
                                               hasChildLabel={true}
                                               hasEmptyLabelSpace={false}
@@ -8212,7 +8227,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               labelType="label"
                                             >
                                               <div
-                                                className="euiFormRow"
+                                                className="euiFormRow euiFormRow--compressed"
                                                 id="random_html_id-row"
                                               >
                                                 <div
@@ -8235,7 +8250,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                 <div
                                                   className="euiFormRow__fieldWrapper"
                                                 >
-                                                  <EuiTextArea
+                                                  <EuiCompressedTextArea
                                                     aria-label="Use aria labels when no actual label is in use"
                                                     id="random_html_id"
                                                     name="description"
@@ -8245,24 +8260,36 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                                     placeholder="Description"
                                                     value=""
                                                   >
-                                                    <EuiValidatableControl>
-                                                      <textarea
-                                                        aria-label="Use aria labels when no actual label is in use"
-                                                        className="euiTextArea euiTextArea--resizeVertical"
-                                                        id="random_html_id"
-                                                        name="description"
-                                                        onBlur={[Function]}
-                                                        onChange={[Function]}
-                                                        onFocus={[Function]}
-                                                        placeholder="Description"
-                                                        rows={6}
-                                                        value=""
-                                                      />
-                                                    </EuiValidatableControl>
-                                                  </EuiTextArea>
+                                                    <EuiTextArea
+                                                      aria-label="Use aria labels when no actual label is in use"
+                                                      compressed={true}
+                                                      id="random_html_id"
+                                                      name="description"
+                                                      onBlur={[Function]}
+                                                      onChange={[Function]}
+                                                      onFocus={[Function]}
+                                                      placeholder="Description"
+                                                      value=""
+                                                    >
+                                                      <EuiValidatableControl>
+                                                        <textarea
+                                                          aria-label="Use aria labels when no actual label is in use"
+                                                          className="euiTextArea euiTextArea--resizeVertical euiTextArea--compressed"
+                                                          id="random_html_id"
+                                                          name="description"
+                                                          onBlur={[Function]}
+                                                          onChange={[Function]}
+                                                          onFocus={[Function]}
+                                                          placeholder="Description"
+                                                          rows={3}
+                                                          value=""
+                                                        />
+                                                      </EuiValidatableControl>
+                                                    </EuiTextArea>
+                                                  </EuiCompressedTextArea>
                                                 </div>
                                               </div>
-                                            </EuiFormRow>
+                                            </EuiCompressedFormRow>
                                           </form>
                                         </EuiForm>
                                       </div>
@@ -8274,10 +8301,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           </ConfigPanelOptions>
                         </div>
                       </div>
-                    </EuiFormRow>
-                    <EuiFormRow
+                    </EuiCompressedFormRow>
+                    <EuiCompressedFormRow
                       describedByIds={Array []}
-                      display="row"
+                      display="rowCompressed"
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
@@ -8285,7 +8312,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow euiFormRow--fullWidth"
+                        className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -9753,10 +9780,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           </ConfigTooltip>
                         </div>
                       </div>
-                    </EuiFormRow>
-                    <EuiFormRow
+                    </EuiCompressedFormRow>
+                    <EuiCompressedFormRow
                       describedByIds={Array []}
-                      display="row"
+                      display="rowCompressed"
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
@@ -9764,7 +9791,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow euiFormRow--fullWidth"
+                        className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -11145,7 +11172,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               className="euiSpacer euiSpacer--s"
                                             />
                                           </EuiSpacer>
-                                          <EuiFieldNumber
+                                          <EuiCompressedFieldNumber
                                             data-test-subj="valueFieldNumber"
                                             fullWidth={true}
                                             id="random_html_id"
@@ -11154,38 +11181,49 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             placeholder="auto"
                                             value=""
                                           >
-                                            <EuiFormControlLayout
-                                              compressed={false}
+                                            <EuiFieldNumber
+                                              compressed={true}
+                                              data-test-subj="valueFieldNumber"
                                               fullWidth={true}
-                                              inputId="random_html_id"
-                                              isLoading={false}
+                                              id="random_html_id"
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              placeholder="auto"
+                                              value=""
                                             >
-                                              <div
-                                                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                              <EuiFormControlLayout
+                                                compressed={true}
+                                                fullWidth={true}
+                                                inputId="random_html_id"
+                                                isLoading={false}
                                               >
                                                 <div
-                                                  className="euiFormControlLayout__childrenWrapper"
+                                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                                 >
-                                                  <EuiValidatableControl>
-                                                    <input
-                                                      className="euiFieldNumber euiFieldNumber--fullWidth"
-                                                      data-test-subj="valueFieldNumber"
-                                                      id="random_html_id"
-                                                      onBlur={[Function]}
-                                                      onChange={[Function]}
-                                                      placeholder="auto"
-                                                      type="number"
-                                                      value=""
+                                                  <div
+                                                    className="euiFormControlLayout__childrenWrapper"
+                                                  >
+                                                    <EuiValidatableControl>
+                                                      <input
+                                                        className="euiFieldNumber euiFieldNumber--fullWidth euiFieldNumber--compressed"
+                                                        data-test-subj="valueFieldNumber"
+                                                        id="random_html_id"
+                                                        onBlur={[Function]}
+                                                        onChange={[Function]}
+                                                        placeholder="auto"
+                                                        type="number"
+                                                        value=""
+                                                      />
+                                                    </EuiValidatableControl>
+                                                    <EuiFormControlLayoutIcons
+                                                      compressed={true}
+                                                      isLoading={false}
                                                     />
-                                                  </EuiValidatableControl>
-                                                  <EuiFormControlLayoutIcons
-                                                    compressed={false}
-                                                    isLoading={false}
-                                                  />
+                                                  </div>
                                                 </div>
-                                              </div>
-                                            </EuiFormControlLayout>
-                                          </EuiFieldNumber>
+                                              </EuiFormControlLayout>
+                                            </EuiFieldNumber>
+                                          </EuiCompressedFieldNumber>
                                         </InputFieldItem>
                                         <EuiSpacer
                                           size="s"
@@ -11203,10 +11241,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           </ConfigLegend>
                         </div>
                       </div>
-                    </EuiFormRow>
-                    <EuiFormRow
+                    </EuiCompressedFormRow>
+                    <EuiCompressedFormRow
                       describedByIds={Array []}
-                      display="row"
+                      display="rowCompressed"
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
@@ -11214,7 +11252,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow euiFormRow--fullWidth"
+                        className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -12373,7 +12411,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                               className="euiSpacer euiSpacer--s"
                                             />
                                           </EuiSpacer>
-                                          <EuiFieldNumber
+                                          <EuiCompressedFieldNumber
                                             data-test-subj="valueFieldNumber"
                                             fullWidth={true}
                                             id="random_html_id"
@@ -12382,38 +12420,49 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                                             placeholder="auto"
                                             value=""
                                           >
-                                            <EuiFormControlLayout
-                                              compressed={false}
+                                            <EuiFieldNumber
+                                              compressed={true}
+                                              data-test-subj="valueFieldNumber"
                                               fullWidth={true}
-                                              inputId="random_html_id"
-                                              isLoading={false}
+                                              id="random_html_id"
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              placeholder="auto"
+                                              value=""
                                             >
-                                              <div
-                                                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                              <EuiFormControlLayout
+                                                compressed={true}
+                                                fullWidth={true}
+                                                inputId="random_html_id"
+                                                isLoading={false}
                                               >
                                                 <div
-                                                  className="euiFormControlLayout__childrenWrapper"
+                                                  className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                                                 >
-                                                  <EuiValidatableControl>
-                                                    <input
-                                                      className="euiFieldNumber euiFieldNumber--fullWidth"
-                                                      data-test-subj="valueFieldNumber"
-                                                      id="random_html_id"
-                                                      onBlur={[Function]}
-                                                      onChange={[Function]}
-                                                      placeholder="auto"
-                                                      type="number"
-                                                      value=""
+                                                  <div
+                                                    className="euiFormControlLayout__childrenWrapper"
+                                                  >
+                                                    <EuiValidatableControl>
+                                                      <input
+                                                        className="euiFieldNumber euiFieldNumber--fullWidth euiFieldNumber--compressed"
+                                                        data-test-subj="valueFieldNumber"
+                                                        id="random_html_id"
+                                                        onBlur={[Function]}
+                                                        onChange={[Function]}
+                                                        placeholder="auto"
+                                                        type="number"
+                                                        value=""
+                                                      />
+                                                    </EuiValidatableControl>
+                                                    <EuiFormControlLayoutIcons
+                                                      compressed={true}
+                                                      isLoading={false}
                                                     />
-                                                  </EuiValidatableControl>
-                                                  <EuiFormControlLayoutIcons
-                                                    compressed={false}
-                                                    isLoading={false}
-                                                  />
+                                                  </div>
                                                 </div>
-                                              </div>
-                                            </EuiFormControlLayout>
-                                          </EuiFieldNumber>
+                                              </EuiFormControlLayout>
+                                            </EuiFieldNumber>
+                                          </EuiCompressedFieldNumber>
                                         </InputFieldItem>
                                         <EuiSpacer
                                           size="s"
@@ -14400,10 +14449,10 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           </ConfigBarChartStyles>
                         </div>
                       </div>
-                    </EuiFormRow>
-                    <EuiFormRow
+                    </EuiCompressedFormRow>
+                    <EuiCompressedFormRow
                       describedByIds={Array []}
-                      display="row"
+                      display="rowCompressed"
                       fullWidth={true}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
@@ -14411,7 +14460,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow euiFormRow--fullWidth"
+                        className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -15229,7 +15278,7 @@ exports[`Config panel component Renders config panel with visualization data 1`]
                           </ConfigColorTheme>
                         </div>
                       </div>
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </div>
                 </EuiForm>
               </div>
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
index 765386ff6..2675727a4 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import {
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiIcon,
   EuiTabbedContent,
@@ -188,7 +188,7 @@ export const ConfigPanel = ({ visualizations, setCurVisId, callback }: any) => {
   return (
     <div className="cp__rightContainer">
       <div className="cp__rightHeader">
-        <EuiComboBox
+        <EuiCompressedComboBox
           aria-label="config chart selector"
           placeholder="Select a chart"
           options={memorizedVisualizationTypes}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx
index 102a4fe01..99fe224f1 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_availability.tsx
@@ -7,15 +7,15 @@ import React, { useCallback, useState } from 'react';
 import {
   EuiButton,
   EuiAccordion,
-  EuiFormRow,
-  EuiFieldNumber,
+  EuiCompressedFormRow,
+  EuiCompressedFieldNumber,
   EuiColorPicker,
   EuiSpacer,
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldText,
-  EuiSelect,
+  EuiCompressedFieldText,
+  EuiCompressedSelect,
   htmlIdGenerator,
   EuiText,
 } from '@elastic/eui';
@@ -133,30 +133,30 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
           vizState.level.map((thr: AvailabilityUnitType) => {
             return (
               <>
-                <EuiFormRow fullWidth label="">
+                <EuiCompressedFormRow fullWidth label="">
                   <EuiFlexGroup alignItems="center" gutterSize="xs">
                     <EuiFlexItem grow={3}>
-                      <EuiFormRow helpText="color">
+                      <EuiCompressedFormRow helpText="color">
                         <EuiColorPicker
                           fullWidth
                           onChange={handleAvailabilityChange(thr.thid, 'color')}
                           color={thr.color}
                         />
-                      </EuiFormRow>
+                      </EuiCompressedFormRow>
                     </EuiFlexItem>
                     <EuiFlexItem grow={5}>
-                      <EuiFormRow helpText="name">
-                        <EuiFieldText
+                      <EuiCompressedFormRow helpText="name">
+                        <EuiCompressedFieldText
                           onChange={handleAvailabilityChange(thr.thid, 'name')}
                           value={thr.name || ''}
                           arial-label="Input availability name"
                           data-test-subj="nameFieldText"
                         />
-                      </EuiFormRow>
+                      </EuiCompressedFormRow>
                     </EuiFlexItem>
-                    <EuiFormRow helpText="expression">
+                    <EuiCompressedFormRow helpText="expression">
                       <EuiFlexItem grow={4}>
-                        <EuiSelect
+                        <EuiCompressedSelect
                           options={expressionOptions}
                           value={thr.expression || ''}
                           onChange={handleAvailabilityChange(thr.thid, 'expression')}
@@ -164,10 +164,10 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
                           data-test-subj="expressionSelect"
                         />
                       </EuiFlexItem>
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                     <EuiFlexItem grow={5}>
-                      <EuiFormRow helpText="value">
-                        <EuiFieldNumber
+                      <EuiCompressedFormRow helpText="value">
+                        <EuiCompressedFieldNumber
                           fullWidth
                           placeholder="availability value"
                           value={thr.value || 0}
@@ -175,15 +175,15 @@ export const ConfigAvailability = ({ visualizations, onConfigChange, vizState =
                           aria-label="Input availability value"
                           data-test-subj="valueFieldNumber"
                         />
-                      </EuiFormRow>
+                      </EuiCompressedFormRow>
                     </EuiFlexItem>
                     <EuiFlexItem grow={1}>
-                      <EuiFormRow>
+                      <EuiCompressedFormRow>
                         <EuiIcon type="trash" onClick={handleAvailabilityDelete(thr.thid)} />
-                      </EuiFormRow>
+                      </EuiCompressedFormRow>
                     </EuiFlexItem>
                   </EuiFlexGroup>
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </>
             );
           })}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx
index 26ea6995f..627953e0c 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_palette_picker.tsx
@@ -11,7 +11,7 @@ import {
   EuiFlexGroup,
   EuiColorPalettePicker,
   EuiColorPicker,
-  EuiFormRow,
+  EuiCompressedFormRow,
 } from '@elastic/eui';
 import {
   DEFAULT_PALETTE,
@@ -80,9 +80,9 @@ export const ColorPalettePicker = ({
       <EuiFlexGroup gutterSize={'xs'}>
         {[SINGLE_COLOR_PALETTE, MULTI_COLOR_PALETTE].includes(selectedColor.name) && (
           <EuiFlexItem grow={1}>
-            <EuiFormRow helpText={selectedColor.name === MULTI_COLOR_PALETTE && 'Child field'}>
+            <EuiCompressedFormRow helpText={selectedColor.name === MULTI_COLOR_PALETTE && 'Child field'}>
               <EuiColorPicker onChange={onChildColorChange} color={childColor} />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
         )}
         {selectedColor.name === MULTI_COLOR_PALETTE &&
@@ -91,12 +91,12 @@ export const ColorPalettePicker = ({
             .fill(0)
             .map((_, i) => (
               <EuiFlexItem grow={1} key={i}>
-                <EuiFormRow helpText={`Parent ${i + 1} field`}>
+                <EuiCompressedFormRow helpText={`Parent ${i + 1} field`}>
                   <EuiColorPicker
                     onChange={onParentColorChange(i)}
                     color={parentColors[i] ?? '#000000'}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               </EuiFlexItem>
             ))}
         <EuiFlexItem grow={3}>
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
index f9625151a..96d6c2141 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_color_theme.tsx
@@ -7,14 +7,14 @@ import React, { Fragment, useCallback } from 'react';
 import {
   EuiButton,
   EuiAccordion,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiColorPicker,
   EuiSpacer,
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
   htmlIdGenerator,
-  EuiComboBox,
+  EuiCompressedComboBox,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { ADD_BUTTON_TEXT, AGGREGATIONS } from '../../../../../../../../common/constants/explorer';
@@ -92,20 +92,20 @@ export const ConfigColorTheme = ({
         vizState.map((ct) => {
           return (
             <Fragment key={ct.ctid}>
-              <EuiFormRow fullWidth label="">
+              <EuiCompressedFormRow fullWidth label="">
                 <EuiFlexGroup alignItems="center" gutterSize="xs">
                   <EuiFlexItem grow={3}>
-                    <EuiFormRow helpText="Color">
+                    <EuiCompressedFormRow helpText="Color">
                       <EuiColorPicker
                         fullWidth
                         onChange={handleColorThemeChange(ct.ctid, 'color')}
                         color={ct.color}
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   <EuiFlexItem grow={4}>
-                    <EuiFormRow helpText="Field">
-                      <EuiComboBox
+                    <EuiCompressedFormRow helpText="Field">
+                      <EuiCompressedComboBox
                         id={ct.ctid}
                         placeholder="Select a field"
                         options={getUpdatedOptions()}
@@ -114,15 +114,15 @@ export const ConfigColorTheme = ({
                         onChange={handleColorThemeChange(ct.ctid, 'name')}
                         aria-label="Use aria labels when no actual label is in use"
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   <EuiFlexItem grow={1}>
-                    <EuiFormRow>
+                    <EuiCompressedFormRow>
                       <EuiIcon type="trash" onClick={handleColorThemeDelete(ct.ctid)} />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                 </EuiFlexGroup>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </Fragment>
           );
         })}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
index af67533bd..6fc869f4f 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_number_input.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { EuiFieldNumber, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
+import { EuiCompressedFieldNumber, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
 
 interface InputFieldProps {
   title: string;
@@ -33,7 +33,7 @@ export const InputFieldItem: React.FC<InputFieldProps> = ({
         <h3>{title}</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiFieldNumber
+      <EuiCompressedFieldNumber
         id={htmlIdGenerator('input-number')()}
         fullWidth
         placeholder="auto"
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
index a6be223f7..0c670b31d 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_item.tsx
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import { uniqueId, isEmpty } from 'lodash';
-import { EuiTitle, EuiComboBox, EuiSpacer } from '@elastic/eui';
+import { EuiTitle, EuiCompressedComboBox, EuiSpacer } from '@elastic/eui';
 
 export const PanelItem = ({
   paddingTitle,
@@ -29,7 +29,7 @@ export const PanelItem = ({
         <h3>{paddingTitle}</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiComboBox
+      <EuiCompressedComboBox
         id={uniqueId('axis-select-')}
         placeholder="Select a field"
         options={options}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
index a6734400b..bf2954fce 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_option_gauge.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
+import { EuiCompressedFormRow, EuiCompressedFieldNumber } from '@elastic/eui';
 import { find } from 'lodash';
 import {
   DEFAULT_GAUGE_CHART_PARAMETERS,
@@ -43,8 +43,8 @@ export const ConfigPanelOptionGauge = ({
   }, [vizState?.numberOfGauges]);
 
   return (
-    <EuiFormRow fullWidth label="Number of gauges" helpText={helpText}>
-      <EuiFieldNumber
+    <EuiCompressedFormRow fullWidth label="Number of gauges" helpText={helpText}>
+      <EuiCompressedFieldNumber
         name="numberOfGauges"
         onChange={(e) => {
           setNumberOfGauges(Number(e.target.value));
@@ -61,6 +61,6 @@ export const ConfigPanelOptionGauge = ({
         placeholder={'Number of gauges'}
         readOnly={dimensions.length === 0}
       />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 };
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
index 870a90ba0..9abe7ea9a 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_panel_options.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { EuiFieldText, EuiForm, EuiFormRow, EuiTextArea, EuiAccordion } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiForm, EuiCompressedFormRow, EuiCompressedTextArea, EuiAccordion } from '@elastic/eui';
 import { VIS_CHART_TYPES } from '../../../../../../../../common/constants/shared';
 import { DEFAULT_GAUGE_CHART_PARAMETERS } from '../../../../../../../../common/constants/explorer';
 import { ConfigPanelOptionGauge } from './config_panel_option_gauge';
@@ -43,17 +43,17 @@ export const ConfigPanelOptions = ({ visualizations, handleConfigChange, vizStat
       paddingSize="s"
     >
       <EuiForm component="form">
-        <EuiFormRow fullWidth label="Title" helpText={`${helpText}`}>
-          <EuiFieldText
+        <EuiCompressedFormRow fullWidth label="Title" helpText={`${helpText}`}>
+          <EuiCompressedFieldText
             name="title"
             onChange={handleTextChange}
             onBlur={() => handleConfigChange(panelOptionsValues)}
             value={panelOptionsValues.title}
             placeholder={'Title'}
           />
-        </EuiFormRow>
-        <EuiFormRow label="Description">
-          <EuiTextArea
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow label="Description">
+          <EuiCompressedTextArea
             name="description"
             aria-label="Use aria labels when no actual label is in use"
             placeholder={'Description'}
@@ -61,7 +61,7 @@ export const ConfigPanelOptions = ({ visualizations, handleConfigChange, vizStat
             onChange={handleTextChange}
             onBlur={() => handleConfigChange(panelOptionsValues)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         {visualizations?.vis?.name?.toLowerCase() === VIS_CHART_TYPES.Gauge && (
           <ConfigPanelOptionGauge
             onChange={handleTextChange}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_single_color_picker.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_single_color_picker.tsx
index da5fb36b7..7ed2b5b56 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_single_color_picker.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_single_color_picker.tsx
@@ -10,7 +10,7 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiColorPicker,
-  EuiFormRow,
+  EuiCompressedFormRow,
   colorPalette,
 } from '@elastic/eui';
 import { lightenColor } from '../../../../../../event_analytics/utils/utils';
@@ -29,9 +29,9 @@ export const SingleColorPicker = ({ title, selectedColor, onSelectChange }: any)
       <EuiSpacer size="s" />
       <EuiFlexGroup gutterSize={'xs'}>
         <EuiFlexItem grow={3}>
-          <EuiFormRow>
+          <EuiCompressedFormRow>
             <EuiColorPicker onChange={onColorChange} color={selectedColor.color} />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
index ba2ca23e8..3667667c7 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { Fragment } from 'react';
-import { EuiSpacer, EuiFormRow, EuiSwitch, htmlIdGenerator } from '@elastic/eui';
+import { EuiSpacer, EuiCompressedFormRow, EuiSwitch, htmlIdGenerator } from '@elastic/eui';
 
 interface EUISwitch {
   label: string;
@@ -14,7 +14,7 @@ interface EUISwitch {
 }
 export const ConfigSwitch: React.FC<EUISwitch> = ({ label, disabled, checked, handleChange }) => (
   <Fragment key={`config-switch-${label}`}>
-    <EuiFormRow label={label}>
+    <EuiCompressedFormRow label={label}>
       <EuiSwitch
         id={htmlIdGenerator('switch-button')()}
         showLabel={false}
@@ -24,7 +24,7 @@ export const ConfigSwitch: React.FC<EUISwitch> = ({ label, disabled, checked, ha
         onChange={(e) => handleChange(e.target.checked)}
         compressed
       />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
     <EuiSpacer size="s" />
   </Fragment>
 );
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx
index 934bd8077..efff52726 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_switch_button.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiSwitch, EuiSpacer } from '@elastic/eui';
+import { EuiCompressedSwitch, EuiSpacer } from '@elastic/eui';
 
 interface SwitchButtonProps {
   currentValue: boolean;
@@ -15,7 +15,7 @@ export const SwitchButton = ({ currentValue, onToggle, title }: SwitchButtonProp
   return (
     <>
       <EuiSpacer />
-      <EuiSwitch
+      <EuiCompressedSwitch
         label={title}
         checked={currentValue}
         onChange={(e) => onToggle(e.target.checked)}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text_input.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text_input.tsx
index 0aa634b2a..70c62a50b 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text_input.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_text_input.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { EuiFieldText, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
+import { EuiCompressedFieldText, EuiTitle, EuiSpacer, htmlIdGenerator } from '@elastic/eui';
 
 interface InputFieldProps {
   name: string;
@@ -33,7 +33,7 @@ export const TextInputFieldItem: React.FC<InputFieldProps> = ({
         <h3>{title}</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiFieldText
+      <EuiCompressedFieldText
         id={htmlIdGenerator('input-text')()}
         name={name}
         fullWidth
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
index 013b25b0c..bf1164418 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_thresholds.tsx
@@ -7,14 +7,14 @@ import React, { Fragment, useCallback } from 'react';
 import {
   EuiButton,
   EuiAccordion,
-  EuiFormRow,
-  EuiFieldNumber,
+  EuiCompressedFormRow,
+  EuiCompressedFieldNumber,
   EuiColorPicker,
   EuiSpacer,
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFieldText,
+  EuiCompressedFieldText,
   htmlIdGenerator,
   EuiToolTip,
 } from '@elastic/eui';
@@ -111,31 +111,31 @@ export const ConfigThresholds = ({
         vizState.map((thr: ThresholdUnitType) => {
           return (
             <Fragment key={thr.thid}>
-              <EuiFormRow fullWidth label="">
+              <EuiCompressedFormRow fullWidth label="">
                 <EuiFlexGroup alignItems="center" gutterSize="xs">
                   <EuiFlexItem grow={3}>
-                    <EuiFormRow helpText="color">
+                    <EuiCompressedFormRow helpText="color">
                       <EuiColorPicker
                         fullWidth
                         onChange={handleThresholdChange(thr.thid, 'color')}
                         color={thr.color}
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   <EuiFlexItem grow={5}>
-                    <EuiFormRow helpText="name">
-                      <EuiFieldText
+                    <EuiCompressedFormRow helpText="name">
+                      <EuiCompressedFieldText
                         onChange={handleThresholdChange(thr.thid, 'name')}
                         value={thr.name || ''}
                         arial-label="Input threshold name"
                         data-test-subj="nameFieldText"
                         readOnly={thr.isReadOnly}
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   <EuiFlexItem grow={5}>
-                    <EuiFormRow helpText="value">
-                      <EuiFieldNumber
+                    <EuiCompressedFormRow helpText="value">
+                      <EuiCompressedFieldNumber
                         fullWidth
                         placeholder="threshold value"
                         value={thr.value || 0}
@@ -144,17 +144,17 @@ export const ConfigThresholds = ({
                         data-test-subj="valueFieldNumber"
                         readOnly={thr.isReadOnly}
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   {!thr.isReadOnly && (
                     <EuiFlexItem grow={1}>
-                      <EuiFormRow>
+                      <EuiCompressedFormRow>
                         <EuiIcon type="trash" onClick={handleThresholdDelete(thr.thid)} />
-                      </EuiFormRow>
+                      </EuiCompressedFormRow>
                     </EuiFlexItem>
                   )}
                 </EuiFlexGroup>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </Fragment>
           );
         })}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
index 12b48a723..84331fd94 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_treemap_parents.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonIcon, EuiLink, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSmallButtonIcon, EuiLink, EuiPanel, EuiSpacer, EuiText } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import React, { Fragment } from 'react';
 import { ParentUnitType, TreemapParentsProps } from '../../../../../../../../common/types/explorer';
@@ -50,7 +50,7 @@ export const ConfigTreemapParentFields = ({
                     {obj.label !== '' ? obj.label : `Parent ${index + 1}`}
                   </EuiLink>
                 </EuiText>
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   color="subdued"
                   iconType="cross"
                   aria-label="clear-field"
@@ -64,7 +64,7 @@ export const ConfigTreemapParentFields = ({
       <EuiSpacer size="s" />
       <EuiPanel className="panelItem_button" grow>
         <EuiText size="s">{addButtonText}</EuiText>
-        <EuiButtonIcon
+        <EuiSmallButtonIcon
           iconType="plusInCircle"
           aria-label="clear-field"
           iconSize="s"
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx
index 492c4d2e3..51202c978 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/config_yaxis_side.tsx
@@ -7,13 +7,13 @@ import React, { Fragment, useCallback } from 'react';
 import {
   EuiButton,
   EuiAccordion,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
   EuiIcon,
   EuiFlexGroup,
   EuiFlexItem,
   htmlIdGenerator,
-  EuiComboBox,
+  EuiCompressedComboBox,
 } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import {
@@ -94,11 +94,11 @@ export const ConfigYAxisSide = ({
         vizState.map((ct) => {
           return (
             <Fragment key={ct.ctid}>
-              <EuiFormRow fullWidth label="">
+              <EuiCompressedFormRow fullWidth label="">
                 <EuiFlexGroup alignItems="center" gutterSize="xs">
                   <EuiFlexItem grow={4}>
-                    <EuiFormRow helpText="Field">
-                      <EuiComboBox
+                    <EuiCompressedFormRow helpText="Field">
+                      <EuiCompressedComboBox
                         id={ct.ctid}
                         placeholder="Select a field"
                         options={getUpdatedOptions()}
@@ -107,11 +107,11 @@ export const ConfigYAxisSide = ({
                         onChange={handleColorThemeChange(ct.ctid, 'label')}
                         aria-label="series-dropdown"
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   <EuiFlexItem grow={3}>
-                    <EuiFormRow helpText="Position">
-                      <EuiComboBox
+                    <EuiCompressedFormRow helpText="Position">
+                      <EuiCompressedComboBox
                         id={ct.ctid}
                         placeholder="Select position"
                         options={SERIES_POSITION_OPTIONS}
@@ -126,15 +126,15 @@ export const ConfigYAxisSide = ({
                         onChange={handleColorThemeChange(ct.ctid, 'side')}
                         aria-label="series-position-dropdown"
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                   <EuiFlexItem grow={1}>
-                    <EuiFormRow>
+                    <EuiCompressedFormRow>
                       <EuiIcon type="trash" onClick={handleDeletePosition(ct.ctid)} />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                 </EuiFlexGroup>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </Fragment>
           );
         })}
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
index 669a314c8..6fb1d104b 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_config_panel_fields.tsx
@@ -4,7 +4,7 @@
  */
 import React, { Fragment } from 'react';
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiIcon,
   EuiLink,
   EuiPanel,
@@ -12,7 +12,7 @@ import {
   EuiText,
   EuiTitle,
   EuiToolTip,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiFormLabel,
 } from '@elastic/eui';
 import { isArray, isEmpty, lowerCase } from 'lodash';
@@ -64,7 +64,7 @@ export const DataConfigPanelFields = ({
 
   const tooltipIcon = <EuiIcon type="iInCircle" color="text" size="m" />;
   const crossIcon = (index: number, configName: string) => (
-    <EuiButtonIcon
+    <EuiSmallButtonIcon
       color="subdued"
       iconType="cross"
       aria-label="clear-field"
@@ -86,7 +86,7 @@ export const DataConfigPanelFields = ({
   );
 
   return (
-    <EuiFormRow>
+    <EuiCompressedFormRow>
       <>
         <div style={{ display: 'flex' }}>
           <EuiFormLabel className="panel_title">{sectionName}</EuiFormLabel>
@@ -148,7 +148,7 @@ export const DataConfigPanelFields = ({
           {!hideClickToAddButton(sectionName) && (
             <EuiPanel className="panelItem_button" data-test-subj="viz-config-section" grow>
               <EuiText size="s">{addButtonText}</EuiText>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 iconType="plusInCircle"
                 aria-label="add-field"
                 iconSize="s"
@@ -160,6 +160,6 @@ export const DataConfigPanelFields = ({
           )}
         </div>
       </>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 };
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
index 0e3c1fc77..b6b36beeb 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -6,12 +6,12 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import {
   EuiButton,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
-  EuiFieldNumber,
-  EuiFieldText,
+  EuiCompressedFieldNumber,
+  EuiCompressedFieldText,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
@@ -354,8 +354,8 @@ export const DataConfigPanelItem = ({
             <EuiPanel color="subdued" style={{ padding: '0px' }}>
               {/* Aggregation input for Series */}
               {isAggregations && (
-                <EuiFormRow label="Aggregation">
-                  <EuiComboBox
+                <EuiCompressedFormRow label="Aggregation">
+                  <EuiCompressedComboBox
                     aria-label="aggregation input"
                     placeholder="Select a aggregation"
                     singleSelection={{ asPlainText: true }}
@@ -371,20 +371,20 @@ export const DataConfigPanelItem = ({
                     }
                     onChange={(e) => updateList(e.length > 0 ? e[0].label : '', 'aggregation')}
                   />
-                </EuiFormRow>
+                </EuiCompressedFormRow>
               )}
               {/* Show input fields for Series when aggregation is not empty  */}
               {isAggregations && selectedObj.aggregation !== '' && (
                 <>
                   {getCommonDimensionsField(selectedObj, name)}
-                  <EuiFormRow label="Custom label">
-                    <EuiFieldText
+                  <EuiCompressedFormRow label="Custom label">
+                    <EuiCompressedFieldText
                       placeholder="Custom label"
                       value={selectedObj[CUSTOM_LABEL]}
                       onChange={(e) => updateList(e.target.value, CUSTOM_LABEL)}
                       aria-label="input label"
                     />
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </>
               )}
               {/* Show input fields for dimensions */}
@@ -425,8 +425,8 @@ export const DataConfigPanelItem = ({
   const getCommonDimensionsField = (selectedObj: ConfigListEntry, name: string) => {
     return (
       <>
-        <EuiFormRow label="Field">
-          <EuiComboBox
+        <EuiCompressedFormRow label="Field">
+          <EuiCompressedComboBox
             aria-label="input field"
             placeholder="Select a field"
             singleSelection={{ asPlainText: true }}
@@ -448,7 +448,7 @@ export const DataConfigPanelItem = ({
                 : updateList(e.length > 0 ? e[0].label : '', 'label')
             }
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         {isTimeStampSelected && DateHistogram}
       </>
     );
@@ -456,7 +456,7 @@ export const DataConfigPanelItem = ({
 
   const getNumberField = (type: string) => (
     <>
-      <EuiFieldNumber
+      <EuiCompressedFieldNumber
         id={htmlIdGenerator('input-number')()}
         fullWidth
         placeholder="auto"
@@ -479,8 +479,8 @@ export const DataConfigPanelItem = ({
           <div className="first-division">
             <EuiPanel color="subdued" style={{ padding: '0px' }}>
               <EuiSpacer size="s" />
-              <EuiFormRow label="Interval">
-                <EuiFieldNumber
+              <EuiCompressedFormRow label="Interval">
+                <EuiCompressedFieldNumber
                   placeholder="Placeholder text"
                   value={configList.span?.interval ?? 1}
                   min={1}
@@ -499,9 +499,9 @@ export const DataConfigPanelItem = ({
                   aria-label="interval field"
                   data-test-subj="valueFieldNumber"
                 />
-              </EuiFormRow>
-              <EuiFormRow label="Unit">
-                <EuiComboBox
+              </EuiCompressedFormRow>
+              <EuiCompressedFormRow label="Unit">
+                <EuiCompressedComboBox
                   aria-label="date unit"
                   placeholder="Select fields"
                   singleSelection
@@ -514,7 +514,7 @@ export const DataConfigPanelItem = ({
                   selectedOptions={configList.span?.unit ? [...configList.span?.unit] : []}
                   onChange={(e) => handleTimeStampFieldsChange(e, 'unit')}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </EuiPanel>
           </div>
         </div>
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx
index 2794f45c8..00c53024c 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/logs_view_config_panel_item.tsx
@@ -6,11 +6,12 @@
 import React, { useEffect, useState, useContext, Fragment } from 'react';
 import {
   EuiTitle,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiSpacer,
+  EuiSmallButton,
   EuiButton,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiIcon,
   EuiText,
 } from '@elastic/eui';
@@ -172,7 +173,7 @@ export const LogsViewConfigPanelItem = ({
   const getLogsViewUI = () => {
     const list = configList[GROUPBY] ? configList[GROUPBY] : [];
     const listUI = list.map((field, index) => (
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Field"
         labelAppend={
           <EuiText size="xs">
@@ -184,7 +185,7 @@ export const LogsViewConfigPanelItem = ({
           </EuiText>
         }
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           aria-label="logsViewField"
           placeholder="Select a field"
           singleSelection={{ asPlainText: true }}
@@ -195,7 +196,7 @@ export const LogsViewConfigPanelItem = ({
             updateLogsViewConfig(e.length > 0 ? e[0].label : '', field as ConfigListEntry)
           }
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     ));
     return (
       <Fragment key="logsViewUI">
@@ -203,7 +204,7 @@ export const LogsViewConfigPanelItem = ({
         <EuiSpacer size="s" />
         {
           <EuiFlexItem grow>
-            <EuiButton
+            <EuiSmallButton
               fullWidth
               iconType="plusInCircleFilled"
               color="primary"
@@ -211,7 +212,7 @@ export const LogsViewConfigPanelItem = ({
               disabled={queriedFields.length !== 0}
             >
               Add
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         }
       </Fragment>
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
index 2870fe90f..dc752b208 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/treemap_config_panel_item.tsx
@@ -5,10 +5,10 @@
 
 import {
   EuiButton,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
@@ -144,7 +144,7 @@ export const TreemapConfigPanelItem = ({
           title={`Parent ${index + 1}`}
           closeMenu={() => isHandlePanelClickBack(selectedAxis)}
         />
-        <EuiComboBox
+        <EuiCompressedComboBox
           id={htmlIdGenerator('axis-select-')}
           placeholder="Select a field"
           options={options}
@@ -209,8 +209,8 @@ export const TreemapConfigPanelItem = ({
       </EuiTitle>
       <div className="first-division">
         <EuiPanel color="subdued">
-          <EuiFormRow label="Child Field">
-            <EuiComboBox
+          <EuiCompressedFormRow label="Child Field">
+            <EuiCompressedComboBox
               placeholder="Select a field"
               options={getOptionsAvailable(GROUPBY)}
               selectedOptions={
@@ -223,7 +223,7 @@ export const TreemapConfigPanelItem = ({
                 updateList(GROUPBY, CHILDFIELD, val.length > 0 ? val[0].label : '')
               }
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
 
           <EuiSpacer size="s" />
           <EuiTitle size="xxxs">
@@ -243,8 +243,8 @@ export const TreemapConfigPanelItem = ({
       </EuiTitle>
       <div className="first-division">
         <EuiPanel color="subdued">
-          <EuiFormRow label="Value Field">
-            <EuiComboBox
+          <EuiCompressedFormRow label="Value Field">
+            <EuiCompressedComboBox
               placeholder="Select a field"
               options={getOptionsAvailable(AGGREGATIONS)}
               selectedOptions={
@@ -257,7 +257,7 @@ export const TreemapConfigPanelItem = ({
                 updateList(AGGREGATIONS, VALUEFIELD, val.length > 0 ? val[0].label : '')
               }
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiPanel>
       </div>
       <EuiSpacer size="s" />
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
index ef8e17b50..9ac3ff212 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/default_vis_editor.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiForm, EuiFormRow } from '@elastic/eui';
+import { EuiForm, EuiCompressedFormRow } from '@elastic/eui';
 import { ConfigPanelOptions } from './config_controls';
 
 export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, tabProps }: any) => {
@@ -20,7 +20,7 @@ export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, ta
   const dynamicContent = tabProps.sections.map((section) => {
     const Editor = section.editor;
     return (
-      <EuiFormRow key={section.id} fullWidth>
+      <EuiCompressedFormRow key={section.id} fullWidth>
         <Editor
           visualizations={visualizations}
           schemas={section.schemas}
@@ -30,20 +30,20 @@ export const VizDataPanel = ({ visualizations, onConfigChange, vizState = {}, ta
           sectionId={section.id}
           props={section.props || {}}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     );
   });
 
   return (
     <div className="visEditorSidebar__config">
       <EuiForm className="visEditorSidebar__form">
-        <EuiFormRow>
+        <EuiCompressedFormRow>
           <ConfigPanelOptions
             vizState={vizState?.panelOptions}
             visualizations={visualizations}
             handleConfigChange={handleConfigEditing('panelOptions')}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
         {dynamicContent}
       </EuiForm>
     </div>
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
index e918d7b74..7e2e51479 100644
--- a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_actions.tsx
@@ -31,7 +31,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
+import { EuiSmallButtonIcon, EuiContextMenuPanel, EuiContextMenuItem, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
 
 interface PlotlyEditorActionsMenuProps {
@@ -49,7 +49,7 @@ function PlotlyEditorActionsMenu({ formatHJson }: PlotlyEditorActionsMenuProps)
 
   const closePopover = useCallback(() => setIsPopoverOpen(false), []);
 
-  const button = <EuiButtonIcon iconType="wrench" onClick={onButtonClick} />;
+  const button = <EuiSmallButtonIcon iconType="wrench" onClick={onButtonClick} />;
 
   const items = [
     <EuiContextMenuItem key="hjson" onClick={onHJsonCLick}>
diff --git a/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
index b543738ae..f473f273d 100644
--- a/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
+++ b/public/components/event_analytics/home/__tests__/__snapshots__/saved_query_table.test.tsx.snap
@@ -393,6 +393,7 @@ exports[`Saved query table component Renders saved query table 1`] = `
                       <FieldValueSelectionFilter
                         config={
                           Object {
+                            "compressed": undefined,
                             "field": "type",
                             "multiSelect": "or",
                             "name": "Type",
diff --git a/public/components/event_analytics/home/home.tsx b/public/components/event_analytics/home/home.tsx
index 87d5df340..da93bdbfa 100644
--- a/public/components/event_analytics/home/home.tsx
+++ b/public/components/event_analytics/home/home.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiFlexGroup,
@@ -191,14 +191,14 @@ const EventAnalyticsHome = (props: IHomeProps) => {
   };
 
   const popoverButton = (
-    <EuiButton
+    <EuiSmallButton
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
       data-test-subj="eventHomeAction"
     >
       Actions
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const deleteHistory = () => {
@@ -282,7 +282,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton
+                    <EuiSmallButton
                       key="redirect"
                       onClick={() => {
                         setIsActionsPopoverOpen(false);
@@ -292,7 +292,7 @@ const EventAnalyticsHome = (props: IHomeProps) => {
                       fill
                     >
                       Event Explorer
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageContentHeaderSection>
@@ -322,22 +322,22 @@ const EventAnalyticsHome = (props: IHomeProps) => {
                     <EuiSpacer size="m" />
                     <EuiFlexGroup justifyContent="center">
                       <EuiFlexItem grow={false}>
-                        <EuiButton
+                        <EuiSmallButton
                           fullWidth={false}
                           onClick={() => history.push(`/explorer`)}
                           data-test-subj="actionEventExplorer"
                         >
                           Event Explorer
-                        </EuiButton>
+                        </EuiSmallButton>
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
-                        <EuiButton
+                        <EuiSmallButton
                           fullWidth={false}
                           onClick={() => addSampledata()}
                           data-test-subj="actionAddSamples"
                         >
                           Add samples
-                        </EuiButton>
+                        </EuiSmallButton>
                       </EuiFlexItem>
                     </EuiFlexGroup>
                     <EuiSpacer size="xxl" />
diff --git a/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
index 0c52dc1e8..86d99ea84 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/added_integration.test.tsx.snap
@@ -227,54 +227,63 @@ exports[`Added Integration View Test Renders added integration view using dummy
                             <div
                               className="euiFlexItem euiFlexItem--flexGrowZero"
                             >
-                              <EuiButtonIcon
+                              <EuiSmallButtonIcon
                                 aria-label="Delete"
                                 color="danger"
                                 data-test-subj="deleteInstanceButton"
                                 iconType="trash"
                                 onClick={[Function]}
                               >
-                                <button
+                                <EuiButtonIcon
                                   aria-label="Delete"
-                                  className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
+                                  color="danger"
                                   data-test-subj="deleteInstanceButton"
-                                  disabled={false}
+                                  iconType="trash"
                                   onClick={[Function]}
-                                  type="button"
+                                  size="s"
                                 >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiButtonIcon__icon"
-                                    color="inherit"
-                                    size="m"
-                                    type="trash"
+                                  <button
+                                    aria-label="Delete"
+                                    className="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--small"
+                                    data-test-subj="deleteInstanceButton"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
                                   >
-                                    <EuiIconBeaker
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiButtonIcon__icon"
+                                      color="inherit"
+                                      size="m"
+                                      type="trash"
                                     >
-                                      <svg
+                                      <EuiIconBeaker
                                         aria-hidden={true}
                                         className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                         focusable="false"
-                                        height={16}
                                         role="img"
                                         style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
                                       >
-                                        <path
-                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                        />
-                                      </svg>
-                                    </EuiIconBeaker>
-                                  </EuiIcon>
-                                </button>
-                              </EuiButtonIcon>
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                          />
+                                        </svg>
+                                      </EuiIconBeaker>
+                                    </EuiIcon>
+                                  </button>
+                                </EuiButtonIcon>
+                              </EuiSmallButtonIcon>
                             </div>
                           </EuiFlexItem>
                         </div>
@@ -700,6 +709,7 @@ exports[`Added Integration View Test Renders added integration view using dummy
                                   <FieldValueSelectionFilter
                                     config={
                                       Object {
+                                        "compressed": undefined,
                                         "field": "assetType",
                                         "multiSelect": false,
                                         "name": "Type",
diff --git a/public/components/integrations/components/__tests__/__snapshots__/added_integration_flyout.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/added_integration_flyout.test.tsx.snap
index c08ba9003..fd3980b10 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/added_integration_flyout.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/added_integration_flyout.test.tsx.snap
@@ -93,7 +93,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                       >
                         <div>
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -144,14 +144,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                               class="euiFormRow__fieldWrapper"
                             >
                               <div
-                                class="euiFormControlLayout euiFormControlLayout--group"
+                                class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
                                     aria-describedby="random_html_id-help-0"
-                                    class="euiFieldText euiFieldText--inGroup"
+                                    class="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                     data-test-subj="data-source-name"
                                     id="random_html_id"
                                     name="first"
@@ -160,7 +160,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                   />
                                 </div>
                                 <button
-                                  class="euiButton euiButton--primary euiButton-isDisabled euiFormControlLayout__append"
+                                  class="euiButton euiButton--primary euiButton--small euiButton-isDisabled euiFormControlLayout__append"
                                   data-test-subj="validateIndex"
                                   disabled=""
                                   type="button"
@@ -185,7 +185,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                             </div>
                           </div>
                           <div
-                            class="euiFormRow"
+                            class="euiFormRow euiFormRow--compressed"
                             id="random_html_id-row"
                           >
                             <div
@@ -202,14 +202,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                               class="euiFormRow__fieldWrapper"
                             >
                               <div
-                                class="euiFormControlLayout"
+                                class="euiFormControlLayout euiFormControlLayout--compressed"
                               >
                                 <div
                                   class="euiFormControlLayout__childrenWrapper"
                                 >
                                   <input
                                     aria-describedby="random_html_id-help-0"
-                                    class="euiFieldText"
+                                    class="euiFieldText euiFieldText--compressed"
                                     data-test-subj="new-instance-name"
                                     id="random_html_id"
                                     name="first"
@@ -241,7 +241,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                       class="euiFlexItem"
                     >
                       <button
-                        class="euiButton euiButton--danger"
+                        class="euiButton euiButton--danger euiButton--small"
                         type="button"
                       >
                         <span
@@ -259,7 +259,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                       class="euiFlexItem"
                     >
                       <button
-                        class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                        class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                         data-click-metric-element="integrations.create_from_setup"
                         data-test-subj="createInstanceButton"
                         disabled=""
@@ -428,7 +428,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                               >
                                 <div>
                                   <div
-                                    class="euiFormRow"
+                                    class="euiFormRow euiFormRow--compressed"
                                     id="random_html_id-row"
                                   >
                                     <div
@@ -479,14 +479,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                       class="euiFormRow__fieldWrapper"
                                     >
                                       <div
-                                        class="euiFormControlLayout euiFormControlLayout--group"
+                                        class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                       >
                                         <div
                                           class="euiFormControlLayout__childrenWrapper"
                                         >
                                           <input
                                             aria-describedby="random_html_id-help-0"
-                                            class="euiFieldText euiFieldText--inGroup"
+                                            class="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                             data-test-subj="data-source-name"
                                             id="random_html_id"
                                             name="first"
@@ -495,7 +495,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                           />
                                         </div>
                                         <button
-                                          class="euiButton euiButton--primary euiButton-isDisabled euiFormControlLayout__append"
+                                          class="euiButton euiButton--primary euiButton--small euiButton-isDisabled euiFormControlLayout__append"
                                           data-test-subj="validateIndex"
                                           disabled=""
                                           type="button"
@@ -520,7 +520,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFormRow"
+                                    class="euiFormRow euiFormRow--compressed"
                                     id="random_html_id-row"
                                   >
                                     <div
@@ -537,14 +537,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                       class="euiFormRow__fieldWrapper"
                                     >
                                       <div
-                                        class="euiFormControlLayout"
+                                        class="euiFormControlLayout euiFormControlLayout--compressed"
                                       >
                                         <div
                                           class="euiFormControlLayout__childrenWrapper"
                                         >
                                           <input
                                             aria-describedby="random_html_id-help-0"
-                                            class="euiFieldText"
+                                            class="euiFieldText euiFieldText--compressed"
                                             data-test-subj="new-instance-name"
                                             id="random_html_id"
                                             name="first"
@@ -576,7 +576,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                               class="euiFlexItem"
                             >
                               <button
-                                class="euiButton euiButton--danger"
+                                class="euiButton euiButton--danger euiButton--small"
                                 type="button"
                               >
                                 <span
@@ -594,7 +594,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                               class="euiFlexItem"
                             >
                               <button
-                                class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                                class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                                 data-click-metric-element="integrations.create_from_setup"
                                 data-test-subj="createInstanceButton"
                                 disabled=""
@@ -695,7 +695,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                 >
                                   <div>
                                     <div
-                                      class="euiFormRow"
+                                      class="euiFormRow euiFormRow--compressed"
                                       id="random_html_id-row"
                                     >
                                       <div
@@ -746,14 +746,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                         class="euiFormRow__fieldWrapper"
                                       >
                                         <div
-                                          class="euiFormControlLayout euiFormControlLayout--group"
+                                          class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                         >
                                           <div
                                             class="euiFormControlLayout__childrenWrapper"
                                           >
                                             <input
                                               aria-describedby="random_html_id-help-0"
-                                              class="euiFieldText euiFieldText--inGroup"
+                                              class="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                               data-test-subj="data-source-name"
                                               id="random_html_id"
                                               name="first"
@@ -762,7 +762,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                             />
                                           </div>
                                           <button
-                                            class="euiButton euiButton--primary euiButton-isDisabled euiFormControlLayout__append"
+                                            class="euiButton euiButton--primary euiButton--small euiButton-isDisabled euiFormControlLayout__append"
                                             data-test-subj="validateIndex"
                                             disabled=""
                                             type="button"
@@ -787,7 +787,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                       </div>
                                     </div>
                                     <div
-                                      class="euiFormRow"
+                                      class="euiFormRow euiFormRow--compressed"
                                       id="random_html_id-row"
                                     >
                                       <div
@@ -804,14 +804,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                         class="euiFormRow__fieldWrapper"
                                       >
                                         <div
-                                          class="euiFormControlLayout"
+                                          class="euiFormControlLayout euiFormControlLayout--compressed"
                                         >
                                           <div
                                             class="euiFormControlLayout__childrenWrapper"
                                           >
                                             <input
                                               aria-describedby="random_html_id-help-0"
-                                              class="euiFieldText"
+                                              class="euiFieldText euiFieldText--compressed"
                                               data-test-subj="new-instance-name"
                                               id="random_html_id"
                                               name="first"
@@ -843,7 +843,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                 class="euiFlexItem"
                               >
                                 <button
-                                  class="euiButton euiButton--danger"
+                                  class="euiButton euiButton--danger euiButton--small"
                                   type="button"
                                 >
                                   <span
@@ -861,7 +861,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                 class="euiFlexItem"
                               >
                                 <button
-                                  class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                                  class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                                   data-click-metric-element="integrations.create_from_setup"
                                   data-test-subj="createInstanceButton"
                                   disabled=""
@@ -962,7 +962,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                   >
                                     <div>
                                       <div
-                                        class="euiFormRow"
+                                        class="euiFormRow euiFormRow--compressed"
                                         id="random_html_id-row"
                                       >
                                         <div
@@ -1013,14 +1013,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                           class="euiFormRow__fieldWrapper"
                                         >
                                           <div
-                                            class="euiFormControlLayout euiFormControlLayout--group"
+                                            class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                           >
                                             <div
                                               class="euiFormControlLayout__childrenWrapper"
                                             >
                                               <input
                                                 aria-describedby="random_html_id-help-0"
-                                                class="euiFieldText euiFieldText--inGroup"
+                                                class="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                                 data-test-subj="data-source-name"
                                                 id="random_html_id"
                                                 name="first"
@@ -1029,7 +1029,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                               />
                                             </div>
                                             <button
-                                              class="euiButton euiButton--primary euiButton-isDisabled euiFormControlLayout__append"
+                                              class="euiButton euiButton--primary euiButton--small euiButton-isDisabled euiFormControlLayout__append"
                                               data-test-subj="validateIndex"
                                               disabled=""
                                               type="button"
@@ -1054,7 +1054,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                         </div>
                                       </div>
                                       <div
-                                        class="euiFormRow"
+                                        class="euiFormRow euiFormRow--compressed"
                                         id="random_html_id-row"
                                       >
                                         <div
@@ -1071,14 +1071,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                           class="euiFormRow__fieldWrapper"
                                         >
                                           <div
-                                            class="euiFormControlLayout"
+                                            class="euiFormControlLayout euiFormControlLayout--compressed"
                                           >
                                             <div
                                               class="euiFormControlLayout__childrenWrapper"
                                             >
                                               <input
                                                 aria-describedby="random_html_id-help-0"
-                                                class="euiFieldText"
+                                                class="euiFieldText euiFieldText--compressed"
                                                 data-test-subj="new-instance-name"
                                                 id="random_html_id"
                                                 name="first"
@@ -1110,7 +1110,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                   class="euiFlexItem"
                                 >
                                   <button
-                                    class="euiButton euiButton--danger"
+                                    class="euiButton euiButton--danger euiButton--small"
                                     type="button"
                                   >
                                     <span
@@ -1128,7 +1128,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                   class="euiFlexItem"
                                 >
                                   <button
-                                    class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                                    class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                                     data-click-metric-element="integrations.create_from_setup"
                                     data-test-subj="createInstanceButton"
                                     disabled=""
@@ -1217,7 +1217,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                     >
                                       <div>
                                         <div
-                                          class="euiFormRow"
+                                          class="euiFormRow euiFormRow--compressed"
                                           id="random_html_id-row"
                                         >
                                           <div
@@ -1268,14 +1268,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                             class="euiFormRow__fieldWrapper"
                                           >
                                             <div
-                                              class="euiFormControlLayout euiFormControlLayout--group"
+                                              class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                             >
                                               <div
                                                 class="euiFormControlLayout__childrenWrapper"
                                               >
                                                 <input
                                                   aria-describedby="random_html_id-help-0"
-                                                  class="euiFieldText euiFieldText--inGroup"
+                                                  class="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
                                                   data-test-subj="data-source-name"
                                                   id="random_html_id"
                                                   name="first"
@@ -1284,7 +1284,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                                 />
                                               </div>
                                               <button
-                                                class="euiButton euiButton--primary euiButton-isDisabled euiFormControlLayout__append"
+                                                class="euiButton euiButton--primary euiButton--small euiButton-isDisabled euiFormControlLayout__append"
                                                 data-test-subj="validateIndex"
                                                 disabled=""
                                                 type="button"
@@ -1309,7 +1309,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                           </div>
                                         </div>
                                         <div
-                                          class="euiFormRow"
+                                          class="euiFormRow euiFormRow--compressed"
                                           id="random_html_id-row"
                                         >
                                           <div
@@ -1326,14 +1326,14 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                             class="euiFormRow__fieldWrapper"
                                           >
                                             <div
-                                              class="euiFormControlLayout"
+                                              class="euiFormControlLayout euiFormControlLayout--compressed"
                                             >
                                               <div
                                                 class="euiFormControlLayout__childrenWrapper"
                                               >
                                                 <input
                                                   aria-describedby="random_html_id-help-0"
-                                                  class="euiFieldText"
+                                                  class="euiFieldText euiFieldText--compressed"
                                                   data-test-subj="new-instance-name"
                                                   id="random_html_id"
                                                   name="first"
@@ -1365,7 +1365,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                     class="euiFlexItem"
                                   >
                                     <button
-                                      class="euiButton euiButton--danger"
+                                      class="euiButton euiButton--danger euiButton--small"
                                       type="button"
                                     >
                                       <span
@@ -1383,7 +1383,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                     class="euiFlexItem"
                                   >
                                     <button
-                                      class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                                      class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                                       data-click-metric-element="integrations.create_from_setup"
                                       data-test-subj="createInstanceButton"
                                       disabled=""
@@ -1540,9 +1540,9 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                     className="euiForm"
                                   >
                                     <div>
-                                      <EuiFormRow
+                                      <EuiCompressedFormRow
                                         describedByIds={Array []}
-                                        display="row"
+                                        display="rowCompressed"
                                         error={Array []}
                                         fullWidth={false}
                                         hasChildLabel={true}
@@ -1566,7 +1566,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                         labelType="label"
                                       >
                                         <div
-                                          className="euiFormRow"
+                                          className="euiFormRow euiFormRow--compressed"
                                           id="random_html_id-row"
                                         >
                                           <div
@@ -1659,15 +1659,15 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                           <div
                                             className="euiFormRow__fieldWrapper"
                                           >
-                                            <EuiFieldText
+                                            <EuiCompressedFieldText
                                               append={
-                                                <EuiButton
+                                                <EuiSmallButton
                                                   data-test-subj="validateIndex"
                                                   disabled={true}
                                                   onClick={[Function]}
                                                 >
                                                   Validate
-                                                </EuiButton>
+                                                </EuiSmallButton>
                                               }
                                               aria-describedby="random_html_id-help-0"
                                               data-test-subj="data-source-name"
@@ -1679,97 +1679,131 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                               onFocus={[Function]}
                                               value=""
                                             >
-                                              <EuiFormControlLayout
+                                              <EuiFieldText
                                                 append={
-                                                  <EuiButton
+                                                  <EuiSmallButton
                                                     data-test-subj="validateIndex"
                                                     disabled={true}
                                                     onClick={[Function]}
                                                   >
                                                     Validate
-                                                  </EuiButton>
+                                                  </EuiSmallButton>
                                                 }
-                                                fullWidth={false}
-                                                inputId="random_html_id"
+                                                aria-describedby="random_html_id-help-0"
+                                                compressed={true}
+                                                data-test-subj="data-source-name"
+                                                id="random_html_id"
+                                                isInvalid={false}
+                                                name="first"
+                                                onBlur={[Function]}
+                                                onChange={[Function]}
+                                                onFocus={[Function]}
+                                                value=""
                                               >
-                                                <div
-                                                  className="euiFormControlLayout euiFormControlLayout--group"
+                                                <EuiFormControlLayout
+                                                  append={
+                                                    <EuiSmallButton
+                                                      data-test-subj="validateIndex"
+                                                      disabled={true}
+                                                      onClick={[Function]}
+                                                    >
+                                                      Validate
+                                                    </EuiSmallButton>
+                                                  }
+                                                  compressed={true}
+                                                  fullWidth={false}
+                                                  inputId="random_html_id"
                                                 >
                                                   <div
-                                                    className="euiFormControlLayout__childrenWrapper"
+                                                    className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                                                   >
-                                                    <EuiValidatableControl
-                                                      isInvalid={false}
+                                                    <div
+                                                      className="euiFormControlLayout__childrenWrapper"
                                                     >
-                                                      <input
-                                                        aria-describedby="random_html_id-help-0"
-                                                        className="euiFieldText euiFieldText--inGroup"
-                                                        data-test-subj="data-source-name"
-                                                        id="random_html_id"
-                                                        name="first"
-                                                        onBlur={[Function]}
-                                                        onChange={[Function]}
-                                                        onFocus={[Function]}
-                                                        type="text"
-                                                        value=""
+                                                      <EuiValidatableControl
+                                                        isInvalid={false}
+                                                      >
+                                                        <input
+                                                          aria-describedby="random_html_id-help-0"
+                                                          className="euiFieldText euiFieldText--compressed euiFieldText--inGroup"
+                                                          data-test-subj="data-source-name"
+                                                          id="random_html_id"
+                                                          name="first"
+                                                          onBlur={[Function]}
+                                                          onChange={[Function]}
+                                                          onFocus={[Function]}
+                                                          type="text"
+                                                          value=""
+                                                        />
+                                                      </EuiValidatableControl>
+                                                      <EuiFormControlLayoutIcons
+                                                        compressed={true}
                                                       />
-                                                    </EuiValidatableControl>
-                                                    <EuiFormControlLayoutIcons />
-                                                  </div>
-                                                  <EuiButton
-                                                    className="euiFormControlLayout__append"
-                                                    data-test-subj="validateIndex"
-                                                    disabled={true}
-                                                    key="0/.0"
-                                                    onClick={[Function]}
-                                                  >
-                                                    <EuiButtonDisplay
-                                                      baseClassName="euiButton"
+                                                    </div>
+                                                    <EuiSmallButton
                                                       className="euiFormControlLayout__append"
                                                       data-test-subj="validateIndex"
                                                       disabled={true}
-                                                      element="button"
-                                                      isDisabled={true}
+                                                      key="0/.0"
                                                       onClick={[Function]}
-                                                      type="button"
                                                     >
-                                                      <button
-                                                        className="euiButton euiButton--primary euiButton-isDisabled euiFormControlLayout__append"
+                                                      <EuiButton
+                                                        className="euiFormControlLayout__append"
                                                         data-test-subj="validateIndex"
                                                         disabled={true}
                                                         onClick={[Function]}
-                                                        style={
-                                                          Object {
-                                                            "minWidth": undefined,
-                                                          }
-                                                        }
-                                                        type="button"
+                                                        size="s"
                                                       >
-                                                        <EuiButtonContent
-                                                          className="euiButton__content"
-                                                          iconSide="left"
-                                                          textProps={
-                                                            Object {
-                                                              "className": "euiButton__text",
-                                                            }
-                                                          }
+                                                        <EuiButtonDisplay
+                                                          baseClassName="euiButton"
+                                                          className="euiFormControlLayout__append"
+                                                          data-test-subj="validateIndex"
+                                                          disabled={true}
+                                                          element="button"
+                                                          isDisabled={true}
+                                                          onClick={[Function]}
+                                                          size="s"
+                                                          type="button"
                                                         >
-                                                          <span
-                                                            className="euiButtonContent euiButton__content"
+                                                          <button
+                                                            className="euiButton euiButton--primary euiButton--small euiButton-isDisabled euiFormControlLayout__append"
+                                                            data-test-subj="validateIndex"
+                                                            disabled={true}
+                                                            onClick={[Function]}
+                                                            style={
+                                                              Object {
+                                                                "minWidth": undefined,
+                                                              }
+                                                            }
+                                                            type="button"
                                                           >
-                                                            <span
-                                                              className="euiButton__text"
+                                                            <EuiButtonContent
+                                                              className="euiButton__content"
+                                                              iconSide="left"
+                                                              textProps={
+                                                                Object {
+                                                                  "className": "euiButton__text",
+                                                                }
+                                                              }
                                                             >
-                                                              Validate
-                                                            </span>
-                                                          </span>
-                                                        </EuiButtonContent>
-                                                      </button>
-                                                    </EuiButtonDisplay>
-                                                  </EuiButton>
-                                                </div>
-                                              </EuiFormControlLayout>
-                                            </EuiFieldText>
+                                                              <span
+                                                                className="euiButtonContent euiButton__content"
+                                                              >
+                                                                <span
+                                                                  className="euiButton__text"
+                                                                >
+                                                                  Validate
+                                                                </span>
+                                                              </span>
+                                                            </EuiButtonContent>
+                                                          </button>
+                                                        </EuiButtonDisplay>
+                                                      </EuiButton>
+                                                    </EuiSmallButton>
+                                                  </div>
+                                                </EuiFormControlLayout>
+                                              </EuiFieldText>
+                                            </EuiCompressedFieldText>
                                             <EuiFormHelpText
                                               className="euiFormRow__text"
                                               id="random_html_id-help-0"
@@ -1784,10 +1818,10 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                             </EuiFormHelpText>
                                           </div>
                                         </div>
-                                      </EuiFormRow>
-                                      <EuiFormRow
+                                      </EuiCompressedFormRow>
+                                      <EuiCompressedFormRow
                                         describedByIds={Array []}
-                                        display="row"
+                                        display="rowCompressed"
                                         fullWidth={false}
                                         hasChildLabel={true}
                                         hasEmptyLabelSpace={false}
@@ -1796,7 +1830,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                         labelType="label"
                                       >
                                         <div
-                                          className="euiFormRow"
+                                          className="euiFormRow euiFormRow--compressed"
                                           id="random_html_id-row"
                                         >
                                           <div
@@ -1819,7 +1853,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                           <div
                                             className="euiFormRow__fieldWrapper"
                                           >
-                                            <EuiFieldText
+                                            <EuiCompressedFieldText
                                               aria-describedby="random_html_id-help-0"
                                               data-test-subj="new-instance-name"
                                               id="random_html_id"
@@ -1829,35 +1863,50 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                               onFocus={[Function]}
                                               value="test"
                                             >
-                                              <EuiFormControlLayout
-                                                fullWidth={false}
-                                                inputId="random_html_id"
+                                              <EuiFieldText
+                                                aria-describedby="random_html_id-help-0"
+                                                compressed={true}
+                                                data-test-subj="new-instance-name"
+                                                id="random_html_id"
+                                                name="first"
+                                                onBlur={[Function]}
+                                                onChange={[Function]}
+                                                onFocus={[Function]}
+                                                value="test"
                                               >
-                                                <div
-                                                  className="euiFormControlLayout"
+                                                <EuiFormControlLayout
+                                                  compressed={true}
+                                                  fullWidth={false}
+                                                  inputId="random_html_id"
                                                 >
                                                   <div
-                                                    className="euiFormControlLayout__childrenWrapper"
+                                                    className="euiFormControlLayout euiFormControlLayout--compressed"
                                                   >
-                                                    <EuiValidatableControl>
-                                                      <input
-                                                        aria-describedby="random_html_id-help-0"
-                                                        className="euiFieldText"
-                                                        data-test-subj="new-instance-name"
-                                                        id="random_html_id"
-                                                        name="first"
-                                                        onBlur={[Function]}
-                                                        onChange={[Function]}
-                                                        onFocus={[Function]}
-                                                        type="text"
-                                                        value="test"
+                                                    <div
+                                                      className="euiFormControlLayout__childrenWrapper"
+                                                    >
+                                                      <EuiValidatableControl>
+                                                        <input
+                                                          aria-describedby="random_html_id-help-0"
+                                                          className="euiFieldText euiFieldText--compressed"
+                                                          data-test-subj="new-instance-name"
+                                                          id="random_html_id"
+                                                          name="first"
+                                                          onBlur={[Function]}
+                                                          onChange={[Function]}
+                                                          onFocus={[Function]}
+                                                          type="text"
+                                                          value="test"
+                                                        />
+                                                      </EuiValidatableControl>
+                                                      <EuiFormControlLayoutIcons
+                                                        compressed={true}
                                                       />
-                                                    </EuiValidatableControl>
-                                                    <EuiFormControlLayoutIcons />
+                                                    </div>
                                                   </div>
-                                                </div>
-                                              </EuiFormControlLayout>
-                                            </EuiFieldText>
+                                                </EuiFormControlLayout>
+                                              </EuiFieldText>
+                                            </EuiCompressedFieldText>
                                             <EuiFormHelpText
                                               className="euiFormRow__text"
                                               id="random_html_id-help-0"
@@ -1872,7 +1921,7 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                             </EuiFormHelpText>
                                           </div>
                                         </div>
-                                      </EuiFormRow>
+                                      </EuiCompressedFormRow>
                                     </div>
                                   </form>
                                 </EuiForm>
@@ -1892,111 +1941,128 @@ exports[`Add Integration Flyout Test Renders add integration flyout with dummy i
                                   <div
                                     className="euiFlexItem"
                                   >
-                                    <EuiButton
+                                    <EuiSmallButton
                                       color="danger"
                                       onClick={[Function]}
                                     >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
+                                      <EuiButton
                                         color="danger"
-                                        disabled={false}
-                                        element="button"
-                                        isDisabled={false}
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <button
-                                          className="euiButton euiButton--danger"
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
+                                          color="danger"
                                           disabled={false}
+                                          element="button"
+                                          isDisabled={false}
                                           onClick={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
+                                          size="s"
                                           type="button"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="left"
-                                            textProps={
+                                          <button
+                                            className="euiButton euiButton--danger euiButton--small"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            style={
                                               Object {
-                                                "className": "euiButton__text",
+                                                "minWidth": undefined,
                                               }
                                             }
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButton__content"
+                                            <EuiButtonContent
+                                              className="euiButton__content"
+                                              iconSide="left"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButton__text",
+                                                }
+                                              }
                                             >
                                               <span
-                                                className="euiButton__text"
+                                                className="euiButtonContent euiButton__content"
                                               >
-                                                Cancel
+                                                <span
+                                                  className="euiButton__text"
+                                                >
+                                                  Cancel
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </EuiSmallButton>
                                   </div>
                                 </EuiFlexItem>
                                 <EuiFlexItem>
                                   <div
                                     className="euiFlexItem"
                                   >
-                                    <EuiButton
+                                    <EuiSmallButton
                                       data-click-metric-element="integrations.create_from_setup"
                                       data-test-subj="createInstanceButton"
                                       disabled={true}
                                       fill={true}
                                       onClick={[Function]}
                                     >
-                                      <EuiButtonDisplay
-                                        baseClassName="euiButton"
+                                      <EuiButton
                                         data-click-metric-element="integrations.create_from_setup"
                                         data-test-subj="createInstanceButton"
                                         disabled={true}
-                                        element="button"
                                         fill={true}
-                                        isDisabled={true}
                                         onClick={[Function]}
-                                        type="button"
+                                        size="s"
                                       >
-                                        <button
-                                          className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                                        <EuiButtonDisplay
+                                          baseClassName="euiButton"
                                           data-click-metric-element="integrations.create_from_setup"
                                           data-test-subj="createInstanceButton"
                                           disabled={true}
+                                          element="button"
+                                          fill={true}
+                                          isDisabled={true}
                                           onClick={[Function]}
-                                          style={
-                                            Object {
-                                              "minWidth": undefined,
-                                            }
-                                          }
+                                          size="s"
                                           type="button"
                                         >
-                                          <EuiButtonContent
-                                            className="euiButton__content"
-                                            iconSide="left"
-                                            textProps={
+                                          <button
+                                            className="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
+                                            data-click-metric-element="integrations.create_from_setup"
+                                            data-test-subj="createInstanceButton"
+                                            disabled={true}
+                                            onClick={[Function]}
+                                            style={
                                               Object {
-                                                "className": "euiButton__text",
+                                                "minWidth": undefined,
                                               }
                                             }
+                                            type="button"
                                           >
-                                            <span
-                                              className="euiButtonContent euiButton__content"
+                                            <EuiButtonContent
+                                              className="euiButton__content"
+                                              iconSide="left"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButton__text",
+                                                }
+                                              }
                                             >
                                               <span
-                                                className="euiButton__text"
+                                                className="euiButtonContent euiButton__content"
                                               >
-                                                Add Integration
+                                                <span
+                                                  className="euiButton__text"
+                                                >
+                                                  Add Integration
+                                                </span>
                                               </span>
-                                            </span>
-                                          </EuiButtonContent>
-                                        </button>
-                                      </EuiButtonDisplay>
-                                    </EuiButton>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
+                                    </EuiSmallButton>
                                   </div>
                                 </EuiFlexItem>
                               </div>
diff --git a/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap
index c0871a84f..0deff9fa0 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/added_integration_table.test.tsx.snap
@@ -384,6 +384,7 @@ exports[`Added Integration Table View Test Renders added integration table view
                             <FieldValueSelectionFilter
                               config={
                                 Object {
+                                  "compressed": undefined,
                                   "field": "templateName",
                                   "multiSelect": false,
                                   "name": "Type",
diff --git a/public/components/integrations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap
index f778bc8ea..43bc018f0 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/available_integration_card_view.test.tsx.snap
@@ -76,8 +76,8 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 data-test-subj="search-bar-input-box"
                 fullWidth={true}
                 incremental={false}
@@ -87,20 +87,20 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                 placeholder="Search..."
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           data-test-subj="search-bar-input-box"
                           onChange={[Function]}
                           onKeyUp={[Function]}
@@ -109,7 +109,7 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -117,7 +117,7 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -126,19 +126,19 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconBeaker
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -160,7 +160,7 @@ exports[`Available Integration Card View Test Renders nginx integration card vie
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
diff --git a/public/components/integrations/components/__tests__/__snapshots__/integration_header.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/integration_header.test.tsx.snap
index 574594d3a..cd01eee6c 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/integration_header.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/integration_header.test.tsx.snap
@@ -34,13 +34,13 @@ exports[`Integration Header Test Renders integration header as expected 1`] = `
               <EuiPopover
                 anchorPosition="downLeft"
                 button={
-                  <EuiButton
+                  <EuiSmallButton
                     fill={true}
                     iconType="arrowDown"
                     onClick={[Function]}
                   >
                     Catalog
-                  </EuiButton>
+                  </EuiSmallButton>
                 }
                 closePopover={[Function]}
                 display="inlineBlock"
@@ -57,85 +57,93 @@ exports[`Integration Header Test Renders integration header as expected 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButton
+                    <EuiSmallButton
                       fill={true}
                       iconType="arrowDown"
                       onClick={[Function]}
                     >
-                      <EuiButtonDisplay
-                        baseClassName="euiButton"
-                        disabled={false}
-                        element="button"
+                      <EuiButton
                         fill={true}
                         iconType="arrowDown"
-                        isDisabled={false}
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <button
-                          className="euiButton euiButton--primary euiButton--fill"
+                        <EuiButtonDisplay
+                          baseClassName="euiButton"
                           disabled={false}
+                          element="button"
+                          fill={true}
+                          iconType="arrowDown"
+                          isDisabled={false}
                           onClick={[Function]}
-                          style={
-                            Object {
-                              "minWidth": undefined,
-                            }
-                          }
+                          size="s"
                           type="button"
                         >
-                          <EuiButtonContent
-                            className="euiButton__content"
-                            iconSide="left"
-                            iconType="arrowDown"
-                            textProps={
+                          <button
+                            className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                            disabled={false}
+                            onClick={[Function]}
+                            style={
                               Object {
-                                "className": "euiButton__text",
+                                "minWidth": undefined,
                               }
                             }
+                            type="button"
                           >
-                            <span
-                              className="euiButtonContent euiButton__content"
+                            <EuiButtonContent
+                              className="euiButton__content"
+                              iconSide="left"
+                              iconType="arrowDown"
+                              textProps={
+                                Object {
+                                  "className": "euiButton__text",
+                                }
+                              }
                             >
-                              <EuiIcon
-                                className="euiButtonContent__icon"
-                                color="inherit"
-                                size="m"
-                                type="arrowDown"
+                              <span
+                                className="euiButtonContent euiButton__content"
                               >
-                                <EuiIconBeaker
-                                  aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                  focusable="false"
-                                  role="img"
-                                  style={null}
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  color="inherit"
+                                  size="m"
+                                  type="arrowDown"
                                 >
-                                  <svg
+                                  <EuiIconBeaker
                                     aria-hidden={true}
                                     className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                     focusable="false"
-                                    height={16}
                                     role="img"
                                     style={null}
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
                                   >
-                                    <path
-                                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                    />
-                                  </svg>
-                                </EuiIconBeaker>
-                              </EuiIcon>
-                              <span
-                                className="euiButton__text"
-                              >
-                                Catalog
+                                    <svg
+                                      aria-hidden={true}
+                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                      focusable="false"
+                                      height={16}
+                                      role="img"
+                                      style={null}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                      xmlns="http://www.w3.org/2000/svg"
+                                    >
+                                      <path
+                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                      />
+                                    </svg>
+                                  </EuiIconBeaker>
+                                </EuiIcon>
+                                <span
+                                  className="euiButton__text"
+                                >
+                                  Catalog
+                                </span>
                               </span>
-                            </span>
-                          </EuiButtonContent>
-                        </button>
-                      </EuiButtonDisplay>
-                    </EuiButton>
+                            </EuiButtonContent>
+                          </button>
+                        </EuiButtonDisplay>
+                      </EuiButton>
+                    </EuiSmallButton>
                   </div>
                 </div>
               </EuiPopover>
diff --git a/public/components/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap
index 76ed541c9..600b842a1 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/setup_integration.test.tsx.snap
@@ -119,9 +119,9 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                               }
                               updateConfig={[Function]}
                             >
-                              <EuiFormRow
+                              <EuiCompressedFormRow
                                 describedByIds={Array []}
-                                display="row"
+                                display="rowCompressed"
                                 error={
                                   Array [
                                     "Must be at least 1 character.",
@@ -135,7 +135,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                 labelType="label"
                               >
                                 <div
-                                  className="euiFormRow"
+                                  className="euiFormRow euiFormRow--compressed"
                                   id="random_html_id-row"
                                 >
                                   <div
@@ -161,7 +161,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                   <div
                                     className="euiFormRow__fieldWrapper"
                                   >
-                                    <EuiFieldText
+                                    <EuiCompressedFieldText
                                       data-test-subj="new-instance-name"
                                       id="random_html_id"
                                       isInvalid={false}
@@ -171,39 +171,54 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                       placeholder="sample Integration"
                                       value="sample Integration"
                                     >
-                                      <EuiFormControlLayout
-                                        fullWidth={false}
-                                        inputId="random_html_id"
+                                      <EuiFieldText
+                                        compressed={true}
+                                        data-test-subj="new-instance-name"
+                                        id="random_html_id"
+                                        isInvalid={false}
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onFocus={[Function]}
+                                        placeholder="sample Integration"
+                                        value="sample Integration"
                                       >
-                                        <div
-                                          className="euiFormControlLayout"
+                                        <EuiFormControlLayout
+                                          compressed={true}
+                                          fullWidth={false}
+                                          inputId="random_html_id"
                                         >
                                           <div
-                                            className="euiFormControlLayout__childrenWrapper"
+                                            className="euiFormControlLayout euiFormControlLayout--compressed"
                                           >
-                                            <EuiValidatableControl
-                                              isInvalid={false}
+                                            <div
+                                              className="euiFormControlLayout__childrenWrapper"
                                             >
-                                              <input
-                                                className="euiFieldText"
-                                                data-test-subj="new-instance-name"
-                                                id="random_html_id"
-                                                onBlur={[Function]}
-                                                onChange={[Function]}
-                                                onFocus={[Function]}
-                                                placeholder="sample Integration"
-                                                type="text"
-                                                value="sample Integration"
+                                              <EuiValidatableControl
+                                                isInvalid={false}
+                                              >
+                                                <input
+                                                  className="euiFieldText euiFieldText--compressed"
+                                                  data-test-subj="new-instance-name"
+                                                  id="random_html_id"
+                                                  onBlur={[Function]}
+                                                  onChange={[Function]}
+                                                  onFocus={[Function]}
+                                                  placeholder="sample Integration"
+                                                  type="text"
+                                                  value="sample Integration"
+                                                />
+                                              </EuiValidatableControl>
+                                              <EuiFormControlLayoutIcons
+                                                compressed={true}
                                               />
-                                            </EuiValidatableControl>
-                                            <EuiFormControlLayoutIcons />
+                                            </div>
                                           </div>
-                                        </div>
-                                      </EuiFormControlLayout>
-                                    </EuiFieldText>
+                                        </EuiFormControlLayout>
+                                      </EuiFieldText>
+                                    </EuiCompressedFieldText>
                                   </div>
                                 </div>
-                              </EuiFormRow>
+                              </EuiCompressedFormRow>
                             </IntegrationDetailsInputs>
                             <EuiSpacer>
                               <div
@@ -249,9 +264,9 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                               lockConnectionType={false}
                               updateConfig={[Function]}
                             >
-                              <EuiFormRow
+                              <EuiCompressedFormRow
                                 describedByIds={Array []}
-                                display="row"
+                                display="rowCompressed"
                                 fullWidth={false}
                                 hasChildLabel={true}
                                 hasEmptyLabelSpace={false}
@@ -260,7 +275,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                 labelType="label"
                               >
                                 <div
-                                  className="euiFormRow"
+                                  className="euiFormRow euiFormRow--compressed"
                                   id="random_html_id-row"
                                 >
                                   <div
@@ -283,7 +298,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                   <div
                                     className="euiFormRow__fieldWrapper"
                                   >
-                                    <EuiSelect
+                                    <EuiCompressedSelect
                                       aria-describedby="random_html_id-help-0"
                                       disabled={false}
                                       id="random_html_id"
@@ -293,95 +308,107 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                       options={Array []}
                                       value="index"
                                     >
-                                      <EuiFormControlLayout
-                                        compressed={false}
-                                        fullWidth={false}
-                                        icon={
-                                          Object {
-                                            "side": "right",
-                                            "type": "arrowDown",
-                                          }
-                                        }
-                                        inputId="random_html_id"
-                                        isLoading={false}
+                                      <EuiSelect
+                                        aria-describedby="random_html_id-help-0"
+                                        compressed={true}
+                                        disabled={false}
+                                        id="random_html_id"
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onFocus={[Function]}
+                                        options={Array []}
+                                        value="index"
                                       >
-                                        <div
-                                          className="euiFormControlLayout"
+                                        <EuiFormControlLayout
+                                          compressed={true}
+                                          fullWidth={false}
+                                          icon={
+                                            Object {
+                                              "side": "right",
+                                              "type": "arrowDown",
+                                            }
+                                          }
+                                          inputId="random_html_id"
+                                          isLoading={false}
                                         >
                                           <div
-                                            className="euiFormControlLayout__childrenWrapper"
+                                            className="euiFormControlLayout euiFormControlLayout--compressed"
                                           >
-                                            <EuiValidatableControl>
-                                              <select
-                                                aria-describedby="random_html_id-help-0"
-                                                className="euiSelect"
-                                                disabled={false}
-                                                id="random_html_id"
-                                                onBlur={[Function]}
-                                                onChange={[Function]}
-                                                onFocus={[Function]}
-                                                onMouseUp={[Function]}
-                                                value="index"
-                                              />
-                                            </EuiValidatableControl>
-                                            <EuiFormControlLayoutIcons
-                                              compressed={false}
-                                              icon={
-                                                Object {
-                                                  "side": "right",
-                                                  "type": "arrowDown",
-                                                }
-                                              }
-                                              isLoading={false}
+                                            <div
+                                              className="euiFormControlLayout__childrenWrapper"
                                             >
-                                              <div
-                                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                              <EuiValidatableControl>
+                                                <select
+                                                  aria-describedby="random_html_id-help-0"
+                                                  className="euiSelect euiSelect--compressed"
+                                                  disabled={false}
+                                                  id="random_html_id"
+                                                  onBlur={[Function]}
+                                                  onChange={[Function]}
+                                                  onFocus={[Function]}
+                                                  onMouseUp={[Function]}
+                                                  value="index"
+                                                />
+                                              </EuiValidatableControl>
+                                              <EuiFormControlLayoutIcons
+                                                compressed={true}
+                                                icon={
+                                                  Object {
+                                                    "side": "right",
+                                                    "type": "arrowDown",
+                                                  }
+                                                }
+                                                isLoading={false}
                                               >
-                                                <EuiFormControlLayoutCustomIcon
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <div
+                                                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                                 >
-                                                  <span
-                                                    className="euiFormControlLayoutCustomIcon"
+                                                  <EuiFormControlLayoutCustomIcon
+                                                    size="s"
+                                                    type="arrowDown"
                                                   >
-                                                    <EuiIcon
-                                                      aria-hidden="true"
-                                                      className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
-                                                      type="arrowDown"
+                                                    <span
+                                                      className="euiFormControlLayoutCustomIcon"
                                                     >
-                                                      <EuiIconBeaker
-                                                        aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                        focusable="false"
-                                                        role="img"
-                                                        style={null}
+                                                      <EuiIcon
+                                                        aria-hidden="true"
+                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                        size="s"
+                                                        type="arrowDown"
                                                       >
-                                                        <svg
+                                                        <EuiIconBeaker
                                                           aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                           focusable="false"
-                                                          height={16}
                                                           role="img"
                                                           style={null}
-                                                          viewBox="0 0 16 16"
-                                                          width={16}
-                                                          xmlns="http://www.w3.org/2000/svg"
                                                         >
-                                                          <path
-                                                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                          />
-                                                        </svg>
-                                                      </EuiIconBeaker>
-                                                    </EuiIcon>
-                                                  </span>
-                                                </EuiFormControlLayoutCustomIcon>
-                                              </div>
-                                            </EuiFormControlLayoutIcons>
+                                                          <svg
+                                                            aria-hidden={true}
+                                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                            focusable="false"
+                                                            height={16}
+                                                            role="img"
+                                                            style={null}
+                                                            viewBox="0 0 16 16"
+                                                            width={16}
+                                                            xmlns="http://www.w3.org/2000/svg"
+                                                          >
+                                                            <path
+                                                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                            />
+                                                          </svg>
+                                                        </EuiIconBeaker>
+                                                      </EuiIcon>
+                                                    </span>
+                                                  </EuiFormControlLayoutCustomIcon>
+                                                </div>
+                                              </EuiFormControlLayoutIcons>
+                                            </div>
                                           </div>
-                                        </div>
-                                      </EuiFormControlLayout>
-                                    </EuiSelect>
+                                        </EuiFormControlLayout>
+                                      </EuiSelect>
+                                    </EuiCompressedSelect>
                                     <EuiFormHelpText
                                       className="euiFormRow__text"
                                       id="random_html_id-help-0"
@@ -396,10 +423,10 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                     </EuiFormHelpText>
                                   </div>
                                 </div>
-                              </EuiFormRow>
-                              <EuiFormRow
+                              </EuiCompressedFormRow>
+                              <EuiCompressedFormRow
                                 describedByIds={Array []}
-                                display="row"
+                                display="rowCompressed"
                                 fullWidth={false}
                                 hasChildLabel={true}
                                 hasEmptyLabelSpace={false}
@@ -408,7 +435,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                 labelType="label"
                               >
                                 <div
-                                  className="euiFormRow"
+                                  className="euiFormRow euiFormRow--compressed"
                                   id="random_html_id-row"
                                 >
                                   <div
@@ -431,10 +458,10 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                   <div
                                     className="euiFormRow__fieldWrapper"
                                   >
-                                    <EuiComboBox
+                                    <EuiCompressedComboBox
                                       aria-describedby="random_html_id-help-0"
                                       async={false}
-                                      compressed={false}
+                                      compressed={true}
                                       customOptionText="Select {searchValue} as your index"
                                       data-test-subj="data-source-name"
                                       fullWidth={false}
@@ -465,14 +492,14 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                         aria-describedby="random_html_id-help-0"
                                         aria-expanded={false}
                                         aria-haspopup="listbox"
-                                        className="euiComboBox"
+                                        className="euiComboBox euiComboBox--compressed"
                                         data-test-subj="data-source-name"
                                         onKeyDown={[Function]}
                                         role="combobox"
                                       >
                                         <EuiComboBoxInput
                                           autoSizeInputRef={[Function]}
-                                          compressed={false}
+                                          compressed={true}
                                           fullWidth={false}
                                           hasSelectedOptions={true}
                                           id="random_html_id"
@@ -513,7 +540,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                                 "onClick": [Function],
                                               }
                                             }
-                                            compressed={false}
+                                            compressed={true}
                                             fullWidth={false}
                                             icon={
                                               Object {
@@ -529,13 +556,13 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                             isLoading={true}
                                           >
                                             <div
-                                              className="euiFormControlLayout"
+                                              className="euiFormControlLayout euiFormControlLayout--compressed"
                                             >
                                               <div
                                                 className="euiFormControlLayout__childrenWrapper"
                                               >
                                                 <div
-                                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                                                   data-test-subj="comboBoxInput"
                                                   onClick={[Function]}
                                                   tabIndex={-1}
@@ -623,7 +650,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                                       "onClick": [Function],
                                                     }
                                                   }
-                                                  compressed={false}
+                                                  compressed={true}
                                                   icon={
                                                     Object {
                                                       "aria-label": "Open list of options",
@@ -643,7 +670,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                                     <EuiFormControlLayoutClearButton
                                                       data-test-subj="comboBoxClearButton"
                                                       onClick={[Function]}
-                                                      size="m"
+                                                      size="s"
                                                     >
                                                       <EuiI18n
                                                         default="Clear input"
@@ -651,7 +678,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                                       >
                                                         <button
                                                           aria-label="Clear input"
-                                                          className="euiFormControlLayoutClearButton"
+                                                          className="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                                                           data-test-subj="comboBoxClearButton"
                                                           onClick={[Function]}
                                                           type="button"
@@ -700,7 +727,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                                       disabled={false}
                                                       iconRef={[Function]}
                                                       onClick={[Function]}
-                                                      size="m"
+                                                      size="s"
                                                       type="arrowDown"
                                                     >
                                                       <button
@@ -714,19 +741,19 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                                         <EuiIcon
                                                           aria-hidden="true"
                                                           className="euiFormControlLayoutCustomIcon__icon"
-                                                          size="m"
+                                                          size="s"
                                                           type="arrowDown"
                                                         >
                                                           <EuiIconBeaker
                                                             aria-hidden={true}
-                                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                             focusable="false"
                                                             role="img"
                                                             style={null}
                                                           >
                                                             <svg
                                                               aria-hidden={true}
-                                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                               focusable="false"
                                                               height={16}
                                                               role="img"
@@ -750,7 +777,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                           </EuiFormControlLayout>
                                         </EuiComboBoxInput>
                                       </div>
-                                    </EuiComboBox>
+                                    </EuiCompressedComboBox>
                                     <EuiFormHelpText
                                       className="euiFormRow__text"
                                       id="random_html_id-help-0"
@@ -765,7 +792,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                     </EuiFormHelpText>
                                   </div>
                                 </div>
-                              </EuiFormRow>
+                              </EuiCompressedFormRow>
                             </IntegrationConnectionInputs>
                           </div>
                         </EuiForm>
@@ -796,7 +823,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButtonEmpty euiButtonEmpty--text"
+                              class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
                               type="button"
                             >
                               <span
@@ -828,7 +855,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                             class="euiFlexItem euiFlexItem--flexGrowZero"
                           >
                             <button
-                              class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                              class="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
                               data-test-subj="create-instance-button"
                               disabled=""
                               type="button"
@@ -930,71 +957,79 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                               <div
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
-                                <EuiButtonEmpty
+                                <EuiSmallButtonEmpty
                                   color="text"
                                   disabled={false}
                                   iconType="cross"
                                   onClick={[Function]}
                                 >
-                                  <button
-                                    className="euiButtonEmpty euiButtonEmpty--text"
+                                  <EuiButtonEmpty
+                                    color="text"
                                     disabled={false}
+                                    iconType="cross"
                                     onClick={[Function]}
-                                    type="button"
+                                    size="s"
                                   >
-                                    <EuiButtonContent
-                                      className="euiButtonEmpty__content"
-                                      iconSide="left"
-                                      iconSize="m"
-                                      iconType="cross"
-                                      textProps={
-                                        Object {
-                                          "className": "euiButtonEmpty__text",
-                                        }
-                                      }
+                                    <button
+                                      className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
+                                      disabled={false}
+                                      onClick={[Function]}
+                                      type="button"
                                     >
-                                      <span
-                                        className="euiButtonContent euiButtonEmpty__content"
+                                      <EuiButtonContent
+                                        className="euiButtonEmpty__content"
+                                        iconSide="left"
+                                        iconSize="m"
+                                        iconType="cross"
+                                        textProps={
+                                          Object {
+                                            "className": "euiButtonEmpty__text",
+                                          }
+                                        }
                                       >
-                                        <EuiIcon
-                                          className="euiButtonContent__icon"
-                                          color="inherit"
-                                          size="m"
-                                          type="cross"
+                                        <span
+                                          className="euiButtonContent euiButtonEmpty__content"
                                         >
-                                          <EuiIconBeaker
-                                            aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                            focusable="false"
-                                            role="img"
-                                            style={null}
+                                          <EuiIcon
+                                            className="euiButtonContent__icon"
+                                            color="inherit"
+                                            size="m"
+                                            type="cross"
                                           >
-                                            <svg
+                                            <EuiIconBeaker
                                               aria-hidden={true}
                                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                               focusable="false"
-                                              height={16}
                                               role="img"
                                               style={null}
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
                                             >
-                                              <path
-                                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                              />
-                                            </svg>
-                                          </EuiIconBeaker>
-                                        </EuiIcon>
-                                        <span
-                                          className="euiButtonEmpty__text"
-                                        >
-                                          Discard
+                                              <svg
+                                                aria-hidden={true}
+                                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                focusable="false"
+                                                height={16}
+                                                role="img"
+                                                style={null}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                                xmlns="http://www.w3.org/2000/svg"
+                                              >
+                                                <path
+                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                />
+                                              </svg>
+                                            </EuiIconBeaker>
+                                          </EuiIcon>
+                                          <span
+                                            className="euiButtonEmpty__text"
+                                          >
+                                            Discard
+                                          </span>
                                         </span>
-                                      </span>
-                                    </EuiButtonContent>
-                                  </button>
-                                </EuiButtonEmpty>
+                                      </EuiButtonContent>
+                                    </button>
+                                  </EuiButtonEmpty>
+                                </EuiSmallButtonEmpty>
                               </div>
                             </EuiFlexItem>
                             <EuiFlexItem
@@ -1003,7 +1038,7 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                               <div
                                 className="euiFlexItem euiFlexItem--flexGrowZero"
                               >
-                                <EuiButton
+                                <EuiSmallButton
                                   data-test-subj="create-instance-button"
                                   disabled={true}
                                   fill={true}
@@ -1012,85 +1047,97 @@ exports[`Integration Setup Page Renders integration setup page as expected 1`] =
                                   isLoading={false}
                                   onClick={[Function]}
                                 >
-                                  <EuiButtonDisplay
-                                    baseClassName="euiButton"
+                                  <EuiButton
                                     data-test-subj="create-instance-button"
                                     disabled={true}
-                                    element="button"
                                     fill={true}
                                     iconSide="right"
                                     iconType="arrowRight"
-                                    isDisabled={true}
                                     isLoading={false}
                                     onClick={[Function]}
-                                    type="button"
+                                    size="s"
                                   >
-                                    <button
-                                      className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                                    <EuiButtonDisplay
+                                      baseClassName="euiButton"
                                       data-test-subj="create-instance-button"
                                       disabled={true}
+                                      element="button"
+                                      fill={true}
+                                      iconSide="right"
+                                      iconType="arrowRight"
+                                      isDisabled={true}
+                                      isLoading={false}
                                       onClick={[Function]}
-                                      style={
-                                        Object {
-                                          "minWidth": undefined,
-                                        }
-                                      }
+                                      size="s"
                                       type="button"
                                     >
-                                      <EuiButtonContent
-                                        className="euiButton__content"
-                                        iconSide="right"
-                                        iconType="arrowRight"
-                                        isLoading={false}
-                                        textProps={
+                                      <button
+                                        className="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
+                                        data-test-subj="create-instance-button"
+                                        disabled={true}
+                                        onClick={[Function]}
+                                        style={
                                           Object {
-                                            "className": "euiButton__text",
+                                            "minWidth": undefined,
                                           }
                                         }
+                                        type="button"
                                       >
-                                        <span
-                                          className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                                        <EuiButtonContent
+                                          className="euiButton__content"
+                                          iconSide="right"
+                                          iconType="arrowRight"
+                                          isLoading={false}
+                                          textProps={
+                                            Object {
+                                              "className": "euiButton__text",
+                                            }
+                                          }
                                         >
-                                          <EuiIcon
-                                            className="euiButtonContent__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="arrowRight"
+                                          <span
+                                            className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                                           >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
+                                            <EuiIcon
+                                              className="euiButtonContent__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="arrowRight"
                                             >
-                                              <svg
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                          <span
-                                            className="euiButton__text"
-                                          >
-                                            Add Integration
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                            <span
+                                              className="euiButton__text"
+                                            >
+                                              Add Integration
+                                            </span>
                                           </span>
-                                        </span>
-                                      </EuiButtonContent>
-                                    </button>
-                                  </EuiButtonDisplay>
-                                </EuiButton>
+                                        </EuiButtonContent>
+                                      </button>
+                                    </EuiButtonDisplay>
+                                  </EuiButton>
+                                </EuiSmallButton>
                               </div>
                             </EuiFlexItem>
                           </div>
diff --git a/public/components/integrations/components/__tests__/__snapshots__/setup_integration_inputs.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/setup_integration_inputs.test.tsx.snap
index 6ea42152e..ba2464996 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/setup_integration_inputs.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/setup_integration_inputs.test.tsx.snap
@@ -116,9 +116,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form as expected 1`]
       Query Fields
     </h3>
   </EuiText>
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -132,7 +132,7 @@ exports[`Integration Setup Inputs Renders the S3 connector form as expected 1`]
         To set up the integration, we need to know some information about how to process your data.
       </p>
     </EuiText>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
   <EuiSpacer />
   <IntegrationQueryInputs
     config={
@@ -184,9 +184,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form as expected 1`]
       Integration Resources
     </h3>
   </EuiText>
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -200,7 +200,7 @@ exports[`Integration Setup Inputs Renders the S3 connector form as expected 1`]
         This integration offers different kinds of resources compatible with your data source. These can include dashboards, visualizations, indexes, and queries. Select at least one of the following options.
       </p>
     </EuiText>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
   <EuiSpacer />
   <IntegrationWorkflowsInputs
     config={
@@ -367,9 +367,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form without workflow
       Query Fields
     </h3>
   </EuiText>
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -383,7 +383,7 @@ exports[`Integration Setup Inputs Renders the S3 connector form without workflow
         To set up the integration, we need to know some information about how to process your data.
       </p>
     </EuiText>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
   <EuiSpacer />
   <IntegrationQueryInputs
     config={
@@ -435,9 +435,9 @@ exports[`Integration Setup Inputs Renders the S3 connector form without workflow
       Integration Resources
     </h3>
   </EuiText>
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -451,7 +451,7 @@ exports[`Integration Setup Inputs Renders the S3 connector form without workflow
         This integration offers different kinds of resources compatible with your data source. These can include dashboards, visualizations, indexes, and queries. Select at least one of the following options.
       </p>
     </EuiText>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
   <EuiSpacer />
   <IntegrationWorkflowsInputs
     config={
@@ -547,9 +547,9 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
   }
   updateConfig={[Function]}
 >
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -558,7 +558,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -581,7 +581,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiSelect
+        <EuiCompressedSelect
           aria-describedby="random_html_id-help-0"
           id="random_html_id"
           onBlur={[Function]}
@@ -597,101 +597,119 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
           }
           value="s3"
         >
-          <EuiFormControlLayout
-            compressed={false}
-            fullWidth={false}
-            icon={
-              Object {
-                "side": "right",
-                "type": "arrowDown",
-              }
+          <EuiSelect
+            aria-describedby="random_html_id-help-0"
+            compressed={true}
+            id="random_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            options={
+              Array [
+                Object {
+                  "text": "OpenSearch Index",
+                  "value": "index",
+                },
+              ]
             }
-            inputId="random_html_id"
-            isLoading={false}
+            value="s3"
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              compressed={true}
+              fullWidth={false}
+              icon={
+                Object {
+                  "side": "right",
+                  "type": "arrowDown",
+                }
+              }
+              inputId="random_html_id"
+              isLoading={false}
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
-                <EuiValidatableControl>
-                  <select
-                    aria-describedby="random_html_id-help-0"
-                    className="euiSelect"
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onMouseUp={[Function]}
-                    value="s3"
-                  >
-                    <option
-                      key="0"
-                      value="index"
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <EuiValidatableControl>
+                    <select
+                      aria-describedby="random_html_id-help-0"
+                      className="euiSelect euiSelect--compressed"
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onMouseUp={[Function]}
+                      value="s3"
                     >
-                      OpenSearch Index
-                    </option>
-                  </select>
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons
-                  compressed={false}
-                  icon={
-                    Object {
-                      "side": "right",
-                      "type": "arrowDown",
+                      <option
+                        key="0"
+                        value="index"
+                      >
+                        OpenSearch Index
+                      </option>
+                    </select>
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={true}
+                    icon={
+                      Object {
+                        "side": "right",
+                        "type": "arrowDown",
+                      }
                     }
-                  }
-                  isLoading={false}
-                >
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    isLoading={false}
                   >
-                    <EuiFormControlLayoutCustomIcon
-                      size="m"
-                      type="arrowDown"
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                     >
-                      <span
-                        className="euiFormControlLayoutCustomIcon"
+                      <EuiFormControlLayoutCustomIcon
+                        size="s"
+                        type="arrowDown"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiFormControlLayoutCustomIcon__icon"
-                          size="m"
-                          type="arrowDown"
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiFormControlLayoutCustomIcon__icon"
+                            size="s"
+                            type="arrowDown"
                           >
-                            <svg
+                            <EuiIconBeaker
                               aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </span>
-                    </EuiFormControlLayoutCustomIcon>
-                  </div>
-                </EuiFormControlLayoutIcons>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </span>
+                      </EuiFormControlLayoutCustomIcon>
+                    </div>
+                  </EuiFormControlLayoutIcons>
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiSelect>
+            </EuiFormControlLayout>
+          </EuiSelect>
+        </EuiCompressedSelect>
         <EuiFormHelpText
           className="euiFormRow__text"
           id="random_html_id-help-0"
@@ -706,10 +724,10 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
         </EuiFormHelpText>
       </div>
     </div>
-  </EuiFormRow>
-  <EuiFormRow
+  </EuiCompressedFormRow>
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -718,7 +736,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -741,10 +759,10 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           aria-describedby="random_html_id-help-0"
           async={false}
-          compressed={false}
+          compressed={true}
           customOptionText="Select {searchValue} as your data_source"
           data-test-subj="data-source-name"
           fullWidth={false}
@@ -774,14 +792,14 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
             aria-describedby="random_html_id-help-0"
             aria-expanded={false}
             aria-haspopup="listbox"
-            className="euiComboBox"
+            className="euiComboBox euiComboBox--compressed"
             data-test-subj="data-source-name"
             onKeyDown={[Function]}
             role="combobox"
           >
             <EuiComboBoxInput
               autoSizeInputRef={[Function]}
-              compressed={false}
+              compressed={true}
               fullWidth={false}
               hasSelectedOptions={true}
               id="random_html_id"
@@ -821,7 +839,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
                     "onClick": [Function],
                   }
                 }
-                compressed={false}
+                compressed={true}
                 fullWidth={false}
                 icon={
                   Object {
@@ -837,13 +855,13 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
                 isLoading={true}
               >
                 <div
-                  className="euiFormControlLayout"
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     className="euiFormControlLayout__childrenWrapper"
                   >
                     <div
-                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
+                      className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading euiComboBox__inputWrap-isClearable"
                       data-test-subj="comboBoxInput"
                       onClick={[Function]}
                       tabIndex={-1}
@@ -931,7 +949,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
                           "onClick": [Function],
                         }
                       }
-                      compressed={false}
+                      compressed={true}
                       icon={
                         Object {
                           "aria-label": "Open list of options",
@@ -951,7 +969,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
                         <EuiFormControlLayoutClearButton
                           data-test-subj="comboBoxClearButton"
                           onClick={[Function]}
-                          size="m"
+                          size="s"
                         >
                           <EuiI18n
                             default="Clear input"
@@ -959,7 +977,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
                           >
                             <button
                               aria-label="Clear input"
-                              className="euiFormControlLayoutClearButton"
+                              className="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                               data-test-subj="comboBoxClearButton"
                               onClick={[Function]}
                               type="button"
@@ -1007,7 +1025,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
                           data-test-subj="comboBoxToggleListButton"
                           iconRef={[Function]}
                           onClick={[Function]}
-                          size="m"
+                          size="s"
                           type="arrowDown"
                         >
                           <button
@@ -1020,19 +1038,19 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
                             <EuiIcon
                               aria-hidden="true"
                               className="euiFormControlLayoutCustomIcon__icon"
-                              size="m"
+                              size="s"
                               type="arrowDown"
                             >
                               <EuiIconBeaker
                                 aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                 focusable="false"
                                 role="img"
                                 style={null}
                               >
                                 <svg
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   height={16}
                                   role="img"
@@ -1056,7 +1074,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
               </EuiFormControlLayout>
             </EuiComboBoxInput>
           </div>
-        </EuiComboBox>
+        </EuiCompressedComboBox>
         <EuiFormHelpText
           className="euiFormRow__text"
           id="random_html_id-help-0"
@@ -1071,7 +1089,7 @@ exports[`Integration Setup Inputs Renders the connection inputs 1`] = `
         </EuiFormHelpText>
       </div>
     </div>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 </IntegrationConnectionInputs>
 `;
 
@@ -1121,9 +1139,9 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
   lockConnectionType={true}
   updateConfig={[Function]}
 >
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -1132,7 +1150,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -1155,7 +1173,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiSelect
+        <EuiCompressedSelect
           aria-describedby="random_html_id-help-0"
           disabled={true}
           id="random_html_id"
@@ -1172,103 +1190,122 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
           }
           value="s3"
         >
-          <EuiFormControlLayout
-            compressed={false}
-            fullWidth={false}
-            icon={
-              Object {
-                "side": "right",
-                "type": "arrowDown",
-              }
+          <EuiSelect
+            aria-describedby="random_html_id-help-0"
+            compressed={true}
+            disabled={true}
+            id="random_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            options={
+              Array [
+                Object {
+                  "text": "OpenSearch Index",
+                  "value": "index",
+                },
+              ]
             }
-            inputId="random_html_id"
-            isLoading={false}
+            value="s3"
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              compressed={true}
+              fullWidth={false}
+              icon={
+                Object {
+                  "side": "right",
+                  "type": "arrowDown",
+                }
+              }
+              inputId="random_html_id"
+              isLoading={false}
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
-                <EuiValidatableControl>
-                  <select
-                    aria-describedby="random_html_id-help-0"
-                    className="euiSelect"
-                    disabled={true}
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    onMouseUp={[Function]}
-                    value="s3"
-                  >
-                    <option
-                      key="0"
-                      value="index"
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <EuiValidatableControl>
+                    <select
+                      aria-describedby="random_html_id-help-0"
+                      className="euiSelect euiSelect--compressed"
+                      disabled={true}
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      onMouseUp={[Function]}
+                      value="s3"
                     >
-                      OpenSearch Index
-                    </option>
-                  </select>
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons
-                  compressed={false}
-                  icon={
-                    Object {
-                      "side": "right",
-                      "type": "arrowDown",
+                      <option
+                        key="0"
+                        value="index"
+                      >
+                        OpenSearch Index
+                      </option>
+                    </select>
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={true}
+                    icon={
+                      Object {
+                        "side": "right",
+                        "type": "arrowDown",
+                      }
                     }
-                  }
-                  isLoading={false}
-                >
-                  <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    isLoading={false}
                   >
-                    <EuiFormControlLayoutCustomIcon
-                      size="m"
-                      type="arrowDown"
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                     >
-                      <span
-                        className="euiFormControlLayoutCustomIcon"
+                      <EuiFormControlLayoutCustomIcon
+                        size="s"
+                        type="arrowDown"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiFormControlLayoutCustomIcon__icon"
-                          size="m"
-                          type="arrowDown"
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
                         >
-                          <EuiIconArrowDown
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiFormControlLayoutCustomIcon__icon"
+                            size="s"
+                            type="arrowDown"
                           >
-                            <svg
+                            <EuiIconArrowDown
                               aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                              className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                fillRule="non-zero"
-                              />
-                            </svg>
-                          </EuiIconArrowDown>
-                        </EuiIcon>
-                      </span>
-                    </EuiFormControlLayoutCustomIcon>
-                  </div>
-                </EuiFormControlLayoutIcons>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                  fillRule="non-zero"
+                                />
+                              </svg>
+                            </EuiIconArrowDown>
+                          </EuiIcon>
+                        </span>
+                      </EuiFormControlLayoutCustomIcon>
+                    </div>
+                  </EuiFormControlLayoutIcons>
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiSelect>
+            </EuiFormControlLayout>
+          </EuiSelect>
+        </EuiCompressedSelect>
         <EuiFormHelpText
           className="euiFormRow__text"
           id="random_html_id-help-0"
@@ -1283,10 +1320,10 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
         </EuiFormHelpText>
       </div>
     </div>
-  </EuiFormRow>
-  <EuiFormRow
+  </EuiCompressedFormRow>
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -1295,7 +1332,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -1318,10 +1355,10 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiComboBox
+        <EuiCompressedComboBox
           aria-describedby="random_html_id-help-0"
           async={false}
-          compressed={false}
+          compressed={true}
           customOptionText="Select {searchValue} as your data_source"
           data-test-subj="data-source-name"
           fullWidth={false}
@@ -1352,14 +1389,14 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
             aria-describedby="random_html_id-help-0"
             aria-expanded={false}
             aria-haspopup="listbox"
-            className="euiComboBox euiComboBox-isDisabled"
+            className="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
             data-test-subj="data-source-name"
             onKeyDown={[Function]}
             role="combobox"
           >
             <EuiComboBoxInput
               autoSizeInputRef={[Function]}
-              compressed={false}
+              compressed={true}
               fullWidth={false}
               hasSelectedOptions={true}
               id="random_html_id"
@@ -1393,7 +1430,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
               value="ss4o_logs-nginx-test"
             >
               <EuiFormControlLayout
-                compressed={false}
+                compressed={true}
                 fullWidth={false}
                 icon={
                   Object {
@@ -1409,13 +1446,13 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
                 isLoading={true}
               >
                 <div
-                  className="euiFormControlLayout"
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
                 >
                   <div
                     className="euiFormControlLayout__childrenWrapper"
                   >
                     <div
-                      className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading"
+                      className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isLoading"
                       data-test-subj="comboBoxInput"
                       onClick={[Function]}
                       tabIndex={-1}
@@ -1499,7 +1536,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
                       </AutosizeInput>
                     </div>
                     <EuiFormControlLayoutIcons
-                      compressed={false}
+                      compressed={true}
                       icon={
                         Object {
                           "aria-label": "Open list of options",
@@ -1529,7 +1566,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
                           disabled={true}
                           iconRef={[Function]}
                           onClick={[Function]}
-                          size="m"
+                          size="s"
                           type="arrowDown"
                         >
                           <button
@@ -1543,19 +1580,19 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
                             <EuiIcon
                               aria-hidden="true"
                               className="euiFormControlLayoutCustomIcon__icon"
-                              size="m"
+                              size="s"
                               type="arrowDown"
                             >
                               <EuiIconArrowDown
                                 aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                 focusable="false"
                                 role="img"
                                 style={null}
                               >
                                 <svg
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   height={16}
                                   role="img"
@@ -1580,7 +1617,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
               </EuiFormControlLayout>
             </EuiComboBoxInput>
           </div>
-        </EuiComboBox>
+        </EuiCompressedComboBox>
         <EuiFormHelpText
           className="euiFormRow__text"
           id="random_html_id-help-0"
@@ -1595,7 +1632,7 @@ exports[`Integration Setup Inputs Renders the connection inputs with a locked co
         </EuiFormHelpText>
       </div>
     </div>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 </IntegrationConnectionInputs>
 `;
 
@@ -1644,9 +1681,9 @@ exports[`Integration Setup Inputs Renders the details inputs 1`] = `
   }
   updateConfig={[Function]}
 >
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     error={
       Array [
         "Must be at least 1 character.",
@@ -1660,7 +1697,7 @@ exports[`Integration Setup Inputs Renders the details inputs 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -1686,7 +1723,7 @@ exports[`Integration Setup Inputs Renders the details inputs 1`] = `
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           data-test-subj="new-instance-name"
           id="random_html_id"
           isInvalid={false}
@@ -1696,39 +1733,54 @@ exports[`Integration Setup Inputs Renders the details inputs 1`] = `
           placeholder="sample Integration"
           value="Test Instance Name"
         >
-          <EuiFormControlLayout
-            fullWidth={false}
-            inputId="random_html_id"
+          <EuiFieldText
+            compressed={true}
+            data-test-subj="new-instance-name"
+            id="random_html_id"
+            isInvalid={false}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="sample Integration"
+            value="Test Instance Name"
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              compressed={true}
+              fullWidth={false}
+              inputId="random_html_id"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
-                <EuiValidatableControl
-                  isInvalid={false}
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
                 >
-                  <input
-                    className="euiFieldText"
-                    data-test-subj="new-instance-name"
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="sample Integration"
-                    type="text"
-                    value="Test Instance Name"
+                  <EuiValidatableControl
+                    isInvalid={false}
+                  >
+                    <input
+                      className="euiFieldText euiFieldText--compressed"
+                      data-test-subj="new-instance-name"
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder="sample Integration"
+                      type="text"
+                      value="Test Instance Name"
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={true}
                   />
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons />
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiFieldText>
+            </EuiFormControlLayout>
+          </EuiFieldText>
+        </EuiCompressedFieldText>
       </div>
     </div>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 </IntegrationDetailsInputs>
 `;
 
@@ -1890,9 +1942,9 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
   }
   updateConfig={[Function]}
 >
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     error={
       Array [
         "Must be at least 1 character.",
@@ -1907,7 +1959,7 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -1933,7 +1985,7 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           aria-describedby="random_html_id-help-0 random_html_id-error-0"
           id="random_html_id"
           isInvalid={true}
@@ -1943,36 +1995,51 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
           placeholder="sample"
           value=""
         >
-          <EuiFormControlLayout
-            fullWidth={false}
-            inputId="random_html_id"
+          <EuiFieldText
+            aria-describedby="random_html_id-help-0 random_html_id-error-0"
+            compressed={true}
+            id="random_html_id"
+            isInvalid={true}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="sample"
+            value=""
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              compressed={true}
+              fullWidth={false}
+              inputId="random_html_id"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
-                <EuiValidatableControl
-                  isInvalid={true}
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
                 >
-                  <input
-                    aria-describedby="random_html_id-help-0 random_html_id-error-0"
-                    className="euiFieldText"
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="sample"
-                    type="text"
-                    value=""
+                  <EuiValidatableControl
+                    isInvalid={true}
+                  >
+                    <input
+                      aria-describedby="random_html_id-help-0 random_html_id-error-0"
+                      className="euiFieldText euiFieldText--compressed"
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder="sample"
+                      type="text"
+                      value=""
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={true}
                   />
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons />
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiFieldText>
+            </EuiFormControlLayout>
+          </EuiFieldText>
+        </EuiCompressedFieldText>
         <EuiFormErrorText
           className="euiFormRow__text"
           id="random_html_id-error-0"
@@ -2000,10 +2067,10 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
         </EuiFormHelpText>
       </div>
     </div>
-  </EuiFormRow>
-  <EuiFormRow
+  </EuiCompressedFormRow>
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     error={
       Array [
         "Must be a URL starting with 's3://'.",
@@ -2017,7 +2084,7 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -2043,7 +2110,7 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           id="random_html_id"
           isInvalid={false}
           onBlur={[Function]}
@@ -2052,41 +2119,55 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
           placeholder="s3://"
           value=""
         >
-          <EuiFormControlLayout
-            fullWidth={false}
-            inputId="random_html_id"
+          <EuiFieldText
+            compressed={true}
+            id="random_html_id"
+            isInvalid={false}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="s3://"
+            value=""
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              compressed={true}
+              fullWidth={false}
+              inputId="random_html_id"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
-                <EuiValidatableControl
-                  isInvalid={false}
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
                 >
-                  <input
-                    className="euiFieldText"
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="s3://"
-                    type="text"
-                    value=""
+                  <EuiValidatableControl
+                    isInvalid={false}
+                  >
+                    <input
+                      className="euiFieldText euiFieldText--compressed"
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder="s3://"
+                      type="text"
+                      value=""
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={true}
                   />
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons />
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiFieldText>
+            </EuiFormControlLayout>
+          </EuiFieldText>
+        </EuiCompressedFieldText>
       </div>
     </div>
-  </EuiFormRow>
-  <EuiFormRow
+  </EuiCompressedFormRow>
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     error={
       Array [
         "Must be a URL starting with 's3://'.",
@@ -2101,7 +2182,7 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -2127,7 +2208,7 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           aria-describedby="random_html_id-help-0"
           id="random_html_id"
           isInvalid={false}
@@ -2137,36 +2218,51 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
           placeholder="s3://"
           value=""
         >
-          <EuiFormControlLayout
-            fullWidth={false}
-            inputId="random_html_id"
+          <EuiFieldText
+            aria-describedby="random_html_id-help-0"
+            compressed={true}
+            id="random_html_id"
+            isInvalid={false}
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="s3://"
+            value=""
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              compressed={true}
+              fullWidth={false}
+              inputId="random_html_id"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
-                <EuiValidatableControl
-                  isInvalid={false}
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
                 >
-                  <input
-                    aria-describedby="random_html_id-help-0"
-                    className="euiFieldText"
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="s3://"
-                    type="text"
-                    value=""
+                  <EuiValidatableControl
+                    isInvalid={false}
+                  >
+                    <input
+                      aria-describedby="random_html_id-help-0"
+                      className="euiFieldText euiFieldText--compressed"
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder="s3://"
+                      type="text"
+                      value=""
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={true}
                   />
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons />
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiFieldText>
+            </EuiFormControlLayout>
+          </EuiFieldText>
+        </EuiCompressedFieldText>
         <EuiFormHelpText
           className="euiFormRow__text"
           id="random_html_id-help-0"
@@ -2181,7 +2277,7 @@ exports[`Integration Setup Inputs Renders the query inputs 1`] = `
         </EuiFormHelpText>
       </div>
     </div>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 </IntegrationQueryInputs>
 `;
 
@@ -2230,9 +2326,9 @@ exports[`Integration Setup Inputs Renders the workflows inputs 1`] = `
   }
   updateConfig={[Function]}
 >
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     error={
       Array [
         "Must select at least one workflow.",
@@ -2245,7 +2341,7 @@ exports[`Integration Setup Inputs Renders the workflows inputs 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -2413,7 +2509,7 @@ exports[`Integration Setup Inputs Renders the workflows inputs 1`] = `
         </SetupWorkflowSelector>
       </div>
     </div>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 </IntegrationWorkflowsInputs>
 `;
 
@@ -2471,9 +2567,9 @@ exports[`Integration Setup Inputs Renders the workflows inputs with conditional
   }
   updateConfig={[Function]}
 >
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     error={
       Array [
         "Must select at least one workflow.",
@@ -2486,7 +2582,7 @@ exports[`Integration Setup Inputs Renders the workflows inputs with conditional
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -2667,6 +2763,6 @@ exports[`Integration Setup Inputs Renders the workflows inputs with conditional
         </SetupWorkflowSelector>
       </div>
     </div>
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 </IntegrationWorkflowsInputs>
 `;
diff --git a/public/components/integrations/components/__tests__/__snapshots__/upload_flyout.test.tsx.snap b/public/components/integrations/components/__tests__/__snapshots__/upload_flyout.test.tsx.snap
index 6fb54a8fe..a784634fa 100644
--- a/public/components/integrations/components/__tests__/__snapshots__/upload_flyout.test.tsx.snap
+++ b/public/components/integrations/components/__tests__/__snapshots__/upload_flyout.test.tsx.snap
@@ -22,22 +22,22 @@ exports[`Integration Upload Flyout Renders integration upload flyout as expected
       <EuiFlexItem
         grow={false}
       >
-        <EuiButton
+        <EuiSmallButton
           onClick={[Function]}
         >
           Cancel
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
       <EuiFlexItem
         grow={false}
       >
-        <EuiButton
+        <EuiSmallButton
           disabled={true}
           fill={true}
           onClick={[Function]}
         >
           Upload
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiFlyoutFooter>
@@ -46,9 +46,9 @@ exports[`Integration Upload Flyout Renders integration upload flyout as expected
 
 exports[`Integration Upload Flyout Renders the clean integration picker as expected 1`] = `
 <EuiForm>
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     error={
       Array [
         "Must be an ndjson bundle of integration templates",
@@ -61,8 +61,8 @@ exports[`Integration Upload Flyout Renders the clean integration picker as expec
     label="Select file"
     labelType="label"
   >
-    <EuiFilePicker
-      compressed={false}
+    <EuiCompressedFilePicker
+      compressed={true}
       display="large"
       id="integrationBundlePicker"
       initialPromptText="Select or drag and drop integration bundles"
@@ -70,6 +70,6 @@ exports[`Integration Upload Flyout Renders the clean integration picker as expec
       onBlur={[Function]}
       onChange={[Function]}
     />
-  </EuiFormRow>
+  </EuiCompressedFormRow>
 </EuiForm>
 `;
diff --git a/public/components/integrations/components/add_integration_flyout.tsx b/public/components/integrations/components/add_integration_flyout.tsx
index a06d4bdda..1880e1be7 100644
--- a/public/components/integrations/components/add_integration_flyout.tsx
+++ b/public/components/integrations/components/add_integration_flyout.tsx
@@ -5,8 +5,8 @@
 
 import _ from 'lodash';
 import {
-  EuiButton,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -16,7 +16,7 @@ import {
   EuiForm,
   EuiText,
   EuiLink,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiTitle,
 } from '@elastic/eui';
 import React, { useState } from 'react';
@@ -55,7 +55,7 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
   const formContent = () => {
     return (
       <div>
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Index name or wildcard pattern"
           helpText="Input an index name or wildcard pattern that your integration will query."
           isInvalid={isDataSourceValid === false}
@@ -72,14 +72,14 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
             </EuiText>
           }
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="data-source-name"
             name="first"
             onChange={(e) => onDatasourceChange(e)}
             value={dataSource}
             isInvalid={isDataSourceValid === false}
             append={
-              <EuiButton
+              <EuiSmallButton
                 data-test-subj="validateIndex"
                 onClick={async () => {
                   const validationResult = await doExistingDataSourceValidation(
@@ -96,18 +96,18 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
                 disabled={dataSource.length === 0}
               >
                 Validate
-              </EuiButton>
+              </EuiSmallButton>
             }
           />
-        </EuiFormRow>
-        <EuiFormRow label="Name" helpText="This will be used to label the newly added integration.">
-          <EuiFieldText
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow label="Name" helpText="This will be used to label the newly added integration.">
+          <EuiCompressedFieldText
             data-test-subj="new-instance-name"
             name="first"
             onChange={(e) => onNameChange(e)}
             value={name}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </div>
     );
   };
@@ -131,12 +131,12 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
       <EuiFlyoutFooter>
         <EuiFlexGroup>
           <EuiFlexItem>
-            <EuiButton onClick={() => onClose()} color="danger">
+            <EuiSmallButton onClick={() => onClose()} color="danger">
               Cancel
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiButton
+            <EuiSmallButton
               onClick={() => {
                 onCreate(name, dataSource);
                 onClose();
@@ -153,7 +153,7 @@ export function AddIntegrationFlyout(props: IntegrationFlyoutProps) {
               data-click-metric-element="integrations.create_from_setup"
             >
               Add Integration
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>
diff --git a/public/components/integrations/components/added_integration.tsx b/public/components/integrations/components/added_integration.tsx
index 68045851e..a3ac50086 100644
--- a/public/components/integrations/components/added_integration.tsx
+++ b/public/components/integrations/components/added_integration.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHealth,
@@ -135,7 +135,7 @@ export function AddedIntegration(props: AddedIntegrationProps) {
               </EuiFlexGroup>
 
               <EuiFlexItem grow={false}>
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   iconType="trash"
                   aria-label="Delete"
                   color="danger"
diff --git a/public/components/integrations/components/available_integration_card_view.tsx b/public/components/integrations/components/available_integration_card_view.tsx
index 56d7a7ef6..a4ee7aed7 100644
--- a/public/components/integrations/components/available_integration_card_view.tsx
+++ b/public/components/integrations/components/available_integration_card_view.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiButtonGroup,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -91,7 +91,7 @@ export function AvailableIntegrationsCardView(props: AvailableIntegrationsCardVi
     <EuiPanel>
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
-          <EuiFieldSearch
+          <EuiCompressedFieldSearch
             fullWidth
             isClearable={false}
             placeholder="Search..."
diff --git a/public/components/integrations/components/available_integration_overview_page.tsx b/public/components/integrations/components/available_integration_overview_page.tsx
index 8a209fa7f..f65d364f5 100644
--- a/public/components/integrations/components/available_integration_overview_page.tsx
+++ b/public/components/integrations/components/available_integration_overview_page.tsx
@@ -6,7 +6,7 @@
 
 import {
   EuiFieldSearch,
-  EuiFilterButton,
+  EuiSmallFilterButton,
   EuiFilterGroup,
   EuiFilterSelectItem,
   EuiPage,
@@ -72,7 +72,7 @@ export const CategoryFilters = ({ items, setItems }: CategoryFiltersProps) => {
   };
 
   const button = (
-    <EuiFilterButton
+    <EuiSmallFilterButton
       iconType="arrowDown"
       onClick={onButtonClick}
       isSelected={isPopoverOpen}
@@ -81,7 +81,7 @@ export const CategoryFilters = ({ items, setItems }: CategoryFiltersProps) => {
       numActiveFilters={items.filter((item) => item.checked).length}
     >
       Categories
-    </EuiFilterButton>
+    </EuiSmallFilterButton>
   );
 
   return (
diff --git a/public/components/integrations/components/integration_header.tsx b/public/components/integrations/components/integration_header.tsx
index 094c11ace..fece51c28 100644
--- a/public/components/integrations/components/integration_header.tsx
+++ b/public/components/integrations/components/integration_header.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiLink,
@@ -48,9 +48,9 @@ export const IntegrationHeaderActions = ({ onShowUpload }: { onShowUpload: () =>
     <EuiContextMenuItem href={OPENSEARCH_CATALOG_URL}>View Catalog</EuiContextMenuItem>,
   ];
   const button = (
-    <EuiButton iconType="arrowDown" fill={true} onClick={onButtonClick}>
+    <EuiSmallButton iconType="arrowDown" fill={true} onClick={onButtonClick}>
       Catalog
-    </EuiButton>
+    </EuiSmallButton>
   );
   return (
     <EuiPopover
diff --git a/public/components/integrations/components/setup_integration.tsx b/public/components/integrations/components/setup_integration.tsx
index 6de27e36d..4090c2ded 100644
--- a/public/components/integrations/components/setup_integration.tsx
+++ b/public/components/integrations/components/setup_integration.tsx
@@ -5,8 +5,8 @@
 
 import {
   EuiBottomBar,
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -261,7 +261,7 @@ export function SetupBottomBar({
   return (
     <EuiFlexGroup justifyContent="flexEnd">
       <EuiFlexItem grow={false}>
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           color="text"
           iconType="cross"
           onClick={() => {
@@ -279,10 +279,10 @@ export function SetupBottomBar({
           disabled={loading}
         >
           Discard
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton
+        <EuiSmallButton
           fill
           iconType="arrowRight"
           iconSide="right"
@@ -314,7 +314,7 @@ export function SetupBottomBar({
           data-test-subj="create-instance-button"
         >
           Add Integration
-        </EuiButton>
+        </EuiSmallButton>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/public/components/integrations/components/setup_integration_inputs.tsx b/public/components/integrations/components/setup_integration_inputs.tsx
index 333d636eb..c220dd5e9 100644
--- a/public/components/integrations/components/setup_integration_inputs.tsx
+++ b/public/components/integrations/components/setup_integration_inputs.tsx
@@ -6,11 +6,11 @@
 import {
   EuiCallOut,
   EuiCheckableCard,
-  EuiComboBox,
-  EuiFieldText,
+  EuiCompressedComboBox,
+  EuiCompressedFieldText,
   EuiForm,
-  EuiFormRow,
-  EuiSelect,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -147,19 +147,19 @@ export function IntegrationDetailsInputs({
   integration: IntegrationConfig;
 }) {
   return (
-    <EuiFormRow
+    <EuiCompressedFormRow
       label="Display Name"
       error={['Must be at least 1 character.']}
       isInvalid={config.displayName.length === 0}
     >
-      <EuiFieldText
+      <EuiCompressedFieldText
         value={config.displayName}
         onChange={(event) => updateConfig({ displayName: event.target.value })}
         placeholder={`${integration.name} Integration`}
         isInvalid={config.displayName.length === 0}
         data-test-subj="new-instance-name"
       />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 }
 
@@ -208,7 +208,7 @@ export function IntegrationConnectionInputs({
     <>
       {dataSourceEnabled && (
         <>
-          <EuiFormRow
+          <EuiCompressedFormRow
             label="Data Source"
             helpText="Select the type of remote data source to query from."
           >
@@ -219,15 +219,15 @@ export function IntegrationConnectionInputs({
               fullWidth={false}
               removePrepend={true}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer />
         </>
       )}
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Connection Type"
         helpText="Select the type of connection to use for queries."
       >
-        <EuiSelect
+        <EuiCompressedSelect
           options={integrationConnectionSelectorItems.filter((item) => {
             if (item.value === 's3') {
               return integration.assets.some((asset) => asset.type === 'query');
@@ -243,9 +243,9 @@ export function IntegrationConnectionInputs({
           }
           disabled={lockConnectionType}
         />
-      </EuiFormRow>
-      <EuiFormRow label={connectionType.title} helpText={connectionType.help}>
-        <EuiComboBox
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow label={connectionType.title} helpText={connectionType.help}>
+        <EuiCompressedComboBox
           options={dataSourceSuggestions}
           isLoading={isSuggestionsLoading}
           onChange={(selected) => {
@@ -270,7 +270,7 @@ export function IntegrationConnectionInputs({
           data-test-subj="data-source-name"
           isDisabled={lockConnectionType}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 }
@@ -289,13 +289,13 @@ export function IntegrationQueryInputs({
 
   return (
     <>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Spark Table Name"
         helpText="Select a table name to associate with your data."
         error={['Must be at least 1 character.']}
         isInvalid={config.connectionTableName.length === 0}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           placeholder={integration.name}
           value={config.connectionTableName}
           onChange={(evt) => {
@@ -303,13 +303,13 @@ export function IntegrationQueryInputs({
           }}
           isInvalid={config.connectionTableName.length === 0}
         />
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label="S3 Data Location"
         isInvalid={isBucketBlurred && !config.connectionLocation.startsWith('s3://')}
         error={["Must be a URL starting with 's3://'."]}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           value={config.connectionLocation}
           onChange={(event) => updateConfig({ connectionLocation: event.target.value })}
           placeholder="s3://"
@@ -318,8 +318,8 @@ export function IntegrationQueryInputs({
             setIsBucketBlurred(true);
           }}
         />
-      </EuiFormRow>
-      <EuiFormRow
+      </EuiCompressedFormRow>
+      <EuiCompressedFormRow
         label="S3 Checkpoint Location"
         helpText={
           'The Checkpoint location must be a unique directory and not the same as the Data ' +
@@ -328,7 +328,7 @@ export function IntegrationQueryInputs({
         isInvalid={isCheckpointBlurred && !config.checkpointLocation.startsWith('s3://')}
         error={["Must be a URL starting with 's3://'."]}
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           value={config.checkpointLocation}
           onChange={(event) => updateConfig({ checkpointLocation: event.target.value })}
           placeholder="s3://"
@@ -337,7 +337,7 @@ export function IntegrationQueryInputs({
             setIsCheckpointBlurred(true);
           }}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 }
@@ -375,7 +375,7 @@ export function IntegrationWorkflowsInputs({
   }, [useWorkflows]);
 
   return (
-    <EuiFormRow
+    <EuiCompressedFormRow
       isInvalid={![...useWorkflows.values()].includes(true)}
       error={['Must select at least one workflow.']}
     >
@@ -385,7 +385,7 @@ export function IntegrationWorkflowsInputs({
         useWorkflows={useWorkflows}
         toggleWorkflow={toggleWorkflow}
       />
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   );
 }
 
@@ -444,14 +444,14 @@ export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
           <EuiText>
             <h3>Query Fields</h3>
           </EuiText>
-          <EuiFormRow>
+          <EuiCompressedFormRow>
             <EuiText grow={false} size="xs">
               <p>
                 To set up the integration, we need to know some information about how to process
                 your data.
               </p>
             </EuiText>
-          </EuiFormRow>
+          </EuiCompressedFormRow>
           <EuiSpacer />
           <IntegrationQueryInputs
             config={config}
@@ -464,7 +464,7 @@ export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
               <EuiText>
                 <h3>Integration Resources</h3>
               </EuiText>
-              <EuiFormRow>
+              <EuiCompressedFormRow>
                 <EuiText grow={false} size="xs">
                   <p>
                     This integration offers different kinds of resources compatible with your data
@@ -472,7 +472,7 @@ export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
                     Select at least one of the following options.
                   </p>
                 </EuiText>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
               <EuiSpacer />
               <IntegrationWorkflowsInputs
                 updateConfig={updateConfig}
diff --git a/public/components/integrations/components/upload_flyout.tsx b/public/components/integrations/components/upload_flyout.tsx
index beb5a4d59..815dc3b2e 100644
--- a/public/components/integrations/components/upload_flyout.tsx
+++ b/public/components/integrations/components/upload_flyout.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiFilePicker,
+  EuiSmallButton,
+  EuiCompressedFilePicker,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -13,7 +13,7 @@ import {
   EuiFlyoutFooter,
   EuiFlyoutHeader,
   EuiForm,
-  EuiFormRow,
+  EuiCompressedFormRow,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 import { useToast } from '../../../../public/components/common/toast';
@@ -112,19 +112,19 @@ export const IntegrationUploadPicker = ({
 
   return (
     <EuiForm>
-      <EuiFormRow
+      <EuiCompressedFormRow
         label="Select file"
         isInvalid={checkCompleted && isInvalid}
         error={['Must be an ndjson bundle of integration templates']}
       >
-        <EuiFilePicker
+        <EuiCompressedFilePicker
           id="integrationBundlePicker"
           initialPromptText="Select or drag and drop integration bundles"
           onChange={handleFileChange}
           isInvalid={checkCompleted && isInvalid}
           onBlur={() => setBlurred(true)}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </EuiForm>
   );
 };
@@ -147,10 +147,10 @@ export const IntegrationUploadFlyout = ({ onClose }: { onClose: () => void }) =>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={onClose}>Cancel</EuiButton>
+            <EuiSmallButton onClick={onClose}>Cancel</EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               fill
               disabled={isInvalid}
               onClick={async () => {
@@ -164,7 +164,7 @@ export const IntegrationUploadFlyout = ({ onClose }: { onClose: () => void }) =>
               }}
             >
               Upload
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>
diff --git a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index 87363c013..3cb90caa7 100644
--- a/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/metrics/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -165,7 +165,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                     Metrics source
                   </h5>
                 </EuiTitle>
-                <EuiComboBox
+                <EuiCompressedComboBox
                   async={false}
                   compressed={true}
                   data-test-subj="metricsDataSourcePicker"
@@ -390,7 +390,7 @@ exports[`Side Bar Component renders Side Bar Component 1`] = `
                       </EuiFormControlLayout>
                     </EuiComboBoxInput>
                   </div>
-                </EuiComboBox>
+                </EuiCompressedComboBox>
               </div>
             </DataSourcePicker>
             <EuiSpacer
diff --git a/public/components/metrics/sidebar/data_source_picker.tsx b/public/components/metrics/sidebar/data_source_picker.tsx
index 6dcd2747e..1c5536204 100644
--- a/public/components/metrics/sidebar/data_source_picker.tsx
+++ b/public/components/metrics/sidebar/data_source_picker.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiTitle } from '@elastic/eui';
+import { EuiCompressedComboBox, EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { DATASOURCE_OPTIONS } from '../../../../common/constants/metrics';
 import { OptionType } from '../../../../common/types/metrics';
@@ -26,8 +26,7 @@ export const DataSourcePicker = ({
       <EuiTitle size="xxxs">
         <h5>Metrics source</h5>
       </EuiTitle>
-      <EuiComboBox
-        compressed
+      <EuiCompressedComboBox
         placeholder="Select a metric source"
         singleSelection={{ asPlainText: true }}
         options={DATASOURCE_OPTIONS}
diff --git a/public/components/metrics/sidebar/index_picker.tsx b/public/components/metrics/sidebar/index_picker.tsx
index 86d4c1afe..2caa9a171 100644
--- a/public/components/metrics/sidebar/index_picker.tsx
+++ b/public/components/metrics/sidebar/index_picker.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiComboBox, EuiTitle } from '@elastic/eui';
+import { EuiCompressedComboBox, EuiTitle } from '@elastic/eui';
 import React, { useState } from 'react';
 
 export const IndexPicker = (props: { otelIndices: unknown; setSelectedOTIndex: unknown }) => {
@@ -23,7 +23,7 @@ export const IndexPicker = (props: { otelIndices: unknown; setSelectedOTIndex: u
       <EuiTitle size="xxxs">
         <h5>Otel Index</h5>
       </EuiTitle>
-      <EuiComboBox
+      <EuiCompressedComboBox
         placeholder="Select an index"
         singleSelection={{ asPlainText: true }}
         options={otelIndex}
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
index 3a5bc32ea..c187070fc 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/metrics_export_panel.test.tsx.snap
@@ -110,9 +110,9 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                   <div
                     className="euiFlexItem"
                   >
-                    <EuiFormRow
+                    <EuiCompressedFormRow
                       describedByIds={Array []}
-                      display="row"
+                      display="rowCompressed"
                       fullWidth={false}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
@@ -120,7 +120,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -143,7 +143,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                         <div
                           className="euiFormRow__fieldWrapper"
                         >
-                          <EuiFieldText
+                          <EuiCompressedFieldText
                             data-test-subj="metrics__querySaveName"
                             id="random_html_id"
                             key="metric-name-input-id-0"
@@ -152,36 +152,49 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                             onFocus={[Function]}
                             value="my_prometheus.go_memstats_alloc_bytes"
                           >
-                            <EuiFormControlLayout
-                              fullWidth={false}
-                              inputId="random_html_id"
+                            <EuiFieldText
+                              compressed={true}
+                              data-test-subj="metrics__querySaveName"
+                              id="random_html_id"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              value="my_prometheus.go_memstats_alloc_bytes"
                             >
-                              <div
-                                className="euiFormControlLayout"
+                              <EuiFormControlLayout
+                                compressed={true}
+                                fullWidth={false}
+                                inputId="random_html_id"
                               >
                                 <div
-                                  className="euiFormControlLayout__childrenWrapper"
+                                  className="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
-                                  <EuiValidatableControl>
-                                    <input
-                                      className="euiFieldText"
-                                      data-test-subj="metrics__querySaveName"
-                                      id="random_html_id"
-                                      onBlur={[Function]}
-                                      onChange={[Function]}
-                                      onFocus={[Function]}
-                                      type="text"
-                                      value="my_prometheus.go_memstats_alloc_bytes"
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <input
+                                        className="euiFieldText euiFieldText--compressed"
+                                        data-test-subj="metrics__querySaveName"
+                                        id="random_html_id"
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onFocus={[Function]}
+                                        type="text"
+                                        value="my_prometheus.go_memstats_alloc_bytes"
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={true}
                                     />
-                                  </EuiValidatableControl>
-                                  <EuiFormControlLayoutIcons />
+                                  </div>
                                 </div>
-                              </div>
-                            </EuiFormControlLayout>
-                          </EuiFieldText>
+                              </EuiFormControlLayout>
+                            </EuiFieldText>
+                          </EuiCompressedFieldText>
                         </div>
                       </div>
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </div>
                 </EuiFlexItem>
               </div>
@@ -203,9 +216,9 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                   <div
                     className="euiFlexItem"
                   >
-                    <EuiFormRow
+                    <EuiCompressedFormRow
                       describedByIds={Array []}
-                      display="row"
+                      display="rowCompressed"
                       fullWidth={false}
                       hasChildLabel={true}
                       hasEmptyLabelSpace={false}
@@ -213,7 +226,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                       labelType="label"
                     >
                       <div
-                        className="euiFormRow"
+                        className="euiFormRow euiFormRow--compressed"
                         id="random_html_id-row"
                       >
                         <div
@@ -236,7 +249,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                         <div
                           className="euiFormRow__fieldWrapper"
                         >
-                          <EuiFieldText
+                          <EuiCompressedFieldText
                             data-test-subj="metrics__querySaveName"
                             id="random_html_id"
                             key="metric-name-input-id-1"
@@ -245,36 +258,49 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                             onFocus={[Function]}
                             value="my_prometheus.go_memstats_alloc_bytes_total"
                           >
-                            <EuiFormControlLayout
-                              fullWidth={false}
-                              inputId="random_html_id"
+                            <EuiFieldText
+                              compressed={true}
+                              data-test-subj="metrics__querySaveName"
+                              id="random_html_id"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              value="my_prometheus.go_memstats_alloc_bytes_total"
                             >
-                              <div
-                                className="euiFormControlLayout"
+                              <EuiFormControlLayout
+                                compressed={true}
+                                fullWidth={false}
+                                inputId="random_html_id"
                               >
                                 <div
-                                  className="euiFormControlLayout__childrenWrapper"
+                                  className="euiFormControlLayout euiFormControlLayout--compressed"
                                 >
-                                  <EuiValidatableControl>
-                                    <input
-                                      className="euiFieldText"
-                                      data-test-subj="metrics__querySaveName"
-                                      id="random_html_id"
-                                      onBlur={[Function]}
-                                      onChange={[Function]}
-                                      onFocus={[Function]}
-                                      type="text"
-                                      value="my_prometheus.go_memstats_alloc_bytes_total"
+                                  <div
+                                    className="euiFormControlLayout__childrenWrapper"
+                                  >
+                                    <EuiValidatableControl>
+                                      <input
+                                        className="euiFieldText euiFieldText--compressed"
+                                        data-test-subj="metrics__querySaveName"
+                                        id="random_html_id"
+                                        onBlur={[Function]}
+                                        onChange={[Function]}
+                                        onFocus={[Function]}
+                                        type="text"
+                                        value="my_prometheus.go_memstats_alloc_bytes_total"
+                                      />
+                                    </EuiValidatableControl>
+                                    <EuiFormControlLayoutIcons
+                                      compressed={true}
                                     />
-                                  </EuiValidatableControl>
-                                  <EuiFormControlLayoutIcons />
+                                  </div>
                                 </div>
-                              </div>
-                            </EuiFormControlLayout>
-                          </EuiFieldText>
+                              </EuiFormControlLayout>
+                            </EuiFieldText>
+                          </EuiCompressedFieldText>
                         </div>
                       </div>
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </div>
                 </EuiFlexItem>
               </div>
@@ -323,9 +349,9 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                 }
               }
             >
-              <EuiFormRow
+              <EuiCompressedFormRow
                 describedByIds={Array []}
-                display="row"
+                display="rowCompressed"
                 fullWidth={false}
                 hasChildLabel={true}
                 hasEmptyLabelSpace={false}
@@ -333,7 +359,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                 labelType="label"
               >
                 <div
-                  className="euiFormRow"
+                  className="euiFormRow euiFormRow--compressed"
                   id="random_html_id-row"
                 >
                   <div
@@ -356,9 +382,9 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                   <div
                     className="euiFormRow__fieldWrapper"
                   >
-                    <EuiComboBox
+                    <EuiCompressedComboBox
                       async={false}
-                      compressed={false}
+                      compressed={true}
                       data-test-subj="eventExplorer__querySaveComboBox"
                       fullWidth={false}
                       id="random_html_id"
@@ -400,14 +426,14 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                       <div
                         aria-expanded={false}
                         aria-haspopup="listbox"
-                        className="euiComboBox"
+                        className="euiComboBox euiComboBox--compressed"
                         data-test-subj="eventExplorer__querySaveComboBox"
                         onKeyDown={[Function]}
                         role="combobox"
                       >
                         <EuiComboBoxInput
                           autoSizeInputRef={[Function]}
-                          compressed={false}
+                          compressed={true}
                           fullWidth={false}
                           hasSelectedOptions={false}
                           id="random_html_id"
@@ -431,7 +457,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                           value=""
                         >
                           <EuiFormControlLayout
-                            compressed={false}
+                            compressed={true}
                             fullWidth={false}
                             icon={
                               Object {
@@ -446,13 +472,13 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                             }
                           >
                             <div
-                              className="euiFormControlLayout"
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
                                 className="euiFormControlLayout__childrenWrapper"
                               >
                                 <div
-                                  className="euiComboBox__inputWrap euiComboBox__inputWrap-isClearable"
+                                  className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap-isClearable"
                                   data-test-subj="comboBoxInput"
                                   onClick={[Function]}
                                   tabIndex={-1}
@@ -523,7 +549,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                                   </AutosizeInput>
                                 </div>
                                 <EuiFormControlLayoutIcons
-                                  compressed={false}
+                                  compressed={true}
                                   icon={
                                     Object {
                                       "aria-label": "Open list of options",
@@ -544,7 +570,7 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                                       data-test-subj="comboBoxToggleListButton"
                                       iconRef={[Function]}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                       type="arrowDown"
                                     >
                                       <button
@@ -557,19 +583,19 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                                         <EuiIcon
                                           aria-hidden="true"
                                           className="euiFormControlLayoutCustomIcon__icon"
-                                          size="m"
+                                          size="s"
                                           type="arrowDown"
                                         >
                                           <EuiIconBeaker
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             role="img"
                                             style={null}
                                           >
                                             <svg
                                               aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                               focusable="false"
                                               height={16}
                                               role="img"
@@ -593,10 +619,10 @@ exports[`Export Metrics Panel Component renders Export Metrics Panel Component 1
                           </EuiFormControlLayout>
                         </EuiComboBoxInput>
                       </div>
-                    </EuiComboBox>
+                    </EuiCompressedComboBox>
                   </div>
                 </div>
-              </EuiFormRow>
+              </EuiCompressedFormRow>
             </div>
           </EuiFlexItem>
         </div>
diff --git a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
index de619ec37..59ac205e5 100644
--- a/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
+++ b/public/components/metrics/top_menu/__tests__/__snapshots__/top_menu.test.tsx.snap
@@ -30,9 +30,9 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
             <div
               className="resolutionSelect"
             >
-              <EuiFieldText
+              <EuiCompressedFieldText
                 append={
-                  <EuiSelect
+                  <EuiCompressedSelect
                     aria-label="resolutionSelect"
                     className="resolutionSelectOption"
                     data-test-subj="metrics__spanResolutionSelect"
@@ -66,16 +66,15 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                 }
                 aria-label="resolutionField"
                 className="resolutionSelectText"
-                compressed={true}
                 data-test-subj="metrics__spanValue"
                 isInvalid={false}
                 onChange={[Function]}
                 prepend="Span Interval"
                 value={1}
               >
-                <EuiFormControlLayout
+                <EuiFieldText
                   append={
-                    <EuiSelect
+                    <EuiCompressedSelect
                       aria-label="resolutionSelect"
                       className="resolutionSelectOption"
                       data-test-subj="metrics__spanResolutionSelect"
@@ -107,192 +106,269 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                       value="h"
                     />
                   }
+                  aria-label="resolutionField"
+                  className="resolutionSelectText"
                   compressed={true}
-                  fullWidth={false}
+                  data-test-subj="metrics__spanValue"
+                  isInvalid={false}
+                  onChange={[Function]}
                   prepend="Span Interval"
+                  value={1}
                 >
-                  <div
-                    className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
+                  <EuiFormControlLayout
+                    append={
+                      <EuiCompressedSelect
+                        aria-label="resolutionSelect"
+                        className="resolutionSelectOption"
+                        data-test-subj="metrics__spanResolutionSelect"
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "seconds",
+                              "value": "s",
+                            },
+                            Object {
+                              "text": "minutes",
+                              "value": "m",
+                            },
+                            Object {
+                              "text": "hours",
+                              "value": "h",
+                            },
+                            Object {
+                              "text": "days",
+                              "value": "d",
+                            },
+                            Object {
+                              "text": "years",
+                              "value": "y",
+                            },
+                          ]
+                        }
+                        value="h"
+                      />
+                    }
+                    compressed={true}
+                    fullWidth={false}
+                    prepend="Span Interval"
                   >
-                    <EuiFormLabel
-                      className="euiFormControlLayout__prepend"
-                    >
-                      <label
-                        className="euiFormLabel euiFormControlLayout__prepend"
-                      >
-                        Span Interval
-                      </label>
-                    </EuiFormLabel>
                     <div
-                      className="euiFormControlLayout__childrenWrapper"
+                      className="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
                     >
-                      <EuiValidatableControl
-                        isInvalid={false}
+                      <EuiFormLabel
+                        className="euiFormControlLayout__prepend"
                       >
-                        <input
-                          aria-label="resolutionField"
-                          className="euiFieldText resolutionSelectText euiFieldText--compressed euiFieldText--inGroup"
-                          data-test-subj="metrics__spanValue"
-                          onChange={[Function]}
-                          type="text"
-                          value={1}
+                        <label
+                          className="euiFormLabel euiFormControlLayout__prepend"
+                        >
+                          Span Interval
+                        </label>
+                      </EuiFormLabel>
+                      <div
+                        className="euiFormControlLayout__childrenWrapper"
+                      >
+                        <EuiValidatableControl
+                          isInvalid={false}
+                        >
+                          <input
+                            aria-label="resolutionField"
+                            className="euiFieldText resolutionSelectText euiFieldText--compressed euiFieldText--inGroup"
+                            data-test-subj="metrics__spanValue"
+                            onChange={[Function]}
+                            type="text"
+                            value={1}
+                          />
+                        </EuiValidatableControl>
+                        <EuiFormControlLayoutIcons
+                          compressed={true}
                         />
-                      </EuiValidatableControl>
-                      <EuiFormControlLayoutIcons
-                        compressed={true}
-                      />
-                    </div>
-                    <EuiSelect
-                      aria-label="resolutionSelect"
-                      className="euiFormControlLayout__append resolutionSelectOption"
-                      data-test-subj="metrics__spanResolutionSelect"
-                      key="0/.0"
-                      onChange={[Function]}
-                      options={
-                        Array [
-                          Object {
-                            "text": "seconds",
-                            "value": "s",
-                          },
-                          Object {
-                            "text": "minutes",
-                            "value": "m",
-                          },
-                          Object {
-                            "text": "hours",
-                            "value": "h",
-                          },
-                          Object {
-                            "text": "days",
-                            "value": "d",
-                          },
-                          Object {
-                            "text": "years",
-                            "value": "y",
-                          },
-                        ]
-                      }
-                      value="h"
-                    >
-                      <EuiFormControlLayout
-                        compressed={false}
-                        fullWidth={false}
-                        icon={
-                          Object {
-                            "side": "right",
-                            "type": "arrowDown",
-                          }
+                      </div>
+                      <EuiCompressedSelect
+                        aria-label="resolutionSelect"
+                        className="euiFormControlLayout__append resolutionSelectOption"
+                        data-test-subj="metrics__spanResolutionSelect"
+                        key="0/.0"
+                        onChange={[Function]}
+                        options={
+                          Array [
+                            Object {
+                              "text": "seconds",
+                              "value": "s",
+                            },
+                            Object {
+                              "text": "minutes",
+                              "value": "m",
+                            },
+                            Object {
+                              "text": "hours",
+                              "value": "h",
+                            },
+                            Object {
+                              "text": "days",
+                              "value": "d",
+                            },
+                            Object {
+                              "text": "years",
+                              "value": "y",
+                            },
+                          ]
                         }
-                        isLoading={false}
+                        value="h"
                       >
-                        <div
-                          className="euiFormControlLayout"
+                        <EuiSelect
+                          aria-label="resolutionSelect"
+                          className="euiFormControlLayout__append resolutionSelectOption"
+                          compressed={true}
+                          data-test-subj="metrics__spanResolutionSelect"
+                          onChange={[Function]}
+                          options={
+                            Array [
+                              Object {
+                                "text": "seconds",
+                                "value": "s",
+                              },
+                              Object {
+                                "text": "minutes",
+                                "value": "m",
+                              },
+                              Object {
+                                "text": "hours",
+                                "value": "h",
+                              },
+                              Object {
+                                "text": "days",
+                                "value": "d",
+                              },
+                              Object {
+                                "text": "years",
+                                "value": "y",
+                              },
+                            ]
+                          }
+                          value="h"
                         >
-                          <div
-                            className="euiFormControlLayout__childrenWrapper"
-                          >
-                            <EuiValidatableControl>
-                              <select
-                                aria-label="resolutionSelect"
-                                className="euiSelect euiFormControlLayout__append resolutionSelectOption"
-                                data-test-subj="metrics__spanResolutionSelect"
-                                onChange={[Function]}
-                                onMouseUp={[Function]}
-                                value="h"
-                              >
-                                <option
-                                  key="0"
-                                  value="s"
-                                >
-                                  seconds
-                                </option>
-                                <option
-                                  key="1"
-                                  value="m"
-                                >
-                                  minutes
-                                </option>
-                                <option
-                                  key="2"
-                                  value="h"
-                                >
-                                  hours
-                                </option>
-                                <option
-                                  key="3"
-                                  value="d"
-                                >
-                                  days
-                                </option>
-                                <option
-                                  key="4"
-                                  value="y"
-                                >
-                                  years
-                                </option>
-                              </select>
-                            </EuiValidatableControl>
-                            <EuiFormControlLayoutIcons
-                              compressed={false}
-                              icon={
-                                Object {
-                                  "side": "right",
-                                  "type": "arrowDown",
-                                }
+                          <EuiFormControlLayout
+                            compressed={true}
+                            fullWidth={false}
+                            icon={
+                              Object {
+                                "side": "right",
+                                "type": "arrowDown",
                               }
-                              isLoading={false}
+                            }
+                            isLoading={false}
+                          >
+                            <div
+                              className="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
-                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                className="euiFormControlLayout__childrenWrapper"
                               >
-                                <EuiFormControlLayoutCustomIcon
-                                  size="m"
-                                  type="arrowDown"
+                                <EuiValidatableControl>
+                                  <select
+                                    aria-label="resolutionSelect"
+                                    className="euiSelect euiSelect--compressed euiFormControlLayout__append resolutionSelectOption"
+                                    data-test-subj="metrics__spanResolutionSelect"
+                                    onChange={[Function]}
+                                    onMouseUp={[Function]}
+                                    value="h"
+                                  >
+                                    <option
+                                      key="0"
+                                      value="s"
+                                    >
+                                      seconds
+                                    </option>
+                                    <option
+                                      key="1"
+                                      value="m"
+                                    >
+                                      minutes
+                                    </option>
+                                    <option
+                                      key="2"
+                                      value="h"
+                                    >
+                                      hours
+                                    </option>
+                                    <option
+                                      key="3"
+                                      value="d"
+                                    >
+                                      days
+                                    </option>
+                                    <option
+                                      key="4"
+                                      value="y"
+                                    >
+                                      years
+                                    </option>
+                                  </select>
+                                </EuiValidatableControl>
+                                <EuiFormControlLayoutIcons
+                                  compressed={true}
+                                  icon={
+                                    Object {
+                                      "side": "right",
+                                      "type": "arrowDown",
+                                    }
+                                  }
+                                  isLoading={false}
                                 >
-                                  <span
-                                    className="euiFormControlLayoutCustomIcon"
+                                  <div
+                                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                   >
-                                    <EuiIcon
-                                      aria-hidden="true"
-                                      className="euiFormControlLayoutCustomIcon__icon"
-                                      size="m"
+                                    <EuiFormControlLayoutCustomIcon
+                                      size="s"
                                       type="arrowDown"
                                     >
-                                      <EuiIconBeaker
-                                        aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                        focusable="false"
-                                        role="img"
-                                        style={null}
+                                      <span
+                                        className="euiFormControlLayoutCustomIcon"
                                       >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                          focusable="false"
-                                          height={16}
-                                          role="img"
-                                          style={null}
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
+                                        <EuiIcon
+                                          aria-hidden="true"
+                                          className="euiFormControlLayoutCustomIcon__icon"
+                                          size="s"
+                                          type="arrowDown"
                                         >
-                                          <path
-                                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                          />
-                                        </svg>
-                                      </EuiIconBeaker>
-                                    </EuiIcon>
-                                  </span>
-                                </EuiFormControlLayoutCustomIcon>
+                                          <EuiIconBeaker
+                                            aria-hidden={true}
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            focusable="false"
+                                            role="img"
+                                            style={null}
+                                          >
+                                            <svg
+                                              aria-hidden={true}
+                                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                              focusable="false"
+                                              height={16}
+                                              role="img"
+                                              style={null}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                              xmlns="http://www.w3.org/2000/svg"
+                                            >
+                                              <path
+                                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                              />
+                                            </svg>
+                                          </EuiIconBeaker>
+                                        </EuiIcon>
+                                      </span>
+                                    </EuiFormControlLayoutCustomIcon>
+                                  </div>
+                                </EuiFormControlLayoutIcons>
                               </div>
-                            </EuiFormControlLayoutIcons>
-                          </div>
-                        </div>
-                      </EuiFormControlLayout>
-                    </EuiSelect>
-                  </div>
-                </EuiFormControlLayout>
-              </EuiFieldText>
+                            </div>
+                          </EuiFormControlLayout>
+                        </EuiSelect>
+                      </EuiCompressedSelect>
+                    </div>
+                  </EuiFormControlLayout>
+                </EuiFieldText>
+              </EuiCompressedFieldText>
             </div>
           </div>
         </EuiFlexItem>
@@ -315,7 +391,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                   <div
                     className="euiFlexItem euiFlexItem--flexGrowZero metrics-search-bar-datepicker"
                   >
-                    <EuiSuperDatePicker
+                    <EuiCompressedSuperDatePicker
                       commonlyUsedRanges={
                         Array [
                           Object {
@@ -834,7 +910,7 @@ exports[`Metrics Top Menu Component renders Top Menu Component when enabled 1`]
                           </EuiFlexItem>
                         </div>
                       </EuiFlexGroup>
-                    </EuiSuperDatePicker>
+                    </EuiCompressedSuperDatePicker>
                   </div>
                 </EuiFlexItem>
                 <EuiFlexItem
diff --git a/public/components/metrics/top_menu/metrics_export_panel.tsx b/public/components/metrics/top_menu/metrics_export_panel.tsx
index 40940911b..ce8cb3e51 100644
--- a/public/components/metrics/top_menu/metrics_export_panel.tsx
+++ b/public/components/metrics/top_menu/metrics_export_panel.tsx
@@ -4,12 +4,12 @@
  */
 
 import {
-  EuiComboBox,
-  EuiFieldText,
+  EuiCompressedComboBox,
+  EuiCompressedFieldText,
   EuiFlexGroup,
+  EuiCompressedFormRow,
   EuiFlexItem,
   EuiForm,
-  EuiFormRow,
   EuiHorizontalRule,
   EuiSpacer,
   EuiText,
@@ -77,14 +77,14 @@ export const MetricsExportPanel = ({
               <EuiForm component="form" key={`save-panel-id-${index}`}>
                 <EuiFlexGroup>
                   <EuiFlexItem>
-                    <EuiFormRow label={'Metric ' + (index + 1)}>
-                      <EuiFieldText
+                    <EuiCompressedFormRow label={'Metric ' + (index + 1)}>
+                      <EuiCompressedFieldText
                         key={`metric-name-input-id-${index}`}
                         value={metaData.name}
                         onChange={(e) => onNameChange(index, e.target.value)}
                         data-test-subj="metrics__querySaveName"
                       />
-                    </EuiFormRow>
+                    </EuiCompressedFormRow>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiForm>
@@ -117,8 +117,8 @@ export const MetricsExportPanel = ({
         )}
 
         <EuiFlexItem style={{ maxWidth: '400px' }}>
-          <EuiFormRow label="Dashboards and applications - optional">
-            <EuiComboBox
+          <EuiCompressedFormRow label="Dashboards and applications - optional">
+            <EuiCompressedComboBox
               placeholder="Select dashboards/applications"
               onChange={(newOptions) => {
                 setSelectedPanelOptions(newOptions);
@@ -133,7 +133,7 @@ export const MetricsExportPanel = ({
               isClearable={true}
               data-test-subj="eventExplorer__querySaveComboBox"
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>
diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx
index 8ebc5d87a..92c7adf89 100644
--- a/public/components/metrics/top_menu/top_menu.tsx
+++ b/public/components/metrics/top_menu/top_menu.tsx
@@ -4,11 +4,11 @@
  */
 
 import {
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSelect,
-  EuiSuperDatePicker,
+  EuiCompressedSelect,
+  EuiCompressedSuperDatePicker,
 } from '@elastic/eui';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -29,8 +29,7 @@ export const TopMenu = () => {
         <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem grow={false}>
             <div className="resolutionSelect">
-              <EuiFieldText
-                compressed
+              <EuiCompressedFieldText
                 className="resolutionSelectText"
                 prepend="Span Interval"
                 value={dateSpanFilter.span}
@@ -38,7 +37,7 @@ export const TopMenu = () => {
                 onChange={(e) => dispatch(setDateSpan({ span: e.target.value }))}
                 data-test-subj="metrics__spanValue"
                 append={
-                  <EuiSelect
+                  <EuiCompressedSelect
                     className="resolutionSelectOption"
                     options={resolutionOptions}
                     value={dateSpanFilter.resolution}
@@ -54,8 +53,7 @@ export const TopMenu = () => {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem grow={false} className="metrics-search-bar-datepicker">
-                <EuiSuperDatePicker
-                  compressed={true}
+                <EuiCompressedSuperDatePicker
                   dateFormat={uiSettingsService.get('dateFormat')}
                   start={dateSpanFilter.start}
                   end={dateSpanFilter.end}
diff --git a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
index ba620dd30..59bd9e38f 100644
--- a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
+++ b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap
@@ -100,7 +100,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                     class="euiPopover__anchor"
                   >
                     <button
-                      class="euiButton euiButton--primary"
+                      class="euiButton euiButton--primary euiButton--small"
                       data-test-subj="notebookTableActionBtn"
                       type="button"
                     >
@@ -136,7 +136,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                 class="euiFlexItem"
               >
                 <a
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   data-test-subj="createNotebookPrimaryBtn"
                   href="#/create"
                   rel="noreferrer"
@@ -159,13 +159,13 @@ exports[`<NoteTable /> spec renders the component 1`] = `
           class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
         />
         <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 notebook name"
               type="search"
               value=""
@@ -178,7 +178,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                   focusable="false"
                   height="16"
                   role="img"
@@ -1020,7 +1020,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
                     class="euiPopover__anchor"
                   >
                     <button
-                      class="euiButton euiButton--primary"
+                      class="euiButton euiButton--primary euiButton--small"
                       data-test-subj="notebookTableActionBtn"
                       type="button"
                     >
@@ -1055,7 +1055,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
                 class="euiFlexItem"
               >
                 <a
-                  class="euiButton euiButton--primary euiButton--fill"
+                  class="euiButton euiButton--primary euiButton--small euiButton--fill"
                   data-test-subj="createNotebookPrimaryBtn"
                   href="#/create"
                   rel="noreferrer"
@@ -1116,7 +1116,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <a
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               data-test-subj="notebookEmptyTableCreateBtn"
               href="#/create"
               rel="noreferrer"
@@ -1136,7 +1136,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <button
-              class="euiButton euiButton--primary"
+              class="euiButton euiButton--primary euiButton--small"
               data-test-subj="notebookEmptyTableAddSamplesBtn"
               type="button"
             >
diff --git a/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap
index b24deae86..5e491534f 100644
--- a/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap
+++ b/public/components/notebooks/components/__tests__/__snapshots__/notebook.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
                 class="euiPopover__anchor"
               >
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   id="reportingActionsButton"
                   type="button"
                 >
@@ -76,7 +76,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="notebook-paragraph-actions-button"
                 type="button"
               >
@@ -117,7 +117,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
               class="euiPopover__anchor"
             >
               <button
-                class="euiButton euiButton--primary"
+                class="euiButton euiButton--primary euiButton--small"
                 data-test-subj="notebook-notebook-actions-button"
                 type="button"
               >
@@ -264,7 +264,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
                   class="euiCard__footer"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     data-test-subj="emptyNotebookAddCodeBlockBtn"
                     style="margin-bottom: 17px;"
                     type="button"
@@ -328,7 +328,7 @@ exports[`<Notebook /> spec Renders the empty component 1`] = `
                   class="euiCard__footer"
                 >
                   <button
-                    class="euiButton euiButton--primary"
+                    class="euiButton euiButton--primary euiButton--small"
                     style="margin-bottom: 17px;"
                     type="button"
                   >
@@ -388,7 +388,7 @@ exports[`<Notebook /> spec Renders the visualization component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="upgrade-notebook-callout"
             type="button"
           >
@@ -407,7 +407,7 @@ exports[`<Notebook /> spec Renders the visualization component 1`] = `
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            class="euiButton euiButton--primary"
+            class="euiButton euiButton--primary euiButton--small"
             data-test-subj="delete-notebook"
             type="button"
           >
@@ -453,7 +453,7 @@ exports[`<Notebook /> spec Renders the visualization component 1`] = `
                   class="euiSpacer euiSpacer--s"
                 />
                 <button
-                  class="euiButton euiButton--primary"
+                  class="euiButton euiButton--primary euiButton--small"
                   data-test-subj="upgrade-notebook"
                   type="button"
                 >
diff --git a/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap b/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap
index 5ed44ca00..e4bd51e8a 100644
--- a/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap
+++ b/public/components/notebooks/components/helpers/__tests__/__snapshots__/modal_containers.test.tsx.snap
@@ -20,32 +20,32 @@ exports[`modal_containers spec render delete notebooks modal 1`] = `
       </EuiText>
       <EuiSpacer />
       <EuiForm>
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
           label="To confirm deletion, enter \\"delete\\" in the text field"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="delete-notebook-modal-input"
             name="input"
             onChange={[Function]}
             placeholder="delete"
             value=""
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={[MockFunction]}
       >
         Cancel
-      </EuiButtonEmpty>
-      <EuiButton
+      </EuiSmallButtonEmpty>
+      <EuiSmallButton
         color="danger"
         data-test-subj="delete-notebook-modal-delete-button"
         disabled={true}
@@ -53,7 +53,7 @@ exports[`modal_containers spec render delete notebooks modal 1`] = `
         onClick={[Function]}
       >
         Delete
-      </EuiButton>
+      </EuiSmallButton>
     </EuiModalFooter>
   </EuiModal>
 </EuiOverlayMask>
@@ -74,9 +74,9 @@ exports[`modal_containers spec render get custom modal 1`] = `
     </EuiModalHeader>
     <EuiModalBody>
       <EuiForm>
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
@@ -84,28 +84,28 @@ exports[`modal_containers spec render get custom modal 1`] = `
           label="label"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="custom-input-modal-input"
             name="input"
             onChange={[Function]}
             value="mock-path"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={[MockFunction]}
       >
         Cancel
-      </EuiButtonEmpty>
-      <EuiButton
+      </EuiSmallButtonEmpty>
+      <EuiSmallButton
         data-test-subj="custom-input-modal-confirm-button"
         fill={true}
         onClick={[Function]}
       >
         Confirm
-      </EuiButton>
+      </EuiSmallButton>
     </EuiModalFooter>
   </EuiModal>
 </EuiOverlayMask>
diff --git a/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap
index 69461a254..e90e49399 100644
--- a/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap
+++ b/public/components/notebooks/components/helpers/custom_modals/__tests__/__snapshots__/custom_input_modal.test.tsx.snap
@@ -13,9 +13,9 @@ exports[`<CustomInputModal /> spec renders the component 1`] = `
     </EuiModalHeader>
     <EuiModalBody>
       <EuiForm>
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
@@ -23,28 +23,28 @@ exports[`<CustomInputModal /> spec renders the component 1`] = `
           label="label"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="custom-input-modal-input"
             name="input"
             onChange={[Function]}
             value="mock-path"
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={[MockFunction]}
       >
         Cancel
-      </EuiButtonEmpty>
-      <EuiButton
+      </EuiSmallButtonEmpty>
+      <EuiSmallButton
         data-test-subj="custom-input-modal-confirm-button"
         fill={true}
         onClick={[Function]}
       >
         Confirm
-      </EuiButton>
+      </EuiSmallButton>
     </EuiModalFooter>
   </EuiModal>
 </EuiOverlayMask>
@@ -63,9 +63,9 @@ exports[`<CustomInputModal /> spec renders the component 2`] = `
     </EuiModalHeader>
     <EuiModalBody>
       <EuiForm>
-        <EuiFormRow
+        <EuiCompressedFormRow
           describedByIds={Array []}
-          display="row"
+          display="rowCompressed"
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
@@ -73,28 +73,28 @@ exports[`<CustomInputModal /> spec renders the component 2`] = `
           label="label"
           labelType="label"
         >
-          <EuiFieldText
+          <EuiCompressedFieldText
             data-test-subj="custom-input-modal-input"
             name="input"
             onChange={[Function]}
             value=""
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiForm>
     </EuiModalBody>
     <EuiModalFooter>
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         onClick={[MockFunction]}
       >
         Cancel
-      </EuiButtonEmpty>
-      <EuiButton
+      </EuiSmallButtonEmpty>
+      <EuiSmallButton
         data-test-subj="custom-input-modal-confirm-button"
         fill={true}
         onClick={[Function]}
       >
         Confirm
-      </EuiButton>
+      </EuiSmallButton>
     </EuiModalFooter>
   </EuiModal>
 </EuiOverlayMask>
diff --git a/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx b/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx
index 5c1198649..10ade574a 100644
--- a/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx
+++ b/public/components/notebooks/components/helpers/custom_modals/custom_input_modal.tsx
@@ -5,7 +5,7 @@
 
 import React, { useState } from 'react';
 import {
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiForm,
   EuiModal,
   EuiModalBody,
@@ -13,9 +13,9 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
-  EuiFormRow,
-  EuiFieldText,
-  EuiButton,
+  EuiCompressedFormRow,
+  EuiCompressedFieldText,
+  EuiSmallButton,
 } from '@elastic/eui';
 
 /*
@@ -60,22 +60,22 @@ export const CustomInputModal = (props: CustomInputModalProps) => {
 
         <EuiModalBody>
           <EuiForm>
-            <EuiFormRow label={labelTxt} helpText={helpText}>
-              <EuiFieldText
+            <EuiCompressedFormRow label={labelTxt} helpText={helpText}>
+              <EuiCompressedFieldText
                 data-test-subj="custom-input-modal-input"
                 name="input"
                 value={value}
                 onChange={(e) => onChange(e)}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={closeModal}>{btn1txt}</EuiButtonEmpty>
-          <EuiButton data-test-subj="custom-input-modal-confirm-button" onClick={() => runModal(value)} fill>
+          <EuiSmallButtonEmpty onClick={closeModal}>{btn1txt}</EuiSmallButtonEmpty>
+          <EuiSmallButton data-test-subj="custom-input-modal-confirm-button" onClick={() => runModal(value)} fill>
             {btn2txt}
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx b/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx
index 97de6788d..4f28904d7 100644
--- a/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx
+++ b/public/components/notebooks/components/helpers/custom_modals/reporting_loading_modal.tsx
@@ -3,18 +3,18 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { 
-  EuiOverlayMask, 
-  EuiModal, 
-  EuiModalHeader, 
-  EuiTitle, 
-  EuiText, 
-  EuiModalBody, 
-  EuiSpacer, 
-  EuiFlexGroup, 
-  EuiFlexItem, 
-  EuiLoadingSpinner, 
-  EuiButton 
+import {
+  EuiOverlayMask,
+  EuiModal,
+  EuiModalHeader,
+  EuiTitle,
+  EuiText,
+  EuiModalBody,
+  EuiSpacer,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiSmallButton
 } from "@elastic/eui";
 import React from "react";
 
@@ -22,7 +22,7 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
   const {
     setShowLoading
   } = props;
-  
+
   const closeModal = () => {
     setShowLoading(false);
   };
@@ -54,12 +54,12 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
             <EuiSpacer size="l" />
             <EuiFlexGroup alignItems="flexEnd" justifyContent="flexEnd">
               <EuiFlexItem grow={false}>
-                <EuiButton
+                <EuiSmallButton
                   data-test-subj="reporting-loading-modal-close-button"
                   onClick={closeModal}
                 >
                   Close
-                </EuiButton>
+                </EuiSmallButton>
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiModalBody>
@@ -67,4 +67,4 @@ export function GenerateReportLoadingModal(props: { setShowLoading: any; }) {
       </EuiOverlayMask>
     </div>
   );
-};
\ No newline at end of file
+};
diff --git a/public/components/notebooks/components/helpers/modal_containers.tsx b/public/components/notebooks/components/helpers/modal_containers.tsx
index 53448012d..5b31c78a1 100644
--- a/public/components/notebooks/components/helpers/modal_containers.tsx
+++ b/public/components/notebooks/components/helpers/modal_containers.tsx
@@ -7,11 +7,11 @@ import React, { useState } from 'react';
 import {
   EuiOverlayMask,
   EuiConfirmModal,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldText,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedFieldText,
   EuiForm,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -153,21 +153,21 @@ export const DeleteNotebookModal = ({
           <EuiText>The action cannot be undone.</EuiText>
           <EuiSpacer />
           <EuiForm>
-            <EuiFormRow label={'To confirm deletion, enter "delete" in the text field'}>
-              <EuiFieldText
+            <EuiCompressedFormRow label={'To confirm deletion, enter "delete" in the text field'}>
+              <EuiCompressedFieldText
                 data-test-subj="delete-notebook-modal-input"
                 name="input"
                 placeholder="delete"
                 value={value}
                 onChange={(e) => onChange(e)}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiForm>
         </EuiModalBody>
 
         <EuiModalFooter>
-          <EuiButtonEmpty onClick={onCancel}>Cancel</EuiButtonEmpty>
-          <EuiButton
+          <EuiSmallButtonEmpty onClick={onCancel}>Cancel</EuiSmallButtonEmpty>
+          <EuiSmallButton
             data-test-subj="delete-notebook-modal-delete-button"
             onClick={() => onConfirm()}
             color="danger"
@@ -175,7 +175,7 @@ export const DeleteNotebookModal = ({
             disabled={value !== 'delete'}
           >
             Delete
-          </EuiButton>
+          </EuiSmallButton>
         </EuiModalFooter>
       </EuiModal>
     </EuiOverlayMask>
diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx
index 1546107a1..5b367e968 100644
--- a/public/components/notebooks/components/note_table.tsx
+++ b/public/components/notebooks/components/note_table.tsx
@@ -4,10 +4,10 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenuItem,
   EuiContextMenuPanel,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -163,14 +163,14 @@ export function NoteTable({
   };
 
   const popoverButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="notebookTableActionBtn"
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setIsActionsPopoverOpen(!isActionsPopoverOpen)}
     >
       Actions
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const popoverItems: ReactElement[] = [
@@ -270,9 +270,9 @@ export function NoteTable({
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill href="#/create" data-test-subj="createNotebookPrimaryBtn">
+                    <EuiSmallButton fill href="#/create" data-test-subj="createNotebookPrimaryBtn">
                       Create notebook
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiPageContentHeaderSection>
@@ -280,7 +280,7 @@ export function NoteTable({
             <EuiHorizontalRule margin="m" />
             {notebooks.length > 0 ? (
               <>
-                <EuiFieldSearch
+                <EuiCompressedFieldSearch
                   fullWidth
                   placeholder="Search notebook name"
                   value={searchQuery}
@@ -331,22 +331,22 @@ export function NoteTable({
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiSmallButton
                       href="#/create"
                       data-test-subj="notebookEmptyTableCreateBtn"
                       fullWidth={false}
                     >
                       Create notebook
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="notebookEmptyTableAddSamplesBtn"
                       fullWidth={false}
                       onClick={() => addSampleNotebooksModal()}
                     >
                       Add samples
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
                 <EuiSpacer size="xxl" />
diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx
index 00e2acd9c..146dcbc93 100644
--- a/public/components/notebooks/components/notebook.tsx
+++ b/public/components/notebooks/components/notebook.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButton,
+  EuiSmallButton,
   EuiButtonGroup,
   EuiButtonGroupOptionProps,
   EuiCallOut,
@@ -991,7 +991,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
         <EuiPopover
           panelPaddingSize="none"
           button={
-            <EuiButton
+            <EuiSmallButton
               id="reportingActionsButton"
               iconType="arrowDown"
               iconSide="right"
@@ -1002,7 +1002,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
               }
             >
               Reporting actions
-            </EuiButton>
+            </EuiSmallButton>
           }
           isOpen={this.state.isReportingActionsPopoverOpen}
           closePopover={() => this.setState({ isReportingActionsPopoverOpen: false })}
@@ -1043,7 +1043,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                   <EuiPopover
                     panelPaddingSize="none"
                     button={
-                      <EuiButton
+                      <EuiSmallButton
                         data-test-subj="notebook-paragraph-actions-button"
                         iconType="arrowDown"
                         iconSide="right"
@@ -1054,7 +1054,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                         }
                       >
                         Paragraph actions
-                      </EuiButton>
+                      </EuiSmallButton>
                     }
                     isOpen={this.state.isParaActionsPopoverOpen}
                     closePopover={() => this.setState({ isParaActionsPopoverOpen: false })}
@@ -1068,7 +1068,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                   <EuiPopover
                     panelPaddingSize="none"
                     button={
-                      <EuiButton
+                      <EuiSmallButton
                         data-test-subj="notebook-notebook-actions-button"
                         iconType="arrowDown"
                         iconSide="right"
@@ -1079,7 +1079,7 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                         }
                       >
                         Notebook actions
-                      </EuiButton>
+                      </EuiSmallButton>
                     }
                     isOpen={this.state.isNoteActionsPopoverOpen}
                     closePopover={() => this.setState({ isNoteActionsPopoverOpen: false })}
@@ -1090,20 +1090,20 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
               ) : (
                 <>
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="upgrade-notebook-callout"
                       onClick={() => this.showUpgradeModal()}
                     >
                       Upgrade Notebook
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="delete-notebook"
                       onClick={() => this.showDeleteNotebookModal()}
                     >
                       Delete this notebook
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiFlexItem>
                 </>
               )}
@@ -1119,12 +1119,12 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                   <EuiCallOut color="primary" iconType='iInCircle"'>
                     Upgrade this notebook to take full advantage of the latest features
                     <EuiSpacer size="s" />
-                    <EuiButton
+                    <EuiSmallButton
                       data-test-subj="upgrade-notebook"
                       onClick={() => this.showUpgradeModal()}
                     >
                       Upgrade Notebook
-                    </EuiButton>
+                    </EuiSmallButton>
                   </EuiCallOut>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false} />
@@ -1186,14 +1186,14 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                     <EuiPopover
                       panelPaddingSize="none"
                       button={
-                        <EuiButton
+                        <EuiSmallButton
                           data-test-subj="AddParagraphButton"
                           iconType="arrowDown"
                           iconSide="right"
                           onClick={() => this.setState({ isAddParaPopoverOpen: true })}
                         >
                           Add paragraph
-                        </EuiButton>
+                        </EuiSmallButton>
                       }
                       isOpen={this.state.isAddParaPopoverOpen}
                       closePopover={() => this.setState({ isAddParaPopoverOpen: false })}
@@ -1225,13 +1225,13 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                           title="Code block"
                           description="Write contents directly using markdown, SQL or PPL."
                           footer={
-                            <EuiButton
+                            <EuiSmallButton
                               data-test-subj="emptyNotebookAddCodeBlockBtn"
                               onClick={() => this.addPara(0, '', 'CODE')}
                               style={{ marginBottom: 17 }}
                             >
                               Add code block
-                            </EuiButton>
+                            </EuiSmallButton>
                           }
                         />
                       </EuiFlexItem>
@@ -1241,12 +1241,12 @@ export class Notebook extends Component<NotebookProps, NotebookState> {
                           title="Visualization"
                           description="Import OpenSearch Dashboards or Observability visualizations to the notes."
                           footer={
-                            <EuiButton
+                            <EuiSmallButton
                               onClick={() => this.addPara(0, '', 'VISUALIZATION')}
                               style={{ marginBottom: 17 }}
                             >
                               Add visualization
-                            </EuiButton>
+                            </EuiSmallButton>
                           }
                         />
                       </EuiFlexItem>
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap
index 07c3e2815..baf6b4813 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/para_input.test.tsx.snap
@@ -69,7 +69,7 @@ exports[`<para_input /> spec renders the visualization component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrow6"
     >
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="random_html_id-row"
       >
         <div
@@ -88,17 +88,17 @@ exports[`<para_input /> spec renders the visualization 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[`<para_input /> spec renders the visualization component 1`] = `
                 >
                   <button
                     aria-label="Clear input"
-                    class="euiFormControlLayoutClearButton"
+                    class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                     data-test-subj="comboBoxClearButton"
                     type="button"
                   >
@@ -156,7 +156,7 @@ exports[`<para_input /> spec renders the visualization component 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                       focusable="false"
                       height="16"
                       role="img"
@@ -180,7 +180,7 @@ exports[`<para_input /> spec renders the visualization component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <button
-        class="euiButton euiButton--primary"
+        class="euiButton euiButton--primary euiButton--small"
         data-test-subj="para-input-visualization-browse-button"
         type="button"
       >
@@ -202,7 +202,7 @@ exports[`<para_input /> spec renders the visualization component 1`] = `
       class="euiFlexItem euiFlexItem--flexGrow9"
     >
       <div
-        class="euiFormRow euiFormRow--fullWidth"
+        class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="random_html_id-row"
       >
         <div
diff --git a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
index ec8ae4936..df03d616a 100644
--- a/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
+++ b/public/components/notebooks/components/paragraph_components/__tests__/__snapshots__/paragraphs.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`<Paragraphs /> spec renders the component 1`] = `
         [1] Code block 
         <button
           aria-label="Toggle show input"
-          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+          class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
           data-test-subj="paragraphToggleInputBtn"
           type="button"
         >
@@ -49,7 +49,7 @@ exports[`<Paragraphs /> spec renders the component 1`] = `
         >
           <button
             aria-label="Open paragraph menu"
-            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
             type="button"
           >
             <svg
@@ -84,7 +84,7 @@ exports[`<Paragraphs /> spec renders the component 1`] = `
       class="euiSpacer euiSpacer--s"
     />
     <div
-      class="euiFormRow euiFormRow--fullWidth"
+      class="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -253,7 +253,7 @@ exports[`<Paragraphs /> 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="runRefreshBtn-0"
           type="button"
         >
diff --git a/public/components/notebooks/components/paragraph_components/para_input.tsx b/public/components/notebooks/components/paragraph_components/para_input.tsx
index 44a89ba5d..71245c7f9 100644
--- a/public/components/notebooks/components/paragraph_components/para_input.tsx
+++ b/public/components/notebooks/components/paragraph_components/para_input.tsx
@@ -4,14 +4,14 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
   EuiCodeBlock,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiHighlight,
   EuiLink,
   EuiModal,
@@ -25,7 +25,7 @@ import {
   EuiSpacer,
   EuiSuperDatePicker,
   EuiText,
-  EuiTextArea,
+  EuiCompressedTextArea,
 } from '@elastic/eui';
 import { Input, Prompt } from '@nteract/presentational-components';
 import React, { useState } from 'react';
@@ -72,7 +72,7 @@ export const ParaInput = (props: {
       <div style={{ width: '100%' }}>
         {/* If the para is selected show the editor else display the code in the paragraph */}
         {para.isSelected ? (
-          <EuiTextArea
+          <EuiCompressedTextArea
             data-test-subj={`editorArea-${index}`}
             placeholder={inputPlaceholderString}
             id="editorArea"
@@ -134,8 +134,8 @@ export const ParaInput = (props: {
       <>
         <EuiFlexGroup alignItems="flexEnd" gutterSize="s">
           <EuiFlexItem grow={6}>
-            <EuiFormRow label="Title" fullWidth>
-              <EuiComboBox
+            <EuiCompressedFormRow label="Title" fullWidth>
+              <EuiCompressedComboBox
                 placeholder="Find visualization"
                 singleSelection={{ asPlainText: true }}
                 options={props.visOptions}
@@ -146,10 +146,10 @@ export const ParaInput = (props: {
                   props.setIsOutputStale(true);
                 }}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
+            <EuiSmallButton
               data-test-subj="para-input-visualization-browse-button"
               onClick={() => {
                 setSelectableOptions([
@@ -161,11 +161,11 @@ export const ParaInput = (props: {
               }}
             >
               Browse
-            </EuiButton>
+            </EuiSmallButton>
           </EuiFlexItem>
           <EuiFlexItem grow={2} />
           <EuiFlexItem grow={9}>
-            <EuiFormRow label="Date range" fullWidth>
+            <EuiCompressedFormRow label="Date range" fullWidth>
               <EuiSuperDatePicker
                 start={props.startTime}
                 end={props.endTime}
@@ -177,7 +177,7 @@ export const ParaInput = (props: {
                   props.setIsOutputStale(true);
                 }}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem>
           <EuiFlexItem />
         </EuiFlexGroup>
@@ -219,14 +219,14 @@ export const ParaInput = (props: {
               </EuiModalBody>
 
               <EuiModalFooter>
-                <EuiButtonEmpty onClick={() => setIsModalOpen(false)}>Cancel</EuiButtonEmpty>
-                <EuiButton
+                <EuiSmallButtonEmpty onClick={() => setIsModalOpen(false)}>Cancel</EuiSmallButtonEmpty>
+                <EuiSmallButton
                   data-test-subj="para-input-select-button"
                   onClick={() => onSelect()}
                   fill
                 >
                   Select
-                </EuiButton>
+                </EuiSmallButton>
               </EuiModalFooter>
             </EuiModal>
           </EuiOverlayMask>
diff --git a/public/components/notebooks/components/paragraph_components/paragraphs.tsx b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
index 6fa927e7b..d7f209ffe 100644
--- a/public/components/notebooks/components/paragraph_components/paragraphs.tsx
+++ b/public/components/notebooks/components/paragraph_components/paragraphs.tsx
@@ -4,14 +4,14 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiComboBoxOptionOption,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiHorizontalRule,
   EuiIcon,
   EuiLink,
@@ -427,7 +427,7 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
           <EuiFlexItem>
             <EuiText style={{ fontSize: 17 }}>
               {`[${idx + 1}] ${type} `}
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 data-test-subj="paragraphToggleInputBtn"
                 aria-label="Toggle show input"
                 iconType={para.isInputExpanded ? 'arrowUp' : 'arrowDown'}
@@ -443,7 +443,7 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
             <EuiPopover
               panelPaddingSize="none"
               button={
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   aria-label="Open paragraph menu"
                   iconType="boxesHorizontal"
                   onClick={() => setIsPopoverOpen(true)}
@@ -585,7 +585,7 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
           {para.isInputExpanded && (
             <>
               <EuiSpacer size="s" />
-              <EuiFormRow
+              <EuiCompressedFormRow
                 fullWidth={true}
                 helpText={paragraphLabel}
                 isInvalid={showQueryParagraphError}
@@ -611,7 +611,7 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
                   dataSourceEnabled={dataSourceEnabled}
                   savedObjectsMDSClient={savedObjectsMDSClient}
                 />
-              </EuiFormRow>
+              </EuiCompressedFormRow>
               {runParaError && (
                 <EuiText color="danger" size="s" data-test-subj="paragraphInputErrorText">{`${
                   para.isVizualisation ? 'Visualization' : 'Input'
@@ -620,13 +620,13 @@ export const Paragraphs = forwardRef((props: ParagraphProps, ref) => {
               <EuiSpacer size="m" />
               <EuiFlexGroup alignItems="center" gutterSize="s">
                 <EuiFlexItem grow={false}>
-                  <EuiButton
+                  <EuiSmallButton
                     data-test-subj={`runRefreshBtn-${index}`}
                     onClick={() => onRunPara()}
                     fill
                   >
                     {isOutputAvailable ? 'Refresh' : 'Run'}
-                  </EuiButton>
+                  </EuiSmallButton>
                 </EuiFlexItem>
                 {isOutputAvailable && renderOutputTimestampMessage()}
               </EuiFlexGroup>
diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap
index 0d6dad1ca..2134ba8e6 100644
--- a/public/components/trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/helper_functions.test.tsx.snap
@@ -93,14 +93,14 @@ exports[`Helper functions renders no match and missing configuration messages 2`
 <Fragment>
   <EuiEmptyPrompt
     actions={
-      <EuiButton
+      <EuiSmallButton
         color="primary"
         iconSide="right"
         iconType="popout"
         onClick={[Function]}
       >
         Learn more
-      </EuiButton>
+      </EuiSmallButton>
     }
     body={
       <EuiText>
diff --git a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
index 264f31b5f..082f5b831 100644
--- a/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -408,8 +408,8 @@ exports[`Search bar components renders search bar 1`] = `
         <div
           className="euiFlexItem"
         >
-          <EuiFieldSearch
-            compressed={false}
+          <EuiCompressedFieldSearch
+            compressed={true}
             data-test-subj="search-bar-input-box"
             fullWidth={true}
             incremental={false}
@@ -421,20 +421,20 @@ exports[`Search bar components renders search bar 1`] = `
             value="test"
           >
             <EuiFormControlLayout
-              compressed={false}
+              compressed={true}
               fullWidth={true}
               icon="search"
               isLoading={false}
             >
               <div
-                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
                 >
                   <EuiValidatableControl>
                     <input
-                      className="euiFieldSearch euiFieldSearch--fullWidth"
+                      className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                       data-test-subj="search-bar-input-box"
                       onChange={[Function]}
                       onKeyUp={[Function]}
@@ -444,7 +444,7 @@ exports[`Search bar components renders search bar 1`] = `
                     />
                   </EuiValidatableControl>
                   <EuiFormControlLayoutIcons
-                    compressed={false}
+                    compressed={true}
                     icon="search"
                     isLoading={false}
                   >
@@ -452,7 +452,7 @@ exports[`Search bar components renders search bar 1`] = `
                       className="euiFormControlLayoutIcons"
                     >
                       <EuiFormControlLayoutCustomIcon
-                        size="m"
+                        size="s"
                         type="search"
                       >
                         <span
@@ -461,19 +461,19 @@ exports[`Search bar components renders search bar 1`] = `
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <EuiIconBeaker
                               aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                               focusable="false"
                               role="img"
                               style={null}
                             >
                               <svg
                                 aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                 focusable="false"
                                 height={16}
                                 role="img"
@@ -495,7 +495,7 @@ exports[`Search bar components renders search bar 1`] = `
                 </div>
               </div>
             </EuiFormControlLayout>
-          </EuiFieldSearch>
+          </EuiCompressedFieldSearch>
         </div>
       </EuiFlexItem>
       <EuiFlexItem
@@ -903,89 +903,98 @@ exports[`Search bar components renders search bar 1`] = `
         <div
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <EuiButton
+          <EuiSmallButton
             data-click-metric-element="trace_analytics.refresh_button"
             data-test-subj="superDatePickerApplyTimeButton"
             iconType="refresh"
             onClick={[Function]}
           >
-            <EuiButtonDisplay
-              baseClassName="euiButton"
+            <EuiButton
               data-click-metric-element="trace_analytics.refresh_button"
               data-test-subj="superDatePickerApplyTimeButton"
-              disabled={false}
-              element="button"
               iconType="refresh"
-              isDisabled={false}
               onClick={[Function]}
-              type="button"
+              size="s"
             >
-              <button
-                className="euiButton euiButton--primary"
+              <EuiButtonDisplay
+                baseClassName="euiButton"
                 data-click-metric-element="trace_analytics.refresh_button"
                 data-test-subj="superDatePickerApplyTimeButton"
                 disabled={false}
+                element="button"
+                iconType="refresh"
+                isDisabled={false}
                 onClick={[Function]}
-                style={
-                  Object {
-                    "minWidth": undefined,
-                  }
-                }
+                size="s"
                 type="button"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  iconSide="left"
-                  iconType="refresh"
-                  textProps={
+                <button
+                  className="euiButton euiButton--primary euiButton--small"
+                  data-click-metric-element="trace_analytics.refresh_button"
+                  data-test-subj="superDatePickerApplyTimeButton"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
                     Object {
-                      "className": "euiButton__text",
+                      "minWidth": undefined,
                     }
                   }
+                  type="button"
                 >
-                  <span
-                    className="euiButtonContent euiButton__content"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    iconType="refresh"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    <EuiIcon
-                      className="euiButtonContent__icon"
-                      color="inherit"
-                      size="m"
-                      type="refresh"
+                    <span
+                      className="euiButtonContent euiButton__content"
                     >
-                      <EuiIconBeaker
-                        aria-hidden={true}
-                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                        focusable="false"
-                        role="img"
-                        style={null}
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        color="inherit"
+                        size="m"
+                        type="refresh"
                       >
-                        <svg
+                        <EuiIconBeaker
                           aria-hidden={true}
                           className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                           focusable="false"
-                          height={16}
                           role="img"
                           style={null}
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
                         >
-                          <path
-                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                          />
-                        </svg>
-                      </EuiIconBeaker>
-                    </EuiIcon>
-                    <span
-                      className="euiButton__text"
-                    >
-                      Refresh
+                          <svg
+                            aria-hidden={true}
+                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                            focusable="false"
+                            height={16}
+                            role="img"
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          >
+                            <path
+                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                            />
+                          </svg>
+                        </EuiIconBeaker>
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Refresh
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
-            </EuiButtonDisplay>
-          </EuiButton>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </EuiSmallButton>
         </div>
       </EuiFlexItem>
     </div>
@@ -1033,7 +1042,7 @@ exports[`Search bar components renders search bar 1`] = `
               <EuiPopover
                 anchorPosition="rightUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Change all filters"
                     iconType="filter"
                     onClick={[Function]}
@@ -1057,53 +1066,61 @@ exports[`Search bar components renders search bar 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Change all filters"
                       iconType="filter"
                       onClick={[Function]}
                       title="Change all filters"
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Change all filters"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                        disabled={false}
+                        iconType="filter"
                         onClick={[Function]}
+                        size="s"
                         title="Change all filters"
-                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="filter"
+                        <button
+                          aria-label="Change all filters"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                          disabled={false}
+                          onClick={[Function]}
+                          title="Change all filters"
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="filter"
                           >
-                            <svg
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
index fddb183b0..1e988ea2f 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
@@ -55,9 +55,9 @@ exports[`Filter popover component renders filter popover 1`] = `
           <div
             className="euiFlexItem euiFlexItem--flexGrow6"
           >
-            <EuiFormRow
+            <EuiCompressedFormRow
               describedByIds={Array []}
-              display="row"
+              display="rowCompressed"
               fullWidth={false}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
@@ -65,7 +65,7 @@ exports[`Filter popover component renders filter popover 1`] = `
               labelType="label"
             >
               <div
-                className="euiFormRow"
+                className="euiFormRow euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -88,9 +88,9 @@ exports[`Filter popover component renders filter popover 1`] = `
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     async={false}
-                    compressed={false}
+                    compressed={true}
                     fullWidth={false}
                     id="random_html_id"
                     isClearable={false}
@@ -128,13 +128,13 @@ exports[`Filter popover component renders filter popover 1`] = `
                     <div
                       aria-expanded={false}
                       aria-haspopup="listbox"
-                      className="euiComboBox"
+                      className="euiComboBox euiComboBox--compressed"
                       onKeyDown={[Function]}
                       role="combobox"
                     >
                       <EuiComboBoxInput
                         autoSizeInputRef={[Function]}
-                        compressed={false}
+                        compressed={true}
                         fullWidth={false}
                         hasSelectedOptions={false}
                         id="random_html_id"
@@ -161,7 +161,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                         value=""
                       >
                         <EuiFormControlLayout
-                          compressed={false}
+                          compressed={true}
                           fullWidth={false}
                           icon={
                             Object {
@@ -176,13 +176,13 @@ exports[`Filter popover component renders filter popover 1`] = `
                           }
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 onClick={[Function]}
                                 tabIndex={-1}
@@ -253,7 +253,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                                 </AutosizeInput>
                               </div>
                               <EuiFormControlLayoutIcons
-                                compressed={false}
+                                compressed={true}
                                 icon={
                                   Object {
                                     "aria-label": "Open list of options",
@@ -274,7 +274,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                                     data-test-subj="comboBoxToggleListButton"
                                     iconRef={[Function]}
                                     onClick={[Function]}
-                                    size="m"
+                                    size="s"
                                     type="arrowDown"
                                   >
                                     <button
@@ -287,19 +287,19 @@ exports[`Filter popover component renders filter popover 1`] = `
                                       <EuiIcon
                                         aria-hidden="true"
                                         className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <EuiIconBeaker
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           role="img"
                                           style={null}
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -323,10 +323,10 @@ exports[`Filter popover component renders filter popover 1`] = `
                         </EuiFormControlLayout>
                       </EuiComboBoxInput>
                     </div>
-                  </EuiComboBox>
+                  </EuiCompressedComboBox>
                 </div>
               </div>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
         </EuiFlexItem>
         <EuiFlexItem
@@ -335,9 +335,9 @@ exports[`Filter popover component renders filter popover 1`] = `
           <div
             className="euiFlexItem euiFlexItem--flexGrow5"
           >
-            <EuiFormRow
+            <EuiCompressedFormRow
               describedByIds={Array []}
-              display="row"
+              display="rowCompressed"
               fullWidth={false}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
@@ -345,7 +345,7 @@ exports[`Filter popover component renders filter popover 1`] = `
               labelType="label"
             >
               <div
-                className="euiFormRow"
+                className="euiFormRow euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -368,9 +368,9 @@ exports[`Filter popover component renders filter popover 1`] = `
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     async={false}
-                    compressed={false}
+                    compressed={true}
                     fullWidth={false}
                     id="random_html_id"
                     isClearable={false}
@@ -391,13 +391,13 @@ exports[`Filter popover component renders filter popover 1`] = `
                     <div
                       aria-expanded={false}
                       aria-haspopup="listbox"
-                      className="euiComboBox euiComboBox-isDisabled"
+                      className="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
                       onKeyDown={[Function]}
                       role="combobox"
                     >
                       <EuiComboBoxInput
                         autoSizeInputRef={[Function]}
-                        compressed={false}
+                        compressed={true}
                         fullWidth={false}
                         hasSelectedOptions={false}
                         id="random_html_id"
@@ -425,7 +425,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                         value=""
                       >
                         <EuiFormControlLayout
-                          compressed={false}
+                          compressed={true}
                           fullWidth={false}
                           icon={
                             Object {
@@ -440,13 +440,13 @@ exports[`Filter popover component renders filter popover 1`] = `
                           }
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap"
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 onClick={[Function]}
                                 tabIndex={-1}
@@ -519,7 +519,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                                 </AutosizeInput>
                               </div>
                               <EuiFormControlLayoutIcons
-                                compressed={false}
+                                compressed={true}
                                 icon={
                                   Object {
                                     "aria-label": "Open list of options",
@@ -541,7 +541,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                                     disabled={true}
                                     iconRef={[Function]}
                                     onClick={[Function]}
-                                    size="m"
+                                    size="s"
                                     type="arrowDown"
                                   >
                                     <button
@@ -555,19 +555,19 @@ exports[`Filter popover component renders filter popover 1`] = `
                                       <EuiIcon
                                         aria-hidden="true"
                                         className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <EuiIconBeaker
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           role="img"
                                           style={null}
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -591,10 +591,10 @@ exports[`Filter popover component renders filter popover 1`] = `
                         </EuiFormControlLayout>
                       </EuiComboBoxInput>
                     </div>
-                  </EuiComboBox>
+                  </EuiCompressedComboBox>
                 </div>
               </div>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
         </EuiFlexItem>
       </div>
@@ -619,39 +619,45 @@ exports[`Filter popover component renders filter popover 1`] = `
           <div
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <EuiButtonEmpty
+            <EuiSmallButtonEmpty
               data-test-subj="filter-popover-cancel-button"
               onClick={[MockFunction]}
             >
-              <button
-                className="euiButtonEmpty euiButtonEmpty--primary"
+              <EuiButtonEmpty
                 data-test-subj="filter-popover-cancel-button"
-                disabled={false}
                 onClick={[MockFunction]}
-                type="button"
+                size="s"
               >
-                <EuiButtonContent
-                  className="euiButtonEmpty__content"
-                  iconSide="left"
-                  iconSize="m"
-                  textProps={
-                    Object {
-                      "className": "euiButtonEmpty__text",
-                    }
-                  }
+                <button
+                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
+                  data-test-subj="filter-popover-cancel-button"
+                  disabled={false}
+                  onClick={[MockFunction]}
+                  type="button"
                 >
-                  <span
-                    className="euiButtonContent euiButtonEmpty__content"
+                  <EuiButtonContent
+                    className="euiButtonEmpty__content"
+                    iconSide="left"
+                    iconSize="m"
+                    textProps={
+                      Object {
+                        "className": "euiButtonEmpty__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButtonEmpty__text"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
-                      Cancel
+                      <span
+                        className="euiButtonEmpty__text"
+                      >
+                        Cancel
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
-            </EuiButtonEmpty>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonEmpty>
+            </EuiSmallButtonEmpty>
           </div>
         </EuiFlexItem>
         <EuiFlexItem
@@ -660,53 +666,61 @@ exports[`Filter popover component renders filter popover 1`] = `
           <div
             className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <EuiButton
+            <EuiSmallButton
               disabled={true}
               fill={true}
               onClick={[Function]}
             >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
+              <EuiButton
                 disabled={true}
-                element="button"
                 fill={true}
-                isDisabled={true}
                 onClick={[Function]}
-                type="button"
+                size="s"
               >
-                <button
-                  className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
                   disabled={true}
+                  element="button"
+                  fill={true}
+                  isDisabled={true}
                   onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
+                  size="s"
                   type="button"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="left"
-                    textProps={
+                  <button
+                    className="euiButton euiButton--primary euiButton--small euiButton--fill euiButton-isDisabled"
+                    disabled={true}
+                    onClick={[Function]}
+                    style={
                       Object {
-                        "className": "euiButton__text",
+                        "minWidth": undefined,
                       }
                     }
+                    type="button"
                   >
-                    <span
-                      className="euiButtonContent euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="left"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
                       <span
-                        className="euiButton__text"
+                        className="euiButtonContent euiButton__content"
                       >
-                        Save
+                        <span
+                          className="euiButton__text"
+                        >
+                          Save
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </EuiSmallButton>
           </div>
         </EuiFlexItem>
       </div>
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
index 48b5ff946..064bc81b9 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
@@ -9,9 +9,9 @@ Array [
       className="euiSpacer euiSpacer--s"
     />
   </EuiSpacer>,
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -19,7 +19,7 @@ Array [
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -121,7 +121,7 @@ Array [
         </EuiFormControlLayoutDelimited>
       </div>
     </div>
-  </EuiFormRow>,
+  </EuiCompressedFormRow>,
 ]
 `;
 
@@ -134,9 +134,9 @@ Array [
       className="euiSpacer euiSpacer--s"
     />
   </EuiSpacer>,
-  <EuiFormRow
+  <EuiCompressedFormRow
     describedByIds={Array []}
-    display="row"
+    display="rowCompressed"
     fullWidth={false}
     hasChildLabel={true}
     hasEmptyLabelSpace={false}
@@ -144,7 +144,7 @@ Array [
     labelType="label"
   >
     <div
-      className="euiFormRow"
+      className="euiFormRow euiFormRow--compressed"
       id="random_html_id-row"
     >
       <div
@@ -167,7 +167,7 @@ Array [
       <div
         className="euiFormRow__fieldWrapper"
       >
-        <EuiFieldText
+        <EuiCompressedFieldText
           id="random_html_id"
           onBlur={[Function]}
           onChange={[Function]}
@@ -175,35 +175,48 @@ Array [
           placeholder="Enter a value"
           value={0}
         >
-          <EuiFormControlLayout
-            fullWidth={false}
-            inputId="random_html_id"
+          <EuiFieldText
+            compressed={true}
+            id="random_html_id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            placeholder="Enter a value"
+            value={0}
           >
-            <div
-              className="euiFormControlLayout"
+            <EuiFormControlLayout
+              compressed={true}
+              fullWidth={false}
+              inputId="random_html_id"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout euiFormControlLayout--compressed"
               >
-                <EuiValidatableControl>
-                  <input
-                    className="euiFieldText"
-                    id="random_html_id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    placeholder="Enter a value"
-                    type="text"
-                    value={0}
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <EuiValidatableControl>
+                    <input
+                      className="euiFieldText euiFieldText--compressed"
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      placeholder="Enter a value"
+                      type="text"
+                      value={0}
+                    />
+                  </EuiValidatableControl>
+                  <EuiFormControlLayoutIcons
+                    compressed={true}
                   />
-                </EuiValidatableControl>
-                <EuiFormControlLayoutIcons />
+                </div>
               </div>
-            </div>
-          </EuiFormControlLayout>
-        </EuiFieldText>
+            </EuiFormControlLayout>
+          </EuiFieldText>
+        </EuiCompressedFieldText>
       </div>
     </div>
-  </EuiFormRow>,
+  </EuiCompressedFormRow>,
 ]
 `;
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap
index e886fa640..a32700c7b 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filters.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`Filter component renders filters 1`] = `
             <EuiPopover
               anchorPosition="rightUp"
               button={
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   aria-label="Change all filters"
                   iconType="filter"
                   onClick={[Function]}
@@ -59,53 +59,61 @@ exports[`Filter component renders filters 1`] = `
                 <div
                   className="euiPopover__anchor"
                 >
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Change all filters"
                     iconType="filter"
                     onClick={[Function]}
                     title="Change all filters"
                   >
-                    <button
+                    <EuiButtonIcon
                       aria-label="Change all filters"
-                      className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                      disabled={false}
+                      iconType="filter"
                       onClick={[Function]}
+                      size="s"
                       title="Change all filters"
-                      type="button"
                     >
-                      <EuiIcon
-                        aria-hidden="true"
-                        className="euiButtonIcon__icon"
-                        color="inherit"
-                        size="m"
-                        type="filter"
+                      <button
+                        aria-label="Change all filters"
+                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                        disabled={false}
+                        onClick={[Function]}
+                        title="Change all filters"
+                        type="button"
                       >
-                        <EuiIconBeaker
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          color="inherit"
+                          size="m"
+                          type="filter"
                         >
-                          <svg
+                          <EuiIconBeaker
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <path
-                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                            />
-                          </svg>
-                        </EuiIconBeaker>
-                      </EuiIcon>
-                    </button>
-                  </EuiButtonIcon>
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                              />
+                            </svg>
+                          </EuiIconBeaker>
+                        </EuiIcon>
+                      </button>
+                    </EuiButtonIcon>
+                  </EuiSmallButtonIcon>
                 </div>
               </div>
             </EuiPopover>
diff --git a/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx b/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
index 239ef7eaa..dc4d4b6d8 100644
--- a/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
+++ b/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
@@ -4,13 +4,13 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiComboBox,
+  EuiSmallButton,
+  EuiSmallButtonEmpty,
+  EuiCompressedComboBox,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
 } from '@elastic/eui';
 import React, { useState } from 'react';
@@ -42,8 +42,8 @@ export function FilterEditPopover(props: {
       <button style={{ width: 0, height: 0, position: 'fixed', marginLeft: -1000, bottom: 0 }} />
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem grow={6}>
-          <EuiFormRow label={'Field'}>
-            <EuiComboBox
+          <EuiCompressedFormRow label={'Field'}>
+            <EuiCompressedComboBox
               placeholder="Select a field first"
               isClearable={false}
               options={props.filterFieldOptions}
@@ -55,11 +55,11 @@ export function FilterEditPopover(props: {
               }}
               singleSelection={{ asPlainText: true }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem grow={5}>
-          <EuiFormRow label={'Operator'}>
-            <EuiComboBox
+          <EuiCompressedFormRow label={'Operator'}>
+            <EuiCompressedComboBox
               placeholder={selectedFieldOptions.length === 0 ? 'Waiting' : 'Select'}
               isClearable={false}
               isDisabled={selectedFieldOptions.length === 0}
@@ -75,7 +75,7 @@ export function FilterEditPopover(props: {
               }}
               singleSelection={{ asPlainText: true }}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
       {selectedOperatorOptions.length > 0 &&
@@ -88,15 +88,15 @@ export function FilterEditPopover(props: {
       <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             data-test-subj="filter-popover-cancel-button"
             onClick={props.closePopover}
           >
             Cancel
-          </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             fill
             disabled={
               selectedFieldOptions.length === 0 ||
@@ -120,7 +120,7 @@ export function FilterEditPopover(props: {
             }}
           >
             Save
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </div>
diff --git a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
index 4672c342e..594e870c4 100644
--- a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
+++ b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
@@ -4,10 +4,10 @@
  */
 
 import {
-  EuiComboBox,
-  EuiFieldText,
+  EuiCompressedComboBox,
+  EuiCompressedFieldText,
   EuiFormControlLayoutDelimited,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiSpacer,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -157,13 +157,13 @@ export const getValueComponent = (
   const textField = (
     <>
       <EuiSpacer size="s" />
-      <EuiFormRow label={'Value'}>
-        <EuiFieldText
+      <EuiCompressedFormRow label={'Value'}>
+        <EuiCompressedFieldText
           placeholder="Enter a value"
           value={value}
           onChange={(e) => setValue(e.target.value)}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 
@@ -189,7 +189,7 @@ export const getValueComponent = (
     return (
       <>
         <EuiSpacer size="s" />
-        <EuiFormRow label={'Value'}>
+        <EuiCompressedFormRow label={'Value'}>
           <EuiFormControlLayoutDelimited
             startControl={
               <input
@@ -210,7 +210,7 @@ export const getValueComponent = (
               />
             }
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
@@ -219,8 +219,8 @@ export const getValueComponent = (
     return (
       <>
         <EuiSpacer size="s" />
-        <EuiFormRow label={'Value'}>
-          <EuiComboBox
+        <EuiCompressedFormRow label={'Value'}>
+          <EuiCompressedComboBox
             placeholder="Select a value"
             options={[
               {
@@ -234,7 +234,7 @@ export const getValueComponent = (
             selectedOptions={value || []}
             singleSelection={true}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </>
     );
   };
diff --git a/public/components/trace_analytics/components/common/filters/filters.tsx b/public/components/trace_analytics/components/common/filters/filters.tsx
index 7f0245d2a..052ff06a8 100644
--- a/public/components/trace_analytics/components/common/filters/filters.tsx
+++ b/public/components/trace_analytics/components/common/filters/filters.tsx
@@ -6,7 +6,7 @@
 import {
   EuiBadge,
   EuiButtonEmpty,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
   EuiFlexGroup,
@@ -198,7 +198,7 @@ export function Filters(props: FiltersOwnProps) {
         isOpen={isPopoverOpen}
         closePopover={() => setIsPopoverOpen(false)}
         button={
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             onClick={() => setIsPopoverOpen(true)}
             iconType="filter"
             title="Change all filters"
diff --git a/public/components/trace_analytics/components/common/helper_functions.tsx b/public/components/trace_analytics/components/common/helper_functions.tsx
index aa110ea50..fdc00053c 100644
--- a/public/components/trace_analytics/components/common/helper_functions.tsx
+++ b/public/components/trace_analytics/components/common/helper_functions.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable radix */
 
 import dateMath from '@elastic/datemath';
-import { EuiButton, EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiSmallButton, EuiEmptyPrompt, EuiSpacer, EuiText } from '@elastic/eui';
 import { SpacerSize } from '@elastic/eui/src/components/spacer/spacer';
 import { isEmpty, round } from 'lodash';
 import React from 'react';
@@ -67,14 +67,14 @@ export function MissingConfigurationMessage(props: { mode: TraceAnalyticsMode })
         title={<h2>Trace Analytics not set up</h2>}
         body={<EuiText>{missingConfigurationBody}</EuiText>}
         actions={
-          <EuiButton
+          <EuiSmallButton
             color="primary"
             iconSide="right"
             iconType="popout"
             onClick={() => window.open(TRACE_ANALYTICS_DOCUMENTATION_LINK, '_blank')}
           >
             Learn more
-          </EuiButton>
+          </EuiSmallButton>
         }
       />
     </>
diff --git a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
index 7be620775..a048c6773 100644
--- a/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/plots/__tests__/__snapshots__/service_map.test.tsx.snap
@@ -46,8 +46,8 @@ exports[`Service map component renders service map 1`] = `
         </EuiText>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFieldSearch
-          compressed={false}
+        <EuiCompressedFieldSearch
+          compressed={true}
           fullWidth={false}
           incremental={false}
           isClearable={true}
diff --git a/public/components/trace_analytics/components/common/plots/service_map.tsx b/public/components/trace_analytics/components/common/plots/service_map.tsx
index 517e3196f..7e2dc2d2a 100644
--- a/public/components/trace_analytics/components/common/plots/service_map.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiButtonGroup,
-  EuiFieldSearch,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -222,7 +222,7 @@ export function ServiceMap({
             <EuiText>Focus on</EuiText>
           </EuiFlexItem>
           <EuiFlexItem>
-            <EuiFieldSearch
+            <EuiCompressedFieldSearch
               placeholder="Service name"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
diff --git a/public/components/trace_analytics/components/common/plots/service_map_node_details.tsx b/public/components/trace_analytics/components/common/plots/service_map_node_details.tsx
index da8292c0a..509c1757c 100644
--- a/public/components/trace_analytics/components/common/plots/service_map_node_details.tsx
+++ b/public/components/trace_analytics/components/common/plots/service_map_node_details.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiButtonIcon,
+  EuiSmallButton,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
@@ -37,7 +37,7 @@ export const ServiceMapNodeDetails = ({
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
+          <EuiSmallButtonIcon
             aria-label="Close node details"
             iconType="cross"
             color="text"
@@ -52,7 +52,7 @@ export const ServiceMapNodeDetails = ({
       <EuiSpacer size="l" />
       <EuiFlexGroup direction="column" gutterSize="s">
         <EuiFlexItem>
-          <EuiButton
+          <EuiSmallButton
             fill
             onClick={() =>
               setCurrentSelectedService &&
@@ -61,14 +61,14 @@ export const ServiceMapNodeDetails = ({
             }
           >
             View service details
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiButton
+          <EuiSmallButton
             onClick={() => selectedNodeDetails && addServiceFilter(selectedNodeDetails?.label)}
           >
             Filter map
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/public/components/trace_analytics/components/common/search_bar.tsx b/public/components/trace_analytics/components/common/search_bar.tsx
index baeedcf49..eb1ba40c5 100644
--- a/public/components/trace_analytics/components/common/search_bar.tsx
+++ b/public/components/trace_analytics/components/common/search_bar.tsx
@@ -4,8 +4,8 @@
  */
 
 import {
-  EuiButton,
-  EuiFieldSearch,
+  EuiSmallButton,
+  EuiCompressedFieldSearch,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSpacer,
@@ -72,7 +72,7 @@ export const SearchBar = forwardRef((props: SearchBarOwnProps, ref) => {
       <EuiFlexGroup gutterSize="s">
         {!props.datepickerOnly && (
           <EuiFlexItem>
-            <EuiFieldSearch
+            <EuiCompressedFieldSearch
               fullWidth
               isClearable={false}
               placeholder="Trace ID, trace group name, service name"
@@ -90,14 +90,14 @@ export const SearchBar = forwardRef((props: SearchBarOwnProps, ref) => {
           {renderDatePicker(props.startTime, props.setStartTime, props.endTime, props.setEndTime)}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton
+          <EuiSmallButton
             data-test-subj="superDatePickerApplyTimeButton"
             data-click-metric-element="trace_analytics.refresh_button"
             iconType="refresh"
             onClick={() => props.refresh()}
           >
             Refresh
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
 
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
index f416ed960..87ff562cc 100644
--- a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -269,7 +269,7 @@ exports[`Dashboard component renders dashboard 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -280,7 +280,7 @@ exports[`Dashboard component renders dashboard 1`] = `
           title="data_prepper"
         >
           Data Prepper
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -296,7 +296,7 @@ exports[`Dashboard component renders dashboard 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -306,68 +306,80 @@ exports[`Dashboard component renders dashboard 1`] = `
             onClick={[Function]}
             title="data_prepper"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="data_prepper"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="data_prepper"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconArrowDown
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconArrowDown
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                          fillRule="non-zero"
-                        />
-                      </svg>
-                    </EuiIconArrowDown>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Data Prepper
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                            fillRule="non-zero"
+                          />
+                        </svg>
+                      </EuiIconArrowDown>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Data Prepper
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -1490,7 +1502,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -1501,7 +1513,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
           title="data_prepper"
         >
           Data Prepper
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -1517,7 +1529,7 @@ exports[`Dashboard component renders empty dashboard 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -1527,67 +1539,79 @@ exports[`Dashboard component renders empty dashboard 1`] = `
             onClick={[Function]}
             title="data_prepper"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="data_prepper"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="data_prepper"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconBeaker
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconBeaker
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                        />
-                      </svg>
-                    </EuiIconBeaker>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Data Prepper
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                          />
+                        </svg>
+                      </EuiIconBeaker>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Data Prepper
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -2711,7 +2735,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -2722,7 +2746,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
           title="jaeger"
         >
           Jaeger
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -2738,7 +2762,7 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -2748,68 +2772,80 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
             onClick={[Function]}
             title="jaeger"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="jaeger"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="jaeger"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconArrowDown
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconArrowDown
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                          fillRule="non-zero"
-                        />
-                      </svg>
-                    </EuiIconArrowDown>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Jaeger
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                            fillRule="non-zero"
+                          />
+                        </svg>
+                      </EuiIconArrowDown>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Jaeger
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap
index 95690a4ba..d466c9859 100644
--- a/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap
+++ b/public/components/trace_analytics/components/dashboard/__tests__/__snapshots__/mode_picker.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Mode picker component renders mode picker 1`] = `
     anchorClassName="eui-textTruncate"
     anchorPosition="downCenter"
     button={
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         className="dscIndexPattern__triggerButton"
         color="text"
         data-test-subj="indexPattern-switch-link"
@@ -32,7 +32,7 @@ exports[`Mode picker component renders mode picker 1`] = `
         title="jaeger"
       >
         Jaeger
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     }
     className="eui-textTruncate"
     closePopover={[Function]}
@@ -48,7 +48,7 @@ exports[`Mode picker component renders mode picker 1`] = `
       <div
         className="euiPopover__anchor eui-textTruncate"
       >
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -58,67 +58,79 @@ exports[`Mode picker component renders mode picker 1`] = `
           onClick={[Function]}
           title="jaeger"
         >
-          <button
-            className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
             data-test-subj="indexPattern-switch-link"
-            disabled={false}
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
             onClick={[Function]}
+            size="s"
             title="jaeger"
-            type="button"
           >
-            <EuiButtonContent
-              className="euiButtonEmpty__content"
-              iconSide="right"
-              iconSize="m"
-              iconType="arrowDown"
-              textProps={
-                Object {
-                  "className": "euiButtonEmpty__text",
-                }
-              }
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="jaeger"
+              type="button"
             >
-              <span
-                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
               >
-                <EuiIcon
-                  className="euiButtonContent__icon"
-                  color="inherit"
-                  size="m"
-                  type="arrowDown"
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
-                  <EuiIconBeaker
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                    focusable="false"
-                    role="img"
-                    style={null}
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
                   >
-                    <svg
+                    <EuiIconBeaker
                       aria-hidden={true}
                       className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                       focusable="false"
-                      height={16}
                       role="img"
                       style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <path
-                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                      />
-                    </svg>
-                  </EuiIconBeaker>
-                </EuiIcon>
-                <span
-                  className="euiButtonEmpty__text"
-                >
-                  Jaeger
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                        />
+                      </svg>
+                    </EuiIconBeaker>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Jaeger
+                  </span>
                 </span>
-              </span>
-            </EuiButtonContent>
-          </button>
-        </EuiButtonEmpty>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       </div>
     </div>
   </EuiPopover>
@@ -146,7 +158,7 @@ exports[`Mode picker component renders mode picker 2`] = `
     anchorClassName="eui-textTruncate"
     anchorPosition="downCenter"
     button={
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         className="dscIndexPattern__triggerButton"
         color="text"
         data-test-subj="indexPattern-switch-link"
@@ -157,7 +169,7 @@ exports[`Mode picker component renders mode picker 2`] = `
         title="jaeger"
       >
         Jaeger
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     }
     className="eui-textTruncate"
     closePopover={[Function]}
@@ -173,7 +185,7 @@ exports[`Mode picker component renders mode picker 2`] = `
       <div
         className="euiPopover__anchor eui-textTruncate"
       >
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -183,67 +195,79 @@ exports[`Mode picker component renders mode picker 2`] = `
           onClick={[Function]}
           title="jaeger"
         >
-          <button
-            className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+          <EuiButtonEmpty
+            className="dscIndexPattern__triggerButton"
+            color="text"
             data-test-subj="indexPattern-switch-link"
-            disabled={false}
+            flush="left"
+            iconSide="right"
+            iconType="arrowDown"
             onClick={[Function]}
+            size="s"
             title="jaeger"
-            type="button"
           >
-            <EuiButtonContent
-              className="euiButtonEmpty__content"
-              iconSide="right"
-              iconSize="m"
-              iconType="arrowDown"
-              textProps={
-                Object {
-                  "className": "euiButtonEmpty__text",
-                }
-              }
+            <button
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+              data-test-subj="indexPattern-switch-link"
+              disabled={false}
+              onClick={[Function]}
+              title="jaeger"
+              type="button"
             >
-              <span
-                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+              <EuiButtonContent
+                className="euiButtonEmpty__content"
+                iconSide="right"
+                iconSize="m"
+                iconType="arrowDown"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
               >
-                <EuiIcon
-                  className="euiButtonContent__icon"
-                  color="inherit"
-                  size="m"
-                  type="arrowDown"
+                <span
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
-                  <EuiIconBeaker
-                    aria-hidden={true}
-                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                    focusable="false"
-                    role="img"
-                    style={null}
+                  <EuiIcon
+                    className="euiButtonContent__icon"
+                    color="inherit"
+                    size="m"
+                    type="arrowDown"
                   >
-                    <svg
+                    <EuiIconBeaker
                       aria-hidden={true}
                       className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                       focusable="false"
-                      height={16}
                       role="img"
                       style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <path
-                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                      />
-                    </svg>
-                  </EuiIconBeaker>
-                </EuiIcon>
-                <span
-                  className="euiButtonEmpty__text"
-                >
-                  Jaeger
+                      <svg
+                        aria-hidden={true}
+                        className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                        focusable="false"
+                        height={16}
+                        role="img"
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                        />
+                      </svg>
+                    </EuiIconBeaker>
+                  </EuiIcon>
+                  <span
+                    className="euiButtonEmpty__text"
+                  >
+                    Jaeger
+                  </span>
                 </span>
-              </span>
-            </EuiButtonContent>
-          </button>
-        </EuiButtonEmpty>
+              </EuiButtonContent>
+            </button>
+          </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       </div>
       <EuiPortal>
         <Portal
diff --git a/public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx b/public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx
index 66a46d31c..2e447b41f 100644
--- a/public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx
+++ b/public/components/trace_analytics/components/dashboard/__tests__/mode_picker.test.tsx
@@ -24,7 +24,7 @@ describe('Mode picker component', () => {
     );
 
     expect(wrapper).toMatchSnapshot();
-    wrapper.find('[className="dscIndexPattern__triggerButton"]').simulate('click');
+    wrapper.find('EuiSmallButtonEmpty[className="dscIndexPattern__triggerButton"]').simulate('click');
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx b/public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx
index 2422c4d18..898a6a0fb 100644
--- a/public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx
+++ b/public/components/trace_analytics/components/dashboard/latency_trend_cell.tsx
@@ -3,8 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPopover, EuiText } from '@elastic/eui';
-import _ from 'lodash';
+import {
+  EuiButtonIcon,
+  EuiSmallButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiText,
+} from '@elastic/eui';
 import React, { useState } from 'react';
 import { LatencyPlt, LinePlt } from '../common/plots/latency_trend_plt';
 
@@ -46,7 +52,7 @@ export function LatencyTrendCell({
               <EuiText size="s">{traceGroupName}</EuiText>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 aria-label="Close popover"
                 iconType="cross"
                 color="text"
diff --git a/public/components/trace_analytics/components/dashboard/mode_picker.tsx b/public/components/trace_analytics/components/dashboard/mode_picker.tsx
index 14594958c..e593310f6 100644
--- a/public/components/trace_analytics/components/dashboard/mode_picker.tsx
+++ b/public/components/trace_analytics/components/dashboard/mode_picker.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonEmpty, EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
+import { EuiSmallButtonEmpty, EuiPopover, EuiPopoverTitle, EuiSelectable } from '@elastic/eui';
 import React, { useState } from 'react';
 import { TraceAnalyticsMode } from '../../home';
 
@@ -33,7 +33,7 @@ export function DataSourcePicker(props: {
   const createTrigger = () => {
     const { label, title, ...rest } = trigger;
     return (
-      <EuiButtonEmpty
+      <EuiSmallButtonEmpty
         flush="left"
         color="text"
         iconSide="right"
@@ -43,7 +43,7 @@ export function DataSourcePicker(props: {
         {...rest}
       >
         {label}
-      </EuiButtonEmpty>
+      </EuiSmallButtonEmpty>
     );
   };
 
diff --git a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
index ed324808e..9bf97cbe2 100644
--- a/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
+++ b/public/components/trace_analytics/components/services/__tests__/__snapshots__/services.test.tsx.snap
@@ -248,7 +248,7 @@ exports[`Services component renders empty services page 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -259,7 +259,7 @@ exports[`Services component renders empty services page 1`] = `
           title="data_prepper"
         >
           Data Prepper
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -275,7 +275,7 @@ exports[`Services component renders empty services page 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -285,67 +285,79 @@ exports[`Services component renders empty services page 1`] = `
             onClick={[Function]}
             title="data_prepper"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="data_prepper"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="data_prepper"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconBeaker
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconBeaker
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                        />
-                      </svg>
-                    </EuiIconBeaker>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Data Prepper
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                          />
+                        </svg>
+                      </EuiIconBeaker>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Data Prepper
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -617,8 +629,8 @@ exports[`Services component renders empty services page 1`] = `
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 data-test-subj="search-bar-input-box"
                 fullWidth={true}
                 incremental={false}
@@ -630,20 +642,20 @@ exports[`Services component renders empty services page 1`] = `
                 value=""
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           data-test-subj="search-bar-input-box"
                           onChange={[Function]}
                           onKeyUp={[Function]}
@@ -653,7 +665,7 @@ exports[`Services component renders empty services page 1`] = `
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -661,7 +673,7 @@ exports[`Services component renders empty services page 1`] = `
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -670,19 +682,19 @@ exports[`Services component renders empty services page 1`] = `
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconBeaker
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -704,7 +716,7 @@ exports[`Services component renders empty services page 1`] = `
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
@@ -1110,89 +1122,98 @@ exports[`Services component renders empty services page 1`] = `
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButton
+              <EuiSmallButton
                 data-click-metric-element="trace_analytics.refresh_button"
                 data-test-subj="superDatePickerApplyTimeButton"
                 iconType="refresh"
                 onClick={[Function]}
               >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
+                <EuiButton
                   data-click-metric-element="trace_analytics.refresh_button"
                   data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
                   iconType="refresh"
-                  isDisabled={false}
                   onClick={[Function]}
-                  type="button"
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     data-click-metric-element="trace_analytics.refresh_button"
                     data-test-subj="superDatePickerApplyTimeButton"
                     disabled={false}
+                    element="button"
+                    iconType="refresh"
+                    isDisabled={false}
                     onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      data-click-metric-element="trace_analytics.refresh_button"
+                      data-test-subj="superDatePickerApplyTimeButton"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        iconType="refresh"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
+                        <span
+                          className="euiButtonContent euiButton__content"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="refresh"
                           >
-                            <svg
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Refresh
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiFlexItem>
         </div>
@@ -1254,7 +1275,7 @@ exports[`Services component renders empty services page 1`] = `
                   <EuiPopover
                     anchorPosition="rightUp"
                     button={
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Change all filters"
                         iconType="filter"
                         onClick={[Function]}
@@ -1278,53 +1299,61 @@ exports[`Services component renders empty services page 1`] = `
                       <div
                         className="euiPopover__anchor"
                       >
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="Change all filters"
                           iconType="filter"
                           onClick={[Function]}
                           title="Change all filters"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
+                            size="s"
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconBeaker
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                color="inherit"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconBeaker
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                  />
-                                </svg>
-                              </EuiIconBeaker>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                    />
+                                  </svg>
+                                </EuiIconBeaker>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiSmallButtonIcon>
                       </div>
                     </div>
                   </EuiPopover>
@@ -2022,8 +2051,8 @@ exports[`Services component renders empty services page 1`] = `
                 <div
                   className="euiFlexItem"
                 >
-                  <EuiFieldSearch
-                    compressed={false}
+                  <EuiCompressedFieldSearch
+                    compressed={true}
                     fullWidth={false}
                     incremental={false}
                     isClearable={true}
@@ -2035,13 +2064,13 @@ exports[`Services component renders empty services page 1`] = `
                     value=""
                   >
                     <EuiFormControlLayout
-                      compressed={false}
+                      compressed={true}
                       fullWidth={false}
                       icon="search"
                       isLoading={false}
                     >
                       <div
-                        className="euiFormControlLayout"
+                        className="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
                           className="euiFormControlLayout__childrenWrapper"
@@ -2050,7 +2079,7 @@ exports[`Services component renders empty services page 1`] = `
                             isInvalid={false}
                           >
                             <input
-                              className="euiFieldSearch"
+                              className="euiFieldSearch euiFieldSearch--compressed"
                               onChange={[Function]}
                               onKeyUp={[Function]}
                               placeholder="Service name"
@@ -2059,7 +2088,7 @@ exports[`Services component renders empty services page 1`] = `
                             />
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
-                            compressed={false}
+                            compressed={true}
                             icon="search"
                             isLoading={false}
                           >
@@ -2067,7 +2096,7 @@ exports[`Services component renders empty services page 1`] = `
                               className="euiFormControlLayoutIcons"
                             >
                               <EuiFormControlLayoutCustomIcon
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <span
@@ -2076,19 +2105,19 @@ exports[`Services component renders empty services page 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
-                                    size="m"
+                                    size="s"
                                     type="search"
                                   >
                                     <EuiIconBeaker
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       role="img"
                                       style={null}
                                     >
                                       <svg
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height={16}
                                         role="img"
@@ -2110,7 +2139,7 @@ exports[`Services component renders empty services page 1`] = `
                         </div>
                       </div>
                     </EuiFormControlLayout>
-                  </EuiFieldSearch>
+                  </EuiCompressedFieldSearch>
                 </div>
               </EuiFlexItem>
             </div>
@@ -2462,7 +2491,7 @@ exports[`Services component renders jaeger services page 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -2473,7 +2502,7 @@ exports[`Services component renders jaeger services page 1`] = `
           title="jaeger"
         >
           Jaeger
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -2489,7 +2518,7 @@ exports[`Services component renders jaeger services page 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -2499,68 +2528,80 @@ exports[`Services component renders jaeger services page 1`] = `
             onClick={[Function]}
             title="jaeger"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="jaeger"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="jaeger"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconArrowDown
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconArrowDown
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                          fillRule="non-zero"
-                        />
-                      </svg>
-                    </EuiIconArrowDown>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Jaeger
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                            fillRule="non-zero"
+                          />
+                        </svg>
+                      </EuiIconArrowDown>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Jaeger
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -2832,8 +2873,8 @@ exports[`Services component renders jaeger services page 1`] = `
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 data-test-subj="search-bar-input-box"
                 fullWidth={true}
                 incremental={false}
@@ -2845,20 +2886,20 @@ exports[`Services component renders jaeger services page 1`] = `
                 value=""
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           data-test-subj="search-bar-input-box"
                           onChange={[Function]}
                           onKeyUp={[Function]}
@@ -2868,7 +2909,7 @@ exports[`Services component renders jaeger services page 1`] = `
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -2876,7 +2917,7 @@ exports[`Services component renders jaeger services page 1`] = `
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -2885,19 +2926,19 @@ exports[`Services component renders jaeger services page 1`] = `
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconSearch
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -2919,7 +2960,7 @@ exports[`Services component renders jaeger services page 1`] = `
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
@@ -3327,89 +3368,98 @@ exports[`Services component renders jaeger services page 1`] = `
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButton
+              <EuiSmallButton
                 data-click-metric-element="trace_analytics.refresh_button"
                 data-test-subj="superDatePickerApplyTimeButton"
                 iconType="refresh"
                 onClick={[Function]}
               >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
+                <EuiButton
                   data-click-metric-element="trace_analytics.refresh_button"
                   data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
                   iconType="refresh"
-                  isDisabled={false}
                   onClick={[Function]}
-                  type="button"
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     data-click-metric-element="trace_analytics.refresh_button"
                     data-test-subj="superDatePickerApplyTimeButton"
                     disabled={false}
+                    element="button"
+                    iconType="refresh"
+                    isDisabled={false}
                     onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      data-click-metric-element="trace_analytics.refresh_button"
+                      data-test-subj="superDatePickerApplyTimeButton"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        iconType="refresh"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
+                        <span
+                          className="euiButtonContent euiButton__content"
                         >
-                          <EuiIconRefresh
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="refresh"
                           >
-                            <svg
+                            <EuiIconRefresh
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
-                              />
-                            </svg>
-                          </EuiIconRefresh>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
+                                />
+                              </svg>
+                            </EuiIconRefresh>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Refresh
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiFlexItem>
         </div>
@@ -3471,7 +3521,7 @@ exports[`Services component renders jaeger services page 1`] = `
                   <EuiPopover
                     anchorPosition="rightUp"
                     button={
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Change all filters"
                         iconType="filter"
                         onClick={[Function]}
@@ -3495,54 +3545,62 @@ exports[`Services component renders jaeger services page 1`] = `
                       <div
                         className="euiPopover__anchor"
                       >
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="Change all filters"
                           iconType="filter"
                           onClick={[Function]}
                           title="Change all filters"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
+                            size="s"
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconFilter
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                color="inherit"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconFilter
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
-                                    fillRule="evenodd"
-                                  />
-                                </svg>
-                              </EuiIconFilter>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
+                                      fillRule="evenodd"
+                                    />
+                                  </svg>
+                                </EuiIconFilter>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiSmallButtonIcon>
                       </div>
                     </div>
                   </EuiPopover>
@@ -4109,7 +4167,7 @@ exports[`Services component renders services page 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -4120,7 +4178,7 @@ exports[`Services component renders services page 1`] = `
           title="data_prepper"
         >
           Data Prepper
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -4136,7 +4194,7 @@ exports[`Services component renders services page 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -4146,68 +4204,80 @@ exports[`Services component renders services page 1`] = `
             onClick={[Function]}
             title="data_prepper"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="data_prepper"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="data_prepper"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconArrowDown
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconArrowDown
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                          fillRule="non-zero"
-                        />
-                      </svg>
-                    </EuiIconArrowDown>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Data Prepper
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                            fillRule="non-zero"
+                          />
+                        </svg>
+                      </EuiIconArrowDown>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Data Prepper
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -4478,8 +4548,8 @@ exports[`Services component renders services page 1`] = `
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 data-test-subj="search-bar-input-box"
                 fullWidth={true}
                 incremental={false}
@@ -4491,20 +4561,20 @@ exports[`Services component renders services page 1`] = `
                 value=""
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           data-test-subj="search-bar-input-box"
                           onChange={[Function]}
                           onKeyUp={[Function]}
@@ -4514,7 +4584,7 @@ exports[`Services component renders services page 1`] = `
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -4522,7 +4592,7 @@ exports[`Services component renders services page 1`] = `
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -4531,19 +4601,19 @@ exports[`Services component renders services page 1`] = `
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconSearch
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -4565,7 +4635,7 @@ exports[`Services component renders services page 1`] = `
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
@@ -4973,89 +5043,98 @@ exports[`Services component renders services page 1`] = `
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButton
+              <EuiSmallButton
                 data-click-metric-element="trace_analytics.refresh_button"
                 data-test-subj="superDatePickerApplyTimeButton"
                 iconType="refresh"
                 onClick={[Function]}
               >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
+                <EuiButton
                   data-click-metric-element="trace_analytics.refresh_button"
                   data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
                   iconType="refresh"
-                  isDisabled={false}
                   onClick={[Function]}
-                  type="button"
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     data-click-metric-element="trace_analytics.refresh_button"
                     data-test-subj="superDatePickerApplyTimeButton"
                     disabled={false}
+                    element="button"
+                    iconType="refresh"
+                    isDisabled={false}
                     onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      data-click-metric-element="trace_analytics.refresh_button"
+                      data-test-subj="superDatePickerApplyTimeButton"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        iconType="refresh"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
+                        <span
+                          className="euiButtonContent euiButton__content"
                         >
-                          <EuiIconRefresh
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="refresh"
                           >
-                            <svg
+                            <EuiIconRefresh
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
-                              />
-                            </svg>
-                          </EuiIconRefresh>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
+                                />
+                              </svg>
+                            </EuiIconRefresh>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Refresh
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiFlexItem>
         </div>
@@ -5117,7 +5196,7 @@ exports[`Services component renders services page 1`] = `
                   <EuiPopover
                     anchorPosition="rightUp"
                     button={
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Change all filters"
                         iconType="filter"
                         onClick={[Function]}
@@ -5141,54 +5220,62 @@ exports[`Services component renders services page 1`] = `
                       <div
                         className="euiPopover__anchor"
                       >
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="Change all filters"
                           iconType="filter"
                           onClick={[Function]}
                           title="Change all filters"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
+                            size="s"
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconFilter
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                color="inherit"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconFilter
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
-                                    fillRule="evenodd"
-                                  />
-                                </svg>
-                              </EuiIconFilter>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
+                                      fillRule="evenodd"
+                                    />
+                                  </svg>
+                                </EuiIconFilter>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiSmallButtonIcon>
                       </div>
                     </div>
                   </EuiPopover>
@@ -5886,8 +5973,8 @@ exports[`Services component renders services page 1`] = `
                 <div
                   className="euiFlexItem"
                 >
-                  <EuiFieldSearch
-                    compressed={false}
+                  <EuiCompressedFieldSearch
+                    compressed={true}
                     fullWidth={false}
                     incremental={false}
                     isClearable={true}
@@ -5899,13 +5986,13 @@ exports[`Services component renders services page 1`] = `
                     value=""
                   >
                     <EuiFormControlLayout
-                      compressed={false}
+                      compressed={true}
                       fullWidth={false}
                       icon="search"
                       isLoading={false}
                     >
                       <div
-                        className="euiFormControlLayout"
+                        className="euiFormControlLayout euiFormControlLayout--compressed"
                       >
                         <div
                           className="euiFormControlLayout__childrenWrapper"
@@ -5914,7 +6001,7 @@ exports[`Services component renders services page 1`] = `
                             isInvalid={false}
                           >
                             <input
-                              className="euiFieldSearch"
+                              className="euiFieldSearch euiFieldSearch--compressed"
                               onChange={[Function]}
                               onKeyUp={[Function]}
                               placeholder="Service name"
@@ -5923,7 +6010,7 @@ exports[`Services component renders services page 1`] = `
                             />
                           </EuiValidatableControl>
                           <EuiFormControlLayoutIcons
-                            compressed={false}
+                            compressed={true}
                             icon="search"
                             isLoading={false}
                           >
@@ -5931,7 +6018,7 @@ exports[`Services component renders services page 1`] = `
                               className="euiFormControlLayoutIcons"
                             >
                               <EuiFormControlLayoutCustomIcon
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <span
@@ -5940,19 +6027,19 @@ exports[`Services component renders services page 1`] = `
                                   <EuiIcon
                                     aria-hidden="true"
                                     className="euiFormControlLayoutCustomIcon__icon"
-                                    size="m"
+                                    size="s"
                                     type="search"
                                   >
                                     <EuiIconSearch
                                       aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                      className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                       focusable="false"
                                       role="img"
                                       style={null}
                                     >
                                       <svg
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
                                         height={16}
                                         role="img"
@@ -5974,7 +6061,7 @@ exports[`Services component renders services page 1`] = `
                         </div>
                       </div>
                     </EuiFormControlLayout>
-                  </EuiFieldSearch>
+                  </EuiCompressedFieldSearch>
                 </div>
               </EuiFlexItem>
             </div>
diff --git a/public/components/trace_analytics/components/services/service_trends_plots.tsx b/public/components/trace_analytics/components/services/service_trends_plots.tsx
index 15c3cbeb6..de916aab9 100644
--- a/public/components/trace_analytics/components/services/service_trends_plots.tsx
+++ b/public/components/trace_analytics/components/services/service_trends_plots.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
   EuiI18nNumber,
@@ -68,7 +68,7 @@ export const ServiceTrendsPlots = ({
                 </EuiText>
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiButtonIcon
+                <EuiSmallButtonIcon
                   aria-label="Close popover"
                   iconType="cross"
                   color="text"
diff --git a/public/components/trace_analytics/components/services/service_view.tsx b/public/components/trace_analytics/components/services/service_view.tsx
index a6e1f8c85..5ad25aecf 100644
--- a/public/components/trace_analytics/components/services/service_view.tsx
+++ b/public/components/trace_analytics/components/services/service_view.tsx
@@ -6,7 +6,7 @@
 
 import {
   EuiBadge,
-  EuiButton,
+  EuiSmallButton,
   EuiContextMenu,
   EuiContextMenuPanelDescriptor,
   EuiFlexGroup,
@@ -154,14 +154,14 @@ export function ServiceView(props: ServiceViewProps) {
   }, [props.startTime, props.endTime, props.serviceName, props.mode]);
 
   const actionsButton = (
-    <EuiButton
+    <EuiSmallButton
       data-test-subj="ActionContextMenu"
       iconType="arrowDown"
       iconSide="right"
       onClick={() => setActionsMenuPopover(true)}
     >
       Actions
-    </EuiButton>
+    </EuiSmallButton>
   );
 
   const actionsMenu: EuiContextMenuPanelDescriptor[] = [
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
index 1cdc7e098..c6a920040 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces.test.tsx.snap
@@ -257,7 +257,7 @@ exports[`Traces component renders empty traces page 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -268,7 +268,7 @@ exports[`Traces component renders empty traces page 1`] = `
           title="data_prepper"
         >
           Data Prepper
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -284,7 +284,7 @@ exports[`Traces component renders empty traces page 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -294,67 +294,79 @@ exports[`Traces component renders empty traces page 1`] = `
             onClick={[Function]}
             title="data_prepper"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="data_prepper"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="data_prepper"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconBeaker
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconBeaker
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                        />
-                      </svg>
-                    </EuiIconBeaker>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Data Prepper
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                          />
+                        </svg>
+                      </EuiIconBeaker>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Data Prepper
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -635,8 +647,8 @@ exports[`Traces component renders empty traces page 1`] = `
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 data-test-subj="search-bar-input-box"
                 fullWidth={true}
                 incremental={false}
@@ -648,20 +660,20 @@ exports[`Traces component renders empty traces page 1`] = `
                 value=""
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           data-test-subj="search-bar-input-box"
                           onChange={[Function]}
                           onKeyUp={[Function]}
@@ -671,7 +683,7 @@ exports[`Traces component renders empty traces page 1`] = `
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -679,7 +691,7 @@ exports[`Traces component renders empty traces page 1`] = `
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -688,19 +700,19 @@ exports[`Traces component renders empty traces page 1`] = `
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconBeaker
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -722,7 +734,7 @@ exports[`Traces component renders empty traces page 1`] = `
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
@@ -1128,89 +1140,98 @@ exports[`Traces component renders empty traces page 1`] = `
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButton
+              <EuiSmallButton
                 data-click-metric-element="trace_analytics.refresh_button"
                 data-test-subj="superDatePickerApplyTimeButton"
                 iconType="refresh"
                 onClick={[Function]}
               >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
+                <EuiButton
                   data-click-metric-element="trace_analytics.refresh_button"
                   data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
                   iconType="refresh"
-                  isDisabled={false}
                   onClick={[Function]}
-                  type="button"
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     data-click-metric-element="trace_analytics.refresh_button"
                     data-test-subj="superDatePickerApplyTimeButton"
                     disabled={false}
+                    element="button"
+                    iconType="refresh"
+                    isDisabled={false}
                     onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      data-click-metric-element="trace_analytics.refresh_button"
+                      data-test-subj="superDatePickerApplyTimeButton"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        iconType="refresh"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
+                        <span
+                          className="euiButtonContent euiButton__content"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="refresh"
                           >
-                            <svg
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Refresh
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiFlexItem>
         </div>
@@ -1272,7 +1293,7 @@ exports[`Traces component renders empty traces page 1`] = `
                   <EuiPopover
                     anchorPosition="rightUp"
                     button={
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Change all filters"
                         iconType="filter"
                         onClick={[Function]}
@@ -1296,53 +1317,61 @@ exports[`Traces component renders empty traces page 1`] = `
                       <div
                         className="euiPopover__anchor"
                       >
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="Change all filters"
                           iconType="filter"
                           onClick={[Function]}
                           title="Change all filters"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
+                            size="s"
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconBeaker
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                color="inherit"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconBeaker
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                  />
-                                </svg>
-                              </EuiIconBeaker>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                    />
+                                  </svg>
+                                </EuiIconBeaker>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiSmallButtonIcon>
                       </div>
                     </div>
                   </EuiPopover>
@@ -1942,7 +1971,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -1953,7 +1982,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
           title="jaeger"
         >
           Jaeger
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -1969,7 +1998,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -1979,68 +2008,80 @@ exports[`Traces component renders jaeger traces page 1`] = `
             onClick={[Function]}
             title="jaeger"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="jaeger"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="jaeger"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconArrowDown
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconArrowDown
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                          fillRule="non-zero"
-                        />
-                      </svg>
-                    </EuiIconArrowDown>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Jaeger
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                            fillRule="non-zero"
+                          />
+                        </svg>
+                      </EuiIconArrowDown>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Jaeger
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -2321,8 +2362,8 @@ exports[`Traces component renders jaeger traces page 1`] = `
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 data-test-subj="search-bar-input-box"
                 fullWidth={true}
                 incremental={false}
@@ -2334,20 +2375,20 @@ exports[`Traces component renders jaeger traces page 1`] = `
                 value=""
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           data-test-subj="search-bar-input-box"
                           onChange={[Function]}
                           onKeyUp={[Function]}
@@ -2357,7 +2398,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -2365,7 +2406,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -2374,19 +2415,19 @@ exports[`Traces component renders jaeger traces page 1`] = `
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconSearch
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -2408,7 +2449,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
@@ -2816,89 +2857,98 @@ exports[`Traces component renders jaeger traces page 1`] = `
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButton
+              <EuiSmallButton
                 data-click-metric-element="trace_analytics.refresh_button"
                 data-test-subj="superDatePickerApplyTimeButton"
                 iconType="refresh"
                 onClick={[Function]}
               >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
+                <EuiButton
                   data-click-metric-element="trace_analytics.refresh_button"
                   data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
                   iconType="refresh"
-                  isDisabled={false}
                   onClick={[Function]}
-                  type="button"
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     data-click-metric-element="trace_analytics.refresh_button"
                     data-test-subj="superDatePickerApplyTimeButton"
                     disabled={false}
+                    element="button"
+                    iconType="refresh"
+                    isDisabled={false}
                     onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      data-click-metric-element="trace_analytics.refresh_button"
+                      data-test-subj="superDatePickerApplyTimeButton"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        iconType="refresh"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
+                        <span
+                          className="euiButtonContent euiButton__content"
                         >
-                          <EuiIconRefresh
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="refresh"
                           >
-                            <svg
+                            <EuiIconRefresh
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
-                              />
-                            </svg>
-                          </EuiIconRefresh>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
+                                />
+                              </svg>
+                            </EuiIconRefresh>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Refresh
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiFlexItem>
         </div>
@@ -2960,7 +3010,7 @@ exports[`Traces component renders jaeger traces page 1`] = `
                   <EuiPopover
                     anchorPosition="rightUp"
                     button={
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Change all filters"
                         iconType="filter"
                         onClick={[Function]}
@@ -2984,54 +3034,62 @@ exports[`Traces component renders jaeger traces page 1`] = `
                       <div
                         className="euiPopover__anchor"
                       >
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="Change all filters"
                           iconType="filter"
                           onClick={[Function]}
                           title="Change all filters"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
+                            size="s"
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconFilter
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                color="inherit"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconFilter
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
-                                    fillRule="evenodd"
-                                  />
-                                </svg>
-                              </EuiIconFilter>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
+                                      fillRule="evenodd"
+                                    />
+                                  </svg>
+                                </EuiIconFilter>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiSmallButtonIcon>
                       </div>
                     </div>
                   </EuiPopover>
@@ -3632,7 +3690,7 @@ exports[`Traces component renders traces page 1`] = `
       anchorClassName="eui-textTruncate"
       anchorPosition="downCenter"
       button={
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           className="dscIndexPattern__triggerButton"
           color="text"
           data-test-subj="indexPattern-switch-link"
@@ -3643,7 +3701,7 @@ exports[`Traces component renders traces page 1`] = `
           title="data_prepper"
         >
           Data Prepper
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       }
       className="eui-textTruncate"
       closePopover={[Function]}
@@ -3659,7 +3717,7 @@ exports[`Traces component renders traces page 1`] = `
         <div
           className="euiPopover__anchor eui-textTruncate"
         >
-          <EuiButtonEmpty
+          <EuiSmallButtonEmpty
             className="dscIndexPattern__triggerButton"
             color="text"
             data-test-subj="indexPattern-switch-link"
@@ -3669,68 +3727,80 @@ exports[`Traces component renders traces page 1`] = `
             onClick={[Function]}
             title="data_prepper"
           >
-            <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+            <EuiButtonEmpty
+              className="dscIndexPattern__triggerButton"
+              color="text"
               data-test-subj="indexPattern-switch-link"
-              disabled={false}
+              flush="left"
+              iconSide="right"
+              iconType="arrowDown"
               onClick={[Function]}
+              size="s"
               title="data_prepper"
-              type="button"
             >
-              <EuiButtonContent
-                className="euiButtonEmpty__content"
-                iconSide="right"
-                iconSize="m"
-                iconType="arrowDown"
-                textProps={
-                  Object {
-                    "className": "euiButtonEmpty__text",
-                  }
-                }
+              <button
+                className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty--flushLeft dscIndexPattern__triggerButton"
+                data-test-subj="indexPattern-switch-link"
+                disabled={false}
+                onClick={[Function]}
+                title="data_prepper"
+                type="button"
               >
-                <span
-                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="right"
+                  iconSize="m"
+                  iconType="arrowDown"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text",
+                    }
+                  }
                 >
-                  <EuiIcon
-                    className="euiButtonContent__icon"
-                    color="inherit"
-                    size="m"
-                    type="arrowDown"
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                   >
-                    <EuiIconArrowDown
-                      aria-hidden={true}
-                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                      focusable="false"
-                      role="img"
-                      style={null}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      size="m"
+                      type="arrowDown"
                     >
-                      <svg
+                      <EuiIconArrowDown
                         aria-hidden={true}
                         className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                         focusable="false"
-                        height={16}
                         role="img"
                         style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
                       >
-                        <path
-                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                          fillRule="non-zero"
-                        />
-                      </svg>
-                    </EuiIconArrowDown>
-                  </EuiIcon>
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Data Prepper
+                        <svg
+                          aria-hidden={true}
+                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                          focusable="false"
+                          height={16}
+                          role="img"
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                            fillRule="non-zero"
+                          />
+                        </svg>
+                      </EuiIconArrowDown>
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Data Prepper
+                    </span>
                   </span>
-                </span>
-              </EuiButtonContent>
-            </button>
-          </EuiButtonEmpty>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiSmallButtonEmpty>
         </div>
       </div>
     </EuiPopover>
@@ -4010,8 +4080,8 @@ exports[`Traces component renders traces page 1`] = `
             <div
               className="euiFlexItem"
             >
-              <EuiFieldSearch
-                compressed={false}
+              <EuiCompressedFieldSearch
+                compressed={true}
                 data-test-subj="search-bar-input-box"
                 fullWidth={true}
                 incremental={false}
@@ -4023,20 +4093,20 @@ exports[`Traces component renders traces page 1`] = `
                 value=""
               >
                 <EuiFormControlLayout
-                  compressed={false}
+                  compressed={true}
                   fullWidth={true}
                   icon="search"
                   isLoading={false}
                 >
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                   >
                     <div
                       className="euiFormControlLayout__childrenWrapper"
                     >
                       <EuiValidatableControl>
                         <input
-                          className="euiFieldSearch euiFieldSearch--fullWidth"
+                          className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed"
                           data-test-subj="search-bar-input-box"
                           onChange={[Function]}
                           onKeyUp={[Function]}
@@ -4046,7 +4116,7 @@ exports[`Traces component renders traces page 1`] = `
                         />
                       </EuiValidatableControl>
                       <EuiFormControlLayoutIcons
-                        compressed={false}
+                        compressed={true}
                         icon="search"
                         isLoading={false}
                       >
@@ -4054,7 +4124,7 @@ exports[`Traces component renders traces page 1`] = `
                           className="euiFormControlLayoutIcons"
                         >
                           <EuiFormControlLayoutCustomIcon
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <span
@@ -4063,19 +4133,19 @@ exports[`Traces component renders traces page 1`] = `
                               <EuiIcon
                                 aria-hidden="true"
                                 className="euiFormControlLayoutCustomIcon__icon"
-                                size="m"
+                                size="s"
                                 type="search"
                               >
                                 <EuiIconSearch
                                   aria-hidden={true}
-                                  className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                  className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                   focusable="false"
                                   role="img"
                                   style={null}
                                 >
                                   <svg
                                     aria-hidden={true}
-                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                    className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                     focusable="false"
                                     height={16}
                                     role="img"
@@ -4097,7 +4167,7 @@ exports[`Traces component renders traces page 1`] = `
                     </div>
                   </div>
                 </EuiFormControlLayout>
-              </EuiFieldSearch>
+              </EuiCompressedFieldSearch>
             </div>
           </EuiFlexItem>
           <EuiFlexItem
@@ -4505,89 +4575,98 @@ exports[`Traces component renders traces page 1`] = `
             <div
               className="euiFlexItem euiFlexItem--flexGrowZero"
             >
-              <EuiButton
+              <EuiSmallButton
                 data-click-metric-element="trace_analytics.refresh_button"
                 data-test-subj="superDatePickerApplyTimeButton"
                 iconType="refresh"
                 onClick={[Function]}
               >
-                <EuiButtonDisplay
-                  baseClassName="euiButton"
+                <EuiButton
                   data-click-metric-element="trace_analytics.refresh_button"
                   data-test-subj="superDatePickerApplyTimeButton"
-                  disabled={false}
-                  element="button"
                   iconType="refresh"
-                  isDisabled={false}
                   onClick={[Function]}
-                  type="button"
+                  size="s"
                 >
-                  <button
-                    className="euiButton euiButton--primary"
+                  <EuiButtonDisplay
+                    baseClassName="euiButton"
                     data-click-metric-element="trace_analytics.refresh_button"
                     data-test-subj="superDatePickerApplyTimeButton"
                     disabled={false}
+                    element="button"
+                    iconType="refresh"
+                    isDisabled={false}
                     onClick={[Function]}
-                    style={
-                      Object {
-                        "minWidth": undefined,
-                      }
-                    }
+                    size="s"
                     type="button"
                   >
-                    <EuiButtonContent
-                      className="euiButton__content"
-                      iconSide="left"
-                      iconType="refresh"
-                      textProps={
+                    <button
+                      className="euiButton euiButton--primary euiButton--small"
+                      data-click-metric-element="trace_analytics.refresh_button"
+                      data-test-subj="superDatePickerApplyTimeButton"
+                      disabled={false}
+                      onClick={[Function]}
+                      style={
                         Object {
-                          "className": "euiButton__text",
+                          "minWidth": undefined,
                         }
                       }
+                      type="button"
                     >
-                      <span
-                        className="euiButtonContent euiButton__content"
+                      <EuiButtonContent
+                        className="euiButton__content"
+                        iconSide="left"
+                        iconType="refresh"
+                        textProps={
+                          Object {
+                            "className": "euiButton__text",
+                          }
+                        }
                       >
-                        <EuiIcon
-                          className="euiButtonContent__icon"
-                          color="inherit"
-                          size="m"
-                          type="refresh"
+                        <span
+                          className="euiButtonContent euiButton__content"
                         >
-                          <EuiIconRefresh
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
+                          <EuiIcon
+                            className="euiButtonContent__icon"
+                            color="inherit"
+                            size="m"
+                            type="refresh"
                           >
-                            <svg
+                            <EuiIconRefresh
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
-                              />
-                            </svg>
-                          </EuiIconRefresh>
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          Refresh
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058ZM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0Z"
+                                />
+                              </svg>
+                            </EuiIconRefresh>
+                          </EuiIcon>
+                          <span
+                            className="euiButton__text"
+                          >
+                            Refresh
+                          </span>
                         </span>
-                      </span>
-                    </EuiButtonContent>
-                  </button>
-                </EuiButtonDisplay>
-              </EuiButton>
+                      </EuiButtonContent>
+                    </button>
+                  </EuiButtonDisplay>
+                </EuiButton>
+              </EuiSmallButton>
             </div>
           </EuiFlexItem>
         </div>
@@ -4649,7 +4728,7 @@ exports[`Traces component renders traces page 1`] = `
                   <EuiPopover
                     anchorPosition="rightUp"
                     button={
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Change all filters"
                         iconType="filter"
                         onClick={[Function]}
@@ -4673,54 +4752,62 @@ exports[`Traces component renders traces page 1`] = `
                       <div
                         className="euiPopover__anchor"
                       >
-                        <EuiButtonIcon
+                        <EuiSmallButtonIcon
                           aria-label="Change all filters"
                           iconType="filter"
                           onClick={[Function]}
                           title="Change all filters"
                         >
-                          <button
+                          <EuiButtonIcon
                             aria-label="Change all filters"
-                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            disabled={false}
+                            iconType="filter"
                             onClick={[Function]}
+                            size="s"
                             title="Change all filters"
-                            type="button"
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              color="inherit"
-                              size="m"
-                              type="filter"
+                            <button
+                              aria-label="Change all filters"
+                              className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                              disabled={false}
+                              onClick={[Function]}
+                              title="Change all filters"
+                              type="button"
                             >
-                              <EuiIconFilter
-                                aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                focusable="false"
-                                role="img"
-                                style={null}
+                              <EuiIcon
+                                aria-hidden="true"
+                                className="euiButtonIcon__icon"
+                                color="inherit"
+                                size="m"
+                                type="filter"
                               >
-                                <svg
+                                <EuiIconFilter
                                   aria-hidden={true}
                                   className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                                   focusable="false"
-                                  height={16}
                                   role="img"
                                   style={null}
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
                                 >
-                                  <path
-                                    d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
-                                    fillRule="evenodd"
-                                  />
-                                </svg>
-                              </EuiIconFilter>
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
+                                  <svg
+                                    aria-hidden={true}
+                                    className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                    focusable="false"
+                                    height={16}
+                                    role="img"
+                                    style={null}
+                                    viewBox="0 0 16 16"
+                                    width={16}
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="M7.999 15.999a8 8 0 1 1 0-16 8 8 0 0 1 0 16ZM8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM3.5 5h9a.5.5 0 1 1 0 1h-9a.5.5 0 0 1 0-1Zm2 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 0 1 0-1Zm2 3h1a.5.5 0 1 1 0 1h-1a.5.5 0 1 1 0-1Z"
+                                      fillRule="evenodd"
+                                    />
+                                  </svg>
+                                </EuiIconFilter>
+                              </EuiIcon>
+                            </button>
+                          </EuiButtonIcon>
+                        </EuiSmallButtonIcon>
                       </div>
                     </div>
                   </EuiPopover>
diff --git a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap
index 0662d5db1..bb86e197a 100644
--- a/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap
+++ b/public/components/trace_analytics/components/traces/__tests__/__snapshots__/traces_table.test.tsx.snap
@@ -73,14 +73,14 @@ exports[`Traces table component renders empty traces table message 1`] = `
       >
         <EuiEmptyPrompt
           actions={
-            <EuiButton
+            <EuiSmallButton
               color="primary"
               iconSide="right"
               iconType="popout"
               onClick={[Function]}
             >
               Learn more
-            </EuiButton>
+            </EuiSmallButton>
           }
           body={
             <EuiText>
@@ -140,87 +140,96 @@ exports[`Traces table component renders empty traces table message 1`] = `
                 className="euiSpacer euiSpacer--l"
               />
             </EuiSpacer>
-            <EuiButton
+            <EuiSmallButton
               color="primary"
               iconSide="right"
               iconType="popout"
               onClick={[Function]}
             >
-              <EuiButtonDisplay
-                baseClassName="euiButton"
+              <EuiButton
                 color="primary"
-                disabled={false}
-                element="button"
                 iconSide="right"
                 iconType="popout"
-                isDisabled={false}
                 onClick={[Function]}
-                type="button"
+                size="s"
               >
-                <button
-                  className="euiButton euiButton--primary"
+                <EuiButtonDisplay
+                  baseClassName="euiButton"
+                  color="primary"
                   disabled={false}
+                  element="button"
+                  iconSide="right"
+                  iconType="popout"
+                  isDisabled={false}
                   onClick={[Function]}
-                  style={
-                    Object {
-                      "minWidth": undefined,
-                    }
-                  }
+                  size="s"
                   type="button"
                 >
-                  <EuiButtonContent
-                    className="euiButton__content"
-                    iconSide="right"
-                    iconType="popout"
-                    textProps={
+                  <button
+                    className="euiButton euiButton--primary euiButton--small"
+                    disabled={false}
+                    onClick={[Function]}
+                    style={
                       Object {
-                        "className": "euiButton__text",
+                        "minWidth": undefined,
                       }
                     }
+                    type="button"
                   >
-                    <span
-                      className="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                    <EuiButtonContent
+                      className="euiButton__content"
+                      iconSide="right"
+                      iconType="popout"
+                      textProps={
+                        Object {
+                          "className": "euiButton__text",
+                        }
+                      }
                     >
-                      <EuiIcon
-                        className="euiButtonContent__icon"
-                        color="inherit"
-                        size="m"
-                        type="popout"
+                      <span
+                        className="euiButtonContent euiButtonContent--iconRight euiButton__content"
                       >
-                        <EuiIconBeaker
-                          aria-hidden={true}
-                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                          focusable="false"
-                          role="img"
-                          style={null}
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          size="m"
+                          type="popout"
                         >
-                          <svg
+                          <EuiIconBeaker
                             aria-hidden={true}
                             className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                             focusable="false"
-                            height={16}
                             role="img"
                             style={null}
-                            viewBox="0 0 16 16"
-                            width={16}
-                            xmlns="http://www.w3.org/2000/svg"
                           >
-                            <path
-                              d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                            />
-                          </svg>
-                        </EuiIconBeaker>
-                      </EuiIcon>
-                      <span
-                        className="euiButton__text"
-                      >
-                        Learn more
+                            <svg
+                              aria-hidden={true}
+                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                              focusable="false"
+                              height={16}
+                              role="img"
+                              style={null}
+                              viewBox="0 0 16 16"
+                              width={16}
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                              />
+                            </svg>
+                          </EuiIconBeaker>
+                        </EuiIcon>
+                        <span
+                          className="euiButton__text"
+                        >
+                          Learn more
+                        </span>
                       </span>
-                    </span>
-                  </EuiButtonContent>
-                </button>
-              </EuiButtonDisplay>
-            </EuiButton>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonDisplay>
+              </EuiButton>
+            </EuiSmallButton>
           </div>
         </EuiEmptyPrompt>
       </MissingConfigurationMessage>
@@ -1155,58 +1164,67 @@ exports[`Traces table component renders jaeger traces table 1`] = `
                                               onMouseOut={[Function]}
                                               onMouseOver={[Function]}
                                             >
-                                              <EuiButtonIcon
+                                              <EuiSmallButtonIcon
                                                 aria-label="Copy trace id"
                                                 iconType="copyClipboard"
                                                 onBlur={[Function]}
                                                 onClick={[Function]}
                                                 onFocus={[Function]}
                                               >
-                                                <button
+                                                <EuiButtonIcon
                                                   aria-label="Copy trace id"
-                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                  disabled={false}
+                                                  iconType="copyClipboard"
                                                   onBlur={[Function]}
                                                   onClick={[Function]}
                                                   onFocus={[Function]}
-                                                  type="button"
+                                                  size="s"
                                                 >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    className="euiButtonIcon__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="copyClipboard"
+                                                  <button
+                                                    aria-label="Copy trace id"
+                                                    className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                                                    disabled={false}
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    type="button"
                                                   >
-                                                    <EuiIconCopyClipboard
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiButtonIcon__icon"
+                                                      color="inherit"
+                                                      size="m"
+                                                      type="copyClipboard"
                                                     >
-                                                      <svg
+                                                      <EuiIconCopyClipboard
                                                         aria-hidden={true}
                                                         className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                                                         focusable="false"
-                                                        height={16}
                                                         role="img"
                                                         style={null}
-                                                        viewBox="0 0 16 16"
-                                                        width={16}
-                                                        xmlns="http://www.w3.org/2000/svg"
                                                       >
-                                                        <path
-                                                          d="M0 2.729V2a1 1 0 0 1 1-1h2v1H1v12h4v1H1a1 1 0 0 1-1-1V2.729zM12 5V2a1 1 0 0 0-1-1H9v1h2v3h1zm-1 1h2v9H6V6h5V5H6a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2v1z"
-                                                        />
-                                                        <path
-                                                          d="M7 10h5V9H7zM7 8h5V7H7zM7 12h5v-1H7zM7 14h5v-1H7zM9 2V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v1h1V1h4v1h1ZM3 3h6V2H3z"
-                                                        />
-                                                      </svg>
-                                                    </EuiIconCopyClipboard>
-                                                  </EuiIcon>
-                                                </button>
-                                              </EuiButtonIcon>
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M0 2.729V2a1 1 0 0 1 1-1h2v1H1v12h4v1H1a1 1 0 0 1-1-1V2.729zM12 5V2a1 1 0 0 0-1-1H9v1h2v3h1zm-1 1h2v9H6V6h5V5H6a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2v1z"
+                                                          />
+                                                          <path
+                                                            d="M7 10h5V9H7zM7 8h5V7H7zM7 12h5v-1H7zM7 14h5v-1H7zM9 2V1a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v1h1V1h4v1h1ZM3 3h6V2H3z"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconCopyClipboard>
+                                                    </EuiIcon>
+                                                  </button>
+                                                </EuiButtonIcon>
+                                              </EuiSmallButtonIcon>
                                             </span>
                                           </EuiToolTip>
                                         </EuiCopy>
@@ -2708,55 +2726,64 @@ exports[`Traces table component renders traces table 1`] = `
                                               onMouseOut={[Function]}
                                               onMouseOver={[Function]}
                                             >
-                                              <EuiButtonIcon
+                                              <EuiSmallButtonIcon
                                                 aria-label="Copy trace id"
                                                 iconType="copyClipboard"
                                                 onBlur={[Function]}
                                                 onClick={[Function]}
                                                 onFocus={[Function]}
                                               >
-                                                <button
+                                                <EuiButtonIcon
                                                   aria-label="Copy trace id"
-                                                  className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                                                  disabled={false}
+                                                  iconType="copyClipboard"
                                                   onBlur={[Function]}
                                                   onClick={[Function]}
                                                   onFocus={[Function]}
-                                                  type="button"
+                                                  size="s"
                                                 >
-                                                  <EuiIcon
-                                                    aria-hidden="true"
-                                                    className="euiButtonIcon__icon"
-                                                    color="inherit"
-                                                    size="m"
-                                                    type="copyClipboard"
+                                                  <button
+                                                    aria-label="Copy trace id"
+                                                    className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+                                                    disabled={false}
+                                                    onBlur={[Function]}
+                                                    onClick={[Function]}
+                                                    onFocus={[Function]}
+                                                    type="button"
                                                   >
-                                                    <EuiIconBeaker
-                                                      aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                                      focusable="false"
-                                                      role="img"
-                                                      style={null}
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiButtonIcon__icon"
+                                                      color="inherit"
+                                                      size="m"
+                                                      type="copyClipboard"
                                                     >
-                                                      <svg
+                                                      <EuiIconBeaker
                                                         aria-hidden={true}
                                                         className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                         focusable="false"
-                                                        height={16}
                                                         role="img"
                                                         style={null}
-                                                        viewBox="0 0 16 16"
-                                                        width={16}
-                                                        xmlns="http://www.w3.org/2000/svg"
                                                       >
-                                                        <path
-                                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                        />
-                                                      </svg>
-                                                    </EuiIconBeaker>
-                                                  </EuiIcon>
-                                                </button>
-                                              </EuiButtonIcon>
+                                                        <svg
+                                                          aria-hidden={true}
+                                                          className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                          focusable="false"
+                                                          height={16}
+                                                          role="img"
+                                                          style={null}
+                                                          viewBox="0 0 16 16"
+                                                          width={16}
+                                                          xmlns="http://www.w3.org/2000/svg"
+                                                        >
+                                                          <path
+                                                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                          />
+                                                        </svg>
+                                                      </EuiIconBeaker>
+                                                    </EuiIcon>
+                                                  </button>
+                                                </EuiButtonIcon>
+                                              </EuiSmallButtonIcon>
                                             </span>
                                           </EuiToolTip>
                                         </EuiCopy>
diff --git a/public/components/trace_analytics/components/traces/flyout_list_item.tsx b/public/components/trace_analytics/components/traces/flyout_list_item.tsx
index d30d34315..2aa3be744 100644
--- a/public/components/trace_analytics/components/traces/flyout_list_item.tsx
+++ b/public/components/trace_analytics/components/traces/flyout_list_item.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiDescriptionList,
   EuiFlexGroup,
   EuiFlexItem,
@@ -37,7 +37,7 @@ export function FlyoutListItem(props: FlyoutListItemProps) {
         <EuiFlexItem grow={false}>
           {hover && props.addSpanFilter && (
             <EuiToolTip position="top" content="Filter spans on this value">
-              <EuiButtonIcon
+              <EuiSmallButtonIcon
                 aria-label="span-flyout-filter-icon"
                 iconType="filter"
                 onClick={props.addSpanFilter}
diff --git a/public/components/trace_analytics/components/traces/span_detail_flyout.tsx b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
index ea00220c3..a1af793c5 100644
--- a/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
+++ b/public/components/trace_analytics/components/traces/span_detail_flyout.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiButtonEmpty,
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiCodeBlock,
   EuiCopy,
   EuiFlexGroup,
@@ -124,7 +124,11 @@ export function SpanDetailFlyout(props: {
             <EuiFlexItem grow={false}>
               <EuiCopy textToCopy={getSpanValue(span, mode, 'SPAN_ID')}>
                 {(copy) => (
-                  <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
+                  <EuiSmallButtonIcon
+                    aria-label="copy-button"
+                    onClick={copy}
+                    iconType="copyClipboard"
+                  />
                 )}
               </EuiCopy>
             </EuiFlexItem>
@@ -144,7 +148,11 @@ export function SpanDetailFlyout(props: {
                 textToCopy={mode === 'data_prepper' ? span.parentSpanId : span.references[0].spanID}
               >
                 {(copy) => (
-                  <EuiButtonIcon aria-label="copy-button" onClick={copy} iconType="copyClipboard" />
+                  <EuiSmallButtonIcon
+                    aria-label="copy-button"
+                    onClick={copy}
+                    iconType="copyClipboard"
+                  />
                 )}
               </EuiCopy>
             </EuiFlexItem>
diff --git a/public/components/trace_analytics/components/traces/trace_view.tsx b/public/components/trace_analytics/components/traces/trace_view.tsx
index d71f3c92e..91a6f9f22 100644
--- a/public/components/trace_analytics/components/traces/trace_view.tsx
+++ b/public/components/trace_analytics/components/traces/trace_view.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiCodeBlock,
   EuiCopy,
   EuiFlexGroup,
@@ -84,13 +84,13 @@ export function TraceView(props: TraceViewProps) {
                     <EuiFlexItem grow={false}>
                       <EuiCopy textToCopy={fields.trace_id}>
                         {(copy) => (
-                          <EuiButtonIcon
+                          <EuiSmallButtonIcon
                             aria-label="Copy trace id"
                             iconType="copyClipboard"
                             onClick={copy}
                           >
                             Click to copy
-                          </EuiButtonIcon>
+                          </EuiSmallButtonIcon>
                         )}
                       </EuiCopy>
                     </EuiFlexItem>
diff --git a/public/components/trace_analytics/components/traces/traces_table.tsx b/public/components/trace_analytics/components/traces/traces_table.tsx
index cd6699961..b6d06ca7c 100644
--- a/public/components/trace_analytics/components/traces/traces_table.tsx
+++ b/public/components/trace_analytics/components/traces/traces_table.tsx
@@ -5,7 +5,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiCopy,
   EuiFlexGroup,
   EuiFlexItem,
@@ -75,13 +75,13 @@ export function TracesTable(props: TracesTableProps) {
               <EuiFlexItem grow={false}>
                 <EuiCopy textToCopy={item}>
                   {(copy) => (
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Copy trace id"
                       iconType="copyClipboard"
                       onClick={copy}
                     >
                       Click to copy
-                    </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   )}
                 </EuiCopy>
               </EuiFlexItem>
@@ -175,13 +175,13 @@ export function TracesTable(props: TracesTableProps) {
                 <EuiFlexItem grow={false}>
                   <EuiCopy textToCopy={item}>
                     {(copy) => (
-                      <EuiButtonIcon
+                      <EuiSmallButtonIcon
                         aria-label="Copy trace id"
                         iconType="copyClipboard"
                         onClick={copy}
                       >
                         Click to copy
-                      </EuiButtonIcon>
+                      </EuiSmallButtonIcon>
                     )}
                   </EuiCopy>
                 </EuiFlexItem>
diff --git a/public/components/visualizations/charts/data_table/data_table_header.tsx b/public/components/visualizations/charts/data_table/data_table_header.tsx
index 1c2d2b034..4c8b667c1 100644
--- a/public/components/visualizations/charts/data_table/data_table_header.tsx
+++ b/public/components/visualizations/charts/data_table/data_table_header.tsx
@@ -5,10 +5,10 @@
 
 import React, { useState, ReactChildren, ReactChild } from 'react';
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiButtonEmpty,
+  EuiSmallButtonEmpty,
   EuiPopover,
   EuiSwitch,
   EuiIcon,
@@ -85,7 +85,7 @@ export const GridHeader = ({
         />
       </EuiFlexItem>
       <EuiFlexItem style={{ maxWidth: GRID_HEADER_COLUMN_MAX_WIDTH }}>
-        <EuiButtonEmpty
+        <EuiSmallButtonEmpty
           iconSize="s"
           color="text"
           aria-label="Next"
@@ -93,7 +93,7 @@ export const GridHeader = ({
           onClick={() => setIsFullScreenHandler(true)}
         >
           Full screen
-        </EuiButtonEmpty>
+        </EuiSmallButtonEmpty>
       </EuiFlexItem>
       {isFullScreen && (
         <EuiIcon
@@ -118,7 +118,7 @@ export const DensityPopover = ({
   const closePopover = () => setIsPopoverOpen(false);
 
   const button = (
-    <EuiButtonEmpty
+    <EuiSmallButtonEmpty
       iconSize="s"
       color="text"
       aria-label="Next"
@@ -126,7 +126,7 @@ export const DensityPopover = ({
       onClick={onButtonClick}
     >
       Density
-    </EuiButtonEmpty>
+    </EuiSmallButtonEmpty>
   );
 
   return (
@@ -134,7 +134,7 @@ export const DensityPopover = ({
       <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
         {ROW_DENSITIES.map((i: RowConfigType, index: number) => (
           <EuiFlexItem key={index} grow={false}>
-            <EuiButtonIcon
+            <EuiSmallButtonIcon
               onClick={() => selectDensityHandler(i)}
               display={selectedDensity.icon === i.icon ? 'fill' : 'base'}
               iconType={i.icon}
@@ -161,7 +161,7 @@ export const ColumnVisiblityPopover = ({
   const closePopover = () => setIsPopoverOpen(false);
 
   const button = (
-    <EuiButtonEmpty
+    <EuiSmallButtonEmpty
       iconSize="s"
       color="text"
       aria-label="Next"
@@ -169,7 +169,7 @@ export const ColumnVisiblityPopover = ({
       onClick={onButtonClick}
     >
       Columns
-    </EuiButtonEmpty>
+    </EuiSmallButtonEmpty>
   );
 
   return (