diff --git a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
index 0b025ce1..d657875e 100644
--- a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
+++ b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
@@ -73,7 +73,7 @@ exports[`<Main /> panel render component 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -212,7 +212,7 @@ exports[`<Main /> panel render component 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -1017,7 +1017,7 @@ exports[`<Main /> panel render component after create success 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -1158,7 +1158,7 @@ exports[`<Main /> panel render component after create success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -2020,7 +2020,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -2161,7 +2161,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -3024,7 +3024,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
     />
     <div>
       <div
-        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
       >
         <div
           class="euiFlexItem euiSearchBar__searchHolder"
@@ -3165,7 +3165,7 @@ exports[`<Main /> panel render component after edit success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
diff --git a/public/components/main/__tests__/__snapshots__/reports_table.test.tsx.snap b/public/components/main/__tests__/__snapshots__/reports_table.test.tsx.snap
index ef44c99e..8a9259be 100644
--- a/public/components/main/__tests__/__snapshots__/reports_table.test.tsx.snap
+++ b/public/components/main/__tests__/__snapshots__/reports_table.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<ReportsTable /> panel render component 1`] = `
 <div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
   >
     <div
       class="euiFlexItem euiSearchBar__searchHolder"
@@ -142,7 +142,7 @@ exports[`<ReportsTable /> panel render component 1`] = `
     </div>
   </div>
   <div
-    class="euiSpacer euiSpacer--l"
+    class="euiSpacer euiSpacer--m"
   />
   <div
     class="euiBasicTable"
@@ -628,7 +628,7 @@ exports[`<ReportsTable /> panel render component 1`] = `
 exports[`<ReportsTable /> panel render empty component 1`] = `
 <div>
   <div
-    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
   >
     <div
       class="euiFlexItem euiSearchBar__searchHolder"
@@ -769,7 +769,7 @@ exports[`<ReportsTable /> panel render empty component 1`] = `
     </div>
   </div>
   <div
-    class="euiSpacer euiSpacer--l"
+    class="euiSpacer euiSpacer--m"
   />
   <div
     class="euiBasicTable"
diff --git a/public/components/report_definitions/report_settings/report_settings.tsx b/public/components/report_definitions/report_settings/report_settings.tsx
index a48d2f42..9e185862 100644
--- a/public/components/report_definitions/report_settings/report_settings.tsx
+++ b/public/components/report_definitions/report_settings/report_settings.tsx
@@ -13,6 +13,15 @@ import {
   EuiComboBox,
   EuiFormRow,
   EuiCallOut,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiTextArea,
+  EuiPageContentBody,
+  EuiPageContent,
+  EuiHorizontalRule,
+  EuiPageHeader,
+  EuiTitle,
+  EuiFieldText,
 } from '@elastic/eui';
 import {
   REPORT_SOURCE_RADIOS,