diff --git a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
index 55d94177..68172576 100644
--- a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
+++ b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap
@@ -59,7 +59,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"
@@ -186,7 +186,7 @@ exports[`<Main /> panel render component 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -952,7 +952,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"
@@ -1093,7 +1093,7 @@ exports[`<Main /> panel render component after create success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -1934,7 +1934,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"
@@ -2075,7 +2075,7 @@ exports[`<Main /> panel render component after delete success 1`] = `
         </div>
       </div>
       <div
-        class="euiSpacer euiSpacer--l"
+        class="euiSpacer euiSpacer--m"
       />
       <div
         class="euiBasicTable"
@@ -2925,7 +2925,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"
@@ -3066,7 +3066,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 dd67e6e9..04ab4588 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"
@@ -130,7 +130,7 @@ exports[`<ReportsTable /> panel render component 1`] = `
     </div>
   </div>
   <div
-    class="euiSpacer euiSpacer--l"
+    class="euiSpacer euiSpacer--m"
   />
   <div
     class="euiBasicTable"
@@ -586,7 +586,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"
@@ -727,7 +727,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 3d9713ab..77ea30cf 100644
--- a/public/components/report_definitions/report_settings/report_settings.tsx
+++ b/public/components/report_definitions/report_settings/report_settings.tsx
@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import createDOMPurify from 'dompurify';
 import React, { useEffect, useState } from 'react';
 import { i18n } from '@osd/i18n';
 import {
@@ -309,6 +310,8 @@ export function ReportSettings(props: ReportSettingProps) {
       setCheckboxIdSelectHeaderFooter(newCheckboxIdToSelectedMap);
     };
 
+    const DOMPurify = createDOMPurify(window);
+
     const showFooter = checkboxIdSelectHeaderFooter.footer ? (
       <EuiFormRow
         label={i18n.translate('opensearch.reports.reportSettingProps.footer', {
@@ -326,7 +329,7 @@ export function ReportSettings(props: ReportSettingProps) {
             ['unordered-list', 'ordered-list', 'checked-list'],
           ]}
           generateMarkdownPreview={(markdown) =>
-            Promise.resolve(converter.makeHtml(markdown))
+            Promise.resolve(DOMPurify.sanitize(converter.makeHtml(markdown)))
           }
         />
       </EuiFormRow>
@@ -349,7 +352,7 @@ export function ReportSettings(props: ReportSettingProps) {
             ['unordered-list', 'ordered-list', 'checked-list'],
           ]}
           generateMarkdownPreview={(markdown) =>
-            Promise.resolve(converter.makeHtml(markdown))
+            Promise.resolve(DOMPurify.sanitize(converter.makeHtml(markdown)))
           }
         />
       </EuiFormRow>